/* ==========================================================================
   Design tokens
   Flat: 1px borders, no gradients, no drop shadows except the mobile drawer.
   Spacing is a 4px grid. Type scale is deliberately generous -- this is a
   business tool people stare at all day, not a settings dialog.
   ========================================================================== */
:root {
  --bg:            #0a0c11;
  --surface:       #10131a;
  --surface-2:     #151922;
  --surface-3:     #1b2029;
  --border:        #222834;
  --border-strong: #2d3542;

  --text:          #e9ecf2;
  --text-dim:      #9aa3b5;
  --text-mute:     #6d7688;

  --accent:        #4c8dff;
  --accent-hover:  #679dff;
  --accent-soft:   rgba(76, 141, 255, .14);
  --accent-text:   #a8c8ff;

  --ok:            #34c47c;
  --ok-soft:       rgba(52, 196, 124, .13);
  --warn:          #e2a437;
  --warn-soft:     rgba(226, 164, 55, .13);
  --err:           #ef555d;
  --err-soft:      rgba(239, 85, 93, .13);

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;

  --sidebar-w: 272px;
  --content-max: 1340px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: 130ms cubic-bezier(.4, 0, .2, 1);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg:            #f4f6f9;
  --surface:       #ffffff;
  --surface-2:     #f3f5f8;
  --surface-3:     #e8ecf2;
  --border:        #e1e6ed;
  --border-strong: #cdd5e0;

  --text:          #10141b;
  --text-dim:      #58616f;
  --text-mute:     #838c9c;

  --accent:        #2565d8;
  --accent-hover:  #1c56c2;
  --accent-soft:   rgba(37, 101, 216, .09);
  --accent-text:   #1b57c4;

  --ok:            #12875a;
  --ok-soft:       rgba(18, 135, 90, .10);
  --warn:          #996a15;
  --warn-soft:     rgba(153, 106, 21, .10);
  --err:           #c8343c;
  --err-soft:      rgba(200, 52, 60, .10);
  color-scheme: light;
}

/* ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15.5px/1.62 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
h1 { font-size: 27px; line-height: 1.24; }
h2 { font-size: 18px; line-height: 1.35; }
h3 { font-size: 15px; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent-soft); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* numbers must never shift width between renders */
.num, .tbl td.n, .stat-v, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

