/* ==========================================================================
   Karmazillo Design System - kTrader Armor Dark Stylesheet
   Grounded in VISUAL_IDENTITY.md and BRAND_STRATEGY.md
   ========================================================================== */

:root {
  /* Ground-Truth Primary Gray (Official Brand Criteria) */
  --color-primary-gray: #545454;
  --kz-gray-primary: #545454;

  /* Core Karmazillo Armor Dark Palette Tokens */
  --color-obsidian-950: #0B0C0E;
  --color-charcoal-900: #181A1F;
  --color-charcoal-850: #1A1D24;
  --color-charcoal-800: #1F2228;
  --color-steel-700: #545454;
  --color-steel-800: #22262E;
  --color-steel-500: #848B98;
  --color-steel-400: #A0A7B5;
  --color-white: #FFFFFF;
  
  /* Desert Bronze & Antique Gold Accent Tokens */
  --color-gold-500: #C59B27;
  --color-gold-300: #E5C058;
  --color-gold-700: #8A6814;
  --color-gold-glow: rgba(197, 155, 39, 0.25);
  
  /* Semantic Telemetry Tokens */
  --color-status-success: #22C55E;
  --color-status-success-bg: rgba(34, 197, 94, 0.12);
  --color-status-danger: #EF4444;
  --color-status-danger-bg: rgba(239, 68, 68, 0.12);
  --color-status-warning: #F59E0B;
  --color-status-info: #38BDF8;

  /* Karmazillo Mathematical Gradients */
  --gradient-gold: linear-gradient(135deg, #E5C058 0%, #C59B27 50%, #8A6814 100%);
  --gradient-armor: linear-gradient(145deg, #2D3139 0%, #181A1F 65%, #0B0C0E 100%);
  --gradient-card: linear-gradient(180deg, #181A1F 0%, #14161B 100%);
  
  /* Typography Triad */
  --font-display: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Structural Geometry */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
}

/* Light / High-Contrast Theme (Canonical Design System Spec) */
[data-theme="light"] {
  --color-obsidian-950: #F8F7F4;
  --color-charcoal-900: #FFFFFF;
  --color-charcoal-850: #F3EFE8;
  --color-charcoal-800: #EFECE6;
  --color-steel-800: #D8D2C5;
  --color-steel-700: #C8CCD6;
  --color-steel-500: #4B5262;
  --color-steel-400: #575E6D;
  --color-white: #111317;

  --color-gold-500: #9B7813;
  --color-gold-300: #785A09;
  --color-gold-700: #B58A18;
  --color-gold-glow: rgba(155, 120, 19, 0.15);

  --gradient-gold: linear-gradient(135deg, #C59B27 0%, #9B7813 50%, #785A09 100%);
  --gradient-armor: linear-gradient(145deg, #FFFFFF 0%, #F5F3EF 65%, #EBE7DF 100%);
  --gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FAF8F5 100%);
}

[data-theme="light"] .kz-header {
  background: rgba(248, 247, 244, 0.94);
  border-bottom-color: var(--color-steel-800);
}

[data-theme="light"] .btn-kz-secondary {
  background: #FFFFFF;
  border-color: #D8D2C5;
  color: #111317;
}

[data-theme="light"] .btn-kz-secondary:hover {
  border-color: var(--color-gold-500);
  color: var(--color-gold-300);
}

[data-theme="light"] .telemetry-card,
[data-theme="light"] .radar-panel,
[data-theme="light"] .strike-card,
[data-theme="light"] .terminal-panel {
  background: #FFFFFF;
  border-color: #D8D2C5;
}

[data-theme="light"] .feed-console {
  background: #111317 !important;
  color: #E2E8F0 !important;
}

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
}

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

body.karmazillo-armor-theme {
  background-color: var(--color-obsidian-950);
  color: var(--color-white);
  font-family: var(--font-body);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ==========================================================================
   Header Bar (Canonical Master Header Lockup)
   ========================================================================== */

.kz-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 28px;
  background: var(--color-charcoal-900);
  border-bottom: 1px solid var(--color-steel-800);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand-lockup-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.kz-master-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
}

.app-identifier {
  display: flex;
  align-items: center;
  gap: 8px;
  border-left: 1px solid var(--color-steel-700);
  padding-left: 16px;
}

.app-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--color-white);
}

.app-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: rgba(197, 155, 39, 0.15);
  color: var(--color-gold-300);
  border: 1px solid rgba(197, 155, 39, 0.4);
}

