/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }

:root {
  --bg: #0A0E17;
  --bg-card: rgba(15, 20, 30, 0.8);
  --bg-card-hover: rgba(20, 26, 40, 0.9);
  --bg-elevated: rgba(18, 24, 38, 0.85);
  --border: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.1);
  --text: #E6EDF3;
  --text-muted: #8B949E;
  --text-dim: #5A6370;
  --purple: #7C3AED;
  --purple-light: #A78BFA;
  --purple-glow: rgba(124, 58, 237, 0.35);
  --teal: #00D4AA;
  --teal-dark: #10B981;
  --teal-glow: rgba(0, 212, 170, 0.3);
  --orange: #F59E0B;
  --red: #EF4444;
  --sidebar-width: 280px;
  --topnav-height: 64px;
  --ticker-height: 0px;
  --glass-blur: blur(20px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.06);
  --bg-topnav: rgba(10, 14, 23, 0.75);
  --bg-dropdown: rgba(14, 18, 30, 0.97);
  --bg-hover: rgba(255,255,255,0.05);
  --bg-body-pattern1: rgba(124, 58, 237, 0.03);
  --bg-body-pattern2: rgba(0, 212, 170, 0.02);
  --border-accent: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.3), rgba(0, 212, 170, 0.3), transparent);
  --scrollbar-thumb: rgba(255, 255, 255, 0.08);
  --scrollbar-hover: rgba(255, 255, 255, 0.14);
  --gradient-primary: linear-gradient(135deg, #6C63FF, #00D4AA);
  --gradient-btn-teal: linear-gradient(135deg, #00D4AA 0%, #10B981 100%);
  --chart-baseline: rgba(255,255,255,0.08);
  --chart-etf-line: #A78BFA;
  --corr-positive-rgb: 0, 212, 170;
  --corr-negative-rgb: 239, 68, 68;
  --corr-diagonal: rgba(108,99,255,0.35);
  --corr-text-hi: #ffffff;
  --corr-text-lo: #cfcfd5;
  --impact-high: #EF4444;
  --impact-high-bg: rgba(239,68,68,0.15);
  --impact-medium: #F59E0B;
  --impact-medium-bg: rgba(245,158,11,0.15);
  --impact-low: #00D4AA;
  --impact-low-bg: rgba(0,212,170,0.12);
  --badge-paid-bg: rgba(239,68,68,0.1);
  --badge-paid-text: #EF4444;
  --badge-hot-bg: rgba(245,158,11,0.12);
  --badge-hot-text: #F59E0B;
  --badge-live-bg: rgba(0,212,170,0.1);
  --badge-live-text: #00D4AA;
  --badge-new-bg: rgba(108,99,255,0.12);
  --badge-new-text: #818CF8;
  --badge-soon-bg: rgba(255,255,255,0.04);
  --badge-soon-text: #6B7280;
  --badge-pro-bg: rgba(245,158,11,0.1);
  --badge-pro-text: #F59E0B;
  --input-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.08);
  --card-shadow: 0 4px 24px rgba(0,0,0,0.3);
  --up-color: #00D4AA;
  --down-color: #EF4444;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    radial-gradient(var(--bg-body-pattern1) 1px, transparent 1px),
    radial-gradient(var(--bg-body-pattern2) 1px, transparent 1px);
  background-size: 40px 40px, 80px 80px;
  background-position: 0 0, 20px 20px;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* ===== KEYFRAMES ===== */
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

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

@keyframes warning-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
  50% { box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.15); }
}

@keyframes orb-drift {
  0% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.05); }
  66% { transform: translate(-20px, 15px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes glow-line {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes slide-in-left {
  from { transform: translateX(-100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== TOP NAV ===== */
.topnav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topnav-height);
  background: var(--bg-topnav);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-border);
  z-index: 200;
}

.topnav::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-accent);
}

.topnav-inner {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 32px;
}

.topnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.topnav-logo-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.topnav-logo-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.topnav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 24px;
}

.topnav-links > a,
.topnav-dropdown > .topnav-dropdown-trigger {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.2px;
  transition: color 0.25s;
  position: relative;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.topnav-links > a:hover,
.topnav-dropdown:hover > .topnav-dropdown-trigger {
  color: var(--text);
  background: var(--bg-hover);
}

/* Disabled / Coming Soon dropdown */
.topnav-dropdown.disabled { pointer-events: none; }
.topnav-dropdown.disabled > .topnav-dropdown-trigger {
  color: var(--text-muted);
  opacity: 0.45;
  cursor: default;
}
.topnav-dropdown.disabled > .topnav-dropdown-menu { display: none !important; }

/* Mega Dropdown */
.topnav-dropdown {
  position: relative;
}

.topnav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  background: var(--bg-dropdown);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--input-border);
  border-radius: 12px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
  z-index: 300;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}

.topnav-dropdown:hover .topnav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.topnav-dropdown-menu .dd-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 8px 12px 4px;
}

.topnav-dropdown-menu .dd-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.topnav-dropdown-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s;
}

.topnav-dropdown-menu a:hover {
  background: var(--border);
  color: var(--text);
}

.topnav-dropdown-menu .dd-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
}

.topnav-dropdown-menu .dd-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}

.topnav-dropdown-menu .dd-badge.live {
  background: var(--badge-live-bg);
  color: var(--badge-live-text);
}

.topnav-dropdown-menu .dd-badge.hot {
  background: var(--badge-hot-bg);
  color: var(--badge-hot-text);
}

.topnav-dropdown-menu .dd-badge.new {
  background: var(--badge-new-bg);
  color: var(--badge-new-text);
}

.topnav-dropdown-menu .dd-badge.soon {
  background: var(--badge-soon-bg);
  color: var(--badge-soon-text);
}

.topnav-dropdown-menu .dd-badge.paid {
  background: var(--gradient-primary);
  color: #fff;
}

.topnav-dropdown-menu .dd-badge.pro {
  background: var(--gradient-primary);
  color: #fff;
}

.topnav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* ===== SIDEBAR COIN PRICES ===== */
.sidebar-coin-name {
  flex: 1;
}

