/* DarkWave Pulse - Professional CMC-Style Design */

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

html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif;
  background: #000000;
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.5;
}

/* Theme Variables - Professional Dark */
.theme-dark {
  --bg-primary: #000000;
  --bg-secondary: #1A1A1A;
  --bg-tertiary: #0D0D0D;
  --text-primary: #FFFFFF;
  --text-secondary: #AAAAAA;
  --text-dim: #808A9D;
  --border-color: #333333;
  --border-light: #2A2A2A;
  --glow-white: 0 0 12px rgba(255, 255, 255, 0.15);
  --glow-blue: 0 0 16px rgba(56, 97, 251, 0.3);
  --shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(0, 0, 0, 0.2);
  --accent-blue: #3861FB;
  --accent-blue-hover: #2444D4;
  --green: #16C784;
  --green-bg: rgba(22, 199, 132, 0.1);
  --red: #EA3943;
  --red-bg: rgba(234, 57, 67, 0.1);
}

.theme-light {
  --bg-primary: #D4D4D4;
  --bg-secondary: #E8E8E8;
  --bg-tertiary: #C2C2C2;
  --bg-dark: #4A4A4A;
  --text-primary: #1A1A1A;
  --text-secondary: #3A3A3A;
  --text-dim: #5A5A5A;
  --border-color: #A8A8A8;
  --border-light: #B8B8B8;
  --glow-white: 0 4px 12px rgba(0, 0, 0, 0.12);
  --glow-blue: 0 4px 16px rgba(56, 97, 251, 0.25);
  --shadow-card: 0px 4px 10px rgba(0, 0, 0, 0.08), 0px 1px 3px rgba(0, 0, 0, 0.06);
  --accent-blue: #3861FB;
  --accent-blue-hover: #2444D4;
  --green: #16C784;
  --green-bg: rgba(22, 199, 132, 0.15);
  --red: #EA3943;
  --red-bg: rgba(234, 57, 67, 0.15);
}

/* Light Mode Specific Overrides */
body.theme-light {
  background: var(--bg-dark);
}

body.theme-light #app {
  background: var(--bg-dark);
}

body.theme-light .app-banner {
  background-color: #4A4A4A !important;
  border-bottom: 1px solid var(--border-color);
  isolation: isolate;
}

body.theme-light .banner-wave {
  background-color: #4A4A4A !important;
}

body.theme-light .banner-wave::before {
  opacity: 1;
  mix-blend-mode: plus-lighter;
  filter: brightness(1.3) saturate(1.2) contrast(1.2);
}

/* Reduced opacity overlay behind title - with blur */
.banner-title-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(8px);
  z-index: 1;
}

body.theme-light .banner-title-overlay {
  background: rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(8px);
}

body.theme-light .banner-subtitle {
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 0, 0, 0.4);
  font-weight: 400;
}

/* ===== COLLAPSIBLE SECTIONS (Learn Page) ===== */
.collapsible-section {
  transition: all 0.2s ease;
}

.collapsible-btn {
  transition: all 0.2s ease;
  outline: none;
}

.collapsible-btn:hover {
  opacity: 0.9;
}

.collapsible-btn:hover .collapsible-icon {
  color: #6b82ff;
}

.collapsible-icon {
  transition: transform 0.3s ease-in-out, color 0.2s ease;
  flex-shrink: 0;
}

.collapsible-content {
  border-top: 1px solid rgba(255,255,255,0.1);
  transition: max-height 0.3s ease-in-out;
}

/* ===== PREMIUM THEME SKINS (Premium Users Only) ===== */

/* Jupiter Theme - Orange/Red Space Vibes */
.theme-jupiter {
  --bg-primary: #1A1A2E;
  --bg-secondary: #16213E;
  --bg-tertiary: #0F3460;
  --text-primary: #EAEAEA;
  --text-secondary: #B8B8B8;
  --text-dim: #8A8A9D;
  --border-color: #2E3A59;
  --border-light: #253047;
  --glow-white: 0 0 12px rgba(255, 255, 255, 0.15);
  --glow-blue: 0 0 16px rgba(249, 112, 104, 0.4);
  --shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 2px rgba(249, 112, 104, 0.15);
  --accent-blue: #F97068;
  --accent-blue-hover: #E25A52;
  --green: #16C784;
  --green-bg: rgba(22, 199, 132, 0.1);
  --red: #EA3943;
  --red-bg: rgba(234, 57, 67, 0.1);
}

body.theme-jupiter {
  background: linear-gradient(180deg, #1A1A2E 0%, #0F3460 100%);
}

/* Pink Blossom Theme - Soft Pink with Flower Watermarks */
.theme-pink-blossom {
  --bg-primary: #2D1B2E;
  --bg-secondary: #442C4A;
  --bg-tertiary: #3A2240;
  --text-primary: #FFF0F5;
  --text-secondary: #E0B0D5;
  --text-dim: #B495AA;
  --border-color: #5A3D5F;
  --border-light: #4D3352;
  --glow-white: 0 0 12px rgba(255, 182, 193, 0.2);
  --glow-blue: 0 0 16px rgba(255, 105, 180, 0.3);
  --shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(255, 105, 180, 0.1);
  --accent-blue: #FF69B4;
  --accent-blue-hover: #FF1493;
  --green: #90EE90;
  --green-bg: rgba(144, 238, 144, 0.1);
  --red: #FF6B9D;
  --red-bg: rgba(255, 107, 157, 0.1);
}

body.theme-pink-blossom {
  background: #2D1B2E url('/themes/flowers-watermark.png') center/cover no-repeat fixed;
  background-blend-mode: soft-light;
}

body.theme-pink-blossom::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(45, 27, 46, 0.85);
  pointer-events: none;
  z-index: 0;
}

/* Sunny Field Theme - Warm Yellows with Field Background */
.theme-sunny-field {
  --bg-primary: #2A2416;
  --bg-secondary: #3D3420;
  --bg-tertiary: #32291C;
  --text-primary: #FFF8DC;
  --text-secondary: #F5DEB3;
  --text-dim: #D4AF8C;
  --border-color: #5C4D2F;
  --border-light: #4A3E25;
  --glow-white: 0 0 12px rgba(255, 248, 220, 0.15);
  --glow-blue: 0 0 16px rgba(255, 167, 38, 0.3);
  --shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.4), 0px 1px 2px rgba(255, 167, 38, 0.1);
  --accent-blue: #FFA726;
  --accent-blue-hover: #FB8C00;
  --green: #8BC34A;
  --green-bg: rgba(139, 195, 74, 0.15);
  --red: #F4511E;
  --red-bg: rgba(244, 81, 30, 0.15);
}

body.theme-sunny-field {
  background: #2A2416 url('/themes/field-watermark.png') center/cover no-repeat fixed;
  background-blend-mode: overlay;
}

body.theme-sunny-field::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(42, 36, 22, 0.88);
  pointer-events: none;
  z-index: 0;
}

/* Space Theme - Deep Blue with Cosmic Stars */
.theme-space {
  --bg-primary: #0B0C10;
  --bg-secondary: #1F2833;
  --bg-tertiary: #151A21;
  --text-primary: #C5C6C7;
  --text-secondary: #8892A0;
  --text-dim: #697481;
  --border-color: #45A29E;
  --border-light: #2E6F6D;
  --glow-white: 0 0 12px rgba(102, 252, 241, 0.2);
  --glow-blue: 0 0 16px rgba(102, 252, 241, 0.4);
  --shadow-card: 0px 2px 8px rgba(0, 0, 0, 0.6), 0px 1px 2px rgba(102, 252, 241, 0.15);
  --accent-blue: #66FCF1;
  --accent-blue-hover: #45A29E;
  --green: #4ECCA3;
  --green-bg: rgba(78, 204, 163, 0.1);
  --red: #FF6464;
  --red-bg: rgba(255, 100, 100, 0.1);
}

body.theme-space {
  background: #0B0C10 url('/themes/stars-bg.png') center/cover no-repeat fixed;
}

body.theme-space::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 12, 16, 0.75);
  pointer-events: none;
  z-index: 0;
}

/* Spacing Tokens */
:root {
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 10px;
  --spacing-lg: 14px;
  --btn-height: 32px;
}

#app {
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Dashboard Grid - Jigsaw Puzzle Layout */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  width: 100%;
}

@media (min-width: 768px) {
  .dashboard-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    padding: 4px;
  }
}

/* Grid Span Utilities */
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }

/* Grid Card */
.grid-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: var(--spacing-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.grid-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Button Group - Uniform Sizing */
.btn-group {
  display: flex;
  gap: var(--spacing-xs);
  width: 100%;
}

.btn-group .btn {
  flex: 1 0 0;
  min-width: 0;
  height: var(--btn-height);
  padding: 0 var(--spacing-sm);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn-group .btn:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  box-shadow: var(--glow-blue);
}

.btn-group .btn.btn-primary {
  background: linear-gradient(135deg, #3861FB, #1E40AF);
  border-color: #3861FB;
  color: white;
}

/* Banner Section */
.app-banner {
  width: 100%;
  max-width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  background: var(--bg-primary);
  border-bottom: 2px solid var(--border-color);
  overflow: hidden;
  position: relative;
  z-index: 5;
  box-sizing: border-box;
}

.banner-scroll {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url('/banner-dark.png');
  background-size: 50% 100%;
  background-position: 0 center;
  background-repeat: repeat-x;
  background-attachment: scroll;
  animation: bannerScroll 60s linear infinite;
}

@keyframes bannerScroll {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 50% center;
  }
}

body.theme-light .banner-scroll {
  background: url('/banner-light.png');
  background-size: 50% 100%;
  background-position: 0 center;
  background-repeat: repeat-x;
  animation: bannerScroll 60s linear infinite;
}

.banner-scroll::before {
  display: none;
}

.banner-scroll::after {
  display: none;
}

/* Title Section - Right Half of Banner */
.banner-title-section {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding-right: 30px;
  box-sizing: border-box;
}

/* Banner Title Wrapper - Centers title and subtitle vertically */
.banner-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  text-align: right;
}

/* Banner Title - Modern Technical Font */
.banner-title {
  color: white;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
  font-family: 'Courier New', 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  line-height: 1;
  text-align: right;
  position: relative;
  z-index: 11;
}

.banner-subtitle {
  font-size: 0.75rem;
  margin: 6px 0 0 0;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 400;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
  letter-spacing: 0.5px;
  font-family: 'Courier New', 'IBM Plex Mono', monospace;
  position: relative;
  z-index: 11;
  line-height: 1.4;
  max-width: 280px;
}

/* V2 Feature Lock Modal */
.v2-lock-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

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

.v2-lock-content {
  background: var(--bg-secondary);
  border: 2px solid rgba(56, 97, 251, 0.3);
  border-radius: 12px;
  padding: 32px 28px;
  max-width: 400px;
  text-align: center;
  position: relative;
  box-shadow: 0 0 40px rgba(56, 97, 251, 0.2);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.v2-lock-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 28px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s;
}

.v2-lock-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

.v2-lock-header {
  margin-bottom: 20px;
}

.v2-lock-icon {
  font-size: 48px;
  margin-bottom: 12px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.v2-lock-header h2 {
  margin: 0;
  color: rgba(56, 97, 251, 0.9);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.v2-lock-body {
  margin-bottom: 24px;
}

.v2-feature-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: #fff;
}

.v2-lock-description {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px 0;
  line-height: 1.5;
}

.v2-countdown {
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.2) 0%, rgba(131, 56, 252, 0.1) 100%);
  border: 1px solid rgba(56, 97, 251, 0.3);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.countdown-number {
  font-size: 48px;
  font-weight: 900;
  background: linear-gradient(135deg, #3861FB, #8338EC);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.countdown-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.v2-launch-date {
  font-size: 13px;
  color: rgba(56, 97, 251, 0.8);
  font-weight: 600;
  margin: 0;
}

.v2-lock-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light Mode - Animated Gradient Title */
body.theme-light .banner-title {
  background: linear-gradient(90deg, 
    #8B0000 0%, 
    #1A1A1A 25%, 
    #FFFFFF 50%, 
    #1A1A1A 75%, 
    #8B0000 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientWave 8s linear infinite;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes gradientWave {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}

.banner-subtitle {
  font-family: 'Courier New', 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
  letter-spacing: 0.5px;
  word-wrap: break-word;
}

@media (max-width: 768px) {
  .app-banner {
    height: 120px;
  }
  .banner-title {
    font-size: 16px;
    letter-spacing: 0.5px;
  }
  .banner-subtitle {
    font-size: 9px;
    max-width: 220px;
  }
  .banner-text {
    padding: 0 10px;
  }
}

/* Top Navigation Menu - CMC Style Compact */
.top-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  gap: 0;
  padding: 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--glow-white);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  max-width: 100vw;
  pointer-events: auto;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
}

.top-nav::-webkit-scrollbar {
  display: none;
}

.nav-btn, .disclaimer-icon-btn {
  flex: 0 0 auto;
  min-width: fit-content;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  user-select: none;
  transition: all 0.2s ease;
}

@media (max-width: 768px) {
  .nav-btn, .disclaimer-icon-btn {
    padding: 6px 8px;
    font-size: 10px;
  }
}

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

.nav-btn.active {
  color: var(--accent-blue);
  border-bottom-color: var(--accent-blue);
  background: transparent;
  font-weight: 600;
}

/* Disclaimer Icon Button - Yellow Glow */
.disclaimer-icon-btn {
  flex: 0 0 auto;
  min-width: auto;
  padding: 8px 10px;
  font-size: 16px;
  color: #FFD700;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

.disclaimer-icon-btn:hover {
  color: #FFF;
  border-bottom-color: transparent;
  background: transparent;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 1)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) brightness(1.2);
}

/* Logout Icon Button - Base Styling */
.logout-icon-btn {
  flex: 0 0 auto;
  min-width: auto;
  padding: 8px 10px;
  font-size: 16px;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Logout Icon Button in Main App Nav - Red Glow (non-admin only) */
.top-nav .logout-icon-btn {
  color: #FF3B30;
  filter: drop-shadow(0 0 15px rgba(255, 59, 48, 0.9)) drop-shadow(0 0 8px rgba(255, 59, 48, 0.6));
}

.top-nav .logout-icon-btn:hover {
  color: #FFF;
  border-bottom-color: transparent;
  background: transparent;
  filter: drop-shadow(0 0 20px rgba(255, 59, 48, 1)) drop-shadow(0 0 10px rgba(255, 59, 48, 0.8)) brightness(1.2);
}

/* Logout Button in Settings Page */
.logout-btn {
  width: 100%;
  padding: 12px;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 97, 251, 0.3);
}

.logout-btn:active {
  transform: translateY(0);
}

/* Metrics Section - 2x2 Grid Layout */
.metrics-section {
  width: 100%;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  padding: 8px 6px;
  box-sizing: border-box;
  overflow-x: hidden;
  z-index: 1;
  position: relative;
  margin-top: 0;
}

.metrics-stack {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* Mobile: Compact layout filling full width */
@media (max-width: 768px) {
  .metrics-stack {
    gap: 4px;
    margin-bottom: 8px;
  }
}

/* Compact Metric Boxes - 4 Horizontal Square Thumbnails on Mobile */
.metric-box-wide {
  width: 100%;
  aspect-ratio: 0.9 / 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 2px 1px 1px 1px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
  overflow: visible;
  min-height: 80px;
  z-index: 1;
}

/* Mobile: Tight compact boxes */
@media (max-width: 768px) {
  .metric-box-wide {
    aspect-ratio: 0.9 / 1;
    padding: 4px 2px 2px 2px;
    min-height: 80px;
    border-radius: 6px;
  }
}

/* ============================================
   MARKET CAP & VOLUME BOXES (3rd and 4th)
   Dollar values centered on horizontal midline
   ============================================ */
.metric-box-wide:nth-child(3),
.metric-box-wide:nth-child(4) {
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 0;
}

/* Title at top of box */
.metric-box-wide:nth-child(3) .metric-label,
.metric-box-wide:nth-child(4) .metric-label {
  position: absolute;
  top: 8px;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

/* Dollar value centered exactly at vertical midpoint */
.metric-box-wide:nth-child(3) .gauge-value-display,
.metric-box-wide:nth-child(4) .gauge-value-display {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  color: #00FF41;
}

/* Percentage below the value */
.metric-box-wide:nth-child(3) .metric-change,
.metric-box-wide:nth-child(4) .metric-change {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 12px;
  text-align: center;
}

/* Volume flow indicator at bottom */
.metric-box-wide:nth-child(4) .volume-flow-indicator {
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  text-align: center;
}

.metric-box-wide:hover {
  border-color: var(--accent-blue);
  box-shadow: var(--glow-blue);
  transform: translateY(-2px);
}

/* Removed old canvas positioning - now uses flexbox layout */

.fear-greed-box {
  /* Inherit from metric-box-wide */
}

/* Altcoin Season box - second box */
.metrics-stack .metric-box-wide:nth-child(2) {
  /* Inherit from metric-box-wide */
}

.fear-greed-box canvas {
  display: block;
  margin: 0 auto;
}

.metric-label {
  font-size: 10px;
  color: var(--text-dim);
  margin: 0 0 2px 0;
  padding: 0 1px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1;
  display: block;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  position: static;
  width: 100%;
  z-index: 2;
}

/* Mobile: Larger metric labels */
@media (max-width: 768px) {
  .metric-label {
    font-size: 11px;
    font-weight: 700;
  }
}

.metric-label-desktop {
  display: none;
}

@media (min-width: 768px) {
  .metric-label-desktop {
    display: block;
  }
  
  .metric-label-mobile {
    display: none;
  }
}

/* ============================================
   DESKTOP METRIC BOXES - Larger Layout
   Only affects screens 769px and wider
   ============================================ */
@media (min-width: 769px) {
  /* Taller boxes on desktop */
  .metric-box-wide {
    aspect-ratio: 1 / 1.2;
    min-height: 180px;
    padding: 10px 6px;
  }
  
  /* Larger titles for ALL boxes - matching sizes */
  .metric-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
  }
  
  /* Ensure MC & Volume titles match F&G and Altcoin */
  .metric-box-wide:nth-child(3) .metric-label,
  .metric-box-wide:nth-child(4) .metric-label {
    font-size: 14px;
    font-weight: 700;
    top: 14px;
  }
  
  /* Larger values for Fear & Greed and Altcoin Season (boxes 1 & 2) */
  .metric-box-wide:nth-child(1) .gauge-value-display,
  .metric-box-wide:nth-child(2) .gauge-value-display {
    font-size: 26px;
    font-weight: 800;
    margin: 10px 0 6px 0;
  }
  
  /* Much larger gauge canvas on desktop */
  .gauge-container {
    min-height: 140px;
  }
  
  .gauge-container canvas {
    height: 120px;
    transform: scale(2.0);
    margin-top: 0;
  }
  
  /* Larger values for Market Cap & Volume (boxes 3 & 4) */
  .metric-box-wide:nth-child(3) .gauge-value-display,
  .metric-box-wide:nth-child(4) .gauge-value-display {
    font-size: 34px;
    font-weight: 800;
  }
  
  /* Larger percentage change right under value */
  .metric-box-wide:nth-child(3) .metric-change,
  .metric-box-wide:nth-child(4) .metric-change {
    position: absolute;
    top: calc(50% + 26px);
    bottom: auto;
    font-size: 18px;
    font-weight: 700;
  }
  
  /* Volume flow indicator - larger and positioned below % change */
  .metric-box-wide:nth-child(4) .volume-flow-indicator {
    position: absolute;
    top: calc(50% + 52px);
    bottom: auto;
    font-size: 14px;
    font-weight: 600;
  }
}

/* OLD .metric-value CSS - DISABLED - using .gauge-value-display instead */
/* NOTE: Removed display:none since .macro-metrics-grid .metric-value needs to be visible */

/* Action Button Group - Full Width Mobile */
.action-group {
  display: flex;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
  box-sizing: border-box;
}

.action-btn-wide {
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.action-btn-wide:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  box-shadow: var(--glow-blue);
  transform: translateY(-2px);
}

.action-btn-wide:active {
  transform: translateY(0);
}

.action-btn-wide.subscribe-btn {
  background: linear-gradient(135deg, #3861FB, #1E40AF);
  border-color: #3861FB;
  color: white;
  font-weight: 700;
}

.action-btn-wide.subscribe-btn:hover {
  background: linear-gradient(135deg, #1E40AF, #3861FB);
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.6);
}

@media (max-width: 768px) {
  .action-buttons {
    flex-wrap: wrap;
  }
  .action-btn {
    flex: 1 1 calc(50% - 2px);
    max-width: none;
  }
}

/* Footer */
.app-footer {
  background: var(--bg-secondary);
  border-top: 2px solid var(--border-color);
  padding: 20px 16px;
  margin-top: 40px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 200px;
  margin: 0 auto;
}

.footer-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.footer-text {
  text-align: center;
}

.footer-brand {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: 0.5px;
  text-align: center;
  width: 100%;
}

.footer-website-link {
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.2s ease;
}

.footer-website-link:hover {
  text-shadow: var(--glow-blue);
  text-decoration: underline;
}

.footer-copyright {
  font-size: 11px;
  color: var(--text-secondary);
  margin: 0;
  opacity: 0.8;
  text-align: center;
}

.footer-link {
  font-size: 12px;
  color: var(--accent-blue);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

.footer-link:hover {
  color: var(--text-primary);
  text-shadow: var(--glow-blue);
}

.footer-cta-btn {
  margin-top: 8px;
  padding: 6px 14px;
  background: transparent;
  border: 1.5px solid var(--accent-blue);
  border-radius: 6px;
  color: var(--accent-blue);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
}

.footer-cta-btn:hover {
  background: var(--accent-blue);
  color: #000;
  box-shadow: 0 0 12px rgba(56, 97, 251, 0.5);
}

/* Crypto Cat Popup - Centered Modal LOW-PROFILE */
.cat-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10100;
  pointer-events: all;
  animation: fadeIn 0.3s ease;
  overflow: auto;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.cat-popup-content {
  width: 95% !important;
  max-width: 550px !important;
  max-height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  background: var(--bg-primary);
  position: relative;
  box-sizing: border-box;
  border: 2px solid var(--accent-blue);
  border-radius: 10px;
  padding: 16px;
}

.cat-popup-content.cat-popup-simple {
  max-height: auto;
  overflow: visible;
}

/* Simple one-panel popup for OFF mode (no scrolling) */
.cat-popup-simple .cat-popup-cat {
  display: none !important;
}

.cat-popup-simple .cat-popup-content {
  padding: 16px;
  overflow: hidden;
}

.cat-popup-simple .cat-popup-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: none;
  box-shadow: none;
}

/* Character mode: flex layout with image + content side-by-side */
.cat-popup-content:not(.cat-popup-simple) {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

/* Panel 1: Cat Image (compact) */
.cat-popup-cat {
  flex-shrink: 0;
  text-align: center;
  width: 140px;
  min-width: 140px;
}

.cat-popup-cat img {
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(56, 97, 251, 0.3);
  display: block;
  margin: 0 auto;
}

/* Panel 2: Content */
.cat-popup-panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent;
  padding: 8px;
  box-sizing: border-box;
  width: auto;
  min-height: auto;
}

.cat-popup-panel-content-inner {
  background: var(--bg-secondary);
  border: 1px solid rgba(56, 97, 251, 0.4);
  border-radius: 8px;
  padding: 16px;
  max-width: none;
  width: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.cat-popup-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--accent-blue);
  background: rgba(26, 26, 26, 0.95);
  color: var(--accent-blue);
  font-size: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.cat-popup-close:hover {
  background: var(--accent-blue);
  color: var(--bg-primary);
  transform: scale(1.08);
}

@media (max-width: 480px) {
  .cat-popup-close {
    width: 24px;
    height: 24px;
    font-size: 14px;
    top: 4px;
    right: 4px;
  }

  .cat-popup-content:not(.cat-popup-simple) {
    flex-direction: column;
    gap: 12px;
  }

  .cat-popup-cat {
    width: 120px;
    min-width: 120px;
  }
}

.cat-popup-bubble {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  width: 100%; /* Full width of popup */
}

.cat-popup-term {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-blue);
  margin: 0 0 8px 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-align: center;
}

.cat-popup-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  margin: 0;
  text-align: center;
}

