@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Saira+Condensed:wght@600;700;800&display=swap');

/* ======================================================================
   Design tokens — "VOXRUNE" identity: onyx black surfaces, charcoal
   panels, crimson accent, pure white ink. Every name here was already in
   use elsewhere in the file, so the palette swap flows through the whole
   site without touching a single template.
   ====================================================================== */

:root {
  color-scheme: dark;     /* dark native form controls, scrollbars, autofill */

  --bg: #0B0B0D;          /* onyx black — page + darkest surfaces */
  --surface: #16181C;     /* charcoal — panels, cards, inputs */
  --surface-2: #1E2127;   /* raised charcoal — hover, chips */
  --ink: #FFFFFF;
  --ink-deep: #FFFFFF;    /* headings; kept as a token for existing rules */
  --muted: #8B919C;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --card: #16181C;
  --accent: #FF1E1E;      /* crimson red */
  --accent-hot: #FF4747;
  --accent-soft: rgba(255, 30, 30, 0.12);
  --accent-line: rgba(255, 30, 30, 0.40);
  --glow: 0 0 24px rgba(255, 30, 30, 0.35);
  --danger: #FF5A52;
  --ok: #2BD97C;
  --radius: 14px;
  /* Breathing room between the shell and the screen edge. Narrowed on phones by
     the responsive block at the foot of this file, but never removed — nothing
     should ever touch the edge of the display. */
  --gutter: 16px;

  --font-display: "Saira Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  /* Stops iOS/Safari from inflating type when the phone is turned sideways. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  /* The gutter lives here so every page — storefront, wallet, admin — keeps the
     same margin from the screen edge without each shell repeating it. */
  padding: 0 var(--gutter);
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  /* Two faint crimson pools behind the shell, as in the reference sheet. */
  background-image:
    radial-gradient(760px 420px at 82% -8%, rgba(255, 30, 30, 0.13), transparent 70%),
    radial-gradient(620px 380px at 6% 104%, rgba(255, 30, 30, 0.07), transparent 72%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.app-header h1,
.balance-hero-amount,
.offer-price,
.btn,
.badge {
  font-family: var(--font-display);
  letter-spacing: .01em;
}

/* Scrollbars inside the dark shell */
* {
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .13);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-line); background-clip: content-box; }

::selection { background: var(--accent); color: #fff; }

/* Nothing may push the layout wider than the screen. */
img, svg, video { max-width: 100%; }

.app {
  max-width: 720px;
  margin: 28px auto;
  background: linear-gradient(180deg, #13151A 0%, #0D0E11 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px 22px 26px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.app-header h1 {
  position: relative;
  margin: 0;
  padding-bottom: 8px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--ink);
}
/* The crimson rule under the active label, straight off the nav in the sheet. */
.app-header h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 30, 30, .7);
}

.brand-badge {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 11px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 30, 30, .22), rgba(255, 30, 30, .04));
  box-shadow: var(--glow);
  font-size: 18px;
}

/* Language setting — a two-option segmented control at the top of every page. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}
.lang-option {
  padding: 6px 9px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.lang-option:hover { background: var(--surface-2); color: var(--ink); }
.lang-option[aria-current="true"] {
  background: var(--accent);
  color: #fff;
  cursor: default;
}

/* Takes the brand badge's place once we know the signed-in balance. */
.balance-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--accent-line);
  border-radius: 11px;
  background: radial-gradient(circle at 50% 40%, rgba(255, 30, 30, .22), rgba(255, 30, 30, .04));
  box-shadow: var(--glow);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.balance-badge:hover { border-color: var(--accent-hot); background: var(--accent-soft); }
.balance-badge-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.balance-badge-amount {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.balance-badge:hover .balance-badge-amount { color: var(--accent-hot); }

/* Header right side: brand badge + account */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-login {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(255, 30, 30, .32);
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn-login:hover {
  background: var(--accent-hot);
  box-shadow: 0 8px 26px rgba(255, 30, 30, .5);
}
.btn-login:active { transform: translateY(1px); }

/* Signed-in widget */
.account { position: relative; }

.account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  cursor: pointer;
  max-width: 190px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.account-trigger:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
  box-shadow: 0 0 18px rgba(255, 30, 30, .18);
}
.account-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 18px rgba(255, 30, 30, .28);
}

