/* FalconAI Design System V1 - Gold + Black Luxury */
:root {
  --falcon-bg: #060912;
  --falcon-bg-2: #0A0E1A;
  --falcon-surface: #10141F;
  --falcon-surface-2: #161B2A;
  --falcon-surface-3: #1E2538;
  --falcon-border: #232B42;
  --falcon-border-light: #2E3752;
  --falcon-gold: #D4AF37;
  --falcon-gold-light: #F4D97B;
  --falcon-gold-bright: #FFD966;
  --falcon-gold-dark: #A8861F;
  --falcon-gold-deep: #6B5410;
  --falcon-gold-glow: rgba(212,175,55,0.35);
  --falcon-gold-soft: rgba(212,175,55,0.12);
  --falcon-gradient-gold: linear-gradient(135deg, #F4D97B 0%, #D4AF37 50%, #A8861F 100%);
  --falcon-gradient-gold-soft: linear-gradient(135deg, rgba(244,217,123,0.15), rgba(212,175,55,0.05));
  --falcon-green: #00D68F;
  --falcon-green-soft: rgba(0,214,143,0.15);
  --falcon-red: #FF4757;
  --falcon-red-soft: rgba(255,71,87,0.15);
  --falcon-blue: #4A9EFF;
  --falcon-blue-soft: rgba(74,158,255,0.15);
  --falcon-text: #FFFFFF;
  --falcon-text-2: #B8C1D6;
  --falcon-text-3: #7B8499;
  --falcon-text-dim: #4A5268;
  --falcon-shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --falcon-shadow-gold: 0 0 30px rgba(212,175,55,0.3);
  --falcon-radius: 14px;
  --falcon-radius-lg: 20px;
  --falcon-transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --falcon-font-ar: 'Cairo','Tajawal','IBM Plex Sans Arabic',sans-serif;
  --falcon-font-en: 'Inter','SF Pro Display',-apple-system,sans-serif;
  --falcon-font-mono: 'JetBrains Mono','Fira Code',monospace;
}

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

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--falcon-font-ar);
  background: var(--falcon-bg);
  color: var(--falcon-text);
  min-height: 100vh;
  line-height: 1.6;
}

.falcon-gold-text {
  background: var(--falcon-gradient-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.falcon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: none;
  border-radius: var(--falcon-radius);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--falcon-transition);
  text-decoration: none;
}

.falcon-btn-gold {
  background: var(--falcon-gradient-gold);
  color: #1a1400;
  box-shadow: 0 4px 20px var(--falcon-gold-glow);
}

.falcon-btn-outline {
  background: transparent;
  color: var(--falcon-gold);
  border: 1.5px solid var(--falcon-gold);
}

.falcon-card {
  background: var(--falcon-surface);
  border: 1px solid var(--falcon-border);
  border-radius: var(--falcon-radius);
  padding: 1.25rem;
}

.falcon-card-gold {
  border-color: rgba(212,175,55,0.3);
  background: linear-gradient(135deg, var(--falcon-surface), rgba(212,175,55,0.05));
}

.falcon-kpi {
  background: var(--falcon-surface);
  border: 1px solid var(--falcon-border);
  border-radius: var(--falcon-radius);
  padding: 1rem;
  position: relative;
}

.falcon-kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--falcon-gradient-gold);
  opacity: 0.5;
}

.falcon-kpi-value { font-size: 1.375rem; font-weight: 800; }
.falcon-kpi-value.bullish { color: var(--falcon-green); }
.falcon-kpi-value.bearish { color: var(--falcon-red); }
.falcon-kpi-value.gold { color: var(--falcon-gold); }

.falcon-ai-core {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(244,217,123,0.15), transparent 60%);
  border: 2px solid var(--falcon-gold);
  box-shadow: 0 0 40px var(--falcon-gold-glow), inset 0 0 60px rgba(212,175,55,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 auto;
}

.falcon-ai-core::before {
  content: '';
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,0.3);
  animation: falcon-pulse 3s ease-in-out infinite;
}

@keyframes falcon-pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.5; }
}

.falcon-bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 72px;
  background: rgba(10,14,26,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--falcon-border);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 100;
}

.falcon-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
  color: var(--falcon-text-3);
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 600;
  transition: var(--falcon-transition);
  flex: 1;
}

.falcon-nav-item.active,
.falcon-nav-item:hover { color: var(--falcon-gold); }

.falcon-topbar {
  height: 60px;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(10,14,26,0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--falcon-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.falcon-container-mobile {
  max-width: 480px;
  margin: 0 auto;
  padding: 1rem;
  padding-bottom: 100px;
}

.falcon-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.falcon-section-title::before {
  content: '';
  width: 3px;
  height: 18px;
  background: var(--falcon-gradient-gold);
  border-radius: 2px;
}

.falcon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.falcon-badge-gold { background: var(--falcon-gold-soft); color: var(--falcon-gold); border: 1px solid rgba(212,175,55,0.3); }
.falcon-badge-green { background: var(--falcon-green-soft); color: var(--falcon-green); }
.falcon-badge-red { background: var(--falcon-red-soft); color: var(--falcon-red); }

.falcon-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--falcon-green);
}

.falcon-badge-live::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--falcon-green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--falcon-green);
  animation: falcon-blink 1.5s infinite;
}

@keyframes falcon-blink {
  0%,100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.falcon-progress {
  height: 8px;
  background: var(--falcon-surface-3);
  border-radius: 999px;
  overflow: hidden;
}

.falcon-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--falcon-gradient-gold);
}

.falcon-grid { display: grid; gap: 1rem; }
.falcon-grid-2 { grid-template-columns: repeat(2, 1fr); }
.falcon-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .falcon-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--falcon-bg-2); }
::-webkit-scrollbar-thumb { background: var(--falcon-surface-3); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════
   Bottom Nav — SVG Icons
   ═══════════════════════════════════════════════════════ */
.falcon-nav-icon {
    display: block;
    margin: 0 auto 2px;
    transition: all 0.25s;
}
.falcon-nav-item.active .falcon-nav-icon {
    filter: drop-shadow(0 0 6px currentColor);
    transform: translateY(-1px);
}
.falcon-nav-item span {
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    text-align: center;
}
.falcon-nav-center-label {
    font-size: 0.5625rem !important;
    margin-top: 2px;
    font-weight: 900;
}
.falcon-nav-item-center .icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--falcon-gradient-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1400;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px var(--falcon-gold-glow);
    transition: all 0.25s;
}
.falcon-nav-item-center:hover .icon-wrap {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 28px rgba(212,175,55,0.7);
}