/* ═══════════════════════════════════════════════════════════════
   TERMINAL THEME - Retro CRT Monitor Style
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Terminal Colors */
  --terminal-bg: #000000;
  --terminal-surface: #0a0a0a;
  --terminal-card: #111111;
  --terminal-border: #00ff00;
  --terminal-text: #00ff00;
  --terminal-text-dim: #00aa00;
  --terminal-text-bright: #00ff00;
  --terminal-cursor: #00ff00;
  --terminal-selection: rgba(0, 255, 0, 0.2);
  --terminal-red: #ff0000;
  --terminal-blue: #0099ff;
  --terminal-yellow: #ffff00;
  --terminal-white: #ffffff;
  
  /* Shadows & Effects */
  --terminal-glow: 0 0 10px rgba(0, 255, 0, 0.5);
  --terminal-glow-strong: 0 0 20px rgba(0, 255, 0, 0.8);
}

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

body {
  font-family: 'Courier New', 'Consolas', 'Monaco', monospace !important;
  background: var(--terminal-bg) !important;
  color: var(--terminal-text) !important;
  line-height: 1.4 !important;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.7) !important;
}

/* CRT Scanlines Effect */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 0, 0.03) 0px,
    transparent 1px,
    transparent 2px,
    rgba(0, 255, 0, 0.03) 3px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Container */
.container {
  position: relative;
  z-index: 10 !important;
}

/* Header */
.header {
  border: 2px solid var(--terminal-border) !important;
  background: var(--terminal-surface) !important;
  box-shadow: var(--terminal-glow) !important;
  border-radius: 0 !important;
}

