/* Super Futures - Trading Guide Styles */
/* CSS Variables for Theme Support */
:root {
  /* Light Theme Colors */
  --bg-primary: hsl(211, 20%, 96%);
  --bg-secondary: hsl(211, 25%, 98%);
  --bg-tertiary: hsl(211, 15%, 92%);
  --bg-card: hsl(0, 0%, 100%);
  --bg-sidebar: hsl(211, 20%, 96%);
  --bg-overlay: rgba(255, 255, 255, 0.95);
  
  --text-primary: hsl(211, 25%, 15%);
  --text-secondary: hsl(211, 15%, 35%);
  --text-muted: hsl(211, 10%, 55%);
  --text-accent: hsl(211, 100%, 50%);
  
  --border-primary: hsl(211, 15%, 85%);
  --border-secondary: hsl(211, 10%, 75%);
  --border-accent: hsl(211, 100%, 50%);
  
  --shadow-primary: 0 2px 8px rgba(77, 139, 255, 0.1);
  --shadow-secondary: 0 4px 16px rgba(77, 139, 255, 0.15);
  --shadow-tertiary: 0 8px 32px rgba(77, 139, 255, 0.2);
  
  --gradient-primary: linear-gradient(135deg, hsl(211, 100%, 50%) 0%, hsl(211, 90%, 60%) 100%);
  --gradient-secondary: linear-gradient(135deg, hsl(211, 15%, 85%) 0%, hsl(211, 20%, 90%) 100%);
  --gradient-accent: linear-gradient(135deg, hsl(211, 100%, 50%) 0%, hsl(211, 80%, 55%) 100%);
  
  /* Dark Theme Colors */
  --bg-primary-dark: hsl(211, 25%, 8%);
  --bg-secondary-dark: hsl(211, 20%, 12%);
  --bg-tertiary-dark: hsl(211, 15%, 15%);
  --bg-card-dark: hsl(211, 20%, 10%);
  --bg-sidebar-dark: hsl(211, 25%, 8%);
  --bg-overlay-dark: rgba(33, 37, 41, 0.95);
  
  --text-primary-dark: hsl(211, 15%, 95%);
  --text-secondary-dark: hsl(211, 10%, 75%);
  --text-muted-dark: hsl(211, 5%, 55%);
  --text-accent-dark: hsl(204, 50%, 65%);
  
  --border-primary-dark: hsl(211, 15%, 20%);
  --border-secondary-dark: hsl(211, 10%, 25%);
  --border-accent-dark: hsl(204, 50%, 65%);
  
  --shadow-primary-dark: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-secondary-dark: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-tertiary-dark: 0 8px 32px rgba(0, 0, 0, 0.5);
  
  --gradient-primary-dark: linear-gradient(135deg, hsl(204, 50%, 65%) 0%, hsl(204, 55%, 72%) 100%);
  --gradient-secondary-dark: linear-gradient(135deg, hsl(211, 15%, 20%) 0%, hsl(211, 20%, 25%) 100%);
  --gradient-accent-dark: linear-gradient(135deg, hsl(204, 50%, 65%) 0%, hsl(204, 55%, 70%) 100%);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  
  /* Typography */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  
  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --bg-primary: var(--bg-primary-dark);
  --bg-secondary: var(--bg-secondary-dark);
  --bg-tertiary: var(--bg-tertiary-dark);
  --bg-card: var(--bg-card-dark);
  --bg-sidebar: var(--bg-sidebar-dark);
  --bg-overlay: var(--bg-overlay-dark);
  
  --text-primary: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --text-muted: var(--text-muted-dark);
  --text-accent: var(--text-accent-dark);
  
  --border-primary: var(--border-primary-dark);
  --border-secondary: var(--border-secondary-dark);
  --border-accent: var(--border-accent-dark);
  
  --shadow-primary: var(--shadow-primary-dark);
  --shadow-secondary: var(--shadow-secondary-dark);
  --shadow-tertiary: var(--shadow-tertiary-dark);
  
  --gradient-primary: var(--gradient-primary-dark);
  --gradient-secondary: var(--gradient-secondary-dark);
  --gradient-accent: var(--gradient-accent-dark);
}

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

html {
  font-size: 16px;
  line-height: 1.5;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
}

