/* Brand wordmark face. Self-hosted (assets/fonts) so the lockup needs no
   third-party request; matched to assets/main_logo/silvana-logo.svg, whose
   wordmark is outlines — Plus Jakarta Sans 700 at -0.01em tracking was the
   closest fit of the faces tested. OFL licensed. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-top: #050321;
  --bg-bottom: #020713;
  --accent: #7b5cff;
  --accent-2: #22e1ff;
  --accent-3: #ff4ecd;
  --text-main: #f5f5ff;
  --text-subtle: #a4a4c9;
  --glass: rgba(8, 8, 30, 0.8);
  --border-glass: rgba(124, 124, 255, 0.4);
  --coin-label: #d4b8ff;
  /* Silvana brand: exact mark pink from the source SVG, plus a lighter tint of
     the same hue for type — #d6448f on the sunset photography behind the lockup
     drops below usable contrast, the tint holds on all five slides. */
  --brand-pink: #d6448f;
  --brand-pink-tint: #ff6fb0;
  /* Light stock behind fiat/payment wordmarks in the dark menus. */
  --fiat-tile: rgba(247, 245, 251, 0.94);
  --fiat-tile-edge: rgba(22, 10, 44, 0.14);
}

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

html,
body {
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Inter", sans-serif;
  color: var(--text-main);
  background: radial-gradient(circle at 0% -20%, #16192f, #05030f 45%, #000 80%);
  overflow: hidden;
}

.background {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #05060b;
}

/* Background slideshow – 5 images, 2 seconds each, smooth fade */
.bg-slideshow {
  position: absolute;
  inset: 0;
}

.bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.5));
  transition: opacity 1.2s ease-in-out;
}

.bg-slide.active {
  opacity: 1;
  z-index: 1;
}

/* ===================== Brand lockup (top centre) =====================
   Sits above the background slideshow but BELOW the widget (z-index 2), so an
   open currency menu — which opens upwards and can reach this high — covers the
   lockup instead of being covered by it. */
.brand {
  position: fixed;
  top: clamp(0.85rem, 3vh, 2.1rem);
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

/* The background cycles five photographs of very different luminance behind the
   lockup, so it needs its own ground. A centred ellipse reads as a smudge over
   the bright slides (the city at dawn); a full-bleed gradient hanging off the
   top edge reads as ordinary header vignetting on all five. Anchored to the
   viewport top, not to the lockup, so it has no edge to notice. */
.brand::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 11rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(6, 3, 20, 0.62) 0%,
    rgba(6, 3, 20, 0.34) 46%,
    rgba(6, 3, 20, 0.12) 76%,
    rgba(6, 3, 20, 0) 100%
  );
}