.header-icon {
  background: transparent !important;
  border: 2px solid var(--terminal-border) !important;
  border-radius: 0 !important;
  color: var(--terminal-text) !important;
  box-shadow: var(--terminal-glow) !important;
  animation: blink-cursor 1.5s step-end infinite !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.header-logo {
  width: 40px;
  height: 40px;
  object-fit: contain;
  animation: blink-cursor 1.5s step-end infinite;
}

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

.header-title {
  color: var(--terminal-text) !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important;
}

.header-title::before {
  content: ">>> ";
  color: var(--terminal-text-dim);
}

.header-subtitle {
  color: var(--terminal-text-dim) !important;
  font-style: italic !important;
}

/* Status Badge */
.status-badge {
  background: var(--terminal-surface) !important;
  color: var(--terminal-text) !important;
  border: 2px solid var(--terminal-border) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  box-shadow: var(--terminal-glow) !important;
}

.status-badge.not-rekt {
  animation: pulse-border 2s ease-in-out infinite !important;
}

@keyframes pulse-border {
  0%, 100% { 
    border-color: var(--terminal-border);
    box-shadow: var(--terminal-glow);
  }
  50% { 
    border-color: var(--terminal-text-bright);
    box-shadow: var(--terminal-glow-strong);
  }
}

.status-badge.offline {
  border-color: var(--terminal-red) !important;
  color: var(--terminal-red) !important;
}

/* Stat Cards */
.stat-card {
  background: var(--terminal-surface) !important;
  border: 2px solid var(--terminal-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--terminal-glow) !important;
  transition: all 0.3s ease !important;
}

.stat-card:hover {
  box-shadow: var(--terminal-glow-strong) !important;
  transform: none !important;
}

.stat-card h3 {
  color: var(--terminal-text-dim) !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
}

.stat-value {
  color: var(--terminal-text) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  text-shadow: 0 0 10px rgba(0, 255, 0, 0.8) !important;
}


.meme-icon {
  filter: grayscale(100%) brightness(2);
  animation: none !important;
}

/* Tables and Cards */
.table-container,
.chart-container {
  background: var(--terminal-surface) !important;
  border: 2px solid var(--terminal-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--terminal-glow) !important;
}

.table-container h3,
.chart-container h3 {
  color: var(--terminal-text) !important;
  border-bottom: 2px solid var(--terminal-border) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.table-container h3::before,
.chart-container h3::before {
  content: "[";
  margin-right: 5px;
  color: var(--terminal-text-dim);
}

.table-container h3::after,
.chart-container h3::after {
  content: "]";
  margin-left: 5px;
  color: var(--terminal-text-dim);
}

table {
  color: var(--terminal-text) !important;
}

table th {
  background: var(--terminal-card) !important;
  color: var(--terminal-text-dim) !important;
  border-bottom: 2px solid var(--terminal-border) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

table td {
  border-bottom: 1px solid var(--terminal-border) !important;
  color: var(--terminal-text) !important;
}

table tr:hover {
  background: var(--terminal-card) !important;
}

/* Badges */
.badge {
  border: 1px solid var(--terminal-border) !important;
  background: transparent !important;
  color: var(--terminal-text) !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}

.badge.buy {
  border-color: var(--terminal-border) !important;
  color: var(--terminal-text) !important;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.5) !important;
}

.badge.sell {
  border-color: var(--terminal-red) !important;
  color: var(--terminal-red) !important;
  box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
}

/* Terminal Block */
.terminal-container {
  background: var(--terminal-surface) !important;
  border: 2px solid var(--terminal-border) !important;
  border-radius: 0 !important;
  box-shadow: var(--terminal-glow-strong) !important;
}

.terminal-header {
  background: var(--terminal-card) !important;
  border-bottom: 2px solid var(--terminal-border) !important;
}

.terminal-title {
  color: var(--terminal-text) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.terminal-title::before {
  content: "$ ";
}

.terminal-dot {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid var(--terminal-border) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.terminal-dot:nth-child(1) { border-color: var(--terminal-red); }
.terminal-dot:nth-child(2) { border-color: var(--terminal-yellow); }
.terminal-dot:nth-child(3) { border-color: var(--terminal-border); }

.terminal-content {
  background: var(--terminal-bg) !important;
  color: var(--terminal-text) !important;
}

.terminal-log {
  border-left: 3px solid var(--terminal-border) !important;
  background: var(--terminal-surface) !important;
}

.terminal-timestamp {
  color: var(--terminal-text-dim) !important;
  font-weight: 700 !important;
}

.terminal-message {
  color: var(--terminal-text) !important;
}

.log-trade { color: var(--terminal-text-bright) !important; }
.log-price { color: var(--terminal-blue) !important; }
.log-order { color: var(--terminal-yellow) !important; }
.log-error { color: var(--terminal-red) !important; }
.log-success { color: var(--terminal-text) !important; }

/* Chart Timeframe Switcher */
.timeframe-switcher {
  display: flex;
  gap: 5px;
}

.timeframe-btn {
  background: transparent !important;
  border: 2px solid var(--terminal-border) !important;
  color: var(--terminal-text-dim) !important;
  padding: 5px 15px !important;
  border-radius: 0 !important;
  font-family: 'Courier New', monospace !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.timeframe-btn:hover {
  color: var(--terminal-text) !important;
  box-shadow: var(--terminal-glow) !important;
}

.timeframe-btn.active {
  background: var(--terminal-border) !important;
  color: var(--terminal-bg) !important;
  box-shadow: var(--terminal-glow-strong) !important;
}

/* Bear Overlay - UNDER EVERYTHING */
.bear-overlay {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 480px !important;
  height: 480px !important;
  z-index: 1 !important;
  opacity: 0.15 !important;
  filter: grayscale(100%) brightness(0.5) !important;
  pointer-events: none !important;
}

/* Footer */
.footer {
  color: var(--terminal-text-dim) !important;
  border-top: 2px solid var(--terminal-border) !important;
  text-align: center !important;
  padding: 20px !important;
  font-size: 11px !important;
  letter-spacing: 1px !important;
}

.footer a {
  color: var(--terminal-text) !important;
  text-decoration: underline !important;
}

.footer a:hover {
  text-shadow: var(--terminal-glow) !important;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--terminal-surface);
  border-left: 2px solid var(--terminal-border);
}

::-webkit-scrollbar-thumb {
  background: var(--terminal-border);
  box-shadow: var(--terminal-glow);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--terminal-text-bright);
}