#local-app .exchange-shade {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #08070380;
}
#local-app .exchange-window {
  width: min(960px, 96vw);
  max-height: 94dvh;
  overflow: auto;
  background: linear-gradient(135deg, #3b3426, #27231b);
  border: 6px ridge #72664b;
  box-shadow: 0 14px 60px #000b;
  color: #daceaa;
}
#local-app .exchange-title {
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 4px ridge #75674d;
  padding: 10px 18px;
  background: #302a22;
}
#local-app .exchange-title h2 {
  flex: 1;
  margin: 0;
  font:
    bold 27px Georgia,
    serif;
  color: #f3b641;
  text-shadow: 2px 2px #100e0a;
}
#local-app .exchange-title button {
  font-size: 24px;
  padding: 0 10px;
  border-radius: 0;
  background: #463e2d;
  border: 3px ridge #827154;
}
#local-app .real-money {
  font-size: 11px;
  letter-spacing: 1.2px;
  color: #ffd68c;
  border: 1px solid #b18139;
  padding: 5px 8px;
}
#local-app .exchange-body {
  padding: 16px;
}
#local-app .exchange-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e1b866;
}
#local-app .exchange-top p {
  margin: 0;
}
#local-app .exchange-window button {
  border-radius: 2px;
  background: linear-gradient(#635943, #3c3527);
  border: 2px ridge #87795a;
  padding: 8px 13px;
  color: #f0dab2;
}
#local-app .exchange-window button:hover {
  background: #726144;
}
#local-app .exchange-wallet {
  font-size: 11px;
  overflow-wrap: anywhere;
  margin: 12px 0;
  color: #c5b995;
}
#local-app .exchange-balances {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
  font-size: 12px;
}
#local-app .exchange-balances div {
  min-width: 116px;
  flex: 1;
  padding: 9px 12px;
  background: #1919109e;
  border: 1px solid #5c533d;
}
#local-app .exchange-balances strong,
#local-app .exchange-balances span,
#local-app .exchange-balances small {
  display: block;
}
#local-app .exchange-balances strong {
  color: #e9c679;
}
#local-app .exchange-balances span {
  font-size: 20px;
}
#local-app .exchange-balances small {
  font-size: 10px;
  color: #b1a88d;
}
#local-app .offer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
#local-app .offer-slot {
  min-height: 174px;
  border: 3px ridge #665d45;
  background: #302c1f;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 8px 9px;
  gap: 6px;
}
#local-app .offer-slot h3 {
  color: #edb747;
  padding: 7px 0;
  margin: 0 -8px 8px;
  border-bottom: 2px ridge #695d46;
  font:
    bold 22px Georgia,
    serif;
}
#local-app .offer-slot p {
  margin: 0;
  font-size: 12px;
}
#local-app .offer-slot small {
  font-size: 10px;
  overflow-wrap: anywhere;
}
#local-app .offer-slot progress {
  width: 100%;
  height: 14px;
  accent-color: #e49323;
}
#local-app .offer-slot button {
  font-size: 11px;
  padding: 6px 4px;
}
#local-app .offer-arrows {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  gap: 8px;
}
#local-app .offer-arrows button {
  font:
    bold 22px Georgia,
    serif;
  min-height: 64px;
  flex: 1;
}
#local-app .offer-arrows .buy-arrow {
  color: #c6db55;
}
#local-app .offer-arrows .sell-arrow {
  color: #efa632;
}
#local-app .exchange-order,
#local-app .exchange-review {
  border: 2px solid #967849;
  padding: 18px;
  background: #201e16;
  margin: 16px 0;
}
#local-app .order-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
#local-app .exchange-window input,
#local-app .exchange-window select {
  border-radius: 2px;
  background: #151710;
  border-color: #665d43;
}
#local-app .exchange-window footer,
#local-app #hl-authorization p {
  font-size: 11px;
  color: #b7ad91;
  line-height: 1.6;
  margin-top: 16px;
}
#local-app .exchange-window a {
  color: #e4c076;
  margin-left: 8px;
}
#local-app #hl-message {
  margin-top: 12px;
  color: #d8d99a;
}
#local-app #hl-message.error {
  color: #ffb29a;
}
#local-app #hl-fills {
  font-size: 11px;
  max-height: 180px;
  overflow: auto;
}
@media (max-width: 700px) {
  #local-app .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #local-app .order-fields {
    grid-template-columns: 1fr 1fr;
  }
  #local-app .exchange-title {
    flex-wrap: wrap;
  }
  #local-app .exchange-shade {
    padding: 4px;
  }
}