/* =============================================================================
   THEME — change colors, fonts, and radii here
   -----------------------------------------------------------------------------
   Every color used on the site is defined as a variable below. Change a value
   here and it updates everywhere it is used.
============================================================================= */
:root {
  color-scheme: dark;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-synthesis: none;
  text-rendering: optimizeLegibility;

  /* Base colors */
  --bg: #080808;
  --text: #e9e9e9;
  --surface: #101010;
  --surface-raised: #171717;
  --surface-tab: #131116;

  /* Accent (electric indigo #433ee7) */
  --accent: #433ee7;
  --accent-hover: #625eea;
  --accent-pale: #b5b3f6;
  --accent-soft: #9e9bf1;
  --accent-soft-hover: #bfbef7;
  --on-accent: #ffffff;
  --accent-rgb: 67, 62, 231;

  /* Card gradients */
  --card-grad-a: #171528;
  --card-grad-b: #101010;

  /* Borders */
  --border: #393939;
  --border-strong: #565656;
  --border-cell: #242424;
  --border-row: #292929;
  --border-card: #474474;
  --border-tab: #4a4770;

  /* Muted text */
  --muted: #a9a1b4;
  --muted-2: #999;
  --muted-3: #a5a5a5;
  --muted-4: #777;
  --tab-active-text: #bcbaf6;

  /* Accent glow (matches --accent) */
  --glow-1: #433ee780;
  --glow-2: #433ee74a;
  --glow-3: #3430b040;

  /* Radii */
  --radius-sm: 4px;
  --radius: 5px;
  --radius-md: 8px;
  --radius-lg: 10px;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

.page {
  --page-gutter-x: clamp(16px, 4vw, 36px);
  padding: clamp(16px, 4vw, 36px) clamp(16px, 4vw, 36px) 0;
}

/* --- Banner ---------------------------------------------------------------- */
.telegram-banner {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  padding: 12px 18px;
  border: 1px solid var(--accent-pale);
  border-radius: var(--radius);
  background: linear-gradient(100deg, #3833bd, var(--accent));
  box-shadow: 0 0 10px var(--glow-1), 0 0 28px var(--glow-2), 0 6px 20px var(--glow-3);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 0 8px #fff8;
  transition: filter 140ms ease, transform 140ms ease;
}
.telegram-banner:hover { filter: brightness(1.12); transform: translateY(-1px); }
.telegram-banner:focus-visible { outline: 2px solid #d3d2f7; outline-offset: 3px; }

/* --- Account summary ------------------------------------------------------- */
.account-summary {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.balance-box,
.account-number-box {
  display: flex;
  width: min(100%, 360px);
  min-height: 84px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px 14px 18px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: linear-gradient(115deg, var(--card-grad-a), var(--card-grad-b) 72%);
  box-shadow: 0 8px 26px #0005, inset 3px 0 var(--accent);
}

.balance-copy { display: grid; gap: 4px; }

.balance-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.balance-amount {
  margin: 0;
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.account-number-value {
  color: #fff;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}

/* --- Buttons --------------------------------------------------------------- */
.add-balance-button,
.dialog-close,
.method-button,
.copy-button,
.back-button,
.amount-link,
.account-confirm { font: inherit; cursor: pointer; }

.add-balance-button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.add-balance-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* --- Brand ----------------------------------------------------------------- */
.brand {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin-top: -12px;
  margin-bottom: 18px;
  text-align: center;
}
.brand-cat {
  display: block;
  width: 112px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 5px var(--accent));
}
.brand-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
}
.brand-links a { color: var(--accent-soft); text-decoration: none; }
.brand-links a:hover { color: var(--accent-soft-hover); text-decoration: underline; }

/* --- Search ---------------------------------------------------------------- */
.search-wrap {
  width: calc(100% + var(--page-gutter-x) + var(--page-gutter-x));
  margin-left: calc(0px - var(--page-gutter-x));
  margin-bottom: 18px;
}
#bin-search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
#bin-search::placeholder { color: var(--muted-4); }
#bin-search:focus { border-color: #888; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Tabs ------------------------------------------------------------------ */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.tab-button {
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  color: var(--muted-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.tab-button:hover { color: var(--text); background: #111; }
.tab-button[aria-selected="true"] {
  margin-bottom: -1px;
  border-color: var(--border-tab);
  border-bottom: 1px solid var(--bg);
  background: var(--surface-tab);
  color: var(--tab-active-text);
}
.tab-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }

.tab-panel[hidden] { display: none; }

/* --- Restock banner -------------------------------------------------------- */
.restock-banner {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 16px;
  border: 1px solid #474474;
  border-radius: var(--radius);
  background: linear-gradient(110deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.03) 78%);
  box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.12);
  color: #c1c0f5;
  font-size: 15px;
  font-weight: 700;
}
.restock-banner img { width: 34px; height: 34px; object-fit: contain; }

.prepaid-table { min-width: 470px; }
.prepaid-product { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.prepaid-card-image { width: 38px; height: 38px; flex: 0 0 auto; object-fit: contain; }
.prepaid-state { color: var(--accent-pale); font-weight: 700; }
.prepaid-buy-button { white-space: nowrap; }

/* --- Table ----------------------------------------------------------------- */
.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border);
  scrollbar-color: #555 #111;
}
table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  text-align: left;
}
th, td {
  padding: 17px 16px;
  border-right: 1px solid var(--border-cell);
  white-space: nowrap;
}
th:last-child, td:last-child { border-right: 0; }
thead { color: var(--muted-3); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; }
thead tr { border-bottom: 1px solid var(--border-strong); }
tbody { font-size: 13px; }
tbody tr { border-bottom: 1px solid var(--border-row); transition: background-color 140ms ease; }
tbody tr:hover { background: #111; }
tbody td:first-child { color: #fff; font-weight: 700; }
.base { color: var(--accent-soft); font-weight: 700; }

.buy-button {
  padding: 7px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.buy-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.buy-button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Payment dialog -------------------------------------------------------- */
.payment-dialog {
  width: min(560px, calc(100vw - 32px));
  max-height: min(82vh, 760px);
  padding: 22px;
  overflow-y: auto;
  border: 1px solid #494949;
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 80px #000b;
}
.payment-dialog::backdrop { background: #000b; backdrop-filter: blur(3px); }

.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dialog-top h2 { margin: 0; color: #fff; font-size: 18px; }
.dialog-close {
  display: grid;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 1px solid #444;
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: #ddd;
  font-size: 22px;
  line-height: 1;
}
.dialog-close:hover, .back-button:hover { background: #242424; }

.payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.method-button {
  display: flex;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: #eee;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}
.method-button:hover { border-color: var(--accent); background: #17152e; }
.method-button img { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--radius-sm); object-fit: contain; }

.payment-instructions { margin: 0 0 16px; color: #c7c7c7; font-size: 13px; line-height: 1.55; }
.payment-instructions strong { display: block; margin-bottom: 5px; color: #fff; font-size: 14px; }

.crypto-timer {
  display: inline-flex;
  margin: 0 0 10px;
  padding: 6px 9px;
  border: 1px solid #59462a;
  border-radius: var(--radius-sm);
  background: #241c11;
  color: #f5c56b;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.crypto-timer.is-expired { border-color: #703838; background: #2a1414; color: #ff9292; }

.amount-options { display: flex; flex-wrap: wrap; gap: 8px; }
.amount-link, .copy-button, .back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.amount-link:hover, .copy-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }

.payment-address {
  display: block;
  margin: 10px 0 12px;
  padding: 12px;
  overflow-wrap: anywhere;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: #e8dfff;
  font-size: 13px;
  line-height: 1.5;
  user-select: all;
}
.copy-button { margin-bottom: 18px; }
.back-button { border-color: #454545; background: var(--surface-raised); color: #ddd; }

.method-picker { margin-top: 20px; padding-top: 16px; border-top: 1px solid #333; }
.method-picker-title { margin: 0 0 10px; color: #aaa; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.method-picker .payment-methods { gap: 8px; }
.method-picker .method-button { min-height: 52px; padding: 7px 9px; font-size: 12px; }
.method-picker .method-button img { width: 30px; height: 30px; }

/* --- Account dialog -------------------------------------------------------- */
.account-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid #565184;
  border-radius: var(--radius-lg);
  background: #111;
  color: var(--text);
  box-shadow: 0 24px 90px #000d;
}
.account-dialog::backdrop { background: #000d; backdrop-filter: blur(5px); }
.account-content { padding: clamp(24px, 7vw, 36px); }
.account-content h1 { margin: 0 0 14px; color: #fff; font-family: system-ui, sans-serif; font-size: clamp(23px, 6vw, 28px); letter-spacing: -0.04em; }
.account-content p { color: #bdb7c5; font-family: system-ui, sans-serif; font-size: 14px; line-height: 1.55; }
.account-number {
  display: block;
  margin: 22px 0;
  padding: 18px 12px;
  border: 1px solid #4a4678;
  border-radius: 6px;
  background: #16142a;
  color: #c1c0f5;
  font-size: clamp(34px, 10vw, 42px);
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: all;
}
.account-content .account-warning { margin: 0 0 22px; color: #e6c98c; font-size: 13px; }
.account-confirm {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.account-confirm:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.account-confirm:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- Responsive: cards instead of table rows under 900px ------------------- */
@media (max-width: 600px) {
  .page { --page-gutter-x: 18px; padding: 8px var(--page-gutter-x) 0; }
  .account-summary { flex-direction: column; }
  .balance-box, .account-number-box { width: 100%; }
  .payment-dialog { padding: 18px; }
  .payment-methods { gap: 8px; }
  .method-button { gap: 8px; padding: 9px; }
  th, td { padding: 15px 12px; }
}

@media (max-width: 900px) {
  .table-wrap { overflow-x: hidden; border: 0; }
  table, .prepaid-table { min-width: 0; display: block; }
  thead { display: none; }
  tbody { display: grid; gap: 10px; }
  tbody tr { display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  tbody tr[hidden] { display: none; }
  tbody td {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(58px, 76px) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-right: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  tbody td::before {
    content: attr(data-label);
    color: #858585;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  tbody td:first-child { padding-top: 10px; }
  tbody td:last-child { padding-bottom: 10px; }
  tbody tr:hover { background: var(--surface); }
}