/* App Container */
.app-container {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* Sidebar */
.sidebar {
  width: 280px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: var(--z-fixed);
  transition: transform var(--transition-normal);
  transform: translateX(0);
}

.sidebar.collapsed {
  transform: translateX(-100%);
}

/* Sidebar Header */
.sidebar-header {
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--border-primary);
  background: var(--bg-card);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.logo-image {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  color: white;
}

/* Navigation Menu */
.nav-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
  position: relative;
}

.nav-item:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-secondary);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: white;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

/* Sidebar Footer - Verse of the Day */
.sidebar-footer {
  margin-top: auto;
  padding: var(--spacing-xl);
  border-top: 1px solid var(--border-primary);
}

.verse-of-day {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.verse-icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.verse-content {
  text-align: center;
}

.verse-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
  font-style: italic;
  line-height: 1.4;
}

.verse-reference {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
}

/* Main Content */
.main-content {
  flex: 1;
  margin-left: 280px;
  min-height: 100vh;
  position: relative;
  transition: margin-left var(--transition-normal);
}

.main-content.sidebar-collapsed {
  margin-left: 0;
}

/* Particles Background */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--text-accent);
  opacity: 0.3;
  animation: float linear infinite;
}

@keyframes float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* Top Bar */
.top-bar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-primary);
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  box-shadow: var(--shadow-primary);
}

.floating-header {
  backdrop-filter: blur(10px);
  background: var(--bg-overlay);
  border-bottom: 1px solid var(--border-primary);
}

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: var(--z-fixed);
}

.menu-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.welcome-text {
  flex: 1;
  text-align: center;
}

.welcome-text span {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.icon-theme {
  transition: transform var(--transition-normal);
}

[data-theme="dark"] .icon-theme {
  transform: rotate(180deg);
}

.activate-btn {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-primary);
}

.activate-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-secondary);
}

/* Content Area */
.content-area {
  padding: var(--spacing-3xl) var(--spacing-xl) var(--spacing-3xl);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Content Sections */
.content-section {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all var(--transition-normal);
}

.content-section.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Section Headers */
.section-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.section-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-header p {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* Dashboard Styles */
.dashboard-header {
  text-align: center;
  margin-bottom: var(--spacing-3xl);
}

.dashboard-header h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.quote {
  font-size: var(--font-size-xl);
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-lg);
}

/* Cards Grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

/* Feature Cards */
.feature-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
  transition: all var(--transition-normal);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-tertiary);
  border-color: var(--border-accent);
}

.interactive-card:hover .card-overlay {
  opacity: 1;
}

.card-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.feature-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  text-align: center;
}

.card-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-accent);
  font-weight: var(--font-weight-semibold);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.feature-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.progress-bar {
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  height: 6px;
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.progress {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: var(--radius-xl);
  transition: width var(--transition-slow);
}

.kingdom-insight {
  font-size: var(--font-size-sm);
  color: var(--text-accent);
  font-style: italic;
  text-align: center;
}

.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal);
  border-radius: var(--radius-xl);
}

.tap-hint {
  color: white;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-lg);
}

/* Content Body */
.content-body {
  max-width: 1000px;
  margin: 0 auto;
}

/* Info Cards */
.info-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-2xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.info-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.info-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.info-card ul {
  color: var(--text-secondary);
  line-height: 1.6;
}

.info-card li {
  margin-bottom: var(--spacing-sm);
}

.intro-card {
  background: linear-gradient(135deg, rgba(77, 139, 255, 0.05) 0%, rgba(77, 139, 255, 0.02) 100%);
  border: 1px solid rgba(77, 139, 255, 0.1);
}

/* Section Dividers */
.section-divider {
  margin: var(--spacing-3xl) 0 var(--spacing-2xl);
  text-align: center;
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.section-subtitle {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  font-style: italic;
}

/* Ticker Grid */
.ticker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.ticker-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
  position: relative;
}

.ticker-badge {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  background: var(--gradient-primary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.secondary-badge {
  background: var(--gradient-secondary);
  color: var(--text-primary);
}

.ticker-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.ticker-specs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--border-secondary);
}

.spec-item:last-child {
  border-bottom: none;
}

.spec-label {
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

.spec-value {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* Structure Grid */
.structure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.structure-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.structure-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.structure-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.structure-card ul {
  color: var(--text-secondary);
  line-height: 1.6;
}

.structure-card li {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-left: var(--spacing-lg);
}

.structure-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-accent);
  font-weight: var(--font-weight-bold);
}

.secret-quote {
  font-style: italic;
  color: var(--text-muted);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-primary);
}

