/* SparkMind Sovereign — Mission Control v7.0 */
:root {
  --bg-base: #020617;
  --bg-elev: #0f172a;
  --bg-card: #1e293b;
  --border: #334155;
  --accent-blue: #3b82f6;
  --accent-purple: #a855f7;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
}

html, body { background: var(--bg-base); }
body { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #475569; }
.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* Tab active state */
.tab-btn.active {
  color: white;
  border-bottom-color: #3b82f6;
}

/* Card */
.card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  transition: border-color .2s ease, transform .2s ease;
}
.card:hover { border-color: #475569; }

/* Code blocks */
pre.code-block {
  background: #0a0f1d;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: #cbd5e1;
  white-space: pre;
}

/* Badge */
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.125rem .5rem; border-radius:9999px; font-size:.65rem; font-weight:600; }
.badge-blue { background: rgba(59,130,246,.15); color:#93c5fd; border:1px solid rgba(59,130,246,.35); }
.badge-purple { background: rgba(168,85,247,.15); color:#d8b4fe; border:1px solid rgba(168,85,247,.35); }
.badge-emerald { background: rgba(16,185,129,.15); color:#6ee7b7; border:1px solid rgba(16,185,129,.35); }
.badge-amber { background: rgba(245,158,11,.15); color:#fcd34d; border:1px solid rgba(245,158,11,.35); }
.badge-red { background: rgba(239,68,68,.15); color:#fca5a5; border:1px solid rgba(239,68,68,.35); }
.badge-slate { background: rgba(100,116,139,.15); color:#cbd5e1; border:1px solid rgba(100,116,139,.35); }

/* Button */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .5rem .875rem;
  border-radius: 8px;
  font-size: .8125rem; font-weight: 600;
  transition: background .15s, transform .15s;
  cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: #2563eb; color: white; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #1e293b; color: #cbd5e1; border-color: #334155; }
.btn-secondary:hover { background: #334155; }
.btn-danger { background: #dc2626; color: white; }
.btn-success { background: #059669; color: white; }
.btn-sm { padding: .25rem .625rem; font-size: .7rem; }

/* Inputs */
.input, .textarea, .select {
  width: 100%;
  background: #0a0f1d;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: .5rem .75rem;
  color: #e2e8f0;
  font-size: .875rem;
  font-family: inherit;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
.textarea { resize: vertical; min-height: 80px; font-family: 'JetBrains Mono', monospace; font-size: .8rem; }

/* Label */
.label { display:block; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; margin-bottom:.25rem; }

/* Sprint trajectory chart */
.health-chart { display:grid; grid-template-columns: repeat(9, 1fr); gap:.25rem; align-items:end; height: 200px; padding: 1rem 0; }
.health-bar { background: linear-gradient(180deg, #10b981 0%, #059669 100%); border-radius: 4px 4px 0 0; min-height: 4px; position: relative; transition: opacity .2s; }
.health-bar.target { background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%); opacity: .4; }
.health-bar:hover { opacity: 1 !important; }
.health-bar-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #64748b; text-align: center; margin-top: .25rem; }

/* Gap card status colors */
.gap-open { border-left: 3px solid #ef4444; }
.gap-in-progress { border-left: 3px solid #f59e0b; }
.gap-resolved { border-left: 3px solid #10b981; opacity: .6; }
.gap-blocked { border-left: 3px solid #6366f1; }

/* Lane colors */
.lane-F { color: #60a5fa; background: rgba(59,130,246,.1); }
.lane-E { color: #93c5fd; background: rgba(37,99,235,.1); }
.lane-K { color: #d8b4fe; background: rgba(168,85,247,.1); }
.lane-B { color: #6ee7b7; background: rgba(16,185,129,.1); }
.lane-N { color: #fcd34d; background: rgba(245,158,11,.1); }
.lane-META { color: #cbd5e1; background: rgba(100,116,139,.1); }

/* Animations */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,.4); }
  50% { box-shadow: 0 0 0 8px rgba(59,130,246,0); }
}
.pulse-glow { animation: pulse-glow 2s infinite; }

/* Toast */
#toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast { background: #1e293b; border: 1px solid #475569; border-radius: 8px; padding: 12px 16px; min-width: 260px; max-width: 380px; color: #e2e8f0; font-size: .85rem; box-shadow: 0 10px 25px rgba(0,0,0,.3); animation: slideIn .25s ease-out; }
.toast-success { border-left: 4px solid #10b981; }
.toast-error { border-left: 4px solid #ef4444; }
.toast-info { border-left: 4px solid #3b82f6; }
@keyframes slideIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Markdown body */
.md-body h1, .md-body h2, .md-body h3 { color: white; font-weight: 700; margin-top: 1.25rem; margin-bottom: .5rem; }
.md-body h1 { font-size: 1.5rem; }
.md-body h2 { font-size: 1.25rem; }
.md-body h3 { font-size: 1.05rem; }
.md-body p { margin-bottom: .75rem; line-height: 1.6; }
.md-body code { background: #0a0f1d; padding: 2px 6px; border-radius: 4px; font-size: .85em; color: #fbbf24; }
.md-body ul, .md-body ol { padding-left: 1.5rem; margin-bottom: .75rem; }
.md-body li { margin-bottom: .25rem; }

/* Sub-brand color accents */
.brand-blue { --brand: #3b82f6; }
.brand-purple { --brand: #a855f7; }
.brand-emerald { --brand: #10b981; }
.brand-amber { --brand: #f59e0b; }

/* Hide scrollbars in code */
pre.code-block::-webkit-scrollbar { height: 6px; }