/**
 * Command Center Level 2 Styles
 * Premium dark theme with jade (var(--odei-color-jade-500)) accent
 *
 * Layout:
 * - Context Bar: Local time, zone, capacity, readiness
 * - Week Goal: Active week goal with progress bar
 * - Quick Capture: Fast task creation
 * - Task Columns: Physical | Digital | Activity Feed
 * - AI Status Bar: Conductor state and controls
 */

/* ============================================
   CSS VARIABLES - Theme Tokens
   ============================================ */
:root {
  --accent-primary: var(--odei-color-jade-500);
  --accent-secondary: var(--odei-color-gold-500);
  --accent-danger: var(--odei-color-danger-400);
  --bg-01: #05060a;
  --bg-02: #0b0e14;
  --bg-03: #121622;
  --bg-04: #1d2331;
  --ink-high: #e8ecf4;
  --ink-med: #b6c0d2;
  --ink-low: #7c889a;
  --glass-border: rgba(var(--odei-color-jade-rgb), 0.3);
  --glass-border-hover: rgba(var(--odei-color-jade-rgb), 0.5);
  --glow-accent: rgba(var(--odei-color-jade-rgb), 0.2);
  --surface-01: rgba(15, 20, 34, 0.72);
  --surface-02: rgba(12, 16, 28, 0.62);
  --surface-03: rgba(8, 10, 18, 0.7);
  --surface-strong: rgba(19, 24, 38, 0.86);
  --stroke-soft: rgba(var(--odei-color-jade-rgb), 0.18);
  --stroke-strong: rgba(var(--odei-color-jade-rgb), 0.35);
  --shadow-soft: 0 8px 24px rgba(4, 7, 14, 0.35);
  --shadow-strong: 0 20px 40px rgba(3, 6, 12, 0.55);
  --transition: cubic-bezier(0.16, 1, 0.3, 1);
  --diff-created: #22c55e;
  --diff-updated: #eab308;
  --diff-deleted: #ef4444;
  --diff-unchanged: rgba(127, 127, 127, 0.3);
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

/* ============================================
   Command Center Container
   ============================================ */
.command-center {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(var(--odei-color-jade-rgb), 0.18), transparent 65%),
    radial-gradient(1000px 520px at 92% -15%, rgba(var(--odei-color-gold-rgb), 0.12), transparent 70%),
    linear-gradient(180deg, #0b0e14 0%, #05060a 70%, #040509 100%);
  overflow: hidden; /* Constrain flex layout; children handle their own scroll */
  font-family: var(--font-body, 'Space Grotesk', 'Manrope', sans-serif);
  color: var(--ink-high);
}

/* Smooth scrollbar for entire command center */
.command-center::-webkit-scrollbar {
  width: 10px;
}

.command-center::-webkit-scrollbar-track {
  background: var(--bg-01);
}

.command-center::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--odei-color-jade-rgb), 0.4), rgba(var(--odei-color-jade-rgb), 0.2));
  border-radius: 5px;
  border: 2px solid var(--bg-01);
}

.command-center::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(var(--odei-color-jade-rgb), 0.6), rgba(var(--odei-color-jade-rgb), 0.4));
}

/* ============================================
   Context Bar
   ============================================ */
.command-context-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(180deg, rgba(18, 23, 38, 0.92) 0%, rgba(9, 12, 20, 0.88) 100%);
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.12);
  box-shadow: 0 12px 24px rgba(3, 6, 12, 0.45);
  backdrop-filter: blur(14px);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.context-left,
.context-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.context-location {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--stroke-strong);
  background: linear-gradient(180deg, rgba(15, 21, 34, 0.88) 0%, rgba(10, 14, 24, 0.86) 100%);
  box-shadow: var(--shadow-soft);
}

.context-icon {
  font-size: 14px;
}

.context-city {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-high);
}

.context-time {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent-primary);
  font-family: var(--font-data, 'IBM Plex Mono', 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(var(--odei-color-jade-rgb), 0.35);
}

.context-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(12, 18, 30, 0.72);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.2);
  box-shadow: var(--shadow-soft);
}

.context-zone .zone-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-primary);
}

.context-zone .zone-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--accent-primary);
  font-family: var(--font-tactical, 'Eurostile', 'DIN', sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Zone states */
.context-zone.zone-peak .zone-indicator {
  background: var(--odei-color-jade-500);
  box-shadow: 0 0 8px rgba(var(--odei-color-jade-rgb), 0.6);
}

.context-zone.zone-afternoon .zone-indicator {
  background: var(--accent-secondary);
}

.context-zone.zone-afternoon .zone-label {
  color: var(--accent-secondary);
}

.context-zone.zone-evening .zone-indicator {
  background: #ff8b5a;
}

.context-zone.zone-evening .zone-label {
  color: #ff8b5a;
}

.context-zone.zone-night .zone-indicator {
  background: var(--ink-low);
}

.context-zone.zone-night .zone-label {
  color: var(--ink-low);
}

.context-metric {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 82px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface-02);
  border: 1px solid var(--stroke-soft);
  box-shadow: var(--shadow-soft);
}

.context-metric .metric-label {
  font-size: 9px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.context-metric .metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
  font-family: var(--font-data, 'IBM Plex Mono', 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
}

.context-metric .metric-value.warning {
  color: var(--accent-secondary);
}

.context-metric .metric-value.danger {
  color: var(--accent-danger);
}

.context-metric.clickable {
  background: linear-gradient(180deg, rgba(18, 24, 38, 0.82), rgba(10, 14, 24, 0.82));
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.24);
  padding: 8px 12px;
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  font: inherit;
  color: inherit;
}

.context-metric.clickable:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.5);
  transform: translateY(-1px);
  box-shadow: var(--shadow-strong);
}

.context-metric.clickable.active {
  border-color: rgba(var(--odei-color-jade-rgb), 0.7);
  box-shadow: 0 0 0 1px rgba(var(--odei-color-jade-rgb), 0.4);
}

.context-metric .metric-sub {
  font-size: 9px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--font-tactical, 'Eurostile', 'DIN', sans-serif);
}

.command-context-widgets {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 8px 20px 6px;
}

.context-widget {
  position: relative;
  background: linear-gradient(180deg, rgba(20, 26, 40, 0.82), rgba(11, 15, 26, 0.82));
  border: 1px solid var(--stroke-soft);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: fadeInUp 0.45s var(--transition) both;
}

.context-widget:nth-child(2) {
  animation-delay: 0.05s;
}

.context-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(var(--odei-color-jade-rgb), 0.15), transparent 45%);
  opacity: 0.4;
  pointer-events: none;
}

.context-widget > * {
  position: relative;
  z-index: 1;
}

.context-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.context-widget-title {
  font-size: 12px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-family: var(--font-tactical, 'Eurostile', 'DIN', sans-serif);
}

.context-widget-subtitle {
  font-size: 11px;
  color: var(--ink-low);
}

.context-widget-body {
  color: var(--ink-high);
  font-size: 13px;
}

.context-widget-empty {
  color: var(--ink-low);
  font-size: 12px;
}

.destination-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(18, 24, 38, 0.7);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.16);
  margin-bottom: 8px;
  box-shadow: 0 10px 18px rgba(4, 7, 14, 0.3);
}

.destination-item:last-child {
  margin-bottom: 0;
}

.destination-title {
  font-weight: 600;
  color: var(--ink-high);
}

.destination-signals {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-low);
}

.state-metrics {
  display: flex;
  gap: 16px;
  margin-bottom: 10px;
}

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

.state-metric-label {
  font-size: 10px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.state-metric-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-primary);
}

.state-constraints-title {
  font-size: 11px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.state-constraints-list {
  margin: 0;
  padding-left: 16px;
  color: var(--ink-med);
  font-size: 12px;
}

.command-layer-content-v2 {
  display: flex;
  flex: 1 1 0 !important; /* Override V1's flex: 1 */
  min-height: 0 !important; /* Override V1's min-height: 600px */
  gap: 16px;
  padding: 10px 18px 16px;
  overflow: hidden; /* Constrain children */
}

.command-layer-content-v2.detail-panel-collapsed {
  gap: 0;
}

.command-center-v2[data-active-layer='loop'] .command-layer-content-v2 {
  padding: 0;
  gap: 0;
}

.command-center-v2[data-active-layer='commander'] .command-layer-content-v2 {
  padding: 10px 12px 14px;
}

/* V2 overrides for graph containers - MUST use !important to override V1 min-height: 600px */
.command-layer-content-v2 #layer-graph-container,
.command-layer-content-v2 .layer-graph-container,
.command-layer-content-v2 .layer-graph-layout {
  flex: 1 1 0 !important;
  min-height: 0 !important; /* Override V1's min-height: 600px */
  height: 100% !important; /* Fill parent, let parent constrain */
  overflow-y: auto; /* Scroll within container */
}

.command-center-v2[data-active-layer='loop'] #layer-graph-container {
  overflow: hidden;
}

.command-main-pane {
  flex: 1 1 0; /* Take remaining space, basis 0 for proper flex calc */
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Constrain children, let them handle scroll */
}

.command-detail-panel {
  flex: 0 0 260px;
  background: linear-gradient(180deg, rgba(20, 26, 40, 0.86), rgba(10, 14, 24, 0.9));
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.16);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(14px);
  /* transition removed - instant panel show/hide */
  overflow-y: auto;
  max-height: none; /* Let flex handle height */
}

/* Commander panel should appear instantly without open animation. */
.command-center-v2[data-active-layer='commander'] .command-detail-panel,
.command-center-v2[data-active-layer='commander'] .detail-panel-empty--primary {
  transition: none !important;
  animation: none !important;
}

.command-detail-panel.detail-panel-collapsed {
  flex: 0 0 0;
  width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

.detail-panel-empty {
  color: var(--ink-low);
  font-size: 12px;
}

.detail-panel-empty--primary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 220px;
  padding: 20px 16px;
  text-align: center;
  gap: 8px;
  animation: fadeInUp 0.45s var(--transition) both;
}

.detail-panel-empty--primary::before {
  content: '';
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.35);
  background: radial-gradient(circle at 30% 30%, rgba(var(--odei-color-jade-rgb), 0.35), rgba(15, 21, 34, 0.9));
  box-shadow: 0 0 18px rgba(var(--odei-color-jade-rgb), 0.35);
}

.detail-empty-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--ink-med);
  font-family: var(--font-tactical, 'Eurostile', 'DIN', sans-serif);
}

.detail-empty-sub {
  font-size: 12px;
  color: var(--ink-low);
  max-width: 180px;
  line-height: 1.4;
}

/* Hide activity feed for now - board view should dominate */
.command-activity-feed {
  display: none;
  padding: 12px 20px 20px;
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
}

.activity-feed-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  color: var(--ink-med);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.activity-feed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.feed-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(29, 35, 49, 0.6);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
}

.feed-time {
  font-size: 11px;
  color: var(--ink-low);
}

.feed-title {
  font-size: 12px;
  color: var(--ink-high);
}

.feed-meta {
  grid-column: span 2;
  font-size: 11px;
  color: var(--ink-low);
}

.detail-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.detail-panel-titleblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.detail-panel-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-high);
  font-family: var(--font-display, 'Space Grotesk', 'Manrope', sans-serif);
}

.detail-panel-subtitle {
  font-size: 11px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--font-tactical, 'Eurostile', 'DIN', sans-serif);
}

.detail-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 100%;
}

.detail-panel-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.3);
  color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.12);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-panel-tag--type {
  border-color: rgba(var(--odei-color-gold-rgb), 0.3);
  color: var(--odei-color-gold-500);
  background: rgba(var(--odei-color-gold-rgb), 0.12);
}

.detail-panel-tag--status {
  border-color: rgba(132, 204, 22, 0.35);
  color: #84cc16;
  background: rgba(132, 204, 22, 0.12);
}

.detail-panel-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
}

