/* ==========================================================================
   DARKPULSE — Futuristic Cyber Design System
   Loaded last on every page: it normalises the legacy styles into a
   single, futuristic visual language with neon accents and dark theme.

   Palette : deep space black, electric cyan, magenta glow
   Radius  : 8 / 12 / 16 (sharp cyber edges)
   Depth   : glow borders + neon shadows. Glassmorphism panels.
   Motion  : scanlines, pulse, shimmer, glow transitions.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root,
html[data-theme='dark'] {
  color-scheme: dark;

  --bg: #050508;
  --bg-elev: #0a0a10;
  --surface: #0d0d14;
  --surface-2: #12121e;
  --surface-3: #1a1a2e;
  --bg-glass: rgba(5, 5, 8, 0.82);

  --border: #1a1a2e;
  --border-strong: #2a2a4a;
  --border-glow: rgba(0, 229, 255, 0.25);

  --text: #e8e8ff;
  --text-muted: #b0b0cc;
  --text-faint: #8080a0;

  --accent: #00e5ff;
  --accent-hover: #40f0ff;
  --accent-soft: rgba(0, 229, 255, 0.12);
  --accent-glow: rgba(0, 229, 255, 0.35);
  --accent-contrast: #050508;

  --neon-pink: #ff00e5;
  --neon-pink-soft: rgba(255, 0, 229, 0.12);
  --neon-green: #00ff88;
  --neon-green-soft: rgba(0, 255, 136, 0.12);

  --success: #00ff88;
  --success-soft: rgba(0, 255, 136, 0.12);
  --danger: #ff3366;
  --danger-soft: rgba(255, 51, 102, 0.12);
  --warning: #ffaa00;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.6);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(0, 229, 255, 0.15), 0 0 60px rgba(0, 229, 255, 0.05);
  --shadow-glow-strong: 0 0 30px rgba(0, 229, 255, 0.25), 0 0 80px rgba(0, 229, 255, 0.08);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --maxw: 1160px;
  --font: 'Rajdhani', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Orbitron', 'Rajdhani', sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
}

/* Light theme removed — dark only */




/* Legacy variables */
:root,
html[data-theme='dark'],


/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
}

body {
  margin: 0;
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 229, 255, 0.03) 0%, transparent 70%),
    none !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-weight: 400 !important;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.3px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body * {
  font-family: inherit !important;
}

/* Scanline overlay — disabled for performance */
/* body::after { ... } */