.sidebar-coin-price {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
  text-align: right;
}

.sidebar-coin-price.up {
  color: var(--up-color);
}

.sidebar-coin-price.down {
  color: var(--down-color);
}

/* ===== TOPNAV PRICE TICKER RIBBON ===== */
.topnav-ticker {
  position: fixed;
  top: var(--topnav-height);
  left: 0;
  right: 0;
  height: var(--ticker-height);
  overflow: hidden;
  background: var(--bg-ticker, rgba(6, 9, 16, 0.95));
  border-bottom: 1px solid var(--border);
  border-top: 1px solid rgba(255,255,255,0.03);
  z-index: 199;
}

body.has-ticker { --ticker-height: 34px; }

.ticker-track {
  display: flex;
  align-items: center;
  gap: 48px;
  height: 100%;
  width: max-content;
  animation: ticker-scroll 300s linear infinite;
  padding: 0 24px;
}

.ticker-track:hover { animation-play-state: paused; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  flex-shrink: 0;
}

.ticker-item:hover { opacity: 0.8; }

.ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ticker-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.3px;
}

.ticker-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.ticker-change {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.ticker-change.up { color: var(--teal); }
.ticker-change.down { color: var(--red); }

/* Hide ticker on mobile */
@media (max-width: 900px) {
  body.has-ticker { --ticker-height: 0px; }
  .topnav-ticker {
    display: none;
  }
  .topnav-links {
    display: none;
  }
}

/* ===== CONNECTOR DROPDOWN ===== */
.connector-dropdown {
  position: relative;
}

.connector-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text-muted);
  background: var(--input-bg);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.connector-toggle:hover,
.connector-dropdown.open .connector-toggle {
  color: var(--text);
  background: rgba(255,255,255,0.07);
  border-color: rgba(0,212,170,0.3);
  box-shadow: 0 0 12px rgba(0,212,170,0.08);
}

.connector-toggle .connector-icon {
  font-size: 15px;
  line-height: 1;
}

.connector-toggle .connector-chevron {
  font-size: 10px;
  transition: transform 0.25s ease;
  opacity: 0.5;
}

.connector-dropdown.open .connector-chevron {
  transform: rotate(180deg);
}

.connector-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--bg-dropdown);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--input-border);
  border-radius: 14px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
}

.connector-dropdown.open .connector-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.connector-menu-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dim);
  padding: 8px 12px 6px;
}

.connector-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  font-family: inherit;
  text-align: left;
}

.connector-item:hover {
  background: var(--border);
  color: var(--text);
}

.connector-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.connector-item-icon.telegram { background: rgba(0,136,204,0.15); color: #0088CC; }
.connector-item-icon.email { background: rgba(0,212,170,0.12); color: var(--teal); }
.connector-item-icon.discord { background: rgba(88,101,242,0.15); color: #5865F2; }
.connector-item-icon.twitter { background: rgba(255,255,255,0.08); color: #E6EDF3; }
.connector-item-icon.instagram { background: rgba(225,48,108,0.15); color: #E1306C; }
.connector-item-icon.tiktok { background: rgba(255,255,255,0.08); color: #E6EDF3; }

.connector-item-label {
  flex: 1;
}

.connector-item-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--badge-live-bg);
  color: var(--teal);
  letter-spacing: 0.3px;
}

.connector-item-badge.soon {
  background: var(--badge-soon-bg);
  color: var(--text-dim);
}

.connector-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 8px;
}

/* Hide connector label on small screens */
@media (max-width: 768px) {
  .connector-toggle .connector-label { display: none; }
  .connector-toggle {
    padding: 10px 12px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .sidebar-toggle { display: none !important; }

  /* Prevent connector menu from overflowing viewport */
  .connector-menu {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    max-width: calc(100vw - 32px);
  }
  .connector-dropdown.open .connector-menu {
    transform: translateX(-50%) translateY(0);
  }
}

/* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  top: calc(var(--topnav-height) + var(--ticker-height));
  left: 0;
  width: var(--sidebar-width);
  height: calc(100vh - var(--topnav-height) - var(--ticker-height));
  background: rgba(12, 16, 26, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: var(--glass-border);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.sidebar-section {
  padding: 22px 16px 12px;
}

.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--text-dim);
  margin-bottom: 12px;
  padding: 0 10px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.2s ease;
  margin-bottom: 2px;
  position: relative;
}

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

.sidebar-nav-item.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15), rgba(0, 212, 170, 0.08));
  color: var(--purple-light);
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.2), 0 0 12px rgba(124, 58, 237, 0.08);
}

.sidebar-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--purple), var(--teal));
}

.sidebar-nav-icon {
  width: 20px;
  text-align: center;
  font-size: 15px;
  flex-shrink: 0;
}

.sidebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

.sidebar-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.sidebar-badge.hot {
  background: rgba(239, 68, 68, 0.12);
  color: #F87171;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.1);
}

.sidebar-badge.new {
  background: rgba(0, 212, 170, 0.12);
  color: var(--teal);
  box-shadow: 0 0 8px rgba(0, 212, 170, 0.1);
}

.sidebar-badge.soon {
  background: rgba(245, 158, 11, 0.12);
  color: var(--orange);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.1);
}

.sidebar-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
  margin: 6px 20px;
}

/* Service items premium styling */
.sidebar-service-item {
  border-left: 2px solid transparent;
  transition: all 0.2s ease, border-color 0.2s;
}

.sidebar-service-item:hover {
  border-left-color: var(--purple-glow);
  background: rgba(108, 99, 255, 0.05) !important;
}

.sidebar-footer {
  margin-top: auto;
  padding: 18px 16px;
  border-top: 1px solid var(--border);
}

.sidebar-footer p {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
  padding: 0 10px;
}

/* ===== COLLAPSIBLE SECTIONS ===== */
.sidebar-section.collapsible .sidebar-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: var(--text-dim);
  margin-bottom: 12px;
  padding: 0 10px;
  transition: color 0.2s;
}

.sidebar-section.collapsible .sidebar-section-title:hover {
  color: var(--text-muted);
}

.section-chevron {
  font-size: 10px;
  transition: transform 0.3s ease;
  opacity: 0.5;
}

.sidebar-section.collapsible.collapsed .section-chevron {
  transform: rotate(-90deg);
}

.sidebar-section-body {
  overflow: hidden;
  max-height: 500px;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 1;
}

.sidebar-section.collapsible.collapsed .sidebar-section-body {
  max-height: 0;
  opacity: 0;
}

.sidebar-section.collapsible.collapsed .sidebar-section-title {
  margin-bottom: 0;
}

/* ===== SIDEBAR TOGGLE ===== */
.sidebar-toggle {
  position: fixed;
  top: calc(var(--topnav-height) + var(--ticker-height) + 12px);
  left: calc(var(--sidebar-width) - 14px);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 20, 30, 0.9);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.sidebar-toggle:hover {
  background: rgba(25, 30, 45, 0.95);
  border-color: rgba(0,212,170,0.3);
  color: var(--text);
  box-shadow: 0 0 12px rgba(0,212,170,0.1);
}

.sidebar-toggle-icon {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1;
}

/* Sidebar collapsed state */
body.sidebar-collapsed .sidebar {
  transform: translateX(-100%);
}

body.sidebar-collapsed .sidebar-toggle {
  left: -2px;
  border-radius: 0 50% 50% 0;
}

body.sidebar-collapsed .sidebar-toggle-icon {
  transform: rotate(180deg);
}

/* ===== LAYOUT ===== */
.page-body {
  padding-top: calc(var(--topnav-height) + var(--ticker-height));
  min-height: 100vh;
}

/* ===== HAMBURGER ===== */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 99;
}

.overlay.active { display: block; }

/* Mobile menu for home page */
.mobile-menu {
  display: none;
  position: fixed;
  top: calc(var(--topnav-height) + var(--ticker-height));
  left: 0; right: 0;
  bottom: 0;
  background: rgba(12, 16, 26, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: var(--glass-border);
  z-index: 150;
  flex-direction: column;
  padding: 8px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.open {
  transform: translateY(0);
}

.mobile-menu a {
  padding: 14px 10px;
  font-size: 14px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  transition: color 0.2s, padding-left 0.2s;
}

.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--text); padding-left: 16px; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
}

.btn:hover::before { opacity: 1; }

.btn-sm {
  padding: 8px 18px;
  font-size: 13px;
  border-radius: 8px;
}

.btn-primary {
  background: linear-gradient(135deg, var(--purple), #9333EA);
  color: #fff;
  box-shadow: 0 2px 12px var(--purple-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--purple-glow);
}

.btn-teal {
  background: linear-gradient(135deg, var(--teal-dark), var(--teal));
  color: var(--bg);
  box-shadow: 0 2px 12px var(--teal-glow);
}

.btn-teal:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--teal-glow);
}

