:root {
  color-scheme: dark;
  --ink: #e6edf3;
  --muted: #8b949e;
  --line: #3a424d;
  --line-soft: #2b323b;
  --accent: #3b82f6;
  --accent-hover: #2f6fd0;
  --accent-ink: #ffffff;
  --bg: #0d1117;
  --card: #161b22;
  --card-2: #1c222b;
  --good: #3fb950;
  --bad: #f85149;
  --warn: #d29922;
}
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
}
header {
  padding: 24px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
header h1 { margin: 0; font-size: 20px; color: var(--ink); }
header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
main { max-width: 720px; margin: 0 auto; padding: 32px 20px 80px; }
main.wide { max-width: 96vw; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--ink); }
select, input, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 15px;
  margin-bottom: 18px;
  background: var(--card-2);
  color: var(--ink);
}
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
}
input::placeholder, textarea::placeholder { color: #6e7681; }
textarea { font-family: inherit; resize: vertical; }
.price { font-weight: 700; font-size: 18px; color: var(--ink); }
button {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: 14px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
button:hover { background: var(--accent-hover); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.error { color: var(--bad); font-size: 14px; margin-top: 10px; }
.result-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.result-table td { padding: 8px 4px; border-bottom: 1px solid var(--line); vertical-align: top; word-break: break-word; overflow-wrap: anywhere; }
.result-table td:first-child { color: var(--muted); width: 45%; }
.result-text {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 12px;
  border-radius: 8px;
}
footer {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
  padding: 26px 16px 32px;
  margin-top: 28px;
  border-top: 1px solid var(--line);
}
footer a { color: var(--muted); text-decoration: none; white-space: nowrap; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 22px;
  row-gap: 6px;
  margin-bottom: 10px;
}
footer .footer-copy { opacity: 0.85; }
@media (max-width: 600px) {
  footer .footer-links { column-gap: 16px; row-gap: 9px; }
}
.note {
  background: rgba(210, 153, 34, 0.12);
  border: 1px solid rgba(210, 153, 34, 0.4);
  color: #e3b341;
  font-size: 13px;
  line-height: 1.4;
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 18px;
}
.header-row { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:flex-start; max-width:720px; margin:0 auto; }
.header-row.wide { max-width: 96vw; }
.muted { color: var(--muted); font-size: 13px; }
/* Phones auto-detect email addresses and turn them into tap-to-mail links.
   The signed-in address is a label, not an action, so any detected link is
   stripped back to plain text. */
#user-email, #user-email * {
  -webkit-touch-callout: none;
  pointer-events: none;
  user-select: text;
}
#user-email a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
/* Supplier reference data - bright enough to actually read on the dark cards */
.src-ref { color: #c9d4e4; font-size: 12.5px; }
/* Grab handle sitting on the right edge of every admin table heading. */
.col-grip {
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 2;
}
.col-grip::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 3px;
  width: 1px;
  height: 60%;
  background: var(--line);
}
.col-grip:hover::after { background: var(--accent); width: 2px; }

table.history-table th { overflow: hidden; text-overflow: ellipsis; }
table.history-table td { overflow: hidden; text-overflow: ellipsis; word-break: break-word; }
h2 { font-size: 16px; margin: 0 0 4px; color: var(--ink); }
button.ghost {
  width: auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  padding: 8px 14px;
  font-size: 14px;
}
button.ghost:hover { background: var(--card-2); color: var(--ink); border-color: var(--muted); }
a.ghost {
  display: inline-block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  color: var(--muted);
  vertical-align: middle;
}
a.ghost:hover { background: var(--card-2); color: var(--ink); border-color: var(--muted); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.tabs { display:flex; gap:8px; margin-bottom:20px; }
.tab {
  flex:1; width:auto; background:transparent; color:var(--muted);
  border:1px solid var(--line); padding:10px; font-size:14px; font-weight:600;
}
.tab:hover { background: var(--card-2); color: var(--ink); }
.tab.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.tab.active:hover { background: var(--accent-hover); }
.hint { color:var(--muted); font-size:13px; text-align:center; margin:16px 0 0; }
.balance-card {
  background: linear-gradient(135deg, #1f4b8f 0%, #2563a8 100%);
  border: 1px solid #2f6fd0;
  color:#fff; border-radius:12px; padding:20px 24px;
  display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;
}
.balance-label { font-size:14px; opacity:0.85; }
.balance-amount { font-size:28px; font-weight:700; }
.run-row { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:4px; }
.run-row .price { flex:0 0 auto; }
.run-row button { width:auto; flex:1; }
.result-box { margin-top:18px; padding:16px; border-radius:8px; font-size:14px; }
.result-ok { background: rgba(63, 185, 80, 0.10); border:1px solid rgba(63, 185, 80, 0.35); }
.result-fail { background: rgba(248, 81, 73, 0.10); border:1px solid rgba(248, 81, 73, 0.35); }
.result-box p { margin:4px 0; }
.result-box strong { color: var(--ink); }
.tag-good { color: var(--good); font-weight: 600; }
.tag-bad { color: var(--bad); font-weight: 600; }
.table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -2px; }
.history-table { width:100%; min-width:640px; border-collapse:collapse; font-size:13px; }
.history-table th { text-align:left; color:var(--muted); font-weight:600; padding:8px 6px; border-bottom:1px solid var(--line); white-space:nowrap; }
.history-table td { padding:10px 6px; border-bottom:1px solid var(--line-soft); color: var(--ink); word-break:break-word; overflow-wrap:anywhere; vertical-align:middle; }
/* Buttons inside admin tables must never wrap letter-by-letter. */
.history-table td button { white-space:nowrap; word-break:normal; overflow-wrap:normal; }
.badge { font-size:12px; padding:2px 8px; border-radius:10px; background:var(--card-2); color:var(--muted); white-space:nowrap; }
.badge-ok { background: rgba(63, 185, 80, 0.15); color:var(--good); }
.badge-fail { background: rgba(248, 81, 73, 0.15); color:var(--bad); }
.amt-in { color: var(--good); font-weight: 600; }
.amt-out { color: var(--bad); font-weight: 600; }
.topup-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:14px 0 10px; }
.step {
  width:44px; height:44px; flex:0 0 auto; font-size:22px; line-height:1;
  background:var(--card-2); color:var(--ink); border:1px solid var(--line); border-radius:10px; padding:0;
}
.step:hover:not(:disabled) { border-color:var(--accent); background:var(--card-2); color:var(--accent); }
.topup-amount {
  flex:0 0 auto; min-width:90px; text-align:center; font-size:22px; font-weight:700;
  border:1px solid var(--line); border-radius:10px; padding:9px 12px; background:var(--card-2);
  display:inline-flex; align-items:center; justify-content:center; gap:1px;
}
/* The amount is typable, so the input is dressed to look like the label it
   replaced rather than a form field sitting inside a box. */
.topup-amount input {
  width:70px; margin:0; padding:0; border:none; background:none;
  font-size:22px; font-weight:700; color:var(--ink); text-align:left;
  font-family:inherit; line-height:1.2;
}
.topup-amount input:focus { outline:none; }
.topup-amount:focus-within { border-color:var(--accent); }
.topup-go { width:auto; flex:1; }
.quick-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.quick {
  width:auto; background:transparent; color:var(--muted);
  border:1px solid var(--line); border-radius:8px; padding:6px 14px; font-size:13px; font-weight:600;
}
.quick:hover { border-color:var(--accent); color:var(--accent); background:transparent; }
.fee-line { font-size:13px; margin:4px 0 0; }

@media (max-width: 640px) {
  main { padding: 20px 12px 60px; }
  main.wide { padding: 16px 8px 60px; }
  .card { padding: 16px; }
  header { padding: 18px 14px; }
  .header-row.wide { max-width: 100%; }
  .balance-card { padding: 16px 18px; flex-wrap: wrap; gap: 10px; }
  .history-table { min-width: 560px; font-size: 12px; }
}

/* Phone field with a fixed dialling code taken from the country picker. */
.phone-row { display: flex; align-items: stretch; gap: 0; margin-bottom: 18px; }
.phone-row .dial-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 8px 0 0 8px;
  background: var(--card-2);
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
}
.phone-row input {
  margin-bottom: 0;
  border-radius: 0 8px 8px 0;
  min-width: 0;
}
.phone-row input:disabled { opacity: 0.6; }
#phone-hint { margin-top: -12px; margin-bottom: 16px; }

/* Quick re-order: the three most recently used services. */
.recent-label { margin: 0 0 8px; font-size: 12px; }
.recent-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.recent-chip {
  width: auto;
  margin: 0;
  padding: 7px 12px;
  font-size: 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink);
  cursor: pointer;
}
.recent-chip:hover { border-color: var(--accent); }

