:root {
  color-scheme: light dark;
}

body {
  background: var(--bulma-body-background-color, #f5f5f5);
  color: var(--bulma-body-color, #0a0a0a);
}

.section {
  padding-top: 1.5rem;
  padding-bottom: 2rem;
}

.hero {
  min-height: 100vh;
}

.is-mono {
  font-family: monospace;
  word-break: break-all;
}

.account-address {
  word-break: break-all;
  font-size: 0.85rem;
}

.bottom-actions {
  position: relative;
  margin-top: 2rem;
}

.balance-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .balance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .balance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.balance-amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.balance-amount .has-text-weight-semibold {
  white-space: nowrap;
}

.balance-meta {
  flex-shrink: 0;
}

@media (prefers-color-scheme: dark) {
  .button.is-light,
  .tag.is-light {
    background-color: var(--bulma-scheme-main-ter, #1f1f1f);
    border-color: var(--bulma-border-strong, #3a3a3a);
    color: var(--bulma-text, #f5f5f5);
  }

  .button.is-light:hover {
    background-color: var(--bulma-scheme-main, #2a2a2a);
  }

  .button.is-light.is-link,
  .tag.is-light.is-link {
    color: var(--bulma-link, #7db8ff);
  }

  .tag.is-light.is-info {
    color: var(--bulma-info, #7dd8ff);
  }
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.8rem;
}

.box-title {
  margin-bottom: 0.5rem;
}

.op-card,
.offer-card {
  border-left: 3px solid #485fc7;
}