.btn-outline {
  background: transparent;
  color: var(--purple-light);
  border: 1px solid rgba(124, 58, 237, 0.3);
}

.btn-outline:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: var(--purple);
  box-shadow: 0 0 16px rgba(124, 58, 237, 0.12);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border-light);
  background: rgba(255, 255, 255, 0.03);
}

/* ==============================================
   HOME PAGE STYLES
   ============================================== */

.home-page .page-body {
  margin-left: 0;
  overflow: hidden;
}

body.home-page {
  overflow: hidden;
}

.home-page .home-footer {
  display: none;
}

/* Home Hero */
.home-hero {
  padding: 100px 48px 56px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.home-hero.home-hero-split {
  max-width: none;
  padding: 0 48px;
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}

.hero-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  /* Stretch so the Spear card on the right matches the widget stack on the
     left in total height (Fix #3 — equal-height columns). The inner
     justify-content on .hero-split-right keeps the spear centered
     horizontally; the spear card itself fills the column vertically. */
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}

/* Signed-up users see only the left column (widget stack) — the entire
   Spear card on the right is hidden and the grid collapses to a single,
   centered column. (Fix #5.)
   ─────────────────────────────────────────────────────────────────────
   BOTH selectors (html. and body.) are intentional:
     • html.dt-signedup  → set by the early inline <script> in <head> so
                           the right column is hidden *before* first paint
                           (no newsletter flash on refresh for signed-up users).
     • body.dt-signedup  → set by signup.js on DOMContentLoaded (legacy path,
                           kept for pages that don't have the early script).
*/
html.dt-signedup .hero-split-right,
body.dt-signedup .hero-split-right { display: none !important; }

html.dt-signedup .hero-split-grid,
body.dt-signedup .hero-split-grid {
  grid-template-columns: 1fr;
  max-width: 720px;
}

/* ── Center widgets + hero banner when signed up ──────────────────────── */
/* The widget column is left-aligned by default (suits the two-column layout).
   When the right column is gone we want everything centered. */
html.dt-signedup .dt-widgets,
body.dt-signedup .dt-widgets {
  margin-left: auto;
  margin-right: auto;
}

/* Hero banner: switch to flex so both spans sit on ONE line, centered.
   (The old grid approach stacked them in separate rows → 3-line wrap.) */
html.dt-signedup .dt-hero-banner,
body.dt-signedup .dt-hero-banner {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.35em;
  max-width: 1240px;   /* full-width so the long sentence fits */
  text-align: center;
}
html.dt-signedup .dt-hero-banner > span,
body.dt-signedup .dt-hero-banner > span {
  white-space: nowrap;   /* keep each span from wrapping internally */
  text-align: unset !important;
  padding: 0 !important;
}

/* The hero-split-left div carries an inline text-align:left — override it. */
html.dt-signedup .hero-split-left,
body.dt-signedup .hero-split-left {
  text-align: center;
}

/* Tighten vertical breathing room so all 4 widget cards fit on one screen
   without scrolling. The section has inline padding:32px 0 and gap:22px;
   !important overrides those inline values. */