.detail-panel > .detail-panel-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.detail-panel-section-title {
  font-size: 11px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-family: var(--font-tactical, 'Eurostile', 'DIN', sans-serif);
  margin-bottom: 8px;
}

.detail-panel-section-title-critical {
  color: var(--odei-color-danger-400);
}

.detail-panel-section-title-warning {
  color: #f59e0b;
}

.detail-panel-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.detail-stack-item {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
  font-size: 12px;
}

.detail-stack-label {
  color: var(--ink-low);
}

.detail-stack-value {
  color: var(--ink-high);
}

.detail-action {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 10px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.2);
  background: rgba(29, 35, 49, 0.5);
  color: var(--ink-high);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.detail-action--compact {
  width: auto;
  margin: 0;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 8px;
}

.detail-action:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.5);
}

.review-queue-entry {
  background: var(--bg-03);
  border-left: 3px solid var(--accent-primary);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 8px;
}

.review-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.review-queue-title {
  font-size: 12px;
  color: var(--ink-high);
}

.review-queue-meta {
  font-size: 11px;
  color: var(--ink-low);
  margin: 6px 0;
}

.review-queue-badge {
  background: var(--accent-primary);
  color: var(--bg-01);
  border-radius: 9999px;
  padding: 2px 6px;
  font-size: 11px;
}

.detail-evidence-item {
  padding: 6px 0;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
}

.detail-evidence-title {
  font-size: 12px;
  color: var(--ink-high);
}

.detail-evidence-meta {
  font-size: 11px;
  color: var(--ink-low);
}

.loop-group {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
  background: rgba(29, 35, 49, 0.5);
  margin-bottom: 10px;
}

.loop-group-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ink-low);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.loop-entry {
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
}

.loop-entry.loop-phase-observe {
  border-left: 2px solid rgba(96, 165, 250, 0.55);
  padding-left: 10px;
}

.loop-entry.loop-phase-decide {
  border-left: 2px solid rgba(245, 158, 11, 0.55);
  padding-left: 10px;
}

.loop-entry.loop-phase-act {
  border-left: 2px solid rgba(var(--odei-color-jade-rgb), 0.55);
  padding-left: 10px;
}

.loop-entry.loop-phase-verify {
  border-left: 2px solid rgba(167, 139, 250, 0.55);
  padding-left: 10px;
}

.loop-entry.loop-phase-evolve {
  border-left: 2px solid rgba(var(--odei-color-gold-rgb), 0.55);
  padding-left: 10px;
}

.loop-entry.loop-phase-unknown {
  border-left: 2px solid rgba(124, 136, 154, 0.55);
  padding-left: 10px;
}

.loop-entry-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.loop-correlation-label {
  font-size: 9px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ink-low);
}

.loop-correlation-id {
  font-size: 10px;
  color: var(--ink-med);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}

.loop-entry:last-child {
  border-bottom: none;
}

.loop-entry-title {
  font-size: 12px;
  color: var(--ink-high);
  margin: 0;
  flex: 1 1 160px;
}

.loop-op {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(22, 28, 39, 0.6);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
}

.loop-action {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(22, 28, 39, 0.4);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
}

.loop-op-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ink-low);
}

.loop-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.loop-phase-badge.loop-phase-observe {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
  border: 1px solid rgba(96, 165, 250, 0.45);
}

.loop-phase-badge.loop-phase-decide {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
}

.loop-phase-badge.loop-phase-act {
  color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.16);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.45);
}

.loop-phase-badge.loop-phase-verify {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.14);
  border: 1px solid rgba(167, 139, 250, 0.45);
}

.loop-phase-badge.loop-phase-evolve {
  color: var(--odei-color-gold-500);
  background: rgba(var(--odei-color-gold-rgb), 0.15);
  border: 1px solid rgba(var(--odei-color-gold-rgb), 0.45);
}

.loop-phase-badge.loop-phase-unknown {
  color: #7c889a;
  background: rgba(124, 136, 154, 0.15);
  border: 1px solid rgba(124, 136, 154, 0.45);
}

.loop-op-verb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  margin-right: 6px;
  border-radius: 6px;
}

.loop-op-verb.loop-phase-observe {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.12);
}

.loop-op-verb.loop-phase-decide {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.loop-op-verb.loop-phase-act {
  color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.14);
}

.loop-op-verb.loop-phase-verify {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.12);
}

.loop-op-verb.loop-phase-evolve {
  color: var(--odei-color-gold-500);
  background: rgba(var(--odei-color-gold-rgb), 0.12);
}

.loop-op-verb.loop-phase-unknown {
  color: #7c889a;
  background: rgba(124, 136, 154, 0.12);
}

.loop-action-type {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.45px;
  padding: 1px 6px;
  border-radius: 6px;
}

.loop-action-type-policy {
  color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.4);
}

.loop-entry-hash {
  font-size: 10px;
  color: var(--ink-low);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
  margin-bottom: 6px;
}

.loop-op-json {
  margin-top: 4px;
  font-size: 10px;
  color: var(--ink-low);
  white-space: pre-wrap;
}

/* ============================================
   Violation Items in Detail Panel
   ============================================ */
.detail-violations-section {
  border-top: 1px solid rgba(255, 123, 123, 0.2);
  padding-top: 12px;
  margin-top: 12px;
}

.detail-violation-item {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(255, 123, 123, 0.05);
  border: 1px solid rgba(255, 123, 123, 0.15);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.detail-violation-item.severity-critical {
  background: rgba(255, 123, 123, 0.12);
  border-color: rgba(255, 123, 123, 0.4);
}

.detail-violation-item.severity-high {
  background: rgba(255, 123, 123, 0.08);
  border-color: rgba(255, 123, 123, 0.3);
}

.detail-violation-item.severity-medium {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.3);
}

.detail-violation-item.severity-low {
  background: rgba(124, 136, 154, 0.08);
  border-color: rgba(124, 136, 154, 0.25);
}

.detail-violation-item.violation-critical {
  border-left: 3px solid var(--odei-color-danger-400);
}

.detail-violation-item:last-child {
  margin-bottom: 0;
}

.detail-violation-item:hover {
  background: rgba(255, 123, 123, 0.08);
  border-color: rgba(255, 123, 123, 0.25);
}

.detail-violation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.detail-violation-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.detail-violation-badge.severity-critical {
  background: rgba(255, 123, 123, 0.18);
  color: var(--odei-color-danger-400);
  border: 1px solid rgba(255, 123, 123, 0.5);
}

.detail-violation-badge.severity-high {
  background: rgba(255, 123, 123, 0.15);
  color: var(--odei-color-danger-400);
  border: 1px solid rgba(255, 123, 123, 0.4);
}

.detail-violation-badge.severity-medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.detail-violation-badge.severity-low {
  background: rgba(124, 136, 154, 0.15);
  color: #7c889a;
  border: 1px solid rgba(124, 136, 154, 0.4);
}

.detail-violation-kind {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-high);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}

.detail-violation-guard {
  font-size: 10px;
  color: var(--ink-low);
  font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}

.detail-violation-desc {
  font-size: 11px;
  color: var(--ink-med);
  line-height: 1.5;
  margin-bottom: 8px;
}

.detail-violation-context {
  font-size: 11px;
  color: var(--ink-low);
  margin-bottom: 8px;
}

.detail-violation-fixes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.detail-violation-fix {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.3);
  border-radius: 6px;
  color: var(--odei-color-jade-500);
  cursor: pointer;
  transition: all 0.2s ease;
}

.detail-violation-fix:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.2);
  border-color: rgba(var(--odei-color-jade-rgb), 0.5);
  box-shadow: 0 0 8px rgba(var(--odei-color-jade-rgb), 0.2);
}

.detail-violation-fix:active {
  transform: scale(0.98);
}

.detail-violation-fix:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Only stack vertically on narrow screens */
@media (max-width: 768px) {
  .command-layer-content-v2 {
    flex-direction: column;
  }

  .command-detail-panel {
    max-height: none;
  }
}

/* ============================================
   Diagnostics Bar
   ============================================ */
.command-diagnostics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px 20px;
  background: var(--bg-02);
  border-bottom: 1px solid var(--glass-border);
  color: var(--ink-high);
}

.diag-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.diag-label {
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 10px;
}

.diag-value {
  color: var(--accent-primary);
  font-weight: 700;
}

.diag-status {
  justify-content: flex-end;
  text-align: right;
  font-weight: 700;
}

.diag-status.diag-error {
  color: var(--accent-danger);
}

/* ============================================
   Week Goal Section
   ============================================ */
.command-week-goal {
  padding: 16px 20px;
  background: var(--bg-03);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

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

.week-goal-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.week-goal-label .goal-icon {
  font-size: 16px;
}

.week-goal-label .goal-week {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.week-goal-progress {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-primary);
}

.week-goal-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-high);
  margin-bottom: 12px;
}

.week-goal-progress-bar {
  height: 6px;
  background: var(--bg-04);
  border-radius: 3px;
  overflow: hidden;
}

.goal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-primary) 0%, #6ee7b7 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* ============================================
   Quick Capture
   ============================================ */
.command-quick-capture {
  padding: 12px 20px;
  background: var(--bg-02);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.capture-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.capture-icon {
  font-size: 18px;
  color: var(--accent-secondary);
}

.capture-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-03);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--ink-high);
  font-size: 14px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.capture-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--glow-accent);
}

.capture-input::placeholder {
  color: var(--ink-low);
}

.capture-btn {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.capture-btn-physical {
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.capture-btn-physical:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.2);
}

.capture-btn-digital {
  background: rgba(var(--odei-color-gold-rgb), 0.1);
  border-color: var(--accent-secondary);
  color: var(--accent-secondary);
}

.capture-btn-digital:hover {
  background: rgba(var(--odei-color-gold-rgb), 0.2);
}

/* ============================================
   Layer Content - Full Screen Graph
   ============================================ */
.command-layer-content {
  flex: 1;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg-01) 0%, var(--bg-02) 100%);
}

/* Layer Graph Container - Full Width */
.command-layer-content #layer-graph-container,
.command-layer-content .layer-graph-container,
.command-layer-content .layer-graph-layout {
  width: 100%;
  height: 100%;
  min-height: 600px;
  position: relative;
}

/* Graph area - takes remaining space in split layout */
.graph-fullscreen {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.graph-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* Graph canvas - takes full space */
.graph-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(5, 6, 10, 0.9) 0%, var(--bg-01) 70%);
  z-index: 1; /* Below control buttons (z-index: 60) */
}

/* Loading overlay */
.graph-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 10, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
}

.graph-loading.hidden {
  display: none;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(var(--odei-color-jade-rgb), 0.2);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  margin-top: 16px;
  color: var(--ink-med);
  font-size: 14px;
}

/* Stats badge - bottom left */
.graph-stats {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(11, 14, 20, 0.9);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--ink-med);
  backdrop-filter: blur(8px);
  z-index: 50;
}

.stats-divider {
  color: var(--accent-primary);
  opacity: 0.5;
}

/* Show All Nodes Button */
.show-all-btn {
  position: absolute;
  bottom: 20px;
  left: 180px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  border: 1px solid var(--accent-primary);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-primary);
  cursor: pointer;
  backdrop-filter: blur(8px);
  z-index: 50;
  transition: all 0.2s ease;
}

.show-all-btn:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.25);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--odei-color-jade-rgb), 0.2);
}

.show-all-btn:active {
  transform: translateY(0);
}

.show-all-btn svg {
  flex-shrink: 0;
}

.show-all-btn.hidden {
  display: none;
}

/* Reload / Reset graph controls */
.graph-control-stack {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 10px;
  z-index: 60;
  pointer-events: auto; /* Ensure buttons receive clicks */
}

.graph-reload-btn,
.graph-reset-btn,
.graph-diff-clear-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 14, 20, 0.9);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  color: var(--ink-med);
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

.graph-reload-btn:hover,
.graph-reset-btn:hover,
.graph-diff-clear-btn:hover {
  border-color: var(--glass-border-hover);
  color: var(--accent-primary);
  box-shadow: 0 0 10px rgba(var(--odei-color-jade-rgb), 0.25);
}