/* Zones Grid */
.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.zone-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.zone-card.supply {
  border-color: hsl(0, 70%, 60%);
  background: linear-gradient(135deg, rgba(255, 59, 48, 0.05) 0%, rgba(255, 59, 48, 0.02) 100%);
}

.zone-card.demand {
  border-color: hsl(120, 70%, 50%);
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.05) 0%, rgba(52, 199, 89, 0.02) 100%);
}

.zone-card h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-md);
}

.zone-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.zone-card ul {
  color: var(--text-secondary);
  line-height: 1.6;
}

.zone-card li {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-left: var(--spacing-lg);
}

.zone-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-accent);
  font-weight: var(--font-weight-bold);
}

/* Timeframe Flow */
.timeframe-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  margin: var(--spacing-2xl) 0;
  flex-wrap: wrap;
}

.timeframe-step {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
  text-align: center;
  min-width: 200px;
}

.timeframe-badge {
  background: var(--gradient-primary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-md);
  display: inline-block;
}

.timeframe-step h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.timeframe-step p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.flow-arrow {
  font-size: var(--font-size-2xl);
  color: var(--text-accent);
  font-weight: var(--font-weight-bold);
}

/* AMD Grid */
.amd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.amd-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
  position: relative;
}

.amd-card.accumulation {
  border-color: hsl(45, 70%, 60%);
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.05) 0%, rgba(255, 159, 10, 0.02) 100%);
}

.amd-card.manipulation {
  border-color: hsl(30, 70%, 60%);
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.05) 0%, rgba(255, 149, 0, 0.02) 100%);
}

.amd-card.distribution {
  border-color: hsl(120, 70%, 50%);
  background: linear-gradient(135deg, rgba(52, 199, 89, 0.05) 0%, rgba(52, 199, 89, 0.02) 100%);
}

.amd-card h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.amd-subtitle {
  font-size: var(--font-size-sm);
  color: var(--text-accent);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-lg);
}

.amd-definition {
  margin-bottom: var(--spacing-lg);
}

.amd-definition p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.amd-insight {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border-left: 4px solid var(--text-accent);
}

.amd-quote {
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.6;
}

/* Collapsible Sections */
.collapsible-header {
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  cursor: pointer;
  margin-bottom: var(--spacing-lg);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  color: var(--text-primary);
}

.collapsible-header:hover {
  background: var(--bg-secondary);
  border-color: var(--border-accent);
}

.toggle-icon {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-accent);
  transition: transform var(--transition-fast);
}

.collapsible-header.active .toggle-icon {
  transform: rotate(90deg);
}

.collapsible-content {
  display: none;
  margin-bottom: var(--spacing-3xl);
}

.collapsible-content.active {
  display: block;
}

/* Setup Sections */
.setup-section {
  margin-bottom: var(--spacing-2xl);
}

.setup-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.setup-card h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.setup-card ol {
  color: var(--text-secondary);
  line-height: 1.6;
  list-style: none;
  padding-left: 0;
}

.setup-card li {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-left: 0;
}

.setup-card li::before {
  content: none;
}

/* ORB Card */
.orb-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.orb-header {
  text-align: center;
  margin-bottom: var(--spacing-2xl);
}

.orb-header h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.orb-badge {
  background: var(--gradient-primary);
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
}

.orb-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.orb-step {
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
  flex-shrink: 0;
}