*,
*::before,
*::after {
  -webkit-user-select: auto !important;
  -moz-user-select: auto !important;
  user-select: auto !important;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video {
  max-width: 100%;
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 12px var(--accent-glow);
}

* {
  scrollbar-color: var(--border-strong) transparent;
  scrollbar-width: thin;
}

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

*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

/* Kill old decorative animations — we add our own */
#loader,
.eyebrow-dot,
.activity-icon,
.preview-live i,
[class*='shimmer'],
[class*='float'] {
  animation: none !important;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  letter-spacing: -0.02em;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.4em;
  color: var(--text);
  font-family: var(--font-display), var(--font);
}

p {
  margin: 0 0 1em;
  color: var(--text-muted);
}

code,
kbd,
samp,
[class*='address'],
[class*='mono'] {
  font-family: var(--font-mono);
}

/* --------------------------------------------------------------------------
   4. ANIMATIONS (Cyber)
   -------------------------------------------------------------------------- */

@keyframes cyberPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes neonGlow {
  0%, 100% { box-shadow: 0 0 5px var(--accent-glow), 0 0 15px rgba(0, 229, 255, 0.08); }
  50% { box-shadow: 0 0 15px var(--accent-glow), 0 0 40px rgba(0, 229, 255, 0.15); }
}

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

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

@keyframes shimmer {
  0% { left: -100%; }
  60% { left: 200%; }
  100% { left: 200%; }
}

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

/* --------------------------------------------------------------------------
   5. THEME TOGGLE — REMOVED (dark only)

/* --------------------------------------------------------------------------
   6. BUTTONS — Cyber Style
   -------------------------------------------------------------------------- */

.btn-primary,
.connect-wallet,
.connect-wallet-btn,
.mobile-wallet-btn,
.launch-btn,
.generate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #00e5ff !important;
  background-image: none !important;
  color: #050508 !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 20px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  line-height: 1.2 !important;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 15px var(--accent-glow) !important;
  text-shadow: none !important;
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
.connect-wallet-btn::before,
.mobile-wallet-btn::before,
.launch-btn::before,
.generate-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.btn-primary:hover,
.connect-wallet:hover,
.connect-wallet-btn:hover,
.mobile-wallet-btn:hover,
.launch-btn:hover,
.generate-btn:hover {
  background-color: #40f0ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 25px rgba(0,229,255,0.4), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.btn-primary:hover::before,
.connect-wallet-btn:hover::before,
.mobile-wallet-btn:hover::before,
.launch-btn:hover::before,
.generate-btn:hover::before {
  left: 100%;
}

.btn-primary:active,
.connect-wallet:active,
.connect-wallet-btn:active,
.mobile-wallet-btn:active,
.launch-btn:active,
.generate-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
}

.launch-btn::after,
.launch-btn::before,
.connect-wallet.connected::after,
.generate-btn::after,
.create-token-btn::after {
  display: none !important;
  content: none !important;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: var(--surface-2) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* --------------------------------------------------------------------------
   7. NAVIGATION — Cyber Navbar
   -------------------------------------------------------------------------- */

.nav-container::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.06) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

.nav-container {
  background: rgba(5, 5, 8, 0.9) !important;
  border-bottom: 1px solid var(--border-glow) !important;
  box-shadow: 0 2px 20px rgba(0, 229, 255, 0.05) !important;
}

.nav-container .main-nav,
.header-container .main-nav,
.header-inner .main-nav {
  display: flex !important;
  align-items: center;
  gap: 4px !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  padding: 4px !important;
  box-shadow: none !important;
  animation: none !important;
  position: static !important;
  transform: none !important;
}

.nav-container .main-nav .nav-link,
.header-container .main-nav a,
.header-inner .main-nav a {
  color: var(--text-muted) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: var(--radius-pill) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--font-display), var(--font) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.nav-container .main-nav .nav-link:hover,
.header-container .main-nav a:hover,
.header-inner .main-nav a:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.1);
}

.nav-container .main-nav .nav-link.active,
.header-container .main-nav a.active,
.header-inner .main-nav a.active {
  color: var(--accent-contrast) !important;
  background: var(--accent) !important;
  font-weight: 700 !important;
  opacity: 1 !important;
  box-shadow: 0 0 15px var(--accent-glow);
}

.nav-container .main-nav .nav-link.active-green,
.header-inner .main-nav a.active-green {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  font-weight: 700 !important;
}

.nav-container .main-nav .nav-link.active-green:hover,
.header-inner .main-nav a.active-green:hover {
  background: var(--accent-hover) !important;
}

/* Logo */
.nav-container .logo-container .logo-img,
.nav-container .logo-img,
.footer-container .logo-img {
  height: 30px !important;
  overflow: visible !important;
}

.nav-container .logo-img img,
.footer-container .logo-img img {
  height: 100% !important;
  width: auto;
  object-fit: contain;
  filter: brightness(1.1) drop-shadow(0 0 8px rgba(0, 229, 255, 0.2)) !important;
}

.nav-container .logo-container,
.nav-container .logo-container.active,
.footer-container .logo-container,
.footer-container .logo-container.active {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Wallet dropdown */
.nav-container .wallet-dropdown,
.footer-container .wallet-dropdown,
.header-inner .header-actions,
.header-container .wallet-container,
.header-container .wallet-dropdown,
.wallet-container {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 500;
}

.wallet-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  padding: 6px;
  background: var(--surface) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-glow) !important;
  overflow: hidden;
  z-index: 500 !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.wallet-menu.open {
  display: block;
}