.brand-lockup {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.13em;
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.brand-mark {
  height: 1.5em;
  width: auto;
  flex: none;
  filter: drop-shadow(0 2px 10px rgba(4, 0, 14, 0.55));
}

.brand-word {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  /* Tracking measured against the official outlined wordmark. */
  letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(4, 0, 14, 0.6);
}

.brand-word-silva {
  color: #fff;
}

/* "Change" is the product half of the compound name — the brand pink tint marks
   it without a second typeface or weight. */
.brand-word-change {
  color: var(--brand-pink-tint);
}

/* Load gesture: the mark's two chevrons arrive from opposite directions and
   settle together. Runs once, not looped — the background slideshow already
   supplies the page's ambient motion.

   Deliberately no animation-delay and no fill mode: the resting state of every
   element here is the visible one, and the offsets live inside the keyframes.
   If the animation never runs — throttled tab, an engine that skips it — the
   lockup still paints in full. Revealing content via a fill mode would leave
   the brand invisible in exactly that case. */
@keyframes brand-chevron-upper {
  0% {
    transform: translate(-24px, -28px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes brand-chevron-lower {
  0% {
    transform: translate(24px, 28px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* The wordmark's hold at 0-30% is its stagger behind the mark. */
@keyframes brand-word-in {
  0%,
  30% {
    opacity: 0;
    transform: translateY(0.28em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The intro is scoped to .brand-animate, which ships in the markup (so there is
   no flash of the settled lockup first) and is removed by a short timer in
   index.html once the gesture has had its time. That timer is the safety net:
   an animation frozen on its first frame keeps 0% applied — opacity 0 — with or
   without a fill mode, so nothing may leave the brand's visibility depending on
   the animation clock. */
.brand-animate .brand-mark-upper,
.brand-animate .brand-mark-lower {
  animation: 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.brand-animate .brand-mark-upper {
  animation-name: brand-chevron-upper;
}

.brand-animate .brand-mark-lower {
  animation-name: brand-chevron-lower;
}

.brand-animate .brand-word {
  animation: brand-word-in 820ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .brand-animate .brand-mark-upper,
  .brand-animate .brand-mark-lower,
  .brand-animate .brand-word {
    animation: none;
  }
}

/* Short viewports: the exchange card is vertically centred and scaled 1.2, so
   headroom shrinks fast. Pull the lockup in before it can collide. */
@media (max-height: 760px) {
  .brand {
    top: 0.7rem;
  }

  .brand-lockup {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
  }

  .brand::before {
    height: 8.5rem;
  }
}

@media (max-height: 600px) {
  .brand {
    display: none;
  }
}

.hero {
  display: none;
}

.hero-content {
  display: none;
}

.logo {
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  background: linear-gradient(120deg, var(--accent-2), var(--accent-3));
  -webkit-background-clip: text;
  color: transparent;
}

.subtitle {
  font-size: 0.98rem;
  color: var(--text-subtle);
  margin-bottom: 2rem;
}

.primary-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 2.8rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #05030f;
  background: linear-gradient(135deg, var(--accent-2), var(--accent-3));
  box-shadow:
    0 0 25px rgba(123, 92, 255, 0.8),
    0 0 60px rgba(34, 225, 255, 0.6);
  transition:
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out,
    filter 0.16s ease-out;
}

.primary-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.45);
  opacity: 0.45;
  pointer-events: none;
}

.primary-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 0 35px rgba(123, 92, 255, 0.9),
    0 0 80px rgba(34, 225, 255, 0.7);
  filter: brightness(1.05);
}

.primary-btn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 0 18px rgba(123, 92, 255, 0.7),
    0 0 40px rgba(34, 225, 255, 0.5);
}

.widget {
  display: none;
}

.widget-static {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 2;
}

.widget-open {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(12px);
}

.widget-card {
  width: min(720px, 92vw);
  padding: 1.6rem 1.7rem 1.5rem;
  border-radius: 20px;
  /* Purple prism glass: semi-transparent, backdrop blur, violet tint */
  background: linear-gradient(
      135deg,
      rgba(88, 28, 135, 0.35) 0%,
      rgba(123, 44, 191, 0.25) 30%,
      rgba(75, 0, 130, 0.3) 70%,
      rgba(138, 43, 226, 0.2) 100%
    );
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(186, 85, 211, 0.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 50px rgba(123, 92, 255, 0.35);
}

.widget-open .widget-card {
  /* retained for compatibility if used again */
}

.widget-static .widget-card {
  opacity: 1;
  transform: scale(1.2);
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.widget-header h2 {
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.icon-btn {
  border: none;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  font-size: 1rem;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease-out,
    color 0.15s ease-out,
    transform 0.12s ease-out;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
  transform: translateY(-1px);
}

.widget-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-subtle);
  margin-bottom: 1.1rem;
}

.widget-main {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(
      135deg,
      rgba(75, 0, 130, 0.3) 0%,
      rgba(88, 28, 135, 0.2) 50%,
      rgba(123, 44, 191, 0.15) 100%
    );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(186, 85, 211, 0.2);
  margin-bottom: 1.1rem;
}

.exchange-widget {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.9rem;
}

.exchange-field {
  flex: 1;
  min-width: 0;
  padding: 0.75rem 0.8rem 0.6rem;
  border-radius: 12px;
  background: rgba(88, 28, 135, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(186, 85, 211, 0.15);
}

.exchange-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.exchange-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--coin-label) !important;
  text-shadow: 0 0 10px rgba(186, 85, 211, 0.4);
}

/* Custom coin-select dropdown */
.custom-select {
  position: relative;
  display: inline-block;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem 0.25rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(186, 85, 211, 0.5);
  background: rgba(75, 0, 130, 0.3);
  backdrop-filter: blur(6px);
  color: var(--coin-label);
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.custom-select-trigger:hover {
  background: rgba(88, 28, 135, 0.45);
}

.coin-logo {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
}

.custom-select-label {
  color: var(--coin-label);
  white-space: nowrap;
}

.custom-select-arrow {
  font-size: 0.65rem;
  opacity: 0.7;
  margin-left: 0.1rem;
  transition: transform 0.2s ease;
}

.custom-select.open .custom-select-arrow {
  transform: rotate(180deg);
}

.custom-select-options {
  display: none;
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 100;
  border-radius: 12px;
  border: 1px solid rgba(186, 85, 211, 0.4);
  background: #1a0033;
  backdrop-filter: blur(16px);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(123, 92, 255, 0.3);
  padding: 0.3rem 0;
}

.custom-select.open .custom-select-options {
  display: block;
}

.custom-select-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  cursor: pointer;
  color: #e0d4ff;
  font-size: 0.8rem;
  transition: background 0.12s ease;
}

.custom-select-option:hover {
  background: rgba(91, 33, 182, 0.5);
}

.custom-select-option.selected {
  background: rgba(91, 33, 182, 0.35);
  color: #ffffff;
}

/* One icon slot for every row, so labels line up across the crypto and fiat
   groups. `contain` matters here: these marks run from 1:1 to 6:1, and the old
   fixed square squashed the wide ones (Sberbank, Revolut, Visa). The circular
   clip is dropped — on a 38x22 slot it would cut the coins top and bottom. */
.custom-select-option .coin-logo {
  width: 38px;
  height: 22px;
  border-radius: 0;
  object-fit: contain;
}

/* Bank and payment marks are dark-ink wordmarks drawn for white stock, so they
   disappear on the #1a0033 menu. Give them the light card they expect instead
   of filtering their brand colours. Crypto tokens are self-luminous and stay
   as they are. */
.custom-select-option.is-fiat .coin-logo {
  border-radius: 6px;
  background: var(--fiat-tile);
  padding: 2px 3px;
  box-shadow: inset 0 0 0 1px var(--fiat-tile-edge);
}

.custom-select-option.is-fiat:hover .coin-logo,
.custom-select-option.is-fiat.selected .coin-logo {
  background: #fff;
}

/* Same treatment in the closed trigger, or picking a bank hides its mark. */
.custom-select-trigger .coin-logo.is-fiat {
  width: 30px;
  height: 18px;
  border-radius: 5px;
  background: var(--fiat-tile);
  object-fit: contain;
  padding: 1px 2px;
  box-shadow: inset 0 0 0 1px var(--fiat-tile-edge);
}

/* Listed but not yet tradable (SOON_TOKENS in index.html). No wallets exist for
   these, so the row is inert by construction — it never gets a click listener.
   The styling only has to make that legible: dimmed, no hover response, and a
   label that says why rather than leaving the user to guess. */
.custom-select-option.is-soon {
  cursor: not-allowed;
  color: rgba(224, 212, 255, 0.5);
}

.custom-select-option.is-soon:hover {
  background: transparent;
}

/* Dimmed enough to read as inactive, not so far that the coin stops being
   recognisable — the point of listing them is that people see the range. */
.custom-select-option.is-soon .coin-logo {
  opacity: 0.58;
  filter: saturate(0.8);
}

.custom-select-soon {
  margin-left: auto;
  padding: 0.1rem 0.36rem;
  border-radius: 5px;
  border: 1px solid rgba(186, 85, 211, 0.34);
  background: rgba(123, 92, 255, 0.14);
  color: rgba(212, 184, 255, 0.72);
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
}

.custom-select-separator {
  height: 1px;
  margin: 0.35rem 0.5rem;
  background: linear-gradient(90deg, transparent, rgba(186, 85, 211, 0.5), transparent);
}

.custom-select-options::-webkit-scrollbar {
  width: 5px;
}

.custom-select-options::-webkit-scrollbar-track {
  background: transparent;
}

.custom-select-options::-webkit-scrollbar-thumb {
  background: rgba(186, 85, 211, 0.4);
  border-radius: 999px;
}

.exchange-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.25rem;
  overflow: hidden;
}

.amount-input,
.amount-display {
  flex: 1;
  min-width: 0;
  font-size: 1.2rem;
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  background: transparent;
  border: none;
  color: #ffffff;
}

.amount-input::placeholder {
  color: rgba(170, 172, 210, 0.5);
}

.amount-input:focus {
  outline: none;
}

/* Drop the native spinner — it paints a grey system control on the glass — and
   hand the job to .amount-stepper below. */
.amount-input::-webkit-outer-spin-button,
.amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.amount-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Stepper: one capsule split by a hairline, borrowing the coin-select pill's
   glass and violet edge so it reads as part of the card rather than chrome
   sitting on top of it. */
.amount-stepper {
  align-self: center;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-radius: 999px;
  border: 1px solid rgba(186, 85, 211, 0.42);
  background: rgba(75, 0, 130, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.amount-stepper:hover {
  border-color: rgba(186, 85, 211, 0.7);
  box-shadow: 0 0 12px rgba(123, 92, 255, 0.32);
}

.amount-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 15px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--coin-label);
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}

/* The hairline is the divider between the two halves. */
.amount-step-down {
  border-top: 1px solid rgba(186, 85, 211, 0.32);
}

.amount-step:hover {
  background: rgba(123, 92, 255, 0.34);
  color: #fff;
}

.amount-step:active svg {
  transform: scale(0.82);
}

.amount-step:focus-visible {
  outline: 2px solid rgba(158, 128, 255, 0.85);
  outline-offset: -2px;
}

.amount-step svg {
  width: 10px;
  height: 6px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.12s ease;
}

.amount-display {
  text-align: left;
}

.unit-label,
#fromUnitLabel,
#toUnitLabel {
  font-size: 0.83rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--coin-label) !important;
  flex-shrink: 0;
  text-align: right;
}

.fiat-toggle {
  margin-top: 0.3rem;
  width: 100%;
  border-radius: 999px;
  border: none;
  background: rgba(75, 0, 130, 0.25);
  backdrop-filter: blur(6px);
  padding: 0.35rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(197, 198, 234, 0.96);
  font-size: 0.76rem;
  cursor: pointer;
}

.fiat-toggle:hover {
  background: rgba(88, 28, 135, 0.35);
}

.alt-value {
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

.alt-caption {
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.exchange-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(210, 210, 255, 0.8);
  font-size: 0.95rem;
}

.exchange-divider span {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(186, 85, 211, 0.5);
  background: rgba(88, 28, 135, 0.4);
  backdrop-filter: blur(6px);
}

.widget-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  padding: 0.4rem 0;
}

.widget-row + .widget-row {
  border-top: 1px dashed rgba(164, 164, 201, 0.26);
}

.widget-key {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(180, 180, 217, 0.85);
}

.widget-value {
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  color: #ffffff;
}

.secondary-btn {
  width: 100%;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgba(186, 85, 211, 0.5);
  background: linear-gradient(
      135deg,
      rgba(138, 43, 226, 0.35),
      rgba(75, 0, 130, 0.3)
    );
  backdrop-filter: blur(8px);
  color: var(--text-main);
  font-size: 0.86rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.16s ease-out,
    transform 0.16s ease-out,
    box-shadow 0.16s ease-out;
}

.exchange-btn {
  margin-top: 0.2rem;
}

.exchange-note {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  color: rgba(220, 222, 255, 0.95);
  text-align: center;
}

.exchange-note a {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Exchange flow overlay – semi-transparent so background shows through */
.exchange-flow-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at center,
    rgba(30, 0, 50, 0.4),
    rgba(10, 0, 30, 0.7)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
}

.exchange-flow-overlay.open {
  display: flex;
}

.exchange-flow-card {
  width: min(720px, 92vw);
  padding: 1.4rem 1.5rem 1.1rem;
  border-radius: 20px;
  transform: scale(1.2);
  background: linear-gradient(
      135deg,
      rgba(88, 28, 135, 0.4) 0%,
      rgba(123, 44, 191, 0.3) 40%,
      rgba(75, 0, 130, 0.35) 100%
    );
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(186, 85, 211, 0.4);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 0 50px rgba(123, 92, 255, 0.4);
  color: var(--text-main);
}

.exchange-flow-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.exchange-flow-title {
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.exchange-flow-body {
  font-size: 0.86rem;
  color: rgba(198, 199, 233, 0.98);
  line-height: 1.5;
  margin-bottom: 1rem;
}

#flowToken,
#flowReceiveNetwork {
  color: var(--coin-label) !important;
}

.address-chip {
  margin-top: 0.4rem;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  background: rgba(75, 0, 130, 0.35);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(186, 85, 211, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.74rem;
  position: relative;
}

.copy-btn {
  border: none;
  background: rgba(34, 225, 255, 0.15);
  color: var(--text-main);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.7rem;
  cursor: pointer;
}

.copy-tooltip {
  position: absolute;
  left: 50%;
  top: -1.7rem;
  transform: translateX(-50%);
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(88, 28, 135, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(186, 85, 211, 0.3);
  color: var(--text-main);
  font-size: 0.7rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.copy-tooltip.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-3px);
}

.fiat-deposit-details {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: rgba(75, 0, 130, 0.25);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(186, 85, 211, 0.2);
  font-size: 0.78rem;
  line-height: 1.7;
}

.fiat-detail-row {
  display: flex;
  gap: 0.4rem;
}

.fiat-detail-key {
  color: rgba(191, 192, 230, 0.7);
  flex-shrink: 0;
}

.fiat-detail-row span:last-child {
  color: #e0d4ff;
  font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace;
  word-break: break-all;
}

.fiat-input {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: 9px;
  border: 1px solid rgba(186, 85, 211, 0.5);
  background: rgba(75, 0, 130, 0.25);
  backdrop-filter: blur(6px);
  color: var(--text-main);
  font-size: 0.82rem;
  margin-top: 0.35rem;
}

.fiat-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 225, 255, 0.7);
}

.exchange-flow-input-block {
  margin-bottom: 0.9rem;
}

.exchange-flow-input-block label {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
  color: rgba(191, 192, 230, 0.96);
}

.exchange-flow-input-block input {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border-radius: 9px;
  border: 1px solid rgba(186, 85, 211, 0.5);
  background: rgba(75, 0, 130, 0.25);
  backdrop-filter: blur(6px);
  color: var(--text-main);
  font-size: 0.82rem;
}

.exchange-flow-input-block input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(34, 225, 255, 0.7);
}

.exchange-flow-footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exchange-flow-status {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
}

.exchange-flow-status.open {
  display: flex;
}

.loading-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.secondary-btn:hover {
  background: linear-gradient(
      135deg,
      rgba(138, 43, 226, 0.5),
      rgba(88, 28, 135, 0.4)
    );
  transform: translateY(-1px);
  box-shadow: 0 0 28px rgba(186, 85, 211, 0.5);
}

.secondary-btn:active {
  transform: translateY(0);
  box-shadow: 0 0 18px rgba(186, 85, 211, 0.4);
}

/* Telegram support float – bottom right */
.telegram-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0088cc 0%, #229ED9 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 136, 204, 0.4);
  transition:
    transform 0.2s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.telegram-float:hover {
  transform: scale(1.08);
  color: #fff;
  /* Bright yellow tracing / glow around logo */
  box-shadow:
    0 0 0 3px #FFE135,
    0 0 20px 4px rgba(255, 225, 53, 0.6),
    0 0 36px 8px rgba(255, 200, 0, 0.35),
    0 4px 20px rgba(0, 136, 204, 0.5);
  filter: brightness(1.05);
}

.telegram-float:active {
  transform: scale(1.02);
}

.telegram-float-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.telegram-float-tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  background: rgba(10, 10, 28, 0.95);
  color: #FFE135;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.telegram-float:hover .telegram-float-tooltip {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

@media (max-width: 640px) {
  .hero-content {
    padding: 1.9rem 1.7rem 1.7rem;
    border-radius: 18px;
  }

  .subtitle {
    font-size: 0.9rem;
  }

  .telegram-float {
    bottom: 1rem;
    right: 1rem;
    width: 48px;
    height: 48px;
  }

  .telegram-float-icon svg {
    width: 24px;
    height: 24px;
  }
}