.step-content h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.step-content p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Expert Notes */
.expert-note {
  background: linear-gradient(135deg, rgba(77, 139, 255, 0.05) 0%, rgba(77, 139, 255, 0.02) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: var(--spacing-2xl) 0;
  border: 1px solid rgba(77, 139, 255, 0.1);
  display: flex;
  gap: var(--spacing-lg);
  align-items: flex-start;
}

.expert-icon {
  font-size: var(--font-size-2xl);
  color: var(--text-accent);
  flex-shrink: 0;
}

.expert-content h4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.expert-content p {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Defense Grid */
.defense-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
}

.defense-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.column-header h2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.column-header p {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
}

/* Defense Cards */
.defense-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.defense-card.kill-switch {
  border-color: hsl(0, 70%, 60%);
  background: linear-gradient(135deg, rgba(255, 59, 48, 0.05) 0%, rgba(255, 59, 48, 0.02) 100%);
}

.card-header-red {
  background: linear-gradient(135deg, hsl(0, 70%, 60%) 0%, hsl(0, 60%, 65%) 100%);
  color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.card-header-blue {
  background: var(--gradient-primary);
  color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.card-header-red h3,
.card-header-blue h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.card-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-badge.blue {
  color: var(--text-accent);
}

.protocol-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.protocol-item:last-child {
  margin-bottom: 0;
}

.protocol-icon {
  font-size: var(--font-size-lg);
  width: 24px;
  text-align: center;
}

.protocol-text {
  flex: 1;
}

.protocol-text strong {
  display: block;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

.protocol-note {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.defense-list {
  list-style: none;
  padding: 0;
}

.defense-list li {
  margin-bottom: var(--spacing-md);
  position: relative;
  padding-left: var(--spacing-lg);
}

.defense-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-accent);
  font-weight: var(--font-weight-bold);
}

/* Recovery Table */
.recovery-table {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--spacing-lg) 0;
}

.table-header {
  background: var(--bg-tertiary);
  display: flex;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.table-col {
  flex: 1;
  padding: var(--spacing-md);
  text-align: center;
  border-right: 1px solid var(--border-primary);
}

.table-col:last-child {
  border-right: none;
}

.table-row {
  display: flex;
  border-bottom: 1px solid var(--border-primary);
}

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

.table-row.danger {
  background: rgba(255, 59, 48, 0.05);
}

.recovery-subtitle {
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  margin-top: var(--spacing-lg);
}

/* Broker Grid */
.broker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.broker-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
  text-align: center;
  transition: all var(--transition-normal);
}

.broker-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-secondary);
}

.broker-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-lg);
}

.broker-card h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.broker-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.broker-card ul {
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: left;
}

.broker-card li {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-left: var(--spacing-lg);
}

.broker-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-accent);
  font-weight: var(--font-weight-bold);
}

/* Secrets Grid */
.secrets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-3xl);
}

.secret-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.secret-card h3 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.secret-card p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.secret-card ul {
  color: var(--text-secondary);
  line-height: 1.6;
}

.secret-card li {
  margin-bottom: var(--spacing-sm);
  position: relative;
  padding-left: var(--spacing-lg);
}

.secret-card li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--text-accent);
  font-weight: var(--font-weight-bold);
}

.secret-quote {
  font-style: italic;
  color: var(--text-muted);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-primary);
}

.secret-card.kingdom-accent {
  border-color: hsl(45, 70%, 60%);
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.05) 0%, rgba(255, 159, 10, 0.02) 100%);
}

/* Governance Cards */
.governance-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--spacing-2xl);
  margin-bottom: var(--spacing-3xl);
  box-shadow: var(--shadow-primary);
  border: 1px solid var(--border-primary);
}

.kingdom-card {
  border-color: hsl(45, 70%, 60%);
  background: linear-gradient(135deg, rgba(255, 159, 10, 0.05) 0%, rgba(255, 159, 10, 0.02) 100%);
}

.kingdom-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.kingdom-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-md);
}

.governance-card h3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-lg);
}

.governance-content {
  text-align: center;
}

.kingdom-quote {
  font-size: var(--font-size-lg);
  font-style: italic;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.6;
}

.kingdom-reference {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-bottom: var(--spacing-xl);
}

.governance-insight p {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.governance-insight strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.seed-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin: var(--spacing-lg) 0;
}

.seed-principle {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  border-left: 4px solid hsl(45, 70%, 60%);
}

.seed-principle h4 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.seed-principle p {
  color: var(--text-secondary);
  line-height: 1.6;
}

.kingdom-wisdom {
  font-style: italic;
  color: var(--text-muted);
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--border-primary);
}

/* Section Separators */
.section-separator {
  height: 1px;
  background: var(--border-primary);
  margin: var(--spacing-3xl) 0;
  position: relative;
}

.section-separator::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 1px;
  background: var(--gradient-primary);
}

/* Highlight Text */
.highlight-text {
  color: var(--text-accent);
  font-weight: var(--font-weight-semibold);
}

