/**
 * SPARK — Космическая тема DEX
 * Глубокий космос с планетами, звездами и неоновым свечением
 */

/* Шрифты SPARK — единый набор по docs/TYPOGRAPHY.md */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Rajdhani:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@400;500;600;700&display=optional');

/* Типографика — переменные для всех страниц */
:root {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Rajdhani', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  /* Цифры: шрифт без точек в нулях, лёгкий и читаемый */
  --font-numbers: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* По стандартам TYPOGRAPHY.md */
  --font-size-heading: 14px;
  --font-size-body: 14px;
  --font-size-caption: 12px;
  --font-size-number: 14px;
  --font-weight-heading: 600;
  --font-weight-body: 600;
  --font-weight-caption: 400;
}

/* Космическая тема - Глубокий космос + Неоновое свечение */
:root,
[data-theme="dark"],
.theme-dark {
  /* Color Palette from image_0.png */
  --neon-red: #B00000;
  --neon-red-glow: rgba(176, 0, 0, 0.8);
  --gold-accent: #FFC107;
  --gold-glow: rgba(255, 193, 7, 0.6);
  --star-blue: #4A9FFF;
  --star-blue-bright: #7DBFFF;
  
  /* Cosmic Backgrounds */
  --bg-primary: #0a0614;
  --bg-secondary: #0f0a1a;
  --bg-card: rgba(20, 15, 30, 0.7);
  --bg-card-hover: rgba(25, 20, 35, 0.85);
  
  /* Borders & Dividers */
  --border: rgba(79, 70, 229, 0.2);
  --border-hover: rgba(139, 92, 246, 0.4);
  --border-glow: rgba(79, 70, 229, 0.5);
  
  /* Accent Colors */
  --accent: var(--star-blue);
  --accent-dim: #3a7fd4;
  --accent-electric: var(--gold-accent);
  --accent-hover: var(--star-blue-bright);
  
  /* Text */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  
  /* Balance numbers — nodemon-style green */
  --balance-green: #00BC00;
  /* Special Effects */
  --header-bg: rgba(10, 6, 20, 0.75);
  --input-bg: rgba(15, 10, 26, 0.9);
  --shadow-glow: 0 0 40px rgba(74, 159, 255, 0.3);
  --shadow-strong: 0 15px 60px rgba(0, 0, 0, 0.8);
  --shadow-red-glow: 0 0 30px var(--neon-red-glow);
  --shadow-gold-glow: 0 0 25px var(--gold-glow);

  /* Vault (public/vault/wallet.html) — те же токены на любой странице с theme-cosmic */
  --vault-lime: #166534;
  --vault-lime-glow: rgba(22, 101, 52, 0.5);
  --vault-gold: #ffc107;
  --vault-gold-glow: rgba(255, 193, 7, 0.5);
  --vault-danger: #ff4444;
  --vault-glass: rgba(8, 18, 28, 0.45);
  --vault-border: rgba(22, 101, 52, 0.45);
  --vault-border-gold: rgba(255, 193, 7, 0.3);
  --vault-panel-glow: rgba(22, 101, 52, 0.2);
  --vault-panel-glow-blue: rgba(74, 159, 255, 0.12);

  /* Барахолка / mint: уровни CORE → ORIGIN (экран — лайм; тиры — только акценты табов/бейджей) */
  --tier-core: #9fe078;
  --tier-core-border: rgba(159, 224, 120, 0.55);
  --tier-prime: var(--star-blue);
  --tier-prime-bright: var(--star-blue-bright);
  /* APEX = малиновый (по палитре владельца) */
  --tier-apex: #d946ef;
  --tier-apex-border: rgba(217, 70, 239, 0.55);
  /* ULTRA = фиолетовый (по палитре владельца) */
  --tier-ultra: #7c3aed;
  --tier-ultra-border: rgba(124, 58, 237, 0.55);
  --tier-origin: #ff8a3d;
  --tier-origin-hot: #ff5c1a;
  --tier-origin-glow: rgba(255, 120, 60, 0.38);
}

/* Светлая тема */
[data-theme="light"],
.theme-light {
  --balance-green: #0d8b3d;
  --bg-primary: #f0f4f8;
  --bg-secondary: #e2e8f0;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-card-hover: rgba(248, 250, 252, 0.95);
  --border: rgba(100, 116, 139, 0.3);
  --border-hover: rgba(74, 159, 255, 0.5);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --header-bg: rgba(255, 255, 255, 0.9);
  --input-bg: rgba(255, 255, 255, 0.95);
  --vault-lime: #166534;
  --vault-lime-glow: rgba(22, 101, 52, 0.5);
  --tier-core: #6fb84a;
  --tier-core-border: rgba(90, 160, 60, 0.45);
  --tier-prime: #2563eb;
  --tier-prime-bright: #3b82f6;
  /* APEX = малиновый (по палитре владельца) */
  --tier-apex: #d946ef;
  --tier-apex-border: rgba(217, 70, 239, 0.45);
  --tier-ultra: #7c3aed;
  --tier-ultra-border: rgba(124, 58, 237, 0.4);
  --tier-origin: #ea580c;
  --tier-origin-hot: #c2410c;
  --tier-origin-glow: rgba(234, 88, 12, 0.28);
  --vault-gold: #ffc107;
  --vault-gold-glow: rgba(255, 193, 7, 0.5);
  --vault-danger: #ff4444;
  --vault-glass: rgba(8, 18, 28, 0.45);
  --vault-border: rgba(22, 101, 52, 0.45);
  --vault-border-gold: rgba(255, 193, 7, 0.3);
  --vault-panel-glow: rgba(22, 101, 52, 0.2);
  --vault-panel-glow-blue: rgba(74, 159, 255, 0.12);
}

