/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background 0.15s, opacity 0.15s;
  cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--color-brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-brand-dark); }
.btn-secondary { background: var(--color-bg-tertiary); color: var(--color-text); }
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-raised); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-google {
  background: #fff;
  color: #1f2937;
  border: 1px solid #d1d5db;
  justify-content: center;
  padding: var(--space-3) var(--space-6);
}
.btn-google:hover { background: #f9fafb; }

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: 9999px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-running { background: var(--color-success-bg); color: var(--color-success); }
.badge-paused { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-stopped { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }
.badge-error { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-risk-off { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-paper { background: rgba(245,158,11,0.15); color: var(--color-paper); }
.badge-live { background: var(--color-success-bg); color: var(--color-live); }
.badge-backtest { background: var(--color-info-bg); color: var(--color-info); }

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

/* Nav */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  border-radius: 0;
  transition: background 0.1s, color 0.1s;
}
.nav-item:hover { background: var(--color-bg-tertiary); color: var(--color-text); }
.nav-item.active { color: var(--color-brand); background: var(--color-info-bg); }
.nav-section {
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-5) var(--space-2);
}

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-bg-tertiary); }

/* Loading */
.loading { color: var(--color-text-muted); text-align: center; padding: var(--space-8); }
.empty-state { color: var(--color-text-muted); text-align: center; padding: var(--space-10); }