@font-face {
  font-family: "Long Shot";
  src: url("/fonts/Long_Shot.ttf");
  src: url("/fonts/Long_Shot.ttf") format("truetype");
}

[data-theme="light"],
:root:not([data-theme="dark"]) {
  --pico-text-selection-color: rgba(255, 34, 250, 0.25);
  --pico-primary: #ff22fa;
  --pico-primary-background: #ff22fa;
  --pico-primary-underline: rgba(255, 34, 250, 0.5);
  --pico-primary-hover: #b819b5;
  --pico-primary-hover-background: #b819b5;
  --pico-primary-focus: rgba(255, 34, 250, 0.5);
  --pico-primary-hover-underline: rgba(255, 34, 250, 0.25);
  --pico-primary-inverse: #fff;

  --pico-secondary: #0658fe;
  --pico-secondary-background: #0658fe;
  --pico-secondary-underline: rgba(6, 88, 254, 0.5);
  --pico-secondary-hover: #0547cb;
  --pico-secondary-hover-background: #0547cb;
  --pico-secondary-focus: rgba(6, 88, 254, 0.5);
  --pico-secondary-hover-underline: rgba(6, 88, 254, 0.25);
  --pico-secondary-focus: rgba(6, 88, 254, 0.25);
  --pico-secondary-inverse: #fff;
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --pico-background-color: #121212;
    --pico-text-selection-color: rgba(184, 25, 181, 0.1875);
    --pico-primary: #b819b5;
    --pico-primary-background: #b819b5;
    --pico-primary-underline: rgba(184, 25, 181, 0.5);
    --pico-primary-hover: #ff22fa;
    --pico-primary-hover-background: #ff22fa;
    --pico-primary-focus: rgba(184, 25, 181, 0.375);
    --pico-primary-hover-underline: rgba(255, 34, 250, 0.1875);
    --pico-primary-inverse: #fff;

    --pico-secondary: #0547cb;
    --pico-secondary-background: #0547cb;
    --pico-secondary-underline: rgba(5, 71, 203, 0.5);
    --pico-secondary-hover: #0658fe;
    --pico-secondary-hover-background: #0658fe;
    --pico-secondary-focus: rgba(5, 71, 203, 0.5);
    --pico-secondary-hover-underline: rgba(5, 71, 203, 0.25);
    --pico-secondary-focus: rgba(5, 71, 203, 0.25);
    --pico-secondary-inverse: #fff;
  }
}

[data-theme="dark"] {
  --pico-background-color: #121212;
  --pico-text-selection-color: rgba(184, 25, 181, 0.1875);
  --pico-primary: #b819b5;
  --pico-primary-background: #b819b5;
  --pico-primary-underline: rgba(184, 25, 181, 0.5);
  --pico-primary-hover: #ff22fa;
  --pico-primary-hover-background: #ff22fa;
  --pico-primary-focus: rgba(184, 25, 181, 0.375);
  --pico-primary-hover-underline: rgba(255, 34, 250, 0.1875);
  --pico-primary-inverse: #fff;

  --pico-secondary: #0547cb;
  --pico-secondary-background: #0547cb;
  --pico-secondary-underline: rgba(5, 71, 203, 0.5);
  --pico-secondary-hover: #0658fe;
  --pico-secondary-hover-background: #0658fe;
  --pico-secondary-focus: rgba(5, 71, 203, 0.5);
  --pico-secondary-hover-underline: rgba(5, 71, 203, 0.25);
  --pico-secondary-focus: rgba(5, 71, 203, 0.25);
  --pico-secondary-inverse: #fff;
}

:root {
  --app-color-invalid: #9b2318;
}

* {
  font-family: "Montserrat", sans-serif;
}

html {
  scroll-behavior: smooth;
}

.center {
  text-align: center;
}

/* Custom classes */

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* Mobile-first: stack */
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr; /* Desktop: sidebar */
  }
}

.header-flex-container {
  display: flex;
  flex-direction: column; /* Stack on mobile */
  align-items: flex-start;
  gap: 1rem;
}

@media (min-width: 768px) {
  .header-flex-container {
    flex-direction: row; /* Side-by-side on desktop */
    justify-content: space-between;
    align-items: center;
  }
}

img {
  max-width: 100%;
  height: auto;
}

.card {
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03) inset;
}
.token-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
}
.small {
  font-size: 0.85rem;
  color: #555;
}
textarea {
  font-family: monospace;
}
footer {
  margin-top: 2rem;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
}

/** Custom button styles for copy buttons */
[data-copy] {
  transition: opacity 0.2s;
}
[data-copy].copied {
  opacity: 0.5;
}