.graph-reload-btn:active,
.graph-reset-btn:active,
.graph-diff-clear-btn:active {
  transform: translateY(1px);
}

.graph-reload-btn.spinning svg {
  animation: spin 0.8s linear infinite;
  color: var(--accent-primary);
}

/* Time Travel Preview */

.graph-timebar {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  z-index: 5;
  pointer-events: auto;
}

.graph-timebar.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.timebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-med, #b6c0d2);
}

.timebar-title {
  font-weight: 600;
  color: var(--ink-high, #e8ecf4);
}

.timebar-current {
  font-weight: 600;
  color: var(--accent-primary, var(--odei-color-jade-500));
}

.timebar-range {
  font-size: 11px;
  color: var(--ink-dim, #8a94a6);
}

.timebar-slider-row {
  display: grid;
  gap: 6px;
}

.graph-time-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: linear-gradient(90deg, rgba(var(--odei-color-jade-rgb), 0.35), rgba(var(--odei-color-gold-rgb), 0.3));
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.3);
  border-radius: 999px;
  height: 8px;
  width: 100%;
  outline: none;
  cursor: pointer;
}

.graph-time-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--odei-color-jade-rgb), 0.35), rgba(var(--odei-color-gold-rgb), 0.3));
}

.graph-time-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--color-pure-white, #ffffff);
  border: 2px solid rgba(var(--odei-color-jade-rgb), 0.7);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(var(--odei-color-jade-rgb), 0.35);
  transition: all 0.2s ease;
}

.graph-time-slider::-webkit-slider-thumb:hover {
  transform: scale(1.12);
}

.graph-time-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--odei-color-jade-rgb), 0.35), rgba(var(--odei-color-gold-rgb), 0.3));
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.3);
}

.graph-time-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid rgba(var(--odei-color-jade-rgb), 0.7);
  box-shadow: 0 0 10px rgba(var(--odei-color-jade-rgb), 0.35);
}

.timebar-ticks {
  position: relative;
  height: 14px;
}

.timebar-tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 6px;
  background: rgba(var(--odei-color-jade-rgb), 0.35);
}

.timebar-tick-label {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--ink-dim, #8a94a6);
  white-space: nowrap;
}

.graph-preview-indicator {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  font-size: 12px;
  color: var(--ink-med, #b6c0d2);
  z-index: 5;
}

.preview-return-btn {
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  border: 1px solid var(--accent-primary, var(--odei-color-jade-500));
  color: var(--accent-primary, var(--odei-color-jade-500));
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.preview-return-btn:hover {
  border-color: var(--glass-border-hover, rgba(var(--odei-color-jade-rgb), 0.6));
  box-shadow: 0 0 10px rgba(var(--odei-color-jade-rgb), 0.25);
}

.preview-readonly .action-btn {
  opacity: 0.5;
  pointer-events: none;
}

@media (max-width: 900px) {
  .graph-timebar {
    padding-bottom: 8px;
  }
}

/* Node Details Panel - Floating right side */
.node-details-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 320px;
  max-height: calc(100% - 40px);
  background: rgba(11, 14, 20, 0.95);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  z-index: 100;
  overflow: hidden;
  /* animation removed - instant panel appearance */
}

.node-details-panel.hidden {
  display: none;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--glass-border);
  background: rgba(18, 22, 34, 0.5);
}

.details-title {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.details-icon {
  font-size: 18px;
  color: var(--accent-primary);
  flex-shrink: 0;
}

.details-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-high);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.details-close {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  color: var(--ink-med);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.details-close:hover {
  background: rgba(255, 123, 123, 0.15);
  color: var(--accent-danger);
}

.details-body {
  padding: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.details-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.meta-label {
  font-size: 12px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.meta-value {
  font-size: 13px;
  color: var(--ink-high);
  font-weight: 500;
}

.meta-value.status-active,
.meta-value.status-in_progress {
  color: var(--accent-primary);
}

.meta-value.status-done,
.meta-value.status-completed {
  color: #22c55e;
}

.meta-value.status-blocked {
  color: var(--accent-danger);
}

.meta-value.overdue {
  color: var(--odei-color-danger-400);
}

.meta-value.due-today,
.meta-value.due-soon {
  color: var(--odei-color-gold-500);
}

.details-summary {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-med);
  padding: 12px;
  background: rgba(18, 22, 34, 0.5);
  border-radius: 8px;
  margin-bottom: 16px;
}

.details-summary.empty {
  font-style: italic;
  color: var(--ink-low);
}

.details-next {
  font-size: 12px;
  color: var(--ink-high);
  padding: 10px 12px;
  background: rgba(var(--odei-color-jade-rgb), 0.12);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.3);
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 600;
}

.details-next.hidden {
  display: none;
}

.connections-header {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

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

.connection-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(18, 22, 34, 0.5);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.connection-item:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.1);
}

.connection-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.connection-name {
  flex: 1;
  font-size: 13px;
  color: var(--ink-high);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.connection-type {
  font-size: 10px;
  color: var(--ink-low);
  text-transform: uppercase;
}

.connections-more {
  font-size: 12px;
  color: var(--accent-primary);
  text-align: center;
  padding: 8px;
  cursor: pointer;
}

.connections-empty {
  font-size: 12px;
  color: var(--ink-low);
  text-align: center;
  padding: 12px;
  font-style: italic;
}

.details-actions {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--glass-border);
  background: rgba(18, 22, 34, 0.3);
}

.action-btn {
  flex: 1;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(var(--odei-color-jade-rgb), 0.08);
  color: var(--ink-high);
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  border-color: var(--accent-primary);
}

.action-btn.action-memory {
  background: linear-gradient(
    135deg,
    rgba(var(--odei-color-jade-rgb), 0.15) 0%,
    rgba(var(--odei-color-jade-rgb), 0.08) 100%
  );
  color: var(--accent-primary);
}

.action-btn.action-memory:hover {
  background: linear-gradient(
    135deg,
    rgba(var(--odei-color-jade-rgb), 0.25) 0%,
    rgba(var(--odei-color-jade-rgb), 0.15) 100%
  );
}

/* ============================================
   Task Columns
   ============================================ */
.command-columns {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Physical + Digital only, sidebar hidden */
  gap: 16px;
  padding: 16px 20px;
  padding-bottom: 32px;
}

.command-column {
  display: flex;
  flex-direction: column;
  background: var(--bg-03);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  min-height: 200px;
}

.column-header {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.15);
  flex-shrink: 0;
}

.column-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.column-icon {
  font-size: 16px;
}

.column-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-high);
  margin: 0;
}

.column-count {
  padding: 2px 8px;
  background: var(--bg-04);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-med);
}

.column-subtitle {
  font-size: 11px;
  color: var(--ink-low);
  margin-top: 4px;
}

.column-tasks,
.column-feed {
  flex: 1 0 auto;
  overflow: visible;
  padding: 8px;
  padding-bottom: 12px;
}

/* ============================================
   Task Cards
   ============================================ */
.task-card {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--bg-04) 0%, rgba(29, 35, 49, 0.8) 100%);
  border-radius: 10px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.18);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.task-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--odei-color-jade-rgb), 0.3), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.task-card:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.35);
  background: linear-gradient(135deg, var(--bg-04) 0%, rgba(29, 35, 49, 0.95) 100%);
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(var(--odei-color-jade-rgb), 0.1);
}

.task-card:hover::before {
  opacity: 1;
}

.task-card.task-active {
  border-color: rgba(var(--odei-color-jade-rgb), 0.4);
  background: linear-gradient(135deg, rgba(var(--odei-color-jade-rgb), 0.08) 0%, var(--bg-04) 100%);
  box-shadow: 0 0 20px rgba(var(--odei-color-jade-rgb), 0.1);
}

.task-card.task-active::before {
  opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(var(--odei-color-jade-rgb), 0.5), transparent);
}

.task-card + .task-card {
  margin-top: 10px;
}

.task-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.task-checkbox {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--ink-low);
  color: var(--ink-low);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.task-checkbox:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.task-checkbox.checked {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--bg-01);
}

.task-content {
  flex: 1;
  min-width: 0;
}

.task-title {
  font-size: 13px;
  color: var(--ink-high);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task-now-badge {
  font-size: 9px;
  padding: 2px 8px;
  background: rgba(var(--odei-color-jade-rgb), 0.2);
  color: var(--accent-primary);
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: nowPulse 2s ease-in-out infinite;
}

@keyframes nowPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.task-priority {
  font-size: 10px;
}

.task-due {
  font-size: 12px;
  opacity: 0.7;
}

.task-start-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border: 1px solid var(--glass-border);
  color: var(--accent-primary);
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-card:hover .task-start-btn {
  opacity: 1;
}

.task-start-btn:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.2);
}

.task-summary {
  font-size: 12px;
  color: var(--ink-low);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: none;
}

.task-card.expanded .task-summary {
  display: block;
}

/* ============================================
   Enhanced Task Card - Status Indicators
   ============================================ */
.task-status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 10px;
  transition: all 0.3s ease;
}

.task-status-indicator.status-in_progress,
.task-status-indicator.status-active {
  background: var(--accent-primary);
  box-shadow:
    0 0 10px var(--accent-primary),
    0 0 20px rgba(var(--odei-color-jade-rgb), 0.3);
  animation: statusPulse 2s ease-in-out infinite;
}

.task-status-indicator.status-todo {
  background: transparent;
  border: 2px solid var(--ink-low);
}

.task-status-indicator.status-blocked {
  background: var(--accent-danger);
  box-shadow: 0 0 8px var(--accent-danger);
}

.task-status-indicator.status-done,
.task-status-indicator.status-completed {
  background: #22c55e;
  border: none;
}

@keyframes statusPulse {
  0%,
  100% {
    box-shadow:
      0 0 10px var(--accent-primary),
      0 0 20px rgba(var(--odei-color-jade-rgb), 0.3);
  }
  50% {
    box-shadow:
      0 0 15px var(--accent-primary),
      0 0 30px rgba(var(--odei-color-jade-rgb), 0.5);
  }
}

/* ============================================
   Enhanced Task Card - Chips
   ============================================ */
.task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-left: 20px;
}

.chip {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.chip-type {
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  color: var(--accent-primary);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.35);
}

.chip-type:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.25);
  border-color: rgba(var(--odei-color-jade-rgb), 0.5);
}

.chip-phase {
  background: rgba(var(--odei-color-gold-rgb), 0.15);
  color: var(--accent-secondary);
  border: 1px solid rgba(var(--odei-color-gold-rgb), 0.35);
  text-transform: capitalize;
}

.chip-impact {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink-med);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-transform: capitalize;
}

.chip-effort {
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  color: var(--accent-primary);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.25);
  font-variant-numeric: tabular-nums;
}

.chip-trend {
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  color: var(--accent-primary);
  font-size: 14px;
  padding: 2px 8px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.2);
}

.chip-trend-up {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.3);
}

.chip-trend-down {
  color: var(--accent-danger);
  background: rgba(255, 123, 123, 0.1);
  border-color: rgba(255, 123, 123, 0.3);
}

.chip-trend-stable {
  color: var(--ink-med);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}

.chip-cadence,
.chip-unit {
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-low);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 9px;
  text-transform: lowercase;
}

.chip-tag {
  background: transparent;
  color: var(--ink-low);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  font-style: italic;
  font-weight: 500;
}