.avatar {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--accent-hot), #B60F0F);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 0 14px rgba(255, 30, 30, .4);
}
.avatar-lg { width: 42px; height: 42px; font-size: 19px; }

.account-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-caret { font-size: 11px; color: var(--muted); }

.account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 250px;
  padding: 14px;
  background: #15171B;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .8);
}
.account-menu[hidden] { display: none; }

.account-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.account-card-text { min-width: 0; }
.account-card-name,
.account-card-email {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-card-name { font-size: 14px; font-weight: 800; color: var(--ink); }
.account-card-email { font-size: 12px; color: var(--muted); font-weight: 500; }

.account-note {
  margin: 10px 0 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ok);
}
.account-menu .btn { width: 100%; }

/* Menu navigation (Products / Balance) */
.account-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.account-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #C9CED6;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.account-link:hover { background: var(--accent-soft); color: #fff; }
.account-link strong { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.account-link:hover strong { color: var(--accent-hot); }
.account-link[aria-current="page"] {
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  cursor: default;
}
.account-link[aria-current="page"] strong { color: var(--muted); }

/* Catalog list */
.offers {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 2px;
}

.offer {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  background: linear-gradient(145deg, #191C21 0%, #101216 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .08s;
}
/* Crimson edge that lights up on hover, like the package cards in the sheet. */
.offer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .15s;
}
.offer:hover {
  border-color: var(--accent-line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 30, 30, .18);
  transform: translateY(-1px);
}
.offer:hover::before { opacity: 1; }
.offer:active { transform: scale(.995); }
.offer:hover .offer-price { color: var(--accent-hot); }

.offer-name {
  font-weight: 600;
  font-size: 16px;
  color: #DDE2E9;
}
.offer-price {
  font-weight: 700;
  font-size: 19px;
  color: var(--accent);
  white-space: nowrap;
  transition: color .15s;
}

.hint {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  margin: 16px 0 0;
}

.state {
  text-align: center;
  color: var(--muted);
  padding: 40px 0;
  font-weight: 500;
}
.state-error { color: var(--danger); }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 4, 6, 0.78);
  backdrop-filter: blur(4px);
  display: flex;
  /* flex-start + `margin: auto` on the sheet: centred when it fits, scrollable
     from the top when it doesn't (centring alone clips the head off a tall
     form on a short screen). */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 16px;
  z-index: 100;
}
.modal-backdrop[hidden] { display: none; }

.modal {
  position: relative;
  margin: auto;
  width: min(440px, 94vw);
  background: linear-gradient(180deg, #16191E 0%, #0E1013 100%);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 26px 24px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: none;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s;
}
.modal-close:hover { color: var(--accent); }

.modal-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(255, 30, 30, .16), rgba(255, 30, 30, .04));
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: inset 0 0 30px rgba(255, 30, 30, .08);
}
.modal-offer-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
.modal-offer-price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

.fields { display: flex; flex-direction: column; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input, .field select {
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  background: #0E1014;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: #5B6270; }
.field select option { background: #0E1014; color: var(--ink); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 30, 30, .16);
}
/* Chrome's autofill wash would otherwise punch a white block into the form. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 40px #0E1014 inset;
}
.password-wrap {
  position: relative;
  display: flex;
}
.password-wrap input {
  width: 100%;
  padding-right: 44px;
}
.pw-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color .15s;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pw-toggle svg[hidden] { display: none; }

.validate-result {
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.validate-result.is-ok {
  background: rgba(43, 217, 124, .10);
  border: 1px solid rgba(43, 217, 124, .3);
  color: var(--ok);
}
.validate-result.is-bad {
  background: rgba(255, 30, 30, .10);
  border: 1px solid var(--accent-line);
  color: var(--danger);
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.btn {
  flex: 1;
  padding: 14px 16px;
  border-radius: 11px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, color .15s, border-color .15s, opacity .15s, transform .05s;
}
.btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.btn:not(:disabled):active { transform: translateY(1px); }

/* Primary = solid crimson with glow; secondary = crimson outline. */
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(255, 30, 30, .32);
}
.btn-primary:not(:disabled):hover {
  background: var(--accent-hot);
  box-shadow: 0 10px 30px rgba(255, 30, 30, .5);
}
.btn-secondary {
  background: transparent;
  border-color: var(--accent-line);
  color: var(--ink);
}
.btn-secondary:not(:disabled):hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 20px rgba(255, 30, 30, .2);
}

