/* === DASHBOARD TOKENS === */
:root {
  --cc-bg: #080b10;
  --cc-card: #0f1520;
  --cc-card-hover: #141d2b;
  --cc-fg: #e8edf5;
  --cc-fg-muted: #6b7a8f;
  --cc-teal: #00e5c3;
  --cc-teal-dim: rgba(0, 229, 195, 0.12);
  --cc-amber: #ffb224;
  --cc-amber-dim: rgba(255, 178, 36, 0.12);
  --cc-border: rgba(255,255,255,0.07);
  --cc-border-card: rgba(0,229,195,0.15);
}

/* === BASE === */
body {
  background: var(--cc-bg);
  font-family: 'Space Grotesk', sans-serif;
  color: var(--cc-fg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === WRAPPER === */
.cc-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* === TICKER ROW === */
.ticker-row {
  background: var(--cc-card);
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.ticker-track {
  display: flex;
  gap: 0;
  animation: tickerScroll 40s linear infinite;
  white-space: nowrap;
  padding: 0.65rem 0;
}
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker-coins {
  display: flex;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  gap: 0;
}
.ticker-coin {
  padding: 0 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.ticker-sym { color: var(--cc-fg-muted); }
.ticker-price { color: var(--cc-fg); font-weight: 500; }
.ticker-pct { font-size: 0.68rem; }
.ticker-pct--up { color: var(--cc-teal); }
.ticker-pct--down { color: #f87171; }
.ticker-sep { color: var(--cc-border); }

/* === METRICS ROW === */
.metrics-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.metric-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
}
.metric-card--portfolio {
  border-color: var(--cc-border-card);
  box-shadow: 0 0 0 1px rgba(0,229,195,0.04);
}
.mc-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-fg-muted);
  margin-bottom: 0.4rem;
}
.mc-value {
  font-family: 'DM Mono', monospace;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.mc-value.teal { color: var(--cc-teal); }
.mc-value.amber { color: var(--cc-amber); }
.mc-sub { display: flex; align-items: center; gap: 0.5rem; }
.mc-sub-label { font-family: 'DM Mono', monospace; font-size: 0.65rem; color: var(--cc-fg-muted); }
.pnl { font-family: 'DM Mono', monospace; font-size: 0.72rem; font-weight: 500; }
.pnl--positive { color: var(--cc-teal); }
.pnl--negative { color: #f87171; }
.pnl--neutral { color: var(--cc-fg-muted); }

/* === MODE CARD === */
.mode-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.mode-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-fg-muted);
}
.mode-toggle {
  display: flex;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  padding: 3px;
  gap: 2px;
}
.mode-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--cc-fg-muted);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.45rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-btn--active {
  background: var(--cc-teal-dim);
  color: var(--cc-teal);
  border: 1px solid rgba(0,229,195,0.2);
}
.mode-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cc-teal);
  box-shadow: 0 0 5px var(--cc-teal);
}
#modeBadgeText {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--cc-fg-muted);
}