.chip-tag:hover {
  color: var(--ink-med);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ============================================
   Enhanced Task Card - Summary Preview
   ============================================ */
.task-summary-preview {
  font-size: 11px;
  color: var(--ink-low);
  margin-top: 8px;
  padding-left: 20px;
  line-height: 1.5;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.task-card:hover .task-summary-preview {
  opacity: 1;
  color: var(--ink-med);
}

/* ============================================
   Enhanced Task Card - Blocked State
   ============================================ */
.task-card.task-blocked {
  border-color: rgba(255, 123, 123, 0.4);
  background: linear-gradient(135deg, rgba(255, 123, 123, 0.05) 0%, var(--bg-03) 100%);
}

.task-card.task-blocked:hover {
  border-color: rgba(255, 123, 123, 0.6);
}

.task-blocked-badge {
  font-size: 9px;
  padding: 2px 8px;
  background: rgba(255, 123, 123, 0.2);
  color: var(--accent-danger);
  border-radius: 4px;
  margin-left: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Empty/Loading states */
.tasks-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-low);
  font-size: 12px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
}

.tasks-empty.tasks-offline {
  background: rgba(255, 123, 123, 0.05);
  border-color: rgba(255, 123, 123, 0.2);
  color: var(--accent-danger);
  font-style: normal;
}

.tasks-empty.tasks-stale {
  background: rgba(var(--odei-color-gold-rgb), 0.05);
  border-color: rgba(var(--odei-color-gold-rgb), 0.2);
  color: var(--accent-secondary);
  font-style: normal;
}

.tasks-loading {
  padding: 32px 16px;
  text-align: center;
  color: var(--ink-low);
  font-size: 12px;
}

.tasks-loading::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  border: 2px solid var(--ink-low);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.feed-empty {
  padding: 20px;
  text-align: center;
  color: var(--ink-low);
  font-size: 13px;
}

/* ============================================
   Activity Feed
   ============================================ */
.column-activity {
  background: linear-gradient(180deg, var(--bg-03) 0%, rgba(18, 22, 34, 0.8) 100%);
}

.feed-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: background 0.2s ease;
}

.feed-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.feed-time {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-low);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

.feed-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  background: var(--bg-04);
  color: var(--ink-med);
}

.feed-icon.completed {
  background: rgba(var(--odei-color-jade-rgb), 0.2);
  color: var(--accent-primary);
}

.feed-icon.created {
  background: rgba(var(--odei-color-gold-rgb), 0.2);
  color: var(--accent-secondary);
}

.feed-icon.wake {
  background: rgba(147, 51, 234, 0.2);
  color: #a78bfa;
}

.feed-icon.cycle {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.feed-title {
  font-size: 12px;
  color: var(--ink-med);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================
   Column Differentiation
   ============================================ */
.column-physical {
  border-color: rgba(var(--odei-color-jade-rgb), 0.2);
}

.column-physical .column-header {
  background: linear-gradient(135deg, rgba(var(--odei-color-jade-rgb), 0.05) 0%, transparent 100%);
}

.column-physical .column-icon {
  color: var(--accent-primary);
}

.column-digital {
  border-color: rgba(var(--odei-color-gold-rgb), 0.2);
}

.column-digital .column-header {
  background: linear-gradient(135deg, rgba(var(--odei-color-gold-rgb), 0.05) 0%, transparent 100%);
}

.column-digital .column-icon {
  color: var(--accent-secondary);
}

.column-activity {
  border-color: rgba(255, 255, 255, 0.1);
}

.column-activity .column-header {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
}

/* ============================================
   AI Status Bar
   ============================================ */
.command-ai-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--bg-03);
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 90;
}

.ai-status-left,
.ai-status-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ai-status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-low);
}

.ai-dot.idle {
  background: var(--ink-low);
}

.ai-dot.working {
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
  animation: pulse 2s ease-in-out infinite;
}

.ai-state {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-high);
}

.ai-last-activity {
  font-size: 12px;
  color: var(--ink-low);
}

.ai-stats {
  font-size: 12px;
  color: var(--ink-med);
}

.ai-btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid;
}

.ai-btn-start {
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.ai-btn-start:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.2);
}

.ai-btn-start.working {
  background: rgba(255, 123, 123, 0.1);
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

.ai-btn-refresh {
  background: var(--bg-04);
  border-color: transparent;
  color: var(--ink-med);
}

.ai-btn-refresh:hover {
  background: var(--bg-02);
  color: var(--ink-high);
}

/* ============================================
   Toast Notifications
   ============================================ */
.command-toast {
  position: fixed;
  bottom: 80px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-04);
  border: 1px solid var(--glass-border);
  color: var(--ink-high);
  font-size: 13px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.command-toast.show {
  opacity: 1;
  transform: translateY(0);
}

.command-toast.toast-success {
  border-color: var(--accent-primary);
}

.command-toast.toast-success .toast-icon::before {
  content: '✓';
  color: var(--accent-primary);
}

.command-toast.toast-error {
  border-color: var(--accent-danger);
}

.command-toast.toast-error .toast-icon::before {
  content: '✕';
  color: var(--accent-danger);
}

.command-toast.toast-warning {
  border-color: var(--accent-secondary);
}

.command-toast.toast-warning .toast-icon::before {
  content: '⚠';
  color: var(--accent-secondary);
}

.command-toast.toast-info {
  border-color: var(--ink-low);
}

.command-toast.toast-info .toast-icon::before {
  content: 'ℹ';
  color: var(--ink-med);
}

/* ============================================
   Command Tab Highlight
   ============================================ */
.agent-tab.command-tab {
  background: linear-gradient(135deg, rgba(var(--odei-color-jade-rgb), 0.18), rgba(var(--odei-color-gold-rgb), 0.1));
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.35);
}

.agent-tab.command-tab:hover {
  background: linear-gradient(135deg, rgba(var(--odei-color-jade-rgb), 0.28), rgba(var(--odei-color-gold-rgb), 0.18));
  border-color: rgba(var(--odei-color-jade-rgb), 0.5);
}

.agent-tab.command-tab.active {
  background: linear-gradient(135deg, rgba(var(--odei-color-jade-rgb), 0.35), rgba(var(--odei-color-gold-rgb), 0.22));
  border-color: rgba(var(--odei-color-jade-rgb), 0.6);
  box-shadow: 0 0 20px rgba(var(--odei-color-jade-rgb), 0.25);
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 1200px) {
  .command-columns {
    grid-template-columns: 1fr 1fr;
  }

  .column-activity {
    grid-column: span 2;
  }
}

@media (max-width: 800px) {
  .command-columns {
    grid-template-columns: 1fr;
  }

  .column-activity {
    grid-column: span 1;
  }

  .context-metric {
    display: none;
  }

  .capture-btn {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ============================================
   Loading States
   ============================================ */
.today-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 500;
}

.today-loading::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 2px solid rgba(var(--odei-color-jade-rgb), 0.15);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  margin-right: 12px;
  animation: spin 800ms linear infinite;
}

.today-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 120px;
  color: var(--accent-danger);
  font-size: 12px;
  text-align: center;
  padding: 24px;
  font-weight: 500;
}

/* ============================================
   Layer Navigation (Level 3)
   ============================================ */
.command-layer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: rgba(8, 12, 20, 0.8);
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.12);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 90;
  animation: fadeInUp 0.45s var(--transition) both;
}

.command-layer-brand {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.command-layer-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-high);
  font-weight: 600;
  font-family: var(--font-tactical, 'Eurostile', 'DIN', sans-serif);
}

.command-layer-subtitle {
  font-size: 11px;
  color: var(--ink-low);
  letter-spacing: 0.02em;
}

.command-layer-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.layer-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(20, 26, 40, 0.9), rgba(10, 14, 24, 0.9));
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.12);
  border-radius: 12px;
  color: var(--ink-med);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--transition);
  justify-content: center;
  font-family: var(--font-tactical, 'Eurostile', 'DIN', sans-serif);
  animation: fadeInUp 0.4s var(--transition) both;
}

.layer-tab:nth-child(2) {
  animation-delay: 0.05s;
}

.layer-tab:hover {
  background: rgba(20, 28, 44, 0.9);
  border-color: rgba(var(--odei-color-jade-rgb), 0.3);
  color: var(--ink-high);
}

.layer-tab.active {
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 12px var(--glow-accent);
}

.layer-icon {
  font-size: 16px;
  line-height: 1;
}

.layer-name {
  font-weight: 600;
}

.layer-count {
  padding: 2px 8px;
  background: rgba(8, 12, 20, 0.7);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.16);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-low);
  min-width: 24px;
  text-align: center;
}

.layer-tab.active .layer-count {
  background: rgba(var(--odei-color-jade-rgb), 0.2);
  color: var(--accent-primary);
}

.layer-count.commander-badge {
  background: rgba(var(--odei-color-jade-rgb), 0.18);
  border-color: rgba(var(--odei-color-jade-rgb), 0.35);
  color: var(--accent-primary);
  min-width: 18px;
}

.layer-count.commander-badge.hidden {
  display: none;
}

@media (max-width: 900px) {
  .command-layer-nav {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .command-layer-tabs {
    width: 100%;
    justify-content: flex-start;
  }

  .layer-tab {
    flex: 1 1 0;
  }
}

.command-loop-shell {
  padding: 10px 18px 12px;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.12);
  background:
    radial-gradient(circle at 20% 0%, rgba(var(--odei-color-jade-rgb), 0.09), transparent 48%),
    linear-gradient(180deg, rgba(7, 11, 18, 0.92), rgba(9, 14, 24, 0.9));
}

.command-loop-shell-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 280px;
  gap: 10px;
  align-items: stretch;
}

.command-loop-shell-empty {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.14);
  color: var(--ink-low);
  font-size: 12px;
}

.command-loop-shell-score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.22);
  background: linear-gradient(165deg, rgba(18, 26, 42, 0.92), rgba(8, 13, 21, 0.96));
  padding: 10px 12px;
  cursor: pointer;
  color: var(--ink-high);
  text-align: left;
  transition:
    border-color 0.2s var(--transition),
    box-shadow 0.2s var(--transition);
}

.command-loop-shell-score:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.42);
}

.command-loop-shell-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-low);
}

.command-loop-shell-value {
  font-size: 30px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.command-loop-shell-meta {
  font-size: 11px;
  color: var(--ink-med);
}

.command-loop-shell-coverage {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
}

.command-loop-phase-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.18);
  background: linear-gradient(180deg, rgba(17, 24, 38, 0.9), rgba(9, 13, 22, 0.96));
  color: var(--ink-med);
  cursor: pointer;
  text-align: left;
  transition:
    transform 0.2s var(--transition),
    border-color 0.2s var(--transition),
    color 0.2s var(--transition);
}

.command-loop-phase-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--odei-color-jade-rgb), 0.34);
  color: var(--ink-high);
}

.command-loop-phase-chip.active {
  border-color: rgba(var(--odei-color-jade-rgb), 0.56);
  box-shadow: 0 0 16px rgba(var(--odei-color-jade-rgb), 0.18);
}

.command-loop-phase-name {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-low);
}

.command-loop-phase-count {
  font-size: 16px;
  font-weight: 700;
  color: inherit;
  line-height: 1.1;
}

.command-loop-phase-state {
  font-size: 11px;
  color: var(--ink-med);
}

.command-loop-shell-next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.22);
  background: linear-gradient(165deg, rgba(16, 23, 36, 0.92), rgba(8, 13, 21, 0.96));
  padding: 10px 12px;
}

.command-loop-shell-next-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-low);
}

.command-loop-shell-next-headline {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-high);
}

.command-loop-shell-next-detail {
  font-size: 11px;
  color: var(--ink-med);
  line-height: 1.35;
}

.command-loop-shell-next-btn {
  margin-top: 6px;
  align-self: flex-start;
  border-radius: 999px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.4);
  background: rgba(var(--odei-color-jade-rgb), 0.14);
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}

.command-loop-shell-next-btn:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.62);
  background: rgba(var(--odei-color-jade-rgb), 0.2);
}

.command-loop-tone-good {
  border-color: rgba(90, 224, 211, 0.35);
}

.command-loop-tone-good .command-loop-shell-value,
.command-loop-tone-good .command-loop-phase-count,
.command-loop-tone-good .command-loop-shell-next-headline {
  color: #5ae0d3;
}

.command-loop-tone-warn {
  border-color: rgba(245, 174, 11, 0.4);
}