/* Service names in history double as a re-order shortcut. */
.reorder-link { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--muted); cursor: pointer; }
.reorder-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* Turnaround marker shown above each service description. */
.delivery-badge {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
}
.delivery-badge:not(.instant) { background: rgba(210, 153, 34, 0.15); color: #d29922; }

/* Admin Unlocks page */
.unlock-group { margin: 22px 0 8px; font-size: 15px; }
input[type="checkbox"] { width: auto; margin: 0; }

/* Account pages stay blank until the account status is known, so an
   unapproved customer never sees a flash of the working dashboard before
   the awaiting-approval notice replaces it. A failsafe in the page reveals
   the content even if the status request fails. */
body.app-loading main,
body.app-loading .header-actions { visibility: hidden; }

/* Account type picker: two full-width choices that read as cards rather
   than cramped inline radios. */
.tier-row { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.tier-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card-2);
  cursor: pointer;
  font-weight: 400;
}
.tier-option:hover { border-color: var(--muted); }
.tier-option input[type="radio"] { width: auto; margin: 3px 0 0; flex: none; }
.tier-option > span { display: block; }
.tier-option b { display: block; font-size: 15px; color: var(--ink); }
.tier-note { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.tier-option:has(input:checked) { border-color: var(--accent); background: rgba(59,130,246,0.08); }

/* Collapsible history on the customer dashboard. */
.history-toggle {
  width: auto;
  background: transparent;
  color: var(--ink);
  border: none;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.history-toggle:hover { background: transparent; color: var(--accent); }
.history-caret { color: var(--muted); font-size: 14px; }

/* Category-level reorder arrows are amber so they read as "move the whole
   category" and are never confused with the blue arrows that move one
   service inside its table. Used on SickW and GSMunlocks headings and the
   SickW category manager card. */
button.cat-order-arrow {
  background: var(--warn);
  border-color: var(--warn);
  color: #0d1117;
}
button.cat-order-arrow:hover {
  background: #e5ac2e;
  border-color: #e5ac2e;
  color: #0d1117;
}
button.cat-order-arrow:disabled { background: var(--warn); color: #0d1117; }


/* while a table is being measured nothing may wrap, so each column reports
   the width its longest line actually needs */
table.history-table.measuring th,
table.history-table.measuring td { white-space: nowrap !important; overflow: visible !important; }
table.history-table.measuring input,
table.history-table.measuring select { min-width: 0; }

/* ---- column shading ----------------------------------------------------
   The service tables carry six or seven kinds of information side by side.
   A faint wash per column, and a different text tone, lets the eye find the
   right band without reading every header. Kept very low contrast so rows
   still read as rows. ---------------------------------------------- */
#catalog-content table.history-table td:nth-child(3),
#unlocks-content table.history-table td:nth-child(3) {
  background: rgba(139,148,158,0.045);
}
#catalog-content table.history-table td:nth-child(4),
#unlocks-content table.history-table td:nth-child(4) {
  background: rgba(139,148,158,0.015);
}
/* category - the same blue used for links and accents */
#catalog-content table.history-table td:nth-child(5),
#unlocks-content table.history-table td:nth-child(5) {
  background: rgba(59,130,246,0.05);
}