.modal-error {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(255, 30, 30, .10);
  border: 1px solid var(--accent-line);
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
}

.balance-shortfall {
  margin: 8px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--accent-line);
}
.balance-shortfall p {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  font-size: 13px;
}
.balance-topup-btn {
  display: block;
  margin-top: 10px;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
}

/* Account modal (log in / sign up / confirm code) */
.auth-title {
  margin: 0 0 6px;
  padding-right: 28px;
  font-size: 26px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--ink);
}
.auth-sub {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.auth-step[hidden] { display: none; }

.auth-switch {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link:hover { color: var(--accent-hot); }
.link:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }

.code-input {
  text-align: center;
  font-family: var(--font-display) !important;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .28em;
  text-indent: .28em; /* offsets the trailing letter-spacing so digits look centred */
  color: var(--accent) !important;
}

.auth-note {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: #E8ECF2;
  font-size: 13px;
  font-weight: 600;
}

.order-result { text-align: center; padding: 6px 0 4px; }
.ok-badge {
  display: inline-block;
  background: rgba(43, 217, 124, .12);
  border: 1px solid rgba(43, 217, 124, .35);
  color: var(--ok);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.result-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid var(--line);
  margin: 0;
  font-size: 14px;
}
.result-line span { color: var(--muted); font-weight: 500; }
.result-line strong { color: var(--ink); font-weight: 700; word-break: break-all; }

/* ======================================================================
   Balance page (balance.php)
   ====================================================================== */

.app-title { min-width: 0; }
.back-link {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .15s;
}
.back-link:hover { color: var(--accent); }

.wallet {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The headline figure */
.balance-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(420px 220px at 88% 20%, rgba(255, 30, 30, .35), transparent 70%),
    linear-gradient(135deg, #2A0C0E 0%, #14161A 60%, #0E1013 100%);
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  padding: 26px 24px;
  color: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), inset 0 0 60px rgba(255, 30, 30, .06);
}
.balance-hero-label {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.balance-hero-amount {
  margin: 0;
  font-size: 46px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  text-shadow: 0 0 30px rgba(255, 30, 30, .3);
}
.balance-hero-meta {
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 500;
  color: #A9AFBA;
}

/* Generic card used by the top-up and history sections */
.panel {
  padding: 20px 22px;
  background: linear-gradient(160deg, #16191E 0%, #101216 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel h2 {
  margin: 0 0 8px;
  font-size: 21px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
.panel > p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: #A9AFBA;
}

.topup-steps {
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #C4CAD3;
}
.topup-steps li::marker { color: var(--accent); font-weight: 800; }

.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 18px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(255, 30, 30, .3);
  transition: background .15s, box-shadow .15s;
}
.btn-whatsapp:hover {
  background: var(--accent-hot);
  box-shadow: 0 10px 32px rgba(255, 30, 30, .48);
}
.btn-whatsapp svg { width: 21px; height: 21px; fill: currentColor; flex: none; }

.topup-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}
.topup-note strong { color: var(--ink); font-weight: 700; }

.notice {
  padding: 12px 14px;
  border: 1px solid rgba(255, 178, 44, .28);
  border-radius: 10px;
  background: rgba(255, 178, 44, .07);
  color: #E7C077;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.6;
}
.notice code {
  background: #0E1014;
  border: 1px solid rgba(255, 178, 44, .3);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 12px;
  color: #F0D08C;
}

/* History list */
.history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.history-head h2 { margin: 0; }
.history-count {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.history-empty {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 500;
}

.txn-list { display: flex; flex-direction: column; }
.txn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.txn:last-child { border-bottom: none; }

.txn-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: #0E1014;
  font-size: 15px;
}

.txn-body { flex: 1; min-width: 0; }
.txn-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.txn-sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.txn-amounts { text-align: right; white-space: nowrap; }
.txn-amount {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
}
.txn-amount.is-credit { color: var(--ok); }
.txn-amount.is-debit { color: var(--accent); }
.txn-after {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.pager-link {
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background .15s, color .15s;
}
.pager-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hot); }
.pager-link.is-off { color: var(--muted); opacity: .4; }
.pager-link.is-off:hover { border-color: var(--line-strong); background: transparent; color: var(--muted); }
.pager-info {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Signed-out state */
.wallet-gate { text-align: center; padding: 30px 20px 20px; }
.gate-glyph {
  font-size: 34px;
  filter: drop-shadow(0 0 16px rgba(255, 30, 30, .55));
}
.wallet-gate h2 {
  margin: 14px 0 8px;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
.wallet-gate p { margin: 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.gate-actions { display: flex; justify-content: center; margin-top: 22px; }
.gate-actions .btn { flex: 0 1 260px; }

/* ======================================================================
   Admin panel (admin.php)
   ====================================================================== */

.app-wide { max-width: 880px; }

.admin {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.admin-search-field { flex: 1; margin: 0; }
.admin-search-field input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font: inherit;
  color: var(--ink);
  background: #0E1014;
  transition: border-color .15s, box-shadow .15s;
}
.admin-search-field input::placeholder { color: #5B6270; }
.admin-search-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 30, 30, .16);
}
.admin-stats {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.admin-users {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(145deg, #191C21 0%, #101216 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.user-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity .15s;
}
.user-row:hover {
  border-color: var(--accent-line);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .55), 0 0 20px rgba(255, 30, 30, .14);
}
.user-row:hover::before { opacity: 1; }

.user-row-info { flex: 1; min-width: 0; }
.user-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.user-row-email {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row-meta { text-align: right; white-space: nowrap; }
.user-row-balance {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
}
.user-row-status {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.user-row-status.is-ok { color: var(--ok); }
.user-row-status.is-pending { color: var(--muted); }

/* Badges */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}
.badge-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hot); }
.badge-ok { background: rgba(43, 217, 124, .12); border-color: rgba(43, 217, 124, .32); color: var(--ok); }
.badge-warn { background: rgba(255, 178, 44, .10); border-color: rgba(255, 178, 44, .3); color: #E7C077; }

/* User detail modal */
.modal-wide { width: min(540px, 94vw); max-height: 90vh; overflow-y: auto; }

.user-detail-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.user-detail-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}
.user-detail-email {
  margin: 2px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
.user-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.admin-balance-card {
  margin: 16px 0;
  padding: 18px 20px;
  background:
    radial-gradient(320px 180px at 88% 20%, rgba(255, 30, 30, .32), transparent 70%),
    linear-gradient(135deg, #2A0C0E 0%, #14161A 60%, #0E1013 100%);
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  color: #fff;
  box-shadow: inset 0 0 50px rgba(255, 30, 30, .06);
}
.admin-balance-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
}
.admin-balance-amount {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  text-shadow: 0 0 26px rgba(255, 30, 30, .3);
}

.admin-form-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.admin-form-section h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink);
}

.admin-action-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-action-btn {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.admin-action-btn:hover { border-color: var(--accent-line); color: var(--ink); }
.admin-action-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hot);
  box-shadow: 0 0 18px rgba(255, 30, 30, .2);
}