html.dt-signedup .home-hero.home-hero-split,
body.dt-signedup .home-hero.home-hero-split {
  padding-top:    12px !important;
  padding-bottom: 12px !important;
  gap:            10px !important;
  min-height:     0    !important;   /* let content dictate height; no forced full-vh */
}

/* Also hide the dt-w-tag early (html class path) so the reserved tag space
   doesn't contribute to height before signup.js fires. */
html.dt-signedup .dt-w-tag { display: none; }

.hero-split-left {
  padding-top: 20px;
}

.hero-split-left .home-hero-actions {
  justify-content: flex-start;
}

.hero-split-right {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
}

.hero-split-right .compare-table-wrap {
  margin-top: 0;
}

.hero-split-right .compare-table {
  font-size: 12.5px;
}

.hero-split-right .compare-table thead th,
.hero-split-right .compare-table tbody td {
  padding: 10px 10px;
}

.hero-split-right .compare-table thead th:first-child {
  width: 110px;
}

.home-hero::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.08) 0%, rgba(0, 212, 170, 0.04) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: orb-drift 12s ease-in-out infinite;
}

.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 24px;
  background: rgba(0, 212, 170, 0.08);
  border: 1px solid rgba(0, 212, 170, 0.18);
  font-size: 13px;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
  animation: badge-float 3s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.06);
}

.badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px var(--teal);
  animation: pulse-dot 2s infinite;
}

.home-hero h1 {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--text) 0%, rgba(230, 237, 243, 0.85) 50%, var(--text) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-accent {
  background: linear-gradient(135deg, var(--teal), #34D399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

.home-hero-sub {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.home-hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Home sections */
.home-section {
  padding: 36px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

.home-section-header {
  margin-bottom: 24px;
}

.home-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(90deg, var(--purple-light), var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Ecosystem Selector Cards */
.eco-selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.eco-selector-card {
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: 14px;
  padding: 22px 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.eco-selector-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--teal));
  opacity: 0;
  transition: opacity 0.3s;
}

.eco-selector-card:hover {
  border-color: rgba(0, 212, 170, 0.25);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px var(--teal-glow);
}

.eco-selector-card:hover::before { opacity: 1; }

.eco-sel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.eco-sel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.eco-sel-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 6px;
  text-transform: uppercase;
  margin-left: auto;
  letter-spacing: 0.3px;
}

.eco-sel-badge.hot {
  background: rgba(239, 68, 68, 0.12);
  color: #F87171;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.08);
}

.eco-sel-badge.new {
  background: rgba(0, 212, 170, 0.12);
  color: var(--teal);
  box-shadow: 0 0 8px rgba(0, 212, 170, 0.08);
}

.eco-selector-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.eco-sel-chain {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.eco-sel-stats {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--text-muted);
}

.eco-sel-stats strong {
  color: var(--teal);
  text-shadow: 0 0 8px var(--teal-glow);
}

/* Dashboard Section */
.dashboard-section {
  padding-bottom: 48px;
}

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.dash-card {
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
}

.dash-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.dash-card-header {
  padding: 22px 22px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
}

.dash-card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.dash-card-header h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 3px;
}

.dash-card-sub {
  font-size: 12px;
  color: var(--text-dim);
}

/* Steps in dash */
.dash-steps {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.dash-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.dash-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-dark), var(--teal));
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-top: 1px;
  box-shadow: 0 2px 8px var(--teal-glow);
}

.dash-step p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

.dash-step strong {
  color: var(--text);
}

/* Referral CTA */
.dash-referral {
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.06), rgba(16, 185, 129, 0.03));
  border-top: 1px solid rgba(0, 212, 170, 0.12);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.dash-referral-text {
  flex: 1;
  min-width: 160px;
}

.dash-referral-text strong {
  font-size: 13px;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}

.dash-referral-text p {
  font-size: 11px;
  color: var(--text-muted);
}

/* dApp grid */
.dapp-grid {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  flex: 1;
}

.dapp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.dapp-item:hover {
  background: rgba(255, 255, 255, 0.03);
  transform: translateX(2px);
}

.dapp-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dapp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 6px currentColor;
}

.dapp-info strong {
  font-size: 13px;
  font-weight: 600;
}

.dapp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dapp-tvl {
  font-size: 12px;
  color: var(--text-muted);
}

.dapp-tvl strong {
  color: var(--text);
}

.dapp-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 6px;
  white-space: nowrap;
}

.dapp-tag.airdrop {
  background: rgba(0, 212, 170, 0.1);
  color: var(--teal);
  box-shadow: 0 0 6px rgba(0, 212, 170, 0.06);
}

.dapp-tag.planned {
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple-light);
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.06);
}

.dapp-tag.season {
  background: rgba(59, 130, 246, 0.1);
  color: #60A5FA;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.06);
}

.dash-more {
  display: block;
  padding: 14px 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  transition: all 0.2s;
  position: relative;
}

.dash-more::before {
  content: '';
  position: absolute;
  top: 0;
  left: 22px;
  right: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.dash-more:hover { color: var(--teal); text-shadow: 0 0 8px var(--teal-glow); }

/* Use cases */
.usecase-grid {
  padding: 16px 22px 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.usecase-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  background: rgba(10, 14, 23, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.25s;
}

.usecase-pill:hover {
  border-color: rgba(124, 58, 237, 0.25);
  color: var(--text);
  background: rgba(124, 58, 237, 0.04);
  transform: translateY(-1px);
}

.usecase-icon {
  color: var(--teal);
  font-size: 14px;
  filter: drop-shadow(0 0 4px var(--teal-glow));
}

/* Strategies */
.strategies-block {
  margin: 14px 18px 6px;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.04), rgba(16, 185, 129, 0.02));
  border: 1px solid rgba(0, 212, 170, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.strategies-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 212, 170, 0.08);
}

.strategies-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  text-shadow: 0 0 8px var(--teal-glow);
}

.strategies-sub {
  font-size: 10px;
  color: var(--text-dim);
}

.strategy-row {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.2s;
}

.strategy-row:hover { background: rgba(0, 212, 170, 0.03); }
.strategy-row:last-child { border-bottom: none; }

.strategy-name {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
}

