/* Home silver-to-gold calculator. Use the exact palette and card gradients of blue-theme.css. */
#zarniv-metamorphosis #zc-conversion.zv-home-exchange {
  width: calc(100% - clamp(32px, 6vw, 112px));
  max-width: 1460px;
  min-height: 0;
  margin: clamp(30px, 5vw, 70px) auto;
  padding: clamp(28px, 4vw, 58px) clamp(18px, 4.2vw, 60px) 28px;
  border: 1px solid #b8cbea2d;
  border-radius: 25px;
  background: var(--z-blue-gradient) !important;
  box-shadow: 0 24px 58px #102c4e22;
  overflow: hidden;
  color: #f7f9ff;
  scroll-margin-top: 144px;
  text-align: center;
}
#zarniv-metamorphosis .zv-home-exchange .zv-heading-exchange {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin: 0 auto 8px;
  gap: 0;
  text-align: center;
}
#zarniv-metamorphosis .zv-home-exchange .zv-heading-exchange .zv-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 5px 16px;
  border-radius: 999px;
  border: 1px solid #cbb57f48;
  background: #ffffff10;
  color: #e9cc91;
  font-size: 12px;
  line-height: 1.8;
}
#zarniv-metamorphosis .zv-home-exchange .zv-heading-exchange h2 {
  color: #fff;
  margin: 17px 0 7px;
  font-size: clamp(24px, 3.2vw, 43px);
  font-weight: 700;
  line-height: 1.6;
}
#zarniv-metamorphosis .zv-home-exchange .zv-heading-exchange h2 em {color: #e8ca89;}
#zarniv-metamorphosis .zv-home-exchange .zv-heading-exchange p {
  max-width: 720px;
  margin: 0 auto;
  color: #d2dfed;
  font-size: 13px;
  line-height: 2;
}
#zarniv-metamorphosis .zv-home-exchange .zv-sticky {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1140px;
  margin: auto;
  gap: 6px;
  direction: rtl;
}
#zarniv-metamorphosis .zv-home-exchange .zv-scale {
  width: min(100%, 420px);
  max-width: 420px;
  margin: 0 auto;
}
#zarniv-metamorphosis .zv-home-exchange .zv-scale-stage {aspect-ratio: 5 / 3.6;}
#zarniv-metamorphosis .zv-home-exchange .zv-scale-readouts {margin-top: 5px;}
#zarniv-metamorphosis .zv-home-exchange .zv-visual-note {margin: 7px 0 14px;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-calculator {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, .46fr) minmax(0, 1fr);
  grid-template-areas: 'input bridge result' 'action action action' 'note note note';
  align-items: stretch;
  gap: 16px;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 22px;
  background: var(--z-panel);
  border: 1px solid #b6ceee36;
  border-top-color: #d9be8880;
  border-radius: 21px;
  direction: rtl;
  box-shadow: 0 18px 40px #102c4e22;
  text-align: right;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-input,
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-output {
  min-width: 0;
  padding: 20px;
  border: 1px solid #b6ceee42;
  border-radius: 16px;
  background: #102e5477;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-input {grid-area: input;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-output {
  grid-area: result;
  border-color: #d5b67475;
  background: #102e548a;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-card-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-card-head h3 {
  margin: 0;
  font-size: clamp(14px, 1.55vw, 18px);
  font-weight: 700;
  line-height: 1.7;
  color: #f2f7fe;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  color: #e7edf6;
  border: 1px solid #adc7e355;
  border-radius: 11px;
  background: #31599555;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-icon-gold {
  color: #e9ca84;
  background: #d9be8820;
  border-color: #d9be8866;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-input > label,
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range-wrap > label {
  display: block;
  color: #cfdbeb;
  font-size: 12px;
  margin-bottom: 8px;
}
#zarniv-metamorphosis .zv-home-exchange .zv-input {
  min-height: 58px;
  height: auto;
  border: 1px solid #b1c7e057;
  border-radius: 10px;
  background: #102e54a3;
}
#zarniv-metamorphosis .zv-home-exchange .zv-input input {
  width: 100%;
  min-width: 0;
  font-size: 25px;
  text-align: right;
  color: #fff;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range-wrap {margin-top: 16px;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range {
  display: block;
  direction: ltr;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  outline-offset: 4px;
  background: transparent;
  cursor: pointer;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(to right, #d4b576 0%, #d4b576 var(--zv-range-percent, 48%), #aac0db85 var(--zv-range-percent, 48%), #aac0db85 100%);
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range::-moz-range-track {height: 5px; border-radius: 999px; background: #aac0db85;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range::-moz-range-progress {height: 5px; border-radius: 999px; background: #d4b576;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  margin-top: -6px;
  border: 2px solid #fff3d3;
  border-radius: 50%;
  background: #d4b576;
  box-shadow: 0 2px 8px #102e54aa;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range::-moz-range-thumb {width: 15px; height: 15px; border: 2px solid #fff3d3; border-radius: 50%; background: #d4b576;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-range-ends {display: flex; justify-content: space-between; color: #c5d5e7; font-size: 10px; direction: ltr;}
#zarniv-metamorphosis .zv-home-exchange .zv-presets {display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0;}
#zarniv-metamorphosis .zv-home-exchange .zv-presets button {padding: 6px 11px; background: #2b518e40; border-color: #a6c6eb40; border-radius: 9px; font-size: 11px; color: #e2ebf5;}
#zarniv-metamorphosis .zv-home-exchange .zv-presets button[aria-pressed=true] {background: #d4b57625; border-color: #d4b576aa; color: #ffe4aa;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-output .zv-result {border: none; padding: 0; background: none;}
#zarniv-metamorphosis .zv-home-exchange .zv-result > div:first-child {color: #d5e2ee; margin: 0 0 12px; font-size: 12px;}
#zarniv-metamorphosis .zv-home-exchange .zv-result small {color: #e5c88d;}
#zarniv-metamorphosis .zv-home-exchange .zv-result > div:last-child {justify-content: flex-start; flex-wrap: wrap; gap: 10px;}
#zarniv-metamorphosis .zv-home-exchange .zv-result output {flex: 0 1 auto; font-size: clamp(30px, 3vw, 40px); color: #f6d891; text-align: right; line-height: 1.4; font-variant-numeric: tabular-nums;}
#zarniv-metamorphosis .zv-home-exchange .zv-result > div:last-child > span {color: #f0f5fc; font-size: 15px;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-disclaimer {margin: 17px 0 0; color: #c2d2e1; font-size: 11px; line-height: 1.9;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-bridge {
  grid-area: bridge;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  text-align: center;
  color: #d8e3f1;
  font-size: 11px;
  line-height: 1.7;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-arrow {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #d5b67490;
  border-radius: 50%;
  color: #e9cb8d;
  background: #d5b67418;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-arrow svg {width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-bridge strong {font-size: 11px; font-weight: 400; color: #f4e2ba; overflow-wrap: anywhere;}
#zarniv-metamorphosis .zv-home-exchange .zv-continue {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  grid-area: action;
  background: linear-gradient(110deg, #c5a464, #edcf91);
  border: 1px solid #d5b674;
  color: #142b3f !important;
  font-weight: 700;
  width: min(100%, 610px);
  min-height: 52px;
  justify-self: center;
  justify-content: center;
  border-radius: 11px;
  font-size: 13px;
  text-align: center;
}
#zarniv-metamorphosis .zv-home-exchange .zv-note {grid-area: note; margin: 0; text-align: center; color: #d3deec; font-size: 11px;}
#zarniv-metamorphosis .zv-home-exchange .zv-bottom {max-width: 1140px; margin: 20px auto 0; padding-top: 14px; flex-wrap: wrap;}
@media (max-width: 950px) {
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-calculator {grid-template-columns: minmax(0, 1fr) minmax(105px, .38fr) minmax(0, 1fr); padding: 17px; gap: 12px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-input,
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-output {padding: 15px;}
}
@media (max-width: 760px) {
  #zarniv-metamorphosis #zc-conversion.zv-home-exchange {width: calc(100% - 32px); margin: 32px auto; padding: 27px 15px 21px; border-radius: 20px; scroll-margin-top: 135px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-heading-exchange h2 {font-size: clamp(23px, 5.7vw, 31px);}
  #zarniv-metamorphosis .zv-home-exchange .zv-heading-exchange p {font-size: 12px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-sticky {gap: 12px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-scale {max-width: 360px; width: 100%;}
  #zarniv-metamorphosis .zv-home-exchange .zv-scale-readouts {gap: 6px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-calculator {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'input' 'bridge' 'result' 'action' 'note';
    gap: 13px;
    padding: 12px;
    border-radius: 16px;
  }
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-input,
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-output {padding: 15px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-bridge {gap: 5px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-arrow {width: 40px; height: 40px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-continue {width: 100%; min-height: 49px; padding: 10px 14px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-bottom {font-size: 10px; justify-content: center; text-align: center;}
}
@media (max-width: 380px) {
  #zarniv-metamorphosis #zc-conversion.zv-home-exchange {padding-inline: 11px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-calculator {padding: 9px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-input,
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-output {padding: 12px;}
  #zarniv-metamorphosis .zv-home-exchange .zv-presets button {padding: 6px 8px; font-size: 10px;}
}
@media (prefers-reduced-motion: reduce) {
  #zarniv-metamorphosis .zv-home-exchange .zv-exchange-range,
  #zarniv-metamorphosis .zv-home-exchange .zv-continue {transition: none;}
}

/* Copy parity with the approved mockup; colors continue to inherit site tokens. */
#zarniv-metamorphosis .zv-home-exchange .zv-screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}
#zarniv-metamorphosis .zv-home-exchange .zv-result > .zv-result-amount {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 0;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-price {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px 12px;
  margin-top: 18px;
  padding: 10px 12px;
  border: 1px solid #d5b67445;
  border-radius: 9px;
  background: #ffffff0a;
  color: #dce6f3;
  font-size: 11px;
  line-height: 1.8;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-price strong {
  color: #e9ca84;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
#zarniv-metamorphosis .zv-home-exchange .zv-exchange-bridge-subtitle {
  color: #d8e3f1;
  font-size: 11px;
}