/* Responsive Design */
@media (max-width: 768px) {
  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
    z-index: 1100;
  }

  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.collapsed {
    transform: translateX(-100%);
  }

  .sidebar:not(.collapsed) {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .main-content.sidebar-collapsed {
    margin-left: 0;
  }
  
  .top-bar {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  .welcome-text span {
    font-size: var(--font-size-base);
  }
  
  .content-area {
    padding: var(--spacing-xl) var(--spacing-lg);
  }
  
  .section-header h1 {
    font-size: var(--font-size-3xl);
  }
  
  .dashboard-header h1 {
    font-size: var(--font-size-3xl);
  }
  
  .cards-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  
  .ticker-grid {
    grid-template-columns: 1fr;
  }
  
  .structure-grid {
    grid-template-columns: 1fr;
  }
  
  .zones-grid {
    grid-template-columns: 1fr;
  }
  
  .timeframe-flow {
    flex-direction: column;
    gap: var(--spacing-lg);
  }
  
  .flow-arrow {
    transform: rotate(90deg);
  }
  
  .amd-grid {
    grid-template-columns: 1fr;
  }
  
  .defense-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
  }
  
  .broker-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .secrets-grid {
    grid-template-columns: 1fr;
  }
  
  .seed-principles {
    grid-template-columns: 1fr;
  }
  
  .orb-step {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .step-number {
    align-self: flex-start;
  }
  
  .expert-note {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .protocol-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }
  
  .table-col {
    padding: var(--spacing-sm);
    font-size: var(--font-size-sm);
  }
}

/* Print Styles */
@media print {
  .sidebar,
  .top-bar,
  .particles,
  .card-overlay,
  .menu-toggle,
  .theme-toggle,
  .activate-btn {
    display: none !important;
  }
  
  .main-content {
    margin-left: 0 !important;
  }
  
  .content-area {
    padding: 0 !important;
  }
  
  .feature-card {
    break-inside: avoid;
  }
  
  .info-card,
  .ticker-card,
  .structure-card,
  .zone-card,
  .secret-card,
  .broker-card,
  .defense-card,
  .governance-card {
    break-inside: avoid;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}

/* Focus States for Accessibility */
.nav-item:focus,
.menu-toggle:focus,
.theme-toggle:focus,
.activate-btn:focus,
.collapsible-header:focus,
.feature-card:focus {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
}

/* Premium terminal theme */
:root,
[data-theme="light"],
[data-theme="dark"] {
  --bg-primary: #050811;
  --bg-secondary: rgba(15, 23, 42, 0.72);
  --bg-tertiary: rgba(30, 41, 59, 0.72);
  --bg-card: rgba(15, 23, 42, 0.6);
  --bg-sidebar: rgba(5, 8, 17, 0.88);
  --bg-overlay: rgba(5, 8, 17, 0.78);
  --text-primary: #e8eef8;
  --text-secondary: #b4c0d2;
  --text-muted: #78869c;
  --text-accent: #7bafd4;
  --border-primary: rgba(148, 163, 184, 0.14);
  --border-secondary: rgba(148, 163, 184, 0.1);
  --border-accent: rgba(123, 175, 212, 0.62);
  --gradient-primary: linear-gradient(135deg, #7bafd4 0%, #a0cce4 100%);
  --gradient-secondary: linear-gradient(135deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.7));
  --shadow-primary: 0 12px 40px rgba(0, 0, 0, 0.24);
  --shadow-secondary: 0 0 32px rgba(123, 175, 212, 0.12);
  --shadow-tertiary: 0 0 40px rgba(123, 175, 212, 0.15);
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --transition-fast: 220ms ease;
  --transition-normal: 280ms ease;
}

html {
  background: #000207;
}

body {
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  background: radial-gradient(circle at 18% 0%, #0a0e1a 0%, #050811 48%, #000000 100%);
  color: var(--text-primary);
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 78% 16%, rgba(123, 175, 212, 0.08), transparent 28%);
  z-index: 0;
}

.sidebar {
  background: linear-gradient(180deg, rgba(8, 13, 27, 0.94), rgba(2, 5, 12, 0.94));
  border-right: 1px solid rgba(123, 175, 212, 0.12);
}

.sidebar-header {
  padding: 44px 24px;
  background: transparent;
  border-bottom-color: rgba(148, 163, 184, 0.1);
}

.logo {
  justify-content: center;
  margin-bottom: 24px;
}

.logo-image {
  width: 224px;
  height: 224px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(160, 204, 228, 0.5);
  background: radial-gradient(circle, #7bafd4, #102a3d 65%, rgba(15, 23, 42, 0.4));
  box-shadow: 0 0 28px rgba(123, 175, 212, 0.34), inset 0 0 16px rgba(255, 255, 255, 0.12);
}

.nav-menu { gap: 8px; }

.nav-item {
  padding: 14px 16px;
  border-radius: 12px;
  color: #8795aa;
  transition: all 260ms ease;
}

.nav-item:hover,
.nav-item.active {
  background: rgba(123, 175, 212, 0.035);
  color: #dce9fb;
  box-shadow: none;
}

.nav-item.active::before {
  width: 2px;
  height: 44%;
  background: rgba(160, 204, 228, 0.72);
  box-shadow: 0 0 8px rgba(123, 175, 212, 0.45);
}

.sidebar-footer { padding: 24px; border-top-color: rgba(148, 163, 184, 0.1); }

.verse-of-day,
.feature-card,
.info-card,
.ticker-card,
.structure-card,
.zone-card,
.timeframe-step,
.amd-card,
.collapsible-header,
.setup-card,
.orb-card,
.defense-card,
.broker-card {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.13);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.verse-of-day::before,
.feature-card::before,
.info-card::before,
.ticker-card::before,
.structure-card::before,
.zone-card::before,
.timeframe-step::before,
.amd-card::before,
.setup-card::before,
.orb-card::before,
.defense-card::before,
.broker-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(123, 175, 212, 0.8), transparent);
}

.feature-card,
.info-card,
.structure-card,
.setup-card,
.orb-card,
.defense-card { padding: 40px; }

.feature-card:hover,
.broker-card:hover,
.collapsible-header:hover {
  transform: translateY(-4px);
  border-color: rgba(123, 175, 212, 0.32);
  box-shadow: 0 0 40px rgba(123, 175, 212, 0.15);
}

.card-icon {
  width: auto;
  height: auto;
  margin: 0 0 24px;
  display: block;
  font-size: 36px;
  filter: drop-shadow(0 0 12px rgba(123, 175, 212, 0.45));
}

.feature-card,
.feature-card h3,
.feature-card p,
.feature-card .progress-bar {
  text-align: left;
}

.feature-card h3 {
  letter-spacing: 0.015em;
  color: #7bafd4;
}

.card-subtitle {
  font-size: 13px;
  color: #8795aa;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 24px;
}

.feature-card::after {
  content: "";
  position: absolute;
  inset: auto 40px 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 175, 212, 0.24), transparent);
}