.cat-found-count {
  font-size: 11px !important;
  margin-top: 10px !important;
}

/* Scroll arrow button */
.cat-popup-scroll-btn {
  margin-top: 30px;
  padding: 12px 24px;
  background: var(--accent-blue);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  animation: bounce 2s infinite;
}

.cat-popup-scroll-btn:hover {
  background: #fff;
  transform: scale(1.05);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.cat-popup-closing {
  animation: fadeOut 0.3s ease;
}

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

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes popIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Toggle Switch */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-label {
  position: relative;
  width: 50px;
  height: 26px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-switch input:checked + .toggle-label {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
}

.toggle-switch input:checked + .toggle-label .toggle-slider {
  transform: translateX(24px);
  background: white;
}

.toggle-text {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Hide and Seek Hotspots */
.cat-hotspot {
  transition: opacity 0.3s ease;
}

.cat-hotspot:hover {
  opacity: 0.5;
}

.cat-found-count {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  font-weight: 600;
}

/* Glossary Banner - Animated Wave with Persona-Switching Cats */
.glossary-banner-container {
  position: relative;
  width: 100%;
  max-width: calc(100vw - 32px);
  height: 200px;
  margin: 0 auto 20px;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--accent-blue);
  box-shadow: var(--glow-blue);
  background: #000000;
  box-sizing: border-box;
}

.glossary-banner-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000;
  z-index: 1;
}

.glossary-banner-wave::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: url('/banner.jpg');
  background-size: 50% 100%;
  background-position: 0% center;
  background-repeat: repeat-x;
  animation: waveSlide 180s linear infinite;
  opacity: 0.6;
}

.glossary-banner-cats {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glossary-cat-img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 20px rgba(56, 97, 251, 0.6));
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.3) 15%,
    rgba(0,0,0,0.9) 30%,
    rgba(0,0,0,0.9) 70%,
    rgba(0,0,0,0.3) 85%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.3) 15%,
    rgba(0,0,0,0.9) 30%,
    rgba(0,0,0,0.9) 70%,
    rgba(0,0,0,0.3) 85%,
    transparent 100%
  );
}

.glossary-cat-img.casual-cat {
  display: block;
}

.glossary-cat-img.business-cat {
  display: none;
}

@media (max-width: 768px) {
  .glossary-banner-container {
    height: 150px;
  }
  
  .glossary-cat-img {
    max-height: 150px;
  }
}

/* UNIFIED BOX SYSTEM - Low Profile, Compact, Evenly Sized */
.section-box {
  margin: 2px 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  overflow-x: visible;
  overflow-y: hidden;
  box-shadow: var(--shadow-card);
  max-width: calc(100vw - 4px);
  box-sizing: border-box;
  padding: 2px;
}

/* Double Column Layout for Section Boxes */
.section-box-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  width: 100%;
}

@media (min-width: 1024px) {
  .section-box-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .section-box {
    margin: 2px 0;
    padding: 2px;
    border-radius: 6px;
  }
}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 3px 4px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-light);
  position: relative; /* For color picker panel positioning */
}

@media (min-width: 768px) {
  .section-header {
    gap: 2px;
    padding: 2px 3px;
  }
}

.section-header .header-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.refresh-icon-btn {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 12px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.refresh-icon-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-primary);
}

.section-header h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  flex: 1;
}

/* V2 Preview Banner */
.v2-preview-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), rgba(0, 200, 255, 0.08));
  border: 2px solid #00FFFF;
  border-radius: 8px;
  margin-bottom: 15px;
  animation: glow 2s infinite alternate;
}

@keyframes glow {
  0% { box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); }
  100% { box-shadow: 0 0 20px rgba(0, 255, 255, 0.5); }
}

.v2-preview-icon {
  font-size: 28px;
  animation: bounce 1s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.v2-preview-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}

.v2-preview-text strong {
  color: #00FFFF;
  font-weight: 900;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .v2-preview-banner {
    padding: 12px 15px;
  }
  
  .v2-preview-icon {
    font-size: 24px;
  }
  
  .v2-preview-text {
    font-size: 11px;
  }
}

/* Blockchain Badges */
.blockchain-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.blockchain-badge.sol {
  background: linear-gradient(135deg, #14F195, #9945FF);
  color: #000;
}

.blockchain-badge.eth {
  background: linear-gradient(135deg, #627EEA, #8A92B2);
  color: #fff;
}

.blockchain-badge.poly {
  background: linear-gradient(135deg, #8247E5, #A855F7);
  color: #fff;
}

.blockchain-badge.bsc {
  background: linear-gradient(135deg, #F3BA2F, #FCD535);
  color: #000;
}

.blockchain-badge.multi {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-blue));
  color: #fff;
}

/* Category Filter Buttons */
@media (min-width: 768px) {
  .category-filters {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    margin-bottom: 8px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
}

.category-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.category-btn {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  padding: 10px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-align: center;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
}

.category-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 97, 251, 0.2);
}

.category-btn.active {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-blue));
  border-color: var(--accent-pink);
  color: #fff;
  box-shadow: 0 4px 15px rgba(139, 21, 56, 0.3);
}

.category-refresh-container {
  display: flex;
  justify-content: center;
  padding: 8px 12px 12px 12px;
}

.category-refresh-btn {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.category-refresh-btn:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 97, 251, 0.3);
}

.category-refresh-btn:active {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .category-filters {
    padding: 10px;
    gap: 6px;
  }
  
  .category-btn {
    padding: 8px 6px;
    font-size: 9px;
    min-height: 38px;
    letter-spacing: 0.2px;
  }
  
  .category-refresh-container {
    padding: 6px 10px 10px 10px;
  }
  
  .category-refresh-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* Timeframe Toggle (Gainers/Losers) - Compact */
.timeframe-toggle {
  display: flex;
  gap: 4px;
  padding: 4px 8px 8px 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.timeframe-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.4px;
  min-width: 48px;
  height: 32px;
  flex: 1;
  min-width: auto;
}

.timeframe-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.timeframe-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  box-shadow: 0 2px 6px rgba(56, 97, 251, 0.3);
}

/* Coin Table - Professional CMC Style */
.coin-table-wrapper {
  overflow-x: auto;
}

.coin-table {
  width: 100%;
  border-collapse: collapse;
}

.coin-table thead {
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.coin-table th {
  text-align: left;
  font-size: 11px;
  color: var(--text-dim);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.coin-table th.align-right {
  text-align: right;
}

.coin-table tbody tr {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.coin-table tbody tr:hover {
  background: var(--bg-tertiary);
}

.coin-table td {
  font-size: 14px;
  padding: 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}

.coin-table td.align-right {
  text-align: right;
}

.coin-table td.coin-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.coin-table td.coin-name img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.coin-table td.coin-symbol {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
}

.coin-table td.positive {
  color: var(--green);
  font-weight: 600;
}

.coin-table td.negative {
  color: var(--red);
  font-weight: 600;
}

.coin-rank {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 500;
}

/* News Headlines - Drudge Style */
.news-headline {
  padding: 8px 12px;
  margin: 4px 0;
  background: var(--bg-tertiary);
  border-left: 3px solid var(--accent-blue);
  border-radius: 4px;
  transition: all 0.2s ease;
}

.news-headline:hover {
  background: var(--bg-secondary);
  border-left-color: var(--green);
}

.news-headline .news-source {
  font-weight: 700;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.news-headline a {
  color: var(--text-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.news-headline a:hover {
  color: var(--accent-blue);
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 6px;
}

@media (min-width: 768px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 4px;
  }
}

/* Projects Grid */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
}

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

@media (min-width: 1024px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.project-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.project-card:hover {
  border-color: var(--accent-blue);
  box-shadow: var(--glow-blue);
  transform: translateY(-2px);
}

.project-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.project-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border-light);
}

.project-info h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.project-ticker {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
}

.project-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 8px 0;
}

.project-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.project-ca {
  font-size: 11px;
  color: var(--text-dim);
  font-family: monospace;
  word-break: break-all;
}

/* DUAL SPOTLIGHT CONTAINER */
.spotlight-dual-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 2px 0;
}

@media (min-width: 768px) {
  .spotlight-dual-container {
    flex-direction: row;
    gap: 6px;
  }
}

/* LARGE FEATURED COIN SPOTLIGHT */
.featured-spotlight-box {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
  border: 2px solid var(--accent-blue);
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.3);
  flex: 1;
}

.coming-soon-box {
  border-color: #FF8C00;
  box-shadow: 0 0 20px rgba(255, 140, 0, 0.3);
}

.featured-spotlight-header {
  text-align: center;
  padding: 6px;
  border-bottom: 1px solid var(--border-color);
}

.spotlight-badge {
  display: inline-block;
  background: var(--accent-blue);
  color: #FFF;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.spotlight-badge-live {
  background: var(--green);
  box-shadow: 0 0 10px rgba(22, 199, 132, 0.4);
}

.spotlight-badge-soon {
  background: #FF8C00;
  box-shadow: 0 0 10px rgba(255, 140, 0, 0.4);
}

.spotlight-title {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.spotlight-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

.spotlight-logo {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.spotlight-logo img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--accent-blue);
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.4);
  object-fit: cover;
}

.spotlight-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.spotlight-description {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.spotlight-stats {
  display: flex;
  gap: 12px;
}

.spotlight-stat {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.stat-label {
  display: block;
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.stat-value {
  display: block;
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 700;
}

.spotlight-links {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.spotlight-link {
  flex: 1;
  min-width: 80px;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
}

.spotlight-link:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #FFF;
  box-shadow: var(--glow-blue);
}

.spotlight-buy-btn {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, var(--green) 0%, #13A871 100%);
  color: #FFF;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(22, 199, 132, 0.4);
  transition: all 0.2s ease;
}

.spotlight-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(22, 199, 132, 0.6);
}

.spotlight-buy-btn:active {
  transform: translateY(0);
}

.coming-soon-notice {
  width: 100%;
  padding: 12px;
  background: rgba(255, 140, 0, 0.1);
  border: 2px solid #FF8C00;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.notice-icon {
  font-size: 18px;
}

.notice-text {
  font-size: 12px;
  font-weight: 700;
  color: #FF8C00;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Desktop Layout for Featured Spotlight */
@media (min-width: 768px) {
  .spotlight-content {
    flex-direction: row;
    align-items: center;
  }
  
  .spotlight-logo {
    width: auto;
  }
  
  .spotlight-logo img {
    width: 150px;
    height: 150px;
  }
  
  .spotlight-title {
    font-size: 32px;
  }
  
  .spotlight-description {
    font-size: 15px;
  }
}

/* Featured Coins Grid - Horizontal Scrollable Layout */
.featured-coins-grid {
  display: flex;
  flex-direction: row;
  gap: 4px;
  padding: 4px 2px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-blue) var(--bg-tertiary);
}

.featured-coins-grid::-webkit-scrollbar {
  height: 4px;
}

.featured-coins-grid::-webkit-scrollbar-track {
  background: var(--bg-tertiary);
  border-radius: 2px;
}

.featured-coins-grid::-webkit-scrollbar-thumb {
  background: var(--accent-blue);
  border-radius: 2px;
}

.featured-coins-grid::-webkit-scrollbar-thumb:hover {
  background: #4d6bff;
}

@media (min-width: 768px) {
  .featured-coins-grid {
    gap: 4px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    overflow: visible;
  }
}

.featured-coin-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  touch-action: pan-x;
  gap: 3px;
  min-width: 80px;
  max-width: 80px;
  flex-shrink: 0;
  scroll-snap-align: start;
  box-sizing: border-box;
  position: relative;
}

@media (min-width: 768px) {
  .featured-coin-card {
    border: 2px solid var(--border-color);
    padding: 10px;
    gap: 8px;
    border-radius: 8px;
    min-width: 140px;
    max-width: 140px;
  }
}

.featured-coin-card:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(56, 97, 251, 0.3);
  transform: translateY(-3px);
}

.featured-coin-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid var(--border-light);
  flex-shrink: 0;
}

.featured-coin-ticker {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
  word-break: break-word;
  width: 100%;
  flex-shrink: 0;
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (min-width: 768px) {
  .featured-coin-ticker {
    font-size: 12px;
    letter-spacing: 0.5px;
    line-height: 1.3;
  }
}

/* Coming Soon Grid - Two Column Layout */
.coming-soon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}

@media (min-width: 768px) {
  .coming-soon-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

.coming-soon-card {
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: auto;
}

.coming-soon-card:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.3);
  transform: translateY(-3px);
}

.coming-soon-image-wrapper {
  width: 100%;
  max-width: 140px;
  margin-bottom: 10px;
}

.coming-soon-project-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--border-light);
}

.coming-soon-project-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--accent-blue);
  text-transform: uppercase;
  margin-bottom: 6px;
  text-shadow: 0 0 15px rgba(56, 97, 251, 0.5);
}

.coming-soon-project-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.coming-soon-project-description {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 8px;
}

/* Like button for Coming Soon cards */
.coming-soon-like-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
}

