body[data-surface="customer"] {
  --customer-primary: #1745de;
  --customer-card-rule: #dce5f1;
  --customer-banner: #eef4ff;
  --customer-blue: #1c53ab;
  --customer-blue-paper: #e8f1ff;
  --customer-red: #bc4741;
  --customer-red-paper: #fff0ed;
  --customer-green: #14844b;
  --customer-green-paper: #e4f8eb;
  --customer-busy: #a25a06;
  --customer-busy-paper: #fff1dc;
  min-height: 100vh;
  background: var(--color-paper);
  font-size: 14px;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}
html[data-theme="light"] body[data-surface="customer"] {
  --color-paper: #f3f6fb;
  --color-paper-2: #fff;
  --color-paper-3: #f5f7fa;
  --color-ink: #182739;
  --color-muted: #5d6d83;
  --color-rule: #dce5f1;
  --color-accent: #1745de;
  --color-accent-ink: #fff;
  --color-focus: #1745de;
}
html[data-theme="dark"] body[data-surface="customer"] {
  --customer-primary: #8cafff;
  --customer-card-rule: #34465d;
  --customer-banner: #20314d;
  --customer-green: #7cdaa3;
  --customer-green-paper: #1c382e;
  --customer-busy: #f3bb72;
  --customer-busy-paper: #3b3023;
  --customer-red: #ffaaa3;
  --customer-red-paper: #442e32;
}
[data-surface="customer"] .site-header { background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); }
[data-surface="customer"] .header-content { width: auto; max-width: none; min-height: 52px; margin: 0 22px; gap: 14px; }
[data-surface="customer"] .brand { color: var(--color-ink); gap: 0; flex-shrink: 0; font-size: 18px; }
[data-surface="customer"] .brand svg, [data-surface="customer"] .brand small,
[data-surface="customer"] .header-actions, .customer-tabs { display: none; }
.customer-session { display: flex; align-items: center; flex: 1; min-width: 0; gap: 12px; }
.customer-username { color: #355eb5; border: 1px solid #b3c5fb; background: #eef2ff; border-radius: 5px; padding: 3px 8px; font-size: 12px; white-space: nowrap; }
.customer-header-tools { display: flex; gap: 8px; margin-left: auto; align-items: center; flex-wrap: wrap; }
[data-surface="customer"] .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 5px; background: #1745de; border: 1px solid #1745de; color: #fff; font-size: 14px; font-weight: 600; padding: 7px 13px; min-height: 34px; text-decoration: none; }
[data-surface="customer"] .button.quiet { color: var(--color-ink); background: var(--color-paper-2); border-color: var(--color-rule); font-weight: 400; }
[data-surface="customer"] .customer-header-tools .button { min-height: 30px; padding: 4px 10px; }
[data-surface="customer"] .button:not(:disabled):hover { background: #1035b6; border-color: #1035b6; color: #fff; }
[data-surface="customer"] .button.quiet:not(:disabled):hover { color: var(--customer-primary); background: var(--customer-banner); border-color: #a5b8ec; }
[data-surface="customer"] .button.refresh-tool { color: #087893; background: #ecfbff; border-color: #d2e8ee; }
.lobby-icon { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-surface="customer"] #main { width: auto; max-width: none; margin: 22px; padding: 0; }
.lobby-overview { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(270px, 1fr); gap: 12px; }
.lobby-balances { min-width: 0; }
.lobby-overview-heading { min-height: 55px; display: flex; justify-content: space-between; align-items: center; padding: 10px 13px; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 7px; gap: 12px; margin-bottom: 12px; }
.lobby-overview-heading h1 { display: flex; align-items: center; gap: 9px; font-size: 16px; margin: 0; white-space: nowrap; }
.wallet-icon { width: 32px; height: 32px; background: #2861ef; color: #fff; display: inline-flex; justify-content: center; align-items: center; border-radius: 6px; }
.wallet-icon svg { width: 20px; height: 20px; }
.lobby-overview-heading h1 small { font-size: 11px; background: #edf2ff; color: #2355cb; padding: 3px 5px; border-radius: 3px; }
.lobby-segment { display: inline-flex; flex-wrap: wrap; align-items: center; }
.lobby-segment button { border: 1px solid transparent; background: var(--color-paper-3); padding: 5px 10px; color: var(--color-ink); min-height: 31px; font-size: 14px; cursor: pointer; }
.lobby-segment button:first-child { border-radius: 5px 0 0 5px; }
.lobby-segment button:last-child { border-radius: 0 5px 5px 0; }
.lobby-segment button[aria-pressed="true"] { background: #1745de; color: #fff; }
.lobby-segment button:disabled { color: var(--color-muted); cursor: not-allowed; }
.lobby-overview-heading .lobby-segment button { border-color: var(--color-rule); background: var(--color-paper-2); }
.lobby-overview-heading .lobby-segment button[aria-pressed="true"] { color: var(--customer-primary); border-color: #5373ed; }
.lobby-balance-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.lobby-balance { min-width: 0; border: 1px solid var(--color-rule); background: var(--color-paper-2); border-radius: 6px; overflow: hidden; }
.lobby-balance-main { padding: 14px 15px 21px; min-height: 110px; }
.lobby-balance h2 { font-size: 13px; color: var(--color-muted); margin: 0 0 5px; }
.lobby-balance strong { display: block; font-size: 23px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.lobby-balance-main p { color: var(--color-muted); font-size: 12px; margin: 3px 0 0; }
.lobby-balance-footer { border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; gap: 6px; padding: 10px 14px; font-size: 12px; }
.lobby-balance-footer span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.lobby-balance-footer svg { width: 14px; height: 14px; color: #bd6500; }
.lobby-balance-footer b { color: #ac5800; }
.has-free { color: var(--customer-green); font-weight: 700; }
.no-free { color: var(--color-muted); }
.lobby-voucher { padding: 13px 17px; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 6px; }
.lobby-voucher form { margin: 0; }
.lobby-voucher-input { display: flex; }
.lobby-voucher-input input { width: 100%; min-width: 0; margin: 0; min-height: 38px; border-radius: 5px 0 0 5px; padding: 8px 12px; font-size: 14px; }
.lobby-voucher-input .button { flex-shrink: 0; border-radius: 0 5px 5px 0; }
.customer-machines { max-width: none; margin: 16px 0; }
.lobby-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: 7px; padding: 12px 15px; margin-bottom: 16px; }
.customer-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.lobby-counts { color: var(--color-muted); font-size: 12px; margin: 0; white-space: nowrap; }
.customer-machine-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 10px; }
.customer-machine { position: relative; min-width: 0; padding: 11px 13px 11px 15px; border: 1px solid #efd796; border-radius: 7px; background: #fffdf6; overflow: hidden; }
.customer-machine::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #efa400; }
.customer-machine.available { border-color: #bbefcb; background: #f5fdf8; }
.customer-machine.available::before { background: #1abb5f; }
.machine-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 10px; }
.machine-heading h3 { font-size: 15px; margin: 0; padding-right: 7px; border-right: 1px solid var(--color-rule); }
.machine-state, .machine-mode, .machine-warning { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 4px; font-size: 12px; line-height: 1.5; }
.machine-mode { color: #a95205; background: #fff0dc; border: 1px solid #edc79b; }
.machine-mode.secret { color: #b6443e; background: #fff0ed; border-color: #eebdb6; }
.machine-state { border-radius: 12px; }
.machine-state.busy { color: #a95205; background: #fff0dc; border: 1px solid #edc79b; }
.machine-state.available { color: #177d3e; background: #e6f9eb; border: 1px solid #a7dcb6; }
.machine-warning { color: #a94429; background: #fff0e8; }
.machine-detail-row { display: flex; align-items: center; gap: 12px; }
.machine-preview { flex: 0 0 102px; height: 58px; position: relative; display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 12px; font-weight: 600; background: #f0f2f5; border: 1px solid #e0e5ec; border-radius: 5px; }
.preview-status { position: absolute; left: 4px; top: 4px; padding: 1px 6px; border-radius: 12px; background: #e1e8f0; color: #47566d; font-size: 11px; }
.available .preview-status { background: #15924c; color: #fff; }
.machine-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 12px; }
.machine-facts > div { border: 1px solid #e0e7f1; background: #f7f9fc; border-radius: 5px; padding: 3px 7px; min-width: 60px; }
.machine-facts dt { color: #586c85; font-size: 11px; font-weight: 600; white-space: nowrap; }
.machine-facts dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.machine-coins { color: #a36200; }
.machine-remaining { color: #13814b; }
[data-surface="customer"] .machine-order { margin: 0 0 0 auto; min-width: 78px; flex-shrink: 0; padding: 5px 13px; min-height: 31px; }
[data-surface="customer"] .machine-order:disabled { background: #879de3; border-color: #879de3; color: #fff; opacity: 1; cursor: not-allowed; }
.customer-content { max-width: 1260px; margin: 28px auto; }
.customer-recharge-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.customer-package { padding: 24px; border: 1px solid var(--color-rule); background: var(--color-paper-2); border-radius: 8px; }
.machine-countdown { color: var(--customer-primary); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html[data-theme="dark"] .customer-machine { background: #2b2925; border-color: #655431; }
html[data-theme="dark"] .customer-machine.available { background: #1e302b; border-color: #315b43; }
html[data-theme="dark"] .machine-preview, html[data-theme="dark"] .machine-facts > div { background: #202e40; border-color: #35455e; }
html[data-theme="dark"] .machine-facts dt { color: #a8b6c9; }
html[data-theme="dark"] .machine-remaining { color: #7cdaa3; }
.customer-service-notice {
  margin-block: var(--space-md);
  color: var(--color-error);
}
.customer-package-price {
  margin-block: var(--space-md);
  font-size: var(--text-display);
  font-weight: 700;
  color: var(--customer-primary);
}
.customer-recharge-pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  background: var(--customer-banner);
  border-radius: var(--radius-input);
}
.customer-package h2 {
  font-size: var(--text-lg);
}
[data-surface="customer"] .table-scroll {
  background: var(--color-paper-2);
  border-radius: var(--radius-input);
}
.customer-history th,
.customer-history td {
  padding: var(--space-md) var(--space-lg);
}
.customer-history td:first-child {
  white-space: nowrap;
}
.customer-history td small {
  margin-top: var(--space-2xs);
}
.customer-orders > .section-heading {
  margin-bottom: var(--space-xl);
}
.customer-order-list {
  display: grid;
  gap: var(--space-lg);
}
.customer-order {
  padding: var(--space-xl);
  border: 1px solid var(--customer-card-rule);
  border-radius: var(--radius-input);
  background: var(--color-paper-2);
}
.customer-order h2 {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.customer-order h2 small {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}
.customer-order-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg) var(--space-xl);
  margin-block: var(--space-lg);
  font-variant-numeric: tabular-nums;
}
.customer-order-details dt {
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}
.customer-order-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.customer-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.customer-order-radar {
  padding-block: var(--space-md);
  border-top: 1px solid var(--color-rule);
}
.customer-order-radar h3 {
  margin-bottom: var(--space-md);
}
.customer-radar-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.customer-radar-link > div {
  flex: 1;
  min-width: min(100%, 240px);
}
.customer-radar-link a {
  display: block;
  margin-top: var(--space-2xs);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.machine-order:not(:disabled):hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
}
.customer-support {
  position: fixed;
  inset-inline-end: var(--space-lg);
  inset-block-end: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  border-radius: var(--radius-pill);
}
.customer-support svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-surface="customer"] .footer {
  padding-bottom: 88px;
}

@media (max-width: 1250px) {
  .lobby-overview { grid-template-columns: minmax(0,1fr); }
  .lobby-voucher { display: flex; align-items: center; gap: 18px; }
  .lobby-voucher form { flex: 1; }
  .machine-detail-row { gap: 8px; flex-wrap: wrap; }
  .machine-facts { flex: 1; }
  .machine-preview { flex-basis: 90px; }
}
@media (max-width: 780px) {
  [data-surface="customer"] .header-content { flex-wrap: wrap; margin: 0 14px; padding-block: 10px; gap: 9px; }
  .customer-session { display: contents; }
  .customer-header-tools { flex-basis: 100%; margin-left: 0; gap: 5px; }
  [data-surface="customer"] .customer-header-tools .button { font-size: 12px; padding-inline: 7px; gap: 4px; }
  [data-surface="customer"] #main { margin: 14px; }
  .customer-machine-grid { grid-template-columns: minmax(0,1fr); }
  .lobby-balance-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lobby-balance-main { min-height: 90px; padding-bottom: 14px; }
  .lobby-toolbar { flex-wrap: wrap; padding: 10px; }
  .lobby-counts { flex-basis: 100%; }
  .customer-recharge-grid { grid-template-columns: minmax(0,1fr); }
  .customer-order-details { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .customer-order { padding: 20px; }
  .customer-history th, .customer-history td { padding-inline: 16px; }
}
@media (max-width: 450px) {
  .lobby-overview-heading { flex-wrap: wrap; }
  .lobby-balance-footer { padding: 8px; font-size: 11px; }
  .lobby-balance-footer span { gap: 2px; }
  .lobby-balance-footer svg { width: 12px; height: 12px; }
  .machine-preview { flex-basis: 76px; }
  .machine-facts { flex-basis: calc(100% - 90px); }
  [data-surface="customer"] .machine-order { min-width: 76px; }
  .lobby-voucher { padding: 12px; flex-wrap: wrap; }
  .lobby-voucher form { flex-basis: 100%; }
}