/* Goal Power Dialer site — soccer Goal theme.
   Grass-green palette + white field markings + yellow-card accents.
   Auth pages (login/signup/dashboard) inherit the palette via .card. */

:root {
  /* v1.29.67 — Tell the browser our site uses a dark theme. This makes
     EVERY native UI control (select dropdowns, scrollbars, date pickers,
     calendar popups, autocomplete suggestions) render with dark-mode
     colors automatically, instead of using the OS light-theme default
     that produced white-on-white state names in the dashboard dropdown. */
  color-scheme: dark;

  --bg:      #0a3a1a;   /* deep grass */
  --bg2:     #114a25;   /* lighter grass (mowing stripe) */
  --bg3:     #062810;   /* shadow grass */
  --fg:      #ffffff;
  --muted:   #a8c4b1;   /* faded white-green */
  --line:    rgba(255, 255, 255, 0.18);
  --net:     rgba(255, 255, 255, 0.10);
  --red:     #e63946;   /* red card */
  --yellow:  #ffd23f;   /* yellow card / accent */
  --green:   #2dab5f;
  --blue:    #3b7cc4;
  --orange:  #e6892b;
  --black:   #0a0a0a;
  --card:    rgba(255, 255, 255, 0.05);
  --card-solid: #114a25;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
/* Grass mowing stripes — only on the landing page so auth pages stay calm. */
body.page-landing {
  background:
    repeating-linear-gradient(
      0deg,
      var(--bg)  0,
      var(--bg)  90px,
      var(--bg2) 90px,
      var(--bg2) 180px
    );
}
a { color: #c0e0c8; text-decoration: none; }
a:hover { color: var(--yellow); text-decoration: none; }

.muted { color: var(--muted); }
.hidden { display: none !important; }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Topbar */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px;
  color: var(--fg);
}
.brand-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0, #fff 30%, #cfcfcf 70%, #777 100%);
  border: 1px solid #0a0a0a;
  position: relative;
}
/* Tiny black pentagon on the ball */
.brand-dot::after {
  content: "";
  position: absolute;
  top: 3px; left: 4px;
  width: 5px; height: 5px;
  background: #0a0a0a;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.topbar nav { display: flex; align-items: center; gap: 18px; }
.topbar nav a { color: var(--muted); font-size: 14px; }
.topbar nav a.btn { color: #fff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border-radius: 8px;
  border: 0; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: filter 0.12s ease, transform 0.05s ease;
}
.btn-primary {
  background: var(--yellow);
  color: var(--black);
  border: 2px solid var(--black);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 3px 0 var(--black);
}
.btn-primary:hover {
  filter: brightness(1.05);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--black);
}
.btn-primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--black); }
.btn-ghost {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-xl { padding: 16px 32px; font-size: 18px; }

/* Install card states */
#install-card .install-lead {
  font-size: 16px;
  margin: 8px 0 14px;
}
#install-card .install-success {
  font-size: 16px;
  font-weight: 700;
  color: #2dab5f;
  margin: 8px 0 14px;
}
#install-card #install-sideload-note {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid #b97d2e;
  background: rgba(255, 176, 74, 0.08);
  border-radius: 6px;
  color: #ffb04a;
}