[data-theme="light"] body::before,
.theme-light body::before {
  background: radial-gradient(ellipse at 80% 70%, rgba(74, 159, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    #f0f4f8;
}

[data-theme="light"] body,
.theme-light body {
  background-color: #f0f4f8;
}

/* Главная страница: светлая тема не применяется */
[data-theme="light"] body.flow-canvas-home,
.theme-light body.flow-canvas-home {
  --bg-primary: #0a0614;
  --bg-secondary: #0f0a1a;
  --bg-card: rgba(20, 15, 30, 0.7);
  --bg-card-hover: rgba(25, 20, 35, 0.85);
  --border: rgba(79, 70, 229, 0.2);
  --border-hover: rgba(139, 92, 246, 0.4);
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;
  --header-bg: rgba(10, 6, 20, 0.75);
  --input-bg: rgba(15, 10, 26, 0.9);
  background-color: #020611 !important;
}
[data-theme="light"] body.flow-canvas-home::before,
.theme-light body.flow-canvas-home::before {
  background: radial-gradient(ellipse at 80% 70%, rgba(74, 159, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    #0a0614 !important;
}

/* Светлая тема: читабельность (тёмный текст на светлом фоне) */
[data-theme="light"] body:not(.flow-canvas-home) .spark-plasma-logo,
.theme-light body:not(.flow-canvas-home) .spark-plasma-logo {
  -webkit-text-stroke: 1px #0d9488 !important;
  color: transparent !important;
}
[data-theme="light"] body:not(.flow-canvas-home) .promo-tile,
.theme-light body:not(.flow-canvas-home) .promo-tile {
  background: rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 0 1px rgba(15, 23, 42, 0.3), inset 0 0 15px rgba(15, 23, 42, 0.08) !important;
}
[data-theme="light"] body:not(.flow-canvas-home) .promo-tile:hover,
.theme-light body:not(.flow-canvas-home) .promo-tile:hover {
  background: rgba(15, 23, 42, 0.12) !important;
}
[data-theme="light"] body:not(.flow-canvas-home) .promo-title,
.theme-light body:not(.flow-canvas-home) .promo-title {
  color: #0f172a !important;
  text-shadow: 0 0 5px rgba(15, 23, 42, 0.2) !important;
}
[data-theme="light"] body:not(.flow-canvas-home) .next-section h2,
.theme-light body:not(.flow-canvas-home) .next-section h2 {
  color: #0d9488 !important;
  text-shadow: 0 0 20px rgba(13, 148, 136, 0.4) !important;
}
[data-theme="light"] body:not(.flow-canvas-home) .next-section p,
.theme-light body:not(.flow-canvas-home) .next-section p {
  color: #475569 !important;
}
[data-theme="light"] body:not(.flow-canvas-home) .sector-card,
.theme-light body:not(.flow-canvas-home) .sector-card {
  border-color: rgba(15, 23, 42, 0.2) !important;
  background: rgba(255, 255, 255, 0.6) !important;
}
[data-theme="light"] body:not(.flow-canvas-home) .sector-card h3,
.theme-light body:not(.flow-canvas-home) .sector-card h3 {
  color: #0f172a !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

/* Светлая тема кошелька: тёмно-зелёный акцент, без свечения, смолянистый чёрный */
[data-theme="light"] body.spark-vault-body,
.theme-light body.spark-vault-body {
  background: #000000 !important;
  color: #0f172a !important;
}
[data-theme="light"] body.spark-vault-body::before,
.theme-light body.spark-vault-body::before {
  background: #000000 !important;
}
[data-theme="light"] body.spark-vault-body .spark-dashboard-panel,
.theme-light body.spark-vault-body .spark-dashboard-panel {
  background: rgba(0, 0, 0, 0.95) !important;
  border-bottom-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .vault-page-header,
.theme-light body.spark-vault-body .vault-page-header {
  background: rgba(0, 0, 0, 0.98) !important;
  border-color: #0d5c3d !important;
  color: #f8fafc !important;
}
[data-theme="light"] body.spark-vault-body .vault-page-header .label,
.theme-light body.spark-vault-body .vault-page-header .label {
  color: #94a3b8 !important;
}
[data-theme="light"] body.spark-vault-body .vault-sidebar .pilot-info,
[data-theme="light"] body.spark-vault-body .vault-sidebar .avatar-slot,
.theme-light body.spark-vault-body .vault-sidebar .pilot-info,
.theme-light body.spark-vault-body .vault-sidebar .avatar-slot {
  border-color: #0d5c3d !important;
}
/* Ранг пилота на светлом фоне — тёмно-зелёный для читабельности */
[data-theme="light"] body.spark-vault-body .vault-avatar-rank-label,
[data-theme="light"] body.spark-vault-body .vault-avatar-rank,
[data-theme="light"] body.spark-vault-body .vault-sidebar .pilot-rank,
.theme-light body.spark-vault-body .vault-avatar-rank-label,
.theme-light body.spark-vault-body .vault-avatar-rank,
.theme-light body.spark-vault-body .vault-sidebar .pilot-rank {
  color: #0d5c3d !important;
  text-shadow: none !important;
}
/* Поиск в блокчейне — светлая тема: читаемый ввод, видимый курсор */
[data-theme="light"] body.spark-vault-body .blockchain-search-content,
.theme-light body.spark-vault-body .blockchain-search-content {
  background: #ffffff !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-header h2,
.theme-light body.spark-vault-body .blockchain-search-header h2 {
  color: #0f172a !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-desc,
.theme-light body.spark-vault-body .blockchain-search-desc {
  color: #64748b !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-input,
.theme-light body.spark-vault-body .blockchain-search-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  caret-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-input:focus,
.theme-light body.spark-vault-body .blockchain-search-input:focus {
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-input::placeholder,
.theme-light body.spark-vault-body .blockchain-search-input::placeholder {
  color: #94a3b8 !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-input-wrap,
.theme-light body.spark-vault-body .blockchain-search-input-wrap {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-input-wrap:focus-within,
.theme-light body.spark-vault-body .blockchain-search-input-wrap:focus-within {
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-input-wrap .blockchain-search-input,
.theme-light body.spark-vault-body .blockchain-search-input-wrap .blockchain-search-input {
  background: #ffffff !important;
  border-color: transparent !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-submit,
.theme-light body.spark-vault-body .blockchain-search-submit {
  background: rgba(13, 92, 61, 0.08) !important;
  color: #0d5c3d !important;
  border-left-color: #cbd5e1 !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-submit:hover,
.theme-light body.spark-vault-body .blockchain-search-submit:hover {
  background: rgba(13, 92, 61, 0.14) !important;
  color: #0a4a32 !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-empty,
.theme-light body.spark-vault-body .blockchain-search-empty {
  color: #475569 !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-item,
.theme-light body.spark-vault-body .blockchain-search-item {
  background: #f8fafc !important;
  border-color: #e2e8f0 !important;
  color: #0f172a !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-item:hover,
.theme-light body.spark-vault-body .blockchain-search-item:hover {
  background: rgba(13, 92, 61, 0.08) !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-item .label,
.theme-light body.spark-vault-body .blockchain-search-item .label {
  color: #64748b !important;
}
[data-theme="light"] body.spark-vault-body .blockchain-search-item .value,
.theme-light body.spark-vault-body .blockchain-search-item .value {
  color: var(--balance-green) !important;
}
[data-theme="light"] body.spark-vault-body .glass-panel,
.theme-light body.spark-vault-body .glass-panel {
  background: #ffffff !important;
  border-color: #0d5c3d !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
}
[data-theme="light"] body.spark-vault-body .neon-text,
.theme-light body.spark-vault-body .neon-text {
  color: #0d5c3d !important;
  text-shadow: none !important;
}
[data-theme="light"] body.spark-vault-body #pilot-id,
.theme-light body.spark-vault-body #pilot-id {
  color: #1a1a1a !important;
}
[data-theme="light"] body.spark-vault-body .net-status,
.theme-light body.spark-vault-body .net-status {
  color: #64748b !important;
}
[data-theme="light"] body.spark-vault-body .net-status.online,
.theme-light body.spark-vault-body .net-status.online {
  color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .asset-group h3,
.theme-light body.spark-vault-body .asset-group h3 {
  color: #0f172a !important;
  font-weight: 600 !important;
}
[data-theme="light"] body.spark-vault-body .asset-card,
.theme-light body.spark-vault-body .asset-card {
  background: rgba(13, 92, 61, 0.08) !important;
  border-left-color: #94a3b8 !important;
}
[data-theme="light"] body.spark-vault-body .asset-card.accent-lime,
.theme-light body.spark-vault-body .asset-card.accent-lime {
  border-left-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .asset-card .amount,
.theme-light body.spark-vault-body .asset-card .amount {
  color: var(--balance-green) !important;
}
[data-theme="light"] body.spark-vault-body .asset-card .symbol,
.theme-light body.spark-vault-body .asset-card .symbol {
  color: #64748b !important;
}
[data-theme="light"] body.spark-vault-body .vault-actions .s-btn,
.theme-light body.spark-vault-body .vault-actions .s-btn {
  color: #0f172a !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .vault-actions .btn-lime,
.theme-light body.spark-vault-body .vault-actions .btn-lime {
  background: rgba(13, 92, 61, 0.15) !important;
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-header h1,
.theme-light body.spark-vault-body .vault-main .vault-header h1 {
  color: #0f172a !important;
}
[data-theme="light"] body.spark-vault-body .filter-bar span,
.theme-light body.spark-vault-body .filter-bar span {
  color: #64748b !important;
}
[data-theme="light"] body.spark-vault-body .filter-bar span:hover,
[data-theme="light"] body.spark-vault-body .filter-bar span.active,
.theme-light body.spark-vault-body .filter-bar span:hover,
.theme-light body.spark-vault-body .filter-bar span.active {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .nft-slot-empty,
.theme-light body.spark-vault-body .nft-slot-empty {
  color: #64748b !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .nft-slot-empty:hover,
.theme-light body.spark-vault-body .nft-slot-empty:hover {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .activity-log,
.theme-light body.spark-vault-body .activity-log {
  color: #475569 !important;
}
[data-theme="light"] body.spark-vault-body .activity-log .log-entry.warning,
.theme-light body.spark-vault-body .activity-log .log-entry.warning {
  color: #b45309 !important;
}
[data-theme="light"] body.spark-vault-body .tx-amount.tx-in,
.theme-light body.spark-vault-body .tx-amount.tx-in {
  color: var(--balance-green) !important;
}
/* Поиск: пассивно — серая окантовка, при фокусе — тёмно-зелёный */
[data-theme="light"] body.spark-vault-body .vault-search,
.theme-light body.spark-vault-body .vault-search {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  color: #0f172a !important;
}
[data-theme="light"] body.spark-vault-body .vault-search:focus,
.theme-light body.spark-vault-body .vault-search:focus {
  border-color: #0d5c3d !important;
  box-shadow: 0 0 0 2px rgba(13, 92, 61, 0.2) !important;
}
[data-theme="light"] body.spark-vault-body .vault-search::placeholder,
.theme-light body.spark-vault-body .vault-search::placeholder {
  color: #94a3b8 !important;
}
/* Вкладки, кнопки валюты, колонки — тёмно-зелёный */
[data-theme="light"] body.spark-vault-body .vault-tab:hover,
.theme-light body.spark-vault-body .vault-tab:hover {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .vault-tab.active,
.theme-light body.spark-vault-body .vault-tab.active {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
  text-shadow: none !important;
}
[data-theme="light"] body.spark-vault-body .vault-currency-toggle-btn:hover,
.theme-light body.spark-vault-body .vault-currency-toggle-btn:hover,
[data-theme="light"] body.spark-vault-body .vault-currency-btn:hover,
.theme-light body.spark-vault-body .vault-currency-btn:hover {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .vault-currency-toggle-btn.active-usd,
.theme-light body.spark-vault-body .vault-currency-toggle-btn.active-usd,
[data-theme="light"] body.spark-vault-body .vault-currency-btn.active,
.theme-light body.spark-vault-body .vault-currency-btn.active {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
}
/* Цифры — лёгкие, изящные */
[data-theme="light"] body.spark-vault-body .vault-data-row .balance-cell,
.theme-light body.spark-vault-body .vault-data-row .balance-cell {
  color: var(--balance-green) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-family: var(--font-numbers) !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-data-row .value-cell,
.theme-light body.spark-vault-body .vault-main .vault-data-row .value-cell {
  color: #A460F2 !important;
}
[data-theme="light"] body.spark-vault-body .vault-data-row .token-change-positive,
.theme-light body.spark-vault-body .vault-data-row .token-change-positive {
  color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .vault-col-headers,
.theme-light body.spark-vault-body .vault-col-headers {
  color: #475569 !important;
}
[data-theme="light"] body.spark-vault-body .activity-log,
.theme-light body.spark-vault-body .activity-log {
  color: #334155 !important;
}
[data-theme="light"] body.spark-vault-body .asset-card.accent-lime .amount,
.theme-light body.spark-vault-body .asset-card.accent-lime .amount {
  color: var(--balance-green) !important;
  text-shadow: none !important;
}
[data-theme="light"] body.spark-vault-body .vault-actions .btn-outline:hover,
.theme-light body.spark-vault-body .vault-actions .btn-outline:hover {
  border-color: #1a1a1a !important;
  color: #1a1a1a !important;
}

/* === Шлифовка светлой темы: эталоны из docs/TYPOGRAPHY.md === */
/* 1. Заголовки панелей — как Sell, Buy (формат и цвет) */
[data-theme="light"] body.spark-vault-body .asset-group h3,
.theme-light body.spark-vault-body .asset-group h3,
[data-theme="light"] body.spark-vault-body .terminal-tab.neon-text,
.theme-light body.spark-vault-body .terminal-tab.neon-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  letter-spacing: 0.1em !important;
}
/* 6. Кнопки навигации (DEPOSIT, SEND, OPEN SPACE) — как Sell, Buy */
[data-theme="light"] body.spark-vault-body .vault-header-btn,
[data-theme="light"] body.spark-vault-body .btn-exit,
.theme-light body.spark-vault-body .vault-header-btn,
.theme-light body.spark-vault-body .btn-exit {
  font-size: 14px !important;
  font-weight: 600 !important;
}
/* ТОРГОВЛЯ и NFT — без свечения, высота как у остальных */
body.spark-vault-body .vault-header-btn.btn-trade,
body.spark-vault-body .vault-header-btn.btn-nft {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
body.spark-vault-body .vault-header-btn.btn-trade:hover,
body.spark-vault-body .vault-header-btn.btn-nft:hover {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}
/* Кнопки навигации (Tokens, LPs, NFTs) — как Sell, Buy */
[data-theme="light"] body.spark-vault-body .vault-main .vault-tab,
.theme-light body.spark-vault-body .vault-main .vault-tab {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-tab.active,
.theme-light body.spark-vault-body .vault-main .vault-tab.active {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-search,
.theme-light body.spark-vault-body .vault-main .vault-search {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #0f172a !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-search::placeholder,
.theme-light body.spark-vault-body .vault-main .vault-search::placeholder {
  color: #64748b !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-col-headers,
.theme-light body.spark-vault-body .vault-main .vault-col-headers {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  letter-spacing: 0.08em !important;
}

/* Swap: на светлом фоне — чёрный текст для читабельности */
[data-theme="light"] body.spark-vault-body .swap-col-label,
.theme-light body.spark-vault-body .swap-col-label,
[data-theme="light"] body.spark-vault-body .swap-amount,
.theme-light body.spark-vault-body .swap-amount,
[data-theme="light"] body.spark-vault-body .swap-usd,
.theme-light body.spark-vault-body .swap-usd,
[data-theme="light"] body.spark-vault-body .swap-meta,
.theme-light body.spark-vault-body .swap-meta,
[data-theme="light"] body.spark-vault-body .swap-token-symbol,
.theme-light body.spark-vault-body .swap-token-symbol,
[data-theme="light"] body.spark-vault-body .vault-main .vault-data-row .token-name,
.theme-light body.spark-vault-body .vault-main .vault-data-row .token-name,
[data-theme="light"] body.spark-vault-body .vault-main .vault-data-row .token-change-positive,
[data-theme="light"] body.spark-vault-body .vault-main .vault-data-row .token-change-negative,
.theme-light body.spark-vault-body .vault-main .vault-data-row .token-change-positive,
.theme-light body.spark-vault-body .vault-main .vault-data-row .token-change-negative,
[data-theme="light"] body.spark-vault-body .sensors-order-row .order-pair,
.theme-light body.spark-vault-body .sensors-order-row .order-pair,
[data-theme="light"] body.spark-vault-body .sensors-nft-order-row .nft-name,
.theme-light body.spark-vault-body .sensors-nft-order-row .nft-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-data-row .token-price,
.theme-light body.spark-vault-body .vault-main .vault-data-row .token-price {
  font-size: 10px !important;
  font-weight: 300 !important;
  color: #A68B3D !important;
}
[data-theme="light"] body.spark-vault-body .sensors-order-row .order-price,
.theme-light body.spark-vault-body .sensors-order-row .order-price,
[data-theme="light"] body.spark-vault-body .sensors-nft-order-row .nft-status,
.theme-light body.spark-vault-body .sensors-nft-order-row .nft-status {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #64748b !important;
}

/* Swap: ввод цифр — чёрный на светлом фоне */
[data-theme="light"] body.spark-vault-body .swap-amount,
.theme-light body.spark-vault-body .swap-amount {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  caret-color: #0f172a !important;
}

/* Swap placeholder на светлом фоне */
[data-theme="light"] body.spark-vault-body .swap-amount::placeholder,
.theme-light body.spark-vault-body .swap-amount::placeholder {
  color: #0f172a !important;
  opacity: 0.7;
}

/* Sensors tabs: неактивные — синий формат */
[data-theme="light"] body.spark-vault-body .sensors-tab,
.theme-light body.spark-vault-body .sensors-tab {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #64748b !important;
}
/* Жёлтая: DEX tab + стрелки — тёмно-зелёный вместо салатового */
[data-theme="light"] body.spark-vault-body .sensors-tab.active,
.theme-light body.spark-vault-body .sensors-tab.active {
  background: rgba(13, 92, 61, 0.2) !important;
  border-color: #0d5c3d !important;
  color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .swap-arrow-btn,
.theme-light body.spark-vault-body .swap-arrow-btn {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
  background: rgba(13, 92, 61, 0.08) !important;
}
[data-theme="light"] body.spark-vault-body .swap-arrow-btn:hover,
.theme-light body.spark-vault-body .swap-arrow-btn:hover {
  background: rgba(13, 92, 61, 0.2) !important;
  border-color: #0d5c3d !important;
  box-shadow: 0 0 8px rgba(13, 92, 61, 0.3) !important;
}

/* Колонки: обводка и фон как у Tokens (светло-серый) */
[data-theme="light"] body.spark-vault-body .vault-main .vault-col-headers,
.theme-light body.spark-vault-body .vault-main .vault-col-headers {
  background: #e2e8f0 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 14px !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-data-row,
.theme-light body.spark-vault-body .vault-main .vault-data-row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 6px !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-data-row:hover,
.theme-light body.spark-vault-body .vault-main .vault-data-row:hover {
  background: #f1f5f9 !important;
}
[data-theme="light"] body.spark-vault-body .sensors-order-row,
.theme-light body.spark-vault-body .sensors-order-row,
[data-theme="light"] body.spark-vault-body .sensors-nft-order-row,
.theme-light body.spark-vault-body .sensors-nft-order-row {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
}
[data-theme="light"] body.spark-vault-body .sensors-order-row:hover,
.theme-light body.spark-vault-body .sensors-order-row:hover,
[data-theme="light"] body.spark-vault-body .sensors-nft-order-row:hover,
.theme-light body.spark-vault-body .sensors-nft-order-row:hover {
  background: #f1f5f9 !important;
}

/* Nothing found / vault-empty — тёмно-зелёный для читабельности */
[data-theme="light"] body.spark-vault-body .vault-main .vault-empty,
.theme-light body.spark-vault-body .vault-main .vault-empty {
  color: #0d5c3d !important;
}

/* === Страница NFT (широкий контейнер): салатовый → тёмно-зелёный === */
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-subtab:hover,
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-subtab.active,
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-subtab-link:hover,
.theme-light body.spark-vault-body .vault-main .vault-nft-subtab:hover,
.theme-light body.spark-vault-body .vault-main .vault-nft-subtab.active,
.theme-light body.spark-vault-body .vault-main .vault-nft-subtab-link:hover {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
  background: rgba(13, 92, 61, 0.12) !important;
  text-shadow: none !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-col-btn:hover,
.theme-light body.spark-vault-body .vault-main .vault-nft-col-btn:hover {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
  background: rgba(13, 92, 61, 0.08) !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-col-item:hover,
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-col-item.active,
.theme-light body.spark-vault-body .vault-main .vault-nft-col-item:hover,
.theme-light body.spark-vault-body .vault-main .vault-nft-col-item.active {
  color: #0d5c3d !important;
  background: rgba(13, 92, 61, 0.1) !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-view-btn:hover,
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-view-btn.active,
.theme-light body.spark-vault-body .vault-main .vault-nft-view-btn:hover,
.theme-light body.spark-vault-body .vault-main .vault-nft-view-btn.active {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
  background: rgba(13, 92, 61, 0.12) !important;
}
/* Ценники NFT — как цифры основного текста ($1.498 +6.35%, 0.0000) во всех раскладках */
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-card .nft-price,
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-row .nft-price-cell,
.theme-light body.spark-vault-body .vault-main .vault-nft-card .nft-price,
.theme-light body.spark-vault-body .vault-main .vault-nft-row .nft-price-cell {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  font-family: var(--font-mono) !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-card:hover,
.theme-light body.spark-vault-body .vault-main .vault-nft-card:hover {
  border-color: #0d5c3d !important;
  box-shadow: 0 0 15px rgba(13, 92, 61, 0.2) !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-row:hover,
.theme-light body.spark-vault-body .vault-main .vault-nft-row:hover {
  background: rgba(13, 92, 61, 0.06) !important;
}

/* Кнопка проскальзывания — тёмно-зелёный вместо салатового */
[data-theme="light"] body.spark-vault-body .swap-slippage-btn,
.theme-light body.spark-vault-body .swap-slippage-btn {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .swap-slippage-btn:hover,
.theme-light body.spark-vault-body .swap-slippage-btn:hover {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
  background: rgba(13, 92, 61, 0.1) !important;
}
/* Выпадающая панель проскальзывания: светлый текст на тёмном фоне */
[data-theme="light"] body.spark-vault-body .swap-slippage-panel,
.theme-light body.spark-vault-body .swap-slippage-panel {
  background: #1e293b !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .swap-slippage-preset,
.theme-light body.spark-vault-body .swap-slippage-preset {
  color: #e2e8f0 !important;
  border-color: rgba(226, 232, 240, 0.4) !important;
}
[data-theme="light"] body.spark-vault-body .swap-slippage-preset:hover,
[data-theme="light"] body.spark-vault-body .swap-slippage-preset.active,
.theme-light body.spark-vault-body .swap-slippage-preset:hover,
.theme-light body.spark-vault-body .swap-slippage-preset.active {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
  background: rgba(13, 92, 61, 0.2) !important;
}
[data-theme="light"] body.spark-vault-body .swap-slippage-custom input,
.theme-light body.spark-vault-body .swap-slippage-custom input {
  background: rgba(0, 0, 0, 0.3) !important;
  color: #e2e8f0 !important;
  border-color: rgba(226, 232, 240, 0.4) !important;
}
/* Выпадающий список коллекций NFT: светлый текст на тёмном фоне */
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-col-dropdown,
.theme-light body.spark-vault-body .vault-main .vault-nft-col-dropdown {
  background: #1e293b !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-col-item,
.theme-light body.spark-vault-body .vault-main .vault-nft-col-item {
  color: #e2e8f0 !important;
}
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-col-item:hover,
[data-theme="light"] body.spark-vault-body .vault-main .vault-nft-col-item.active,
.theme-light body.spark-vault-body .vault-main .vault-nft-col-item:hover,
.theme-light body.spark-vault-body .vault-main .vault-nft-col-item.active {
  color: #0d5c3d !important;
  background: rgba(13, 92, 61, 0.2) !important;
}

/* Колонка свапа: MAX, бегунок (▤), 100%, кружочек бегунка — тёмно-зелёный */
[data-theme="light"] body.spark-vault-body .swap-btn-max,
[data-theme="light"] body.spark-vault-body .swap-btn-slider,
.theme-light body.spark-vault-body .swap-btn-max,
.theme-light body.spark-vault-body .swap-btn-slider {
  color: #0d5c3d !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .swap-btn-max:hover,
[data-theme="light"] body.spark-vault-body .swap-btn-slider:hover,
.theme-light body.spark-vault-body .swap-btn-max:hover,
.theme-light body.spark-vault-body .swap-btn-slider:hover {
  background: rgba(13, 92, 61, 0.15) !important;
  border-color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .swap-slider-value,
.theme-light body.spark-vault-body .swap-slider-value {
  color: #0d5c3d !important;
}
[data-theme="light"] body.spark-vault-body .swap-slider::-webkit-slider-thumb,
.theme-light body.spark-vault-body .swap-slider::-webkit-slider-thumb {
  background: #0d5c3d !important;
  box-shadow: 0 0 10px rgba(13, 92, 61, 0.4) !important;
}
[data-theme="light"] body.spark-vault-body .swap-slider::-moz-range-thumb,
.theme-light body.spark-vault-body .swap-slider::-moz-range-thumb {
  background: #0d5c3d !important;
  box-shadow: 0 0 10px rgba(13, 92, 61, 0.4) !important;
}

/* Тёмная тема: мягкий жёлтый и мягкий красный (не режет глаз) */
[data-theme="dark"] body.spark-vault-body,
.theme-dark body.spark-vault-body {
  --vault-gold: #c9a227;
  --vault-gold-soft: #b8951f;
  --vault-danger: #c46868;
}
[data-theme="dark"] body.spark-vault-body .btn-exit,
.theme-dark body.spark-vault-body .btn-exit {
  border-color: #c46868 !important;
  color: #c46868 !important;
}
[data-theme="dark"] body.spark-vault-body .btn-exit:hover,
.theme-dark body.spark-vault-body .btn-exit:hover {
  background: #c46868 !important;
  color: white !important;
  box-shadow: 0 0 16px rgba(196, 104, 104, 0.35) !important;
}

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

/* Body - Cosmic Space Background */
body {
  font-family: var(--font-body);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Epic Cosmic Background Layer */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  background: 
    radial-gradient(ellipse at 80% 70%, rgba(74, 159, 255, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 30%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
    #0a0614;
}

/* Planet in bottom right corner (image_3.png style) */
body::after {
  content: '';
  position: fixed;
  bottom: -30%;
  right: -15%;
  width: 60%;
  height: 80%;
  z-index: -1;
  background: radial-gradient(circle at 30% 30%, 
    rgba(74, 159, 255, 0.3) 0%,
    rgba(74, 159, 255, 0.15) 20%,
    rgba(139, 92, 246, 0.1) 40%,
    transparent 70%
  );
  border-radius: 50%;
  filter: blur(60px);
  animation: planetPulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes planetPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* Stars Layer (image_2.png style) */
.cosmic-stars {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, white, transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(2px 2px at 10% 80%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.5), transparent);
  background-size: 200% 200%, 180% 180%, 220% 220%, 190% 190%, 210% 210%, 170% 170%;
  background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%, 20% 80%, 70% 30%;
  animation: starsMove 120s linear infinite;
  pointer-events: none;
}

@keyframes starsMove {
  0% { background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%, 20% 80%, 70% 30%; }
  100% { background-position: 100% 100%, 0% 0%, 150% 150%, 180% 120%, 120% 180%, 170% 130%; }
}

/* Central Star Glow (image_3.png - blue star in center-left) */
.star-glow-center {
  position: fixed;
  top: 40%;
  left: 25%;
  width: 400px;
  height: 400px;
  z-index: -1;
  background: radial-gradient(circle, 
    rgba(74, 159, 255, 0.4) 0%,
    rgba(74, 159, 255, 0.2) 25%,
    rgba(125, 191, 255, 0.1) 50%,
    transparent 70%
  );
  filter: blur(80px);
  animation: starPulse 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes starPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* Asteroid Belt Effect */
.asteroid-belt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: linear-gradient(135deg, 
    transparent 40%,
    rgba(139, 92, 246, 0.03) 50%,
    rgba(79, 70, 229, 0.05) 60%,
    transparent 70%
  );
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Inner pages (wallet, swap, mint): header overlays like on main page — dashboard at top */
body.spark-inner-page .spark-header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.spark-inner-page .spark-header > div > div {
  height: auto !important;
  min-height: 0 !important;
}

/* Header - Dense Starfield Background (image_2.png style) */
.spark-header {
  background: var(--header-bg) !important;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-bottom: none;
  box-shadow: none;
  position: relative;
  transition: all 0.3s ease;
}

/* Header starfield overlay */
.spark-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(1px 1px at 25% 40%, rgba(255, 255, 255, 0.9), transparent),
    radial-gradient(1px 1px at 75% 60%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 50% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 15% 70%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 85% 45%, rgba(255, 255, 255, 0.8), transparent);
  background-size: 100% 100%;
  opacity: 0.6;
  z-index: 0;
  pointer-events: none;
}

.spark-header > * {
  position: relative;
  z-index: 1;
}

/* Logo - Deep Red Neon Glow (image_0.png: #B00000) */
.spark-logo,
.spark-header img[alt*="Logo"],
.spark-header img[src*="logo"] {
  filter: drop-shadow(0 0 12px var(--neon-red-glow)) 
          drop-shadow(0 0 24px var(--neon-red-glow))
          drop-shadow(0 0 8px rgba(176, 0, 0, 1));
  transition: all 0.3s ease;
}

.spark-logo:hover {
  filter: drop-shadow(0 0 16px var(--neon-red-glow)) 
          drop-shadow(0 0 32px var(--neon-red-glow))
          drop-shadow(0 0 12px rgba(176, 0, 0, 1));
}

/* Menu Items - Golden Glow on Hover (image_0.png: #FFC107) */
.spark-header a,
.spark-header nav a,
.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.spark-header a:hover,
.spark-header nav a:hover,
.nav-link:hover {
  color: var(--gold-accent) !important;
  text-shadow: 
    0 0 10px var(--gold-glow),
    0 0 20px var(--gold-glow),
    0 0 30px rgba(255, 193, 7, 0.4);
}

/* Card Styles - Cosmic Glass Effect */
.spark-card,
.feature-card,
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.spark-card::before,
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, 
    transparent,
    var(--star-blue),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spark-card:hover,
.feature-card:hover,
.stat-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: 
    var(--shadow-glow),
    0 12px 48px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.spark-card:hover::before,
.feature-card:hover::before {
  opacity: 1;
}

/* Button: MINT - Deep Red (image_0.png: #B00000) */
.btn-primary,
button[type="submit"],
a[href*="mint"] {
  background: linear-gradient(135deg, var(--neon-red) 0%, #8B0000 100%);
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-red-glow);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: rotate(45deg);
  transition: all 0.6s ease;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 0 20px var(--neon-red-glow),
    0 0 40px var(--neon-red-glow),
    0 8px 32px rgba(176, 0, 0, 0.5);
}

.btn-primary:hover::before {
  left: 100%;
}

/* Button: SWAP - Golden Border (image_0.png: #FFC107) */
.btn-secondary,
a[href*="swap"] {
  background: transparent;
  color: var(--gold-accent);
  border: 2px solid var(--gold-accent);
  padding: 14px 32px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-gold-glow);
  text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
  position: relative;
  overflow: hidden;
}

.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(255, 193, 7, 0.1) 0%,
    rgba(255, 193, 7, 0.05) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(255, 193, 7, 0.15);
  border-color: var(--gold-accent);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 
    0 0 25px var(--gold-glow),
    0 0 50px var(--gold-glow),
    0 8px 32px rgba(255, 193, 7, 0.4);
  color: white;
}

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

/* Hero Title - Blue Star Glow Effect */
.hero-title,
h1.font-display {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.95) 0%,
    var(--star-blue-bright) 50%,
    rgba(255, 255, 255, 0.95) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
  filter: drop-shadow(0 0 30px rgba(74, 159, 255, 0.8))
          drop-shadow(0 0 60px rgba(74, 159, 255, 0.5));
  animation: titlePulse 3s ease-in-out infinite;
}

@keyframes titlePulse {
  0%, 100% { filter: drop-shadow(0 0 30px rgba(74, 159, 255, 0.8)) drop-shadow(0 0 60px rgba(74, 159, 255, 0.5)); }
  50% { filter: drop-shadow(0 0 40px rgba(74, 159, 255, 1)) drop-shadow(0 0 80px rgba(74, 159, 255, 0.7)); }
}

/* Input Styles */
input, select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px 16px;
  border-radius: 12px;
  font-family: inherit;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--star-blue);
  box-shadow: 0 0 0 3px rgba(74, 159, 255, 0.2), var(--shadow-glow);
}

/* Parallax Container */
.parallax-layer {
  transition: transform 0.3s ease-out;
  will-change: transform;
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border-glow);
  border-radius: 20px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-strong), var(--shadow-glow);
  animation: slideUp 0.3s ease;
}

/* Wallet Button Grid */
.wallet-button {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.wallet-button:hover {
  border-color: var(--star-blue);
  background: var(--bg-card-hover);
  box-shadow: var(--shadow-glow);
  transform: translateY(-4px);
}

/* Network Toggle */
.network-toggle button.active {
  background: linear-gradient(135deg, var(--star-blue) 0%, var(--accent-dim) 100%);
  box-shadow: 0 4px 16px rgba(74, 159, 255, 0.4);
}

/* Utility Classes */
.glow-accent {
  box-shadow: var(--shadow-glow);
}

.glow-red {
  box-shadow: var(--shadow-red-glow);
}

.glow-gold {
  box-shadow: var(--shadow-gold-glow);
}

.text-gradient {
  background: linear-gradient(135deg, var(--star-blue) 0%, var(--gold-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Scrollbar - Cosmic Style (neon green, soft) */
:root, [data-theme="dark"], .theme-dark {
  --scrollbar-track: rgba(22, 101, 52, 0.08);
  --scrollbar-thumb: rgba(22, 101, 52, 0.45);
  --scrollbar-thumb-hover: rgba(22, 101, 52, 0.65);
  --scrollbar-glow: rgba(22, 101, 52, 0.25);
}
[data-theme="light"], .theme-light {
  --scrollbar-track: rgba(0, 150, 100, 0.12);
  --scrollbar-thumb: rgba(0, 180, 120, 0.45);
  --scrollbar-thumb-hover: rgba(0, 180, 120, 0.65);
  --scrollbar-glow: rgba(0, 180, 120, 0.2);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  box-shadow: 0 0 8px var(--scrollbar-glow);
}

/* Scale mode: enable horizontal scroll, hide native scrollbar (use custom spark-h-scroll) */
html.spark-scaled {
  overflow-x: auto;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html.spark-scaled::-webkit-scrollbar {
  display: none;
}
html.spark-scaled body {
  overflow-x: auto;
  overflow-y: visible;
}

/* Custom horizontal scrollbar - SPARK brand */
.spark-h-scroll {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999999;
  padding: 2px 8px;
  box-sizing: border-box;
}
[data-theme="light"] .spark-h-scroll,
.theme-light .spark-h-scroll {
  background: rgba(0, 0, 0, 0.06);
}
.spark-h-scroll-track {
  width: 100%;
  height: 100%;
  background: var(--scrollbar-track);
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.spark-h-scroll-thumb {
  position: absolute;
  top: 0;
  height: 100%;
  min-width: 40px;
  background: var(--scrollbar-thumb);
  border-radius: 4px;
  cursor: grab;
  transition: background 0.2s, box-shadow 0.2s;
}
.spark-h-scroll-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  box-shadow: 0 0 10px var(--scrollbar-glow);
}
.spark-h-scroll-thumb:active {
  cursor: grabbing;
}

/* Scale reset button - theme-aware */
.spark-scale-reset-float {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1000001;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: bold;
  background: rgba(22, 101, 52, 0.15);
  border: 1px solid rgba(22, 101, 52, 0.5);
  color: #166534;
  cursor: pointer;
  border-radius: 6px;
  transition: 0.2s;
}
.spark-scale-reset-float:hover {
  background: rgba(22, 101, 52, 0.3);
  box-shadow: 0 0 12px rgba(22, 101, 52, 0.4);
}
[data-theme="light"] .spark-scale-reset-float,
.theme-light .spark-scale-reset-float {
  background: rgba(0, 180, 120, 0.15);
  border-color: rgba(0, 180, 120, 0.5);
  color: #008c5a;
}
[data-theme="light"] .spark-scale-reset-float:hover,
.theme-light .spark-scale-reset-float:hover {
  background: rgba(0, 180, 120, 0.25);
  box-shadow: 0 0 10px rgba(0, 180, 120, 0.3);
}

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

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

/* Responsive Adjustments */
@media (max-width: 1024px) {
  body::after {
    bottom: -40%;
    right: -25%;
    width: 80%;
  }
  
  .star-glow-center {
    width: 300px;
    height: 300px;
    left: 50%;
    transform: translateX(-50%);
  }
}