/* gsm delivery - amber, matching how waiting time is flagged elsewhere */
#unlocks-content table.history-table td:nth-child(6) {
  background: rgba(210,153,34,0.05);
  color: #e8c05c;
}
/* headings pick up the same tint so the bands line up top to bottom */
#catalog-content table.history-table th:nth-child(5),
#unlocks-content table.history-table th:nth-child(5) { color: #a8c7f0; }

#unlocks-content table.history-table th:nth-child(6) { color: #e8c05c; }

/* ---- homepage ----------------------------------------------------------
   Mobile first: everything is a single column by default and only splits
   into two at 860px, so a phone gets pitch, then the form, then the detail
   without any horizontal scrolling. -------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
  padding: 8px 0 4px;
}
.hero-copy h1 {
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.4px;
}
.hero-sub {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.hero-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.hero-form .card { max-width: none !important; margin: 0 !important; }

.promo-section { margin: 28px 0 0; }
.promo-section h2 { text-align: center; margin: 0 0 6px; font-size: 22px; }
.promo-lead { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 16px; }
/* Fixed column counts rather than auto-fit: six services must read as
   3 rows of 2 or 2 rows of 3, never 4 on one line with 2 stranded below. */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 900px) {
  .promo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .promo-grid { grid-template-columns: 1fr; }
}
.promo-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promo-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .promo-grid.two, .promo-grid.three { grid-template-columns: 1fr; }
}