/* Popup Like Button (in coin detail popup) */
.popup-like-btn {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.popup-like-btn:hover {
  background: rgba(255, 0, 80, 0.2);
  border-color: #ff0050;
  box-shadow: 0 0 15px rgba(255, 0, 80, 0.4);
  transform: scale(1.05);
}

.popup-like-btn.liked {
  background: rgba(255, 0, 80, 0.3);
  border-color: #ff0050;
}

.popup-like-icon {
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.popup-like-btn:active .popup-like-icon {
  transform: scale(1.3);
}

.popup-like-count {
  font-size: 11px;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
}

/* Coming Soon Popup Details */
.coming-soon-popup-details {
  padding: 20px 0;
}

.coming-soon-launch-date {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
  border: 1px solid #FFD700;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-primary);
}

.coming-soon-launch-date strong {
  color: #FFD700;
}

.coming-soon-description {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.coming-soon-features {
  background: rgba(0, 191, 255, 0.05);
  border-left: 3px solid var(--accent-blue);
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.coming-soon-features strong {
  display: block;
  color: var(--accent-blue);
  font-size: 13px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.coming-soon-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.coming-soon-features li {
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 0;
  line-height: 1.6;
}

.coming-soon-cta {
  background: linear-gradient(135deg, rgba(255, 0, 80, 0.1), rgba(255, 20, 147, 0.1));
  border: 1px solid var(--accent-pink);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

.coming-soon-cta p {
  margin: 0;
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}

/* V2 Feature Lock Modal */
.v2-feature-lock-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 20px;
}

.v2-feature-lock-modal {
  background: linear-gradient(135deg, rgba(139, 21, 56, 0.2), rgba(56, 97, 251, 0.2));
  border: 2px solid var(--accent-pink);
  border-radius: 16px;
  padding: 40px 30px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  position: relative;
  box-shadow: 0 20px 60px rgba(139, 21, 56, 0.5);
}

.v2-lock-icon {
  font-size: 64px;
  margin-bottom: 20px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.v2-feature-lock-modal h2 {
  font-size: 14px;
  letter-spacing: 3px;
  color: #FFD700;
  margin-bottom: 10px;
  font-weight: 900;
}

.v2-feature-lock-modal h3 {
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 15px;
  font-weight: 900;
  letter-spacing: 1px;
}

.v2-lock-description {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 30px;
  line-height: 1.6;
}

.v2-lock-features {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 30px;
  text-align: left;
}

.v2-lock-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 14px;
  color: var(--text-secondary);
}

.v2-lock-feature-item:last-child {
  border-bottom: none;
}

.v2-feature-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.v2-lock-launch {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
  border: 1px solid #FFD700;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 25px;
}

.v2-lock-date {
  font-size: 18px;
  font-weight: 900;
  color: #FFD700;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.v2-lock-upgrade-text {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}

.v2-lock-upgrade-btn {
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-blue));
  color: #fff;
  border: none;
  padding: 18px 40px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.v2-lock-upgrade-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(139, 21, 56, 0.5);
}

@media (max-width: 768px) {
  .v2-feature-lock-modal {
    padding: 30px 20px;
  }
  
  .v2-lock-icon {
    font-size: 48px;
  }
  
  .v2-feature-lock-modal h3 {
    font-size: 22px;
  }
  
  .v2-lock-description {
    font-size: 13px;
  }
  
  .v2-lock-feature-item {
    font-size: 12px;
  }
}

.featured-coin-like-btn:hover {
  background: rgba(255, 0, 80, 0.2);
  border-color: #ff0050;
  box-shadow: 0 0 10px rgba(255, 0, 80, 0.3);
  transform: scale(1.05);
}

.featured-coin-like-btn.liked {
  background: rgba(255, 0, 80, 0.3);
  border-color: #ff0050;
}

.featured-coin-like-icon {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.featured-coin-like-btn:active .featured-coin-like-icon {
  transform: scale(1.3);
}

.featured-coin-like-count {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}

@media (min-width: 768px) {
  .featured-coin-like-btn {
    top: -8px;
    right: -8px;
    padding: 8px;
    width: 48px;
    height: 48px;
  }
  
  .featured-coin-like-icon {
    font-size: 18px;
  }
  
  .featured-coin-like-count {
    font-size: 10px;
  }
}

/* Coin Details Popup */
.coin-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}

.coin-popup-content {
  background: var(--bg-secondary);
  border: 3px solid var(--accent-blue);
  border-radius: 12px;
  padding: 8px;
  max-width: min(360px, calc(100vw - 16px));
  width: 90%;
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 0 30px rgba(56, 97, 251, 0.4);
  animation: popIn 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Simple mode hides cat image */
.coin-popup-content.coin-popup-simple .cat-popup-cat {
  display: none;
}

@media (max-height: 700px) {
  .coin-popup-content {
    max-height: calc(100vh - 80px);
  }
}

@media (max-width: 480px) {
  .coin-popup-content {
    width: 95%;
    padding: 16px;
    max-height: calc(100vh - 60px);
  }
  
  .coin-popup-content .cat-popup-cat img {
    width: clamp(190px, 70vw, 260px);
    height: clamp(180px, 28vh, 230px);
    max-width: 260px;
    max-height: 230px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  
  .coin-popup-info h3 {
    font-size: 20px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    white-space: normal;
    max-width: 100%;
    padding: 0 8px;
  }
  
  .coin-popup-ticker {
    font-size: 15px;
    letter-spacing: 1.5px;
  }
  
  .coin-popup-ca {
    padding: 14px 10px;
    font-size: 10px;
    max-width: 100%;
  }
  
  .coin-popup-ca strong {
    font-size: 11px;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
  
  .coin-action-btn {
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 12px;
  }
}

.coin-popup-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 3px solid var(--accent-blue);
}

.coin-popup-image {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid var(--accent-blue);
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.4);
  flex-shrink: 0;
}

.coin-popup-info {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.coin-popup-info h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 900;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  line-height: 1.3;
}

.coin-popup-ticker {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 3px;
  background: linear-gradient(135deg, var(--accent-blue), #7b92ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 20px rgba(56, 97, 251, 0.5);
  text-align: center;
  width: 100%;
  white-space: nowrap;
}

.coin-popup-ca {
  background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border: 2px solid var(--accent-blue);
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 97, 251, 0.2);
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.coin-popup-ca strong {
  color: var(--accent-blue);
  display: block;
  margin: 0 auto 10px auto;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(56, 97, 251, 0.5);
  text-align: center;
  width: 100%;
  white-space: nowrap;
  word-break: keep-all;
}

.coin-popup-ca code,
.coin-popup-ca {
  font-family: 'Courier New', Consolas, Monaco, monospace;
  font-size: 12px;
  color: var(--text-primary);
  word-break: break-all;
  line-height: 1.8;
  font-weight: 600;
  text-align: center;
  display: block;
  margin: 0 auto;
}

.coin-popup-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
}

.coin-action-btn {
  flex: 1;
  max-width: 180px;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-blue) 0%, #5072fb 100%);
  border: none;
  border-radius: 6px;
  color: #FFF;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.coin-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56, 97, 251, 0.4);
}

.coin-action-btn.secondary {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
}

.coin-action-btn.secondary:hover {
  border-color: var(--accent-blue);
  background: var(--bg-secondary);
}

/* Chart Section */
.chart-toggle {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.toggle-btn {
  padding: 7px 12px;
  background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  box-shadow: none;
  height: 32px;
  min-width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(131, 56, 236, 0.3);
}

.toggle-btn.active {
  background: linear-gradient(135deg, var(--accent), #6528D7);
  color: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(131, 56, 236, 0.5);
}

.timeframe-selector {
  display: flex;
  gap: 4px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}

.timeframe-btn {
  padding: 7px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.timeframe-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--accent-blue);
}

.timeframe-btn.active {
  background: var(--accent-blue);
  color: #FFFFFF;
  border-color: var(--accent-blue);
}

/* Color Picker Panel - VISIBLE by default for theme switching */
#colorPickerPanel {
  display: block;
  position: absolute;
  right: 12px;
  top: 46px;
  background: var(--bg-secondary);
  border: 1px solid var(--accent-blue);
  border-radius: 6px;
  padding: 8px;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  width: 180px;
}

/* Color Preset Buttons - Mini Version */
.color-presets-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.color-preset-mini {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.color-preset-mini:hover {
  transform: scale(1.05);
  border-color: var(--accent-blue);
  box-shadow: 0 0 8px rgba(56, 97, 251, 0.4);
}

.color-preset-mini.active {
  border-color: var(--accent-blue);
  border-width: 3px;
  box-shadow: 0 0 12px rgba(56, 97, 251, 0.6);
}

.color-preset-mini.active::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.chart-container {
  padding: 0;
  position: relative;
  height: 200px;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: block;
  min-height: 200px;
}

@media (min-width: 768px) {
  .chart-container {
    height: 200px;
    min-height: 200px;
  }
}

.chart-canvas {
  width: 100%;
  height: 200px;
  min-height: 200px;
  background: var(--bg-primary);
  border-radius: 0;
  position: relative;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (min-width: 768px) {
  .chart-canvas {
    height: 200px;
  }
}

.chart-canvas.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* Macro Market Metrics - Compact Grid */
.macro-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 3px 0 4px 0;
  padding: 0 4px;
}

@media (min-width: 768px) {
  .macro-metrics-grid {
    gap: 3px;
    margin: 2px 0 3px 0;
  }
}

.macro-metric {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.macro-metrics-grid .metric-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  font-weight: 600;
}

.macro-metrics-grid .metric-value {
  font-size: 18px;
  color: var(--accent);
  font-weight: 900;
  letter-spacing: 0.5px;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.1;
}

.volume-flow-indicator {
  font-size: 9px;
  margin: 0;
  cursor: pointer;
  display: block;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  transition: opacity 0.2s ease;
}

.metric-change {
  font-size: 9px;
  margin: 0;
  cursor: default;
  display: block;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1;
  color: var(--green);
}

.metric-change.negative {
  color: var(--red);
}

.volume-flow-indicator:hover {
  opacity: 0.8;
}

/* Stock Selector Dropdown */
.stock-selector {
  padding: 0 12px 12px 12px;
}

.stock-selector select {
  width: 100%;
  padding: 10px 14px;
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.stock-selector select:hover {
  border-color: var(--accent);
}

.stock-selector select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 97, 251, 0.1);
}

.market-timeframes-main,
.market-timeframes-stock {
  display: flex;
  gap: 6px;
  padding: 0 12px 12px 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.tf-btn {
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 32px;
}

@media (min-width: 480px) {
  .tf-btn {
    padding: 7px 14px;
  }
}

.tf-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.tf-btn.active {
  background: var(--accent-blue);
  color: #FFFFFF;
  border-color: var(--accent-blue);
}

/* Macro Chart Control Groups - Professional Horizontal Layout */
/* Macro Chart Controls - Compact, Low Profile */
.macro-chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px 8px 8px;
  margin-top: 4px;
  justify-content: center;
  align-items: center;
}

/* Control Group Container - Evenly Sized */
.control-group {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  flex: 1;
  min-width: 140px;
  max-width: 200px;
}

/* Control Buttons - Compact, Evenly Sized */
.control-btn {
  flex: 1;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: none;
  border-right: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  min-height: 32px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.control-btn:last-child {
  border-right: none;
}

.control-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.control-btn.active {
  background: var(--accent-blue);
  color: #FFFFFF;
  border-color: var(--accent-blue);
}

/* Timeframe Dropdown - Compact, Matches Box System */
.timeframe-dropdown {
  flex: 1;
  min-width: 140px;
  max-width: 200px;
  padding: 6px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  height: auto;
  min-height: 32px;
}

.timeframe-dropdown:hover {
  border-color: var(--accent-blue);
  background: var(--bg-tertiary);
}

.timeframe-dropdown:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(56, 97, 251, 0.15);
}

.timeframe-dropdown option {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 4px 8px;
}

/* Mobile responsive - stack on small screens */
@media (max-width: 600px) {
  .macro-chart-controls {
    flex-direction: column;
    gap: 8px;
  }
  
  .control-group,
  .timeframe-dropdown {
    width: 100%;
    min-width: auto;
    max-width: none;
  }
}

/* Dual Column Layout (AI + Web3) - ALWAYS Side by Side */
.dual-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .dual-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.column-box {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--glow);
}

/* AI Agent Box */
.ai-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.cat-clear-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 6px 10px;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.cat-clear-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--red);
  color: var(--red);
  transform: translateY(-50%) scale(1.1);
}

.cat-avatar-inline {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

.cat-avatar-inline img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(var(--glow));
}

.cat-title {
  flex: 1;
}

.cat-title h3 {
  font-size: 14px;
  margin: 0 0 4px 0;
}

.cat-mode {
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.cat-messages {
  flex: 1;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  overflow-y: auto;
  min-height: 100px;
  max-height: 150px;
}

.cat-msg {
  font-size: 12px;
  line-height: 1.4;
  margin-bottom: 8px;
  padding: 6px;
  background: var(--bg-secondary);
  border-radius: 6px;
}

.cat-msg strong {
  color: var(--accent);
}

.cat-input-area {
  display: flex;
  gap: 6px;
}

.cat-input-area input {
  flex: 1;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.cat-input-area input::placeholder {
  color: var(--text-secondary);
}

.cat-send {
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  box-shadow: var(--glow);
}

/* Web3 Search Box */
.web3-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-header {
  margin-bottom: 10px;
}

.search-header h3 {
  font-size: 14px;
  margin: 0;
}

.search-box {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0;
}

.search-box .input-with-clear {
  flex: 1 1 auto !important;
  min-width: 160px;
  max-width: 70%;
}

.search-box input {
  flex: 1;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 16px;
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  min-width: 160px;
}

.search-box input::placeholder {
  color: var(--text-secondary);
}

.search-btn {
  padding: 8px 12px;
  background: var(--accent);
  color: #FFFFFF;
  border: 2px solid var(--border-color);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glow);
  flex: 0 0 auto;
  min-width: 80px;
  margin-left: 8px;
  white-space: nowrap;
}

@media (max-width: 400px) {
  .search-btn {
    padding: 7px 10px;
    font-size: 11px;
  }
}

.search-results {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
  display: none; /* Hidden by default, shown when search is performed */
}

.search-results.active {
  display: block;
}

.search-hint {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  padding: 20px 0;
}

/* News Feed */
.news-feed {
  padding: 12px;
}

.news-item {
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.news-item:hover {
  transform: translateX(4px);
}

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

.news-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.news-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Project Form */
.project-form {
  padding: 12px;
}

.form-input,
.form-textarea {
  width: 100%;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  color: var(--text-primary);
  font-size: 13px;
  margin-bottom: 10px;
  outline: none;
  font-family: inherit;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-secondary);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-blue) 0%, #5072fb 100%);
  color: #ffffff;
  border: 2px solid var(--accent-blue);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(56, 97, 251, 0.4);
  transition: all 0.3s ease;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #5072fb 0%, var(--accent-blue) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(56, 97, 251, 0.6);
}

.submit-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Comment Section */
.comment-form-container {
  margin-bottom: 20px;
  padding: 12px;
  background: var(--bg-primary);
  border-radius: 8px;
}

.subscription-required-notice {
  text-align: center;
  padding: 30px 20px;
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.1) 0%, rgba(80, 114, 251, 0.05) 100%);
  border: 2px solid rgba(56, 97, 251, 0.3);
  border-radius: 8px;
}

.subscription-required-notice .gate-icon {
  font-size: 36px;
  margin-bottom: 10px;
}

.subscription-required-notice .gate-message {
  font-size: 13px;
  color: var(--text-primary);
  margin: 10px 0;
  font-weight: 600;
}

.subscription-required-notice .gate-submessage {
  font-size: 11px;
  color: var(--text-secondary);
}

.comment-form textarea {
  margin-bottom: 0;
}

.comment-form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.char-counter {
  font-size: 11px;
  color: var(--text-secondary);
}

.comment-form-footer .submit-btn {
  width: auto;
  padding: 10px 20px;
  font-size: 12px;
}

.comments-list {
  padding: 12px;
}

.comment-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

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

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-author {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-blue);
}

.comment-author.whitelisted {
  color: #00ff88;
}

.comment-author.subscriber {
  color: #ff00dd;
}

.comment-date {
  font-size: 10px;
  color: var(--text-secondary);
}

.comment-text {
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Tab Content */
.tab-content {
  padding: 12px;
  min-height: 0;
  max-width: 100vw;
  overflow-x: hidden;
}

.tab-pane {
  display: none;
}

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

/* Stats Dashboard (Analysis Tab) */
.stats-dashboard {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .stats-dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}

.widget {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--glow);
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.widget-header h3 {
  font-size: 14px;
  margin: 0;
}

.update-time {
  font-size: 10px;
  color: var(--text-secondary);
  background: var(--bg-primary);
  padding: 3px 8px;
  border-radius: 6px;
}

/* Market Cycle */
.cycle-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cycle-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cycle-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.cycle-percent {
  font-weight: bold;
}

.progress-bar {
  height: 20px;
  background: var(--bg-primary);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.progress-fill {
  height: 100%;
  transition: width 0.3s;
}

/* ETF List */
.etf-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.etf-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: var(--bg-primary);
  border-radius: 8px;
  font-size: 13px;
}

.etf-value {
  font-weight: bold;
}

.etf-value.positive {
  color: #10B981;
}

.etf-value.negative {
  color: #EF4444;
}

/* Glossary */
.glossary-header {
  margin-bottom: 16px;
}

.glossary-header h2 {
  font-size: 18px;
  margin-bottom: 12px;
}

.glossary-search {
  width: 100%;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.glossary-search::placeholder {
  color: var(--text-secondary);
}

.glossary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .glossary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.glossary-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 12px;
  box-shadow: var(--glow);
}

.glossary-card h4 {
  font-size: 14px;
  margin: 0 0 8px 0;
  color: var(--accent);
  font-weight: 700;
}

.glossary-card p {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
}

/* Alphabet Navigation */
.alphabet-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  border: 2px solid var(--border-color);
}

.alphabet-btn {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 36px;
  text-align: center;
}

.alphabet-btn:hover:not(.disabled) {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(56, 97, 251, 0.4);
}

.alphabet-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(56, 97, 251, 0.6);
}

.alphabet-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: var(--border-color);
}

/* Glossary Sections */
.glossary-section {
  margin-bottom: 24px;
}

.glossary-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.glossary-section-header h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  letter-spacing: 2px;
}

.term-count {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.glossary-section-terms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 640px) {
  .glossary-section-terms {
    grid-template-columns: repeat(2, 1fr);
  }
}

.glossary-category {
  display: inline-block;
  background: rgba(56, 97, 251, 0.2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: var(--accent);
  font-weight: 600;
}

/* Wallet & Settings */
/* Subscription Section (New Horizontal Layout) */
.subscription-section {
  margin-bottom: 32px;
}

.subscription-tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .subscription-tiers {
    grid-template-columns: 1fr;
  }
}

.tier-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.tier-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 97, 251, 0.3);
}

.tier-card.tier-popular {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(56, 97, 251, 0.2);
}

.tier-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #000;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.tier-header {
  margin-bottom: 12px;
}

.tier-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.tier-price {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent);
}

.tier-price span {
  font-size: 12px;
  font-weight: 600;
  color: #888;
}

.tier-feature {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  font-weight: 600;
}

.tier-cta {
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Payment Modal - Mobile-Safe */
.payment-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-height: 700px) {
  .payment-modal {
    align-items: flex-start;
    padding-top: 40px;
  }
}

.payment-modal-content {
  background: var(--card-bg);
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 24px;
  max-width: min(920px, calc(100vw - 24px));
  width: 95%;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

@media (max-height: 700px) {
  .payment-modal-content {
    max-height: calc(100vh - 80px);
  }
}

@media (max-width: 480px) {
  .payment-modal-content {
    width: 95%;
    padding: 20px;
    max-height: calc(100vh - 60px);
  }
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(26, 26, 26, 0.9);
  border: 2px solid var(--accent-blue);
  color: var(--accent-blue);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.modal-close:hover {
  background: var(--accent-blue);
  color: var(--bg-primary);
  transform: rotate(90deg) scale(1.1);
}

@media (max-width: 480px) {
  .modal-close {
    width: 28px;
    height: 28px;
    font-size: 16px;
    top: 6px;
    right: 6px;
  }
}

.payment-btn {
  width: 100%;
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--card-bg);
  color: var(--text-primary);
}

.payment-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 97, 251, 0.3);
}

.payment-btn.stripe-btn {
  border-color: #635BFF;
  color: #635BFF;
}

.payment-btn.stripe-btn:hover {
  background: rgba(99, 91, 255, 0.1);
  border-color: #635BFF;
}

.payment-btn.crypto-btn {
  border-color: #F7931A;
  color: #F7931A;
}

.payment-btn.crypto-btn:hover {
  background: rgba(247, 147, 26, 0.1);
  border-color: #F7931A;
}

.payment-divider {
  text-align: center;
  color: #666;
  font-size: 12px;
  margin: 15px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Pricing Section */
.pricing-section {
  margin-bottom: 32px;
}

.pricing-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 24px;
  color: var(--text-primary);
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

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

.pricing-card {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s ease;
  position: relative;
}

.pricing-card.popular {
  border-color: var(--accent);
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.3);
}

.pricing-card.current {
  border-color: #00ff00;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
}

.pricing-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--accent);
  color: #000;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.pricing-badge.current-badge {
  background: #00ff00;
}

.plan-name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.plan-price {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--accent);
}

.plan-price.free {
  color: #888;
}

.plan-interval {
  font-size: 12px;
  color: #888;
  margin-bottom: 16px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.plan-features li {
  padding: 8px 0;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.plan-features li:before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}

.plan-cta {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.plan-cta.stripe {
  background: var(--accent);
  color: #000;
}

.plan-cta.stripe:hover {
  background: #5580ff;
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.5);
}

.plan-cta.coinbase {
  background: #1652f0;
  color: #fff;
}

.plan-cta.coinbase:hover {
  background: #2968ff;
  box-shadow: 0 0 20px rgba(22, 82, 240, 0.5);
}

.plan-cta.current {
  background: #2a2a2a;
  color: #888;
  cursor: not-allowed;
}

.plan-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.payment-divider {
  text-align: center;
  color: #666;
  font-size: 11px;
  margin: 8px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Wallet Connection */
.wallet-connection {
  background: var(--card-bg);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}

.wallet-connection h3 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.wallet-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.connect-wallet-btn {
  width: 100%;
  max-width: 300px;
  padding: 14px;
  background: var(--accent);
  color: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glow);
  transition: all 0.3s ease;
}

.connect-wallet-btn:hover {
  background: #5580ff;
  box-shadow: 0 0 30px rgba(56, 97, 251, 0.6);
}

.connect-wallet-btn span {
  margin-right: 8px;
}

.wallet-note {
  margin-top: 12px;
  font-size: 11px;
  color: #666;
}

.setting-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

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

.setting-item label {
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}

.setting-item select {
  width: 100%;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
  cursor: pointer;
}

/* Persona Toggle */
.persona-toggle {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.persona-btn {
  flex: 1;
  padding: 10px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.persona-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-blue);
}

.persona-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #FFFFFF;
  font-weight: 600;
}

/* Input with Clear Button Wrapper */
.input-with-clear {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-clear input {
  flex: 1;
  padding-right: 36px;
}

.visibility-toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
  z-index: 10;
}