.admin-success {
  margin-top: 14px;
  padding: 11px 13px;
  border-radius: 10px;
  background: rgba(43, 217, 124, .10);
  border: 1px solid rgba(43, 217, 124, .3);
  color: var(--ok);
  font-size: 14px;
  font-weight: 600;
}

/* ======================================================================
   Responsive — phones and small tablets
   ----------------------------------------------------------------------
   Ordered widest breakpoint first so the narrower ones layer on top. The
   shell keeps its --gutter at every size, so the card never runs into the
   edge of the screen.
   ====================================================================== */

/* --- Tablet / small laptop: the shell stops being a fixed centred card --- */
@media (max-width: 900px) {
  .app,
  .app-wide { max-width: 100%; }
}

/* --- Landscape phone / narrow tablet --- */
@media (max-width: 700px) {
  :root { --gutter: 14px; }

  .app {
    margin: 16px auto;
    padding: 16px 16px 20px;
    border-radius: 16px;
  }

  /* The title and the account controls stop competing for one line: the
     heading takes the first row, the controls spread across the second. */
  .app-header {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
  }
  .app-title,
  .app-header > h1 { flex: 1 1 100%; }
  .app-header h1 { font-size: 26px; }
  .header-right {
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 8px;
  }

  /* A nested scroller inside a page that already scrolls is a trap on touch —
     let the catalog grow and the page carry the scrolling. */
  .offers {
    max-height: none;
    overflow-y: visible;
  }

  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .admin-stats { text-align: right; }
}