.wallet-menu-item {
  padding: 10px 14px !important;
  border-radius: var(--radius-xs);
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s ease;
}

.wallet-menu-item:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.wallet-menu-item.disconnect {
  color: var(--danger) !important;
  border-top: 1px solid var(--border) !important;
  margin-top: 4px;
  padding-top: 12px !important;
}

.wallet-menu-item.disconnect:hover {
  background: var(--danger-soft) !important;
}

.wallet-display {
  cursor: pointer;
}

/* Hamburger */
.hamburger-btn,
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 38px;
  padding: 0;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.hamburger-btn:hover {
  border-color: var(--accent) !important;
}

.hamburger-btn span,
.hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--accent) !important;
  border-radius: var(--radius-pill);
  transition: all 0.3s ease;
}

.hamburger-btn.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hamburger-btn.open span:nth-child(2) {
  opacity: 0;
}
.hamburger-btn.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile overlay */
.mobile-nav-overlay,
.mobile-overlay {
  background: rgba(5, 5, 8, 0.85) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Mobile drawer */
.mobile-nav-drawer,
.mobile-panel {
  background: var(--bg-elev) !important;
  border-left: 1px solid var(--border-glow) !important;
  box-shadow: -4px 0 30px rgba(0, 229, 255, 0.08) !important;
  padding: 72px 20px 28px !important;
}

.mobile-nav-drawer .nav-link,
.mobile-panel a {
  color: var(--text) !important;
  background: transparent !important;
  border-radius: var(--radius-sm) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 12px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none !important;
  display: block;
  transition: all 0.2s ease;
}

.mobile-nav-drawer .nav-link:hover,
.mobile-nav-drawer .nav-link:active,
.mobile-panel a:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.mobile-nav-close,
.mobile-close {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--accent) !important;
  width: 36px;
  height: 36px;
  transition: border-color 0.2s ease;
}

.mobile-nav-close:hover {
  border-color: var(--accent) !important;
}

.mobile-wallet-btn {
  margin-top: 18px !important;
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. FOOTER — Cyber Style
   -------------------------------------------------------------------------- */

footer {
  background: transparent !important;
  border-top: 1px solid var(--border-glow) !important;
  margin-top: 64px;
}

.footer-container {
  width: 100% !important;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px !important;
  gap: 24px;
}

.footer-container .main-footer {
  display: flex;
  align-items: center;
  gap: 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

.footer-container .main-footer .footer-link,
.footer-links a {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: color 0.16s ease, background-color 0.16s ease;
}

.footer-container .main-footer .footer-link:hover,
.footer-links a:hover {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

.bottom-bar {
  gap: 6px !important;
  padding: 0 !important;
}

.copyright-bar {
  color: var(--text-faint) !important;
  opacity: 1 !important;
  font-size: 13px;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.policies-bar .policy-link {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  font-size: 12px !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.16s ease;
}

.policies-bar .policy-link:hover {
  color: var(--accent) !important;
}

.policies-bar .separator {
  width: 3px !important;
  background: var(--accent) !important;
  opacity: 0.5 !important;
}

/* --------------------------------------------------------------------------
   9. LANDING PAGE — Cyber Hero
   -------------------------------------------------------------------------- */

#landing {
  background: none !important;
  background-image: none !important;
}

.background-1,
.background-2 {
  display: none !important;
}

.hero-section {
  padding-top: 72px !important;
  min-height: auto !important;
}

#landing .title-box {
  gap: 20px !important;
  margin-top: 24px !important;
  max-width: 860px;
  padding: 0 24px;
}

/* Badge — Cyber shimmer */
#landing .title-box .title-1 {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface-3) 100%) !important;
  background-image: none !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 0 20px var(--accent-glow), inset 0 0 15px rgba(0, 229, 255, 0.05) !important;
  padding: 6px 18px !important;
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

#landing .title-box .title-1::after {
  content: '' !important;
  position: absolute !important;
  top: -50%;
  left: -100%;
  width: 55%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.2), transparent) !important;
  transform: skewX(-20deg);
  animation: shimmer 4s ease-in-out infinite !important;
  display: block !important;
}