.strategy-yield {
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  text-shadow: 0 0 6px var(--teal-glow);
}

.strategy-risk {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.strategy-risk.low {
  background: rgba(0, 212, 170, 0.1);
  color: var(--teal);
}

.strategy-risk.med {
  background: rgba(245, 158, 11, 0.1);
  color: var(--orange);
}

.strategy-risk.high {
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
}

/* How It Works */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.hiw-card {
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s ease;
  position: relative;
}

.hiw-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px var(--purple-glow);
  border-color: rgba(124, 58, 237, 0.2);
}

.hiw-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), #9333EA);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px var(--purple-glow);
}

.hiw-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.hiw-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Home Footer */
.home-footer {
  border-top: none;
  padding: 36px 32px;
  position: relative;
}

.home-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--purple), var(--teal), transparent);
}

.home-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
}

.home-footer p {
  font-size: 13px;
  color: var(--text-dim);
}

/* Telegram Join CTA (footer) */
.footer-telegram {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.btn-telegram-join {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #0088CC, #0099E5);
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 2px 12px rgba(0,136,204,0.25);
}
.btn-telegram-join:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-telegram-join svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}

/* ==============================================
   ECOSYSTEM PAGE STYLES
   ============================================== */

/* Ecosystem Hero */
.eco-hero {
  padding: 52px 48px 40px;
  position: relative;
  overflow: hidden;
}

.eco-hero::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -60px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.1) 0%, rgba(0, 212, 170, 0.05) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: orb-drift 15s ease-in-out infinite;
}

.eco-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-accent);
}

.eco-hero-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 12px;
  position: relative;
  z-index: 1;
}

.eco-hero h1 {
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  background: linear-gradient(135deg, var(--text) 0%, var(--purple-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.eco-hero-tagline {
  font-size: 16px;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 600px;
  position: relative;
  z-index: 1;
}

/* Sections */
.section {
  padding: 44px 48px;
  position: relative;
}

.section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 48px;
  right: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

.section:last-of-type::after { display: none; }

.section-title {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--purple-light), var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.section-text {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
  max-width: 600px;
}

/* Explainer */
.explainer-box {
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: 12px;
  padding: 28px;
  margin-top: 14px;
  max-width: 620px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.explainer-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--teal));
  opacity: 0.5;
}

.explainer-box p {
  font-size: 14px;
  color: var(--text);
  line-height: 1.85;
}

/* Steps */
.steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 22px;
  max-width: 600px;
}

.step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.2s;
}

.step:hover { transform: translateX(4px); }

.step-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), #9333EA);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 3px 12px var(--purple-glow);
}

.step-content h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 5px;
}

.step-content p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

.step-content a {
  color: var(--teal);
  font-weight: 500;
  transition: text-shadow 0.2s;
}

.step-content a:hover {
  text-decoration: underline;
  text-shadow: 0 0 8px var(--teal-glow);
}

.step-meta {
  display: inline-flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}

.step-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Project Cards */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.project-card {
  background: var(--bg-card);
  border: var(--glass-border);
  border-radius: 12px;
  padding: 22px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow: hidden;
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--teal));
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}

.project-card:hover {
  border-color: rgba(124, 58, 237, 0.25);
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 20px var(--purple-glow);
}

.project-card:hover::before { transform: scaleX(1); }

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

.project-card h4 {
  font-size: 15px;
  font-weight: 600;
}

.project-card-tag {
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple-light);
  font-weight: 600;
  box-shadow: 0 0 6px rgba(124, 58, 237, 0.06);
}

.project-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 12px;
}

.project-card-link {
  font-size: 12px;
  color: var(--teal);
  font-weight: 500;
  transition: text-shadow 0.2s;
}

.project-card-link:hover {
  text-decoration: underline;
  text-shadow: 0 0 8px var(--teal-glow);
}

/* Opportunities */
.opps-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.opp-item {
  background: var(--bg-card);
  border: var(--glass-border);
  border-left: 3px solid transparent;
  border-radius: 12px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}

.opp-item:hover {
  border-left-color: var(--teal);
  background: var(--bg-card-hover);
  transform: translateX(4px);
}

.opp-info h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}

.opp-info p {
  font-size: 12px;
  color: var(--text-muted);
}

.opp-tag {
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.opp-tag.yield {
  background: rgba(0, 212, 170, 0.1);
  color: var(--teal);
  box-shadow: 0 0 8px rgba(0, 212, 170, 0.06);
}

.opp-tag.airdrop {
  background: rgba(124, 58, 237, 0.1);
  color: var(--purple-light);
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.06);
}

.opp-tag.new {
  background: rgba(245, 158, 11, 0.1);
  color: var(--orange);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.06);
}

/* Risks */
.risks-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 600px;
}

.risk-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.risk-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
  animation: warning-pulse 2.5s ease-in-out infinite;
}

.risk-item p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
}

/* CTA Section */
.cta-section {
  text-align: center;
}

.cta-section .section-text {
  margin: 0 auto 28px;
}

/* Newsletter */
.newsletter-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  max-width: 420px;
  margin: 0 auto;
}

.newsletter-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(10, 14, 23, 0.8);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  transition: all 0.3s ease;
}

.newsletter-input::placeholder {
  color: var(--text-dim);
}

.newsletter-input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 0 16px rgba(124, 58, 237, 0.1);
}

