/* build 2.2.0 */
/* ============================================================
   Customer-facing styles.

   Every colour here comes from theme.css, which the admin panel
   regenerates from the one brand colour the owner picks. Change
   that colour and the gradients, tints, chips and focus rings all
   move with it.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --surface: #FFFFFF;
  --surface-2: #FAFBFD;
  --line: #E6EBF2;
  --line-soft: #EFF2F7;
  --text: #121A2B;
  --muted: #5C6880;
  --muted-2: #8A94A8;

  --success: #0A7A52;
  --success-bg: #E2F6EE;
  --warning: #8A5A00;
  --warning-bg: #FDF1D9;
  --danger: #B3261E;
  --danger-bg: #FCE8E6;
  --info: #1B4FCC;
  --info-bg: #E6EDFF;

  /* Fixed accents for the quick-action chips, so the grid stays
     colourful whatever the brand colour is. */
  --a1: #1B5BFF; --a1-bg: #E7EEFF;
  --a2: #0A8A5F; --a2-bg: #E2F6EE;
  --a3: #C2410C; --a3-bg: #FFEDE2;
  --a4: #BE2063; --a4-bg: #FDE8F0;
  --a5: #6D28D9; --a5-bg: #EFE9FD;
  --a6: #0E7490; --a6-bg: #E0F4F9;

  --shadow-sm: 0 1px 2px rgba(16,26,43,.04);
  --shadow: 0 1px 3px rgba(16,26,43,.05), 0 10px 28px -12px rgba(16,26,43,.14);
  --shadow-lg: 0 2px 6px rgba(16,26,43,.06), 0 24px 48px -20px rgba(16,26,43,.24);

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.022em;
  margin: 0 0 8px;
  line-height: 1.2;
}
h1 { font-size: 25px; }
h2 { font-size: 19px; }
h3 { font-size: 15.5px; }
h4 { font-size: 14px; }
p { margin: 0 0 14px; }

a { color: var(--brand-600); text-decoration: none; font-weight: 600; }
a:hover { color: var(--brand-700); text-decoration: underline; }

img { max-width: 100%; height: auto; }
code, pre, .mono { font-family: var(--mono); }

/* Money and counts line up in columns. */
.num, .stat-value, .summary-total, table.data td.num { font-variant-numeric: tabular-nums; }

.icon { flex-shrink: 0; vertical-align: -3px; }

::selection { background: var(--brand-100); color: var(--brand-700); }

:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 2px; border-radius: 6px; }

/* ----------------------------------------------------------- layout */

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 780px; }
.section { padding: 20px 0 36px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.col-main { flex: 999 1 560px; min-width: 0; }
.col-side { flex: 1 1 330px; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 13px; }
.stack-sm { display: flex; flex-direction: column; gap: 10px; }
.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.between { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grow { flex-grow: 1; min-width: 0; }
.right { margin-left: auto; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------------------ header */

.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar a { color: var(--muted); font-weight: 600; }
.topbar a:hover { color: var(--text); text-decoration: none; }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 13px 0; }

.brand { display: flex; align-items: center; gap: 11px; color: var(--text) !important; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--grad-from), var(--grad-to));
  color: var(--on-grad); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px var(--brand-300);
}
.brand-mark img { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; }

.mainnav { display: flex; flex-wrap: wrap; gap: 4px; font-size: 14.5px; flex-grow: 1; }
.mainnav a { padding: 8px 13px; border-radius: 10px; }
.mainnav a:hover { background: var(--surface-2); }
.mainnav a.is-active { background: var(--brand-50); color: var(--brand-700); }

.wallet-chip {
  display: flex; align-items: baseline; gap: 9px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: 999px; padding: 8px 16px;
}
.wallet-chip span:first-child { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-600); font-weight: 700; }
.wallet-chip strong { font-size: 15px; color: var(--brand-700); font-weight: 800; font-variant-numeric: tabular-nums; }

.nav-toggle { display: none; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text); padding: 9px 11px; cursor: pointer; }