.visibility-toggle-btn:hover {
  background: var(--accent-blue);
  color: white;
  border-color: var(--accent-blue);
  transform: translateY(-50%) scale(1.05);
}

.clear-btn {
  position: absolute;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  line-height: 1;
  padding: 0;
}

.clear-btn:hover {
  background: var(--red);
  color: white;
  border-color: var(--red);
  transform: scale(1.1);
}

.input-with-clear input:not(:placeholder-shown) + .clear-btn,
.input-with-clear input:focus + .clear-btn {
  display: flex;
}

/* Enhanced Close Button - Circular X */
.close-btn-circle {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.close-btn-circle:hover {
  background: var(--red);
  border-color: var(--red);
  color: white;
  transform: scale(1.1) rotate(90deg);
}

/* Back Button - Circular Arrow */
.back-btn-circle {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
}

.back-btn-circle:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: white;
  transform: scale(1.1) translateX(-2px);
}

/* Admin Button - Circular Crown (Bottom-Right) */
.admin-btn-circle {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  border: 2px solid rgba(168, 85, 247, 0.5);
  color: white;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

.admin-btn-circle:hover {
  background: linear-gradient(135deg, #9333ea 0%, #6b21a8 100%);
  border-color: #a855f7;
  transform: scale(1.15);
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.6);
}

/* Gauge Component Styles */
.gauge-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  width: 100%;
  flex: 1;
  margin: 0;
  padding: 0;
  min-width: 0;
  min-height: 100px;
  overflow: visible;
}

.gauge-container canvas {
  max-width: 100%;
  width: 100%;
  height: 75px;
  margin-top: -10px;
  transform: scale(1.4);
  transform-origin: top center;
}

/* Value display above gauge - for Fear & Greed and Altcoin Season boxes */
/* Boxes 1 & 2 only - smaller font, pushed down a bit */
.metric-box-wide:nth-child(1) .gauge-value-display,
.metric-box-wide:nth-child(2) .gauge-value-display {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 4px 0 0 0;
  line-height: 1;
  padding: 0 2px;
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

/* Default gauge-value-display for boxes 3 & 4 (Market Cap/Volume) - handled separately */
.gauge-value-display {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  text-align: center;
  margin: 0;
  line-height: 1;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Fear & Greed and Altcoin Season boxes - contain the gauge inside */
.metric-box-wide:nth-child(1),
.metric-box-wide:nth-child(2) {
  overflow: hidden;
}

/* Market Cap and Volume boxes don't have gauge containers - they just use flexbox centering */
/* All content in boxes 3 and 4 is centered via justify-content: center on parent */

/* OLD gauge-value - REPLACED with gauge-value-display */
.gauge-value {
  display: none !important;
}

.gauge-subtitle {
  display: none;
}

.gauge-value-under-title {
  display: none !important;
}

.metric-icon {
  display: none;
}

.volume-bars {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  justify-content: center;
  height: 20px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  z-index: 1;
}

.vol-bar {
  width: 4px;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.vol-bar.green {
  height: 20px;
  background: var(--green);
  box-shadow: 0 0 6px rgba(22, 199, 132, 0.4);
}

.vol-bar.red {
  height: 12px;
  background: var(--red);
  box-shadow: 0 0 6px rgba(234, 57, 67, 0.4);
}

.vol-bar:nth-child(1) { height: 16px; }
.vol-bar:nth-child(2) { height: 20px; }
.vol-bar:nth-child(3) { height: 14px; }

/* UNIVERSAL POPUP CONTAINER - Mobile-Safe for ALL Popups */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Close Button for Modals */
.close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFF;
  font-size: 20px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  line-height: 1;
  padding: 0;
  font-family: Arial, sans-serif;
  content: '×';
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--accent-pink);
  transform: rotate(90deg);
  box-shadow: 0 0 15px rgba(255, 64, 129, 0.5);
}

.close-btn:active {
  transform: rotate(90deg) scale(0.9);
}

@media (max-height: 700px) {
  .modal-overlay {
    align-items: flex-start;
    padding-top: 40px;
  }
}

.gauge-popup-content {
  background: var(--bg-secondary);
  border: 3px solid var(--accent-blue);
  border-radius: 12px;
  padding: 8px;
  max-width: min(360px, calc(100vw - 16px));
  width: 90%;
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 0 30px rgba(56, 97, 251, 0.4);
  animation: popIn 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: auto;
}

.gauge-popup-cat {
  text-align: center;
  margin: 0 auto;
  width: 100%;
  padding: 6px 0;
  flex-shrink: 0;
}

.gauge-popup-cat img {
  width: clamp(110px, 30vw, 140px);
  height: auto;
  max-width: 140px;
  object-fit: contain;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: block;
  margin: 0 auto;
}

.gauge-popup-text {
  width: 100%; /* Full width of popup */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-height: 700px) {
  .gauge-popup-content {
    max-height: calc(100vh - 80px);
    margin-top: 0;
  }
}

/* V2 Features Modal */
.v2-features-content {
  background: var(--bg-secondary);
  border: 3px solid #00FFFF;
  border-radius: 12px;
  padding: 8px;
  max-width: min(360px, calc(100vw - 16px));
  width: 90%;
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
  animation: popIn 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: auto;
}

.v2-features-cat {
  text-align: center;
  margin: 0 auto 10px;
  width: 100%;
}

.v2-features-cat img {
  width: clamp(100px, 25vw, 130px);
  height: clamp(80px, 15vh, 100px);
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #00FFFF;
}

.v2-features-title {
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  background: linear-gradient(135deg, #00FFFF, var(--accent-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: 2px;
}

.v2-features-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
  margin: -5px 0 10px;
}

.v2-features-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0;
}

.v2-feature-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 255, 255, 0.05);
  border-left: 3px solid #00FFFF;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.v2-feature-item:hover {
  background: rgba(0, 255, 255, 0.1);
  transform: translateX(4px);
}

.v2-feature-item.clickable {
  cursor: pointer;
}

.v2-feature-item.clickable:hover {
  background: rgba(0, 255, 255, 0.15);
  border-left: 3px solid var(--accent-pink);
  box-shadow: 0 4px 12px rgba(0, 255, 255, 0.2);
  transform: translateX(8px);
}

.v2-feature-item.clickable:active {
  transform: translateX(6px) scale(0.98);
}

.v2-feature-icon {
  font-size: 32px;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.v2-feature-details h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.v2-feature-details p {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.4;
}

.v2-cta-box {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(56, 97, 251, 0.1));
  border: 2px solid #00FFFF;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  margin: 10px 0;
}

.v2-cta-box p {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #00FFFF;
}

/* Feature Detail Modal */
.feature-detail-content {
  background: var(--bg-secondary);
  border: 3px solid var(--accent-pink);
  border-radius: 12px;
  padding: 25px;
  max-width: min(750px, calc(100vw - 24px));
  width: 95%;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 0 40px rgba(255, 20, 147, 0.5);
  animation: popIn 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: auto;
}

.feature-detail-header {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 2px solid rgba(255, 20, 147, 0.3);
  padding-bottom: 15px;
}

.feature-detail-icon {
  font-size: 48px;
  flex-shrink: 0;
}

.feature-detail-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent-pink);
  margin: 0;
  letter-spacing: 0.5px;
  line-height: 1.3;
}

.feature-detail-body {
  flex: 1;
  overflow-y: auto;
}

.feature-detail-body p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 15px;
}

.feature-detail-body p:last-child {
  margin-bottom: 0;
}

.feature-detail-body strong {
  color: var(--text-primary);
  font-weight: 700;
}

.feature-detail-footer {
  border-top: 2px solid rgba(255, 20, 147, 0.3);
  padding-top: 12px;
}

@media (max-width: 768px) {
  .feature-detail-title {
    font-size: 17px;
  }
  
  .feature-detail-icon {
    font-size: 40px;
  }
  
  .feature-detail-body p {
    font-size: 14px;
  }
}

.v2-waitlist-section {
  background: rgba(255, 255, 255, 0.02);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.v2-waitlist-section h3 {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 8px;
  color: var(--text-primary);
  text-align: center;
}

.v2-email-input,
.v2-phone-input {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

.v2-email-input:focus,
.v2-phone-input:focus {
  outline: none;
  border-color: #00FFFF;
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.v2-sms-checkbox {
  margin-bottom: 10px;
}

.v2-submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-blue));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

.v2-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(139, 21, 56, 0.4);
}

.v2-success-msg {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #10B981;
  margin-top: 10px;
}

@media (max-width: 768px) {
  .v2-features-title {
    font-size: 22px;
  }
  
  .v2-feature-icon {
    font-size: 28px;
    width: 36px;
  }
  
  .v2-feature-details h3 {
    font-size: 14px;
  }
  
  .v2-feature-details p {
    font-size: 11px;
  }
}

/* Legal Disclaimer Modal */
.disclaimer-content {
  background: var(--bg-secondary);
  border: 3px solid #FFD700;
  border-radius: 12px;
  padding: 8px;
  max-width: min(360px, calc(100vw - 16px));
  width: 90%;
  max-height: 45vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
  animation: popIn 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: auto;
}

.disclaimer-cat {
  text-align: center;
  margin: 0 auto 10px;
  width: 100%;
}

.disclaimer-cat img {
  width: clamp(100px, 25vw, 130px);
  height: clamp(80px, 15vh, 100px);
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #FFD700;
  box-shadow: none;
}

.disclaimer-cat-quote {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(56, 97, 251, 0.1));
  border-left: 4px solid #FFD700;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
}

.disclaimer-text {
  color: var(--text-secondary);
  line-height: 1.6;
}

.disclaimer-text p {
  margin: 0 0 12px 0;
  font-size: 13px;
}

@media (max-width: 768px) {
  .disclaimer-content {
    padding: 16px;
  }
  
  .disclaimer-text h2 {
    font-size: 16px !important;
  }
  
  .disclaimer-text h3 {
    font-size: 13px !important;
  }
  
  .disclaimer-text p {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .gauge-popup-content,
  .v2-features-content,
  .disclaimer-content,
  .coin-popup-content {
    width: 95%;
    padding: 10px;
    max-height: calc(100vh - 60px);
    max-width: 90vw;
    gap: 6px;
  }
}

/* Removed gauge-popup-visual styles - no longer needed */

#gaugePopupDescription {
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
  font-size: 11px;
}

#gaugePopupValue {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 3px 0;
  text-align: center;
}

.popup-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-right: 28px;
}

.gauge-popup-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent-blue);
  text-align: center;
  margin: 0;
  text-shadow: 0 0 20px rgba(56, 97, 251, 0.5);
}

.gauge-popup-commentary {
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.1), rgba(131, 56, 236, 0.1));
  border-left: 3px solid var(--accent-blue);
  padding: 6px;
  margin: 0;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-primary);
  text-align: left;
}

.gauge-popup-commentary strong {
  color: var(--accent-blue);
  font-weight: 700;
}

.gauge-popup-description {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  white-space: pre-wrap;
}

.modal-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(26, 26, 26, 0.9);
  border: 2px solid var(--accent-blue);
  color: var(--accent-blue);
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10000;
  pointer-events: auto;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.modal-close-btn:hover {
  background: var(--accent-blue);
  color: var(--bg-primary);
  transform: rotate(90deg) scale(1.1);
}

@media (max-width: 480px) {
  .modal-close-btn {
    width: 28px;
    height: 28px;
    font-size: 16px;
    top: 6px;
    right: 6px;
  }
}

/* Desktop/Tablet Layout - More Spacious (768px and up) */
@media (min-width: 768px) {
  .metrics-section {
    padding: 12px;
  }
  
  .metrics-stack {
    gap: 12px;
    margin-bottom: 12px;
  }
  
  .metric-box-wide {
    min-height: 120px;
    padding: 8px 12px; /* Reduced top/bottom padding */
    overflow: hidden; /* Keep content inside boxes */
    box-sizing: border-box; /* Ensure padding doesn't cause overflow */
  }
  
  .action-group {
    gap: 12px;
  }
  
  .action-btn-wide {
    height: 40px;
    font-size: 12px;
  }
  
  /* Compact labels for all 4 boxes */
  .metric-label {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 0px;
    padding-top: 10px;
    letter-spacing: 1px;
    line-height: 1;
  }
  
  /* All Time High number - same size as subtitle */
  .ath-number {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 4px;
    margin-bottom: 8px;
    text-align: center;
    min-height: 16px;
    grid-row: 2;
    align-self: start;
  }
  
  /* Show desktop labels only on desktop */
  .metric-label-mobile {
    display: none;
  }
  
  .metric-label-desktop {
    display: block;
  }
  
  /* CRITICAL FIX: Gauge values under titles - COMPLETELY HIDDEN */
  .metrics-stack .metric-box-wide .gauge-value-under-title {
    position: static !important;
    transform: none !important;
    display: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-align: center !important;
    z-index: 2 !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Gauge container gets top margin when value is under title */
  .metrics-stack .metric-box-wide .gauge-value-under-title + .gauge-container {
    margin-top: 0 !important;
    flex: 1;
  }
  
  /* Fear & Greed - DOWN 40px */
  .metrics-stack .metric-box-wide:nth-child(1) .gauge-value-under-title {
    margin-top: 40px !important;
    font-size: 28px !important;
  }
  
  /* Altcoin Season - DOWN 40px */
  .metrics-stack .metric-box-wide:nth-child(2) .gauge-value-under-title {
    margin-top: 40px !important;
    font-size: 28px !important;
  }
  
  /* Market Cap and Volume - dollar values centered at midpoint */
  .metric-box-wide:nth-child(3) .gauge-value-display,
  .metric-box-wide:nth-child(4) .gauge-value-display {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    text-align: center !important;
    color: #00FF41 !important;
  }
  
  /* Market Cap & Volume Change % display */
  .metric-change {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 0 0;
    letter-spacing: 0.5px;
    flex-shrink: 0;
  }
  
  /* Volume Inflow/Outflow container */
  .volume-inflow-outflow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    margin: 0;
    flex-shrink: 0;
  }
  
  /* Volume Flow Indicator */
  .volume-flow-indicator {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    opacity: 0.8;
    margin-top: 0px; /* Removed top margin to keep everything compact */
  }
  
  /* CRITICAL FIX: Market Cap ATH tiny text */
  .metrics-stack .metric-box-wide:nth-of-type(3) .ath-number {
    font-size: 9px !important;
    font-weight: 600 !important;
    opacity: 0.7 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 4px 0 0 0 !important;
    color: #888 !important;
    display: block;
    height: 12px;
  }
  
  /* Ensure Market Cap gauge container aligns with Volume */
  .metric-box-wide:nth-child(3) .gauge-container {
    position: relative;
    height: 100%;
  }
  
  .gauge-subtitle {
    font-size: 9px; /* Small subtitles above gauges */
    font-weight: 600;
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-secondary);
  }
  
  .metric-subtitle {
    font-size: 10px; /* Smaller for CAP/VOL boxes */
    font-weight: 400;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
  }
  
  /* Inflow/Outflow stacked container */
  .inflow-outflow-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    margin-top: 4px;
    margin-bottom: 8px;
    min-height: 16px;
    grid-row: 2;
    align-self: start;
  }
  
  .inflow-text,
  .outflow-text {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
  }
  
  .inflow-text span,
  .outflow-text span {
    font-weight: 700;
  }
  
  .gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    padding-bottom: 4px;
    position: relative; /* For absolute positioning of values */
    gap: 0;
  }
  
  /* Center content only for Market Cap and Volume gauge containers */
  .metric-box-wide:nth-child(3) .gauge-container,
  .metric-box-wide:nth-child(4) .gauge-container {
    justify-content: center;
  }
  
  .gauge-container canvas {
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    margin-bottom: 0px;
    display: block;
  }
  
  /* HIDE volume bars on desktop */
  .volume-bars {
    display: none;
  }
}

/* Mobile Layout - Ultra Compact Wrap (below 768px) */
@media (max-width: 767px) {
  .metrics-section {
    padding: 4px;
  }
  
  .metrics-stack {
    gap: 4px;
    margin-bottom: 4px;
    max-width: 100%;
    overflow: hidden;
  }
  
  .metric-box-wide {
    padding: 4px 2px;
    min-width: 0; /* Prevent overflow */
    max-width: 100%;
  }
  
  /* Show mobile labels only on mobile */
  .metric-label-mobile {
    display: block;
  }
  
  .metric-label-desktop {
    display: none;
  }
  
  .metric-label {
    font-size: 7px;
    margin-bottom: 2px;
    line-height: 1.1;
    padding-top: 0px;
  }
  
  /* Volume box label specifically - even smaller */
  .metric-box-wide:nth-child(4) .metric-label {
    font-size: 6px !important;
  }
  
  .metric-box-wide canvas {
    max-width: 100%;
    height: auto;
  }
  
  .gauge-value {
    font-size: 16px; /* Smaller base size on mobile */
    margin-top: 6px; /* Tight spacing from title on mobile */
    font-weight: 900;
    line-height: 1.1;
  }
  
  /* Market Cap and Volume - dollar values centered at midpoint on mobile */
  .metric-box-wide:nth-child(3) .gauge-value-display,
  .metric-box-wide:nth-child(4) .gauge-value-display {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1 !important;
    color: #00FF41 !important;
  }
  
  /* Market Cap & Volume change indicators on mobile - much smaller */
  .metric-change {
    font-size: 8px !important;
    margin: 2px 0 !important;
    line-height: 1.2 !important;
  }
  
  /* Volume flow indicator on mobile - much smaller */
  .volume-flow-indicator {
    font-size: 7px !important;
    margin-top: 1px !important;
    line-height: 1.2 !important;
    padding: 1px 3px !important;
  }
  
  /* Ensure 4th box doesn't get extra width */
  .metric-box-wide:nth-child(4) {
    flex: 1;
    min-width: 0;
  }
  
  .gauge-subtitle {
    font-size: 6px;
    margin-top: 0px;
  }
  
  /* Fix ATH and Inflow/Outflow on mobile */
  .ath-number {
    font-size: 7px !important;
    margin-top: 1px;
  }
  
  .inflow-outflow-container {
    font-size: 6px !important;
    gap: 0px;
    margin-top: 2px;
    margin-bottom: 6px;
  }
  
  .inflow-text,
  .outflow-text {
    font-size: 6px !important;
  }
  
  .action-group {
    gap: 4px;
  }
  
  .action-btn-wide {
    height: 38px;
    font-size: 8px;
    padding: 0 4px;
  }
  
  /* Removed gauge visual canvas - no longer needed */
}

/* Full-Screen Analysis Modal - Mobile-Safe */
.analysis-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.analysis-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: var(--bg-primary);
  min-height: 100vh;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  .analysis-container {
    padding: 12px;
  }
}

.analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--border-color);
}

.analysis-title-section {
  flex: 1;
}

.analysis-title-section h2 {
  margin: 0 0 8px 0;
  font-size: 24px;
  color: var(--text-primary);
}

.signal-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.signal-badge.buy {
  background: var(--green);
  color: #000;
}

.signal-badge.sell {
  background: var(--red);
  color: #fff;
}

.signal-badge.hold {
  background: #FFB020;
  color: #000;
}

.analysis-price-section {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.price-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}

.price-main #analysisPrice {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
}

.price-change {
  font-size: 18px;
  font-weight: 600;
}

.price-change.positive {
  color: var(--green);
}

.price-change.negative {
  color: var(--red);
}

.price-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 12px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-item .metric-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-item .metric-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.analysis-chart-section,
.analysis-indicators-section,
.analysis-ai-section {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.analysis-news-section {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.analysis-news-section h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--text-primary);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.news-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.news-item:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 0 10px rgba(56, 97, 251, 0.3);
}

.news-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
}

.news-item-source {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  gap: 8px;
  align-items: center;
}

.news-item-date {
  color: #888;
}

.loading-text {
  text-align: center;
  color: var(--text-secondary);
  font-size: 12px;
  padding: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   SOLANA ON-CHAIN DETAILS SECTION
   ═══════════════════════════════════════════════════════════════ */

#solanaSectionWrapper {
  margin-bottom: 20px;
}

.solana-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 15px;
}

.solana-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.solana-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.solana-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 600;
}