/* --- Portrait phone --- */
@media (max-width: 480px) {
  :root { --gutter: 12px; }

  .app {
    margin: 12px auto;
    padding: 14px 13px 18px;
    border-radius: 14px;
    /* The desktop drop shadow is invisible at this size and only costs paint. */
    box-shadow: 0 12px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .04);
  }

  .app-header {
    margin-bottom: 14px;
    padding-bottom: 12px;
  }
  .app-header h1 { font-size: 22px; }
  .app-header h1::after { width: 38px; }

  /* Header controls: shrink the chrome, never the tap targets. */
  .lang-option { padding: 7px 8px; font-size: 11px; }
  .brand-badge { width: 36px; height: 36px; font-size: 16px; }
  .balance-badge { height: 36px; padding: 0 11px; gap: 6px; }
  .balance-badge-label { font-size: 10px; }
  .balance-badge-amount { font-size: 15px; }
  .btn-login { padding: 10px 15px; font-size: 14px; }

  .account-trigger { max-width: 150px; padding: 5px 10px 5px 5px; }
  .account-name { font-size: 13px; }
  /* Capped to the visible width so the menu can't hang off the side of a
     narrow screen; it stays right-aligned and grows leftwards. */
  .account-menu {
    width: min(250px, calc(100vw - 2 * var(--gutter) - 8px));
    padding: 12px;
  }

  /* Catalog rows */
  .offer {
    padding: 15px 16px;
    gap: 10px;
  }
  .offer-name { font-size: 15px; }
  .offer-price { font-size: 17px; }

  /* Modals: full-width sheet with room to scroll when a step is tall. */
  .modal-backdrop { padding: var(--gutter); }
  .modal {
    width: 100%;
    padding: 22px 16px 18px;
    border-radius: 16px;
  }
  .modal-wide { width: 100%; max-height: none; }
  .modal-close { top: 8px; right: 10px; padding: 4px 8px; }

  .modal-offer {
    padding: 13px 14px;
    margin-bottom: 14px;
  }
  .modal-offer-name { font-size: 16px; }
  .modal-offer-price { font-size: 18px; }

  .auth-title { font-size: 22px; }
  .code-input { font-size: 24px; letter-spacing: .2em; text-indent: .2em; }

  /* Two side-by-side buttons don't fit legibly under ~360px. */
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 140px; }

  /* Wallet */
  .balance-hero { padding: 20px 18px; }
  .balance-hero-amount { font-size: 34px; }
  .panel { padding: 16px 15px; }
  .panel h2 { font-size: 19px; }
  .topup-steps { padding-left: 18px; font-size: 13px; }
  .btn-whatsapp { padding: 14px 14px; font-size: 15px; }

  .history-head { flex-wrap: wrap; gap: 4px; }
  .txn-icon { display: none; }
  .txn { gap: 10px; }
  .txn-amount { font-size: 15px; }

  .pager { gap: 8px; }
  .pager-link { padding: 9px 11px; font-size: 13px; }
  .pager-info { font-size: 10.5px; letter-spacing: .06em; }

  .wallet-gate { padding: 22px 4px 12px; }
  .gate-actions .btn { flex: 1 1 auto; width: 100%; }

  /* Admin */
  .user-row { padding: 13px 14px; gap: 11px; }
  .user-row .avatar { display: none; }
  .user-detail-header { gap: 11px; }
  .user-detail-name { font-size: 20px; }
  .admin-balance-card { padding: 15px 16px; }
  .admin-balance-amount { font-size: 28px; }
  .admin-action-btn { padding: 11px 10px; font-size: 14px; }
}

/* --- Very narrow phones (≤360px): the last things that still overflow --- */
@media (max-width: 360px) {
  .app-header h1 { font-size: 20px; }
  .balance-hero-amount { font-size: 29px; }

  /* Price under name instead of beside it, so neither has to be truncated. */
  .offer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .modal-actions .btn { flex: 1 1 100%; }
  .txn-amounts { text-align: right; }
  .account-trigger { max-width: 120px; }
}

/* Devices without a hover-capable pointer get the lift/glow effects switched
   off — on touch they stick after a tap and read as a stuck selection. */
@media (hover: none) {
  .offer:hover { transform: none; }
  .offer:hover::before { opacity: 0; }
  .user-row:hover::before { opacity: 0; }
}