/* ------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 13px; }
.card-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-head h2, .card-head h3 { margin: 0; }
.card-dark { background: var(--ink); color: #EEF1F6; border-color: var(--ink); }
.card-dark h2, .card-dark h3 { color: #FFFFFF; }
.card-soft { background: var(--brand-50); border-color: var(--brand-100); }

/* A one-line offer: chip, two lines of text, a chevron. */
.promo {
  display: flex; align-items: center; gap: 12px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  border-radius: var(--radius); padding: 12px 14px; color: var(--text);
}
.promo:hover { text-decoration: none; color: var(--text); border-color: var(--brand-300); }
.promo .tile-chip { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; }
.promo-text { flex-grow: 1; min-width: 0; }
.promo-text strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.promo-text span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.promo svg { flex-shrink: 0; color: var(--brand); }
.card-flush { padding: 0; overflow: hidden; }
.card-flush .card-head { padding: 13px 16px; margin: 0; border-bottom: 1px solid var(--line-soft); }
.eyebrow { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0 0 9px; }

/* ------------------------------------------------------------ hero */

.hero {
  background: linear-gradient(135deg, var(--grad-from), var(--grad-to));
  color: var(--on-grad);
  border-radius: var(--radius);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero::after {
  content: ''; position: absolute; right: -70px; top: -90px;
  width: 280px; height: 280px; border-radius: 50%;
  background: rgba(255,255,255,.10);
}
.hero::before {
  content: ''; position: absolute; right: 40px; bottom: -120px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(255,255,255,.07);
}
.hero > * { position: relative; z-index: 1; }
.hero-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; opacity: .8; font-weight: 700; margin: 0 0 3px; }
.hero-figure { font-size: 29px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.hero-figure small { font-size: 15px; font-weight: 700; opacity: .72; margin-right: 4px; }
.hero-sub { font-size: 13.5px; opacity: .8; margin: 6px 0 0; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 20px; margin: 12px 0 0; }
.hero-meta div span { display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; opacity: .72; font-weight: 700; }
.hero-meta div strong { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hero-actions .btn { flex: 1 1 180px; }

/* The thin status strip above the hero. */
.ribbon {
  display: flex; align-items: center; gap: 11px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  color: var(--brand-700); border-radius: var(--radius);
  padding: 9px 13px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px;
}
.ribbon .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--a2); margin-left: auto; box-shadow: 0 0 0 4px var(--a2-bg); }

/* --------------------------------------------------------- tiles */