.solana-holders-section h4 {
  color: var(--accent-blue);
  font-size: 14px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.solana-holders-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.solana-holder-item {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 12px;
}

.holder-rank {
  color: var(--text-secondary);
  font-weight: 600;
}

.holder-address {
  color: var(--accent-blue);
  font-family: monospace;
  cursor: help;
}

.holder-balance {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

.holder-percentage {
  color: var(--green);
  font-weight: 700;
  text-align: right;
  min-width: 55px;
}

/* ═══════════════════════════════════════════════════════════════
   ANALYSIS NOTEPAD SECTION (Premium Feature)
   ═══════════════════════════════════════════════════════════════ */

.analysis-notepad-section {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
}

.notepad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
}

.notepad-header:hover {
  background: var(--bg-primary);
}

.notepad-header h3 {
  margin: 0;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.notepad-toggle-icon {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.notepad-content {
  padding: 16px;
}

.notepad-premium-gate {
  text-align: center;
  padding: 20px;
}

.notepad-premium-gate p {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 12px 0 16px 0;
  line-height: 1.5;
}

.upgrade-btn-small {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-hover) 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.upgrade-btn-small:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(56, 97, 251, 0.4);
}

.notepad-textarea {
  width: 100%;
  min-height: 150px;
  max-height: 300px;
  resize: vertical;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 10px;
  transition: border-color 0.2s ease;
}

.notepad-textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(56, 97, 251, 0.1);
}

.notepad-textarea::placeholder {
  color: var(--text-dim);
}

.notepad-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.notepad-info {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.char-count {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
}

.notepad-timestamp {
  font-size: 11px;
  color: #888;
  font-style: italic;
}

.notepad-actions {
  display: flex;
  gap: 8px;
}

.notepad-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.notepad-btn:hover {
  background: var(--bg-secondary);
  border-color: var(--accent-blue);
  transform: translateY(-1px);
}

.notepad-btn.danger:hover {
  background: var(--red-bg);
  border-color: var(--red);
  color: var(--red);
}

@media (max-width: 768px) {
  .notepad-footer {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .notepad-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MARKET CYCLE OUTLOOK SECTION (Premium Feature)
   ═══════════════════════════════════════════════════════════════ */

.market-cycle-section {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
}

.market-cycle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.market-cycle-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary);
}

.premium-badge-small {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #000;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.market-cycle-content {
  position: relative;
}

.cycle-signal-card {
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.1) 0%, rgba(56, 97, 251, 0.05) 100%);
  border: 2px solid var(--accent-blue);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.2);
}

.cycle-signal-card.bullish {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
  border-color: var(--green);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.cycle-signal-card.bearish {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
  border-color: var(--red);
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.cycle-signal-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.cycle-signal-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 4px;
  letter-spacing: 1px;
}

.cycle-signal-value.bullish {
  color: var(--green);
}

.cycle-signal-value.bearish {
  color: var(--red);
}

.cycle-confidence {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.cycle-indicators-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.cycle-indicator {
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.cycle-indicator:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 0 15px rgba(56, 97, 251, 0.3);
  transform: translateY(-2px);
}

.cycle-indicator-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.cycle-indicator-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cycle-indicator-signal {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}

.cycle-indicator-signal.bullish {
  background: rgba(16, 185, 129, 0.2);
  color: var(--green);
}

.cycle-indicator-signal.bearish {
  background: rgba(239, 68, 68, 0.2);
  color: var(--red);
}

.cycle-indicator-signal.neutral {
  background: rgba(136, 136, 136, 0.2);
  color: #888;
}

.cycle-explanation {
  background: var(--bg-primary);
  border-left: 4px solid var(--accent-blue);
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.cycle-updated {
  text-align: right;
  font-size: 11px;
  color: var(--text-secondary);
}

.premium-gate {
  text-align: center;
  padding: 30px 20px;
  background: var(--bg-primary);
  border: 2px dashed var(--border-color);
  border-radius: 12px;
}

.premium-gate-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.7;
}

.premium-gate h4 {
  margin: 0 0 12px 0;
  font-size: 18px;
  color: var(--text-primary);
}

.premium-gate p {
  margin: 0 0 20px 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

.upgrade-btn {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #000;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════
   END MARKET CYCLE OUTLOOK SECTION
   ═══════════════════════════════════════════════════════════════ */

.chart-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.chart-header-row h3 {
  margin: 0;
  font-size: 16px;
}

.analysis-indicators-section h3,
.analysis-ai-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
}

.indicator-group {
  margin-bottom: 20px;
}

.indicator-group:last-child {
  margin-bottom: 0;
}

.indicator-group h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.indicator-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.indicator-item {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.indicator-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.indicator-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}

.cross-signal {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.cross-signal.golden {
  background: rgba(16, 185, 129, 0.2);
  border: 2px solid var(--green);
  color: var(--green);
}

.cross-signal.death {
  background: rgba(234, 57, 67, 0.2);
  border: 2px solid var(--red);
  color: var(--red);
}

.ai-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-cat-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}

.ai-header h3 {
  margin: 0;
}

.ai-analysis-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  padding: 12px;
  background: var(--bg-primary);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

@media (max-width: 600px) {
  .analysis-container {
    padding: 12px;
  }
  
  .analysis-title-section h2 {
    font-size: 20px;
  }
  
  .price-main #analysisPrice {
    font-size: 24px;
  }
  
  .price-change {
    font-size: 16px;
  }
  
  .indicator-grid {
    grid-template-columns: 1fr;
  }
}

/* Fullscreen Chart Overlay */
.fullscreen-chart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-primary);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fullscreen-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--accent-blue);
}

.fullscreen-chart-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.fullscreen-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.fullscreen-close-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #FFF;
  transform: rotate(90deg);
}

.fullscreen-chart-controls {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}

.fullscreen-control-group {
  display: flex;
  gap: 4px;
}

.fullscreen-control-btn {
  padding: 8px 14px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  min-width: 90px;
  text-align: center;
}

.fullscreen-control-btn:hover {
  border-color: var(--accent-blue);
  box-shadow: 0 0 10px rgba(56, 97, 251, 0.3);
}

.fullscreen-control-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #FFF;
}

.fullscreen-control-btn.live-btn.active {
  background: var(--red);
  border-color: var(--red);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.fullscreen-color-picker {
  padding: 12px 16px;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}

.color-picker-header {
  margin-bottom: 8px;
  padding: 6px;
  background: rgba(56, 97, 251, 0.1);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.color-picker-close-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.color-picker-close-btn:hover {
  background: var(--red);
  border-color: var(--red);
  color: #FFF;
  transform: translateY(-50%) rotate(90deg);
}

.color-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.color-preset-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 10px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.color-preset-btn:hover {
  border-color: var(--accent-blue);
}

.color-preset-btn.active {
  border-color: var(--green);
  box-shadow: 0 0 10px rgba(22, 199, 132, 0.3);
}

.preset-gradients {
  display: flex;
  gap: 4px;
  width: 100%;
}

.preset-gradient {
  flex: 1;
  height: 18px;
  border-radius: 3px;
}

.preset-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-primary);
  width: 100%;
  text-align: center;
}

.custom-color-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border-color);
}

.custom-color-picker > label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.custom-color-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.custom-color-section label {
  display: block;
  font-size: 11px;
  font-weight: 600;
}

.custom-color-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.custom-color-inputs input[type="color"] {
  width: 50px;
  height: 36px;
  border: 2px solid var(--border-color);
  border-radius: 6px;
  cursor: pointer;
}

.apply-custom-btn {
  padding: 8px 16px;
  background: var(--accent-blue);
  border: none;
  border-radius: 6px;
  color: #FFF;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.apply-custom-btn:hover {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(56, 97, 251, 0.4);
}

.fullscreen-timeframes {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
}

.fs-tf-btn {
  padding: 6px 12px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.fs-tf-btn:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}

.fs-tf-btn.active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #FFF;
}

.fullscreen-chart-container {
  flex: 1;
  overflow: hidden;
  background: var(--bg-primary);
}

/* Chart Tap-to-Expand Hint */
.chart-expand-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 8px;
  background: rgba(56, 97, 251, 0.9);
  border-radius: 4px;
  color: #FFF;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
  z-index: 100;
}

/* Coming Soon Placeholder */
.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  margin: 20px 0;
  background: var(--bg-secondary);
  border-radius: 12px;
  text-align: center;
}

.coming-soon-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent-blue);
  text-transform: uppercase;
  margin-bottom: 30px;
  text-shadow: 0 0 20px rgba(56, 97, 251, 0.5);
  white-space: pre-line;
}

.coming-soon-cat {
  max-width: 300px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-card);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .coming-soon-container {
    padding: 40px 16px;
  }
  
  .coming-soon-title {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 20px;
  }
  
  .coming-soon-cat {
    max-width: 240px;
  }
}

/* ========================================
   PORTFOLIO TAB STYLES
   ======================================== */

/* Subscription Gate */
.subscription-gate {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.gate-content {
  text-align: center;
  max-width: 500px;
}

.gate-icon {
  font-size: 64px;
  margin-bottom: 24px;
}

.gate-content h2 {
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent-blue);
  margin-bottom: 16px;
  text-shadow: var(--glow-blue);
}

.gate-message {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.6;
}

.gate-submessage {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.upgrade-btn {
  background: var(--accent-blue);
  color: #FFFFFF;
  border: none;
  padding: 14px 32px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--glow-blue);
}

.upgrade-btn:hover {
  background: var(--accent-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(56, 97, 251, 0.5);
}

/* Portfolio Content */
.portfolio-content {
  padding-bottom: 20px;
}

/* Wallet Connection Section */
.portfolio-wallet-section {
  margin-bottom: 16px;
}

.wallet-instruction {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  text-align: center;
}

.connect-wallet-btn {
  width: 100%;
  background: var(--accent-blue);
  color: #FFFFFF;
  border: 2px solid var(--accent-blue);
  padding: 16px 24px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: var(--glow-blue);
}

.connect-wallet-btn:hover {
  background: var(--accent-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 0 24px rgba(56, 97, 251, 0.5);
}

.wallet-icon {
  font-size: 24px;
}

.divider-text {
  text-align: center;
  margin: 20px 0;
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.manual-address-input {
  display: flex;
  gap: 12px;
  align-items: center;
}

.track-btn {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 2px solid var(--border-color);
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.track-btn:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  box-shadow: var(--glow-blue);
}

.wallet-note {
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}

/* Connected State */
.wallet-connected {
  margin-top: 16px;
}

.connected-info {
  background: var(--green-bg);
  border: 2px solid var(--green);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.connected-icon {
  font-size: 24px;
}

.connected-details {
  flex: 1;
}

.connected-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.connected-address {
  font-size: 14px;
  font-weight: 700;
  color: var(--green);
  font-family: 'Courier New', monospace;
}

.disconnect-btn {
  background: transparent;
  color: var(--red);
  border: 2px solid var(--red);
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.disconnect-btn:hover {
  background: var(--red);
  color: #FFFFFF;
}

/* Portfolio Stats */
.portfolio-stats {
  margin-bottom: 16px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.stat-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.stat-card:hover {
  border-color: var(--accent-blue);
  box-shadow: var(--glow-blue);
}

.stat-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-change {
  font-size: 13px;
  font-weight: 600;
}

.stat-change.positive {
  color: var(--green);
}

.stat-change.negative {
  color: var(--red);
}

/* Holdings Table */
.holdings-section {
  margin-bottom: 16px;
}

.holdings-table-wrapper {
  overflow-x: auto;
}

.holdings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.holdings-table thead {
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border-color);
}

.holdings-table th {
  padding: 12px 8px;
  text-align: left;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.holdings-table tbody tr {
  border-bottom: 1px solid var(--border-light);
  transition: background 0.2s ease;
  cursor: pointer;
}

.holdings-table tbody tr:hover {
  background: var(--bg-secondary);
}

.holdings-table td {
  padding: 14px 8px;
  color: var(--text-primary);
}

.holdings-table td:first-child {
  font-weight: 600;
}

.holdings-table .token-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.holdings-table .token-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.holdings-table .positive {
  color: var(--green);
  font-weight: 600;
}

.holdings-table .negative {
  color: var(--red);
  font-weight: 600;
}

.loading-row {
  text-align: center;
  padding: 32px !important;
  color: var(--text-dim);
}

/* DarkWave Token Section */
.darkwave-section {
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.05), rgba(56, 97, 251, 0.02));
  border: 2px solid var(--accent-blue) !important;
  margin-bottom: 16px;
}

.darkwave-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}

.darkwave-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent-blue);
}

.darkwave-title h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.darkwave-subtitle {
  font-size: 12px;
  color: var(--text-dim);
}

.darkwave-balance {
  background: var(--bg-secondary);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  margin-bottom: 20px;
}

.balance-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.balance-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent-blue);
  margin-bottom: 4px;
}

.balance-value {
  font-size: 14px;
  color: var(--text-secondary);
}

.darkwave-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.darkwave-actions .action-card {
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 10px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.darkwave-actions .action-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-3px);
  box-shadow: var(--glow-blue);
}

.action-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.action-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.action-desc {
  font-size: 11px;
  color: var(--text-dim);
}

.airdrop-banner {
  background: linear-gradient(90deg, rgba(22, 199, 132, 0.2), rgba(22, 199, 132, 0.05));
  border: 2px solid var(--green);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .stat-value {
    font-size: 18px;
  }

  .holdings-table {
    font-size: 12px;
  }

  .holdings-table th,
  .holdings-table td {
    padding: 10px 6px;
  }

  .darkwave-actions {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .action-icon {
    font-size: 28px;
  }

  .manual-address-input {
    flex-direction: column;
  }

  .track-btn {
    width: 100%;
  }

  .gate-content h2 {
    font-size: 20px;
  }

  .gate-icon {
    font-size: 48px;
  }
}

/* ========================================
   BEGINNER'S GUIDE STYLES
   ======================================== */

.guide-section {
  width: calc(100% + 24px);
  max-width: calc(100% + 24px);
  margin: 20px -12px;
  padding: 0;
}

/* Guide Cover (Book Cover) */
.guide-cover {
  position: relative;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 2px solid #00d4ff;
  border-left: none;
  border-right: none;
  border-radius: 0;
  padding: 16px 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  width: 100%;
}

.guide-cover-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.2) 0%, transparent 70%);
  pointer-events: none;
  transition: all 0.3s ease;
}

.guide-cover:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
}

.guide-cover:hover .guide-cover-glow {
  width: 200px;
  height: 200px;
}

.guide-cover-content {
  position: relative;
  z-index: 2;
}

.guide-icon {
  font-size: 32px;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.6));
}

.guide-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #00d4ff;
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.8);
  margin-bottom: 4px;
}

.guide-subtitle {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: #fff;
  margin-bottom: 6px;
}

.guide-chapters-count {
  font-size: 10px;
  color: #888;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}

.guide-read-btn {
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  color: #000;
  border: none;
  padding: 10px 24px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
}

.guide-read-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 212, 255, 0.6);
}

/* Guide Reader */
.guide-reader {
  background: #0a0a0a;
  border-radius: 12px;
  padding: 20px;
  min-height: 600px;
}

.guide-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #111;
  border-radius: 8px;
  margin-bottom: 20px;
}

.guide-close-btn {
  background: transparent;
  color: #00d4ff;
  border: 1px solid #00d4ff;
  padding: 10px 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.guide-close-btn:hover {
  background: #00d4ff;
  color: #000;
}

.guide-progress-indicator {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  color: #888;
  letter-spacing: 1px;
}

/* Chapters Menu */
.guide-chapters-menu {
  max-width: 700px;
  margin: 0 auto;
}

.chapters-menu-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #00d4ff;
  text-align: center;
  margin-bottom: 30px;
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
}

.chapters-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chapter-item {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid #333;
  border-radius: 10px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chapter-item:hover {
  border-color: #00d4ff;
  transform: translateX(5px);
  box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
}

.chapter-number {
  font-family: 'Orbitron', sans-serif;
  font-size: 10px;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.chapter-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 15px;
}

.chapter-icon {
  font-size: 32px;
  filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
}

.chapter-title-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
}

.chapter-arrow {
  font-size: 24px;
  color: #00d4ff;
  transition: all 0.3s ease;
}

.chapter-item:hover .chapter-arrow {
  transform: translateX(5px);
}

/* Chapter View */
.guide-chapter-view {
  max-width: 800px;
  margin: 0 auto;
}

.chapter-back-btn {
  background: transparent;
  color: #00d4ff;
  border: 1px solid #00d4ff;
  padding: 10px 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 30px;
  transition: all 0.3s ease;
}

.chapter-back-btn:hover {
  background: #00d4ff;
  color: #000;
}

.chapter-content {
  background: #0f0f0f;
  border-radius: 12px;
  padding: 40px;
  margin-bottom: 30px;
  line-height: 1.8;
  max-height: 70vh;
  overflow-y: auto;
}

.chapter-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 2px solid #222;
}

.chapter-icon-large {
  font-size: 60px;
  margin-bottom: 15px;
  filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.6));
}

.chapter-title-main {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  color: #888;
  margin-bottom: 10px;
}

.chapter-title-sub {
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #00d4ff;
  text-shadow: 0 0 15px rgba(0, 212, 255, 0.6);
}

.chapter-body {
  color: #ddd;
  font-size: 15px;
}

/* Content Styling */
.content-h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #00d4ff;
  margin-top: 40px;
  margin-bottom: 20px;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.content-h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  margin-top: 30px;
  margin-bottom: 15px;
}

.content-p {
  margin-bottom: 15px;
  line-height: 1.8;
}

.content-ul, .content-checklist, .content-crosslist, .content-warnlist {
  margin: 20px 0 20px 20px;
  list-style: none;
}

.content-li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.content-li::before {
  content: "•";
  color: #00d4ff;
  font-weight: bold;
  position: absolute;
  left: 0;
}

.content-check, .content-cross, .content-warn {
  margin-bottom: 10px;
  padding-left: 5px;
}

.content-check {
  color: #00ff88;
}

.content-cross {
  color: #ff3366;
}

.content-warn {
  color: #ffaa00;
}

.content-code {
  background: #1a1a1a;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: #00d4ff;
  border: 1px solid #333;
}

.content-example, .content-strategy, .content-pros, .content-cons {
  color: #00d4ff;
  font-weight: 700;
}

/* Chapter Navigation */
.chapter-navigation {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 30px;
}

.nav-prev-btn, .nav-next-btn {
  flex: 1;
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  color: #000;
  border: none;
  padding: 15px 30px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.nav-prev-btn:hover, .nav-next-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
}

.nav-prev-btn {
  background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
  color: #00d4ff;
}

/* Section Divider */
.section-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #00d4ff 50%, transparent 100%);
  margin: 40px 0;
  opacity: 0.3;
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .guide-cover {
    padding: 40px 20px;
    min-height: 350px;
  }

  .guide-icon {
    font-size: 60px;
  }

  .guide-title {
    font-size: 24px;
    letter-spacing: 2px;
  }

  .guide-subtitle {
    font-size: 12px;
  }

  .guide-read-btn {
    padding: 12px 30px;
    font-size: 12px;
  }

  .chapter-content {
    padding: 25px;
  }

  .chapter-icon-large {
    font-size: 40px;
  }

  .chapter-title-sub {
    font-size: 20px;
  }

  .content-h2 {
    font-size: 18px;
  }

  .content-h3 {
    font-size: 16px;
  }

  .chapter-body {
    font-size: 14px;
  }

  .chapter-navigation {
    flex-direction: column;
  }
}

/* ===========================================
   FEATURE LIST MARKETING BOX
   =========================================== */

.features-widget {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-card);
}

