:root {
  --bridge-bg: #07111f;
  --bridge-border: rgba(125, 211, 252, 0.22);
  --bridge-text: #d9f4ff;
  --bridge-muted: rgba(191, 219, 254, 0.72);
}

html, body {
  background:
    radial-gradient(circle at 20% 20%, rgba(34, 211, 238, 0.18), transparent 22%),
    radial-gradient(circle at 80% 14%, rgba(96, 165, 250, 0.16), transparent 18%),
    radial-gradient(circle at 50% 120%, rgba(14, 165, 233, 0.20), transparent 28%),
    linear-gradient(135deg, #030712 0%, #07111f 35%, #020617 100%);
  color: var(--bridge-text);
}

#page_wrapper::before,
#page_wrapper::after {
  content: ;
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

#page_wrapper::before {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.85) 0 1px, transparent 1.5px),
    radial-gradient(circle at 32% 64%, rgba(125,211,252,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 74% 22%, rgba(255,255,255,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 78%, rgba(56,189,248,.4) 0 1px, transparent 1.5px),
    radial-gradient(circle at 60% 48%, rgba(255,255,255,.5) 0 1px, transparent 1.5px);
  opacity: .5;
}

#page_wrapper::after {
  background:
    linear-gradient(90deg, transparent 0, rgba(34,211,238,.05) 49.5%, transparent 50.5%),
    linear-gradient(transparent 0, rgba(56,189,248,.03) 49.5%, transparent 50.5%);
  background-size: 120px 120px;
  opacity: .35;
  mask-image: radial-gradient(circle at center, black, transparent 90%);
}

#information-widgets {
  border-bottom: 1px solid rgba(125, 211, 252, 0.24) !important;
  background: linear-gradient(180deg, rgba(8,20,36,.92), rgba(8,20,36,.58));
  box-shadow: 0 20px 50px rgba(2, 8, 23, 0.45), inset 0 1px 0 rgba(191, 219, 254, 0.08);
  border-radius: 24px;
  padding: 1rem 1.2rem 1.25rem !important;
  backdrop-filter: blur(18px);
}

#information-widgets input,
#information-widgets form button,
dialog,
dialog input {
  border-color: rgba(125, 211, 252, 0.24) !important;
  background: rgba(15, 23, 42, 0.55) !important;
  color: var(--bridge-text) !important;
  box-shadow: inset 0 0 0 1px rgba(125,211,252,.08), 0 0 20px rgba(14,165,233,.08);
}

#information-widgets input::placeholder,
#information-widgets .text-theme-800,
#footer,
#version {
  color: var(--bridge-muted) !important;
}

.bridge-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bridge-border) !important;
  background: linear-gradient(180deg, rgba(8,20,36,.88), rgba(8,20,36,.56)) !important;
  box-shadow: 0 18px 40px rgba(2, 8, 23, 0.38), inset 0 1px 0 rgba(191, 219, 254, 0.07);
  backdrop-filter: blur(18px);
  border-radius: 22px !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.bridge-card::before {
  content: ;
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(125,211,252,.12) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}

.bridge-card:hover {
  transform: translateY(-4px);
  border-color: rgba(125, 211, 252, 0.45) !important;
  box-shadow: 0 24px 54px rgba(2, 8, 23, 0.55), 0 0 28px rgba(34, 211, 238, 0.12);
}

.bridge-card:hover::before {
  transform: translateX(100%);
}

h1, h2, h3, h4, .text-theme-900, .dark\:text-white {
  color: var(--bridge-text) !important;
  letter-spacing: 0.02em;
}

#footer::before {
  content: Bridge

.approve-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  border: 1px solid rgba(134, 239, 172, 0.45);
  background: rgba(21, 128, 61, 0.18);
  color: #bbf7d0;
  border-radius: 9999px;
  padding: 0.42rem 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.approve-btn:hover {
  background: rgba(34, 197, 94, 0.25);
}

.approve-btn:disabled {
  opacity: 0.8;
}