/* Footer */
.footer {
  padding: 32px 48px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  position: relative;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-accent);
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 1024px) {
  .dash-grid {
    grid-template-columns: 1fr;
  }

  .hiw-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .eco-selector-grid {
    grid-template-columns: 1fr;
  }

  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-split-left {
    text-align: center;
  }

  .hero-split-left .home-hero-actions {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    background: rgba(10, 14, 23, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    width: min(var(--sidebar-width), 85vw);
  }

  .sidebar.open {
    transform: translateX(0);
    animation: slide-in-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hamburger {
    display: flex;
  }

  .topnav-logo {
    display: none;
  }

  .topnav-inner {
    padding-left: 16px;
    padding-right: 16px;
    gap: 8px;
  }

  .topnav-links { display: none; }

  /* Hide wallet, auth, and CTA on mobile — accessible via hamburger menu */
  .topnav-right {
    display: none;
  }

  .mobile-menu {
    display: flex;
  }

  .page-body {
    margin-left: 0;
  }

  .home-page .page-body {
    margin-left: 0;
  }

  .home-hero {
    padding: 52px 20px 36px;
  }

  .home-hero.home-hero-split {
    padding: 40px 16px 28px;
    height: auto !important;
    min-height: 0;
  }

  .hero-split-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-split-left {
    text-align: center;
  }

  .hero-split-left .home-hero-actions {
    justify-content: center;
  }

  .hero-split-right {
    padding: 16px 8px;
  }

  .home-hero::before {
    width: 300px;
    height: 300px;
  }

  .home-hero h1 {
    font-size: 28px;
  }

  .home-hero-sub { font-size: 14px; }
  .home-hero-sub br { display: none; }

  .home-section {
    padding: 24px 16px;
  }

  .hiw-grid {
    grid-template-columns: 1fr;
  }

  .usecase-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 28px 16px;
  }

  .section::after {
    left: 16px;
    right: 16px;
  }

  .eco-hero {
    padding: 36px 16px 28px;
  }

  .eco-hero h1 {
    font-size: 28px;
  }

  .section-title {
    font-size: 18px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .newsletter-form {
    flex-direction: column;
  }

  .home-footer-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .footer {
    padding: 24px 16px;
  }

  .opp-item {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ── Topnav: show logo icon only on mobile ── */
  .topnav-logo {
    display: flex !important;
  }
  .topnav-logo .topnav-logo-text {
    display: none;
  }

  /* ── Hero mobile: prevent text overflow ── */
  .home-hero h1 {
    font-size: 26px;
    word-wrap: break-word;
  }
  .home-hero-sub {
    font-size: 14px;
    padding: 0 4px;
  }
}

/* ===== MOBILE SPEAR CARD FIX ===== */
@media (max-width: 768px) {
  #the-spear {
    padding: 32px 20px 28px !important;
  }
  #the-spear h3 {
    font-size: 24px !important;
  }
  #spear-form {
    flex-direction: column !important;
  }
  #spear-form input,
  #spear-form button {
    width: 100% !important;
  }
}

/* ===== MOBILE SMALL (480px) ===== */
@media (max-width: 480px) {
  .topnav-inner {
    padding-left: 12px;
    padding-right: 12px;
    gap: 6px;
  }

  .home-hero h1 {
    font-size: 22px;
  }

  .home-hero-sub {
    font-size: 13px;
  }

  .eco-hero h1 {
    font-size: 24px;
  }

  .section {
    padding: 20px 12px;
  }

  .home-section {
    padding: 20px 12px;
  }
}

/* ===== EXPANDED ECOSYSTEM GRID ===== */
.eco-grid-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

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

@media (max-width: 480px) {
  .eco-grid-full {
    grid-template-columns: 1fr;
  }
}

/* ===== COMPARISON TABLE ===== */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 32px auto 0;
  max-width: 900px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 600px;
}

.compare-table thead th {
  padding: 18px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  border-bottom: 1px solid var(--border-light);
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}

.compare-table thead th:first-child {
  text-align: left;
  width: 140px;
}

.compare-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.compare-table tbody td {
  padding: 14px 16px;
  color: var(--text-muted);
  text-align: center;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  line-height: 1.5;
}

.compare-table tbody tr:last-child td {
  border-bottom: none;
}

.compare-table tbody tr:hover td {
  background: rgba(255,255,255,0.02);
}

.compare-label {
  text-align: left !important;
  font-weight: 600;
  color: var(--text-dim) !important;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.compare-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid;
  margin: 2px 3px;
  white-space: nowrap;
}

.compare-risk {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.compare-risk.low {
  background: rgba(0,212,170,0.12);
  color: var(--teal);
}

.compare-risk.med {
  background: rgba(245,158,11,0.12);
  color: var(--orange);
}

.compare-risk.high {
  background: rgba(239,68,68,0.12);
  color: var(--red);
}

@media (max-width: 768px) {
  .compare-table-wrap {
    margin: 24px 0 0;
    border-radius: 12px;
    max-width: 100%;
  }
  .compare-table {
    font-size: 12px;
  }
  .compare-table thead th,
  .compare-table tbody td {
    padding: 10px 10px;
  }
}

.eco-grid-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  transition: all 0.25s ease;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}

.eco-grid-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

.eco-grid-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
  color: #fff;
}

.eco-grid-card-info {
  flex: 1;
  min-width: 0;
}

.eco-grid-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.eco-grid-card-ticker {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== GOOGLE FINANCE-STYLE CRYPTO DETAIL ===== */
.crypto-page {
  padding-top: calc(var(--topnav-height) + var(--ticker-height));
  min-height: 100vh;
}

.crypto-page .page-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* Price header */
.crypto-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.crypto-header-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.crypto-header-info {
  flex: 1;
}

.crypto-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.crypto-header-name {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
}

.crypto-header-ticker {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-hover);
  padding: 3px 10px;
  border-radius: 6px;
}

.crypto-price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.crypto-price {
  font-size: 42px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.crypto-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
}

.crypto-change.up {
  color: var(--up-color);
  background: rgba(0,212,170,0.1);
}

.crypto-change.down {
  color: var(--down-color);
  background: rgba(239,68,68,0.1);
}

/* Time range tabs */
.crypto-timerange {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  width: fit-content;
  border: 1px solid var(--border);
}