/* Heading — Cyber glow */
#landing .title-box .title-2 {
  font-size: clamp(2rem, 4.6vw, 3.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  gap: 8px !important;
  line-height: 1.1 !important;
  font-family: var(--font-display), var(--font);
}

#landing .title-box .title-2 .span-1 {
  background: linear-gradient(135deg, #ffffff 20%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

#landing .title-box .title-2 .span-2 {
  font-size: 0.72em !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 8px;
  line-height: 1.25 !important;
  background: linear-gradient(90deg, var(--text-muted) 0%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Description */
#landing .title-box .desc {
  color: var(--text-muted) !important;
  font-size: 16px !important;
  gap: 2px;
  max-width: 560px;
  text-align: center;
}

#landing .title-box .desc .span-2 {
  font-size: 13px;
  color: var(--text-faint) !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.1em;
}

/* CTA Box — Cyber glow border */
#landing .title-box .create-token-box {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-glow) !important;
  padding: 6px 6px 6px 16px !important;
  gap: 16px !important;
  width: 100%;
  max-width: 520px;
  transition: all 0.3s ease;
}

#landing .title-box .create-token-box:focus-within {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-glow-strong) !important;
}

#landing .title-box .create-token-box .create-token-text {
  margin-left: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
  font-size: 15px !important;
  padding: 8px 0 !important;
  min-width: 0;
  flex: 1;
}

#landing .title-box .create-token-box .create-token-text::placeholder {
  color: var(--text-faint) !important;
}

#landing .title-box .create-token-box .create-token-btn,
#landing .features-description .create-token-btn {
  background-color: #00e5ff !important;
  background-image: none !important;
  color: #050508 !important;
  border: 1px solid #00e5ff !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 0 15px rgba(0,229,255,0.3) !important;
  transition: all 0.25s ease;
}

#landing .title-box .create-token-box .create-token-btn:hover,
#landing .features-description .create-token-btn:hover {
  background-color: #40f0ff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 25px rgba(0,229,255,0.4), 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

/* Network switch */
#indexDeploySwitch {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  backdrop-filter: none !important;
  padding: 4px !important;
  gap: 4px !important;
}

#indexDeploySwitch button {
  border-radius: var(--radius-pill) !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.05em;
  color: var(--text-muted) !important;
  transition: all 0.2s ease;
}

#indexDeploySwitch button:hover {
  color: var(--accent) !important;
}

#indexDeploySwitch button.is-active {
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  box-shadow: 0 0 12px var(--accent-glow) !important;
}

#indexDeploySwitch #idxRhBtn.is-active {
  background: var(--neon-green) !important;
  color: var(--accent-contrast) !important;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.3) !important;
}

#idxNetworkHint {
  color: var(--text-faint) !important;
  font-size: 12px !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.04em;
}

/* Secondary links */
.ll-inline-link {
  font-size: 12px;
  color: var(--text-muted) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--border-strong) !important;
  text-underline-offset: 3px;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.04em;
}

.ll-inline-link:hover {
  color: var(--accent) !important;
  text-decoration-color: var(--accent) !important;
}

.ll-inline-sep {
  color: var(--text-faint) !important;
}


.nav-badge {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  vertical-align: middle;
  font-family: var(--font-display), var(--font);
}


/* --------------------------------------------------------------------------
   10. CHAIN GRID & PROMO CARDS
   -------------------------------------------------------------------------- */

.ll-chain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 780px;
  margin: 24px auto 0;
}

.ll-chain-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius) !important;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.05);
}

.ll-chain-card:hover {
  border-color: var(--accent) !important;
  background: var(--surface-2);
  box-shadow: var(--shadow-glow);
}

.ll-chain-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent) !important;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-display);
}

.ll-chain-card__icon--rh {
  background: var(--neon-green-soft);
  color: var(--neon-green) !important;
}