/* the tier cards are links - they should feel like it */
a.promo-card.promo-pick {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease, transform 0.12s ease;
}
a.promo-card.promo-pick:hover { background: var(--card-2); transform: translateY(-1px); }
.promo-pick-cta { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; }
.promo-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}
.promo-card h3 { margin: 8px 0 6px; font-size: 15px; }
.promo-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
/* Drawn icons rather than emoji: one weight, one colour, distinct shapes. */
.promo-icon { line-height: 0; margin-bottom: 2px; }
.promo-icon svg {
  width: 34px;
  height: 34px;
  display: block;
  color: var(--accent);
}
.promo-tick {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -2px;
  margin-right: 4px;
}
.promo-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  margin-top: 10px;
}
.hero-pills .promo-badge { margin-top: 0; }
/* named promo-step, not step - .step is already the top-up +/- button and
   the shared name was squashing these into little squares */
.promo-card.promo-step { text-align: center; }
.promo-card.promo-step .promo-step-n {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #7fb2ff;
  margin-bottom: 2px;
}

@media (min-width: 860px) {
  .hero {
    grid-template-columns: 1.1fr 420px;
    gap: 32px;
    padding: 16px 0 8px;
  }
  .hero-copy h1 { font-size: 40px; }
  main { max-width: 1080px; margin: 0 auto; }
}
@media (max-width: 520px) {
  .hero-copy h1 { font-size: 26px; }
  .hero-sub { font-size: 15px; }
  .promo-section h2 { font-size: 19px; }
}

/* ---- cost and pricing cells -------------------------------------------
   Cost stands alone so it can be read down the column, and each tier shows
   its own margin directly above the box you type in. ------------------ */