/* ============================== app shell ================================= */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 22px 22px;
  border-bottom: 1px solid var(--border);
  font-weight: 680; font-size: 16.5px; letter-spacing: -.02em;
}
.brand svg { color: var(--accent); flex: none; }
.brand small { display: block; font-weight: 400; font-size: 11.5px; color: var(--text-mute);
               letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

.nav { padding: 16px 14px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.nav-lbl {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-mute); padding: 16px 12px 8px; font-weight: 650;
}
.nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: var(--r-sm);
  color: var(--text-dim); font-size: 15px; font-weight: 500;
  transition: background var(--ease), color var(--ease);
}
.nav a svg { flex: none; opacity: .85; }
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 650; }
.nav a.on svg { opacity: 1; }
.nav a .badge {
  margin-left: auto; font-size: 12px; padding: 1px 8px; border-radius: 20px;
  background: var(--surface-3); color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.nav a.on .badge { background: var(--accent); color: #fff; }

.side-foot { margin-top: auto; padding: 14px; border-top: 1px solid var(--border); }
.user-card {
  display: flex; align-items: center; gap: 12px;
  padding: 11px; border-radius: var(--r); background: var(--surface-2);
}
.avatar {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  text-transform: uppercase;
}
.user-card .who { min-width: 0; }
.user-card .who b { display: block; font-size: 14.5px; font-weight: 650;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card .who span { font-size: 12.5px; color: var(--text-mute); }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 0 36px; height: 78px; flex: none;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
}
.topbar h1 { flex: none; }
.topbar .crumb { color: var(--text-mute); font-size: 14.5px; }
.topbar .grow { flex: 1; }

.content { padding: 32px 36px 56px; max-width: var(--content-max); width: 100%;
           margin: 0 auto; }
.content > * + * { margin-top: 24px; }

/* =============================== components =============================== */
.card { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--r-lg); }
.card-h {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 26px; border-bottom: 1px solid var(--border);
}
.card-h h2 { flex: 1; }
.card-h .sub { font-size: 13.5px; color: var(--text-mute); }
.card-b { padding: 26px; }
.card-b.tight { padding: 0; }
.card-b.pad-0 { padding: 0; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px;
         align-items: start; }
.aside-sticky { position: sticky; top: 102px; }

/* --- stats --- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { background: var(--surface); border: 1px solid var(--border);
        border-radius: var(--r-lg); padding: 24px 26px; }
.stat-l { display: flex; align-items: center; gap: 8px; font-size: 13.5px;
          color: var(--text-dim); font-weight: 550; margin-bottom: 14px; }
.stat-l svg { color: var(--text-mute); }
.stat-v { font-size: 38px; font-weight: 660; letter-spacing: -.025em; line-height: 1.12; }
.stat-v .cur { font-size: 19px; font-weight: 500; color: var(--text-dim); margin-right: 2px; }
.stat-f { font-size: 13px; color: var(--text-mute); margin-top: 10px; }
.stat-v.ok { color: var(--ok); }
.stat-v.warn { color: var(--warn); }

/* --- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 550 15px/1 var(--font); padding: 12px 22px; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  cursor: pointer; white-space: nowrap;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: var(--text-mute); }
.btn:active { transform: translateY(.5px); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff;
               font-weight: 650; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-lg { padding: 15px 30px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --- forms --- */
.field { margin-bottom: 20px; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 13.5px; font-weight: 600;
               color: var(--text-dim); margin-bottom: 8px; }
.field .hint { font-size: 13px; color: var(--text-mute); margin-top: 8px; }
.input, .select {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 12px 15px;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.input::placeholder { color: var(--text-mute); }
.input:hover, .select:hover { border-color: var(--text-mute); }
.input:focus, .select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.input.mono { font-family: var(--mono); font-size: 14px; }
.input-affix { position: relative; }
.input-affix .input { padding-right: 58px; }
.input-affix span {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--text-mute); pointer-events: none;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* --- search --- */
.search { position: relative; flex: 1; min-width: 0; }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
              color: var(--text-mute); pointer-events: none; }
.search .input { padding-left: 42px; }

/* category selector: a dropdown, not a horizontal strip -- 80+ categories
   laid out sideways run off the screen and are impossible to scan */
.filter-cat { min-width: 240px; max-width: 340px; flex: 0 1 auto; cursor: pointer; }

/* two-level filter: platforms on the left, a short search box on the right */
.filter-top { display: flex; gap: 20px; align-items: flex-start; }
.filter-top > .chips { flex: 1; min-width: 0; }
.filter-search { display: flex; gap: 8px; flex: none; width: 300px; }
.filter-search .search { min-width: 0; }
.chips.sub { margin-top: 16px; padding-top: 16px;
             border-top: 1px solid var(--border); }

/* --- chips --- */
/* Capsules WRAP, then scroll vertically once they exceed the cap.
   Horizontal scrolling was tried and rejected: with 40+ categories you can
   never reach the end of the row. Letting them wrap unbounded was also
   rejected: on a phone that is 2000px of categories before the first service. */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chips.scroll-y {
  max-height: 210px;                 /* ~4 rows, then scroll */
  overflow-y: auto; overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  overscroll-behavior: contain;
}
.chips.scroll-y::-webkit-scrollbar { width: 8px; }
.chips.scroll-y::-webkit-scrollbar-track { background: transparent; }
.chips.scroll-y::-webkit-scrollbar-thumb { background: var(--border-strong);
                                           border-radius: 4px; }
.chips .chip { flex: none; }
.chip {
  font-size: 13.5px; padding: 7px 14px; border-radius: 22px;
  border: 1px solid var(--border-strong); color: var(--text-dim);
  background: var(--surface-2); white-space: nowrap;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--text-mute); }
.chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text);
           font-weight: 650; }
.chip b { font-weight: 500; opacity: .6; margin-left: 7px; font-variant-numeric: tabular-nums; }