.command-loop-tone-warn .command-loop-shell-value,
.command-loop-tone-warn .command-loop-phase-count,
.command-loop-tone-warn .command-loop-shell-next-headline {
  color: #f5ae0b;
}

.command-loop-tone-critical {
  border-color: rgba(245, 84, 84, 0.42);
}

.command-loop-tone-critical .command-loop-shell-value,
.command-loop-tone-critical .command-loop-phase-count,
.command-loop-tone-critical .command-loop-shell-next-headline {
  color: #f57272;
}

@media (max-width: 1200px) {
  .command-loop-shell-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .command-loop-shell-coverage {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .command-loop-shell {
    padding: 10px 12px;
  }

  .command-loop-shell-grid {
    grid-template-columns: 1fr;
  }

  .command-loop-shell-coverage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================
   Commander View
   ============================================ */
.commander-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 12px;
}

.commander-main {
  display: grid;
  grid-template-columns: clamp(320px, 30vw, 420px) minmax(0, 1fr);
  gap: 12px;
  flex: 1;
  min-height: 0;
}

.commander-timeline {
  background: var(--surface-02);
  border: 1px solid var(--stroke-soft);
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}

.decision-timeline {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--surface-03);
  border-bottom: 1px solid var(--stroke-soft);
}

.timeline-titleblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.timeline-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-high);
}

.timeline-subtitle {
  font-size: 11px;
  color: var(--ink-low);
}

.timeline-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.timeline-live {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.12);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.35);
  padding: 2px 6px;
  border-radius: 999px;
}

.timeline-count {
  font-size: 10px;
  color: var(--ink-med);
  background: rgba(8, 12, 20, 0.8);
  border: 1px solid var(--stroke-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow-y: auto;
}

.timeline-banner {
  margin: 8px 12px 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(239, 154, 154, 0.35);
  background: rgba(239, 154, 154, 0.08);
  color: #ef9a9a;
  font-size: 11px;
}

.timeline-banner.hidden {
  display: none;
}

.timeline-controls {
  padding: 10px 12px;
  border-bottom: 1px solid var(--stroke-soft);
  background: rgba(11, 16, 24, 0.72);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-search {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--stroke-soft);
  background: rgba(8, 12, 20, 0.82);
  color: var(--ink-high);
  font-size: 12px;
  padding: 0 10px;
}

.timeline-search::placeholder {
  color: var(--ink-low);
}

.timeline-search:focus-visible {
  outline: 2px solid rgba(var(--odei-color-jade-rgb), 0.45);
  outline-offset: 1px;
}

.timeline-control-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
}

.timeline-insights {
  padding: 8px 12px 10px;
  border-bottom: 1px solid var(--stroke-soft);
  background:
    linear-gradient(180deg, rgba(10, 15, 24, 0.78), rgba(9, 13, 22, 0.55)),
    radial-gradient(120% 100% at 0% 0%, rgba(var(--odei-color-jade-rgb), 0.08), transparent 60%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-insight-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.timeline-insight-card {
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.2);
  background: rgba(8, 12, 20, 0.56);
  border-radius: 8px;
  padding: 6px 8px;
  min-width: 0;
}

.timeline-insight-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-low);
  margin-bottom: 4px;
}

.timeline-insight-value {
  font-size: 11px;
  color: var(--ink-high);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.timeline-phase-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.timeline-phase-chip {
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--stroke-soft);
  background: rgba(9, 14, 22, 0.8);
  color: var(--ink-low);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.timeline-phase-chip:hover {
  color: var(--ink-high);
  border-color: rgba(var(--odei-color-jade-rgb), 0.38);
  background: rgba(var(--odei-color-jade-rgb), 0.11);
}

.timeline-phase-chip.active {
  color: var(--accent-primary);
  border-color: rgba(var(--odei-color-jade-rgb), 0.54);
  background: rgba(var(--odei-color-jade-rgb), 0.16);
}

.timeline-filter {
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--stroke-soft);
  background: rgba(8, 12, 20, 0.82);
  color: var(--ink-med);
  font-size: 11px;
  padding: 0 8px;
}

.timeline-filter:focus-visible {
  outline: 2px solid rgba(var(--odei-color-jade-rgb), 0.45);
  outline-offset: 1px;
}

.timeline-entry {
  background: var(--bg-03);
  border-left: 3px solid var(--ink-low);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s var(--transition);
  border: 1px solid transparent;
}

.timeline-entry.selected {
  border-left-color: var(--accent-primary);
  background: var(--bg-04);
  border-color: rgba(var(--odei-color-jade-rgb), 0.3);
}

.timeline-entry:hover {
  background: var(--bg-04);
}

.timeline-entry-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-low);
  gap: 8px;
}

.timeline-entry-actor {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.25);
  border-radius: 999px;
  padding: 2px 6px;
}

.timeline-entry-summary {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-high);
  line-height: 1.4;
}

.timeline-entry-footer {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.timeline-empty {
  color: var(--ink-low);
  font-size: 12px;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  line-height: 1.4;
}

.timeline-empty-title {
  font-weight: 600;
  color: var(--ink-high);
}

.timeline-empty-subtitle {
  color: var(--ink-low);
  font-size: 11px;
}

.timeline-phase {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-low);
  border: 1px solid var(--stroke-soft);
  background: rgba(8, 12, 20, 0.5);
  border-radius: 999px;
  padding: 2px 6px;
}

.ops-badge {
  background: var(--accent-primary);
  color: var(--bg-01);
  border-radius: 9999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
}

@media (max-width: 1080px) {
  .timeline-control-row {
    grid-template-columns: 1fr;
  }

  .timeline-insight-cards {
    grid-template-columns: 1fr;
  }
}

.commander-graph {
  min-height: 0;
}

.graph-diff-view {
  position: relative;
  background: linear-gradient(180deg, rgba(7, 11, 20, 0.96), rgba(6, 8, 14, 0.98));
  border: 1px solid var(--stroke-soft);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(var(--odei-color-jade-rgb), 0.12),
    0 16px 32px rgba(2, 6, 15, 0.35);
}

.graph-diff-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px 14px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(14, 18, 31, 0.95), rgba(10, 13, 23, 0.9));
  border-bottom: 1px solid var(--stroke-soft);
  flex-wrap: wrap;
}

.graph-diff-titleblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.graph-diff-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink-high);
}

.graph-diff-subtitle {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-low);
}

.graph-diff-meta {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.graph-diff-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.8);
  border: 1px solid var(--stroke-soft);
  color: var(--ink-low);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.graph-diff-status.active {
  color: var(--accent-primary);
  border-color: rgba(var(--odei-color-jade-rgb), 0.5);
  background: rgba(var(--odei-color-jade-rgb), 0.16);
  box-shadow: 0 0 14px rgba(var(--odei-color-jade-rgb), 0.16);
}

.graph-diff-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.diff-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--ink-low);
  padding: 2px 0;
}

.diff-legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--diff-unchanged);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

.diff-legend-item.created .diff-legend-dot {
  background: var(--diff-created);
}

.diff-legend-item.updated .diff-legend-dot {
  background: var(--diff-updated);
}

.diff-legend-item.deleted .diff-legend-dot {
  background: var(--diff-deleted);
}

.diff-legend-item.rel-created .diff-legend-dot {
  background: var(--odei-color-jade-500);
}

.diff-legend-item.rel-deleted .diff-legend-dot {
  background: #ef9a9a;
}

.graph-diff-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--odei-color-jade-rgb), 0.08), transparent 62%),
    linear-gradient(180deg, rgba(6, 8, 15, 0.95), rgba(5, 7, 13, 1));
}

.graph-diff-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.12);
  background: rgba(8, 12, 21, 0.65);
  backdrop-filter: blur(10px);
}

.graph-toolbar-btn {
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.2);
  background: rgba(14, 18, 28, 0.8);
  color: var(--ink-med);
  padding: 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.graph-toolbar-btn:hover {
  color: var(--ink-high);
  border-color: rgba(var(--odei-color-jade-rgb), 0.4);
  background: rgba(var(--odei-color-jade-rgb), 0.12);
}

.graph-toolbar-btn.active {
  color: var(--accent-primary);
  border-color: rgba(var(--odei-color-jade-rgb), 0.55);
  background: rgba(var(--odei-color-jade-rgb), 0.18);
  box-shadow: 0 0 12px rgba(var(--odei-color-jade-rgb), 0.18);
}

.graph-toolbar-btn.graph-toolbar-btn-secondary {
  margin-left: auto;
}

.graph-toolbar-btn.graph-toolbar-btn-secondary + .graph-toolbar-btn.graph-toolbar-btn-secondary {
  margin-left: 0;
}

.graph-diff-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.1);
  background: rgba(7, 11, 20, 0.52);
}

.graph-diff-facets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 6px 10px 8px;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
  background: rgba(6, 10, 18, 0.42);
}

.graph-diff-facets.hidden {
  display: none;
}

.graph-facet-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.graph-facet-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-low);
  min-width: 50px;
  flex-shrink: 0;
}

.graph-facet-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.graph-facet-btn {
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.18);
  background: rgba(10, 15, 24, 0.72);
  color: var(--ink-low);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.graph-facet-btn:hover {
  color: var(--ink-med);
  border-color: rgba(var(--odei-color-jade-rgb), 0.35);
}

.graph-facet-btn.active {
  color: var(--accent-primary);
  border-color: rgba(var(--odei-color-jade-rgb), 0.5);
  background: rgba(var(--odei-color-jade-rgb), 0.14);
}

.graph-facet-btn.compact-expanded {
  border-color: rgba(var(--odei-color-jade-rgb), 0.46);
  box-shadow: inset 0 0 0 1px rgba(var(--odei-color-jade-rgb), 0.18);
}

.graph-diff-hotspots {
  position: absolute;
  top: 122px;
  right: 12px;
  z-index: 2;
  width: 220px;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.24);
  border-radius: 10px;
  background: rgba(6, 10, 19, 0.84);
  backdrop-filter: blur(8px);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.graph-diff-hotspots.hidden {
  display: none;
}

.graph-diff-shortcuts {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  width: min(360px, calc(100% - 24px));
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.24);
  border-radius: 10px;
  background: rgba(6, 10, 19, 0.88);
  backdrop-filter: blur(8px);
  padding: 8px 10px;
}

.graph-diff-shortcuts.hidden {
  display: none;
}

.graph-diff-focus {
  border-top: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
  background:
    linear-gradient(180deg, rgba(8, 12, 21, 0.74), rgba(6, 10, 18, 0.6)),
    radial-gradient(120% 100% at 0% 0%, rgba(var(--odei-color-jade-rgb), 0.08), transparent 72%);
  padding: 7px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.graph-diff-focus.idle {
  opacity: 0.86;
}

.graph-focus-headline {
  font-size: 11px;
  color: var(--ink-high);
  letter-spacing: 0.03em;
  font-weight: 600;
}

.graph-focus-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.graph-focus-chip {
  border: 1px solid var(--stroke-soft);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.62);
  color: var(--ink-med);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.graph-focus-chip.impact {
  color: var(--accent-primary);
  border-color: rgba(var(--odei-color-jade-rgb), 0.44);
  background: rgba(var(--odei-color-jade-rgb), 0.14);
}

.graph-shortcuts-title {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 6px;
}

.graph-shortcuts-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.graph-shortcuts-row {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 10px;
  color: var(--ink-med);
}

.graph-shortcuts-row span:first-child {
  color: var(--ink-high);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.graph-hotspots-title {
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-primary);
  padding: 2px 4px 4px;
}

.graph-hotspot-btn {
  width: 100%;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.18);
  border-radius: 8px;
  background: rgba(10, 15, 24, 0.72);
  color: var(--ink-med);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.graph-hotspot-btn:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.4);
  color: var(--ink-high);
}

.graph-hotspot-btn.active {
  border-color: rgba(var(--odei-color-jade-rgb), 0.5);
  background: rgba(var(--odei-color-jade-rgb), 0.14);
  color: var(--ink-high);
}