.feature-section {
  margin-bottom: 8px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 8px 0;
  padding-left: 0px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.feature-list li:last-child {
  border-bottom: none;
}

.feature-list li strong {
  color: var(--text-primary);
  font-weight: 600;
}

.feature-list.future-features li {
  color: #666;
}

.feature-list.future-features li strong {
  color: #888;
}

/* ===========================================
   STAKING TAB - V2 ECOSYSTEM
   =========================================== */

/* V2 Lock Overlay - Now a proper landing page */
.v2-lock-overlay {
  position: static;
  display: block;
  width: 100%;
  background: var(--bg-primary);
  padding: 30px 15px;
  margin: 0;
  overflow: visible;
  min-height: auto;
  animation: none;
}

.v2-lock-content {
  text-align: center;
  max-width: 100%;
  width: 100%;
  animation: none;
  margin: 0 auto;
  max-height: none;
  overflow-y: visible;
  padding: 30px 15px;
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* Side-by-side staking layout */
.v2-lock-content.staking-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  padding: 40px 30px;
}

.staking-left-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.staking-right-col {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1024px) {
  .v2-lock-content.staking-side-by-side {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .v2-lock-overlay {
    padding: 20px 10px;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
  }
  
  .v2-lock-content.staking-side-by-side {
    padding: 20px 15px;
    gap: 20px;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .v2-lock-content h2 {
    font-size: 22px !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  .staking-left-col,
  .staking-right-col {
    max-width: 100%;
    overflow: hidden;
  }
  
  .staking-right-col .preview-item {
    padding: 10px;
  }
  
  .staking-right-col .preview-item span {
    font-size: 12px !important;
  }
  
  .staking-right-col .preview-item .preview-icon {
    font-size: 16px !important;
  }
}

@media (max-width: 400px) {
  .v2-lock-overlay {
    padding: 15px 8px;
  }
  
  .v2-lock-content.staking-side-by-side {
    padding: 15px 10px;
    gap: 15px;
  }
  
  .v2-lock-content h2 {
    font-size: 18px !important;
    letter-spacing: 0.5px;
  }
  
  .v2-lock-icon {
    font-size: 40px;
  }
  
  .v2-upgrade-btn,
  .v2-dev-preview-btn {
    font-size: 12px !important;
    padding: 12px 10px !important;
  }
}

.v2-lock-close-btn {
  position: fixed;
  top: 75px;
  right: 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--text-primary);
  font-size: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 300;
  line-height: 1;
  padding: 0;
}

.v2-lock-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--accent-pink);
  color: var(--accent-pink);
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 20, 147, 0.5);
}

.v2-lock-icon {
  font-size: 60px;
  margin-bottom: 20px;
  animation: none;
}

.v2-lock-content h2 {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #00FF41;
  margin-bottom: 15px;
}

.v2-lock-date {
  font-size: 16px;
  font-weight: 700;
  color: #3861FB;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.v2-lock-message {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 30px;
}

.v2-lock-message strong {
  color: var(--text-primary);
  font-weight: 700;
}

.v2-feature-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.preview-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.preview-icon {
  font-size: 24px;
}

.v2-upgrade-btn {
  background: linear-gradient(135deg, var(--accent-pink), #FF1493);
  color: white;
  border: none;
  padding: 18px 40px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.v2-upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 20, 147, 0.4);
}

.v2-dev-preview-btn {
  background: linear-gradient(135deg, #00FFFF, #0088FF);
  color: black;
  border: none;
  padding: 18px 40px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 15px;
}

.v2-dev-preview-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5);
  background: linear-gradient(135deg, #0088FF, #00FFFF);
}

/* Staking Content (fully visible, locked by V2 overlay gate) */
.staking-content {
  filter: blur(0px);
  opacity: 1;
  pointer-events: auto;
}

/* When unlocked (for V2 launch) */
.v2-lock-overlay.hidden {
  display: none;
}

.v2-lock-overlay.hidden + .staking-content {
  filter: blur(0px);
  opacity: 1;
  pointer-events: all;
}

/* Staking Stats Grid */
.staking-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 25px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
}

.stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 10px;
  font-weight: 600;
}

.stat-value {
  font-size: 24px;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.stat-subvalue {
  font-size: 13px;
  color: var(--text-secondary);
}

/* Staking Pools Grid */
.staking-pools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
  margin-bottom: 30px;
}

.staking-pool-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.staking-pool-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent-pink);
  box-shadow: 0 10px 30px rgba(139, 21, 56, 0.3);
}

.staking-pool-card.diamond {
  border: 2px solid #FFD700;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
}

.pool-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.pool-title {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
}

.pool-badge {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.pool-badge.popular {
  background: linear-gradient(135deg, #FF6B6B, #EE5A24);
  color: white;
}

.pool-badge.hot {
  background: linear-gradient(135deg, #FFA502, #FF6348);
  color: white;
  animation: pulse 2s infinite;
}

.pool-badge.diamond {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  font-weight: 900;
}

.pool-apy {
  font-size: 36px;
  font-weight: 900;
  color: var(--text-green);
  text-align: center;
  margin: 20px 0;
  text-shadow: 0 0 20px rgba(0, 255, 127, 0.3);
}

.pool-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.pool-detail-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.detail-label {
  color: var(--text-dim);
  font-weight: 600;
}

.detail-value {
  color: var(--text-primary);
  font-weight: 700;
}

.stake-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--accent-pink), #C41E3A);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.stake-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(139, 21, 56, 0.5);
}

.stake-btn.diamond-btn {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
}

.stake-btn.diamond-btn:hover {
  box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
}

/* Staking Bonuses Section */
.staking-bonuses-section {
  margin-top: 30px;
}

.staking-bonuses-section h3 {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 15px;
  text-align: center;
}

.bonuses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.bonus-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.bonus-card:hover {
  border-color: var(--accent-pink);
  transform: translateY(-3px);
}

.bonus-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.bonus-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.bonus-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Community Staking Section */
.community-staking-section {
  margin-top: 30px;
}

.no-pools-message {
  text-align: center;
  padding: 50px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  margin-bottom: 25px;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.no-pools-message h3 {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.no-pools-message p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 10px;
}

.empty-hint {
  color: var(--accent-pink) !important;
  font-weight: 600;
}

/* Community Pool Cards */
.community-pools-preview {
  margin-top: 25px;
}

.community-pool-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.community-pool-card.example {
  opacity: 0.6;
  border-style: dashed;
}

.pool-token-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.token-logo-placeholder {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.token-details {
  flex: 1;
}

.token-name {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}

.token-ticker {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
}

.pool-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 15px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.pool-stat {
  text-align: center;
}

.pool-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 5px;
  font-weight: 600;
}

.pool-stat-value {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-primary);
}

.community-stake-btn {
  background: linear-gradient(135deg, #667EEA, #764BA2);
}

.community-stake-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Airdrop Checker Section */
.airdrop-checker-section {
  margin-top: 30px;
}

.airdrop-phases {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 25px;
}

.airdrop-phase-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease;
}

.airdrop-phase-card:hover {
  border-color: var(--accent-pink);
  transform: translateY(-3px);
}

.phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}

.phase-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.phase-badge {
  font-size: 11px;
  padding: 5px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.1);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.phase-badge.active {
  background: linear-gradient(135deg, var(--text-green), #27AE60);
  color: white;
  animation: pulse 2s infinite;
}

.phase-rewards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.reward-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.reward-check {
  color: var(--text-green);
  font-size: 16px;
  font-weight: 900;
}

.reward-item strong {
  color: var(--accent-pink);
  font-weight: 700;
}

.phase-eligibility {
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.eligibility-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

.eligibility-status.pending {
  background: rgba(255, 165, 0, 0.1);
  color: #FFA500;
}

.eligibility-status.eligible {
  background: rgba(0, 255, 127, 0.1);
  color: var(--text-green);
}

.status-icon {
  font-size: 18px;
}

/* Airdrop Info Box */
.airdrop-info-box {
  background: rgba(0, 191, 255, 0.1);
  border: 1px solid rgba(0, 191, 255, 0.3);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.info-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.info-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.info-text strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Marketing Hero Section */
.staking-hero {
  background: linear-gradient(135deg, rgba(139, 21, 56, 0.2), rgba(255, 20, 147, 0.1));
  border: 2px solid var(--accent-pink);
  padding: 30px !important;
  margin-bottom: 25px;
}

.staking-hero-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
  text-align: center;
  margin-bottom: 15px;
  color: var(--text-primary);
  text-shadow: 0 0 20px rgba(255, 20, 147, 0.5);
}

.staking-hero-subtitle {
  font-size: 16px;
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: 30px;
  line-height: 1.6;
}

.hero-value-props {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 25px;
}

.value-prop-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.value-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.value-text {
  font-size: 14px;
  line-height: 1.6;
}

.value-text strong {
  color: var(--accent-pink);
  font-weight: 900;
}

.hero-cta-box {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.1));
  border: 2px solid #FFD700;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.hero-cta-text {
  font-size: 14px;
  margin-bottom: 15px;
  color: var(--text-primary);
}

.hero-cta-text strong {
  color: #FFD700;
  font-weight: 900;
}

.hero-reserve-btn {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  border: none;
  padding: 18px 40px;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-reserve-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5);
}

/* Why DarkWave Wins Section */
.why-darkwave-wins {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 25px;
}

.why-darkwave-wins h2 {
  text-align: center;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 25px;
  color: var(--accent-pink);
}

.wins-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

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

.win-card-compact {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.win-card-compact:hover {
  border-color: var(--accent-pink);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(139, 21, 56, 0.3);
}

.win-card-compact .win-icon {
  font-size: 28px;
  margin-bottom: 6px;
}

.win-card-compact .win-title {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.win-card-compact .win-cta {
  font-size: 9px;
  color: var(--accent-blue);
  font-weight: 700;
}

.win-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  transition: all 0.3s ease;
}

.win-card:hover {
  border-color: var(--accent-pink);
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(139, 21, 56, 0.3);
}

.win-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.win-title {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.win-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Pool Marketing Elements */
.pool-tagline {
  font-size: 14px;
  font-style: italic;
  color: var(--text-green);
  text-align: center;
  margin-bottom: 15px;
  font-weight: 600;
}

.pool-example-earnings {
  background: rgba(0, 255, 127, 0.05);
  border: 1px solid rgba(0, 255, 127, 0.2);
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
}

.example-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-green);
  font-weight: 900;
  margin-bottom: 10px;
}

.example-calc {
  font-size: 12px;
  padding: 6px 0;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.example-calc:last-child {
  border-bottom: none;
}

.example-calc.bonus-highlight {
  color: #FFD700;
  font-weight: 900;
  font-size: 13px;
}

.pool-who-for {
  background: rgba(0, 191, 255, 0.05);
  border-left: 3px solid #00BFFF;
  padding: 12px;
  margin: 15px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pool-who-for strong {
  color: #00BFFF;
  font-weight: 700;
}

.pool-how-it-works {
  background: rgba(255, 165, 0, 0.05);
  border-left: 3px solid #FFA500;
  padding: 12px;
  margin: 15px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.pool-how-it-works strong {
  color: #FFA500;
  font-weight: 700;
}

.pool-bonus-tag {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.1));
  border: 1px solid #FFD700;
  border-radius: 8px;
  padding: 12px;
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 12px;
  font-weight: 700;
  color: #FFD700;
  text-align: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .staking-hero-title {
    font-size: 24px;
  }
  
  .staking-hero-subtitle {
    font-size: 14px;
  }
  
  .wins-grid {
    grid-template-columns: 1fr;
  }
  
  .hero-value-props {
    gap: 12px;
  }
  
  .value-icon {
    font-size: 24px;
  }
  
  .value-text {
    font-size: 12px;
  }
  .v2-lock-content h2 {
    font-size: 22px;
  }
  
  .v2-lock-date {
    font-size: 14px;
  }
  
  .v2-lock-message {
    font-size: 14px;
  }
  
  .staking-pools-grid {
    grid-template-columns: 1fr;
  }
  
  .bonuses-grid {
    grid-template-columns: 1fr;
  }
  
  .pool-apy {
    font-size: 28px;
  }
  
  .phase-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========================================
   ACTIVE STAKING DASHBOARD
   ======================================== */

.active-staking-dashboard {
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.05) 0%, rgba(0, 0, 0, 0.95) 100%);
  border: 1px solid rgba(56, 97, 251, 0.3);
  padding: 14px;
  margin-bottom: 16px;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-header h2 {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #fff;
  text-shadow: 0 0 10px rgba(56, 97, 251, 0.6);
  margin: 0;
}

.dashboard-refresh {
  display: flex;
  align-items: center;
  gap: 8px;
}

.refresh-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.refresh-btn {
  background: rgba(56, 97, 251, 0.15);
  border: 1px solid rgba(56, 97, 251, 0.3);
  color: #3861FB;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

.refresh-btn:hover {
  background: rgba(56, 97, 251, 0.25);
  transform: rotate(90deg);
}

/* Pool Tier Badge with Gradients */
.active-pool-tier {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 10px;
  margin-bottom: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.active-pool-tier.bronze {
  background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
  border: 2px solid #A78BFA;
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}

.active-pool-tier.silver {
  background: linear-gradient(135deg, #94A3B8 0%, #64748B 100%);
  border: 2px solid #94A3B8;
  box-shadow: 0 4px 12px rgba(148, 163, 184, 0.3);
}

.active-pool-tier.gold {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border: 2px solid #FFD700;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

/* V2 Checklist Styles */
.v2-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 0;
  color: #e0e0e0;
  transition: color 0.2s;
}

.v2-checklist label:hover {
  color: #fff;
}

.v2-check {
  width: 16px;
  height: 16px;
  accent-color: #10b981;
  cursor: pointer;
  flex-shrink: 0;
}

.v2-check:checked + span,
.v2-checklist label:has(.v2-check:checked) {
  color: #888;
  text-decoration: line-through;
}

.v2-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.active-pool-tier.platinum {
  background: linear-gradient(135deg, #E5E4E2 0%, #B9F2FF 100%);
  border: 2px solid #E5E4E2;
  box-shadow: 0 4px 12px rgba(229, 228, 226, 0.5);
  animation: platinum-glow 3s ease-in-out infinite;
}

@keyframes platinum-glow {
  0%, 100% { box-shadow: 0 4px 12px rgba(229, 228, 226, 0.5); }
  50% { box-shadow: 0 4px 20px rgba(185, 242, 255, 0.8); }
}

.tier-icon {
  font-size: 28px;
}

.tier-name {
  font-size: 18px;
  color: #000;
}

.tier-apy {
  font-size: 16px;
  color: #000;
  opacity: 0.8;
}

/* Dashboard Metrics Grid */
.dashboard-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}

.dashboard-metric-card {
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  transition: all 0.2s ease;
}

.dashboard-metric-card.highlight {
  background: rgba(56, 97, 251, 0.1);
  border-color: rgba(56, 97, 251, 0.4);
}

.dashboard-metric-card:hover {
  border-color: rgba(56, 97, 251, 0.6);
  transform: translateY(-2px);
}

.metric-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.dashboard-metric-card .metric-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
  font-weight: 600;
}

.dashboard-metric-card .metric-value {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.metric-subvalue {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
}

/* Advanced Analytics */
.dashboard-analytics {
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.dashboard-analytics h3 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.analytics-card {
  background: rgba(30, 30, 30, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.analytics-card.countdown {
  background: rgba(56, 97, 251, 0.08);
  border-color: rgba(56, 97, 251, 0.3);
}

.analytics-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
  font-weight: 600;
}

.analytics-value {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.4px;
}

.analytics-value.countdown-timer {
  color: #3861FB;
  font-family: 'Courier New', monospace;
}

.utilization-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.utilization-fill {
  height: 100%;
  background: linear-gradient(90deg, #10B981 0%, #3861FB 100%);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* Compact Sections for Pools & Bonuses */
.compact-section {
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}

.compact-section h3 {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 8px 0;
}

.compact-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.compact-metric {
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px 6px;
}

.compact-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.compact-value {
  font-size: 13px;
  font-weight: 900;
  color: #fff;
}

.compact-value.positive {
  color: #34D399;
}

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

.compact-bonus {
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  padding: 8px 6px;
}

.compact-bonus .bonus-icon {
  font-size: 20px;
  margin-bottom: 4px;
}

.compact-bonus .bonus-title {
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  margin-bottom: 2px;
}

.compact-bonus .bonus-desc {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.6);
}

/* Calculator Row - Side by Side */
.calculator-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.calculator-row .dashboard-calculator:first-child h3 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.calculator-row .dashboard-calculator:first-child h3::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: var(--accent-blue);
  border-radius: 2px;
}

/* Staking Calculator (Permanent) */
.dashboard-calculator {
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 0;
}

.dashboard-calculator h3 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

.calculator-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calculator-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calculator-input-group label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  white-space: nowrap;
}

.calculator-input-group select,
.calculator-input-group input {
  flex: 1;
  background: rgba(30, 30, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.calculator-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

.calc-result-item.highlight {
  background: rgba(56, 97, 251, 0.1);
  border-color: rgba(56, 97, 251, 0.3);
}

.calc-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
}

.calc-value {
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.4px;
}

/* Reward History Chart */
.dashboard-chart-section {
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 24px;
}

.dashboard-chart-section h3 {
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: #fff;
  margin: 0 0 16px 0;
  text-transform: uppercase;
}

.chart-timeframe-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.timeframe-tab {
  flex: 1;
  background: rgba(30, 30, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.timeframe-tab:hover {
  background: rgba(56, 97, 251, 0.15);
  border-color: rgba(56, 97, 251, 0.4);
  color: #3861FB;
}

.timeframe-tab.active {
  background: rgba(56, 97, 251, 0.25);
  border-color: #3861FB;
  color: #fff;
}

.reward-chart-container {
  background: rgba(10, 10, 10, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  min-height: 200px;
}

.chart-summary {
  display: flex;
  justify-content: space-around;
  gap: 12px;
}

.summary-item {
  text-align: center;
}

.summary-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 4px;
}

.summary-value {
  font-size: 14px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
}

/* Interactive Controls */
.dashboard-controls {
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.dashboard-controls h3 {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  margin: 0 0 10px 0;
  text-transform: uppercase;
}

.controls-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.controls-row-horizontal {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.control-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 2px solid;
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}

.control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.control-btn.primary {
  background: rgba(56, 97, 251, 0.15);
  border-color: #3861FB;
  color: #3861FB;
}

.control-btn.primary:hover {
  background: rgba(56, 97, 251, 0.25);
}

.control-btn.danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: #EF4444;
  color: #EF4444;
}

.control-btn.danger:hover {
  background: rgba(239, 68, 68, 0.25);
}

.control-btn.success {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10B981;
  color: #10B981;
}

.control-btn.success:hover {
  background: rgba(16, 185, 129, 0.25);
}

.control-btn.secondary {
  background: rgba(107, 114, 128, 0.15);
  border-color: #6B7280;
  color: #9CA3AF;
}

.control-btn.secondary:hover {
  background: rgba(107, 114, 128, 0.25);
  color: #D1D5DB;
}

.control-btn.upgrade {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%);
  border-color: #8B5CF6;
  color: #A855F7;
}

.control-btn.upgrade:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
}

.btn-icon {
  font-size: 14px;
}

.btn-text {
  font-size: 10px;
}

/* Auto-Compound Banner */
.auto-compound-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
  border: 2px solid #10B981;
  border-radius: 10px;
  padding: 14px 18px;
  text-align: center;
  font-size: 13px;
  color: #10B981;
  letter-spacing: 0.5px;
  margin-top: 16px;
}

.auto-compound-banner strong {
  color: #34D399;
}

/* Responsive Adjustments */
@media (min-width: 768px) {
  .dashboard-metrics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .analytics-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  
  .controls-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  
  .control-btn {
    font-size: 12px;
  }
  
  .btn-text {
    font-size: 11px;
  }
  
  .dashboard-metric-card {
    padding: 10px;
  }
  
  .analytics-card {
    padding: 10px;
  }
  
  /* Side-by-side calculators on desktop */
  .calculator-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .controls-row-horizontal {
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  
  .compact-metrics-row {
    gap: 10px;
  }
  
  .compact-bonuses-row {
    gap: 10px;
  }
}

/* Win Detail Popup Modal */
.win-detail-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.win-detail-content {
  background: linear-gradient(135deg, #0a0a0a 0%, #141414 100%);
  border: 2px solid var(--accent-pink);
  border-radius: 12px;
  padding: 30px;
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}

.win-detail-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.win-detail-close:hover {
  opacity: 1;
}

.win-detail-content h2 {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent-pink);
  margin: 0 0 20px 0;
  text-align: center;
}

.win-detail-body p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 15px;
}

.win-detail-body p.highlight {
  color: var(--accent-blue);
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;
}

.win-detail-body p.example {
  color: #34D399;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;
}

.win-detail-body ul {
  margin: 10px 0 20px 20px;
  padding: 0;
}

.win-detail-body li {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 8px;
}

.win-detail-body strong {
  color: #fff;
  font-weight: 900;
}

@media (max-width: 480px) {
  .win-detail-content {
    padding: 20px;
    max-height: 70vh;
  }
  
  .win-detail-content h2 {
    font-size: 16px;
  }
  
  .win-detail-body p {
    font-size: 13px;
  }
  
  .win-detail-body li {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .dashboard-header h2 {
    font-size: 18px;
  }
  
  .tier-name {
    font-size: 14px;
  }
  
  .tier-apy {
    font-size: 13px;
  }
  
  .tier-icon {
    font-size: 22px;
  }
  
  .controls-grid {
    grid-template-columns: 1fr;
  }
  
  .dashboard-metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

/* Onboarding Modal Styles */
.onboarding-slide {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onboarding-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  cursor: pointer;
}

.onboarding-dot.active {
  background: #3861FB;
  box-shadow: 0 0 10px rgba(56, 97, 251, 0.6);
  width: 12px;
  height: 12px;
}

.onboarding-dot:hover {
  background: rgba(56, 97, 251, 0.5);
}

@media (max-width: 480px) {
  #onboardingModal .modal-content {
    max-width: 95%;
    padding: 20px;
  }
  
  #onboardingModal h2 {
    font-size: 18px !important;
  }
  
  #onboardingModal h3 {
    font-size: 13px !important;
  }
  
  #onboardingModal p, #onboardingModal li {
    font-size: 13px !important;
  }
  
  #onboardingModal .btn {
    padding: 10px 20px !important;
    font-size: 13px !important;
  }
}

/* ========================================
   LANDSCAPE FULLSCREEN CHART
   ======================================== */

.landscape-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000000;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.landscape-container {
  display: flex;
  width: 100%;
  height: 100%;
  background: #000000;
}

/* Chart Section - 2/3 width */
.landscape-chart-section {
  flex: 2;
  position: relative;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.landscape-chart-container {
  width: 100%;
  height: 100%;
  touch-action: none; /* Allow pinch-to-zoom */
}

/* Exit Button */
.landscape-exit-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  z-index: 100;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.landscape-exit-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.landscape-exit-btn:active {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.98);
}

/* Zoom Indicator */
.landscape-zoom-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: rgba(56, 97, 251, 0.9);
  border-radius: 6px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 100;
}

/* Metrics Sidebar - 1/3 width */
.landscape-metrics-section {
  flex: 1;
  background: #0D0D0D;
  border-left: 1px solid #1A1A1A;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
}

.landscape-metrics-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #1A1A1A;
}