.crypto-timerange button {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.crypto-timerange button.active,
.crypto-timerange button:hover {
  background: var(--input-border);
  color: var(--text);
}

/* Chart placeholder */
.crypto-chart {
  width: 100%;
  height: 280px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 32px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crypto-chart-note {
  font-size: 13px;
  color: var(--text-muted);
}

.crypto-metrics-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.crypto-chart-line {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.crypto-chart-line svg {
  width: 100%;
  height: 100%;
}

/* Stats grid */
.crypto-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

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

.crypto-stat-card {
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.crypto-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.crypto-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.crypto-stat-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* About section */
.crypto-about {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 28px;
  margin-bottom: 32px;
}

.crypto-about h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 12px;
}

.crypto-about p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Key metrics table */
.crypto-metrics {
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 24px;
  margin-bottom: 32px;
}

.crypto-metrics h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.crypto-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

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

.crypto-metric-key {
  font-size: 13px;
  color: var(--text-muted);
}

.crypto-metric-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Related assets */
.crypto-related {
  margin-top: 32px;
}

.crypto-related h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.crypto-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .crypto-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .crypto-price {
    font-size: 32px;
  }
  .crypto-header-name {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  .crypto-related-grid {
    grid-template-columns: 1fr;
  }
  .crypto-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 375px SMALL MOBILE FIXES ===== */
@media (max-width: 375px) {
  .topnav-inner {
    padding-left: 12px;
    padding-right: 8px;
    gap: 4px;
  }

  .connector-toggle {
    padding: 8px 10px;
    font-size: 12px;
  }

  .home-hero h1 {
    font-size: 24px;
  }

  .home-hero-sub {
    font-size: 13px;
  }

  .home-hero {
    padding: 40px 16px 28px;
  }

  .home-section {
    padding: 20px 12px;
  }

  .crypto-price {
    font-size: 28px;
  }

  .crypto-header-name {
    font-size: 20px;
  }

  .crypto-page .page-content {
    padding: 20px 12px 40px;
  }
}

/* ===== MOBILE TOUCH TARGET & TEXT FIXES ===== */
@media (max-width: 768px) {
  /* Ensure all sidebar nav items meet 44px min touch target */
  .sidebar-nav-item {
    min-height: 44px;
    padding: 12px 14px;
  }

  /* Ensure connector items meet 44px touch target */
  .connector-item {
    min-height: 44px;
    padding: 12px 12px;
  }

  /* Prevent body text from going below 14px on mobile */
  .home-hero-sub,
  .crypto-about p {
    font-size: max(14px, 1em);
  }

  /* Prevent very small label text from being unreadable */
  .sidebar-section-title {
    font-size: 11px;
  }

  /* Mobile menu links need 44px touch targets */
  .mobile-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ===========================================================
   SETTINGS PAGE — Left Sidebar Layout
   =========================================================== */

/* Layout */
.settings-layout {
  display: flex;
  min-height: calc(100vh - var(--topnav-height) - var(--ticker-height));
  padding-top: calc(var(--topnav-height) + var(--ticker-height));
}

/* Settings Left Sidebar */
.settings-sidebar {
  width: 180px;
  min-width: 180px;
  padding: 24px 0 24px 16px;
  border-right: 1px solid var(--border);
  position: sticky;
  top: calc(var(--topnav-height) + var(--ticker-height));
  height: fit-content;
}
.settings-nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}
.settings-nav-item:hover { background: var(--input-bg); color: var(--text); }
.settings-nav-item.active {
  background: rgba(0,212,170,0.08);
  color: #fff;
  border-left: 3px solid var(--teal);
  margin-left: -3px;
}
.settings-nav-icon { font-size: 16px; width: 20px; text-align: center; }

/* Settings Main */
.settings-main {
  flex: 1;
  padding: 24px 32px 60px;
  min-width: 0;
}

/* Section content panels */
.settings-section-content { display: none; }
.settings-section-content.active { display: block; }

/* Settings card (for field groups) */
.settings-card {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  overflow: hidden;
}
.settings-field {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--input-bg);
}
.settings-field:last-child { border-bottom: none; }
.field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 140px;
}
.field-value-ro {
  font-size: 13px;
  color: var(--text);
  font-family: monospace;
}

/* Login Card */
.login-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--input-border);
  border-radius: 16px;
  padding: 40px;
  max-width: 400px;
  margin: 0 auto 48px;
  text-align: center;
}
.login-card .lock-icon { font-size: 2.5rem; margin-bottom: 16px; display: block; }
.login-card h2 { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
.login-card .login-subtitle { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 24px; }
.login-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-form label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.login-form input {
  padding: 12px 16px; border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--bg-hover);
  color: var(--text); font-size: 14px; outline: none;
  width: 100%; box-sizing: border-box;
}
.login-form input:focus { border-color: var(--purple); }
.login-form button {
  padding: 12px; border-radius: 8px; border: none;
  background: var(--gradient-primary);
  color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; margin-top: 8px;
}

/* ---- Platform Tabs ---- */
.st-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
.st-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.st-tab:hover { color: var(--text); }
.st-tab.active {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
.st-tab-content { display: none; }
.st-tab-content.active { display: block; }

/* ---- Sub-tabs ---- */
.st-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.st-subtab {
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-radius: 100px;
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.st-subtab:hover { border-color: rgba(0,212,170,0.3); color: var(--text-muted); }
.st-subtab.active {
  background: linear-gradient(135deg, rgba(0,212,170,0.15), rgba(124,58,237,0.15));
  border-color: rgba(0,212,170,0.3);
  color: #fff;
}
.st-subtab-content { display: none; }
.st-subtab-content.active { display: block; }

/* ---- Shared Buttons ---- */
.st-btn-teal {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  border: none;
  border-radius: 10px;
  background: var(--gradient-btn-teal);
  color: var(--bg);
  cursor: pointer;
  transition: all 0.2s ease;
}
.st-btn-teal:hover { box-shadow: 0 4px 15px rgba(0,212,170,0.3); transform: translateY(-1px); }
.st-btn-outline {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.st-btn-outline:hover { border-color: var(--teal); color: var(--teal); }
.st-btn-ghost {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}
.st-btn-ghost:hover { border-color: rgba(255,255,255,0.15); color: var(--text-muted); }

/* ---- Mailing List Stats ---- */
.ml-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.ml-stat-card {
  text-align: center;
  padding: 20px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  backdrop-filter: var(--glass-blur);
}
.ml-stat-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.ml-stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---- Mailing List Toolbar ---- */
.ml-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.ml-search {
  flex: 1;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: var(--input-bg);
  color: var(--text);
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
}
.ml-search:focus { border-color: var(--teal); }

/* ---- Mailing List Table ---- */
.ml-table-wrap { overflow-x: auto; }
.ml-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ml-table th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}
.ml-table td {
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--text);
}
.ml-table tr:hover td { background: rgba(255,255,255,0.02); }
.ml-badge-active {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: var(--badge-live-bg);
  color: var(--teal);
}
.ml-badge-inactive {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-hover);
  color: var(--text-dim);
}
.ml-action-btn {
  background: none;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  margin-right: 4px;
  transition: all 0.2s;
}
.ml-action-btn:hover { border-color: var(--teal); color: var(--teal); }
.ml-action-del:hover { border-color: var(--red); color: var(--red); }

