@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600&display=swap");
/*
 * Сгенерировано дизайн-конструктором iEXExchanger.
 * Источник настроек: админка iEXExchanger и сохранённые ключи оформления.
 * Не редактируйте этот файл вручную: изменения нужно публиковать из админ-панели.
 * © iEXExchanger. Все права защищены.
 */

@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600;700&display=swap');

:root {
    --font-sans: 'Geologica', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --radius: 0.75rem;
    --input-container-height: 110px;
    --select-container-height: 110px;
    --field-container-radius: calc(var(--radius) + 4px);
    --app-background: #f6f7fb;
    --app-foreground: var(--foreground);
    --section-background: #f3f5fb;
    --background: #ffffff;
    --foreground: #0f172a;
    --card: #ffffff;
    --card-foreground: #0f172a;
    --popover: #ffffff;
    --popover-foreground: #0f172a;
    --primary: #7b62ff;
    --primary-foreground: #ffffff;
    --secondary: #f5f3ff;
    --secondary-foreground: #4c1d95;
    --muted: #f8fafc;
    --muted-foreground: #64748b;
    --accent: #ede9fe;
    --accent-foreground: #5b21b6;
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --border: #e7e5f4;
    --input: #e5e7eb;
    --input-background: var(--background);
    --ring: #7b62ff;
    --toolbar: var(--background);
    --toolbar-foreground: var(--foreground);
    --toolbar-border: var(--border);
    --footer-background: color-mix(in oklab, var(--muted) 84%, var(--background));
    --footer-foreground: var(--foreground);
    --footer-muted-foreground: color-mix(in oklab, var(--muted-foreground) 90%, var(--foreground));
    --footer-border: color-mix(in oklab, var(--border) 60%, transparent);
    --footer-link: color-mix(in oklab, var(--foreground) 76%, var(--muted-foreground));
    --footer-link-hover: var(--primary);
    --footer-accent: color-mix(in oklab, var(--primary) 6%, transparent);
    --exchange-text-background: var(--muted);
    --exchange-text-foreground: var(--muted-foreground);
    --exchange-text-border: var(--border);
    --exchange-amount-background: var(--muted);
    --exchange-amount-foreground: var(--foreground);
}

.dark {
    --app-background: #0a0f1d;
    --app-foreground: var(--foreground);
    --section-background: #161d31;
    --background: #0b1020;
    --foreground: #f8fafc;
    --card: #11172a;
    --card-foreground: #f8fafc;
    --popover: #11172a;
    --popover-foreground: #f8fafc;
    --primary: #7b62ff;
    --primary-foreground: #ffffff;
    --secondary: #1b2338;
    --secondary-foreground: #e5e7eb;
    --muted: #141c2f;
    --muted-foreground: #94a3b8;
    --accent: #1b2440;
    --accent-foreground: #f8fafc;
    --destructive: #dc2626;
    --destructive-foreground: #ffffff;
    --border: rgb(255 255 255 / 0.12);
    --input: rgb(255 255 255 / 0.14);
    --input-background: #1f2937;
    --ring: #7b62ff;
    --toolbar: var(--background);
    --toolbar-foreground: var(--foreground);
    --toolbar-border: var(--border);
    --footer-background: color-mix(in oklab, var(--primary) 8%, var(--background));
    --footer-foreground: var(--foreground);
    --footer-muted-foreground: color-mix(in oklab, var(--muted-foreground) 86%, var(--primary));
    --footer-border: color-mix(in oklab, var(--primary) 22%, var(--border));
    --footer-link: color-mix(in oklab, var(--foreground) 76%, var(--primary));
    --footer-link-hover: var(--primary);
    --footer-accent: color-mix(in oklab, var(--primary) 16%, transparent);
    --exchange-text-background: var(--muted);
    --exchange-text-foreground: var(--muted-foreground);
    --exchange-text-border: var(--border);
    --exchange-amount-background: color-mix(in oklab, var(--muted) 82%, var(--background));
    --exchange-amount-foreground: var(--foreground);
}

body, input, button, textarea, select {
    font-family: var(--font-sans);
}

/* Custom Bitmonese overrides */

/* Bitmonese: first visual improvement pass */

:root {
  --bitmonese-text-secondary: #c7cdd8;
  --bitmonese-text-muted: #b8c0cf;
  --bitmonese-row-bg: rgba(255, 255, 255, 0.028);
  --bitmonese-row-hover: rgba(123, 98, 255, 0.13);
  --bitmonese-row-selected: rgba(123, 98, 255, 0.19);
  --bitmonese-row-border: rgba(255, 255, 255, 0.045);
  --bitmonese-selected-border: rgba(151, 132, 255, 0.58);
}

/* More breathing room between the three exchange panels */
.exchange-panels {
  gap: 18px !important;
}

