.video-launcher__option--quest {
  background: #5b4bb77a;
}

.video-launcher__options {
  flex-wrap: wrap;
}

.video-launcher__option {
  flex: 1 1 300px;
  text-decoration: none;
}

.video-launcher__option--buy {
  color: #fff;
  background: #8a632a99;
  font-family: var(--app-font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
}

.video-launcher__option--discord {
  color: #fff;
  background: #5865f2a6;
  font-family: var(--app-font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
}

.video-launcher__option--admin {
  color: #fff;
  background: #51448f99;
  font-family: var(--app-font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: normal;
  text-transform: uppercase;
  cursor: pointer;
}

.admin-login[hidden],
.admin-login__error[hidden] {
  display: none;
}

.admin-login {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #030307a8;
  backdrop-filter: blur(8px);
}

.admin-login__panel {
  position: relative;
  width: min(100%, 420px);
  padding: 2rem;
  color: #fff;
  background: #111117e8;
  border: 1px solid #ffffff45;
  border-radius: 1.25rem;
  box-shadow: 0 24px 90px #0009;
  text-align: left;
}

.admin-login__close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  padding: 0.2rem 0.55rem;
  color: #fff;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  cursor: pointer;
}

.admin-login__eyebrow {
  margin: 0 0 0.55rem;
  color: #d7c4ff;
  font-family: var(--app-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.admin-login__title {
  margin: 0;
  font-size: 1.8rem;
}

.admin-login__description {
  margin: 0.6rem 0 1.4rem;
  color: #d0ced8;
  font-size: 0.92rem;
  line-height: 1.5;
}

.admin-login__form label {
  display: block;
  margin: 0.9rem 0 0.4rem;
  color: #e9e6ef;
  font-size: 0.86rem;
}

.admin-login__form input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  color: #fff;
  background: #08080d;
  border: 1px solid #ffffff42;
  border-radius: 0.65rem;
  font: inherit;
}

.admin-login__form input:focus-visible,
.admin-login__close:focus-visible,
.admin-login__submit:focus-visible,
.admin-login__cancel:focus-visible {
  outline: 2px solid #d7c4ff;
  outline-offset: 3px;
}

.admin-login__error {
  margin: 0.8rem 0 0;
  color: #ffb8b8;
  font-size: 0.88rem;
}

.admin-login__submit,
.admin-login__cancel {
  width: 100%;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 0.65rem;
  font: inherit;
  cursor: pointer;
}

.admin-login__submit {
  color: #fff;
  background: #51448f;
  border: 1px solid #c6b5ff77;
}

.admin-login__submit:disabled {
  cursor: wait;
  opacity: 0.7;
}

.admin-login__cancel {
  margin-top: 0.55rem;
  color: #e4e1ea;
  background: transparent;
  border: 1px solid #ffffff3d;
}

.storefront[hidden] {
  display: none;
}

.storefront [hidden] {
  display: none !important;
}

.storefront {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #030307b8;
  backdrop-filter: blur(8px);
}

.storefront__panel {
  position: relative;
  width: min(100%, 780px);
  max-height: min(92dvh, 900px);
  overflow: auto;
  padding: clamp(1.25rem, 4vw, 2.4rem);
  color: #fff;
  background: #101016f2;
  border: 1px solid #ffffff4a;
  border-radius: 1.3rem;
  box-shadow: 0 24px 90px #000a;
  text-align: left;
}

.storefront__close {
  position: sticky;
  z-index: 1;
  top: 0;
  float: right;
  width: 2.3rem;
  height: 2.3rem;
  margin: -0.5rem -0.5rem 0 0.5rem;
  color: #fff;
  background: #ffffff16;
  border: 1px solid #ffffff3b;
  border-radius: 50%;
  font-size: 1.45rem;
  cursor: pointer;
}

.storefront__eyebrow {
  margin: 0 0 0.55rem;
  color: #d7c4ff;
  font-family: var(--app-font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.storefront__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.6rem, 5vw, 2.35rem);
  line-height: 1.1;
}

.storefront__intro {
  margin: 0.65rem 0 1.4rem;
  color: #c9c6d1;
  line-height: 1.55;
}

.storefront__services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.storefront__service {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 5.2rem;
  padding: 0.9rem 1rem;
  color: #fff;
  background: #ffffff0d;
  border: 1px solid #ffffff2e;
  border-radius: 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s, transform 0.18s;
}

.storefront__service:hover:not(:disabled) {
  background: #ffffff19;
  border-color: #d8c7ff9c;
  transform: translateY(-2px);
}

.storefront__service > span:nth-child(2) {
  display: grid;
  gap: 0.25rem;
  flex: 1;
}

.storefront__service strong {
  font-family: var(--app-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.storefront__service small {
  color: #bdb9c8;
  font-size: 0.76rem;
  line-height: 1.35;
}

.storefront__service-mark {
  display: grid;
  flex: 0 0 2.15rem;
  width: 2.15rem;
  height: 2.15rem;
  place-items: center;
  color: #eadfff;
  background: #5a49848c;
  border: 1px solid #ffffff44;
  border-radius: 50%;
  font-family: var(--app-font-mono);
  font-weight: 700;
}

.storefront__arrow,
.storefront__soon {
  color: #d6c7fa;
  font-size: 0.9rem;
}

.storefront__soon {
  font: 600 0.62rem var(--app-font-mono);
  letter-spacing: 0.1em;
}

.storefront__service--soon {
  opacity: 0.62;
  cursor: not-allowed;
}

.storefront__history {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.7rem;
}

.storefront__history h3 {
  margin: 0 0 0.25rem;
  color: #efedf4;
  font-size: 0.95rem;
}

.storefront__history-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.85rem;
  color: #efedf4;
  background: #ffffff0b;
  border: 1px solid #ffffff21;
  border-radius: 0.65rem;
  text-align: left;
  cursor: pointer;
}

.storefront__history-item small {
  color: #bdb9c8;
  text-align: right;
}

.storefront__back {
  margin: 0 0 1.25rem;
  padding: 0.45rem 0;
  color: #d9ccff;
  background: transparent;
  border: 0;
  font: 500 0.85rem var(--app-font-mono);
  cursor: pointer;
}

.storefront__form {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.1rem;
}

.storefront__form label {
  margin-top: 0.45rem;
  color: #e9e6ef;
  font-size: 0.84rem;
}

.storefront__form input,
.storefront__form select {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.7rem 0.8rem;
  color: #fff;
  background: #08080d;
  border: 1px solid #ffffff42;
  border-radius: 0.65rem;
  font: inherit;
}

.storefront__form input[type="file"] {
  padding: 0.45rem;
  color: #d4d0dc;
  font-size: 0.78rem;
}

.storefront__form input[type="file"]::file-selector-button {
  margin-right: 0.6rem;
  padding: 0.45rem 0.7rem;
  color: #fff;
  background: #383044;
  border: 1px solid #ffffff3a;
  border-radius: 0.45rem;
}

.storefront__hint,
.storefront__fineprint {
  color: #aaa6b4;
  font-size: 0.75rem;
  line-height: 1.45;
}

.storefront__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.55rem;
  padding: 1rem;
  background: #ffffff0b;
  border: 1px solid #ffffff2c;
  border-radius: 0.75rem;
}

.storefront__total span {
  color: #c9c6d1;
}

.storefront__total strong {
  color: #fff;
  font-size: 1.45rem;
}

.storefront__upi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: #1d1a29;
  border: 1px solid #ffffff27;
  border-radius: 0.75rem;
}

.storefront__upi > div {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
}

.storefront__upi small {
  color: #b7afc8;
  font: 600 0.65rem var(--app-font-mono);
  letter-spacing: 0.1em;
}

.storefront__upi strong {
  overflow-wrap: anywhere;
}

.storefront__copy {
  padding: 0.5rem 0.75rem;
  color: #ece7fa;
  background: #ffffff12;
  border: 1px solid #ffffff3e;
  border-radius: 0.5rem;
  cursor: pointer;
}

.storefront__pay,
.storefront__submit {
  display: flex;
  width: 100%;
  min-height: 2.9rem;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1rem;
  color: #fff;
  background: #51448f;
  border: 1px solid #c6b5ff77;
  border-radius: 0.65rem;
  font: 600 0.86rem var(--app-font-mono);
  letter-spacing: 0.04em;
  text-align: center;
  text-decoration: none;
}

.storefront__pay[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.storefront__pay:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.storefront__qr {
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: 1rem;
  background: #ffffff0b;
  border: 1px solid #ffffff2c;
  border-radius: 0.85rem;
  text-align: center;
}

.storefront__qr p {
  margin: 0;
  color: #d2cedb;
  font-size: 0.86rem;
}

.storefront__qr img {
  width: min(100%, 300px);
  aspect-ratio: 1;
  padding: 0.55rem;
  background: #fff;
  border-radius: 0.6rem;
  image-rendering: pixelated;
}

.storefront__qr-amount {
  color: #fff;
  font-size: 1.05rem;
  overflow-wrap: anywhere;
}

.storefront__upi-app {
  color: #d9ccff;
  font-size: 0.82rem;
  text-underline-offset: 3px;
}

.storefront__upi-app[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.storefront__submit {
  cursor: pointer;
}

.storefront__submit:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.storefront__error {
  margin: 0.3rem 0;
  color: #ffb8b8;
  font-size: 0.85rem;
}

.storefront__fineprint {
  margin: 0.2rem 0 0;
}

.storefront__reference {
  margin: 1.3rem 0;
  padding: 0.9rem;
  color: #cbc6d6;
  background: #ffffff0b;
  border: 1px solid #ffffff25;
  border-radius: 0.65rem;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.storefront__reference strong {
  display: block;
  margin-top: 0.4rem;
  color: #fff;
  font-family: var(--app-font-mono);
}

.storefront__status-back {
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .video-launcher__options {
    width: min(100%, 360px);
  }

  .video-launcher__option {
    flex: 0 0 auto;
    width: 100%;
  }

  .admin-login__panel {
    padding: 1.6rem 1.25rem;
  }

  .storefront__services {
    grid-template-columns: 1fr;
  }

  .storefront__history-item {
    flex-direction: column;
    gap: 0.35rem;
  }

  .storefront__history-item small {
    text-align: left;
  }
}