.cost-cell { white-space: nowrap; vertical-align: middle; }
.cost-label { display: block; font-size: 11px; color: var(--muted); }
.cost-value { display: block; font-size: 15px; font-weight: 700; color: #c9d4e4; }

.price-pair { display: flex; gap: 10px; }
.price-box { flex: 1; min-width: 96px; }
.price-tier {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.2px;
}
.profit-line {
  font-size: 13px;
  font-weight: 700;
  margin: 1px 0 3px;
  white-space: nowrap;
}
.profit-good { color: #6ee787; }
.profit-bad { color: #ff8b84; }
.profit-unset { color: #e8c05c; font-weight: 600; }
.price-box input { margin: 0 !important; font-size: 14px; }

/* column tints shift by one now that Cost has its own column */
#catalog-content table.history-table td:nth-child(6),
#unlocks-content table.history-table td:nth-child(7) {
  background: rgba(139,148,158,0.05);
}
#catalog-content table.history-table td:nth-child(7),
#unlocks-content table.history-table td:nth-child(8) {
  background: rgba(63,185,80,0.055);
}
#catalog-content table.history-table th:nth-child(7),
#unlocks-content table.history-table th:nth-child(8) { color: #9ae6a8; }

/* ---- customer status at a glance --------------------------------------
   A wash across the whole row, in the same colour language as the badges,
   so you can see the shape of the list without reading the status column.
   Kept faint - these rows still have to be readable. ------------------ */
.status-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}
.status-filter-row select { width: auto; min-width: 190px; margin: 0; }
.status-filter-row label { margin: 0; font-size: 13px; }

tr.cust-pending td { background: rgba(210,153,34,0.09); }
tr.cust-rejected td { background: rgba(248,81,73,0.10); }
tr.cust-suspended td { background: rgba(210,153,34,0.06); }
tr.cust-archived td { background: rgba(139,148,158,0.10); color: var(--muted); }
tr.cust-archived td a { color: var(--muted); }
tr.cust-pending:hover td { background: rgba(210,153,34,0.15); }
tr.cust-rejected:hover td { background: rgba(248,81,73,0.16); }
tr.cust-suspended:hover td { background: rgba(210,153,34,0.11); }
tr.cust-archived:hover td { background: rgba(139,148,158,0.16); }

/* the status a row already holds is stated, not offered as a button */
.status-now {
  display: inline-block;
  font-size: 11px;
  color: var(--muted);
  margin-left: 6px;
}

/* ---- keyword filter chips --------------------------------------------- */
.facet-box {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
  padding: 8px 12px;
  margin: 0 0 12px;
}
.facet-box > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  list-style: none;
}
.facet-box > summary::-webkit-details-marker { display: none; }
.facet-box > summary::before { content: "\25B8 "; color: var(--muted); }
.facet-box[open] > summary::before { content: "\25BE "; }
.facet-count {
  background: rgba(59,130,246,0.2);
  border: 1px solid rgba(59,130,246,0.5);
  color: #cfe0fb;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
}
.facet-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 0 0;
  border-top: 1px solid var(--line-soft);
  margin-top: 8px;
}
.facet-label {
  flex: 0 0 96px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
button.facet-chip {
  width: auto;
  margin: 0;
  padding: 3px 9px;
  font-size: 12px;
  border-radius: 999px;
  background: rgba(139,148,158,0.12);
  border: 1px solid var(--line);
  color: var(--ink);
}
button.facet-chip:hover { background: rgba(139,148,158,0.24); }
button.facet-chip.on {
  background: rgba(59,130,246,0.22);
  border-color: rgba(59,130,246,0.65);
  color: #dbe8fd;
}
.facet-n { color: var(--muted); font-size: 11px; margin-left: 3px; }
button.facet-chip.on .facet-n { color: #cfe0fb; }
button.facet-clear {
  width: auto;
  margin: 10px 0 2px;
  padding: 4px 12px;
  font-size: 12px;
  background: rgba(210,153,34,0.15);
  border: 1px solid rgba(210,153,34,0.5);
  color: #e8c05c;
}

/* ---- action colour language -------------------------------------------
   The colour tells you what a button does before you read it:
     blue   = save or commit something you have typed
     green  = turn on / approve / restore
     red    = turn off / restrict
     amber  = reversible housekeeping - hide, archive, view and layout
     grey   = neutral - rename, cancel, navigate
   Tinted rather than filled, so a dense table does not turn into a
   fairground. Kept last in the file and qualified with "button" so these
   beat the base button styles above. -------------------------------- */

/* blue - saves */
button.svc-save-btn, button.unlock-save-btn,
button.cat-saveall-btn, button.unlock-saveall-btn {
  background: rgba(59,130,246,0.16);
  border: 1px solid rgba(59,130,246,0.55);
  color: #cfe0fb;
}
button.svc-save-btn:hover, button.unlock-save-btn:hover,
button.cat-saveall-btn:hover, button.unlock-saveall-btn:hover {
  background: rgba(59,130,246,0.3);
}

/* green - switching on, approving, restoring */
button.cat-bulk-btn[data-on="1"], button.unlock-group-onoff[data-on="1"],
button.status-btn[data-status="approved"] {
  background: rgba(63,185,80,0.15);
  border: 1px solid rgba(63,185,80,0.5);
  color: #9ae6a8;
}
button.cat-bulk-btn[data-on="1"]:hover, button.unlock-group-onoff[data-on="1"]:hover,
button.status-btn[data-status="approved"]:hover { background: rgba(63,185,80,0.28); }

/* red - switching off, restricting */
button.cat-bulk-btn[data-on="0"], button.unlock-group-onoff[data-on="0"],
button.status-btn[data-status="rejected"] {
  background: rgba(248,81,73,0.14);
  border: 1px solid rgba(248,81,73,0.45);
  color: #f8a49f;
}
button.cat-bulk-btn[data-on="0"]:hover, button.unlock-group-onoff[data-on="0"]:hover,
button.status-btn[data-status="rejected"]:hover { background: rgba(248,81,73,0.26); }

/* amber - reversible housekeeping and view controls */
button.svc-hide-btn, button.unlock-hide-btn,
button.cat-hide-btn, button.unlock-group-hide,
button.status-btn[data-status="archived"],
button#archived-switch, button#cat-collapse-all, button#unlock-collapse-all,
.col-reset-row button {
  background: rgba(210,153,34,0.15);
  border: 1px solid rgba(210,153,34,0.5);
  color: #e8c05c;
}
button.svc-hide-btn:hover, button.unlock-hide-btn:hover,
button.cat-hide-btn:hover, button.unlock-group-hide:hover,
button.status-btn[data-status="archived"]:hover,
button#archived-switch:hover, button#cat-collapse-all:hover, button#unlock-collapse-all:hover,
.col-reset-row button:hover { background: rgba(210,153,34,0.28); }


/* collapse-all gets its own colour - it changes what you can see, not what
   the catalog is, so it sits outside the amber housekeeping family */
button#cat-collapse-all, button#unlock-collapse-all {
  background: rgba(167,139,250,0.16);
  border: 1px solid rgba(167,139,250,0.55);
  color: #cdbcfd;
}
button#cat-collapse-all:hover, button#unlock-collapse-all:hover {
  background: rgba(167,139,250,0.3);
}