/* --- tables --- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 12px; font-weight: 650; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-mute);
  padding: 15px 26px; border-bottom: 1px solid var(--border);
  background: var(--surface-2); white-space: nowrap;
}
.tbl td { padding: 18px 26px; border-bottom: 1px solid var(--border);
          vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background var(--ease); }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl tbody tr.sel { background: var(--accent-soft); }
.tbl td.n, .tbl th.n { text-align: right; }
.tbl td.c, .tbl th.c { text-align: center; }
.tbl .strong { font-weight: 600; }
.tbl .sub { font-size: 13px; color: var(--text-mute); margin-top: 4px; }
.tbl.clk tbody tr { cursor: pointer; }

/* a row that leads to a detail page */
.rowlink a.strong { color: var(--text); }
.rowlink a.strong:hover { color: var(--accent-text); }
.svc-name { font-size: 16.5px; font-weight: 620; letter-spacing: -.01em; color: var(--text); }
a.svc-name:hover { color: var(--accent-text); }
.tbl td .pill { margin-left: 8px; vertical-align: 1px; }

/* --- pills --- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; padding: 4px 11px; border-radius: 20px;
  border: 1px solid var(--border-strong); color: var(--text-dim);
  background: var(--surface-2); white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                background: currentColor; flex: none; }
.pill.completed { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.pill.partial, .pill.unknown { color: var(--warn); background: var(--warn-soft);
                               border-color: transparent; }
.pill.error, .pill.canceled { color: var(--err); background: var(--err-soft);
                              border-color: transparent; }
.pill.in_progress, .pill.pending, .pill.dispatching {
  color: var(--accent-text); background: var(--accent-soft); border-color: transparent; }
.pill.plain::before { display: none; }
.pill.ok { color: var(--ok); background: var(--ok-soft); border-color: transparent; }
.pill.warn { color: var(--warn); background: var(--warn-soft); border-color: transparent; }
.pill.off { color: var(--text-mute); }

/* --- progress --- */
.prog { min-width: 130px; }
.prog-bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.prog-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px;
              transition: width 400ms var(--ease); }
.prog-bar i.done { background: var(--ok); }
.prog-t { font-size: 12.5px; color: var(--text-mute); margin-top: 7px;
          font-variant-numeric: tabular-nums; }

/* --- alerts --- */
.alert {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 20px; border-radius: var(--r); font-size: 15px;
  border: 1px solid transparent;
}
.alert svg { flex: none; margin-top: 2px; }
.alert.ok { background: var(--ok-soft); color: var(--ok); }
.alert.err { background: var(--err-soft); color: var(--err); }
.alert.info { background: var(--accent-soft); color: var(--accent-text); }
.alert.warn { background: var(--warn-soft); color: var(--warn); }
.alert b { font-weight: 700; }

/* --- note blocks (service rules) --- */
.notes { display: flex; flex-direction: column; gap: 12px; }
.note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 18px; border-radius: var(--r); font-size: 14.5px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.note svg { flex: none; margin-top: 3px; color: var(--text-mute); }
.note.warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.note.warn svg { color: var(--warn); }
.note.tip { background: var(--accent-soft); border-color: transparent;
            color: var(--accent-text); }
.note.tip svg { color: var(--accent-text); }
.note b { font-weight: 700; }

/* --- empty state --- */
.empty { padding: 72px 24px; text-align: center; color: var(--text-mute); }
.empty svg { color: var(--border-strong); margin-bottom: 16px; }
.empty b { display: block; color: var(--text-dim); font-size: 16px; font-weight: 600;
           margin-bottom: 6px; }
.empty p { font-size: 14.5px; }
.empty .btn { margin-top: 22px; }

/* --- misc --- */
.muted { color: var(--text-dim); }
.mute  { color: var(--text-mute); }
.tiny  { font-size: 13px; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vstack { display: flex; flex-direction: column; gap: 24px; }
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.row.tight { gap: 10px; }
.grow { flex: 1; min-width: 0; }
.nowrap { white-space: nowrap; }
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 22px 0; }