.exchange-panel {
  --exchange-option-row-height: 58px;
  --exchange-option-child-row-height: 52px;
  --exchange-option-icon-size: 36px;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    0 18px 42px rgba(3, 6, 20, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

/* Currency rows */
.exchange__item {
  min-height: var(--exchange-option-row-height) !important;
  gap: 14px !important;
  padding: 9px 14px !important;
  border-radius: 16px !important;
  background: var(--bitmonese-row-bg) !important;
  box-shadow: inset 0 0 0 1px var(--bitmonese-row-border);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease !important;
}

.exchange__item:hover {
  background: var(--bitmonese-row-hover) !important;
  box-shadow: inset 0 0 0 1px rgba(151, 132, 255, 0.22);
}

.exchange__item[aria-pressed="true"] {
  background: var(--bitmonese-row-selected) !important;
  box-shadow:
    inset 0 0 0 1px var(--bitmonese-selected-border),
    0 8px 22px rgba(77, 55, 196, 0.1);
}

.exchange-option-tree-item .exchange__item {
  min-height: var(--exchange-option-child-row-height) !important;
}

/* Larger, consistently sized bank and currency icons */
.exchange__item img {
  width: var(--exchange-option-icon-size) !important;
  height: var(--exchange-option-icon-size) !important;
  flex: 0 0 var(--exchange-option-icon-size) !important;
  object-fit: contain;
}

/* Currency names */
.exchange__item span[class~="text-sm"][class~="font-medium"] {
  color: #f8fafc !important;
  font-size: 17px !important;
  line-height: 24px !important;
  font-weight: 600 !important;
}

.exchange__item[aria-pressed="true"] span[class~="text-sm"][class~="font-medium"] {
  color: #ffffff !important;
}

/* Stronger selected check mark without moving it */
.exchange__item[aria-pressed="true"] fa-icon,
.exchange__item[aria-pressed="true"] fa-icon svg {
  color: #9d8cff !important;
}

/* Lighter secondary text throughout the exchange area */
.exchange-panels [class~="text-muted-foreground"],
.exchange-panels [class*="text-muted-foreground/"] {
  color: var(--bitmonese-text-secondary) !important;
}

.exchange-panels input::placeholder,
.exchange-panels textarea::placeholder {
  color: var(--bitmonese-text-muted) !important;
  opacity: 1 !important;
}

/* Currency filters */
.currency-iso-filter-list {
  gap: 10px !important;
}

.currency-iso-filter-button {
  color: var(--bitmonese-text-secondary) !important;
  border-color: rgba(255, 255, 255, 0.065) !important;
  background: rgba(255, 255, 255, 0.018) !important;
}

.currency-iso-filter-button:hover {
  color: #ffffff !important;
  border-color: rgba(151, 132, 255, 0.3) !important;
  background: rgba(123, 98, 255, 0.1) !important;
}

.currency-iso-filter-button[aria-pressed="true"],
.currency-iso-filter-button[data-state="active"] {
  color: #ffffff !important;
  border-color: rgba(151, 132, 255, 0.48) !important;
  background: rgba(123, 98, 255, 0.16) !important;
}

/* Taller and clearer currency search fields */
.exchange-panels ui-input-group:has(input[placeholder*="Поиск"]) {
  min-height: 54px !important;
  padding-inline: 18px !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  background: rgba(31, 41, 55, 0.88) !important;
}

.exchange-panels input[placeholder*="Поиск"] {
  min-height: 52px !important;
  color: #f8fafc !important;
  font-size: 16px !important;
}

/* Keep the denser rhythm on phones to prevent wrapping */
@media (max-width: 639px) {
  .exchange-panels {
    gap: 14px !important;
  }

  .exchange-panel {
    --exchange-option-row-height: 56px;
    --exchange-option-child-row-height: 50px;
    --exchange-option-icon-size: 34px;
  }

  .exchange__item {
    gap: 12px !important;
    padding: 8px 12px !important;
  }

  .exchange__item span[class~="text-sm"][class~="font-medium"] {
    font-size: 16px !important;
    line-height: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .exchange__item {
    transition: none !important;
  }
}


/* Bitmonese: glass and motion improvement pass */

:root {
  --bitmonese-violet: #8068ff;
  --bitmonese-violet-light: #a899ff;
  --bitmonese-glass: rgba(9, 14, 31, 0.74);
  --bitmonese-glass-strong: rgba(12, 18, 39, 0.84);
  --bitmonese-glass-border: rgba(181, 169, 255, 0.18);
}

/* Dark animated background supplied for the project */
.main-background {
  background-color: #050713 !important;
  background-image:
    linear-gradient(180deg, rgba(3, 5, 15, 0.48) 0%, rgba(5, 7, 19, 0.68) 55%, rgba(5, 7, 17, 0.88) 100%),
    url("/static/theme/bitmonese-background.webp") !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, max(1280px, 100vw) auto !important;
  background-attachment: fixed, fixed !important;
}

/* Glass surfaces: header, exchange cards and footer */
ui-toolbar-shell {
  background: linear-gradient(135deg, rgba(12, 17, 36, 0.82), rgba(7, 11, 27, 0.68)) !important;
  border-color: var(--bitmonese-glass-border) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%);
  backdrop-filter: blur(20px) saturate(135%);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

.exchange-panel {
  --exchange-option-row-height: 62px;
  --exchange-option-child-row-height: 56px;
  --exchange-option-icon-size: 40px;
  background: linear-gradient(145deg, rgba(15, 21, 44, 0.84), rgba(8, 13, 30, 0.73)) !important;
  border-color: var(--bitmonese-glass-border) !important;
  -webkit-backdrop-filter: blur(18px) saturate(128%);
  backdrop-filter: blur(18px) saturate(128%);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

app-footer {
  --footer-background: rgba(8, 12, 27, 0.8);
  --footer-foreground: #ffffff;
  --footer-muted-foreground: #ffffff;
  --footer-link: #ffffff;
}

app-footer,
app-footer p,
app-footer span,
app-footer a,
app-footer li {
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}

app-footer h2,
app-footer h3,
app-footer h4 {
  color: #ffffff !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
}

app-footer a:hover {
  color: #cfc7ff !important;
}

/* Header menu: larger but still compact enough for the current layout */
ui-toolbar-nav a {
  position: relative;
  color: #f4f6fb !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

ui-toolbar-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, #927eff 20%, #c7bcff 80%, transparent);
  box-shadow: 0 0 10px rgba(133, 108, 255, 0.72);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease, opacity 180ms ease;
}

ui-toolbar-nav a:hover {
  color: #ffffff !important;
}

ui-toolbar-nav a:hover::after,
ui-toolbar-nav a[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Every currency row has a restrained violet glow; hover is more active */
.exchange__item {
  margin-bottom: 10px !important;
  background: linear-gradient(135deg, rgba(103, 79, 218, 0.22), rgba(56, 66, 135, 0.18)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(157, 142, 255, 0.17),
    0 7px 18px rgba(17, 8, 60, 0.12) !important;
  transform-origin: center;
  will-change: transform;
}

.exchange__item:hover {
  background: linear-gradient(135deg, rgba(126, 98, 255, 0.38), rgba(73, 91, 182, 0.28)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(181, 169, 255, 0.54),
    0 0 24px rgba(111, 82, 255, 0.22) !important;
  transform: none;
}

/* Child currency lists keep the same rhythm without clipping the glow */
.exchange-option-tree-item {
  overflow: visible !important;
}

.exchange-option-tree-item .exchange__item {
  margin-bottom: 8px !important;
}

.exchange__item[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(126, 98, 255, 0.48), rgba(75, 69, 167, 0.38)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(190, 179, 255, 0.78),
    0 0 26px rgba(112, 82, 255, 0.26) !important;
}

.exchange__item[aria-pressed="true"]:hover {
  background: linear-gradient(135deg, rgba(143, 116, 255, 0.58), rgba(88, 83, 190, 0.48)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(216, 209, 255, 0.9),
    0 0 30px rgba(126, 96, 255, 0.34) !important;
}

/* Filter chips now belong to the same palette */
.currency-iso-filter-button {
  background: rgba(78, 66, 151, 0.16) !important;
  border-color: rgba(156, 142, 255, 0.17) !important;
}

.currency-iso-filter-button:hover {
  background: rgba(123, 98, 255, 0.24) !important;
  border-color: rgba(178, 165, 255, 0.5) !important;
  transform: translateY(-1px);
}

.currency-iso-filter-button[aria-pressed="true"],
.currency-iso-filter-button[data-state="active"] {
  background: rgba(123, 98, 255, 0.32) !important;
  border-color: rgba(190, 179, 255, 0.7) !important;
  box-shadow: 0 0 16px rgba(111, 82, 255, 0.18);
}

/* Login and order buttons: site gradient plus a sliding lower highlight */
ui-toolbar-actions a,
.exchange-panel--details button[type="submit"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff !important;
  background: linear-gradient(105deg, #654cff 0%, #846cff 55%, #6752e9 100%) !important;
  border-color: rgba(205, 198, 255, 0.36) !important;
  box-shadow: 0 10px 24px rgba(82, 54, 220, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease !important;
}

ui-toolbar-actions a::after,
.exchange-panel--details button[type="submit"]::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 100%;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d8d1ff 40%, #ffffff 55%, transparent);
  transition: transform 360ms ease;
}

ui-toolbar-actions a:hover,
.exchange-panel--details button[type="submit"]:hover {
  filter: brightness(1.1) saturate(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(104, 75, 244, 0.38), 0 0 20px rgba(128, 104, 255, 0.2) !important;
}

ui-toolbar-actions a:hover::after,
.exchange-panel--details button[type="submit"]:hover::after {
  transform: translateX(200%);
}

/* Details and informational copy: remove the washed-out gray */
.exchange-panel--details h3,
.exchange-panel--details p,
.exchange-panel--details [class~="text-muted-foreground"],
.exchange-panel--details [class*="text-muted-foreground/"] {
  color: #eef1f7 !important;
}

.exchange-panel--details h3 {
  font-size: 17px !important;
  line-height: 1.4 !important;
}

.exchange-panel--details p {
  font-size: 16px !important;
  line-height: 1.58 !important;
}

.exchange-panel--details label,
.exchange-panel--details .mdc-label {
  color: #f5f6fb !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}

@media (max-width: 1099px) {
  ui-toolbar-nav a {
    font-size: 16px !important;
  }

  .main-background {
    background-attachment: scroll, scroll !important;
    background-size: cover, auto 760px !important;
  }
}

@media (max-width: 639px) {
  .exchange-panel {
    --exchange-option-row-height: 58px;
    --exchange-option-child-row-height: 52px;
    --exchange-option-icon-size: 37px;
  }

  .exchange__item {
    margin-bottom: 8px !important;
  }

  app-footer,
  app-footer p,
  app-footer span,
  app-footer a,
  app-footer li {
    font-size: 15px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-background {
    background-image:
      linear-gradient(180deg, rgba(3, 5, 15, 0.48), rgba(5, 7, 17, 0.9)),
      url("/static/theme/bitmonese-background-poster.webp") !important;
  }

  .exchange__item,
  .currency-iso-filter-button,
  ui-toolbar-nav a::after,
  ui-toolbar-actions a,
  .exchange-panel--details button[type="submit"],
  ui-toolbar-actions a::after,
  .exchange-panel--details button[type="submit"]::after {
    transition: none !important;
  }

  .exchange__item:hover,
  .currency-iso-filter-button:hover,
  ui-toolbar-actions a:hover,
  .exchange-panel--details button[type="submit"]:hover {
    transform: none !important;
  }
}

/* Bitmonese: adjustments from video review */

/* Unified liquid-glass treatment for amount fields, inputs and site cards */
.exchange-panel [class~="bg-exchange-amount-background"],
.exchange-panels ui-input-group,
.reserve-item__surface,
.partner-card,
.main-background main [class~="bg-card"] {
  background: linear-gradient(145deg, rgba(19, 28, 59, 0.72), rgba(9, 15, 35, 0.62)) !important;
  border: 1px solid rgba(174, 161, 255, 0.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(132%);
  backdrop-filter: blur(18px) saturate(132%);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
}

.exchange-panel [class~="bg-exchange-amount-background"] {
  background: linear-gradient(135deg, rgba(62, 67, 131, 0.28), rgba(16, 24, 53, 0.7)) !important;
}

.exchange-panels ui-input-group {
  background: rgba(17, 26, 52, 0.7) !important;
}

.reserve-item__surface,
.partner-card {
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

.reserve-item__surface:hover,
.partner-card:hover {
  background: linear-gradient(145deg, rgba(41, 45, 92, 0.72), rgba(16, 22, 50, 0.68)) !important;
  border-color: rgba(178, 164, 255, 0.42) !important;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.24),
    0 0 22px rgba(111, 82, 255, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Larger and consistently white secondary copy throughout content pages */
.main-background main [class~="text-muted-foreground"],
.main-background main [class*="text-muted-foreground/"],
.reserve-item__amount {
  color: #f0f2f8 !important;
}

.main-background main p,
.main-background main li {
  color: #eef1f7;
  font-size: 16px;
  line-height: 1.6;
}

/* All top navigation entries share exactly the same size */
ui-toolbar-nav a,
ui-toolbar-nav a span {
  font-size: 18px !important;
  font-weight: 600 !important;
}

/* Slightly larger control copy requested in the review */
.currency-iso-filter-button,
.exchange-panel button,
.exchange-panel--details button[type="submit"] {
  font-size: 16px !important;
}

.exchange-panel--details button[type="submit"] {
  min-height: 58px;
  font-weight: 650 !important;
}

/* Give reserve and partner sections the same translucent outer surface */
exchange-reserves > section,
partner-links > section,
partner-links > div,
.main-background main > section:last-of-type {
  background: linear-gradient(145deg, rgba(15, 22, 47, 0.74), rgba(7, 12, 29, 0.64)) !important;
  border-color: rgba(174, 161, 255, 0.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 20px 46px rgba(0, 0, 0, 0.22) !important;
}

@media (max-width: 1099px) {
  ui-toolbar-nav a,
  ui-toolbar-nav a span {
    font-size: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reserve-item__surface,
  .partner-card {
    transition: none !important;
  }
}

/* Bitmonese: full-height currency distribution and performance pass */

@media (min-width: 1024px) {
  /* The first two columns inherit the height of the longest details panel. */
  .exchange-panel--from,
  .exchange-panel--to {
    display: flex;
    flex-direction: column;
  }

  /* Turn the panel body and its desktop list area into flexible columns. */
  .exchange-panel--from > div:last-child,
  .exchange-panel--to > div:last-child {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .exchange-panel--from > div:last-child > div:last-child,
  .exchange-panel--to > div:last-child > div:last-child {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .exchange-panel--from exchange-option-list,
  .exchange-panel--to exchange-option-list {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .exchange-panel--from exchange-option-list > .exchange-option-list--render-optimized,
  .exchange-panel--to exchange-option-list > .exchange-option-list--render-optimized {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100%;
  }

  /* Spacing is now calculated by the column instead of fixed margins. */
  .exchange-panel--from exchange-option-list .exchange__item,
  .exchange-panel--to exchange-option-list .exchange__item {
    margin-bottom: 0 !important;
  }
}


/* Bitmonese: corrected desktop list and GPU-only background motion */

/* Stop decoding an animated image across the entire fixed page. */
.main-background {
  isolation: isolate;
  overflow-x: clip;
  background-color: #03050d !important;
  background-image: none !important;
}

.main-background::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: -7%;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(2, 4, 12, 0.34), rgba(3, 5, 15, 0.58)),
    url("/static/theme/bitmonese-background-poster.webp");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  transform: translate3d(-1.2%, -0.8%, 0) scale(1.035);
  transform-origin: center;
  will-change: transform;
  animation: bitmonese-background-drift 24s ease-in-out infinite alternate;
}

.main-background > * {
  position: relative;
  z-index: 1;
}

@keyframes bitmonese-background-drift {
  from {
    transform: translate3d(-1.2%, -0.8%, 0) scale(1.035);
  }
  to {
    transform: translate3d(1.2%, 0.8%, 0) scale(1.055);
  }
}

@media (min-width: 1024px) {
  /* V4 accidentally addressed the hidden mobile selector. Keep it hidden. */
  .exchange-panel--from > div:last-child > div[class*="lg:hidden"],
  .exchange-panel--to > div:last-child > div[class*="lg:hidden"] {
    display: none !important;
  }

  /* Stretch the actual desktop currency area. */
  .exchange-panel--from > div:last-child > div:has(exchange-option-list),
  .exchange-panel--to > div:last-child > div:has(exchange-option-list) {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .exchange-panel--from exchange-option-list,
  .exchange-panel--to exchange-option-list {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .exchange-panel--from exchange-option-list > .exchange-option-list--render-optimized,
  .exchange-panel--to exchange-option-list > .exchange-option-list--render-optimized {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    min-height: 100%;
  }

  .exchange-panel--from exchange-option-list .item-anim-wrapper,
  .exchange-panel--to exchange-option-list .item-anim-wrapper,
  .exchange-panel--from exchange-option-list .network-children-shell,
  .exchange-panel--to exchange-option-list .network-children-shell {
    flex: 0 0 auto;
  }

  .exchange-panel--from exchange-option-list .exchange__item,
  .exchange-panel--to exchange-option-list .exchange__item {
    min-height: 58px !important;
    margin-bottom: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-background::before {
    animation: none !important;
    transform: none !important;
  }
}


/* Bitmonese: restore the full animated liquid-ribbon background */

.main-background {
  background-color: #050713 !important;
  background-image:
    linear-gradient(180deg, rgba(3, 5, 15, 0.48) 0%, rgba(5, 7, 19, 0.68) 55%, rgba(5, 7, 17, 0.88) 100%),
    url("/static/theme/bitmonese-background.webp") !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: cover, max(1280px, 100vw) auto !important;
  background-attachment: fixed, fixed !important;
}

.main-background::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

@media (max-width: 1099px) {
  .main-background {
    background-attachment: scroll, scroll !important;
    background-size: cover, auto 760px !important;
  }
}


/* Bitmonese: keep the Information dropdown above glass panels */

ui-toolbar {
  z-index: 1000 !important;
  overflow: visible !important;
  isolation: isolate;
}

ui-toolbar-shell,
ui-toolbar-main,
ui-toolbar-nav,
ui-navigation-menu,
ui-navigation-menu-list,
ui-navigation-menu [role="menubar"],
ui-navigation-menu [role="none"] {
  overflow: visible !important;
}

ui-navigation-menu {
  position: relative;
  z-index: 1010 !important;
}

ui-navigation-menu-content,
.ui-navigation-menu-content-positioner,
ui-navigation-menu [role="menu"] {
  z-index: 1100 !important;
}


/* Bitmonese: lift the header stacking context above page content */

.main-background > app-header {
  position: relative !important;
  z-index: 2000 !important;
  isolation: isolate;
  overflow: visible !important;
}

.main-background > main {
  position: relative !important;
  z-index: 1 !important;
}

app-header ui-toolbar {
  z-index: 2100 !important;
  overflow: visible !important;
}

app-header .ui-navigation-menu-content-positioner,
app-header ui-navigation-menu [role="menu"] {
  z-index: 2200 !important;
}

app-header .mobile-menu-overlay {
  z-index: 2150 !important;
  overflow-y: auto !important;
}



/* ================================================================
   BITMONESE V10 — PARALLAX DUST, NEON TIMER AND HEADER POLISH
   ================================================================ */

/* Two lightweight fixed particle fields. They sit above the interface,
   never intercept clicks and move at different speeds for depth. */
.main-background::before,
.main-background::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: -12vh -8vw !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.main-background::before {
  opacity: .5;
  background-image:
    radial-gradient(circle at 7% 18%, rgba(167,139,250,.95) 0 1.5px, transparent 2.4px),
    radial-gradient(circle at 18% 74%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 27% 34%, rgba(96,165,250,.85) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 38% 88%, rgba(196,181,253,.82) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 45% 13%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 58%, rgba(139,92,246,.95) 0 1.7px, transparent 2.8px),
    radial-gradient(circle at 63% 28%, rgba(125,211,252,.82) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 71% 79%, rgba(196,181,253,.9) 0 1.4px, transparent 2.5px),
    radial-gradient(circle at 81% 42%, rgba(255,255,255,.72) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 17%, rgba(139,92,246,.9) 0 1.6px, transparent 2.7px),
    radial-gradient(circle at 95% 83%, rgba(96,165,250,.82) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 14% 49%, rgba(125,211,252,.65) 0 1px, transparent 2px);
  filter: drop-shadow(0 0 5px rgba(124,58,237,.8));
  animation: bitmonese-dust-near 18s ease-in-out infinite alternate;
}

.main-background::after {
  opacity: .32;
  background-image:
    radial-gradient(circle at 4% 60%, rgba(255,255,255,.75) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 12% 29%, rgba(129,140,248,.8) 0 1px, transparent 1.9px),
    radial-gradient(circle at 24% 91%, rgba(125,211,252,.7) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 33% 19%, rgba(196,181,253,.78) 0 1px, transparent 1.9px),
    radial-gradient(circle at 42% 66%, rgba(255,255,255,.65) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 58% 7%, rgba(129,140,248,.8) 0 1px, transparent 1.9px),
    radial-gradient(circle at 67% 47%, rgba(125,211,252,.72) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 76% 94%, rgba(196,181,253,.78) 0 1px, transparent 1.9px),
    radial-gradient(circle at 86% 23%, rgba(255,255,255,.65) 0 .8px, transparent 1.7px),
    radial-gradient(circle at 97% 58%, rgba(129,140,248,.82) 0 1px, transparent 1.9px);
  filter: drop-shadow(0 0 3px rgba(59,130,246,.7));
  animation: bitmonese-dust-far 29s linear infinite alternate;
}

@keyframes bitmonese-dust-near {
  0%   { transform: translate3d(-1.5vw, 2vh, 0) scale(1); opacity: .35; }
  50%  { transform: translate3d(2vw, -2.5vh, 0) scale(1.025); opacity: .56; }
  100% { transform: translate3d(-.5vw, -6vh, 0) scale(1.01); opacity: .42; }
}

@keyframes bitmonese-dust-far {
  0%   { transform: translate3d(1vw, -1vh, 0) scale(1.01); }
  100% { transform: translate3d(-2vw, 5vh, 0) scale(1.035); }
}

/* Countdown card, contrasting moving fill and timer capsule. */
.exchange-panel--details div.rounded-2xl:has(app-countdown) {
  border-color: rgba(139,92,246,.68) !important;
  background: rgba(15,23,42,.72) !important;
  box-shadow: 0 0 18px rgba(124,58,237,.26), inset 0 0 18px rgba(79,70,229,.1) !important;
}

.exchange-panel--details div.relative.overflow-hidden:has(app-countdown) > span:first-child {
  background: linear-gradient(90deg, rgba(37,99,235,.48), rgba(124,58,237,.7), rgba(34,211,238,.55)) !important;
  box-shadow: 4px 0 18px rgba(34,211,238,.62) !important;
}

.exchange-panel--details div:has(> app-countdown) {
  border-color: rgba(167,139,250,.78) !important;
  background: rgba(76,29,149,.26) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(139,92,246,.38), inset 0 0 8px rgba(255,255,255,.06) !important;
}

/* Stronger navigation with a restrained luminous hover. */
ui-toolbar-nav a,
ui-toolbar-nav button,
ui-navigation-menu-trigger button {
  font-size: 18px !important;
  font-weight: 700 !important;
  transition: color .2s ease, transform .2s ease, text-shadow .2s ease, background-color .2s ease !important;
}

ui-toolbar-nav a:hover,
ui-toolbar-nav button:hover,
ui-navigation-menu-trigger button:hover,
.mobile-menu-link:hover {
  color: #fff !important;
  transform: translateY(-1px) scale(1.035);
  text-shadow: 0 0 7px rgba(196,181,253,.9), 0 0 16px rgba(124,58,237,.65);
}

/* The floating header becomes roomier after scroll. */
@media (min-width: 1024px) {
  ui-toolbar:has(.logo--scrolled) ui-toolbar-shell {
    max-width: 1120px !important;
    min-height: 72px !important;
  }

  ui-toolbar:has(.logo--scrolled) ui-toolbar-main {
    min-height: 70px !important;
    padding-inline: 20px !important;
  }

  ui-toolbar .logo--scrolled,
  ui-toolbar .logo--scrolled img {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}

/* A subtle common glow for the detail panel and its editable fields. */
.exchange-panel--details input,
.exchange-panel--details textarea,
.exchange-panel--details ui-input,
.exchange-panel--details .rounded-xl {
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease !important;
}

.exchange-panel--details input:focus,
.exchange-panel--details textarea:focus,
.exchange-panel--details ui-input:focus-within {
  border-color: rgba(139,92,246,.74) !important;
  box-shadow: 0 0 0 1px rgba(139,92,246,.32), 0 0 18px rgba(124,58,237,.2) !important;
}

@media (max-width: 767px) {
  .main-background::before { opacity: .34; }
  .main-background::after { opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
  .main-background::before,
  .main-background::after {
    animation: none !important;
    opacity: .18 !important;
    transform: none !important;
  }
}


/* ================================================================
   BITMONESE V11 — VISIBLE PARTICLE MOTION AND LOGO HOVER
   ================================================================ */

/* V10 movement was intentionally subtle. Increase travel distance and
   animate the gradient field itself so movement remains clearly visible. */
.main-background::before {
  opacity: .62 !important;
  animation: bitmonese-dust-near-v11 10s ease-in-out infinite alternate !important;
}

.main-background::after {
  opacity: .46 !important;
  animation: bitmonese-dust-far-v11 16s ease-in-out infinite alternate-reverse !important;
}

@keyframes bitmonese-dust-near-v11 {
  0% {
    transform: translate3d(-4vw, 7vh, 0) scale(.98);
    background-position: 0 0;
    filter: drop-shadow(0 0 3px rgba(124,58,237,.6));
  }
  45% {
    opacity: .82;
    transform: translate3d(4vw, -5vh, 0) scale(1.035);
    background-position: 18px -28px;
    filter: drop-shadow(0 0 8px rgba(167,139,250,.95));
  }
  100% {
    transform: translate3d(-1vw, -12vh, 0) scale(1.015);
    background-position: -14px -52px;
    filter: drop-shadow(0 0 5px rgba(59,130,246,.85));
  }
}

@keyframes bitmonese-dust-far-v11 {
  0% {
    transform: translate3d(4vw, -6vh, 0) scale(1.04);
    background-position: 0 0;
  }
  50% {
    opacity: .3;
    transform: translate3d(-3vw, 2vh, 0) scale(.99);
    background-position: -22px 30px;
  }
  100% {
    transform: translate3d(2vw, 11vh, 0) scale(1.025);
    background-position: 16px 62px;
  }
}

/* Both the full-size and compact logo react to hover. */
ui-toolbar .logo,
ui-toolbar .logo img,
ui-toolbar a:has(.logo) {
  transform-origin: center !important;
  transition: transform .22s ease, filter .22s ease !important;
}

ui-toolbar .logo:hover,
ui-toolbar a:hover .logo,
ui-toolbar a:hover .logo img {
  transform: scale(1.13) !important;
  filter: drop-shadow(0 0 7px rgba(196,181,253,.9)) drop-shadow(0 0 15px rgba(124,58,237,.7)) !important;
}

/* Keep motion gentler on small screens, but do not turn it into a static field. */
@media (max-width: 767px) {
  .main-background::before {
    opacity: .48 !important;
    animation-duration: 14s !important;
  }

  .main-background::after {
    opacity: .3 !important;
    animation-duration: 21s !important;
  }
}

/* The requested ambient motion remains active even when a system-wide
   reduced-motion preference is enabled; transforms stay GPU-friendly. */
@media (prefers-reduced-motion: reduce) {
  .main-background::before {
    animation: bitmonese-dust-near-v11 14s ease-in-out infinite alternate !important;
  }

  .main-background::after {
    animation: bitmonese-dust-far-v11 21s ease-in-out infinite alternate-reverse !important;
  }
}


/* ================================================================
   BITMONESE V12 — RESTRAINED LOGO HOVER
   ================================================================ */

/* Keep the hover inside the toolbar and avoid tinting the purple wordmark. */
ui-toolbar .logo:hover,
ui-toolbar a:hover .logo,
ui-toolbar a:hover .logo img {
  transform: scale(1.025) !important;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.48))
          drop-shadow(0 0 5px rgba(191,219,254,.24)) !important;
}


/* ================================================================
   BITMONESE V13 — PERFORMANCE BACKGROUND
   ================================================================ */

/* Remove the animated planet, parallax and particle layers. */
.main-background {
  background-color: #050713 !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(76, 29, 149, .16) 0%, transparent 42%),
    linear-gradient(180deg, #080b1a 0%, #050713 48%, #03050d 100%) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

.main-background::before,
.main-background::after {
  content: none !important;
  display: none !important;
  background: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}


/* ================================================================
   BITMONESE V14 — VIDEO REVIEW AND LARGER FOOTER TEXT
   ================================================================ */

/* Remove the pronounced header/logo glow and the white hover flare. */
ui-toolbar .logo:hover,
ui-toolbar a:hover .logo,
ui-toolbar a:hover .logo img {
  transform: none !important;
  filter: none !important;
}

ui-toolbar-nav a:hover,
ui-toolbar-nav button:hover,
ui-navigation-menu-trigger button:hover,
.mobile-menu-link:hover {
  transform: none !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
  color: #f4f6fb !important;
}

/* Keep the timer colored but remove the outer neon halo. */
.exchange-panel--details div.rounded-2xl:has(app-countdown),
.exchange-panel--details div:has(> app-countdown),
.exchange-panel--details div.relative.overflow-hidden:has(app-countdown) > span:first-child {
  box-shadow: none !important;
}

/* Replace neutral grey field surfaces with the same restrained blue tone
   in every locale. */
.exchange-panel [class~="bg-exchange-amount-background"] {
  background: linear-gradient(135deg, rgba(43, 55, 112, .46), rgba(15, 23, 54, .82)) !important;
}

.exchange-panels ui-input-group {
  background: rgba(24, 36, 76, .82) !important;
  border-color: rgba(125, 145, 220, .3) !important;
}

/* Footer typography: approximately 12–15% larger without changing grid. */
app-footer,
app-footer p,
app-footer span,
app-footer a,
app-footer li {
  font-size: 18px !important;
  line-height: 1.58 !important;
}

app-footer h2,
app-footer h3,
app-footer h4 {
  font-size: 20px !important;
  line-height: 1.42 !important;
}

@media (max-width: 767px) {
  app-footer,
  app-footer p,
  app-footer span,
  app-footer a,
  app-footer li {
    font-size: 17px !important;
  }

  app-footer h2,
  app-footer h3,
  app-footer h4 {
    font-size: 19px !important;
  }
}


/* ================================================================
   BITMONESE V15 — TIMER AND HEADER CONTACT TYPOGRAPHY
   ================================================================ */

/* Increase all labels and values inside the neon countdown card by ~12%. */
.exchange-panel--details div.rounded-2xl:has(app-countdown),
.exchange-panel--details div.rounded-2xl:has(app-countdown) span,
.exchange-panel--details div.rounded-2xl:has(app-countdown) p,
.exchange-panel--details div.rounded-2xl:has(app-countdown) strong {
  font-size: 16px !important;
  line-height: 1.45 !important;
}

.exchange-panel--details app-countdown,
.exchange-panel--details div:has(> app-countdown) {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

/* Top contact/social strip: Telegram, email and working hours. */
app-header a[href*="t.me"],
app-header a[href*="telegram"],
app-header a[href^="mailto:"],
app-header a[href^="tel:"],
app-header a[href*="wa.me"],
app-header a[href*="whatsapp"],
app-header a[href*="vk.com"],
app-header a[href*="instagram"],
app-header a[href*="facebook"] {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* The schedule is normally the neighbouring final item in the contact row. */
app-header a[href^="mailto:"] ~ span,
app-header a[href*="t.me"] ~ span,
app-header [class*="contact"] span,
app-header [class*="social"] span {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

@media (max-width: 767px) {
  .exchange-panel--details div.rounded-2xl:has(app-countdown),
  .exchange-panel--details div.rounded-2xl:has(app-countdown) span,
  .exchange-panel--details div.rounded-2xl:has(app-countdown) p,
  .exchange-panel--details div.rounded-2xl:has(app-countdown) strong {
    font-size: 15px !important;
  }
}


/* ================================================================
   BITMONESE V16 — TIMER GLOW, SELECTED CARDS, AMOUNTS, WHITE TEXT
   ================================================================ */

/* Restore the neon halo requested for the countdown card. */
.exchange-panel--details div.rounded-2xl:has(app-countdown) {
  border-color: rgba(139, 92, 246, .72) !important;
  box-shadow:
    0 0 18px rgba(124, 58, 237, .3),
    inset 0 0 18px rgba(79, 70, 229, .12) !important;
}

.exchange-panel--details div.relative.overflow-hidden:has(app-countdown) > span:first-child {
  box-shadow: 4px 0 18px rgba(34, 211, 238, .62) !important;
}

.exchange-panel--details div:has(> app-countdown) {
  box-shadow:
    0 0 12px rgba(139, 92, 246, .4),
    inset 0 0 8px rgba(255, 255, 255, .07) !important;
}

/* Selected currencies on the compact/mobile layout need a stronger surface. */
.exchange-panel--from > div:last-child > div[class*="lg:hidden"],
.exchange-panel--to > div:last-child > div[class*="lg:hidden"] {
  background:
    linear-gradient(135deg, rgba(52, 64, 126, .66), rgba(22, 31, 68, .9)) !important;
  border: 1px solid rgba(135, 151, 225, .38) !important;
  border-radius: 22px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 10px 26px rgba(0, 0, 0, .2) !important;
}

.exchange-panel--from > div:last-child > div[class*="lg:hidden"] > *,
.exchange-panel--to > div:last-child > div[class*="lg:hidden"] > * {
  background: transparent !important;
}

/* GetBit uses Geologica for the primary exchange amount. */
.exchange-panel [class~="bg-exchange-amount-background"] input,
.exchange-panel [class~="bg-exchange-amount-background"] input[type="text"],
.exchange-panel [class~="bg-exchange-amount-background"] > span:first-child {
  font-family: "Geologica", sans-serif !important;
  font-size: clamp(38px, 3vw, 44px) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #fff !important;
}

/* All readable copy inside the three exchange panels should be white. */
.exchange-panels,
.exchange-panels h1,
.exchange-panels h2,
.exchange-panels h3,
.exchange-panels h4,
.exchange-panels p,
.exchange-panels span,
.exchange-panels label,
.exchange-panels a,
.exchange-panels button,
.exchange-panels input,
.exchange-panels textarea,
.exchange-panels [class~="text-muted-foreground"],
.exchange-panels [class*="text-muted-foreground/"] {
  color: #fff !important;
}

.exchange-panels input::placeholder,
.exchange-panels textarea::placeholder {
  color: rgba(255, 255, 255, .88) !important;
  opacity: 1 !important;
}

@media (max-width: 767px) {
  .exchange-panel [class~="bg-exchange-amount-background"] input,
  .exchange-panel [class~="bg-exchange-amount-background"] input[type="text"],
  .exchange-panel [class~="bg-exchange-amount-background"] > span:first-child {
    font-size: 40px !important;
  }
}


/* ================================================================
   BITMONESE V17 — SAFE AMOUNT SIZING
   ================================================================ */

/* Keep Geologica, but return the main amounts to a safe compact size. */
.exchange-panel [class~="bg-exchange-amount-background"] input,
.exchange-panel [class~="bg-exchange-amount-background"] input[type="text"],
.exchange-panel [class~="bg-exchange-amount-background"] > span:first-child {
  min-width: 0 !important;
  font-size: 34px !important;
  line-height: 1.2 !important;
}

/* The phrase is much longer than a normal amount and needs its own size. */
.exchange-panel [class~="bg-exchange-amount-background"] input::placeholder {
  font-family: "Geologica", sans-serif !important;
  font-size: 27px !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 767px) {
  .exchange-panel [class~="bg-exchange-amount-background"] input,
  .exchange-panel [class~="bg-exchange-amount-background"] input[type="text"],
  .exchange-panel [class~="bg-exchange-amount-background"] > span:first-child {
    font-size: 32px !important;
  }

  .exchange-panel [class~="bg-exchange-amount-background"] input::placeholder {
    font-size: 24px !important;
  }
}