.live-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-status-success);
}

.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--color-status-success);
  box-shadow: 0 0 8px var(--color-status-success);
  animation: pulse-dot 1.8s infinite;
}

@keyframes pulse-dot {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.header-center {
  display: flex;
  align-items: center;
}

.timer-plate {
  background: var(--color-charcoal-850);
  border: 1px solid var(--color-steel-800);
  padding: 6px 18px;
  border-radius: var(--radius-md);
  text-align: center;
  min-width: 180px;
}

.timer-label {
  font-family: var(--font-display);
  font-size: 9px;
  color: var(--color-steel-500);
  font-weight: 700;
  letter-spacing: 0.8px;
  display: block;
}

.timer-digits {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  color: var(--color-gold-300);
  letter-spacing: 1px;
}

.timer-track {
  width: 100%;
  height: 3px;
  background: var(--color-charcoal-800);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}

.timer-fill {
  width: 100%;
  height: 100%;
  background: var(--gradient-gold);
  transition: width 1s linear;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Canonical Karmazillo Button: Gold Carapace Fill with Obsidian Text */
.btn-kz-primary {
  background: var(--gradient-gold);
  color: var(--color-obsidian-950); /* Mandatory Accessibility: Obsidian on Gold */
  border: none;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 12px var(--color-gold-glow);
  transition: all 0.2s ease;
}

.btn-kz-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 18px var(--color-gold-glow);
  background: linear-gradient(135deg, #ebd078 0%, #d8ad37 50%, #9e791b 100%);
}

.btn-kz-primary:active {
  transform: translateY(1px);
}

.btn-kz-secondary {
  background: var(--color-charcoal-850);
  border: 1px solid var(--color-steel-800);
  color: var(--color-white);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.btn-kz-secondary:hover {
  background: var(--color-charcoal-800);
  border-color: var(--color-steel-700);
}

/* Secondary Operational Sub-Bar */
.kz-trader-subbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 28px;
  background: var(--color-charcoal-850);
  border-bottom: 1px solid var(--color-steel-800);
  position: sticky;
  top: 62px;
  z-index: 90;
  backdrop-filter: blur(10px);
}

[data-theme="light"] .kz-trader-subbar {
  background: #EFECE6;
  border-bottom-color: #D8D2C5;
}

/* ==========================================================================
   Telemetry Bar
   ========================================================================== */

.telemetry-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  padding: 16px 28px;
  background: #0E1015;
  border-bottom: 1px solid var(--color-steel-800);
}

.telemetry-card {
  background: var(--color-charcoal-900);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  transition: border-color 0.2s;
}

.telemetry-card:hover {
  border-color: var(--color-steel-700);
}

.telemetry-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-steel-500);
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.telemetry-val-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.telemetry-val {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 800;
  color: var(--color-white);
}

.telemetry-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--color-steel-500);
}

.telemetry-meta strong {
  color: var(--color-white);
  font-family: var(--font-mono);
}

/* Badges & Tags */
.kz-tag,
.badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-steel-400);
  border: 1px solid var(--color-steel-800);
}

.kz-tag-gold,
.badge-gold {
  background: rgba(197, 155, 39, 0.15);
  color: var(--color-gold-300);
  border: 1px solid rgba(197, 155, 39, 0.4);
}

.kz-tag-green,
.badge-green {
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.kz-tag-red,
.badge-red {
  background: var(--color-status-danger-bg);
  color: var(--color-status-danger);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

/* ==========================================================================
   Navigation Tabs
   ========================================================================== */

.kz-nav {
  display: flex;
  gap: 8px;
  padding: 12px 28px;
  background: var(--color-charcoal-900);
  border-bottom: 1px solid var(--color-steel-800);
  overflow-x: auto;
}

.kz-nav-tab,
.nav-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-steel-500);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.kz-nav-tab:hover,
.nav-tab:hover {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.03);
}