/* === MAIN GRID === */
.main-grid {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 1rem;
  align-items: start;
}
.col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.col-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-fg-muted);
}
.col-count {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--cc-teal);
  background: var(--cc-teal-dim);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.col-badge {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--cc-fg-muted);
  background: rgba(255,255,255,0.05);
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  letter-spacing: 0.06em;
}
.col-badge--active {
  color: var(--cc-teal);
  background: var(--cc-teal-dim);
  border: 1px solid rgba(0,229,195,0.2);
}
.col-clear {
  background: none;
  border: none;
  color: var(--cc-fg-muted);
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.col-clear:hover { color: var(--cc-fg); }

/* === AGENT CARDS === */
.agents-col { display: flex; flex-direction: column; gap: 0.5rem; }
.agent-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  transition: border-color 0.2s, background 0.2s;
}
.agent-card:hover { border-color: rgba(0,229,195,0.2); background: var(--cc-card-hover); }
.ac-icon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.ac-icon--sentiment { color: #a78bfa; }
.ac-icon--arb { color: var(--cc-teal); }
.ac-icon--risk { color: var(--cc-amber); }
.ac-icon--research { color: #60a5fa; }
.ac-body { flex: 1; min-width: 0; }
.ac-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.15rem; }
.ac-desc { font-size: 0.68rem; color: var(--cc-fg-muted); margin-bottom: 0.5rem; }
.ac-status { display: flex; align-items: center; gap: 0.35rem; }
.as-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cc-fg-muted);
  flex-shrink: 0;
}
.as-dot--active {
  background: var(--cc-teal);
  box-shadow: 0 0 5px var(--cc-teal);
}
.as-dot--warning { background: var(--cc-amber); box-shadow: 0 0 5px var(--cc-amber); }
.as-text { font-family: 'DM Mono', monospace; font-size: 0.62rem; color: var(--cc-fg-muted); }
.ac-metric { text-align: right; flex-shrink: 0; }
.ac-metric-val { display: block; font-family: 'DM Mono', monospace; font-size: 0.95rem; font-weight: 500; }
.ac-metric-label { font-family: 'DM Mono', monospace; font-size: 0.58rem; color: var(--cc-fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* === MISSION PANEL === */
.mission-col { display: flex; flex-direction: column; gap: 0; }
.mission-panel { margin-bottom: 0; }
.mission-input-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.mission-input {
  flex: 1;
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  color: var(--cc-fg);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.mission-input::placeholder { color: var(--cc-fg-muted); }
.mission-input:focus { border-color: rgba(0,229,195,0.3); }
.mission-submit {
  background: var(--cc-teal-dim);
  border: 1px solid rgba(0,229,195,0.2);
  border-radius: 6px;
  color: var(--cc-teal);
  font-size: 1rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.mission-submit:hover { background: rgba(0,229,195,0.2); }
.mission-goal {
  background: var(--cc-card);
  border: 1px solid rgba(0,229,195,0.15);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.mg-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cc-teal);
  margin-bottom: 0.5rem;
}
.mg-text { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.75rem; line-height: 1.5; }
.mission-progress-wrap { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.mission-progress-bar {
  flex: 1;
  height: 4px;
  background: rgba(0,229,195,0.1);
  border-radius: 2px;
}
.mission-fill {
  height: 100%;
  width: 0%;
  background: var(--cc-teal);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.mission-pct {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: var(--cc-teal);
  font-weight: 500;
  min-width: 2.5rem;
  text-align: right;
}
.mg-meta {
  display: flex;
  justify-content: space-between;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--cc-fg-muted);
}

/* === MARKET TABLE === */
.market-table {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  overflow: hidden;
}
.mt-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr 1fr;
  padding: 0.75rem 1rem;
  gap: 0.5rem;
  border-bottom: 1px solid var(--cc-border);
}
.mt-row:last-child { border-bottom: none; }
.mt-row--head {
  background: rgba(255,255,255,0.03);
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cc-fg-muted);
}
.mt-pair {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
}
.mt-price {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: var(--cc-fg);
}
.mt-pct { font-family: 'DM Mono', monospace; font-size: 0.72rem; font-weight: 500; }
.mt-pct--up { color: var(--cc-teal); }
.mt-pct--down { color: #f87171; }
.mt-signal {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  color: var(--cc-fg-muted);
}
.mt-signal--buy { color: var(--cc-teal); }
.mt-signal--sell { color: #f87171; }
.mt-signal--hold { color: var(--cc-amber); }

/* === ACTIVITY STREAM === */
.stream-col { display: flex; flex-direction: column; }
.activity-stream {
  background: var(--cc-card);
  border: 1px solid var(--cc-border);
  border-radius: 8px;
  padding: 0.75rem;
  max-height: 600px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.activity-stream::-webkit-scrollbar { width: 3px; }
.activity-stream::-webkit-scrollbar-thumb { background: rgba(0,229,195,0.2); border-radius: 2px; }
.stream-item {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  animation: streamIn 0.3s ease;
}
@keyframes streamIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.stream-time { color: var(--cc-fg-muted); flex-shrink: 0; }
.stream-agent { font-weight: 500; flex-shrink: 0; }
.stream-agent--sentiment { color: #a78bfa; }
.stream-agent--arb { color: var(--cc-teal); }
.stream-agent--risk { color: var(--cc-amber); }
.stream-agent--research { color: #60a5fa; }
.stream-text { color: var(--cc-fg-muted); line-height: 1.4; }
.stream-item--positive .stream-text { color: var(--cc-fg); }

/* === RESPONSIVE === */
@media (max-width: 1100px) {
  .main-grid { grid-template-columns: 1fr 1fr; }
  .stream-col { grid-column: 1 / -1; }
  .activity-stream { max-height: 280px; }
}
@media (max-width: 800px) {
  .main-grid { grid-template-columns: 1fr; }
  .metrics-row { grid-template-columns: 1fr 1fr; }
  .metric-card--portfolio { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .metrics-row { grid-template-columns: 1fr; }
  .cc-wrapper { padding: 0 1rem 2rem; }
}