.ll-chain-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text) !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.04em;
}

.ll-chain-card__meta {
  font-size: 11px;
  color: var(--text-faint) !important;
}

.ll-chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent) !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-display), var(--font);
}

.ll-chip--rh {
  background: var(--neon-green-soft);
  color: var(--neon-green) !important;
}

.ll-promo-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 780px;
  margin: 20px auto 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.05) !important;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.25s ease;
}

.ll-promo-card:hover {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-glow) !important;
}

.ll-promo-card__topline {
  display: none !important;
}

.ll-promo-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: var(--neon-green);
  color: #050508;
  font-size: 19px;
  font-weight: 700;
}

.ll-promo-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--neon-green-soft);
  color: var(--neon-green);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  font-family: var(--font-display), var(--font);
}

.ll-promo-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  font-family: var(--font-display), var(--font);
}

.ll-promo-card__text {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.ll-promo-card__cta {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--neon-green);
  color: #050508;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}



/* --------------------------------------------------------------------------
   11. LIVE ACTIVITY PANEL
   -------------------------------------------------------------------------- */

.live-activity-panel {
  background: rgba(5, 5, 8, 0.9) !important;
  background-image: none !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-glow) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  padding: 18px !important;
}

.stats-section {
  margin-bottom: 16px !important;
}

.stat-item {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
  transition: all 0.25s ease;
}

.stat-item:last-child {
  margin-bottom: 0 !important;
}

.stat-item:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow);
  transform: translateY(-2px);
}

.stat-number {
  font-size: 20px !important;
  font-weight: 800 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--accent) 0%, #0090c0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  margin-bottom: 2px !important;
}

.stat-label {
  color: var(--text-faint) !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  font-family: var(--font-display), var(--font);
  font-weight: 600 !important;
}

.activity-section {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border-glow) !important;
}

.activity-header {
  color: var(--accent) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  margin-bottom: 10px !important;
}

.activity-icon {
  animation: cyberPulse 2s ease-in-out infinite !important;
}

.activity-item {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  transition: all 0.2s ease;
}

.activity-item:hover {
  background: var(--accent-soft) !important;
  border-color: var(--border-glow) !important;
}

.activity-token {
  color: var(--accent) !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
}

.activity-icon-type {
  background: var(--accent-soft) !important;
}

/* --------------------------------------------------------------------------
   12. CONTENT + FEATURES SECTIONS
   -------------------------------------------------------------------------- */

#landing .content-container {
  background: transparent !important;
  border-radius: 0 !important;
  gap: 72px !important;
  padding: 72px 24px !important;
}

#landing .content-container .content-section {
  width: 100% !important;
  max-width: var(--maxw);
  gap: 28px !important;
}

#landing .content-container .content-text-1 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  gap: 2px;
  text-align: center;
  font-family: var(--font-display), var(--font);
}

#landing .content-container .content-text-1 .span-2 {
  background: linear-gradient(90deg, var(--accent) 0%, #0090c0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#landing .content-img-1 {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-glow) !important;
  box-shadow: var(--shadow-glow) !important;
  overflow: hidden !important;
}

#landing .content-img-1 img {
  border-radius: var(--radius-lg) !important;
  transform: none !important;
  width: 100% !important;
}

#landing .content-img-1 .border-bg,
#landing .content-img-1 .fade-fg {
  display: none !important;
}

#landing .content-img-1 .content-controls {
  top: 16px !important;
  left: 16px !important;
}

#landing .content-img-1 .content-controls span {
  height: 10px !important;
  background: var(--border-strong) !important;
}

#landing .content-container .content-text-2 {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--text-muted);
}

/* Phone parallax */
#landing .phone-parallax-section {
  gap: 28px !important;
}

#landing .phone-parallax-section .parallax-title {
  width: 100% !important;
  max-width: 720px;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important;
  font-weight: 600 !important;
  text-align: center;
  line-height: 1.4 !important;
  color: var(--text-muted) !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.02em;
}