.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.tile {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: var(--text);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  min-height: 92px;
}
.tile:hover { text-decoration: none; color: var(--text); transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-300); }
.tile-chip {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--a1-bg); color: var(--a1); flex-shrink: 0;
}
.tile-title { display: block; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.tile-sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tile-wide { flex-direction: row; align-items: center; gap: 16px; padding: 22px; }
.tile-wide .tile-chip { width: 54px; height: 54px; border-radius: 16px; }
.tile-flag {
  position: absolute; top: 10px; right: 10px;
  background: var(--warning-bg); color: var(--warning);
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
}
.tile-featured { position: relative; border-color: var(--brand-300); box-shadow: 0 0 0 3px var(--brand-50); }

.chip-1 { background: var(--a1-bg); color: var(--a1); }
.chip-2 { background: var(--a2-bg); color: var(--a2); }
.chip-3 { background: var(--a3-bg); color: var(--a3); }
.chip-4 { background: var(--a4-bg); color: var(--a4); }
.chip-5 { background: var(--a5-bg); color: var(--a5); }
.chip-6 { background: var(--a6-bg); color: var(--a6); }
.chip-brand { background: var(--brand-50); color: var(--brand-600); }

/* -------------------------------------------------------------- stats */

.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; box-shadow: var(--shadow-sm); }
.stat-label { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 700; }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.stat-sub { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

/* ------------------------------------------------------- activity list */

.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.feed-row:last-child { border-bottom: 0; }
.feed-icon { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feed-body { flex-grow: 1; min-width: 0; }
.feed-title { display: block; font-weight: 700; font-size: 14.5px; }
.feed-meta { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.feed-amount { font-weight: 800; font-size: 14.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------ tables */

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-weight: 700; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 16px; background: var(--surface-2); white-space: nowrap; }
table.data td { padding: 13px 16px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
table.data tr:hover td { background: var(--surface-2); }
table.data .mono { font-size: 13px; }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty .icon { color: var(--muted-2); margin-bottom: 10px; }

/* ------------------------------------------------------------ badges */

.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; letter-spacing: -0.005em; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-muted { background: #EEF1F6; color: #4A5468; }

/* A label-and-value row, used on both sides of the site. */
.kv {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); }
.kv strong { text-align: right; word-break: break-word; }

/* A price box, which a reseller storefront needs as much as admin. */
/* Wide enough for a provider's real name, not just its first word. */
.provider-pick { min-width: 104px; max-width: 150px; }

.price-input { width: 90px; min-width: 80px; font-family: var(--mono); font-size: 13px; padding: 8px 10px; min-height: 38px; }

/* The browser's little up/down arrows sit on top of the figure and cut
   it off, and nobody prices a bundle by clicking an arrow. */
.price-input { -moz-appearance: textfield; appearance: textfield; }
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The ticket thread, for shops that still run the older support queue. */
.thread { display: flex; flex-direction: column; gap: 10px; }
.bubble { border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.bubble.is-staff { background: var(--brand-50); border-color: var(--brand-100); }
.bubble .meta { font-size: 12px; color: var(--muted); margin-bottom: 5px; }

/* A filter bar, used on the customer side as well as in admin. */
.toolbar { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 14px; }
.toolbar form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar input, .toolbar select { width: auto; min-width: 170px; }
.filters { display: flex; flex-wrap: wrap; gap: 7px; }

.pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; color: var(--text); font-weight: 600; }
.pill.is-active { background: var(--brand-600); color: #FFFFFF; border-color: var(--brand-600); }
.pill:hover { text-decoration: none; border-color: var(--brand-300); }
.pill.is-active:hover { color: #FFFFFF; }

/* ------------------------------------------------------------- forms */

label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; font-weight: 400; }
.hint-key { font-family: var(--mono); font-size: 11px; color: var(--muted-2); margin-top: 5px; display: block; }

input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=url], input[type=search], input[type=date], input[type=datetime-local], input[type=color],
select, textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  min-height: 46px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 112px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}
input[type=color] { padding: 4px; height: 46px; cursor: pointer; }
input.mono, textarea.mono { font-family: var(--mono); font-size: 13px; }
input[readonly], input:disabled, textarea[readonly] { background: var(--surface-2); color: var(--muted); }
input::placeholder, textarea::placeholder { color: var(--muted-2); }
.field { margin-bottom: 17px; }
.field-error { display: block; color: var(--danger); font-size: 12.5px; margin-top: 6px; font-weight: 600; }
.check { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; font-weight: 500; margin-bottom: 11px; }
.check input { width: 19px; height: 19px; min-height: 19px; margin-top: 2px; accent-color: var(--brand); }
.input-group { display: flex; gap: 8px; align-items: center; }
.input-group .prefix { font-family: var(--mono); background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--muted); white-space: nowrap; }

/* ----------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; line-height: 1;
  padding: 14px 20px; min-height: 48px; border-radius: var(--radius-sm);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  background: var(--brand); color: var(--on-brand);
  transition: background .13s ease, transform .1s ease, box-shadow .13s ease;
  box-shadow: 0 2px 8px -3px var(--brand-300);
}
.btn:hover { background: var(--brand-600); color: var(--on-brand); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: var(--brand-300); }
.btn-dark { background: var(--ink); color: #FFFFFF; box-shadow: none; }
.btn-dark:hover { background: #000000; color: #FFFFFF; }
.btn-danger { background: var(--surface); color: var(--danger); border-color: #F3D3D0; box-shadow: none; }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn-sm { padding: 9px 14px; min-height: 38px; font-size: 13px; border-radius: 9px; }
.btn-lg { padding: 17px 26px; min-height: 56px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon { padding: 9px; min-height: 38px; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 9px; }
.btn-icon:hover { color: var(--text); background: var(--surface-2); }
.btn-icon-danger:hover { color: var(--danger); background: var(--danger-bg); }

/* Buttons sitting on the gradient hero. Defined after .btn so they win. */
.hero .btn-on-hero, .btn-on-hero {
  background: rgba(255,255,255,.18); color: var(--on-grad);
  border-color: rgba(255,255,255,.34); box-shadow: none;
}
.hero .btn-on-hero:hover, .btn-on-hero:hover { background: rgba(255,255,255,.3); color: var(--on-grad); }
.hero .btn-on-hero-solid, .btn-on-hero-solid {
  background: #FFFFFF; color: var(--brand-700); border-color: #FFFFFF; box-shadow: 0 4px 14px -6px rgba(0,0,0,.4);
}
.hero .btn-on-hero-solid:hover, .btn-on-hero-solid:hover { background: #EEF2FB; color: var(--brand-700); }

/* A button in the top bar must not inherit the nav link colour. */
.topbar .btn { color: var(--on-brand); }
.topbar .btn:hover { color: var(--on-brand); text-decoration: none; }
.topbar .btn-ghost, .topbar .btn-ghost:hover { color: var(--text); }

/* ------------------------------------------------------------ alerts */

.alert { display: flex; gap: 12px; align-items: flex-start; border-radius: var(--radius); padding: 14px 16px; font-size: 14px; margin-bottom: 15px; border: 1px solid transparent; font-weight: 500; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: #C9EBDD; }
.alert-error, .alert-danger { background: var(--danger-bg); color: var(--danger); border-color: #F6D5D2; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: #F2DFB4; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: #CFDCFB; }

/* ------------------------------------------------- the buy flow */

.choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choice {
  display: flex; flex-direction: column; gap: 7px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 15px 16px; cursor: pointer; min-height: 48px; width: 100%;
  font-family: inherit; font-size: 15px; color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease, transform .1s ease;
}
.choice:hover { border-color: var(--brand-300); text-decoration: none; color: var(--text); transform: translateY(-1px); }
.choice.is-active { border: 2px solid var(--brand); padding: 14px 15px; box-shadow: 0 0 0 4px var(--brand-50); background: var(--brand-50); }
.choice.is-off { opacity: .5; cursor: not-allowed; }
.choice.is-off:hover { transform: none; border-color: var(--line); }
.choice-title { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }
.choice-price { font-size: 15px; font-weight: 800; color: var(--brand-600); font-variant-numeric: tabular-nums; }
.choice-note { font-size: 12px; color: var(--muted); }
.net-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.summary-line span:first-child { opacity: .78; }
.summary-total { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.divider { border-top: 1px solid rgba(255,255,255,.16); margin: 18px 0; }
.card:not(.card-dark):not(.hero) .divider { border-color: var(--line-soft); }

/* -------------------------------------------------------- pagination */

.pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 16px 0; }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13.5px; color: var(--text); font-weight: 600; }
.pagination a:hover { background: var(--brand-50); border-color: var(--brand-300); text-decoration: none; }
.pagination .is-current { background: var(--brand-600); color: #FFFFFF; border-color: var(--brand-600); }
.pagination .is-disabled { opacity: .4; }
.page-meta { font-size: 13px; color: var(--muted); margin-left: auto; font-weight: 500; }

/* ------------------------------------------------------------ footer */

.footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 48px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 26px 0; font-size: 13.5px; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }

/* --------------------------------------------------------- utilities */

.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.tiny { font-size: 12px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 8px; } .mb-1 { margin-bottom: 8px; }
.mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; }
.mt-3 { margin-top: 24px; } .mb-3 { margin-bottom: 24px; }

.code-box { background: var(--ink); color: #DDE3EC; border-radius: var(--radius-sm); padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; overflow-x: auto; white-space: pre; }
.copy-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 14px; }
.copy-row code { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }

.switch { width: 46px; height: 26px; border-radius: 999px; background: #CDD5E1; display: inline-flex; align-items: center; padding: 3px; flex-shrink: 0; transition: background .15s; }
.switch i { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; display: block; transition: transform .15s; box-shadow: 0 1px 3px rgba(16,26,43,.2); }
input:checked + .switch { background: var(--brand); }
input:checked + .switch i { transform: translateX(20px); }
.switch-wrap { display: flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; }
.switch-wrap input { position: absolute; opacity: 0; width: 0; height: 0; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 12px; top: 12px; z-index: 50; background: #FFFFFF; padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow); }

/* ---------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles, .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  h1 { font-size: 26px; }
  .hero-figure { font-size: 34px; }
}

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .tiles-2 { grid-template-columns: minmax(0, 1fr); }
  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mainnav { display: none; width: 100%; }
  .mainnav.is-open { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
  .nav-toggle { display: inline-flex; order: 3; }
  .topbar-inner { gap: 12px; }
  .card { padding: 18px; }
  .hero { padding: 22px 20px; }
  .hero-figure { font-size: 31px; }
  .hero-actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   PHONES
   Most customers never see a desktop. Everything below reshapes
   the same pages around one thumb: a single header row, a fixed
   bar of the four things people actually do, and no table that
   has to be scrolled sideways.
   ============================================================ */

.phone-only { display: none; }
.tabbar { display: none; }

@media (max-width: 760px) {

  /* ------------------------------------------------- chrome */

  .desk-only { display: none !important; }
  .phone-only { display: block; }

  .topbar {
    position: sticky; top: 0; z-index: 30;
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }
  .topbar-inner { flex-wrap: nowrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .brand { min-width: 0; }
  .brand span:last-child {
    font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-right { margin-left: auto; gap: 8px; }

  .wallet-chip { padding: 7px 11px; font-size: 12px; text-decoration: none; }
  .wallet-chip span { display: none; }
  .wallet-chip strong { font-size: 13px; }

  .nav-toggle { display: inline-flex; order: 9; flex: 0 0 auto; }

  .mainnav.is-open {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 8px 16px 14px; gap: 0;
  }
  .mainnav.is-open a, .mainnav.is-open .navform button {
    display: block; width: 100%; text-align: left;
    padding: 13px 4px; border-bottom: 1px solid var(--line-soft);
    font-size: 15px; background: none; border-left: 0; border-right: 0; border-top: 0;
    color: var(--text); cursor: pointer;
  }
  .mainnav .navform { margin: 0; }

  /* The bar that is always within reach. */
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 2px 8px; min-height: 58px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    color: var(--muted-2); text-decoration: none;
    background: none; border: 0; cursor: pointer;
  }
  .tabbar a.is-active { color: var(--brand); }
  .tabbar a:active, .tabbar button:active { background: var(--brand-50); }

  body { padding-bottom: 74px; }
  .footer { margin-bottom: 8px; }

  /* --------------------------------------------- the content */

  .section { padding-top: 14px; padding-bottom: 18px; }
  .stack { gap: 11px; }
  .row { gap: 11px; }
  .card { padding: 13px 14px; border-radius: var(--radius); }
  .card + .card { margin-top: 11px; }
  .card-flush .card-head { padding: 11px 14px; }
  h1 { font-size: 21px; letter-spacing: -0.025em; }
  h3 { font-size: 15px; }

  /* Two across, and short enough to see several at once. */
  .tiles, .tiles-2, .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { flex-direction: row; align-items: center; gap: 11px; padding: 13px; min-height: 0; }
  .tile-chip { width: 38px; height: 38px; flex: 0 0 38px; }
  .tile-chip svg { width: 19px; height: 19px; }
  .tile-title { font-size: 13.5px; line-height: 1.25; }
  .tile-sub { display: none; }
  .tile-wide { grid-column: span 1; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 11px 12px; }
  .stat-value { font-size: 18px; }
  .stat-label { font-size: 10.5px; }
  .stat-sub { font-size: 11px; }

  .hero { padding: 14px 15px; border-radius: var(--radius); }
  .hero-figure { font-size: 26px; }
  .hero-meta { gap: 14px; margin-top: 10px; }
  .hero-meta div strong { font-size: 13px; }
  .hero-actions { gap: 7px; margin-top: 11px; }
  /* Three actions share the row rather than stacking three deep. */
  .hero-actions .btn { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; font-size: 13px; }

  /* The shortcut grid goes three across with the label under the
     icon, so every shortcut is on screen without scrolling. */
  .tiles-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tiles-quick .tile { flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 11px 7px; }
  .tiles-quick .tile-chip { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 11px; }
  .tiles-quick .tile-chip svg { width: 17px; height: 17px; }
  .tiles-quick .tile-title { font-size: 11.5px; line-height: 1.2; }

  .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .choice { padding: 13px; }

  .feed-row { gap: 10px; padding: 12px 0; align-items: flex-start; }
  .feed-icon { width: 34px; height: 34px; flex: 0 0 34px; }
  .feed-title { font-size: 13.5px; line-height: 1.3; }
  .feed-meta { font-size: 11.5px; }
  .feed-row .text-right { flex: 0 0 auto; text-align: right; }

  /* One line, and it steps aside rather than wrapping. */
  .ribbon { font-size: 12.5px; padding: 9px 13px; }
  .ribbon span:not(.dot) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .feed-amount { font-size: 13.5px; }

  /* A table on a phone becomes one block per row, so nothing is
     ever cut off the side of the screen. */
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data tr {
    border-top: 1px solid var(--line-soft); padding: 12px 0;
  }
  table.data tr:first-child { border-top: 0; }
  table.data td {
    border: 0; padding: 2px 0; display: flex; gap: 12px;
    align-items: baseline; justify-content: space-between;
    font-size: 13.5px; text-align: right;
  }
  table.data td::before {
    content: attr(data-label);
    color: var(--muted); font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    text-align: left; flex: 0 0 auto;
  }
  table.data td:empty { display: none; }
  table.data tr:hover td { background: none; }
  .table-scroll { overflow: visible; }

  .form-grid, .form-grid-3 { grid-template-columns: minmax(0, 1fr); }
  input, select, textarea { font-size: 16px; }  /* stops iOS zooming in */

  .btn { min-height: 46px; }
  .btn-sm { min-height: 38px; }
}

@media (max-width: 400px) {
  .tiles, .tiles-2, .tiles-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-figure { font-size: 25px; }
  .hero-actions .btn { font-size: 12.5px; }
  .tiles-quick .tile-title { font-size: 11px; }
  .tabbar a, .tabbar button { font-size: 10px; }
}

/* The pay bar only exists where the summary is out of sight. */
.paybar { display: none; }

@media (max-width: 760px) {
  .paybar {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 58px; z-index: 39;
    background: var(--surface); border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px -12px rgba(16,26,43,.3);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .paybar[hidden] { display: none; }
  .paybar-sum { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
  .paybar-what { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .paybar-total { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
  .paybar .btn { margin-left: auto; padding-left: 22px; padding-right: 22px; }

  /* Room for both bars on the buy page. */
  body:has(.paybar:not([hidden])) { padding-bottom: 136px; }
}

/* ============================================================
   The slip after a purchase.
   One screen, nothing else on it, gone in five seconds.
   ============================================================ */

.receipt-stage { width: 100%; max-width: 420px; margin: 0 auto; }

.receipt {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.receipt-top { padding: 30px 26px 24px; text-align: center; }

.receipt-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%;
  margin-bottom: 16px;
}
.receipt-mark.is-done    { background: var(--success-bg); color: var(--success); }
.receipt-mark.is-working { background: var(--warning-bg); color: var(--warning); }
.receipt-mark.is-failed  { background: var(--danger-bg);  color: var(--danger); }

.receipt-top h1 { font-size: 25px; letter-spacing: -0.03em; margin: 0 0 7px; }
.receipt-sub { font-size: 14.5px; color: var(--muted); margin: 0; line-height: 1.5; }

/* A torn-ticket edge, the one flourish this screen gets. */
.receipt-body {
  padding: 20px 26px 22px;
  border-top: 2px dashed var(--line);
  position: relative;
  background: var(--surface-2);
}
.receipt-body::before,
.receipt-body::after {
  content: ''; position: absolute; top: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ground);
}
.receipt-body::before { left: -11px; }
.receipt-body::after  { right: -11px; }

.receipt-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 7px 0; font-size: 14px;
}
.receipt-line span { color: var(--muted); flex: 0 0 auto; }
.receipt-line strong { text-align: right; word-break: break-word; }

.receipt-foot { padding: 20px 26px 24px; }
.receipt-count { font-size: 12.5px; color: var(--muted-2); text-align: center; margin: 14px 0 0; }

@media (max-width: 760px) {
  .receipt-top { padding: 26px 20px 20px; }
  .receipt-body { padding: 16px 20px 18px; }
  .receipt-foot { padding: 16px 20px 20px; }
  .receipt-top h1 { font-size: 22px; }
}

/* ============================================================
   BUYING
   The shape every VTU shop uses, because it is the one that
   works: balance as a strip, networks as cards, sizes as a grid.
   ============================================================ */

.balance-strip {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 7px 7px 16px;
  margin-bottom: 18px;
}
.balance-strip-label { font-size: 12.5px; color: var(--muted); }
.balance-strip-figure { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }
.balance-strip-add {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-50); color: var(--brand-700);
  border-radius: 999px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  min-height: 36px;
}
.balance-strip-add:hover { background: var(--brand-100); text-decoration: none; }

.buy-block { margin-bottom: 22px; }
.buy-label {
  font-size: 13px; font-weight: 700; color: var(--muted);
  margin: 0 0 10px; letter-spacing: 0;
}
.buy-label label { font-size: inherit; font-weight: inherit; color: inherit; margin: 0; }
.buy-hint { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.buy-hint.is-found { color: var(--success); font-weight: 600; }

/* ---------------------------------------------- network cards */

.net-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.net-card {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 14px 10px;
  cursor: pointer; text-align: center;
  transition: border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.net-card:hover { border-color: var(--brand-300); }
.net-card:active { transform: scale(.97); }
.net-card.is-active { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }

.net-face {
  width: 46px; height: 46px; border-radius: 13px;
  background: var(--net, var(--brand));
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 0 0 auto;
}
.net-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.net-short {
  color: #FFFFFF; font-weight: 800; font-size: 14px; letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.net-card-name { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.2; }
.net-card-note { font-size: 11px; color: var(--muted-2); line-height: 1.2; }

/* ------------------------------------------------ the number */

.number-input {
  font-family: var(--mono);
  font-size: 21px; font-weight: 500; letter-spacing: .04em;
  padding: 14px 16px; min-height: 58px; text-align: center;
}

/* ----------------------------------------------- bundle grid */

.bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.bundle {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 15px 12px 13px;
  cursor: pointer; text-align: left;
  transition: border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
.bundle:hover { border-color: var(--brand-300); }
.bundle:active { transform: scale(.97); }
.bundle.is-active { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); background: var(--brand-50); }
.bundle.is-off { opacity: .5; cursor: not-allowed; }
.bundle.is-off:active { transform: none; }

.bundle-size { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); }
.bundle-price { font-size: 14px; font-weight: 700; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.bundle-note { font-size: 11px; color: var(--muted-2); }

.bundle-flag {
  position: absolute; top: -8px; right: 8px;
  background: var(--a2); color: #FFFFFF;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  border-radius: 999px; padding: 3px 8px;
}
.bundle-flag.is-out { background: var(--danger); }

/* --------------------------------------------- buy it again */

.again-row { display: grid; gap: 8px; }
.again {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px;
  text-decoration: none; font-size: 13.5px;
}
.again:hover { border-color: var(--brand-300); text-decoration: none; }
.again-what { font-weight: 700; color: var(--text); }
.again-who { font-size: 12.5px; color: var(--muted); }
.again .badge { margin-left: auto; }

.summary { position: sticky; top: 84px; }

@media (max-width: 760px) {
  .balance-strip { margin-bottom: 14px; padding: 6px 6px 6px 14px; }
  .balance-strip-figure { font-size: 15px; }

  .net-grid { gap: 8px; }
  .net-card { padding: 11px 6px; gap: 6px; }
  .net-face { width: 40px; height: 40px; border-radius: 12px; }
  .net-card-name { font-size: 12.5px; }
  .net-card-note { display: none; }

  .bundle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .bundle { padding: 12px 9px 11px; }
  .bundle-size { font-size: 16px; }
  .bundle-price { font-size: 12.5px; }
  .bundle-note { display: none; }

  .number-input { font-size: 19px; min-height: 54px; }

  /* The summary card is replaced by the pay bar on a phone. */
  .summary { display: none; }
  .buy-block { margin-bottom: 18px; }
}

@media (max-width: 380px) {
  .bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   APP FEEL
   Taps answer at once, buttons admit they are working, and
   messages arrive as something that passes rather than as a
   banner that shoves the page down.
   ============================================================ */

/* Kills the 300ms wait and the grey flash Android paints on tap. */
a, button, .net-card, .bundle, .tile, .choice, .switch-hit, label {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.is-pressed { transform: scale(.97) !important; }

/* A button that is doing something says so. */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy svg { opacity: 0; }
.btn.is-busy::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  color: var(--on-brand);
  animation: spin .6s linear infinite;
}
.btn-ghost.is-busy::after, .btn-on-hero-solid.is-busy::after { color: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Messages arrive at the bottom on a phone, where the thumb is, and
   top-right on a desktop. They leave by themselves. */
.toast-tray {
  position: fixed; z-index: 60;
  left: 16px; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast-tray .alert {
  pointer-events: auto; cursor: pointer; margin: 0;
  box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(14px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.3,1);
}
.toast-tray .alert.is-in { opacity: 1; transform: none; }

@media (min-width: 761px) {
  .toast-tray {
    left: auto; right: 22px; bottom: auto; top: 76px;
    width: min(380px, calc(100vw - 44px));
  }
  .toast-tray .alert { transform: translateX(18px); }
  .toast-tray .alert.is-in { transform: none; }
}

/* One page should not flash white on the way to the next. Short,
   because a long cross-fade reads as lag on a cheap Android. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .16s; }
}

html { background: var(--ground); }

@media (prefers-reduced-motion: reduce) {
  .is-pressed { transform: none !important; }
  .btn.is-busy::after { animation-duration: 2s; }
  .toast-tray .alert { transition: opacity .2s ease; transform: none; }
}

/* The number says one network, the basket says another. */
.mismatch {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--warning-bg); color: var(--warning);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 9px;
  font-size: 13px;
}
.mismatch[hidden] { display: none; }
.mismatch span { flex: 1 1 160px; }
.mismatch strong { color: inherit; }
.mismatch .btn { background: var(--warning); color: #FFFFFF; min-height: 34px; padding: 0 14px; }

/* ============================================================
   ORDERS
   A card each, because a row of eight columns is unreadable on
   the screen most people are holding.
   ============================================================ */

.order-list { display: grid; gap: 9px; }

.order-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.order-card:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); }

.order-main {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 11px; padding: 12px 14px; text-decoration: none;
}
.order-state { flex: 0 0 auto; }
.order-main:hover { text-decoration: none; }
.order-main .net-face { width: 38px; height: 38px; border-radius: 11px; }
.order-main .net-short { font-size: 12px; }

.order-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.order-top, .order-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.order-what {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.order-amount { font-size: 14px; font-weight: 700; color: var(--text); flex: 0 0 auto; }
.order-who { font-size: 12.5px; color: var(--muted); }
.order-when { font-size: 11.5px; color: var(--muted-2); flex: 0 0 auto; }

.order-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
}
.order-ref { font-size: 11px; color: var(--muted-2); }
.order-report {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--warning);
  background: var(--warning-bg); border-radius: 999px;
  padding: 5px 11px; text-decoration: none; min-height: 30px;
}
.order-report:hover { text-decoration: none; filter: brightness(.97); }

@media (max-width: 760px) {
  /* Still one line on a phone: tile, what and who, status. The badge
     shrinks rather than dropping to a row of its own. */
  .order-main {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'face body state';
    align-items: center; padding: 10px 11px; gap: 9px;
  }
  .order-main .net-face { grid-area: face; width: 34px; height: 34px; border-radius: 10px; }
  .order-main .net-short { font-size: 11px; }
  .order-body { grid-area: body; }
  .order-state { grid-area: state; }
  .order-state .badge { font-size: 10px; padding: 3px 7px; }
  .order-foot { padding: 6px 11px; gap: 8px; }
  .order-what { font-size: 13px; }
  .order-amount { font-size: 13px; }
  .order-who { font-size: 11.5px; }
  .order-ref { display: none; }
}

/* A row of filters scrolls sideways rather than stacking into three
   lines of chrome above the thing being filtered. */
@media (max-width: 760px) {
  .filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -16px; padding: 0 16px 2px;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters .pill { flex: 0 0 auto; }
  .toolbar { gap: 8px; margin-bottom: 11px; }
  .toolbar form { flex: 1 1 100%; flex-wrap: nowrap; }
  .toolbar input, .toolbar select { flex: 1 1 auto; width: auto; min-width: 0; }
  .pill { padding: 7px 13px; font-size: 13px; }
}

.btn-report { background: var(--warning); color: #FFFFFF; }
.btn-report:hover { background: var(--warning); filter: brightness(.94); }

/* ---------------------------------------------------- money rows */

.money-list { display: flex; flex-direction: column; }
.money-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-top: 1px solid var(--line-soft);
}
.money-row:first-child { border-top: 0; }
.money-icon {
  width: 32px; height: 32px; border-radius: 10px; flex: 0 0 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.money-icon.is-in { background: var(--success-bg); color: var(--success); }
.money-icon.is-out { background: var(--brand-50); color: var(--brand-700); }
.money-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.money-what { font-size: 14px; font-weight: 700; }
.money-when { font-size: 11.5px; color: var(--muted-2); }
.money-amount {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
}
.money-amount.is-in { color: var(--success); }

@media (max-width: 760px) { .money-row { padding: 10px 12px; } }

/* ------------------------------------------------- top-up page */

.quick-amounts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 9px; }
.quick-amount {
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 6px;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.quick-amount:hover { border-color: var(--brand-300); }
.quick-amount.is-active { border-color: var(--brand); background: var(--brand-50); color: var(--brand-700); }

.pay-option {
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; margin: 0; cursor: pointer;
}
.pay-option:hover { border-color: var(--brand-300); }
.pay-option:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }

@media (max-width: 760px) {
  .quick-amounts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}