.kz-nav-tab.active,
.nav-tab.active {
  color: var(--color-white);
  background: var(--color-charcoal-800);
  border-color: var(--color-gold-500);
  box-shadow: 0 0 10px rgba(197, 155, 39, 0.15);
}

/* ==========================================================================
   Main Canvas & Sections
   ========================================================================== */

.kz-canvas {
  padding: 28px;
  max-width: 1600px;
  margin: 0 auto;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.kz-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
  gap: 16px;
}

.kz-section-header h2 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  color: var(--color-white);
}

.kz-text-muted {
  font-size: 13px;
  color: var(--color-steel-500);
  margin-top: 3px;
}

.kz-filter-bar {
  display: flex;
  gap: 6px;
  background: var(--color-charcoal-900);
  padding: 4px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-steel-800);
}

.kz-filter-chip,
.filter-btn {
  background: transparent;
  border: none;
  color: var(--color-steel-500);
  padding: 6px 14px;
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.kz-filter-chip:hover,
.filter-btn:hover {
  color: var(--color-white);
}

.kz-filter-chip.active,
.filter-btn.active {
  background: var(--color-charcoal-800);
  color: var(--color-white);
  border: 1px solid var(--color-steel-700);
}

/* ==========================================================================
   Alert Cards
   ========================================================================== */

.alerts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 22px;
}

.alert-card {
  background: var(--gradient-card);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-lg);
  padding: 22px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}

.alert-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-steel-700);
}

.alert-card.call-alert {
  border-top: 3px solid var(--color-status-success);
}

.alert-card.put-alert {
  border-top: 3px solid var(--color-status-danger);
}

.alert-card.crypto-alert {
  border-top: 3px solid var(--color-gold-500);
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}

.alert-asset-title {
  font-size: 22px;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: 10px;
}

.action-pill {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
}

.action-pill.call {
  background: var(--color-status-success-bg);
  color: var(--color-status-success);
  border: 1px solid var(--color-status-success);
}

.action-pill.put {
  background: var(--color-status-danger-bg);
  color: var(--color-status-danger);
  border: 1px solid var(--color-status-danger);
}

.action-pill.crypto {
  background: rgba(197, 155, 39, 0.15);
  color: var(--color-gold-300);
  border: 1px solid var(--color-gold-500);
}

.alert-time {
  font-size: 11px;
  color: var(--color-steel-500);
  font-family: var(--font-mono);
}

.conviction-meter-container {
  background: var(--color-charcoal-850);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--color-steel-800);
}

.conviction-score {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 800;
  color: var(--color-gold-300);
}

.entry-banner {
  background: var(--color-charcoal-800);
  border: 1px solid var(--color-steel-700);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.entry-banner .label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--color-gold-300);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.entry-banner .price {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 800;
  color: var(--color-white);
}

/* Exit Targets Box */
.targets-container {
  background: var(--color-charcoal-900);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.targets-container h4 {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--color-steel-500);
  letter-spacing: 0.6px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.target-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
}

.target-row:last-child {
  border-bottom: none;
}

.target-name {
  color: var(--color-steel-400);
}

.target-gain {
  font-weight: 700;
  font-family: var(--font-mono);
}

.target-gain.green {
  color: var(--color-status-success);
}

.target-gain.red {
  color: var(--color-status-danger);
}

.target-price {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--color-white);
}

/* Agent Council Breakdown */
.council-breakdown {
  background: var(--color-charcoal-850);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--color-steel-800);
}

.council-title {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  color: var(--color-steel-500);
  letter-spacing: 0.8px;
  margin-bottom: 8px;
}

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

.agent-vote-cell {
  background: var(--color-charcoal-900);
  border: 1px solid var(--color-steel-800);
  border-radius: 6px;
  padding: 6px 8px;
  text-align: center;
}

.agent-vote-cell .agent-name {
  font-size: 10px;
  color: var(--color-steel-500);
  display: block;
}

.agent-vote-cell .vote-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--color-gold-300);
}

/* Catalyst Box */
.catalyst-box {
  background: rgba(197, 155, 39, 0.05);
  border-left: 3px solid var(--color-gold-500);
  padding: 10px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12px;
  color: var(--color-steel-400);
}