#landing .phone-parallax-section .img-container .left-img,
#landing .phone-parallax-section .img-container .right-img {
  display: none !important;
}

#landing .phone-parallax-section .img-container .iphone-img {
  height: auto !important;
  max-height: 620px;
}

/* Features section — Cyber card */
#landing .features-section {
  width: 100% !important;
  max-width: var(--maxw);
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-glow) !important;
  padding: 48px 40px 40px !important;
  gap: 20px !important;
}

#landing .features-section .features-label {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
  color: var(--accent) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
  padding: 5px 14px !important;
}

#landing .features-section .features-title {
  width: 100% !important;
  max-width: 640px;
  font-size: clamp(1.4rem, 2.6vw, 2rem) !important;
  font-weight: 700 !important;
  text-align: center;
  letter-spacing: -0.02em;
  font-family: var(--font-display), var(--font);
}

#landing .features-section .features-subtitle {
  width: 100% !important;
  max-width: 560px;
  font-size: 14px !important;
  color: var(--text-muted) !important;
  text-align: center;
}

#landing .features-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  gap: 20px;
  width: 100%;
  margin-top: 12px;
}

#landing .features-img {
  grid-row: auto !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  border: 1px solid var(--border-glow);
  background: var(--surface-2);
}

#landing .features-stats {
  grid-column: auto !important;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

#landing .features-stats .features-stat {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transform: none !important;
  padding: 24px 16px !important;
  gap: 8px !important;
  color: var(--text) !important;
  transition: all 0.25s ease;
}

#landing .features-stats .features-stat:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 15px var(--accent-glow);
  transform: translateY(-3px);
}

#landing .features-stats .features-stat:nth-child(1) {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}

#landing .features-stats .features-stat:nth-child(2) {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--text) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

#landing .features-stats .features-stat .features-stat-value {
  font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: -0.02em;
  line-height: 1 !important;
  background: linear-gradient(135deg, var(--accent) 0%, #0090c0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

#landing .features-stats .features-stat .features-stat-label {
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: var(--text-muted) !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600 !important;
}

#landing .features-description {
  grid-column: 1 / -1 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--border-glow) !important;
  border-radius: 0 !important;
  padding: 28px 0 0 !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: auto !important;
}

#landing .features-description .features-description-text {
  background: transparent !important;
  color: var(--text) !important;
  gap: 6px;
}

#landing .features-description .features-description-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
}

#landing .features-description .features-description-subtitle {
  font-size: 14px !important;
  color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   13. HEADER / PAGE SHELL (create-token, etc.)
   -------------------------------------------------------------------------- */

header {
  position: sticky;
  top: 0;
  z-index: 120;
  padding: 12px 0 !important;
  background: var(--bg-glass) !important;
  border-bottom: 1px solid var(--border-glow) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.header-container {
  max-width: var(--maxw) !important;
  margin: 0 auto;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px;
}

.logo,
.logo-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.logo img {
  height: 28px !important;
  width: auto;
  display: block;
}

#main {
  padding: 64px 24px !important;
}

#root #main {
  padding: 104px 24px 64px !important;
}

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

/* --------------------------------------------------------------------------
   14. FORM CONTROLS — Cyber Style
   -------------------------------------------------------------------------- */

label {
  display: block !important;
  margin-bottom: 7px !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

label .req {
  color: var(--neon-pink) !important;
}

label .opt,
label .hint {
  color: var(--text-faint) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

input[type='text'],
input[type='number'],
input[type='email'],
input[type='password'],
input[type='search'],
input:not([type]),
textarea,
select {
  width: 100%;
  background: var(--surface-2) !important;
  background-image: none !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 11px 13px !important;
  font-size: 14px !important;
  font-family: var(--font) !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  outline: none;
  transition: all 0.2s ease;
}

input[type='text']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='search']:focus,
input:not([type]):focus,
textarea:focus,
select:focus {
  background: var(--surface) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 15px var(--accent-glow) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint) !important;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: none !important;
  padding-right: 34px !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
    linear-gradient(135deg, var(--text-faint) 50%, transparent 50%) !important;
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50% !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}