/* ─── Billing & Usage Report ──────────────────────────────────── */
.report-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
}
.report-chip {
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--fg, #fff);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.report-chip:hover { background: rgba(255, 255, 255, 0.10); }
.report-chip.active {
  background: rgba(45, 171, 95, 0.18);
  border-color: rgba(45, 171, 95, 0.6);
  color: #6ce8a0;
}
.report-custom {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 6px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted, #9fb1c9);
}
.report-custom input[type="date"] {
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--fg, #fff);
  font: inherit;
  margin-left: 4px;
}
#report-window {
  color: var(--muted, #9fb1c9);
  font-size: 12px;
  font-style: italic;
  margin: 6px 0 12px;
}
.report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.report-tile {
  padding: 14px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.report-tile-label {
  font-size: 11px;
  color: var(--muted, #9fb1c9);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 6px;
}
.report-tile-num {
  font-size: 24px;
  font-weight: 800;
  color: var(--fg, #fff);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.report-tile-sub {
  font-size: 11px;
  color: var(--muted, #9fb1c9);
  margin-top: 6px;
  line-height: 1.4;
}
.report-tile-sum {
  background: linear-gradient(135deg, rgba(45, 171, 95, 0.12), rgba(45, 171, 95, 0.04));
  border-color: rgba(45, 171, 95, 0.35);
}
.report-tile-sum .report-tile-num { color: #6ce8a0; }
.report-tile-balance .report-tile-num { font-size: 28px; }

/* Tester / side-load install card — kid-simple step-by-step */
.tester-installer .tester-lead {
  font-size: 14px;
  color: #cfe0fa;
  background: rgba(45, 171, 95, 0.08);
  border-left: 3px solid #2dab5f;
  padding: 10px 12px;
  border-radius: 4px;
  margin: 8px 0 16px;
  line-height: 1.5;
}
.tester-steps {
  list-style: none;
  counter-reset: tester-step;
  padding: 0;
  margin: 16px 0;
}
.tester-steps > li {
  counter-increment: tester-step;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  position: relative;
}
.tester-steps > li::before {
  content: counter(tester-step);
  position: absolute;
  top: -10px;
  left: -10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d6a3d, #2dab5f);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg, #061d10);
}
.tester-step-illu {
  flex-shrink: 0;
  width: 96px;
  height: 72px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.tester-step-illu svg { width: 100%; height: auto; }
.tester-step-txt {
  flex: 1;
  font-size: 14px;
  line-height: 1.55;
  color: #e9eef7;
}
.tester-step-txt code {
  background: rgba(0, 0, 0, 0.4);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}
.tester-step-txt .warn-inline {
  color: #ffb04a;
  font-weight: 600;
}
.tester-footer {
  margin-top: 16px;
  padding: 10px 12px;
  background: rgba(230, 137, 43, 0.08);
  border-left: 3px solid #e6892b;
  border-radius: 4px;
  font-size: 13px;
  color: #ffd089;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .tester-steps > li { flex-direction: column; }
  .tester-step-illu { width: 100%; height: 100px; }
}
.btn-full { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Hero (landing) */
.hero {
  text-align: center;
  padding: 80px 24px 60px;
  max-width: 840px; margin: 0 auto;
}
.hero h1 {
  font-size: 48px; line-height: 1.1; margin: 0 0 20px;
  letter-spacing: -0.02em;
}
.hero-sub {
  font-size: 18px; color: var(--muted);
  max-width: 640px; margin: 0 auto 32px;
}
.hero-ctas { display: flex; gap: 12px; justify-content: center; }

.features {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  max-width: 1100px; margin: 0 auto; padding: 40px 24px;
}
.feature {
  background: var(--card); padding: 20px;
  border-radius: 10px; border: 1px solid var(--line);
}
.feature h3 { margin: 0 0 8px; font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

.pricing {
  text-align: center;
  padding: 40px 24px 80px;
  max-width: 540px; margin: 0 auto;
}
.pricing h2 { font-size: 28px; margin: 0 0 8px; }
.pricing-card {
  background: var(--card); padding: 32px;
  border-radius: 12px; border: 1px solid var(--line);
  margin-top: 24px;
}
.price { font-size: 42px; font-weight: 700; }
.price .period { font-size: 14px; color: var(--muted); font-weight: 400; }
.pricing-card ul { text-align: left; padding-left: 18px; margin: 16px 0; color: var(--muted); }

footer {
  text-align: center; padding: 30px;
  color: var(--muted); font-size: 12px;
  border-top: 1px solid var(--line);
}

/* Card-style layouts (signup / dashboard) */
.card-wrap {
  display: flex; align-items: flex-start; justify-content: center;
  padding: 60px 24px;
}
.card {
  background: var(--card);
  padding: 32px;
  border-radius: 12px; border: 1px solid var(--line);
  max-width: 480px; width: 100%;
}
.card h1 { margin: 0 0 8px; font-size: 24px; }
.card h2 { margin: 0 0 12px; font-size: 18px; }

.dashboard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  max-width: 1100px; margin: 24px auto;
  padding: 0 24px;
}
.dashboard-grid .card { max-width: none; }

/* Forms */
.form { display: flex; flex-direction: column; gap: 6px; }
.form label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); margin-top: 12px;
}
.form input[type="email"], .form input[type="text"], .form input[type="url"] {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--fg);
  padding: 9px 11px;
  border-radius: 7px;
  font-size: 14px;
  font-family: inherit;
}
.form input:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
.form button { margin-top: 18px; }

/* Token display */
.token-box {
  display: flex; gap: 8px; align-items: center;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 10px 0;
}
.token-box code {
  flex: 1;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--fg);
  word-break: break-all;
  user-select: all;
}

/* Result panel after signup */
.result-ok h2 { color: var(--green); }
.result-err {
  background: rgba(230,57,70,0.12);
  border: 1px solid rgba(230,57,70,0.3);
  border-radius: 8px;
  padding: 12px;
  color: #ffb0b6;
  margin-top: 12px;
}

/* Key-value grid for dashboard overview */
.kv-grid {
  display: grid; grid-template-columns: 1fr auto;
  gap: 6px 20px;
  margin-top: 12px;
}
.kv-grid dt { color: var(--muted); font-size: 13px; }
.kv-grid dd { margin: 0; font-size: 13px; }

.numbered { padding-left: 18px; color: var(--muted); }
.numbered li { margin-bottom: 6px; }
.numbered code { background: rgba(255,255,255,0.06); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

/* Install-card extras (v1.21) */
.ver-pill {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(45, 171, 95, 0.15);
  color: #6fde9c;
  border: 1px solid rgba(45, 171, 95, 0.3);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
  margin-left: 6px;
}
.install-callout {
  background: rgba(255, 209, 102, 0.08);
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-left: 3px solid #ffd166;
  color: #f0e0a8;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 10px 0 14px;
  font-size: 13px;
  line-height: 1.45;
}
.install-callout code {
  background: rgba(0, 0, 0, 0.35);
  padding: 1px 5px;
  border-radius: 3px;
}
.install-steps li {
  margin-bottom: 10px;
  color: var(--fg);
  line-height: 1.45;
}
.install-steps strong { color: var(--fg); }
.install-steps strong.warn { color: #ffd166; }
.step-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
  cursor: help;
  vertical-align: baseline;
  user-select: none;
}
.step-help:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.install-troubleshoot {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
}
.install-troubleshoot summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--fg);
  padding: 4px 0;
}
.install-troubleshoot ul {
  margin: 8px 0 4px 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.install-troubleshoot li { margin-bottom: 5px; }
.install-troubleshoot code {
  background: rgba(0, 0, 0, 0.3);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
}

/* Time-window picker (admin billing + dashboard) */
.window-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0 14px;
}
.window-picker button {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.window-picker button:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--fg);
}
.window-picker button.active {
  background: rgba(45, 171, 95, 0.15);
  border-color: rgba(45, 171, 95, 0.5);
  color: #6fde9c;
}

/* Billing dashboard card */
.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 10px 0 8px;
}
.billing-tile {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
}
.billing-tile-income { border-left: 3px solid #2dab5f; }
.billing-tile-spend  { border-left: 3px solid #e6892b; }
.billing-tile-net    { border-left: 3px solid #5b8def; }
.billing-tile-projected { border-left: 3px solid #b04050; }
.bt-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  font-weight: 700;
}
.bt-val {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
  color: var(--fg);
}
.bt-sub {
  font-size: 11px;
  color: var(--muted);
}

/* Sites quick-link card */
.sites-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.site-link {
  display: block;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.12s, border-color 0.12s;
}
.site-link:hover {
  background: rgba(45, 171, 95, 0.08);
  border-color: rgba(45, 171, 95, 0.4);
}
.site-link strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}
.site-link span {
  font-size: 11px;
  color: var(--muted);
  display: block;
}

/* Vendor charges card (admin) */
.vendor-grand {
  background: rgba(45, 171, 95, 0.08);
  border: 1px solid rgba(45, 171, 95, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 10px 0 14px;
}
.vendor-grand-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.vendor-grand-lbl {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
  color: #bdf4d2; font-weight: 600;
}
.vendor-grand-val {
  font-size: 24px; font-weight: 700; color: #6fde9c;
  font-variant-numeric: tabular-nums;
}
.vendor-grand-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }

.vendor-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.vendor-row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vendor-head {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}
.vendor-name {
  margin: 0; font-size: 16px; font-weight: 700;
  color: var(--fg); flex: 1;
}
.vendor-pill {
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 2px 8px; border-radius: 999px;
}
.vendor-pill.vendor-api   { background: rgba(45,171,95,0.18); color: #6fde9c; }
.vendor-pill.vendor-fixed { background: rgba(176,176,176,0.15); color: #cfd8e3; }
.vendor-product { font-size: 12px; color: var(--muted); }
.vendor-cost {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 8px 0;
}
.vendor-cost-val {
  font-size: 22px; font-weight: 700; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.vendor-cost-detail { font-size: 11px; color: var(--muted); }
.vendor-note {
  font-size: 11.5px; color: var(--muted);
  background: rgba(0,0,0,0.18);
  padding: 6px 10px;
  border-radius: 6px;
  line-height: 1.45;
}
.vendor-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}

/* Telnyx cost-detail category pills */
.cat-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.cat-pill.cat-voice_outbound { background: rgba(45,171,95,0.15);  color: #6fde9c; }
.cat-pill.cat-voice_inbound  { background: rgba(91,141,239,0.15); color: #a8c2f5; }
.cat-pill.cat-voice          { background: rgba(91,141,239,0.15); color: #a8c2f5; }
.cat-pill.cat-outbound       { background: rgba(45,171,95,0.15);  color: #6fde9c; }
.cat-pill.cat-inbound        { background: rgba(91,141,239,0.15); color: #a8c2f5; }
.cat-pill.cat-number_rental  { background: rgba(176,64,80,0.15);  color: #ff8a93; }
.cat-pill.cat-recording      { background: rgba(230,137,43,0.15); color: #ffb37a; }
.cat-pill.cat-transcription  { background: rgba(176,176,176,0.15);color: #cfd8e3; }
.cat-pill.cat-fax,
.cat-pill.cat-messaging      { background: rgba(255,209,102,0.15);color: #ffd166; }

/* Admin users table */
.users-actions { display: flex; gap: 8px; margin-bottom: 8px; }
.users-table-wrap { overflow-x: auto; }
.users-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.users-table th, .users-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.users-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted);
}
.users-table td .btn { margin-right: 4px; margin-bottom: 2px; }

/* v1.29.56 — Freeze the EMAIL + NAME columns of the main users table
   when scrolling right (lots of columns once admin permissions + buckets
   are shown). Scoped to #users-table only — the other tables on /admin
   (lp-table, archived-table) keep their default scroll behavior.
   v1.29.57 — Switched the freeze background from --card (5% opacity)
   to a solid dark color so cells underneath don't bleed through. */
.users-table-wrap { overflow-x: auto; position: relative; }
/* v1.29.89 — Email column now carries cell phone + numbers badge + the
   "PAID BUT NO NUMBERS" warning, so 220px wasn't enough — Name column
   got covered. Forcing a fixed width on Email (290px) and bumping
   Name's left offset to match. min-width + max-width together prevent
   the content from blowing past the sticky boundary. */
#users-table th:nth-child(1),
#users-table td:nth-child(1) {
  position: sticky;
  left: 0;
  background: #0d3a1c;       /* solid dark green — matches the soccer-field theme */
  z-index: 2;
  min-width: 290px;
  max-width: 290px;
  width: 290px;
  word-break: break-word;
}
#users-table th:nth-child(2),
#users-table td:nth-child(2) {
  position: sticky;
  left: 290px;  /* matches Email column width above */
  background: #0d3a1c;
  z-index: 2;
  box-shadow: 6px 0 12px -4px rgba(0, 0, 0, 0.6);   /* stronger right-edge shadow for clearer seam */
  min-width: 120px;
}
/* Headers stay readable too — same solid background plus high z-index. */
#users-table th:nth-child(1),
#users-table th:nth-child(2) {
  background: #0a2e15;       /* slightly darker so the header bar contrasts against rows */
  z-index: 3;
}

/* Modal — used for "new token issued" reveal, billing detail drawers,
   user-edit popups, etc. v1.29.57 — Darkened backdrop from 0.7 → 0.88
   and switched card background from --card (5% opacity, basically
   transparent) to a solid dark color. Previously the modals were
   illegible because the table behind them showed through. */
.pd-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.pd-modal-card {
  background: #0d3a1c;        /* solid dark green */
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  max-width: 720px;
  width: calc(100% - 40px);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.pd-modal-card h2 { margin: 0 0 8px; }

/* v1.29.57 — Any nested .card inside a modal should also be fully
   opaque so text reads cleanly. Belt-and-suspenders for any future
   modal that wraps its contents in .card. */
.pd-modal .card { background: rgba(0, 0, 0, 0.35); }

/* Top-up tier buttons */
.topup-tiers {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
.topup-tiers .topup-btn {
  flex: 1 1 130px; min-width: 130px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 10px;
  line-height: 1.2;
}
.topup-tiers .topup-amt {
  font-weight: 600;
  font-size: 14px;
}
.topup-tiers .topup-rate {
  font-size: 11px;
  opacity: 0.75;
  font-weight: 400;
}

/* Banner shown on /dashboard?topup=success or =cancel */
.pd-banner {
  padding: 12px 16px;
  border: 1px solid;
  border-radius: 10px;
  margin: 0 24px 16px;
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SOCCER GOAL THEME — landing page only (.page-landing on <body>)
   ═══════════════════════════════════════════════════════════════════════ */

/* Stadium scoreboard bar — replaces the .topbar on the landing page. */
.scoreboard {
  background: #000;
  color: #fff;
  padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  font-family: "Courier New", ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.6px;
  border-bottom: 4px solid var(--yellow);
}
.sb-team {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px;
  text-transform: uppercase;
}
.sb-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: #ff5252;
  text-transform: uppercase;
}
.sb-status::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3333;
  box-shadow: 0 0 6px #ff3333;
  animation: sb-blink 1.6s ease-in-out infinite;
}
@keyframes sb-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.scoreboard nav { display: flex; align-items: center; gap: 18px; }
.scoreboard nav a {
  color: #cfd8dc; font-size: 13px; text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.scoreboard nav a:hover { color: var(--yellow); }
.scoreboard nav a.btn { color: var(--black); }

/* HERO with real soccer goal frame ────────────────────────────────── */
.stadium {
  position: relative;
  padding: 80px 24px 100px;
  overflow: hidden;
}
/* halfway line + center circle, drawn over the grass stripes */
.stadium::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* center spot */
    radial-gradient(circle at 50% 60%, rgba(255,255,255,0.45) 0 3px, transparent 3px),
    /* center circle */
    radial-gradient(circle at 50% 60%, transparent 110px, transparent 112px, rgba(255,255,255,0.18) 112px, rgba(255,255,255,0.18) 114px, transparent 114px),
    /* halfway line */
    linear-gradient(0deg, transparent calc(60% - 1px), rgba(255,255,255,0.18) calc(60% - 1px), rgba(255,255,255,0.18) 60%, transparent 60%);
}

.goal-frame {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 70px 60px 50px;
  border-top:    16px solid #ffffff;
  border-left:   16px solid #ffffff;
  border-right:  16px solid #ffffff;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.07) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 18px),
    rgba(0, 0, 0, 0.18);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 -40px 80px rgba(0, 0, 0, 0.3);
}
.goal-frame::after {
  /* grass strip below the goal line */
  content: "";
  position: absolute;
  left: -16px; right: -16px; bottom: -10px;
  height: 10px;
  background: linear-gradient(180deg, #062810, #03190a);
}

/* Soccer ball mid-flight in the top-right corner of the goal */
.goal-ball {
  position: absolute;
  top: -36px; right: 60px;
  width: 80px; height: 80px;
  transform: rotate(-22deg);
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
  z-index: 2;
}
.goal-ball-trail {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8));
  border-radius: 1px;
  z-index: 1;
}

.hero h1 {
  font-size: 56px; line-height: 1.04;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  text-align: center;
  font-weight: 900;
  text-transform: uppercase;
}
.hero h1 .accent {
  display: block;
  color: var(--yellow);
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 3px 3px 0 #000;
}
.hero-eyebrow {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--yellow);
  background: var(--black);
  padding: 4px 10px;
  border-radius: 2px;
  margin: 0 auto 18px;
}
.hero-eyebrow-wrap { text-align: center; }
.hero-sub {
  font-size: 17px; color: #d8e7dd;
  max-width: 640px; margin: 0 auto 28px;
  text-align: center;
}
.hero-ctas { display: flex; gap: 12px; justify-content: center; }

/* Halftime stats strip ───────────────────────────────────────────── */
.halftime {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 880px;
  margin: -10px auto 0;
  background: var(--black);
  border: 2px solid var(--yellow);
  border-radius: 4px;
  font-family: "Courier New", monospace;
}
.halftime-cell {
  padding: 14px 18px;
  text-align: center;
  border-right: 1px solid rgba(255, 210, 63, 0.25);
}
.halftime-cell:last-child { border-right: 0; }
.halftime-num {
  font-size: 28px; font-weight: 900;
  color: var(--yellow);
  text-shadow: 0 0 8px rgba(255, 210, 63, 0.5);
}
.halftime-lbl {
  font-size: 10px; color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Starting Lineup — feature jersey cards in a 4-card formation ──── */
.lineup {
  padding: 80px 24px 60px;
  max-width: 1200px;
  margin: 0 auto;
}
.section-head {
  text-align: center;
  margin-bottom: 40px;
}
.section-eyebrow {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--yellow);
  border: 1px solid var(--yellow);
  padding: 3px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: 36px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -0.01em;
}
.formation {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.jersey {
  position: relative;
  background: #ffffff;
  color: var(--black);
  border-radius: 6px;
  padding: 22px 18px 24px;
  border: 3px solid var(--black);
  box-shadow: 0 4px 0 var(--black);
  overflow: hidden;
}
.jersey::before {
  /* diagonal kit stripe */
  content: "";
  position: absolute;
  top: -20px; bottom: -20px; left: -10px; right: -10px;
  background: linear-gradient(118deg,
    transparent 38%,
    rgba(10, 58, 26, 0.10) 38%,
    rgba(10, 58, 26, 0.10) 56%,
    transparent 56%);
  pointer-events: none;
}
.jersey > * { position: relative; }
.jersey-num {
  font-family: "Arial Black", "Helvetica Black", sans-serif;
  font-size: 64px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -3px;
  color: var(--bg);
  -webkit-text-stroke: 0;
}
.jersey-pos {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--yellow);
  background: var(--black);
  display: inline-block;
  padding: 3px 8px;
  border-radius: 2px;
  margin-bottom: 4px;
}
.jersey h3 {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 8px 0 6px;
  color: var(--black);
}
.jersey p {
  margin: 0;
  font-size: 14px;
  color: #1a3520;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .formation { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .formation { grid-template-columns: 1fr; }
  .hero h1 { font-size: 38px; }
}

/* Match Fee — single ticket-stub pricing card ───────────────────── */
.match-fee {
  padding: 60px 24px 80px;
  max-width: 720px;
  margin: 0 auto;
}
.ticket {
  display: grid;
  grid-template-columns: 220px 1fr;
  background: #fff;
  color: var(--black);
  border-radius: 6px;
  border: 3px solid var(--black);
  box-shadow: 0 6px 0 var(--black);
  overflow: hidden;
}
.ticket-stub {
  background: var(--bg);
  color: #fff;
  padding: 28px 20px;
  text-align: center;
  position: relative;
  border-right: 3px dashed #fff;
}
.ticket-stub::before, .ticket-stub::after {
  /* perforation circles */
  content: "";
  position: absolute;
  right: -10px;
  width: 18px; height: 18px;
  background: var(--bg2);
  border-radius: 50%;
  border: 3px solid var(--black);
}
.ticket-stub::before { top: -12px; }
.ticket-stub::after  { bottom: -12px; }
.ticket-tier {
  font-family: "Courier New", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--yellow);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ticket-price {
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -2px;
  color: #fff;
}
.ticket-period {
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #a8c4b1;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 4px;
}
.ticket-perks {
  padding: 28px 28px 24px;
}
.ticket-perks h3 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--black);
}
.ticket-perks ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.ticket-perks li {
  font-size: 14px;
  color: #1a3520;
  padding: 5px 0 5px 22px;
  position: relative;
}
.ticket-perks li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0, #fff 30%, #cfcfcf 70%, #777 100%);
  border: 1px solid #0a0a0a;
}
.ticket-fineprint {
  font-size: 12px;
  color: #5a6f60;
  line-height: 1.5;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: rgba(10, 58, 26, 0.05);
  border-left: 3px solid var(--bg);
  border-radius: 2px;
}
@media (max-width: 540px) {
  .ticket { grid-template-columns: 1fr; }
  .ticket-stub { border-right: 0; border-bottom: 3px dashed #fff; }
  .ticket-stub::before, .ticket-stub::after { display: none; }
}

/* v1.29.61 — Simpler pricing hero (replaces the dense 3-section
   ticket layout). Big number, 3 plain-language steps, single CTA,
   optional collapsible details for the deep-dive crowd. */
.pricing-hero {
  background: linear-gradient(180deg, rgba(255, 210, 63, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 210, 63, 0.25);
  border-radius: 16px;
  padding: 36px 28px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.pricing-headline { margin-bottom: 28px; }
.pricing-supertitle {
  font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px;
  color: #c8e6c9; margin-bottom: 6px; font-weight: 600;
}
.pricing-big-price {
  font-size: 64px; font-weight: 800; color: var(--yellow);
  font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 1px; line-height: 1; margin-bottom: 4px;
}
.pricing-subtitle {
  font-size: 14px; color: #a8c4b1; font-weight: 400;
}
.pricing-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.pricing-step {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
}
.pricing-step-num {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow); color: #1a1a1a;
  border-radius: 50%; font-weight: 800; font-size: 16px;
  margin-bottom: 10px;
}
.pricing-step-title {
  font-size: 16px; font-weight: 700; color: #fff;
  margin-bottom: 6px;
}
.pricing-step-desc {
  font-size: 13px; color: #c8e6c9; line-height: 1.45;
}
.pricing-cta { margin: 8px 0 4px; }
.pricing-cta-hint {
  font-size: 12px; color: #a8c4b1; margin-top: 10px;
}
.pricing-details {
  margin-top: 28px;
  text-align: left;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 0;
}
.pricing-details > summary {
  cursor: pointer;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 13px;
  color: #cfe6d6;
  list-style: none;
  user-select: none;
}
.pricing-details > summary::after {
  content: " ▾";
  float: right;
  transition: transform 0.15s;
}
.pricing-details[open] > summary::after {
  content: " ▴";
}
.pricing-details > summary:hover { background: rgba(255, 255, 255, 0.03); }
.pricing-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 18px 18px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pricing-details-col h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #ffd23f; margin: 0 0 10px;
}
.pricing-details-col ul {
  margin: 0; padding-left: 18px; font-size: 13px;
  color: #cfe6d6; line-height: 1.65;
}
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pricing-table td {
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #cfe6d6;
}
.pricing-table td:first-child { color: #fff; font-weight: 500; }
.pricing-table td:last-child  { text-align: right; }
.pricing-table tr:last-child td {
  background: rgba(255, 210, 63, 0.06);
}
.pricing-fineprint {
  margin-top: 12px; font-size: 12px; color: #a8c4b1;
  font-style: italic;
}
@media (max-width: 720px) {
  .pricing-steps { grid-template-columns: 1fr; }
  .pricing-details-grid { grid-template-columns: 1fr; }
  .pricing-big-price { font-size: 52px; }
  .pricing-hero { padding: 28px 18px; }
}

/* v1.29.66 — State-allocation dropdowns. The previous fix only colored
   the <select> element itself, which left Chrome-on-Windows rendering
   the native popup list with the OS light theme — white-on-white text
   that was unreadable unless you hovered. The actual fix is
   `color-scheme: dark` — that tells Chrome to use dark-mode for the
   native popup chrome (background, scrollbar, hover state) without
   needing any custom dropdown component.
   v1.29.67 — Added color-scheme + kept the explicit option styles as
   a fallback for browsers that don't honor color-scheme yet.
   Applies to both the dashboard allocation builder (.alloc-state) AND
   the activation bundle picker (.ab-alloc-state). */
.alloc-state,
.ab-alloc-state {
  color-scheme: dark;                        /* the key fix */
  background: #0d3a1c !important;
  color: #e9eef7 !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}
.alloc-state option,
.ab-alloc-state option {
  background: #0d3a1c;
  color: #e9eef7;
  padding: 4px 6px;
}
.alloc-state option:checked,
.ab-alloc-state option:checked {
  background: #1a5a30;
  color: #fff;
}

/* v1.29.66 — Pricing-details two-column block. The "Included" + "Dial
   credit tiers" columns were rendering side-by-side with no divider
   so they ran into each other visually. Add a vertical divider + more
   gap between columns + a subtle background per column so the eye
   knows where one section ends and the next begins. */
.pricing-details-grid {
  gap: 32px;     /* was 24px */
  position: relative;
}
.pricing-details-col {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 16px;
}

/* Full-time footer ───────────────────────────────────────────────── */
.full-time {
  background: var(--black);
  color: #cfd8dc;
  padding: 28px 24px;
  border-top: 4px solid var(--yellow);
  text-align: center;
}
.full-time .ft-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}
.full-time .ft-copy {
  margin-top: 8px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: #6c7a80;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Local Presence admin badges */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.badge-ok   { background: #e8f5e9; color: #1b5e20; }
.badge-warn { background: #fff3e0; color: #b85c00; }

/* ── Mobile Apps card (v1.28.4) ─────────────────────────────────
   Side-by-side Android / iPhone install panels on the dashboard. */
.mobile-apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .mobile-apps-grid { grid-template-columns: 1fr; }
}
.mobile-app-col {
  padding: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
}
.mobile-app-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; margin-bottom: 4px;
}
.mobile-app-emoji { font-size: 20px; }
.mobile-app-lead {
  font-size: 13px;
  color: var(--muted, #9fb1c9);
  margin: 0 0 12px;
}
.mobile-app-btn {
  margin-bottom: 10px;
}
.mobile-app-details {
  margin-top: 4px;
  padding: 0;
}
.mobile-app-details summary {
  cursor: pointer;
  font-size: 12px;
  color: #6bb3ff;
  padding: 6px 0;
  user-select: none;
}
.mobile-app-details summary:hover { color: #8ccaff; }
.mobile-app-details[open] summary {
  margin-bottom: 8px;
}
.mobile-app-steps {
  margin: 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg, #e9eef7);
}
.mobile-app-steps li { margin-bottom: 6px; }
.mobile-app-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--muted, #9fb1c9);
}
.mobile-app-url-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.mobile-app-url {
  flex: 1;
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  color: #fff;
  word-break: break-all;
}