.catalyst-box strong {
  color: var(--color-white);
  font-family: var(--font-display);
}

/* ==========================================================================
   SPY Options Radar Tab Layout
   ========================================================================== */

.spy-radar-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  gap: 22px;
}

.kz-card {
  background: var(--color-charcoal-900);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.radar-card.call-edge {
  border-top: 3px solid var(--color-status-success);
}

.radar-card.put-edge {
  border-top: 3px solid var(--color-status-danger);
}

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

.kz-mono-muted {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-steel-500);
}

.strike-title {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 16px;
}

.green-text {
  color: var(--color-status-success);
}

.red-text {
  color: var(--color-status-danger);
}

.gold-text {
  color: var(--color-gold-300);
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  background: var(--color-charcoal-850);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 20px;
}

.metric-cell .cell-label {
  font-size: 11px;
  color: var(--color-steel-500);
  display: block;
}

.metric-cell .cell-val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 800;
  color: var(--color-white);
}

.kz-well {
  background: var(--color-charcoal-850);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-md);
  padding: 16px;
}

.targets-well h4 {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--color-steel-500);
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 12px;
}

.target-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.target-line:last-child {
  border-bottom: none;
}

.target-lbl {
  color: var(--color-steel-400);
}

.target-pct {
  font-family: var(--font-mono);
  font-weight: 700;
}

.target-val {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--color-white);
}

/* ==========================================================================
   Table Styles
   ========================================================================== */

.kz-table-wrap {
  background: var(--color-charcoal-900);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.kz-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.kz-table th {
  background: var(--color-charcoal-850);
  padding: 12px 18px;
  color: var(--color-steel-500);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 1px solid var(--color-steel-800);
}

.kz-table td {
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  font-family: var(--font-mono);
  color: var(--color-steel-400);
}

.kz-table tr:hover td {
  background: var(--color-charcoal-800);
  color: var(--color-white);
}

/* ==========================================================================
   Code-Cracker & Quant Regimes
   ========================================================================== */

.code-cracker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 1024px) {
  .code-cracker-grid {
    grid-template-columns: 1fr;
  }
}

.panel-heading {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 16px;
}

.rule-card {
  margin-bottom: 14px;
  border-left: 3px solid var(--color-steel-700);
}

.rule-card.gold-accented {
  border-left: 3px solid var(--color-gold-500);
  background: #14161B;
}

.rule-header {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 6px;
}

.rule-body {
  font-size: 12px;
  color: var(--color-steel-400);
  line-height: 1.6;
}

.rule-body ul {
  padding-left: 20px;
  margin-top: 8px;
}

.rule-body li {
  margin-bottom: 6px;
}

.landmark-card {
  background: var(--color-charcoal-850);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 14px;
}

.landmark-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.landmark-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--color-white);
}

.landmark-date {
  font-size: 11px;
  color: var(--color-steel-500);
  font-family: var(--font-mono);
}

.landmark-mag {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-gold-300);
  margin-bottom: 6px;
}

.landmark-quant {
  font-size: 11px;
  color: var(--color-steel-400);
  line-height: 1.5;
}

/* ==========================================================================
   Social Feed Cards
   ========================================================================== */

.social-feed-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 18px;
}

.social-card {
  background: var(--color-charcoal-900);
  border: 1px solid var(--color-steel-800);
  border-radius: var(--radius-md);
  padding: 16px;
  transition: border-color 0.2s;
}

.social-card:hover {
  border-color: var(--color-steel-700);
}

.social-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.social-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-avatar {
  font-size: 20px;
}

.social-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--color-white);
}

.social-handle {
  font-size: 11px;
  color: var(--color-steel-500);
  font-family: var(--font-mono);
}

.social-text {
  font-size: 13px;
  color: var(--color-white);
  line-height: 1.5;
  margin-bottom: 10px;
}

.social-analysis {
  background: var(--color-charcoal-850);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--color-gold-300);
  border: 1px solid var(--color-steel-800);
}

/* ==========================================================================
   Loading & Feedback
   ========================================================================== */

.kz-loader-well {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--color-steel-500);
}

.kz-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-steel-800);
  border-top-color: var(--color-gold-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

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