.sidebar .logo-image {
  padding: 0;
  object-fit: cover;
}

.dashboard-header h1,
.section-header h1 {
  letter-spacing: -0.04em;
  background: linear-gradient(105deg, #70adff 0%, #dfeaff 62%, #8194b4 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.quote { color: #9aa9bd; line-height: 1.6; }
.feature-card p, .info-card p, .structure-card p, .zone-card p, .broker-card p { color: #a7b4c7; }

.progress-bar {
  height: 8px;
  background: rgba(30, 41, 59, 0.8);
  border-radius: 999px;
}

.progress {
  background: linear-gradient(90deg, #6fa6cc, #a0cce4);
  border-radius: 999px;
  box-shadow: 0 0 12px rgba(123, 175, 212, 0.6);
}

.kingdom-insight,
.secret-quote,
.amd-insight {
  border-left: 0;
  border-top: 1px solid rgba(212, 175, 55, 0.28);
  padding: 16px 0 0;
  color: #c7b878;
  font-style: italic;
  background: none;
}

.top-bar {
  margin: 24px 24px 0;
  padding: 12px 16px 13px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 18px;
  background: rgba(5, 8, 17, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  overflow: visible;
}

.top-bar::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(123, 175, 212, 0.95), transparent);
  box-shadow: 0 0 10px rgba(123, 175, 212, 0.7);
}

.activate-btn {
  background: linear-gradient(135deg, #7bafd4, #a0cce4);
  color: #eef5ff;
  border: 1px solid rgba(147, 197, 253, 0.35);
  border-radius: 12px;
  padding: 12px 20px;
  box-shadow: 0 0 20px rgba(123, 175, 212, 0.16);
}

.activate-btn:hover { box-shadow: 0 0 28px rgba(123, 175, 212, 0.32); }

.particle {
  background: rgba(123, 175, 212, 0.24) !important;
  box-shadow: 0 0 12px rgba(123, 175, 212, 0.4);
  animation: ambient-pulse var(--p-dur, 10s) ease-in-out infinite;
}

.particles {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
}

@keyframes ambient-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.12; }
  50% { transform: scale(1.25); opacity: 0.38; }
}

@media (max-width: 768px) {
  .content-area { padding: 32px 20px; }
  .feature-card, .info-card, .structure-card, .setup-card, .orb-card, .defense-card { padding: 32px 24px; }
  .top-bar { margin: 12px 12px 0; }
}

/* Theme tokens: dark is black-first; light is opt-in via body.light-mode. */
:root {
  --page-background: #000000;
  --page-glow: none;
  --surface-primary: rgba(15, 23, 42, 0.6);
  --surface-secondary: rgba(15, 23, 42, 0.72);
  --surface-sidebar: rgba(0, 0, 0, 0.88);
  --surface-overlay: rgba(0, 0, 0, 0.72);
  --theme-text-primary: #e8eef8;
  --theme-text-secondary: #a7b4c7;
  --theme-text-muted: #8795aa;
  --theme-text-accent: #7bafd4;
  --theme-border: rgba(148, 163, 184, 0.14);
  --theme-border-soft: rgba(148, 163, 184, 0.1);
  --theme-border-accent: rgba(123, 175, 212, 0.62);
  --theme-heading: linear-gradient(105deg, #7bafd4 0%, #d9edf7 62%, #9bb8c8 100%);
  --theme-button: linear-gradient(135deg, #7bafd4, #a0cce4);
  --theme-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
  --theme-glow: 0 0 40px rgba(123, 175, 212, 0.15);
  --theme-particle: rgba(123, 175, 212, 0.24);
}

body.light-mode {
  --page-background: #e6edf4;
  --page-glow: radial-gradient(circle at 18% 0%, rgba(166, 203, 230, 0.32), transparent 50%);
  --surface-primary: rgba(255, 255, 255, 0.9);
  --surface-secondary: rgba(255, 255, 255, 0.96);
  --surface-sidebar: rgba(239, 244, 248, 0.98);
  --surface-overlay: rgba(255, 255, 255, 0.94);
  --theme-text-primary: #172033;
  --theme-text-secondary: #3f4f64;
  --theme-text-muted: #586a7f;
  --theme-text-accent: #2f719f;
  --theme-border: rgba(48, 68, 90, 0.24);
  --theme-border-soft: rgba(48, 68, 90, 0.18);
  --theme-border-accent: rgba(47, 113, 159, 0.58);
  --theme-heading: linear-gradient(105deg, #2f719f 0%, #172033 72%);
  --theme-button: linear-gradient(135deg, #367fae, #6ca9c9);
  --theme-shadow: 0 12px 40px rgba(49, 69, 91, 0.18);
  --theme-glow: 0 0 40px rgba(86, 160, 210, 0.16);
  --theme-particle: rgba(86, 160, 210, 0.22);
}

html,
body {
  background: var(--page-background);
}

body {
  background-image: var(--page-glow);
  color: var(--theme-text-primary);
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

body::before { display: none; }

.sidebar {
  background: var(--surface-sidebar);
  border-right-color: var(--theme-border-soft);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(96, 165, 250, 0.45) transparent;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(96, 165, 250, 0.45);
  border-radius: 999px;
}

.sidebar-header,
.sidebar-footer { flex-shrink: 0; }

.top-bar {
  background: var(--surface-overlay);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

.verse-of-day,
.feature-card,
.info-card,
.ticker-card,
.structure-card,
.zone-card,
.timeframe-step,
.amd-card,
.collapsible-header,
.setup-card,
.orb-card,
.defense-card,
.broker-card {
  background: var(--surface-primary);
  border-color: var(--theme-border);
  box-shadow: var(--theme-shadow);
}

.feature-card:hover,
.broker-card:hover,
.collapsible-header:hover { box-shadow: var(--theme-glow); }

.dashboard-header h1,
.section-header h1 { background-image: var(--theme-heading); }

.welcome-text span,
.feature-card h3,
.info-card h3,
.section-title,
.ticker-card h3,
.structure-card h3,
.zone-card h3,
.broker-card h3 { color: var(--theme-text-primary); }

.quote,
.feature-card p,
.info-card p,
.structure-card p,
.zone-card p,
.broker-card p { color: var(--theme-text-secondary); }

.card-subtitle,
.text-muted,
.protocol-note { color: var(--theme-text-muted); }

.nav-item { color: var(--theme-text-muted); }
.nav-item:hover,
.nav-item.active { color: var(--theme-text-primary); }

.menu-toggle,
.theme-toggle { color: var(--theme-text-accent); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
body.light-mode .theme-toggle .icon-moon { display: none; }
body.light-mode .theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-theme { transform: none; }
.theme-toggle .icon-theme path,
.theme-toggle .icon-theme circle { stroke: currentColor; fill: none; }

.activate-btn { background: var(--theme-button); }

.particle {
  background: var(--theme-particle) !important;
  opacity: 0.22;
}

.feature-card h3 { color: var(--theme-text-accent); }

body.light-mode {
  --light-blue: #2f719f;
  --light-blue-soft: rgba(47, 113, 159, 0.18);
  --light-blue-glow: rgba(47, 113, 159, 0.45);
}

body.light-mode .sidebar {
  scrollbar-color: rgba(86, 160, 210, 0.45) transparent;
}

body.light-mode .sidebar::-webkit-scrollbar-thumb {
  background: rgba(86, 160, 210, 0.45);
}

body.light-mode .nav-item.active::before {
  background: var(--light-blue);
  box-shadow: 0 0 8px var(--light-blue-glow);
}

body.light-mode .nav-item.active,
body.light-mode .nav-item:hover {
  background: rgba(86, 160, 210, 0.06);
}

body.light-mode .icon,
body.light-mode .icon path,
body.light-mode .icon rect,
body.light-mode .icon circle {
  stroke: var(--light-blue) !important;
}

body.light-mode .feature-card h3,
body.light-mode .card-subtitle,
body.light-mode .theme-toggle,
body.light-mode .menu-toggle {
  color: var(--light-blue);
}

body.light-mode .feature-card::before {
  background: linear-gradient(90deg, transparent, var(--light-blue), transparent);
}

body.light-mode .top-bar::after {
  background: linear-gradient(90deg, transparent, var(--light-blue), transparent);
  box-shadow: 0 0 10px var(--light-blue-glow);
}

body.light-mode .progress {
  background: linear-gradient(90deg, #438ab8, #72b7dc);
  box-shadow: 0 0 12px var(--light-blue-glow);
}

body.light-mode .particle {
  background: var(--theme-particle) !important;
  box-shadow: 0 0 12px var(--light-blue-glow);
}
.nav-item.active { background: rgba(59, 130, 246, 0.025); }

.collapsible-header,
.collapsible-header span {
  color: var(--theme-text-primary) !important;
}

body.light-mode .timeframe-step,
body.light-mode .amd-card,
body.light-mode .orb-card,
body.light-mode .setup-card,
body.light-mode .defense-card,
body.light-mode .ticker-card,
body.light-mode .structure-card,
body.light-mode .zone-card,
body.light-mode .broker-card {
  background: var(--surface-primary);
  border-color: var(--theme-border);
}

body.light-mode .timeframe-step h3,
body.light-mode .amd-card h3,
body.light-mode .orb-header h3,
body.light-mode .setup-card h3,
body.light-mode .defense-card h3,
body.light-mode .ticker-card h3,
body.light-mode .structure-card h3,
body.light-mode .zone-card h3,
body.light-mode .broker-card h3 {
  color: var(--theme-text-primary) !important;
}

body.light-mode .timeframe-step p,
body.light-mode .amd-definition p,
body.light-mode .amd-quote,
body.light-mode .orb-card p,
body.light-mode .setup-card li,
body.light-mode .defense-card p,
body.light-mode .ticker-card p,
body.light-mode .structure-card p,
body.light-mode .structure-card li,
body.light-mode .zone-card p,
body.light-mode .zone-card li,
body.light-mode .broker-card p,
body.light-mode .broker-card li {
  color: var(--theme-text-secondary) !important;
}

body.light-mode .kingdom-insight,
body.light-mode .secret-quote,
body.light-mode .amd-insight {
  color: #6b5a16 !important;
}

.kingdom-insight,
.secret-quote,
.amd-insight {
  color: #c7b878;
  border-top-color: rgba(212, 175, 55, 0.28);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  :root {
    --bg-primary: hsl(0, 0%, 100%);
    --bg-secondary: hsl(0, 0%, 95%);
    --bg-tertiary: hsl(0, 0%, 90%);
    --bg-card: hsl(0, 0%, 100%);
    --text-primary: hsl(0, 0%, 0%);
    --text-secondary: hsl(0, 0%, 20%);
    --border-primary: hsl(0, 0%, 0%);
    --border-secondary: hsl(0, 0%, 30%);
  }
}