.graph-hotspot-label {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.graph-hotspot-score {
  font-size: 10px;
  color: var(--accent-primary);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.35);
  border-radius: 999px;
  padding: 1px 7px;
  font-variant-numeric: tabular-nums;
}

.graph-metric {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-low);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.16);
  background: rgba(8, 12, 20, 0.54);
  border-radius: 999px;
  padding: 4px 9px;
}

.graph-metric b {
  font-size: 12px;
  color: var(--ink-high);
  font-variant-numeric: tabular-nums;
}

.graph-metric-created {
  border-color: rgba(34, 197, 94, 0.35);
  color: #92f0ad;
}

.graph-metric-updated {
  border-color: rgba(245, 158, 11, 0.35);
  color: #f5cf7d;
}

.graph-metric-deleted {
  border-color: rgba(239, 68, 68, 0.35);
  color: #f59f9f;
}

.graph-metric-rel-created {
  border-color: rgba(var(--odei-color-jade-rgb), 0.38);
  color: #77e7cf;
}

.graph-metric-rel-deleted {
  border-color: rgba(251, 146, 60, 0.35);
  color: #ffd08f;
}

.graph-diff-canvas {
  width: 100%;
  height: 100%;
  min-height: 340px;
  border-top: 1px solid rgba(var(--odei-color-jade-rgb), 0.08);
}

.graph-diff-canvas.hidden {
  display: none;
}

.graph-diff-hint {
  position: absolute;
  top: 132px;
  left: 16px;
  max-width: 260px;
  padding: 10px 12px;
  background: rgba(8, 12, 20, 0.74);
  border: 1px solid var(--stroke-soft);
  border-radius: 10px;
  color: var(--ink-low);
  font-size: 11px;
  line-height: 1.4;
  backdrop-filter: blur(6px);
}

.graph-diff-hint.hidden {
  display: none;
}

.graph-diff-loading,
.graph-diff-error,
.graph-diff-empty {
  position: absolute;
  inset: 124px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-low);
  background: rgba(6, 8, 14, 0.95);
  font-size: 12px;
  gap: 10px;
}

.graph-diff-loading,
.graph-diff-error {
  background: rgba(5, 6, 10, 0.88);
  z-index: 3;
}

.graph-diff-retry {
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.35);
  border-radius: 8px;
  background: rgba(var(--odei-color-jade-rgb), 0.12);
  color: var(--accent-primary);
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
}

.graph-diff-retry:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.55);
  background: rgba(var(--odei-color-jade-rgb), 0.18);
}

.graph-diff-empty.hidden {
  display: none;
}

@media (max-width: 1080px) {
  .graph-diff-header {
    gap: 8px;
  }

  .graph-diff-legend {
    gap: 6px 8px;
  }

  .graph-diff-toolbar {
    flex-wrap: wrap;
  }

  .graph-toolbar-btn.graph-toolbar-btn-secondary {
    margin-left: 0;
  }

  .graph-diff-hotspots {
    position: relative;
    top: 0;
    right: 0;
    width: auto;
    margin: 0 10px 8px;
  }

  .graph-diff-shortcuts {
    position: relative;
    left: 0;
    bottom: 0;
    width: auto;
    margin: 0 10px 8px;
  }

  .graph-diff-hint {
    top: 236px;
  }

  .graph-diff-loading,
  .graph-diff-error,
  .graph-diff-empty {
    inset: 220px 0 0;
  }
}

.commander-before-after {
  min-height: 0;
}

.before-after-panel {
  background: var(--surface-02);
  border: 1px solid var(--stroke-soft);
  border-radius: 12px;
  padding: 12px;
}

.before-after-panel.hidden {
  display: none;
}

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

.before-after-summary {
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.24);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(9, 14, 24, 0.78), rgba(8, 12, 20, 0.58)),
    radial-gradient(120% 100% at 0% 0%, rgba(var(--odei-color-jade-rgb), 0.09), transparent 70%);
  padding: 8px 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.before-after-summary.awaiting {
  border-color: rgba(var(--odei-color-jade-rgb), 0.32);
  box-shadow: inset 0 0 0 1px rgba(var(--odei-color-jade-rgb), 0.12);
}

.before-after-summary-focus {
  font-size: 11px;
  color: var(--ink-high);
  letter-spacing: 0.03em;
  font-weight: 600;
}

.before-after-summary-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.before-after-summary-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  border: 1px solid var(--stroke-soft);
  border-radius: 999px;
  background: rgba(8, 12, 20, 0.64);
  color: var(--ink-low);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.before-after-summary-chip strong {
  font-size: 11px;
  color: var(--ink-high);
}

.before-after-summary-chip.added {
  border-color: rgba(34, 197, 94, 0.42);
  color: #92f0ad;
}

.before-after-summary-chip.changed {
  border-color: rgba(245, 158, 11, 0.42);
  color: #f5cf7d;
}

.before-after-summary-chip.removed {
  border-color: rgba(239, 68, 68, 0.42);
  color: #f59f9f;
}

.before-after-titleblock {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.before-after-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-high);
}

.before-after-subtitle {
  font-size: 11px;
  color: var(--ink-low);
}

.before-after-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.before-after-op {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid var(--stroke-soft);
  color: var(--ink-low);
  background: rgba(8, 12, 20, 0.7);
}

.before-after-op.hidden {
  display: none;
}

.before-after-op[data-op^='create'] {
  color: var(--diff-created);
  border-color: rgba(34, 197, 94, 0.45);
  background: rgba(34, 197, 94, 0.1);
}

.before-after-op[data-op^='update'] {
  color: var(--diff-updated);
  border-color: rgba(234, 179, 8, 0.45);
  background: rgba(234, 179, 8, 0.1);
}

.before-after-op[data-op^='delete'] {
  color: var(--diff-deleted);
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.1);
}

.before-after-close {
  background: transparent;
  border: none;
  color: var(--ink-low);
  font-size: 18px;
  cursor: pointer;
}

.before-after-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.before-after-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.before-after-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.before-after-label {
  font-size: 11px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.before-after-json {
  background: var(--bg-01);
  border: 1px solid var(--stroke-soft);
  border-radius: 8px;
  padding: 8px;
  max-height: 180px;
  overflow: auto;
  font-size: 11px;
  color: var(--ink-med);
  line-height: 1.4;
}

.before-after-diff {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.before-after-relations {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px dashed var(--stroke-soft);
  padding-top: 10px;
}

.before-after-relations.hidden {
  display: none;
}

.before-after-relations-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-low);
}

.before-after-relations-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.before-after-relation-item {
  border: 1px solid var(--stroke-soft);
  border-radius: 6px;
  background: rgba(8, 12, 20, 0.6);
  color: var(--ink-med);
  padding: 6px 8px;
  font-size: 11px;
}

.before-after-relation-item.create_rel {
  border-color: rgba(var(--odei-color-jade-rgb), 0.35);
  color: var(--diff-created);
}

.before-after-relation-item.delete_rel {
  border-color: rgba(239, 154, 154, 0.35);
  color: var(--diff-deleted);
}

.diff-row {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg-03);
  border: 1px solid transparent;
  font-size: 11px;
  color: var(--ink-med);
}

.diff-row.added {
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.08);
}

.diff-row.removed {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
}

.diff-row.changed {
  border-color: rgba(234, 179, 8, 0.4);
  background: rgba(234, 179, 8, 0.08);
}

.diff-key {
  font-weight: 600;
  color: var(--ink-high);
}

.diff-row.added .diff-key {
  color: var(--diff-created);
}

.diff-row.removed .diff-key {
  color: var(--diff-deleted);
}

.diff-row.changed .diff-key {
  color: var(--diff-updated);
}

.diff-empty {
  font-size: 12px;
  color: var(--ink-low);
}

@media (max-width: 900px) {
  .commander-main {
    grid-template-columns: 1fr;
  }

  .before-after-summary-row {
    gap: 5px;
  }

  .before-after-columns {
    grid-template-columns: 1fr;
  }

  .diff-row {
    grid-template-columns: 1fr;
  }
}

/* Layer-specific accent colors */
.layer-tab[data-layer='strategy'].active {
  background: rgba(147, 51, 234, 0.1);
  border-color: #a78bfa;
  color: #a78bfa;
  box-shadow: 0 0 12px rgba(147, 51, 234, 0.2);
}

.layer-tab[data-layer='strategy'].active .layer-count {
  background: rgba(147, 51, 234, 0.2);
  color: #a78bfa;
}

.layer-tab[data-layer='tactics'].active {
  background: rgba(59, 130, 246, 0.1);
  border-color: #60a5fa;
  color: #60a5fa;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.layer-tab[data-layer='tactics'].active .layer-count {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.layer-tab[data-layer='execution'].active {
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 0 12px var(--glow-accent);
}

.layer-tab[data-layer='execution'].active .layer-count {
  background: rgba(var(--odei-color-jade-rgb), 0.2);
  color: var(--accent-primary);
}

.layer-tab[data-layer='track'].active {
  background: rgba(var(--odei-color-gold-rgb), 0.1);
  border-color: var(--accent-secondary);
  color: var(--accent-secondary);
  box-shadow: 0 0 12px rgba(var(--odei-color-gold-rgb), 0.2);
}

.layer-tab[data-layer='track'].active .layer-count {
  background: rgba(var(--odei-color-gold-rgb), 0.2);
  color: var(--accent-secondary);
}

/* Layer shortcut badges */
.layer-shortcut {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
  margin-left: 4px;
  background: rgba(29, 35, 49, 0.8);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.25);
  border-radius: 3px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  font-size: 9px;
  font-weight: 500;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show shortcuts on hover */
.layer-tab:hover .layer-shortcut {
  display: inline-flex;
  opacity: 1;
}

/* Help button styling */
.layer-help-btn {
  min-width: 36px;
  padding: 10px 12px;
  justify-content: center;
}

.layer-help-btn .layer-name {
  font-size: 14px;
  font-weight: 600;
}

.layer-help-btn:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

/* ============================================
   Layer Content Cards (Strategy/Tactics/Track)
   ============================================ */
.layer-card {
  background: var(--bg-04);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.layer-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.layer-card-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.layer-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-high);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.layer-card-status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: var(--bg-02);
  color: var(--ink-low);
}

.layer-card-status.status-active {
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  color: var(--accent-primary);
}

.layer-card-status.status-planning,
.layer-card-status.status-ideation {
  background: rgba(var(--odei-color-gold-rgb), 0.15);
  color: var(--accent-secondary);
}

.layer-card-status.status-build {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.layer-card-summary {
  font-size: 12px;
  color: var(--ink-low);
  line-height: 1.4;
}

.layer-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 11px;
  color: var(--ink-low);
}

.layer-card-meta .meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Metric cards for Track layer */
.metric-card {
  background: var(--bg-04);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

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

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

.metric-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-med);
}

.metric-card-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
}

.metric-card-unit {
  font-size: 12px;
  color: var(--ink-low);
  margin-left: 4px;
}

.metric-card-trend {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.metric-card-trend.up {
  color: #6ee7b7;
}

.metric-card-trend.down {
  color: var(--accent-danger);
}

.metric-card-trend.neutral {
  color: var(--ink-low);
}

/* ============================================
   Empty States for Layers
   ============================================ */
.layer-empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-low);
  font-size: 13px;
}

.layer-empty-icon {
  font-size: 32px;
  margin-bottom: 8px;
  opacity: 0.5;
}

.layer-empty-text {
  margin-bottom: 4px;
}

.layer-empty-hint {
  font-size: 11px;
  opacity: 0.7;
}

/* ============================================
   Command Terminal (Pinned Agent Console)
   ============================================ */
.command-terminal-section {
  padding: 16px 20px;
  background: var(--bg-02);
  border-top: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.command-terminal {
  background: var(--bg-03);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 280px;
}

.command-terminal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, var(--bg-04) 0%, var(--bg-03) 100%);
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.15);
  flex-shrink: 0;
}

.terminal-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.terminal-title-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-high);
}