/* ---- Placeholder Tabs ---- */
.st-placeholder-tab {
  text-align: center;
  padding: 60px 24px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.st-placeholder-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.st-placeholder-tab h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.st-placeholder-tab p { color: var(--text-muted); font-size: 14px; margin-bottom: 24px; }
.st-placeholder-fields {
  max-width: 360px;
  margin: 0 auto 24px;
  text-align: left;
}
.st-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.st-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 100px;
}
.st-coming-badge {
  display: inline-block;
  padding: 6px 20px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-hover);
  color: var(--text-dim);
  letter-spacing: 0.5px;
}

/* ---- Template Cards ---- */
.tpl-card {
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  margin-bottom: 12px;
  transition: border-color 0.2s;
}
.tpl-card:hover { border-color: rgba(0,212,170,0.2); }
.tpl-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.tpl-card-name { font-size: 15px; font-weight: 700; }
.tpl-freq-badge {
  padding: 3px 12px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(124,58,237,0.15);
  color: var(--purple);
  text-transform: capitalize;
}
.tpl-card-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.tpl-card-actions { display: flex; gap: 8px; }

/* ---- Template Editor ---- */
.te-field { margin-bottom: 24px; }
.te-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.te-input {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: var(--input-bg);
  color: var(--text);
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.te-input:focus { border-color: var(--teal); }
.te-input:disabled { opacity: 0.4; cursor: not-allowed; }

/* Frequency pills */
.te-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.te-pill {
  padding: 8px 20px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--input-border);
  background: rgba(255,255,255,0.03);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.te-pill:hover { border-color: rgba(0,212,170,0.3); color: var(--text-muted); }
.te-pill.active {
  background: linear-gradient(135deg, rgba(0,212,170,0.2), rgba(124,58,237,0.2));
  border-color: rgba(0,212,170,0.4);
  color: #fff;
}

/* Content blocks */
.te-blocks { display: flex; flex-direction: column; gap: 8px; }
.te-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color 0.2s;
}
.te-block:hover { border-color: rgba(255,255,255,0.1); }
.te-block-left { display: flex; align-items: center; gap: 12px; }
.te-block-handle { color: var(--text-dim); cursor: grab; font-size: 14px; }
.te-block-icon { font-size: 20px; }
.te-block-name { font-size: 14px; font-weight: 600; }
.te-block-desc { font-size: 11px; color: var(--text-muted); }
.te-block-right { display: flex; align-items: center; gap: 12px; }
.te-block-arrows { display: flex; flex-direction: column; gap: 2px; }
.te-arrow {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 10px;
  padding: 2px 6px;
  cursor: pointer;
  line-height: 1;
}
.te-arrow:hover { border-color: var(--teal); color: var(--teal); }
.te-arrow:disabled { opacity: 0.2; cursor: not-allowed; }

/* Toggle switch */
.te-toggle { position: relative; display: inline-block; width: 40px; height: 22px; }
.te-toggle input { opacity: 0; width: 0; height: 0; }
.te-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-light);
  border-radius: 22px;
  cursor: pointer;
  transition: 0.3s;
}
.te-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: var(--text-dim);
  border-radius: 50%;
  transition: 0.3s;
}
.te-toggle input:checked + .te-toggle-slider { background: rgba(0,212,170,0.3); }
.te-toggle input:checked + .te-toggle-slider::before {
  transform: translateX(18px);
  background: var(--teal);
}

/* ---- Template Preview ---- */
.te-preview {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0;
  overflow: hidden;
}
.tp-header {
  text-align: center;
  padding: 32px 20px 24px;
  background: linear-gradient(135deg, rgba(0,212,170,0.08), rgba(124,58,237,0.08));
  border-bottom: 1px solid var(--border);
}
.tp-logo { font-size: 14px; font-weight: 800; color: var(--teal); margin-bottom: 8px; }
.tp-title { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.tp-freq { font-size: 12px; color: var(--text-muted); }
.tp-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-dim);
  font-size: 13px;
}
.tp-block {
  padding: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tp-block-header {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--teal);
}
.tp-block-body {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.tp-footer {
  text-align: center;
  padding: 20px;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid var(--input-bg);
}

/* ---- Settings Responsive ---- */
@media (max-width: 900px) {
  .settings-layout { flex-direction: column; }
  .settings-sidebar {
    width: 100%;
    min-width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    position: static;
  }
  .settings-nav { flex-direction: row; overflow-x: auto; gap: 4px; -webkit-overflow-scrolling: touch; }
  .settings-nav-item { white-space: nowrap; padding: 8px 14px; }
  .settings-nav-item.active { border-left: none; margin-left: 0; border-bottom: 2px solid var(--teal); border-radius: 8px 8px 0 0; }
  .settings-main { padding: 20px 16px 60px; }
}
@media (max-width: 768px) {
  .ml-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ml-stat-value { font-size: 22px; }
  .ml-toolbar { flex-direction: column; }
  .te-block-left { gap: 8px; }
  .te-block-desc { display: none; }
}
@media (max-width: 600px) {
  .login-card { padding: 24px; }
  .ml-table th:nth-child(3),
  .ml-table td:nth-child(3) { display: none; }
  .settings-field { flex-direction: column; align-items: flex-start; gap: 8px; }
  .field-label { min-width: auto; }
}