/* a ticked service is live on the storefront, so the box turns green -
   accent-color paints the fill and the tick together */
input.svc-enabled-toggle, input.unlock-toggle {
  accent-color: var(--good);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
input.svc-enabled-toggle:disabled, input.unlock-toggle:disabled { cursor: not-allowed; }


/* an arrow with nowhere to go reads as scenery, not a control - and a
   single-service category ends up with both of them greyed */
button.svc-move:disabled, button.unlock-move-btn:disabled,
button.cat-order-arrow:disabled, button.unlock-group-move:disabled {
  background: transparent !important;
  border-color: var(--line-soft) !important;
  color: rgba(139,148,158,0.35) !important;
  cursor: default;
  opacity: 1;
}
button.svc-move:disabled:hover, button.unlock-move-btn:disabled:hover,
button.cat-order-arrow:disabled:hover, button.unlock-group-move:disabled:hover {
  background: transparent !important;
}


/* ---- admin tabs --------------------------------------------------------
   Five destinations, each with its own colour so the eye learns the shape of
   the nav rather than reading it every time. The one you are on is filled
   in its own colour; the rest are tinted outlines of theirs. ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; }
a.tab {
  flex: 1;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none !important;
  padding: 14px 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
/* per-tab colour, in nav order: sickw, gsm, customers, transactions, logins */
a.tab:nth-child(1) { color: #7fb2ff; border-color: rgba(59,130,246,0.45); }
a.tab:nth-child(2) { color: #cdbcfd; border-color: rgba(167,139,250,0.45); }
a.tab:nth-child(3) { color: #9ae6a8; border-color: rgba(63,185,80,0.45); }
a.tab:nth-child(4) { color: #e8c05c; border-color: rgba(210,153,34,0.45); }
a.tab:nth-child(5) { color: #f8a49f; border-color: rgba(248,81,73,0.45); }
a.tab:nth-child(1):hover { background: rgba(59,130,246,0.14); }
a.tab:nth-child(2):hover { background: rgba(167,139,250,0.14); }
a.tab:nth-child(3):hover { background: rgba(63,185,80,0.14); }
a.tab:nth-child(4):hover { background: rgba(210,153,34,0.14); }
a.tab:nth-child(5):hover { background: rgba(248,81,73,0.14); }
/* the page you are on: filled, brighter, and lifted off the row */
a.tab.active {
  color: #0d1117 !important;
  border-width: 1px;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06) inset;
}
a.tab:nth-child(1).active { background: #3b82f6; border-color: #3b82f6; }
a.tab:nth-child(2).active { background: #a78bfa; border-color: #a78bfa; }
a.tab:nth-child(3).active { background: #3fb950; border-color: #3fb950; }
a.tab:nth-child(4).active { background: #d29922; border-color: #d29922; }
a.tab:nth-child(5).active { background: #f85149; border-color: #f85149; }
a.tab.active:hover { filter: brightness(1.08); }

/* every collapse caret in the admin shares the purple of Collapse all */
button.cat-collapse-btn, button.unlock-collapse-btn {
  color: #a78bfa !important;
  font-size: 15px !important;
}
button.cat-collapse-btn:hover, button.unlock-collapse-btn:hover { color: #c4b1fd !important; }
.facet-box > summary::before { color: #a78bfa; }

/* the sizing controls sit between the category heading and its table, so
   they need air above as well as below */
.col-reset-row { margin: 14px 0 8px !important; }

/* the rename box and category buttons, on their own line under the heading */
.cat-controls-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  padding-left: 30px;
  font-weight: 400;
}

/* Every Word On A Button Starts With A Capital. Done in CSS so it holds for
   labels built in JS too. Excluded: anything whose text is real data rather
   than a label - service names, brand chips, counts - because capitalize
   would turn "iCloud" into "ICloud". */
button, a.tab, a.ghost, .topup-go, .step {
  text-transform: capitalize;
}
button.facet-chip, button.quick, .quick-row button,
#catalog-summary button, .catalog-summary-pill,
button.svc-move, button.unlock-move-btn, button.cat-order-arrow,
button.unlock-group-move, button.cat-collapse-btn, button.unlock-collapse-btn,
.col-grip, button.step {
  text-transform: none;
}

/* the two sizing controls: same family, one step apart, so they read as a
   pair without being mistaken for each other */
/* targeted by class, not position - a positional rule caught Disable All
   whenever a collapsed category had no sizing buttons to count back from */
button.col-fit {
  background: rgba(167,139,250,0.14);
  border: 1px solid rgba(167,139,250,0.45);
  color: #cdbcfd;
}
button.col-fit:hover { background: rgba(167,139,250,0.26); }
button.col-maximize {
  background: rgba(124,58,237,0.28) !important;
  border: 1px solid rgba(139,92,246,0.7) !important;
  color: #e2d9ff !important;
}
button.col-maximize:hover { background: rgba(124,58,237,0.42) !important; }

/* grey - renaming changes a label and nothing else */
button.category-rename-btn, button.cat-inline-rename-btn, button.unlock-group-rename-btn {
  background: rgba(139,148,158,0.14);
  border: 1px solid var(--line);
  color: var(--ink);
}
button.category-rename-btn:hover, button.cat-inline-rename-btn:hover,
button.unlock-group-rename-btn:hover { background: rgba(139,148,158,0.24); }


/* ---- customers: sortable headings and the status dropdown ---------------- */
/* The arrow lives in a pseudo-element so the saved column widths, which are
   keyed on the heading text, survive a change of sort. */
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sorted-asc::after { content: " \25B2"; font-size: 9px; opacity: 0.85; }
th.sorted-desc::after { content: " \25BC"; font-size: 9px; opacity: 0.85; }

select.status-select {
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 6px;
  background: var(--card-2);
  border: 1px solid var(--line);
}
select.status-is-approved { border-color: rgba(63, 185, 80, 0.55); color: var(--good); }
select.status-is-rejected { border-color: rgba(248, 81, 73, 0.55); color: var(--bad); }
select.status-is-suspended { border-color: rgba(210, 153, 34, 0.55); color: var(--warn); }
select.status-is-archived { border-color: rgba(139, 148, 158, 0.45); color: var(--muted); }

.status-filter-row select { max-width: 200px; }


/* ---- public price list and policy pages ---------------------------------- */
.price-list h2 {
  margin: 26px 0 4px;
  font-size: 17px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.price-list h2:first-child { margin-top: 4px; }
.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 10px;
  font-size: 14px;
}
.price-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 10px 8px;
}
.price-table th:last-child { text-align: right; }
.price-table td {
  padding: 10px;
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
}
.price-table td:nth-child(2) { color: var(--muted); font-size: 13px; }
.price-table td:nth-child(3) { color: var(--muted); font-size: 13px; white-space: nowrap; }
.price-table .price-cell {
  text-align: right;
  white-space: nowrap;
  font-weight: 700;
  color: var(--good);
}
.price-table tbody tr:hover { background: rgba(255,255,255,0.02); }

.doc-page h2 { margin: 24px 0 8px; font-size: 17px; }
.doc-page h3 { margin: 18px 0 6px; font-size: 15px; }
.doc-page p, .doc-page li { line-height: 1.65; font-size: 14px; }
.doc-page ul { padding-left: 20px; }
.doc-page .updated { color: var(--muted); font-size: 13px; }


/* ---- one page per service ------------------------------------------------ */
.crumbs {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 10px;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--ink); }

.service-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  margin: 14px 0 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card-2);
}
.service-price {
  font-size: 34px;
  font-weight: 700;
  color: var(--good);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.service-price-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.service-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  flex: 1;
  min-width: 220px;
}
.service-facts div { display: flex; flex-direction: column; gap: 2px; }
.service-facts strong {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.service-facts span { font-size: 13px; color: var(--ink); }

a.cta-link {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
a.cta-link:hover { background: var(--accent-hover); }
a.cta-link.secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
}
a.cta-link.secondary:hover { border-color: var(--accent); }

a.service-link { color: var(--ink); text-decoration: none; }
a.service-link:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 620px) {
  .service-price { font-size: 28px; }
  .price-table td:nth-child(2) { display: none; }
  .price-table th:nth-child(2) { display: none; }
}


/* Questions carry the accent colour so a long page of them is scannable;
   answers stay in the reading colour. */
.faq-page h2 { color: var(--accent); }
.faq-page h2:first-of-type { margin-top: 4px; }

/* ---- admin mobile view (opt-in via the header toggle) --------------------
   Everything is scoped to body.mobile-admin, so the desktop layout is
   completely untouched while the toggle is off. */
body.mobile-admin main.wide { padding: 8px; max-width: 100%; }
body.mobile-admin .card { padding: 12px 10px; }
body.mobile-admin h2 { font-size: 17px; }
body.mobile-admin .tabs { flex-wrap: wrap; gap: 6px; }
body.mobile-admin .tabs .tab { padding: 8px 12px; font-size: 14px; }
body.mobile-admin .header-row { flex-wrap: wrap; gap: 8px; }
body.mobile-admin .header-actions { flex-wrap: wrap; gap: 6px; }
body.mobile-admin input,
body.mobile-admin select,
body.mobile-admin textarea { min-height: 40px; font-size: 16px; }
body.mobile-admin button { min-height: 40px; font-size: 15px; }
body.mobile-admin button.ghost { min-height: 34px; font-size: 13px; }
body.mobile-admin .table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
body.mobile-admin .history-table { font-size: 12.5px; }
body.mobile-admin .history-table th,
body.mobile-admin .history-table td { padding: 9px 7px; }
/* The first column (who / when) stays pinned while the rest scrolls, so a
   row never loses its identity mid-edit on a phone. */
body.mobile-admin .history-table th:first-child,
body.mobile-admin .history-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--card, #161b22);
  z-index: 2;
}
body.mobile-admin .history-table thead th:first-child { z-index: 3; }
body.mobile-admin label { font-size: 13px; }

/* iPhone Safari zooms into any form field smaller than 16px and then stays
   zoomed after the keyboard closes. Keeping controls at 16px on phones
   stops the zoom from ever happening. */
@media (max-width: 767px) {
  input, select, textarea { font-size: 16px; }
}

/* Spinner + wait note shown while a check is running. */
.checking-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.checking-note .spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: #3b82f6;
  animation: imeispin 0.8s linear infinite;
  flex: none;
}
@keyframes imeispin { to { transform: rotate(360deg); } }