.terminal-title-sub {
  font-size: 11px;
  color: var(--ink-low);
}

.terminal-agent-selector {
  display: flex;
  align-items: center;
  gap: 8px;
}

.terminal-select {
  padding: 6px 12px;
  background: var(--bg-02);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.terminal-select:hover {
  border-color: var(--accent-primary);
}

.terminal-select:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--glow-accent);
}

.terminal-select option {
  background: var(--bg-02);
  color: var(--ink-high);
}

.terminal-status {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-low);
  transition: all 0.3s ease;
}

.status-dot.idle {
  background: var(--ink-low);
}

.status-dot.active {
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-primary);
}

.status-dot.working {
  background: var(--accent-secondary);
  box-shadow: 0 0 6px var(--accent-secondary);
  animation: pulse 1.5s ease-in-out infinite;
}

.status-dot.error {
  background: var(--accent-danger);
  box-shadow: 0 0 6px var(--accent-danger);
}

.command-terminal-output {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-med);
  background: var(--bg-01);
  min-height: 0;
}

.command-terminal-output::-webkit-scrollbar {
  width: 6px;
}

.command-terminal-output::-webkit-scrollbar-track {
  background: var(--bg-01);
}

.command-terminal-output::-webkit-scrollbar-thumb {
  background: rgba(var(--odei-color-jade-rgb), 0.3);
  border-radius: 3px;
}

.command-terminal-output::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.5);
}

.terminal-placeholder,
.terminal-connected {
  color: var(--ink-low);
  font-style: italic;
  padding: 8px;
}

.terminal-connected {
  color: var(--ink-med);
}

.command-terminal-input {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-03);
  border-top: 1px solid rgba(var(--odei-color-jade-rgb), 0.15);
  flex-shrink: 0;
}

.terminal-input-field {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-02);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: var(--ink-high);
  font-family: 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  resize: none;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  min-height: 40px;
  max-height: 80px;
}

.terminal-input-field:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--glow-accent);
}

.terminal-input-field::placeholder {
  color: var(--ink-low);
  font-style: italic;
}

.terminal-send-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, var(--accent-primary) 0%, #38b2ac 100%);
  border: none;
  border-radius: 8px;
  color: var(--bg-01);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.terminal-send-btn:hover {
  background: linear-gradient(135deg, #38b2ac 0%, var(--accent-primary) 100%);
  box-shadow: 0 0 12px var(--glow-accent);
}

.terminal-send-btn:active {
  transform: scale(0.98);
}

.terminal-send-btn svg {
  width: 16px;
  height: 16px;
}

/* Joint badge for tasks */
.task-joint-badge {
  font-size: 9px;
  padding: 2px 8px;
  background: linear-gradient(135deg, rgba(var(--odei-color-jade-rgb), 0.15), rgba(var(--odei-color-gold-rgb), 0.15));
  color: var(--ink-med);
  border-radius: 4px;
  font-weight: 600;
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.2);
}

/* Item type icon for non-task items */
.item-type-icon {
  font-size: 16px;
  flex-shrink: 0;
  width: 24px;
  text-align: center;
}

/* ============================================
   Health Readiness Widget
   ============================================ */
.widget-card {
  background: var(--bg-03);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
}

.widget-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.health-widget {
  border-color: rgba(var(--odei-color-jade-rgb), 0.25);
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--odei-color-jade-rgb), 0.15);
}

.widget-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

.widget-refresh-icon {
  font-size: 12px;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.widget-card:hover .widget-refresh-icon {
  opacity: 1;
}

.widget-loading {
  padding: 20px;
  text-align: center;
  color: var(--ink-low);
  font-size: 12px;
  font-style: italic;
}

.widget-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget-score-row {
  display: flex;
  gap: 14px;
  align-items: center;
}

.widget-score-box {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-04) 0%, rgba(29, 35, 49, 0.8) 100%);
  border: 2px solid var(--glass-border);
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.widget-score-box.score-good {
  border-color: var(--accent-primary);
  background: linear-gradient(135deg, rgba(var(--odei-color-jade-rgb), 0.15) 0%, var(--bg-04) 100%);
  box-shadow: 0 0 16px rgba(var(--odei-color-jade-rgb), 0.2);
}

.widget-score-box.score-warning {
  border-color: var(--accent-secondary);
  background: linear-gradient(135deg, rgba(var(--odei-color-gold-rgb), 0.15) 0%, var(--bg-04) 100%);
  box-shadow: 0 0 16px rgba(var(--odei-color-gold-rgb), 0.2);
}

.widget-score-box.score-danger {
  border-color: var(--accent-danger);
  background: linear-gradient(135deg, rgba(255, 123, 123, 0.15) 0%, var(--bg-04) 100%);
  box-shadow: 0 0 16px rgba(255, 123, 123, 0.2);
}

.widget-score-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.widget-score-box.score-good .widget-score-value {
  color: var(--accent-primary);
}

.widget-score-box.score-warning .widget-score-value {
  color: var(--accent-secondary);
}

.widget-score-box.score-danger .widget-score-value {
  color: var(--accent-danger);
}

.widget-status-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.widget-status-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}

.widget-status-label {
  color: var(--ink-low);
  font-size: 11px;
}

.widget-status-value {
  color: var(--ink-high);
  font-weight: 600;
  font-size: 13px;
}

.widget-metrics-row {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.widget-metric {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}

.widget-metric-label {
  color: var(--ink-low);
  font-size: 11px;
}

.widget-metric-value {
  color: var(--ink-med);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.widget-metric-value.metric-positive {
  color: #22c55e;
}

.widget-metric-value.metric-negative {
  color: var(--accent-danger);
}

.widget-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}

.widget-alert-warning {
  background: rgba(var(--odei-color-gold-rgb), 0.1);
  border: 1px solid rgba(var(--odei-color-gold-rgb), 0.3);
  color: var(--accent-secondary);
}

.widget-alert-info {
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.3);
  color: var(--accent-primary);
}

.widget-alert-danger {
  background: rgba(255, 123, 123, 0.1);
  border: 1px solid rgba(255, 123, 123, 0.3);
  color: var(--accent-danger);
}

/* ============================================
   Widget Sidebar Container
   ============================================ */
.column-widgets {
  background: transparent;
  border: none;
  min-height: auto;
}

.widget-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.widget-container {
  background: var(--bg-03);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: all 0.2s ease;
}

.widget-container:hover {
  border-color: var(--glass-border-hover);
}

.widget-icon {
  font-size: 14px;
  margin-right: 6px;
}

/* ============================================
   Schedule Timeline
   ============================================ */
.command-schedule {
  padding: 12px 20px;
  background: var(--bg-02);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
}

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

.schedule-icon {
  font-size: 14px;
}

.schedule-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-high);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.schedule-count {
  padding: 2px 8px;
  background: var(--bg-04);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-med);
  margin-left: auto;
}

.schedule-blocks {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.schedule-blocks::-webkit-scrollbar {
  height: 4px;
}

.schedule-blocks::-webkit-scrollbar-track {
  background: var(--bg-01);
  border-radius: 2px;
}

.schedule-blocks::-webkit-scrollbar-thumb {
  background: rgba(var(--odei-color-jade-rgb), 0.3);
  border-radius: 2px;
}

.schedule-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bg-03);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  min-width: 140px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.2s ease;
}

.schedule-block:hover {
  border-color: var(--glass-border-hover);
  background: var(--bg-04);
}

.schedule-block-conflict {
  border-color: rgba(255, 123, 123, 0.6);
  box-shadow: 0 0 10px rgba(255, 123, 123, 0.2);
}

.schedule-block-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-low);
  font-variant-numeric: tabular-nums;
}

.schedule-block-title {
  font-size: 12px;
  color: var(--ink-high);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.schedule-block-active {
  border-color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.08);
  box-shadow: 0 0 12px rgba(var(--odei-color-jade-rgb), 0.15);
}

.schedule-block-active .schedule-block-time {
  color: var(--accent-primary);
}

.schedule-block-past {
  opacity: 0.5;
}

.schedule-block-past .schedule-block-title {
  text-decoration: line-through;
}

.schedule-now-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 8px;
  padding: 2px 6px;
  background: var(--accent-primary);
  color: var(--bg-01);
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  animation: nowPulse 2s ease-in-out infinite;
}

.schedule-conflict-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 8px;
  padding: 2px 6px;
  background: rgba(255, 123, 123, 0.2);
  color: var(--odei-color-danger-400);
  border: 1px solid rgba(255, 123, 123, 0.5);
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.schedule-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--ink-low);
  font-size: 12px;
  font-style: italic;
}

.schedule-empty-icon {
  font-size: 16px;
  opacity: 0.5;
}

.schedule-loading {
  padding: 16px;
  text-align: center;
  color: var(--ink-low);
  font-size: 12px;
}

/* ============================================
   Agent Status Panel
   ============================================ */
.agent-panel {
  border-color: rgba(147, 51, 234, 0.25);
}

.agent-panel .widget-title {
  color: #a78bfa;
}

.agent-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.agent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--bg-04);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.agent-item:hover {
  border-color: var(--glass-border);
}

.agent-item.agent-working {
  border-color: rgba(var(--odei-color-jade-rgb), 0.4);
  background: rgba(var(--odei-color-jade-rgb), 0.05);
}

.agent-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.agent-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-med);
  flex: 1;
}

.agent-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.agent-status-dot.idle {
  background: var(--ink-low);
  opacity: 0.5;
}

.agent-status-dot.working {
  background: var(--accent-primary);
  box-shadow: 0 0 8px var(--accent-primary);
  animation: statusPulse 2s ease-in-out infinite;
}

.agent-status-dot.error {
  background: var(--accent-danger);
  box-shadow: 0 0 6px var(--accent-danger);
}

/* ============================================
   Telegram Widget
   ============================================ */
.telegram-widget {
  border-color: rgba(59, 130, 246, 0.25);
}

.telegram-widget .widget-title {
  color: #60a5fa;
}

.telegram-unread {
  padding: 2px 8px;
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

.telegram-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.telegram-message {
  padding: 10px 12px;
  background: var(--bg-04);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.telegram-message:hover {
  border-color: var(--glass-border);
}

.telegram-message-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.telegram-sender {
  font-size: 11px;
  font-weight: 600;
  color: #60a5fa;
}

.telegram-time {
  font-size: 10px;
  color: var(--ink-low);
  font-variant-numeric: tabular-nums;
}

.telegram-message-text {
  font-size: 12px;
  color: var(--ink-med);
  line-height: 1.4;
  word-break: break-word;
}

/* ============================================
   Widget Column Responsive
   ============================================ */
@media (max-width: 1200px) {
  .column-widgets {
    grid-column: span 2;
  }

  .widget-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .widget-sidebar > * {
    flex: 1;
    min-width: 250px;
  }
}

@media (max-width: 800px) {
  .column-widgets {
    grid-column: span 1;
  }

  .widget-sidebar {
    flex-direction: column;
  }

  .command-schedule {
    padding: 10px 16px;
  }

  .schedule-blocks {
    gap: 6px;
  }

  .schedule-block {
    min-width: 120px;
    padding: 8px 12px;
  }
}

/* ============================================
   HUD Bar - Enhanced Widget Styles
   ============================================ */
.command-hud-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(180deg, var(--bg-03) 0%, var(--bg-02) 100%);
  border-bottom: 1px solid var(--glass-border);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.hud-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 14px;
  background: rgba(18, 22, 34, 0.65);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.12);
  border-radius: 10px;
  min-width: 80px;
  transition: all 0.2s ease;
}

.hud-widget.clickable {
  cursor: pointer;
}

.hud-widget.clickable:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.4);
  background: rgba(var(--odei-color-jade-rgb), 0.08);
  transform: translateY(-1px);
}

.hud-widget.clickable.active {
  border-color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.12);
  box-shadow: 0 0 12px rgba(var(--odei-color-jade-rgb), 0.2);
}