.landscape-metrics-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.landscape-price {
  font-size: 24px;
  font-weight: 700;
  color: #3861FB;
}

.landscape-metrics-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.landscape-metric-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.landscape-metric-group label {
  font-size: 13px;
  color: #888888;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.landscape-metric-group span {
  font-size: 15px;
  color: #FFFFFF;
  font-weight: 600;
}

.landscape-metric-group span.positive {
  color: #10B981;
}

.landscape-metric-group span.negative {
  color: #EF4444;
}

.landscape-metric-divider {
  height: 1px;
  background: #1A1A1A;
  margin: 16px 0;
}

/* Landscape Orientation Media Query */
@media screen and (orientation: landscape) {
  .landscape-fullscreen-overlay {
    /* Full utilization in landscape */
  }
}

/* Portrait fallback - still show but optimized */
@media screen and (orientation: portrait) {
  .landscape-container {
    flex-direction: column;
  }
  
  .landscape-chart-section {
    flex: 3;
  }
  
  .landscape-metrics-section {
    flex: 1;
    border-left: none;
    border-top: 1px solid #1A1A1A;
    max-height: 30vh;
  }
}

/* Chart Tap Indicator */
.chart-tap-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  padding: 6px 12px;
  background: rgba(56, 97, 251, 0.8);
  border-radius: 4px;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0.7;
  z-index: 50;
}

/* Join Our Socials Popup */
.socials-popup-content {
  background: var(--bg-secondary);
  border: 3px solid var(--accent-blue);
  border-radius: 12px;
  padding: 8px;
  max-width: min(360px, calc(100vw - 16px));
  width: 90%;
  max-height: 55vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 0 30px rgba(56, 97, 251, 0.4);
  animation: popIn 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto;
}

.socials-popup-cat {
  text-align: center;
  width: 100%;
  padding: 4px 0;
  flex-shrink: 0;
}

.socials-popup-cat img {
  width: clamp(100px, 28vw, 130px);
  height: clamp(80px, 15vh, 100px);
  max-width: 130px;
  max-height: 100px;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: block;
  margin: 0 auto;
}

.socials-popup-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.socials-popup-description {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0;
  text-align: center;
}

.socials-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.social-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(56, 97, 251, 0.08);
  border-left: 3px solid var(--accent-blue);
  border-radius: 4px;
  padding: 6px;
  transition: all 0.2s ease;
}

.social-item:hover {
  background: rgba(56, 97, 251, 0.12);
}

.social-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 0;
  transition: color 0.2s ease;
}

.social-link:hover {
  color: var(--accent-blue);
}

.social-link.twitter:hover {
  color: #1DA1F2;
}

.social-link.telegram:hover {
  color: #0088cc;
}

.social-link.website:hover {
  color: #10B981;
}

.social-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.social-name {
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.social-copy-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.social-copy-btn:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #FFF;
}

.social-copy-btn.copied {
  background: #10B981;
  border-color: #10B981;
  color: #FFF;
}

.socials-popup-close-btn {
  background: linear-gradient(135deg, var(--accent-blue), #5B3ECC);
  border: none;
  color: #FFF;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  text-shadow: 0 0 10px rgba(56, 97, 251, 0.5);
  margin-top: 4px;
}

.socials-popup-close-btn:hover {
  box-shadow: 0 0 20px rgba(56, 97, 251, 0.6);
  transform: translateY(-2px);
}

/* Enhanced Socials Popup Features */
.socials-countdown-banner {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05));
  border-left: 3px solid #FFD700;
  border-radius: 4px;
  padding: 6px;
  text-align: center;
  margin-bottom: 6px;
}

/* Placeholder for future community stats */
.community-stats {
  display: none;
}

.social-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.social-qr-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  padding: 4px 5px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.social-qr-btn:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #FFF;
}

.qr-container {
  margin-top: 4px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  display: flex;
  justify-content: center;
}

.qr-container canvas {
  max-width: 140px;
  border-radius: 3px;
}

.referral-section {
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid #10B981;
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 6px;
}

.referral-display {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  padding: 5px;
  border-radius: 3px;
}

.referral-copy-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  padding: 4px 5px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.referral-copy-btn:hover {
  background: #10B981;
  border-color: #10B981;
  color: #FFF;
}

.referral-copy-btn.copied {
  background: #10B981;
  border-color: #10B981;
  color: #FFF;
}

.newsletter-section {
  background: rgba(56, 97, 251, 0.08);
  border-left: 3px solid var(--accent-blue);
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 6px;
}

.newsletter-input {
  flex: 1;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(56, 97, 251, 0.3);
  border-radius: 3px;
  color: var(--text-primary);
  padding: 6px 8px;
  font-size: 11px;
  outline: none;
  transition: all 0.2s ease;
}

.newsletter-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 8px rgba(56, 97, 251, 0.2);
}

.newsletter-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.newsletter-btn {
  background: var(--accent-blue);
  border: none;
  color: #FFF;
  padding: 6px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.newsletter-btn:hover {
  box-shadow: 0 0 12px rgba(56, 97, 251, 0.5);
  transform: translateY(-1px);
}

.social-link.discord:hover {
  color: #5865F2;
}

@media (max-width: 480px) {
  .socials-popup-content {
    width: 95%;
    padding: 8px;
    gap: 4px;
    max-height: calc(100vh - 60px);
  }
  
  .social-item {
    padding: 5px;
    gap: 3px;
  }
  
  .social-link {
    font-size: 10px;
  }
  
  .qr-container canvas {
    max-width: 110px;
  }
  
  .community-stats {
    gap: 6px;
  }
}

/* ===== SPORTS TEAM THEMES ===== */

/* College Football */
.theme-college-alabama {
  --bg-primary: #A00000;
  --bg-secondary: #BB0000;
  --bg-tertiary: #800000;
  --accent-blue: #FFFFFF;
  --text-primary: #FFFFFF;
}

.theme-college-clemson {
  --bg-primary: #F66733;
  --bg-secondary: #FF7744;
  --bg-tertiary: #DD5522;
  --accent-blue: #FFFFFF;
  --text-primary: #FFFFFF;
}

.theme-college-georgia {
  --bg-primary: #BA0000;
  --bg-secondary: #CC0000;
  --bg-tertiary: #990000;
  --accent-blue: #000000;
  --text-primary: #FFFFFF;
}

.theme-college-ohio-state {
  --bg-primary: #BA0000;
  --bg-secondary: #CC0000;
  --bg-tertiary: #990000;
  --accent-blue: #FFFFFF;
  --text-primary: #FFFFFF;
}

/* NFL Teams */
.theme-nfl-chiefs {
  --bg-primary: #E31828;
  --bg-secondary: #FF2838;
  --bg-tertiary: #CC1218;
  --accent-blue: #FFB81C;
  --text-primary: #FFFFFF;
}

.theme-nfl-patriots {
  --bg-primary: #002244;
  --bg-secondary: #003366;
  --bg-tertiary: #001122;
  --accent-blue: #B0B7BC;
  --text-primary: #FFFFFF;
}

.theme-nfl-cowboys {
  --bg-primary: #003594;
  --bg-secondary: #0044AA;
  --bg-tertiary: #002266;
  --accent-blue: #B0B7BC;
  --text-primary: #FFFFFF;
}

.theme-nfl-49ers {
  --bg-primary: #AA0000;
  --bg-secondary: #BB0000;
  --bg-tertiary: #880000;
  --accent-blue: #FFB81C;
  --text-primary: #FFFFFF;
}

/* NBA Teams */
.theme-nba-lakers {
  --bg-primary: #1D428A;
  --bg-secondary: #2E4FA5;
  --bg-tertiary: #0C2260;
  --accent-blue: #FDB927;
  --text-primary: #FFFFFF;
}

.theme-nba-celtics {
  --bg-primary: #007A33;
  --bg-secondary: #00994D;
  --bg-tertiary: #005022;
  --accent-blue: #FFFFFF;
  --text-primary: #FFFFFF;
}

.theme-nba-warriors {
  --bg-primary: #1D428A;
  --bg-secondary: #2E4FA5;
  --bg-tertiary: #0C2260;
  --accent-blue: #FDB927;
  --text-primary: #FFFFFF;
}

.theme-nba-heat {
  --bg-primary: #98002E;
  --bg-secondary: #BB0033;
  --bg-tertiary: #770022;
  --accent-blue: #F9A01B;
  --text-primary: #FFFFFF;
}

/* MLB Teams */
.theme-mlb-yankees {
  --bg-primary: #0C2C56;
  --bg-secondary: #1D3D77;
  --bg-tertiary: #001A33;
  --accent-blue: #FFFFFF;
  --text-primary: #FFFFFF;
}

.theme-mlb-redsox {
  --bg-primary: #BD3039;
  --bg-secondary: #D63F4A;
  --bg-tertiary: #8B1F27;
  --accent-blue: #FFFFFF;
  --text-primary: #FFFFFF;
}

.theme-mlb-dodgers {
  --bg-primary: #005A9C;
  --bg-secondary: #0070BB;
  --bg-tertiary: #004477;
  --accent-blue: #FFFFFF;
  --text-primary: #FFFFFF;
}

/* Hockey */
.theme-nhl-penguins {
  --bg-primary: #27251F;
  --bg-secondary: #3D3A33;
  --bg-tertiary: #1A1815;
  --accent-blue: #FCB645;
  --text-primary: #FFFFFF;
}

.theme-nhl-kings {
  --bg-primary: #111111;
  --bg-secondary: #222222;
  --bg-tertiary: #000000;
  --accent-blue: #A2AAAD;
  --text-primary: #FFFFFF;
}

/* Soccer */
.theme-soccer-manchester-united {
  --bg-primary: #DA291C;
  --bg-secondary: #EE3D30;
  --bg-tertiary: #B81F16;
  --accent-blue: #FFFFFF;
  --text-primary: #FFFFFF;
}

.theme-soccer-barcelona {
  --bg-primary: #004687;
  --bg-secondary: #005FA5;
  --bg-tertiary: #003055;
  --accent-blue: #FFC600;
  --text-primary: #FFFFFF;
}

/* Apply sport themes */
body[class*="theme-college-"],
body[class*="theme-nfl-"],
body[class*="theme-nba-"],
body[class*="theme-mlb-"],
body[class*="theme-nhl-"],
body[class*="theme-soccer-"] {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
}

/* Sports theme text colors */
body[class*="theme-college-"],
body[class*="theme-nfl-"],
body[class*="theme-nba-"],
body[class*="theme-mlb-"],
body[class*="theme-nhl-"],
body[class*="theme-soccer-"] .text-primary {
  color: var(--text-primary);
}

/* Ensure all content layers properly on top of theme backgrounds */
#app {
  position: relative;
  z-index: 1;
}

.dashboard-grid,
.chart-canvas,
.metric-box-wide {
  position: relative;
  z-index: 2;
}

.modal-overlay {
  z-index: 10000 !important;
}

/* Ensure commentary mode is preserved across theme changes */
body {
  transition: background-color 0.3s ease, background-image 0.3s ease;
}

#app > * {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Settings Page - Two Column Grid Layout */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.settings-column .widget {
  margin-bottom: 12px;
  padding: 12px;
}

/* Subscription Tiers - 3 Column on Desktop */
.subscription-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.subscription-tiers .tier-card {
  padding: 12px;
  font-size: 11px;
}

.subscription-tiers .tier-badge {
  font-size: 9px;
  padding: 4px 8px;
}

.subscription-tiers .tier-header .tier-price {
  font-size: 20px;
}

.subscription-tiers .tier-feature {
  font-size: 10px;
  padding: 2px 0;
}

/* Mobile: Stack Settings Grid */
@media (max-width: 768px) {
  .settings-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .subscription-tiers {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Tablet: 2 columns for subscription tiers */
@media (min-width: 769px) and (max-width: 1024px) {
  .subscription-tiers {
    grid-template-columns: 1fr 1fr;
  }
}

/* Settings Button Row - Responsive Layout (Legacy) */
.settings-buttons-row {
  display: flex !important;
  gap: 12px !important;
  width: 100% !important;
}

@media (max-width: 767px) {
  .settings-buttons-row {
    flex-direction: column !important;
  }
  
  .settings-buttons-row > div {
    flex: 0 0 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (min-width: 768px) {
  .settings-buttons-row {
    flex-direction: row !important;
  }
  
  .settings-buttons-row > div {
    flex: 1 !important;
    min-width: 0 !important;
  }
}

/* Ensure tab content doesn't overflow */
.tab-pane {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

.widget {
  width: 100% !important;
  overflow-x: hidden !important;
}

#app {
  overflow-x: hidden !important;
}

/* Agent System Styles */
.agent-popup-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10100;
}

.agent-popup-container {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.agent-popup-image {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  margin: 0 auto 16px;
  border: 2px solid var(--accent-blue);
}

.agent-popup-content h2 {
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 4px;
  text-align: center;
}

.agent-popup-title {
  font-size: 12px;
  color: var(--accent-blue);
  text-align: center;
  margin: 0 0 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.agent-popup-highlight,
.agent-popup-funfact {
  background: rgba(56, 97, 251, 0.1);
  border-left: 3px solid var(--accent-blue);
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
}

.agent-popup-funfact {
  border-left-color: #10B981;
  background: rgba(16, 185, 129, 0.1);
}

.agent-popup-btn {
  width: 100%;
  padding: 10px;
  background: var(--accent-blue);
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.agent-popup-btn:hover {
  background: var(--accent-blue-hover);
  transform: translateY(-2px);
}

.agent-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10100;
  overflow-y: auto;
  padding: 12px;
}

.agent-selector-container {
  background: #2A2A2A;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  max-width: 800px;
  width: 100%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}

.agent-selector-title {
  font-size: 18px;
  font-weight: 700;
  color: #FFF;
  text-align: center;
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.agent-selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.agent-selector-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.agent-selector-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-4px);
  box-shadow: 0 0 16px rgba(56, 97, 251, 0.3);
}

.agent-selector-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
  margin-bottom: 8px;
  border: 2px solid var(--border-color);
}

.agent-selector-name {
  font-size: 12px;
  font-weight: 700;
  color: #FFF;
  margin: 0;
}

.agent-selector-title {
  font-size: 9px;
  color: var(--text-secondary);
  margin: 4px 0 0;
}

/* Coin Search Modal - Theme-Aware Centered Dialog */
.coin-search-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10100;
  overflow-y: auto;
  padding: 12px;
}

.coin-search-modal[style*="display: flex"] {
  display: flex !important;
}

.coin-search-container {
  background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 32px;
  max-width: 450px;
  width: 100%;
  position: relative;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 24px rgba(56, 97, 251, 0.15);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.coin-search-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.coin-search-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0 0 20px;
  letter-spacing: 0.3px;
}

.coin-search-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--bg-primary);
  border: 2px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 16px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.coin-search-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 12px rgba(56, 97, 251, 0.3);
}

.coin-search-input::placeholder {
  color: var(--text-dim);
}

.coin-search-btn {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--accent-blue), #1E40AF);
  border: none;
  border-radius: 8px;
  color: #FFF;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
}

.coin-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(56, 97, 251, 0.4);
}

.coin-search-btn:active {
  transform: translateY(0);
}

@media (max-width: 600px) {
  .agent-selector-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }
  
  .agent-popup-container {
    max-width: 90vw;
  }
  
  .coin-search-container {
    max-width: 90vw;
    padding: 24px;
  }
}

/* Collectible Agent Cards Styles */
.agent-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 20px;
}

.agent-collectible-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.agent-collectible-card:hover {
  border-color: var(--accent-blue);
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(56, 97, 251, 0.25);
}

.agent-card-header {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
}

.agent-card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.agent-collectible-card:hover .agent-card-image {
  transform: scale(1.05);
}

.agent-card-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent-blue);
  color: #000;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.agent-card-body {
  padding: 12px;
  border-bottom: 1px solid var(--border-light);
}

.agent-card-name {
  font-size: 14px;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 4px;
}