select option {
  background: var(--surface) !important;
  color: var(--text) !important;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

.hint,
.input-hint,
.rh-hint,
.fee-note,
.upload-format {
  margin-top: 6px !important;
  color: var(--text-faint) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

/* --------------------------------------------------------------------------
   15. CARDS / CONTAINERS — Glassmorphism
   -------------------------------------------------------------------------- */

.form-card,
.token-form,
.booster,
.portfolio-card,
.modal-content,
.preview-card {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-glow) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.token-form::before,
.booster::before,
.preview-card::before,
.revoke-title::after,
.section-head .underline::after {
  display: none !important;
  content: none !important;
}

.divider,
.section-divider {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--border-glow), transparent) !important;
  background-image: none !important;
  border: 0 !important;
  margin: 28px 0 !important;
}

.pill,
.pill-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

.hidden-section.visible {
  animation: none !important;
}

/* --------------------------------------------------------------------------
   16. TOGGLES / SWITCHES
   -------------------------------------------------------------------------- */

.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease;
}

.toggle-row:hover {
  border-color: var(--border-strong) !important;
}

.toggle-row.active,
.toggle-row:has(input:checked) {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 12px var(--accent-glow);
}

.toggle-switch,
.switch {
  position: relative;
  flex: 0 0 auto;
  width: 40px !important;
  height: 22px !important;
  margin-top: 1px;
}

.toggle-switch input,
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.toggle-slider,
.switch .slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong) !important;
  background-image: none !important;
  border-radius: var(--radius-pill) !important;
  border: 0 !important;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-slider::before,
.switch .slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

input:checked + .toggle-slider,
.switch input:checked + .slider {
  background: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow);
}

input:checked + .toggle-slider::before,
.switch input:checked + .slider::before {
  transform: translateX(18px);
}

.toggle-text {
  flex: 1;
  min-width: 0;
  color: var(--text) !important;
}

.toggle-title,
.toggle-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

.toggle-desc {
  margin-top: 3px !important;
  color: var(--text-faint) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.toggle-price {
  flex: 0 0 auto;
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
  white-space: nowrap;
}

.toggle-price.free {
  color: var(--text-faint) !important;
}

/* --------------------------------------------------------------------------
   17. UPLOAD / PREVIEW
   -------------------------------------------------------------------------- */

.upload-area {
  background: var(--surface-2) !important;
  background-image: none !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--radius) !important;
  padding: 26px 20px !important;
  text-align: center;
  transition: all 0.25s ease;
}

.upload-area:hover,
.upload-area.has-image {
  border-color: var(--accent) !important;
  border-style: solid !important;
  background: var(--accent-soft) !important;
  box-shadow: 0 0 15px var(--accent-glow) !important;
}

.upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px !important;
  background: var(--surface-3) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 16px !important;
}

.upload-text {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.upload-sub {
  color: var(--text-faint) !important;
  font-size: 12px !important;
}

#logoImage,
#coinLogoPreview {
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
}

.remove-logo-btn {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-radius: var(--radius-xs) !important;
}

/* AI block */
.ai-logo-section {
  background: var(--surface-2) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
}

.ai-title {
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
}

.coming-soon {
  background: var(--neon-pink-soft) !important;
  color: var(--neon-pink) !important;
  border: 1px solid var(--neon-pink) !important;
  border-radius: var(--radius-pill) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.1em;
}

.ai-preview-box,
.ai-preview {
  background: var(--surface) !important;
  border: 1px dashed var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
}

.ai-image-icon {
  color: var(--text-faint) !important;
  opacity: 1 !important;
}

.ai-cost {
  color: var(--text-faint) !important;
}

/* --------------------------------------------------------------------------
   18. AUTHORITY / REVOKE BLOCKS
   -------------------------------------------------------------------------- */

