/* Test stand (TEST_STAND=1): the strip above the site and the testers' panel.
   The strip sits in the page flow before .app-shell, so it never covers
   the header, balances or buttons; it scrolls away with the page. */
.ts-strip {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  flex-wrap: wrap;
  min-height: 26px;
  padding: 3px 12px;
  padding-top: calc(3px + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  background: repeating-linear-gradient(135deg, #ffb020 0 14px, #ffc54d 14px 28px);
  color: #1a1206;
  font: 700 12px/1.2 "Chakra Petch", system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  user-select: none;
}
.ts-strip__label { white-space: nowrap; }
.ts-strip__note { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
.ts-strip__btn {
  appearance: none;
  border: 1.5px solid #1a1206;
  border-radius: 6px;
  background: #1a1206;
  color: #ffd27a;
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  min-height: 22px;
  cursor: pointer;
}
.ts-strip__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ts-strip__note.is-msg { opacity: 1; }
.ts-strip__btn:disabled { opacity: .55; cursor: default; }
@media (max-width: 420px) { .ts-strip__note:not(.is-msg) { display: none; } }

.ts-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(6, 4, 14, .62);
  opacity: 0;
  transition: opacity .16s ease;
}
.ts-backdrop.is-open { opacity: 1; }
.ts-panel {
  width: min(440px, 100%);
  max-height: calc(100% - 24px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  background: #17131f;
  border: 1px solid #3a3150;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  color: #efe9ff;
  font: 500 14px/1.35 "Chakra Petch", system-ui, sans-serif;
  transform: translateY(16px);
  transition: transform .18s ease;
}
.ts-backdrop.is-open .ts-panel { transform: none; }
@media (min-width: 700px) {
  .ts-backdrop { align-items: center; }
  .ts-panel { border-radius: 16px; border-bottom: 1px solid #3a3150; }
}
.ts-panel h2 { margin: 0 0 4px; font-size: 17px; }
.ts-panel p { margin: 0 0 14px; color: #a99fc4; font-size: 13px; }
.ts-sec { margin: 0 0 14px; }
.ts-sec__title { margin: 0 0 6px; font-size: 12px; color: #a99fc4; text-transform: uppercase; letter-spacing: .05em; }
.ts-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-btn {
  appearance: none;
  flex: 1 1 auto;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid #4a3f66;
  border-radius: 10px;
  background: #241d33;
  color: #efe9ff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ts-btn:hover { background: #2e2542; }
.ts-btn:focus-visible { outline: 2px solid #ffb020; outline-offset: 2px; }
.ts-btn:disabled { opacity: .5; cursor: default; }
.ts-btn--accent { background: #ffb020; border-color: #ffb020; color: #1a1206; }
.ts-btn--accent:hover { background: #ffc54d; }
.ts-btn--danger { border-color: #7a2f3d; color: #ff9aa8; }
.ts-field {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 40px;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid #4a3f66;
  border-radius: 10px;
  background: #0f0c16;
  color: #efe9ff;
  font: inherit;
}
.ts-field--qty { flex: 0 0 72px; }
.ts-field:focus-visible { outline: 2px solid #ffb020; outline-offset: 1px; }
.ts-status { min-height: 20px; margin: 4px 0 0; font-size: 13px; color: #a99fc4; }
.ts-status.is-ok { color: #8ee6a0; }
.ts-status.is-err { color: #ff9aa8; }
.ts-close {
  float: right;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 40px;
  margin: -6px -4px 0 8px;
  padding: 0;
  flex: none;
}
@media (prefers-reduced-motion: reduce) {
  .ts-backdrop, .ts-panel { transition: none; }
}