.agent-card-title {
  font-size: 10px;
  color: var(--accent-blue);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.agent-card-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.agent-card-stat {
  font-size: 9px;
  color: var(--text-secondary);
  background: rgba(56, 97, 251, 0.1);
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid rgba(56, 97, 251, 0.2);
}

.agent-card-footer {
  padding: 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agent-card-highlight,
.agent-card-funfact {
  font-size: 9px;
  line-height: 1.4;
}

.agent-card-label {
  font-weight: 700;
  color: var(--accent-blue);
  display: block;
  margin-bottom: 4px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.agent-card-text {
  color: var(--text-secondary);
  margin: 0;
  font-style: italic;
  line-height: 1.5;
}

.agent-card-actions {
  padding: 12px;
  border-top: 1px solid var(--border-light);
}

.agent-card-btn {
  width: 100%;
  padding: 8px;
  background: var(--accent-blue);
  color: #000;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.agent-card-btn:hover {
  background: var(--accent-blue-hover);
  transform: scale(1.02);
}

@media (max-width: 600px) {
  .agent-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 12px;
  }
}

/* AGENT SELECTOR MODAL - COMPACT CAROUSEL */
#agentSelectorModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

#agentSelectorContainer {
  background: #2A2A2A;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  max-width: 600px;
  width: 90%;
  max-height: 70vh;
  overflow-y: auto;
}

.agent-selector-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.agent-lock-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.agent-selector-locked h3 {
  color: #FFF;
  margin: 0 0 8px;
  font-size: 16px;
}

.agent-selector-locked p {
  color: var(--text-secondary);
  margin: 0 0 20px;
  font-size: 12px;
}

.agent-upgrade-btn {
  background: linear-gradient(135deg, #3861FB 0%, #5D5FFF 100%);
  color: #FFF;
  border: none;
  padding: 10px 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.agent-upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(56, 97, 251, 0.3);
}

.agent-carousel-wrapper {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agent-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.agent-carousel-header h3 {
  margin: 0;
  font-size: 14px;
  color: #FFF;
}

.agent-carousel-close {
  font-size: 24px;
  cursor: pointer;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s;
}

.agent-carousel-close:hover {
  color: #FFF;
}

.agent-carousel-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.agent-filter-btn {
  background: rgba(56, 97, 251, 0.15);
  border: 1px solid rgba(56, 97, 251, 0.3);
  color: var(--text-secondary);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.agent-filter-btn:hover {
  border-color: rgba(56, 97, 251, 0.6);
}

.agent-filter-btn.active {
  background: var(--accent-blue);
  color: #000;
  border-color: var(--accent-blue);
}

.agent-carousel {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-carousel-nav {
  background: rgba(56, 97, 251, 0.2);
  border: 1px solid rgba(56, 97, 251, 0.3);
  color: var(--accent-blue);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.agent-carousel-nav:hover {
  background: rgba(56, 97, 251, 0.4);
  transform: scale(1.1);
}

#agentCarouselTrack {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex: 1;
  padding: 4px 0;
  scrollbar-width: none;
}

#agentCarouselTrack::-webkit-scrollbar {
  display: none;
}

.agent-carousel-card {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(56, 97, 251, 0.08);
}

.agent-carousel-card:hover {
  background: rgba(56, 97, 251, 0.15);
  border-color: rgba(56, 97, 251, 0.3);
  transform: translateY(-2px);
}

.agent-carousel-card img {
  width: 60px;
  height: 60px;
  border-radius: 4px;
  object-fit: cover;
  margin-bottom: 6px;
}

.agent-card-info {
  text-align: center;
  width: 100%;
}

.agent-card-name {
  font-size: 11px;
  font-weight: 700;
  color: #FFF;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agent-card-age {
  font-size: 9px;
  color: var(--accent-blue);
  margin: 0;
  font-weight: 600;
}

.agent-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 8px;
}

.agent-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(56, 97, 251, 0.3);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  padding: 0;
}

.agent-dot.active {
  background: var(--accent-blue);
  width: 12px;
  border-radius: 3px;
}

/* ========== PEDESTAL SHOWCASE - ULTRA-RARE REFRACTOR ========== */
.pedestal-showcase-section {
  margin: 24px 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pedestal-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.08), rgba(124, 58, 237, 0.08));
  border: 2px solid rgba(56, 97, 251, 0.3);
  border-radius: 12px;
  padding: 32px 24px;
  overflow: hidden;
}

.pedestal-rays {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 300px;
  background: radial-gradient(circle, rgba(56, 97, 251, 0.15) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(40px);
}

.pedestal-stand {
  position: relative;
  z-index: 2;
  text-align: center;
}

.pedestal-top {
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
}

.refractor-display-box {
  position: relative;
  width: 240px;
  height: 320px;
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.2), rgba(124, 58, 237, 0.2));
  border: 3px solid rgba(255, 215, 0, 0.4);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 0 40px rgba(56, 97, 251, 0.3), inset 0 0 20px rgba(255, 215, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.refractor-glow-effect {
  position: absolute;
  inset: -12px;
  background: conic-gradient(from 0deg, #3861FB, #8338EC, #FFD700, #3861FB);
  border-radius: 16px;
  opacity: 0;
  animation: refractorGlow 4s ease-in-out infinite;
  z-index: -1;
}

@keyframes refractorGlow {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.4; }
}

.refractor-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
}

.refractor-rarity-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.pedestal-info {
  text-align: center;
}

.pedestal-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #FFF;
  margin: 0 0 6px 0;
  text-shadow: 0 0 20px rgba(56, 97, 251, 0.5);
  letter-spacing: 1px;
}

.pedestal-subtitle {
  font-size: 12px;
  color: rgba(255, 215, 0, 0.8);
  margin: 0 0 20px 0;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.pedestal-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(56, 97, 251, 0.1);
  border-radius: 8px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.detail-label {
  font-size: 10px;
  color: #888;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.detail-value {
  font-size: 13px;
  color: #3861FB;
  font-weight: 700;
}

.pedestal-description {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 20px 0;
  padding: 0 16px;
}

.countdown-container {
  margin: 20px 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(56, 97, 251, 0.15), rgba(124, 58, 237, 0.15));
  border-radius: 8px;
  border-left: 4px solid #3861FB;
}

.countdown-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.countdown-timer {
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #FFD700;
  letter-spacing: 1px;
}

.pedestal-notice {
  font-size: 12px;
  color: rgba(255, 215, 0, 0.7);
  padding: 12px 16px;
  background: rgba(255, 215, 0, 0.08);
  border-radius: 6px;
  border: 1px solid rgba(255, 215, 0, 0.2);
  margin-top: 16px;
  font-weight: 500;
}

@media (max-width: 600px) {
  .pedestal-container {
    padding: 20px 16px;
  }

  .refractor-display-box {
    width: 200px;
    height: 260px;
  }

  .pedestal-title {
    font-size: 18px;
  }

  .pedestal-details {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ========== AGENT REFRACTOR MODAL ========== */
.agent-refractor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(8px);
}

.agent-refractor-modal {
  position: relative;
  background: linear-gradient(135deg, rgba(30, 30, 50, 0.95), rgba(20, 20, 40, 0.95));
  border: 2px solid rgba(56, 97, 251, 0.5);
  border-radius: 16px;
  padding: 24px;
  max-width: 400px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 60px rgba(56, 97, 251, 0.4), inset 0 0 40px rgba(131, 56, 236, 0.1);
}

.refractor-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(56, 97, 251, 0.2);
  color: #FFF;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refractor-close:hover {
  background: rgba(56, 97, 251, 0.5);
}

.refractor-card-container {
  text-align: center;
  color: #FFF;
}

.refractor-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.refractor-name-block {
  margin: 12px 0;
}

.refractor-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 16px 0;
  padding: 12px;
  background: rgba(56, 97, 251, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(56, 97, 251, 0.2);
}

.stat-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
}

.stat-label {
  font-size: 9px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 14px;
  font-weight: 900;
  color: #FFD700;
  font-family: 'Orbitron', sans-serif;
}

.refractor-serial {
  margin: 16px 0;
  padding: 10px;
  background: rgba(255, 215, 0, 0.08);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 6px;
}

.refractor-qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.qr-download-btn {
  padding: 10px 16px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.qr-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.refractor-view-profile {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #3861FB, #8338EC);
  color: #FFF;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.refractor-view-profile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(56, 97, 251, 0.5);
}

/* Holographic animation for agent thumbnails */
@keyframes holographic {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* MINIMAL MOBILE FIX: Prevent horizontal overflow only */
@media (max-width: 640px) {
  body, html {
    width: 100%;
    overflow-x: hidden;
  }
  
  #app {
    width: 100%;
    overflow-x: hidden;
  }
  
  /* Ensure no element breaks the viewport */
  * {
    max-width: 100%;
  }
}


/* Mobile: Show only emoji for V2 Details button */
@media (max-width: 640px) {
  #v2DetailsMobileBtn .v2-text {
    font-size: 0;
  }
  
  #v2DetailsMobileBtn .v2-text::after {
    content: "📅";
    font-size: 14px;
  }
}





/* MOBILE SEARCH LAYOUT - Separate Desktop and Mobile */
@media (max-width: 640px) {
  #searchAnalyticsBar {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 6px !important;
    margin: 8px 8px !important;
    align-items: stretch !important;
  }
  
  .web3-search-section {
    flex: 1 !important;
  }
  
  .search-box {
    display: flex !important;
    gap: 6px !important;
    align-items: stretch !important;
  }
  
  #analyticsButtonContainer {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
  }
  
  #analyticsButtonContainer > div:first-child {
    display: none !important;
  }
  
  #analyzeBtn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, rgba(56, 97, 251, 0.5), rgba(131, 56, 236, 0.5)) !important;
    border: 1px solid rgba(56, 97, 251, 0.3) !important;
    border-radius: 6px !important;
    color: #FFD700 !important;
    cursor: pointer !important;
    flex-shrink: 0;
    transition: all 0.2s;
  }
  
  #analyzeBtn:hover {
    background: linear-gradient(135deg, rgba(56, 97, 251, 0.7), rgba(131, 56, 236, 0.7)) !important;
    box-shadow: 0 0 12px rgba(56, 97, 251, 0.3);
  }
  
  #analyzeBtn::after {
    content: "₿";
    font-size: 28px;
    color: #FFD700;
    font-weight: 700;
  }
  
  /* Mobile Info Banner - Show Only Emojis */
  .info-btn-text {
    display: inline;
  }
  
  .info-btn-text::before {
    display: none;
  }
}

/* ===========================================
   INFO BANNER BAR - RESPONSIVE BUTTON STYLES
   =========================================== */

/* Info Banner Container */
.info-banner-bar {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, rgba(176,224,230,0.08), rgba(139,92,246,0.08), rgba(220,38,38,0.08));
  border-bottom: 1px solid rgba(255,255,255,0.1);
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

/* Base Info Button Styles */
.info-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Button Variants */
.info-btn--beta {
  background: linear-gradient(135deg, rgba(176,224,230,0.15), rgba(176,224,230,0.08));
  border: 1px solid rgba(176,224,230,0.3);
}

.info-btn--founder {
  background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.08));
  border: 1px solid rgba(139,92,246,0.3);
}

.info-btn--new {
  background: linear-gradient(135deg, rgba(220,38,38,0.15), rgba(220,38,38,0.08));
  border: 1px solid rgba(220,38,38,0.3);
}

/* Hover Effects - Pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .info-btn:hover {
    transform: scale(1.02);
  }
  
  .info-btn--beta:hover {
    background: linear-gradient(135deg, rgba(176,224,230,0.25), rgba(176,224,230,0.15));
    box-shadow: 0 0 12px rgba(176,224,230,0.3);
  }
  
  .info-btn--founder:hover {
    background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(139,92,246,0.15));
    box-shadow: 0 0 12px rgba(139,92,246,0.3);
  }
  
  .info-btn--new:hover {
    background: linear-gradient(135deg, rgba(220,38,38,0.25), rgba(220,38,38,0.15));
    box-shadow: 0 0 12px rgba(220,38,38,0.3);
  }
}

/* Tablet - Compact text */
@media (max-width: 768px) {
  .info-banner-bar {
    gap: 6px;
    padding: 6px 10px;
  }
  
  .info-btn {
    font-size: 10px;
    padding: 8px 8px;
    min-height: 44px;
  }
}

/* Mobile - Show emoji + short text */
@media (max-width: 600px) {
  .info-banner-bar {
    gap: 4px;
    padding: 6px 8px;
  }
  
  .info-btn {
    font-size: 9px;
    padding: 6px 4px;
    min-height: 44px;
    letter-spacing: 0;
  }
  
  .info-btn-text {
    font-size: 0;
    letter-spacing: 0;
  }
  
  .info-btn-text::before {
    content: attr(data-emoji);
    font-size: 18px;
    display: inline;
    letter-spacing: normal;
  }
}

/* Very small screens (320px) - Emoji only, vertically stacked if needed */
@media (max-width: 380px) {
  .info-banner-bar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
  }
  
  .info-btn {
    flex: 1 1 30%;
    min-width: 60px;
    min-height: 44px;
    padding: 8px 4px;
  }
  
  .info-btn-text::before {
    font-size: 20px;
  }
}

/* ===========================================
   TEXT CONTAINMENT UTILITIES
   =========================================== */

/* Text clamp utility for multi-line text */
.text-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.text-clamp-1 {
  -webkit-line-clamp: 1;
}

.text-clamp-2 {
  -webkit-line-clamp: 2;
}

.text-clamp-3 {
  -webkit-line-clamp: 3;
}

/* Card content text wrapping */
.card-content,
.metric-box-wide,
.section-box,
.project-card,
.coin-card {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
}

/* ===========================================
   METRIC CARDS VISUAL POLISH
   =========================================== */

/* CSS Variables for card styling */
:root {
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --card-glow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --card-glow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Enhanced Metric Box Styling */
.metric-box-wide {
  box-shadow: var(--card-shadow), var(--card-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Fear & Greed specific glow */
.fear-greed-box {
  box-shadow: var(--card-shadow), var(--card-glow), 0 0 20px rgba(56, 97, 251, 0.1);
}

/* Hover effects - Pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .metric-box-wide:hover {
    transform: scale(1.02);
    box-shadow: var(--card-shadow-hover), var(--card-glow-hover);
  }
  
  .fear-greed-box:hover {
    box-shadow: var(--card-shadow-hover), var(--card-glow-hover), 0 0 25px rgba(56, 97, 251, 0.2);
  }
}

/* Section boxes polish */
.section-box {
  box-shadow: var(--card-shadow), var(--card-glow);
  transition: box-shadow 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .section-box:hover {
    box-shadow: var(--card-shadow-hover), var(--card-glow-hover);
  }
}

/* ===========================================
   MOBILE OVERFLOW PREVENTION - TARGETED FIXES
   =========================================== */

/* Global overflow prevention - body/html only */
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  
  /* Tab panes with safe overflow */
  .tab-pane {
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: 8px;
    padding-right: 8px;
  }
  
  /* Text wrapping for long content */
  h1, h2, h3, h4, h5, h6, p, span, a, button, li {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  
  /* Section boxes fit viewport */
  .section-box {
    max-width: 100%;
  }
  
  /* Staking content width fix */
  .staking-content,
  #staking-content {
    max-width: 100vw;
    padding: 10px;
  }
  
  /* Project/coin cards */
  .project-card,
  .coin-card {
    max-width: 100%;
  }
  
  /* Modal responsiveness */
  .modal-content {
    max-width: calc(100vw - 20px);
    margin: 10px;
  }
}

/* Extra small screens - minimal adjustments */
@media (max-width: 400px) {
  .tab-pane {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ===========================================
   ACCORDION COMPONENT STYLES
   =========================================== */

.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.accordion-item {
  background: var(--bg-secondary, #1A1A1A);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  overflow: hidden;
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s ease;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.03);
}

.accordion-icon {
  font-size: 1.2em;
}

.accordion-title {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #fff);
}

.accordion-arrow {
  font-size: 10px;
  color: var(--text-secondary, #aaa);
  transition: transform 0.3s ease;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}

.accordion-content.accordion-open {
  max-height: 2000px;
  padding: 0 16px 16px 16px;
}

/* ===========================================
   BLOCKCHAIN TRAIL DASHBOARD STYLES
   =========================================== */

.blockchain-trail-dashboard {
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.trail-header {
  text-align: center;
  margin-bottom: 24px;
}

.trail-header h2 {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #3861FB, #9333EA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.trail-subtitle {
  color: var(--text-secondary, #aaa);
  font-size: 14px;
  margin-top: 4px;
}

.trail-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

@media (max-width: 600px) {
  .trail-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

.trail-stat-card {
  background: var(--bg-secondary, #1A1A1A);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.trail-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.trail-stat-label {
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  margin-top: 4px;
}

.trail-stat-confirmed .trail-stat-value {
  color: var(--green, #16C784);
}

.trail-stat-pending .trail-stat-value {
  color: #F7931A;
}

.trail-stat-hallmarks .trail-stat-value {
  color: #9333EA;
}

.trail-events-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trail-event-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.trail-event-icon {
  font-size: 20px;
  width: 32px;
  text-align: center;
}

.trail-event-details {
  flex: 1;
  min-width: 0;
}

.trail-event-type {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary, #fff);
}

.trail-event-hash {
  font-size: 11px;
  font-family: monospace;
  color: var(--text-dim, #808A9D);
  margin-top: 2px;
}

.trail-event-date {
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  margin-top: 2px;
}

.trail-event-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.trail-badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.trail-badge-pending {
  background: rgba(247, 147, 26, 0.2);
  color: #F7931A;
}

.trail-badge-confirmed {
  background: rgba(22, 199, 132, 0.2);
  color: #16C784;
}

.trail-badge-failed {
  background: rgba(234, 57, 67, 0.2);
  color: #EA3943;
}

.trail-verify-link {
  font-size: 11px;
  color: var(--accent-blue, #3861FB);
  text-decoration: none;
}

.trail-verify-link:hover {
  text-decoration: underline;
}

.trail-empty,
.trail-more {
  text-align: center;
  padding: 20px;
  color: var(--text-secondary, #aaa);
  font-size: 14px;
}

/* Hallmarks Grid */
.hallmarks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.hallmark-card {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(56, 97, 251, 0.1));
  border: 1px solid rgba(147, 51, 234, 0.3);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.hallmark-serial {
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  color: #9333EA;
  margin-bottom: 8px;
}

.hallmark-template {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.hallmark-date {
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  margin-top: 4px;
}

.hallmark-download {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent-blue, #3861FB);
  text-decoration: none;
}

/* Mint Section */
.mint-hallmark-section {
  padding: 20px;
  text-align: center;
}

.mint-info h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.mint-info p {
  font-size: 14px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 16px;
}

.mint-price {
  margin-bottom: 20px;
}

.mint-price-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--green, #16C784);
}

.mint-price-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
}

.mint-options {
  margin-bottom: 20px;
}

.mint-option-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 8px;
}

.mint-select {
  width: 100%;
  max-width: 300px;
  padding: 10px 12px;
  background: var(--bg-tertiary, #0D0D0D);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  color: var(--text-primary, #fff);
  font-size: 14px;
}

.mint-button {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #9333EA, #3861FB);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mint-button:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.4);
}

/* ===========================================
   DEVELOPER DASHBOARD STYLES
   =========================================== */

.dev-dashboard {
  padding: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.dev-header {
  text-align: center;
  margin-bottom: 24px;
}

.dev-header h1 {
  font-size: 28px;
  font-weight: 700;
}

.dev-subtitle {
  color: var(--text-secondary, #aaa);
  font-size: 14px;
}

.dev-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

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

.dev-stat {
  background: var(--bg-secondary, #1A1A1A);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.dev-stat-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.dev-stat-label {
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  margin-top: 4px;
}

.dev-stat-green .dev-stat-value {
  color: var(--green, #16C784);
}

.dev-stat-blue .dev-stat-value {
  color: var(--accent-blue, #3861FB);
}

.dev-stat-purple .dev-stat-value {
  color: #9333EA;
}

.dev-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.dev-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 500px) {
  .dev-grid-2, .dev-grid-3 {
    grid-template-columns: 1fr;
  }
}

.dev-info-box {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.dev-info-box label {
  display: block;
  font-size: 11px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 4px;
}

.dev-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary, #fff);
}

.dev-value-green {
  color: var(--green, #16C784);
}

.dev-value-yellow {
  color: #F7931A;
}

.dev-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  justify-content: center;
}

.dev-status {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
}

.dev-status-ok {
  background: rgba(22, 199, 132, 0.2);
  color: #16C784;
}

.dev-status-warn {
  background: rgba(247, 147, 26, 0.2);
  color: #F7931A;
}

.dev-config-section {
  margin-top: 8px;
}

.dev-config-section h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary, #fff);
}

.dev-config-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.dev-config-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  font-size: 12px;
}

.dev-config-key {
  font-family: monospace;
  color: var(--accent-blue, #3861FB);
}

.dev-config-value {
  font-family: monospace;
  color: var(--text-secondary, #aaa);
}

.dev-config-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 400px;
}

.dev-input {
  padding: 10px 12px;
  background: var(--bg-tertiary, #0D0D0D);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  color: var(--text-primary, #fff);
  font-size: 14px;
}

.dev-input::placeholder {
  color: var(--text-dim, #808A9D);
}

.dev-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary, #aaa);
}

.dev-button {
  padding: 10px 20px;
  background: var(--accent-blue, #3861FB);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dev-button:hover {
  background: var(--accent-blue-hover, #2444D4);
}

.dev-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 500px) {
  .dev-actions-grid {
    grid-template-columns: 1fr;
  }
}

.dev-action-btn {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  color: var(--text-primary, #fff);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dev-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--accent-blue, #3861FB);
}

.dev-empty {
  color: var(--text-secondary, #aaa);
  font-size: 13px;
  font-style: italic;
}

.dev-loading {
  text-align: center;
  padding: 40px;
  color: var(--text-secondary, #aaa);
  font-size: 16px;
}