.revoke-title {
  color: var(--accent) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.05em;
}

.authority-boxes,
.authority-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.authority-box,
.auth-card {
  background: var(--surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  text-align: left !important;
  cursor: pointer;
  transition: all 0.25s ease;
}

.authority-box:hover,
.auth-card:hover {
  border-color: var(--border-strong) !important;
  transform: none !important;
}

.authority-box.is-active,
.auth-card.is-active {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

.authority-name,
.auth-name {
  color: var(--text) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.authority-box.is-active .authority-name {
  color: var(--accent) !important;
}

.authority-desc,
.auth-desc {
  color: var(--text-faint) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.authority-box.is-active .authority-desc {
  color: var(--text-muted) !important;
}

/* --------------------------------------------------------------------------
   19. MODAL / OVERLAY
   -------------------------------------------------------------------------- */

.modal {
  background: rgba(5, 5, 8, 0.9) !important;
  backdrop-filter: blur(12px) !important;
}

.modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--border-glow) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-glow-strong) !important;
}

/* --------------------------------------------------------------------------
   20. PROGRESS / STEPS
   -------------------------------------------------------------------------- */

.progress-bar,
.step-progress {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
  overflow: hidden;
}

.progress-fill,
.step-fill {
  background: linear-gradient(90deg, var(--accent), #0090c0) !important;
  box-shadow: 0 0 10px var(--accent-glow) !important;
  border-radius: var(--radius-pill) !important;
}

.step-dot {
  background: var(--surface-3) !important;
  border: 2px solid var(--border) !important;
  transition: all 0.3s ease;
}

.step-dot.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 12px var(--accent-glow) !important;
}

.step-dot.done {
  background: var(--success) !important;
  border-color: var(--success) !important;
}

/* --------------------------------------------------------------------------
   21. TABLE / LIST
   -------------------------------------------------------------------------- */

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

th {
  font-family: var(--font-display), var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent) !important;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-glow) !important;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px;
  color: var(--text-muted) !important;
}

tr:hover td {
  background: var(--surface-2) !important;
}

/* --------------------------------------------------------------------------
   22. BADGES / CHIPS
   -------------------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display), var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.badge-accent {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
}

.badge-success {
  background: var(--success-soft);
  color: var(--success);
}

.badge-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

/* --------------------------------------------------------------------------
   23. MISC UTILITY
   -------------------------------------------------------------------------- */

.glow-text {
  text-shadow: 0 0 10px var(--accent-glow);
}

.cyber-border {
  border: 1px solid var(--border-glow);
  box-shadow: 0 0 10px var(--accent-glow);
}

.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-glow);
  border-radius: var(--radius-lg);
}

/* Gradient divider */
.gradient-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* Responsive grid */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

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

/* --------------------------------------------------------------------------
   24. RESPONSIVE — Mobile Adjustments
   -------------------------------------------------------------------------- */

@media (max-width: 901px) {
  .mobile-nav-drawer,
  .mobile-panel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 901px) {
  .mobile-nav-drawer,
  .mobile-overlay,
  .mobile-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* --------------------------------------------------------------------------
   26. FORCE VISIBLE BUTTONS — Override all dark backgrounds
   -------------------------------------------------------------------------- */

.connect-wallet-btn,
.connect-wallet,
.btn-primary,
.mobile-wallet-btn,
.launch-btn,
.generate-btn,
.create-token-btn {
  background-color: #00e5ff !important;
  background-image: none !important;
  color: #050508 !important;
  border: 1px solid #00e5ff !important;
  box-shadow: 0 0 15px rgba(0,229,255,0.3) !important;
  opacity: 1 !important;
}

.connect-wallet-btn:hover,
.connect-wallet:hover,
.btn-primary:hover,
.mobile-wallet-btn:hover,
.launch-btn:hover,
.generate-btn:hover,
.create-token-btn:hover {
  background-color: #40f0ff !important;
  box-shadow: 0 0 25px rgba(0,229,255,0.5) !important;
}