.hud-widget-label {
  font-size: 10px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.hud-widget-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.hud-widget-value.warning {
  color: var(--accent-secondary);
}

.hud-widget-value.danger {
  color: var(--accent-danger);
}

.hud-widget-sub {
  font-size: 10px;
  color: var(--ink-low);
  margin-top: 2px;
}

/* HUD Widget Meters */
.hud-widget-meter {
  width: 100%;
  height: 4px;
  background: var(--bg-04);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.hud-widget-meter .meter-fill {
  height: 100%;
  border-radius: 2px;
  transition:
    width 0.3s ease,
    background 0.3s ease;
  background: var(--accent-primary);
}

.hud-widget-meter.meter-good .meter-fill {
  background: var(--accent-primary);
}

.hud-widget-meter.meter-warning .meter-fill {
  background: var(--accent-secondary);
}

.hud-widget-meter.meter-danger .meter-fill {
  background: var(--accent-danger);
}

/* ============================================
   Time Widget
   ============================================ */
.hud-time-widget {
  flex-direction: row;
  gap: 12px;
  min-width: 180px;
  padding: 8px 16px;
}

.hud-time-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hud-time-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.hud-time-zone {
  font-size: 10px;
  color: var(--ink-low);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.hud-zone-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.25);
}

.hud-zone-indicator .zone-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-primary);
}

.hud-zone-indicator .zone-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-primary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* Zone state colors */
.hud-zone-indicator.zone-peak .zone-indicator {
  background: var(--accent-primary);
  box-shadow: 0 0 6px var(--accent-primary);
}

.hud-zone-indicator.zone-afternoon {
  background: rgba(var(--odei-color-gold-rgb), 0.1);
  border-color: rgba(var(--odei-color-gold-rgb), 0.25);
}

.hud-zone-indicator.zone-afternoon .zone-indicator {
  background: var(--accent-secondary);
}

.hud-zone-indicator.zone-afternoon .zone-label {
  color: var(--accent-secondary);
}

.hud-zone-indicator.zone-evening {
  background: rgba(255, 139, 90, 0.1);
  border-color: rgba(255, 139, 90, 0.25);
}

.hud-zone-indicator.zone-evening .zone-indicator {
  background: #ff8b5a;
}

.hud-zone-indicator.zone-evening .zone-label {
  color: #ff8b5a;
}

.hud-zone-indicator.zone-night {
  background: rgba(124, 136, 154, 0.1);
  border-color: rgba(124, 136, 154, 0.25);
}

.hud-zone-indicator.zone-night .zone-indicator {
  background: var(--ink-low);
}

.hud-zone-indicator.zone-night .zone-label {
  color: var(--ink-low);
}

/* Outside work hours highlight */
.hud-time-widget.outside-work-hours {
  border-color: rgba(255, 139, 90, 0.3);
}

.hud-zone-indicator.outside-work-hours {
  background: rgba(255, 139, 90, 0.1);
  border-color: rgba(255, 139, 90, 0.4);
}

/* Focus indicator */
.hud-focus-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  border: 1px solid var(--accent-primary);
  border-radius: 8px;
  animation: focusPulse 2s ease-in-out infinite;
}

.hud-focus-indicator .focus-icon::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent-primary);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-primary);
}

@keyframes focusPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--odei-color-jade-rgb), 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(var(--odei-color-jade-rgb), 0);
  }
}

/* ============================================
   Integrity Widget Enhanced
   ============================================ */
.hud-integrity-widget {
  position: relative;
}

.hud-integrity-widget.integrity-alert {
  animation: integrityPulse 2s ease-in-out infinite;
}

.hud-integrity-widget.score-good .hud-widget-value {
  color: var(--accent-primary);
}

.hud-integrity-widget.score-warning .hud-widget-value {
  color: var(--accent-secondary);
}

.hud-integrity-widget.score-danger .hud-widget-value {
  color: var(--accent-danger);
}

@keyframes integrityPulse {
  0%,
  100% {
    border-color: rgba(255, 123, 123, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 123, 123, 0.4);
  }
  50% {
    border-color: rgba(255, 123, 123, 0.6);
    box-shadow: 0 0 12px rgba(255, 123, 123, 0.3);
  }
}

/* Integrity tooltip */
.hud-integrity-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-04);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 160px;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}

.hud-integrity-widget:hover .hud-integrity-tooltip:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

.hud-integrity-tooltip .tooltip-item {
  font-size: 11px;
  color: var(--ink-med);
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hud-integrity-tooltip .tooltip-item:last-child {
  border-bottom: none;
}

/* ============================================
   Pending Widget Enhanced
   ============================================ */
.hud-pending-widget.pending-alert .hud-widget-value {
  color: var(--accent-secondary);
}

.hud-pending-widget.pending-bump {
  animation: pendingBump 0.3s ease-out;
}

@keyframes pendingBump {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.hud-pending-split {
  display: flex;
  gap: 4px;
  align-items: center;
}

.hud-pending-split .pending-approvals.has-items {
  color: var(--accent-secondary);
}

.hud-pending-split .pending-outcomes.has-items {
  color: var(--accent-primary);
}

.hud-pending-split .pending-separator {
  color: var(--ink-low);
  opacity: 0.5;
}

/* Pending filter states */
.hud-pending-widget.filter-all {
  border-color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.1);
}

.hud-pending-widget.filter-approvals {
  border-color: var(--accent-secondary);
  background: rgba(var(--odei-color-gold-rgb), 0.1);
}

.hud-pending-widget.filter-outcomes {
  border-color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.08);
}

/* ============================================
   Capacity & Readiness Widgets
   ============================================ */
.hud-capacity-widget,
.hud-readiness-widget {
  min-width: 90px;
}

/* ============================================
   Active Destination Enhanced
   ============================================ */
.destination-item {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(29, 35, 49, 0.6);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.1);
  margin-bottom: 8px;
  transition: all 0.2s ease;
}

.destination-item:last-child {
  margin-bottom: 0;
}

.destination-item:hover {
  border-color: rgba(var(--odei-color-jade-rgb), 0.3);
  background: rgba(29, 35, 49, 0.8);
}

.destination-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.destination-title {
  font-weight: 600;
  color: var(--ink-high);
  flex: 1;
}

.destination-deadline {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.destination-deadline.deadline-upcoming {
  background: rgba(var(--odei-color-jade-rgb), 0.15);
  color: var(--accent-primary);
}

.destination-deadline.deadline-soon {
  background: rgba(var(--odei-color-gold-rgb), 0.15);
  color: var(--accent-secondary);
}

.destination-deadline.deadline-urgent {
  background: rgba(255, 123, 123, 0.15);
  color: var(--accent-danger);
  animation: deadlinePulse 1.5s ease-in-out infinite;
}

@keyframes deadlinePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Destination progress bar */
.destination-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.destination-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-04);
  border-radius: 2px;
  overflow: hidden;
}

.destination-progress-fill {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.destination-progress-value {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-primary);
  min-width: 32px;
  text-align: right;
}

.destination-signals {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-low);
}

/* Focus button */
.destination-focus-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  background: rgba(var(--odei-color-jade-rgb), 0.1);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.3);
  border-radius: 6px;
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.destination-focus-btn:hover {
  background: rgba(var(--odei-color-jade-rgb), 0.2);
  border-color: var(--accent-primary);
}

.destination-focus-btn svg {
  opacity: 0.8;
}

/* ============================================
   HUD Bar Responsive
   ============================================ */
@media (max-width: 1200px) {
  .command-hud-bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .hud-time-widget {
    min-width: 160px;
  }

  .hud-widget {
    min-width: 70px;
    padding: 6px 10px;
  }
}

@media (max-width: 800px) {
  .command-hud-bar {
    padding: 10px 16px;
  }

  .hud-time-widget {
    order: -1;
    width: 100%;
    justify-content: space-between;
  }

  .hud-widget-value {
    font-size: 16px;
  }

  .hud-widget-label {
    font-size: 9px;
  }
}

/* ============================================
   Onboarding Wizard
   ============================================ */
.onboarding-wizard {
  height: 100%;
  overflow: auto;
  padding: 16px;
}

.onboarding-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  background: var(--surface-01);
  border: 1px solid var(--stroke-soft);
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--shadow-soft);
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.onboarding-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-high);
}

.onboarding-subtitle {
  font-size: 12px;
  color: var(--ink-low);
}

.onboarding-status {
  font-size: 11px;
  color: var(--ink-med);
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-03);
  border: 1px solid var(--stroke-soft);
}

.onboarding-phases {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding-phase {
  background: var(--surface-02);
  border: 1px solid var(--stroke-soft);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-phase.warning {
  border-color: rgba(255, 123, 123, 0.4);
  box-shadow: 0 0 12px rgba(255, 123, 123, 0.12);
}

.onboarding-phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.onboarding-phase-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-high);
}

.onboarding-phase-meta {
  font-size: 11px;
  color: var(--ink-low);
}

.onboarding-phase-actions {
  display: flex;
  gap: 8px;
}

.onboarding-proposals {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onboarding-proposal {
  background: var(--bg-03);
  border: 1px solid var(--stroke-soft);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.onboarding-proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.onboarding-proposal-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-high);
}

.onboarding-proposal-desc {
  font-size: 11px;
  color: var(--ink-low);
}

.onboarding-proposal-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(var(--odei-color-jade-rgb), 0.12);
  border: 1px solid rgba(var(--odei-color-jade-rgb), 0.35);
  color: var(--accent-primary);
}

.onboarding-proposal-status.warning {
  border-color: rgba(255, 123, 123, 0.35);
  color: var(--accent-danger);
  background: rgba(255, 123, 123, 0.12);
}

.onboarding-proposal-meta {
  font-size: 10px;
  color: var(--ink-med);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.onboarding-op-list {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  color: var(--ink-med);
}

.onboarding-warning {
  font-size: 11px;
  color: var(--accent-danger);
  background: rgba(255, 123, 123, 0.12);
  border: 1px solid rgba(255, 123, 123, 0.35);
  padding: 6px 8px;
  border-radius: 8px;
}

.onboarding-message {
  font-size: 12px;
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface-03);
  border: 1px solid var(--stroke-soft);
  color: var(--ink-med);
}

.onboarding-message.success {
  border-color: rgba(34, 197, 94, 0.4);
  color: #86efac;
  background: rgba(34, 197, 94, 0.12);
}

.onboarding-message.error {
  border-color: rgba(255, 123, 123, 0.4);
  color: var(--accent-danger);
  background: rgba(255, 123, 123, 0.12);
}

.onboarding-message.info {
  border-color: rgba(var(--odei-color-jade-rgb), 0.3);
  color: var(--accent-primary);
  background: rgba(var(--odei-color-jade-rgb), 0.08);
}

.onboarding-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.onboarding-button {
  background: transparent;
  border: 1px solid var(--stroke-soft);
  color: var(--ink-high);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s var(--transition);
}

.onboarding-button:hover {
  border-color: var(--stroke-strong);
  background: rgba(var(--odei-color-jade-rgb), 0.08);
}

.onboarding-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.onboarding-button.primary {
  background: rgba(var(--odei-color-jade-rgb), 0.18);
  border-color: rgba(var(--odei-color-jade-rgb), 0.4);
  color: var(--accent-primary);
}

.onboarding-button.secondary {
  background: rgba(8, 10, 18, 0.6);
  border-color: var(--stroke-soft);
  color: var(--ink-med);
}

.onboarding-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-low);
}

.onboarding-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(var(--odei-color-jade-rgb), 0.2);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.onboarding-link {
  margin-left: 8px;
  border: none;
  background: none;
  color: var(--accent-primary);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
}

.onboarding-empty {
  font-size: 12px;
  color: var(--ink-low);
  background: var(--surface-03);
  border: 1px dashed var(--stroke-soft);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
}

.onboarding-card .mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

@media (max-width: 900px) {
  .onboarding-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .onboarding-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .onboarding-phase-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .onboarding-phase-actions {
    width: 100%;
    justify-content: flex-end;
  }
}