.dl { display: grid; grid-template-columns: 140px 1fr; gap: 16px 24px; font-size: 15px; }
.dl dt { color: var(--text-mute); font-size: 13.5px; padding-top: 1px; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.copy {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font: 550 13.5px var(--font); color: var(--text-dim);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); padding: 9px 15px;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.copy:hover { color: var(--text); border-color: var(--text-mute); }
.copy.done { color: var(--ok); border-color: transparent; background: var(--ok-soft); }

.pager { display: flex; align-items: center; gap: 8px; padding: 20px 26px; flex-wrap: wrap; }
.pager .grow { flex: 1; }
.pager a, .pager span.pg {
  min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex;
  align-items: center; justify-content: center; border-radius: var(--r-sm);
  border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 14.5px;
  font-variant-numeric: tabular-nums; transition: background var(--ease), color var(--ease);
}
.pager a:hover { background: var(--surface-2); color: var(--text); }
.pager .cur { background: var(--accent); border-color: var(--accent); color: #fff;
              font-weight: 700; }
.pager .gap { border: 0; color: var(--text-mute); }

/* deposit amount hero */
.paybox {
  border: 1px dashed var(--border-strong); border-radius: var(--r);
  background: var(--surface-2); padding: 26px 28px;
}
.paybox .amt {
  font: 680 42px/1.14 var(--mono); color: var(--ok); letter-spacing: -.03em;
  word-break: break-all; margin-bottom: 18px;
}
.paybox .amt em { font: 500 19px var(--font); font-style: normal; color: var(--text-dim);
                  margin-left: 10px; }

.steps { display: flex; flex-direction: column; gap: 20px; counter-reset: s; }
.step { display: flex; gap: 16px; }
.step::before {
  counter-increment: s; content: counter(s);
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--surface-3); color: var(--text-dim);
  display: grid; place-items: center; font-size: 13.5px; font-weight: 700;
}
/* only the step TITLE becomes a block; a <b> inside the body text must stay
   inline, otherwise "the tail is 001" breaks across three lines */
.step > div > b { display: block; font-weight: 650; font-size: 15.5px;
                  margin-bottom: 4px; }
.step b { font-weight: 700; }
.step p { font-size: 14.5px; color: var(--text-mute); margin: 0; }

/* ============================== auth pages =============================== */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px; }
.auth { width: 100%; max-width: 440px; }
.auth .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 28px;
              font-weight: 680; font-size: 17px; }
.auth .logo svg { color: var(--accent); }
.auth .card { padding: 36px; }
.auth h1 { margin-bottom: 6px; }
.auth .lede { font-size: 14.5px; color: var(--text-mute); margin-bottom: 28px; }
.auth .alt { text-align: center; font-size: 14.5px; color: var(--text-mute); margin-top: 24px; }
.auth .btn-primary { width: 100%; padding: 15px; margin-top: 8px; }

/* ============================== responsive =============================== */
.menu-btn { display: none; }
.backdrop { display: none; }

@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .aside-sticky { position: static; top: auto; }
}

@media (max-width: 860px) {
  body { font-size: 15px; }
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: 288px; z-index: 60;
    transform: translateX(-100%); transition: transform 180ms var(--ease);
    visibility: hidden;
  }
  body.menu-open .sidebar { transform: none; visibility: visible;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55); }
  body.menu-open .backdrop { display: block; position: fixed; inset: 0; z-index: 50; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 18px; height: 68px; gap: 12px; }
  .topbar h1 { font-size: 21px; }
  .topbar .crumb { display: none; }
  .content { padding: 20px 18px 44px; }
  .content > * + * { margin-top: 18px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 14px; }
  .stat { padding: 18px; }
  .stat-v { font-size: 29px; }
  .stats.three { grid-template-columns: 1fr; }
  .card-h { padding: 16px 18px; }
  .card-b { padding: 18px; }
  .tbl th, .tbl td { padding: 14px 16px; }
  .tbl th { font-size: 11.5px; }
  .hide-sm { display: none; }
  .dl { grid-template-columns: 1fr; gap: 4px 0; }
  .dl dt { margin-top: 10px; }
  .dl dd { margin-bottom: 4px; }
  .form-row { grid-template-columns: 1fr; }
  .filter-cat { min-width: 0; width: 100%; max-width: none; }
  .filter-top { flex-direction: column; gap: 14px; }
  .filter-search { width: 100%; }
  .chips.scroll-y { max-height: 164px; }   /* ~3 rows on a phone */
  .paybox .amt { font-size: 34px; }
  .pager { padding: 16px 18px; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; }
  .btn-lg { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}