:root {
  --bg: #f3f6f5;
  --paper: #ffffff;
  --panel: #ffffff;
  --border: #dfe4e2;
  --text: #17201e;
  --text-2: #3e4846;
  --muted: #68716f;
  --primary: #087f6a;
  --primary-2: #056a59;
  --primary-soft: #e6f4f0;
  --green: #087f6a;
  --green-soft: #e6f4f0;
  --red: #b43b45;
  --red-soft: #fdecee;
  --amber: #a7650b;
  --amber-soft: #fff4df;
  --sidebar: #151b1a;
  --sidebar-2: #202826;
  --sidebar-muted: #99a4a1;
  --radius: 6px;
  --shadow: 0 4px 16px rgba(23, 32, 30, 0.025);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: Inter, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans Devanagari", sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea {
  font-family: inherit;
  font-size: 13px;
}

button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.65; }
.hidden { display: none !important; }

/* ---------- 语言切换 ---------- */
.language-select {
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text);
  background: var(--paper);
  outline: none;
  font: inherit;
  font-size: 12px;
}

.language-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 127, 106, 0.08);
}

.language-corner {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
}

/* ---------- 通用品牌 ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(8, 127, 106, 0.25);
}

.brand-mark.large {
  width: 48px;
  height: 48px;
  border-radius: 6px;
}

.brand b {
  display: block;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.brand em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #aab4b1;
  margin-top: 2px;
}

/* ---------- 按钮 ---------- */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  min-height: 38px;
  font-weight: 650;
  font-size: 13px;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  text-decoration: none;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  box-shadow: none;
}

.btn-primary:hover { background: var(--primary-2); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  background: var(--paper);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover { background: #f9fbfa; border-color: #b8c1be; }

.btn-block { width: 100%; }
.btn-block + .btn-block { margin-top: 10px; }

.link-btn {
  background: none;
  border: none;
  color: var(--sidebar-muted);
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 8px;
}

.link-btn.active { color: #fff; background: rgba(255, 255, 255, 0.1); }

/* ---------- 登录页 ---------- */
.login-page {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(320px, 43%) 1fr;
  background: var(--paper);
}

.login-top {
  padding: 56px;
  background: var(--sidebar);
  color: #fff;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  position: relative;
  overflow: hidden;
}

.login-top .brand-mark {
  width: 48px;
  height: 48px;
}

.brand-name {
  margin: 2px 0 3px;
  font-size: 18px;
  font-weight: 760;
  color: #fff;
}

.brand-caption {
  margin: 0;
  color: #aab4b1;
  font-size: 13px;
}

.login-top:after {
  content: "";
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 56px;
  height: 1px;
  background: #34403d;
}

.login-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.login-card {
  width: min(460px, 100%);
  background: transparent;
  padding: 0;
  box-shadow: none;
  animation: rise 0.42s ease both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.login-logo { display: none; }

.login-card h1 {
  text-align: left;
  margin: 0;
  font-size: 28px;
  letter-spacing: 0;
}

.login-subtitle {
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0 34px;
}

.login-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg);
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 24px;
  width: max-content;
}

.login-tabs .tab {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 7px 14px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
}

.login-tabs .tab.active {
  background: var(--paper);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.login-card label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #3e4846;
  font-size: 13px;
  font-weight: 650;
  margin: 16px 0 7px;
}

.input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cfd6d4;
  border-radius: 5px;
  padding: 0 11px;
  background: var(--paper);
  color: #7b8582;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 127, 106, 0.1);
}

.input-wrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  min-height: 42px;
  padding: 9px 0;
  color: var(--text);
}

.input-wrap input::placeholder { color: #9ca6a3; }

.login-card .btn-block { margin-top: 24px; min-height: 45px; }
.login-foot {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  margin: 18px 0 0;
}

/* ---------- 工作台布局 ---------- */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: var(--sidebar);
  color: #aab6d0;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 25px;
  border-bottom: 1px solid #303836;
}
.sidebar-brand .brand-mark { width: 36px; height: 36px; }
.sidebar-brand-text { min-width: 0; }
.sidebar-brand-text strong { display: block; font-size: 14px; color: #fff; }
.sidebar-brand-text small { display: block; color: var(--sidebar-muted); margin-top: 2px; font-size: 12px; }

.nav {
  display: grid;
  gap: 4px;
  margin-top: 22px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--sidebar-muted);
  font-size: 13px;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.nav-item:hover { background: var(--sidebar-2); color: #fff; }

.nav-item.active {
  background: #293431;
  color: #fff;
  box-shadow: none;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 18px 8px 0;
  border-top: 1px solid #303836;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #35413e;
  color: #dce4e1;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.avatar.small { width: 28px; height: 28px; font-size: 11px; }

.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-info b { display: block; color: #fff; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info span { font-size: 11px; color: var(--sidebar-muted); }

.logout-btn {
  border: none;
  background: transparent;
  color: var(--sidebar-muted);
  padding: 6px;
  border-radius: 4px;
  display: inline-flex;
}

.logout-btn:hover { background: #293431; color: #fff; }

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

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 69px;
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid var(--border);
  padding: 0 34px;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topbar h2 { margin: 0; font-size: 18px; }

.topbar-right { display: flex; align-items: center; gap: 18px; }

.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.sync-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

#pageContent {
  flex: 1;
  overflow-y: auto;
  padding: 30px 34px 54px;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}

.page { display: none; }
.page.active { display: block; animation: fadeIn 0.22s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 卡片与面板 ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.panel + .panel { margin-top: 18px; }

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}

.panel-head.between { align-items: center; justify-content: space-between; }

.panel-head h3 { margin: 0; font-size: 16px; }
.panel-sub { color: var(--muted); font-size: 12px; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}

.stats-row.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 18px 20px;
}

.stats-row .stat-card:first-child {
  background: var(--sidebar);
  border-color: var(--sidebar);
}

.stats-row .stat-card:first-child .stat-label,
.stats-row .stat-card:first-child .unit,
.stats-row .stat-card:first-child .slash,
.stats-row .stat-card:first-child .accent {
  color: #9ba5a2;
}

.stats-row .stat-card:first-child .stat-value {
  color: #fff;
  font-size: 34px;
}

.stats-row .stat-card:first-child .balance-value { color: #fff !important; }

.stat-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 8px;
}

.stat-value {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.stat-value .unit {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-2);
  margin-left: 3px;
}

.stat-value .slash { color: var(--muted); font-weight: 600; margin: 0 4px; font-size: 20px; }
.stat-value .accent { color: var(--primary); }
.muted { color: var(--muted); font-weight: 400; }

.balance-value { color: var(--primary) !important; }

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 18px;
}

.workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  align-items: start;
}

.main-col { min-width: 0; }
.side-stack { display: flex; flex-direction: column; gap: 16px; }
.side-stack .stat-card { box-shadow: var(--shadow); }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 650;
  font-size: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: #f8faf9;
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #e8ecea;
  color: var(--text);
  white-space: nowrap;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:not(.empty-row):hover { background: #fbfcfc; }
.empty-row td { text-align: center; color: var(--muted); padding: 26px 0; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  padding: 3px 8px;
  background: var(--bg);
  color: #596360;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8e9895;
}

.status-success { background: var(--primary-soft); color: var(--primary); }
.status-running { background: var(--primary-soft); color: var(--primary); }
.status-waiting { background: var(--amber-soft); color: var(--amber); }
.status-error { background: var(--red-soft); color: var(--red); }
.status-success::before, .status-running::before { background: var(--primary); }
.status-waiting::before { background: var(--amber); }
.status-error::before { background: var(--red); }

.at-email { margin-top: 3px; font-size: 11px; color: var(--muted); word-break: break-all; }
td .status-pill { vertical-align: middle; }

.change-plus { color: var(--primary); font-weight: 700; }
.change-minus { color: var(--red); font-weight: 700; }

.text-ellipsis { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* 链接列：完整显示，不做省略号截断（长链接按字符换行） */
.data-table td.link-cell {
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 320px;
  max-width: 560px;
}

.data-table td.link-cell .copy-link {
  display: block;
  max-width: 100%;
  white-space: normal;
  word-break: break-all;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.6;
}

.row-action {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 12px;
}

.row-action:hover { border-color: #b8c1be; color: var(--text); }

/* ---------- 文本域与代码 ---------- */
.code-textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  border: 1px solid #cfd6d4;
  border-radius: 5px;
  padding: 12px;
  background: var(--paper);
  color: var(--text);
  line-height: 1.55;
  outline: none;
  font-family: Consolas, "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.code-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8, 127, 106, 0.1); }
.code-textarea::placeholder { color: #9ca6a3; }

.code-block {
  margin: 0;
  padding: 15px 16px;
  background: var(--sidebar);
  color: #dbe7e3;
  border-radius: 5px;
  font-family: Consolas, "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

.counter {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  margin-top: 8px;
}

.counter span { color: var(--primary); font-weight: 700; }

.panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.hint-line {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}

.quota-hint {
  font-size: 12px;
  color: var(--muted);
  margin: 12px 0 0;
}

/* ---------- 流水列表 ---------- */
.flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flow-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid #e8ecea;
}

.flow-list li:last-child { border-bottom: none; }

.flow-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.flow-type .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.flow-type.recharge .dot { background: var(--primary); }
.flow-type.deduct .dot { background: var(--red); }

.flow-detail { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-all; }
.flow-time { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.flow-amount { font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ---------- 信息列表 ---------- */
.info-list { margin: 0; }

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #e8ecea;
}

.info-row:last-child { border-bottom: none; }
.info-row dt { font-size: 13px; color: var(--text-2); }
.info-row dd { margin: 0; font-size: 14px; font-weight: 700; }

/* ---------- 系统配置表单 ---------- */
.settings-form { display: grid; gap: 16px; }

.settings-form label {
  display: grid;
  gap: 8px;
  color: #3e4846;
  font-size: 13px;
  font-weight: 650;
}

.settings-form input[type="number"] {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid #cfd6d4;
  border-radius: 5px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.settings-form input[type="number"]:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(8, 127, 106, 0.1);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.check-row {
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px !important;
  padding: 13px;
  background: var(--bg);
  border-radius: 5px;
  cursor: pointer;
}

.check-row input {
  width: 17px;
  min-height: 17px;
  margin: 2px 0 0;
  accent-color: var(--primary);
}

.check-row span,
.check-row strong,
.check-row small {
  display: block;
}

.check-row strong { font-size: 13px; color: var(--text); }
.check-row small { margin-top: 4px; color: var(--muted); font-weight: 400; line-height: 1.5; }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 4px;
}

/* ---------- 弹窗 ---------- */
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 18, 16, 0.58);
  backdrop-filter: blur(3px);
}

.modal {
  width: 420px;
  background: #fff;
  border-radius: 7px;
  padding: 24px;
  box-shadow: 0 16px 44px rgba(17, 29, 26, 0.08);
}

.modal h3 { margin: 0 0 20px; font-size: 18px; }
.modal-sub { margin: 0 0 18px; color: var(--muted); font-size: 12px; }

.modal label {
  display: block;
  font-size: 13px;
  font-weight: 650;
  color: var(--text-2);
  margin: 12px 0 7px;
}

.modal input {
  width: 100%;
  border: 1px solid #cfd6d4;
  border-radius: 5px;
  min-height: 42px;
  padding: 9px 11px;
  outline: none;
  background: var(--paper);
}

.modal input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8, 127, 106, 0.1); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.secret-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--primary-soft);
  border: 1px solid #c9e8df;
  border-radius: 5px;
  padding: 14px;
}

.secret-box code {
  flex: 1;
  color: var(--primary-2);
  font-size: 12px;
  word-break: break-all;
  font-family: Consolas, monospace;
  line-height: 1.6;
}

.secret-box .btn-secondary { flex-shrink: 0; padding: 7px 12px; font-size: 12px; }

/* ---------- Toast ---------- */
.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.toast {
  background: var(--sidebar);
  color: #fff;
  border-radius: 5px;
  padding: 12px 16px;
  font-size: 13px;
  box-shadow: 0 16px 44px rgba(17, 29, 26, 0.08);
  animation: toastIn 0.2s ease;
  max-width: 380px;
}

.toast.success { background: var(--primary-2); }
.toast.error { background: #7d2931; }
.toast.info { background: var(--sidebar); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1100px) {
  .panel-grid, .workbench { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr; }
  .stats-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .sidebar { width: 78px; }
  .sidebar-brand-text, .nav-item span, .sidebar-user-info, .logout-btn { display: none; }
  .nav-item { justify-content: center; }
  .sidebar-user { justify-content: center; padding: 12px 0; }
}

@media (max-width: 920px) {
  .login-page { grid-template-columns: 1fr; }
  .login-top { min-height: 116px; padding: 24px; }
  .login-top:after { display: none; }
  .login-center { padding: 38px 20px; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 20px; }
  #pageContent { padding: 22px 20px 42px; }
  .stats-row .stat-card:first-child .stat-value { font-size: 29px; }
  .stat-card { padding: 20px; }
  .stats-row.cols-4 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ---------- 供货商定制 ---------- */
.nav-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #c9d3c8;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.nav-item.active .nav-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.row-action.danger {
  color: var(--red);
  border-color: #efd0d3;
  background: var(--red-soft);
}

.row-action.danger:hover {
  background: var(--red-soft);
  border-color: var(--red);
}


/* ---------- 「磨蹭封禁」提示条 + 弹窗 ---------- */
/* 工人账号连续两张「接单超过 3 分 30 秒才失败」会被临时禁止接单。
   提示条挂在内容区顶部（和身份条一样），桌面端 / 手机端都看得见。
   注意：[hidden] 的 UA 规则优先级低于类选择器，必须显式补一条 display:none。 */
.worker-ban-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border: 1px solid #f0c9cd;
  border-radius: 6px;
  background: #fdecee;
  color: #b43b45;
  font-size: 12.5px;
}

.worker-ban-strip[hidden] { display: none; }
.worker-ban-label { font-weight: 700; letter-spacing: 0.02em; }
.worker-ban-sub { color: var(--muted); }
.worker-ban-sub b { color: #b43b45; }

.ban-modal { max-width: 460px; }
.ban-modal h3 { color: #b43b45; }
.ban-until-line {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
.ban-until-line b { color: #b43b45; }

/* ---------- 「20 秒不接单」提醒弹窗 ---------- */
/* 复用 .modal 基础样式，只加宽一点（四种语言里德语/印地语换行多）并把倒计时那行标成警示色。 */
.noclaim-modal { max-width: 460px; }
.noclaim-modal h3 { color: var(--amber); }
.noclaim-warn { color: var(--amber); }
.noclaim-warn b { font-size: 15px; }

/* ---------- 工人身份标识：所属老板 ---------- */
/* 工人账号在内容区顶部常驻一条「所属老板」，桌面端与手机端都可见。
   注意：[hidden] 的 UA 规则优先级低于类选择器，必须显式补一条 display:none，
   否则下面的 display:flex 会把它盖掉、隐藏失效。 */
.worker-boss-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border: 1px solid #cfe4dd;
  border-radius: 6px;
  background: var(--primary-soft);
  font-size: 12.5px;
}

.worker-boss-strip[hidden] { display: none; }

.worker-boss-label {
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.worker-boss-account { color: var(--primary); word-break: break-all; }

/* ---------- 工人列表：老板重置工人支付数量 ---------- */
/* 只作用于工人表这一格（订单表的 .row-actions 保持原样，避免影响面外溢） */
.worker-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.row-action.reset {
  color: var(--primary);
  border-color: #cfe4dd;
  background: var(--primary-soft);
}

.row-action.reset:hover { border-color: var(--primary); color: var(--primary-2); }

.counter-reset-tag {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
}

.accepting-toggle { min-width: 88px; background: var(--primary); color: #fff; }
.accepting-toggle.off { background: var(--red); border-color: var(--red); }
.accepting-state { font-size: 22px; color: var(--primary); }
.accepting-state.off { color: var(--red); }
.auto-refresh-control { display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:13px; color:var(--text-2); }
.auto-refresh-control input { width:auto; }
.refresh-seconds { width:64px; min-height:36px; padding:6px 8px; border:1px solid #cfd6d4; border-radius:5px; }
.copy-link { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0; border:0; background:transparent; color:var(--primary); text-align:left; cursor:pointer; }
.copy-link:hover { text-decoration:underline; }
.supplier-money-stats { margin-bottom: 14px; }
.finance-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.withdrawal-form { padding: 0 18px 18px; }
.withdrawal-form label { display: block; margin: 13px 0 7px; color: var(--text-2); font-weight: 650; font-size: 13px; }
.withdrawal-form input, .withdrawal-form select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid #cfd6d4; border-radius: 5px; background: #fff; outline: none; }
.withdrawal-form input:focus, .withdrawal-form select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8, 127, 106, .1); }
.withdrawal-form button { width: 100%; margin-top: 18px; }
@media (max-width: 1000px) { .finance-grid { grid-template-columns: 1fr; } }

/* ---------- 手机端适配：侧边栏转为底部导航 ---------- */
@media (max-width: 768px) {
  .app {
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
  }

  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid #303836;
  }

  .sidebar-brand { display: none; }

  .nav {
    flex: 1;
    display: flex;
    gap: 2px;
    margin-top: 0;
  }

  .nav-item {
    position: relative;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 4px 2px;
    border-radius: 6px;
  }

  .nav-item svg { width: 20px; height: 20px; }

  .nav-item span {
    display: block;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
  }

  .nav-badge {
    position: absolute;
    top: 2px;
    left: 50%;
    margin: 0 0 0 6px;
  }

  .sidebar-user {
    margin: 0 0 0 2px;
    padding: 0;
    border-top: none;
    justify-content: center;
  }

  .sidebar-user .avatar,
  .sidebar-user-info { display: none; }

  .logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-height: 52px;
  }

  .main { min-height: 0; }

  .topbar { min-height: 54px; padding: 0 12px; }
  .topbar h2 { font-size: 16px; }
  .topbar-right { gap: 8px; }
  .topbar-right .language-select { max-width: 48px; padding: 0 5px; font-size: 11px; }
  .sync-badge { display: none; }
  .accepting-toggle { min-width: 0; padding: 6px 10px; }

  #pageContent {
    padding: 16px 14px calc(86px + env(safe-area-inset-bottom));
  }

  .panel { padding: 16px 14px; }
  .panel + .panel { margin-top: 14px; }
  .panel-head { flex-wrap: wrap; row-gap: 4px; }
  .panel-head.between { flex-wrap: wrap; gap: 10px; }

  .stats-row { gap: 10px; margin-bottom: 14px; }
  .stats-row.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stat-card { padding: 14px 16px; }
  .stat-value { font-size: 20px; }
  .accepting-state { font-size: 18px; }
  .stats-row .stat-card:first-child .stat-value { font-size: 26px; }

  .panel-grid, .workbench, .finance-grid { gap: 14px; }
  .withdrawal-form { padding: 0; }

  /* iOS 聚焦输入框时防止自动放大 */
  input, select, textarea { font-size: 16px; }

  .panel-actions { flex-wrap: wrap; }
  .form-actions .btn-primary,
  .form-actions .btn-secondary { flex: 1; }

  .table-wrap { -webkit-overflow-scrolling: touch; }
  .text-ellipsis { max-width: 160px; }
  .data-table td.link-cell { min-width: 220px; max-width: 320px; }

  .modal-mask { padding: 16px; }
  .modal {
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 20px 16px;
  }
  .modal-actions .btn-primary,
  .modal-actions .btn-secondary { flex: 1; }

  .toast-stack {
    left: 14px;
    right: 14px;
    bottom: calc(80px + env(safe-area-inset-bottom));
    align-items: center;
  }
  .toast { max-width: 100%; }

  .login-top { padding: 20px; min-height: 0; }
  .login-center { padding: 30px 18px 40px; }
  .login-subtitle { margin-bottom: 24px; }
  .language-corner { top: 12px; right: 12px; }
}

/* ---- 接单倒计时 ---- */
.countdown-cell {
  display: inline-block;
  min-width: 58px;
  padding: 3px 8px;
  color: var(--primary, #087f6a);
  background: var(--primary-soft, #e6f4f0);
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* 剩余 60 秒内：转为琥珀色提醒 */
.countdown-cell.urgent {
  color: #a7650b;
  background: #fdf3e3;
}
/* 倒计时归零：订单已超时，作为可接单的提示 */
.countdown-cell.expired {
  color: #b43b45;
  background: #fdecee;
}

/* ---------- 链接列二维码按钮 + 二维码弹窗 ---------- */
.data-table td.link-cell .link-text {
  display: block;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 未接单：只给掩码链接，并禁止选中复制 */
.data-table td.link-cell .link-text.locked {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
  cursor: not-allowed;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.data-table td.link-cell .lock-tag {
  display: inline-block;
  margin: 5px 0 0;
  padding: 2px 8px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
  white-space: nowrap;
}

.qr-btn {
  display: inline-block;
  margin: 6px 0 0;
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--primary);
  font-size: 12px;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
}

.qr-btn:hover { border-color: var(--primary); background: var(--primary-soft); }

.modal.qr-modal { width: 340px; }

.qr-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 236px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.qr-box img,
.qr-box canvas { display: block; max-width: 100%; }

.qr-link {
  margin: 12px 0 0;
  padding: 8px 10px;
  max-height: 96px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.qr-order {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

@media (max-width: 1000px) {
  .modal.qr-modal { width: 100%; max-width: 340px; }
}

/* ---- 老板 / 工人两级账号 ---- */
.panel-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.panel-head-actions .btn-primary {
  padding: 7px 16px;
  font-size: 13px;
}

/* 工人账号：金额一律不渲染（服务端同时已剥离金额字段，抓包也拿不到） */
body.is-worker .money-only {
  display: none !important;
}

/* 工人账号：隐藏「余额与提现」入口 */
body.is-worker .nav-item[data-page="finance"] {
  display: none;
}

/* 工人 + 非老板的普通供货商：隐藏「我的工人」「团队订单」入口。
   老板身份由管理员在管理端「供货商」页标记（users.is_boss），服务端也会拦截接口。 */
body.not-boss .nav-item[data-page="workers"],
body.not-boss .nav-item[data-page="team"] {
  display: none;
}
/* 顶部官方社群引导条（TG 群 / QQ 群） */
.contact-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  font-size: 12.5px;
}
.contact-strip-label {
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.contact-strip-item {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  word-break: break-all;
}
a.contact-strip-item:hover { text-decoration: underline; }
.contact-strip-sep {
  width: 1px;
  height: 12px;
  background: var(--border);
}

/* 工人账号：界面只保留「接任务」。
   总览（余额与统计）、余额与提现两页整块隐藏，顶部官方社群引导条也不出现。
   服务端同样不向工人返回任何金额字段，也不允许工人提现 —— 这里只是界面层的收敛。 */
body.is-worker .nav-item[data-page="overview"],
body.is-worker .nav-item[data-page="finance"],
body.is-worker #page-overview,
body.is-worker #page-finance,
body.is-worker .contact-strip {
  display: none !important;
}

/* 新增工人弹层：单个 / 批量 模式切换 */
.mode-tabs {
  display: flex;
  gap: 6px;
  margin: 4px 0 12px;
}
.mode-tab {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mode-tab:hover { border-color: var(--primary); color: var(--primary); }
.mode-tab.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-2);
}
.field-row { display: flex; gap: 10px; }
.field-row > div { flex: 1; min-width: 0; }
.field-hint {
  margin: -4px 0 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}
.batch-result {
  margin: 4px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.batch-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.batch-result textarea {
  display: block;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  resize: vertical;
}
.btn-mini { padding: 3px 10px; font-size: 12px; }

/* ---------- 新订单声音提醒开关 ---------- */
.alarm-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.alarm-toggle.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.alarm-toggle.ringing { animation: alarmPulse 0.9s ease-in-out infinite; }
@keyframes alarmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(8, 127, 106, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(8, 127, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(8, 127, 106, 0); }
}

/* ---------- 进行中订单的剩余时间提示 ---------- */
.countdown-hint {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

/* WebUI Refresh 20260921 */
:root {
  --bg: #f4f6fb;
  --paper: #ffffff;
  --panel: #ffffff;
  --border: #dbe3f1;
  --text: #182842;
  --text-2: #3d4d68;
  --muted: #62748d;
  --primary: #315fdb;
  --primary-2: #244bb6;
  --primary-soft: #eef3ff;
  --green: #1f9b74;
  --green-soft: #e9f8f2;
  --red: #c94d61;
  --red-soft: #fff0f3;
  --amber: #b47716;
  --amber-soft: #fff7e8;
  --sidebar: #15243d;
  --sidebar-2: #1f3354;
  --sidebar-muted: #aebbd1;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(26, 45, 80, 0.07);
  --shadow-soft: 0 3px 12px rgba(26, 45, 80, 0.05);
}

html { background: var(--bg); }
body {
  color: var(--text);
  background:
    radial-gradient(circle at 95% -10%, rgba(49, 95, 219, 0.09), transparent 28rem),
    var(--bg);
  font-family: "Segoe UI Variable", "PingFang SC", "Microsoft YaHei", "Noto Sans", sans-serif;
  letter-spacing: 0.005em;
}
button, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(49, 95, 219, 0.28);
  outline-offset: 2px;
}
[hidden], .hidden { display: none !important; }

/* Login: calm blue-white entry point */
.login-page {
  background: var(--paper);
  grid-template-columns: minmax(320px, 41%) 1fr;
}
.login-top {
  padding: 58px clamp(28px, 5vw, 72px);
  background:
    radial-gradient(circle at 25% 12%, rgba(99, 140, 255, 0.24), transparent 22rem),
    linear-gradient(155deg, #15243d 0%, #1c3155 100%);
}
.login-top .brand-mark, .sidebar-brand .brand-mark {
  background: linear-gradient(145deg, #4d79ec, #315fdb);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(6, 21, 52, 0.28);
}
.login-top:after { left: clamp(28px, 5vw, 72px); right: clamp(28px, 5vw, 72px); background: rgba(206, 220, 255, 0.24); }
.login-center { padding: clamp(28px, 6vw, 84px); }
.login-card {
  width: min(470px, 100%);
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 20px 48px rgba(35, 57, 99, 0.10);
}
.login-card h1 { color: var(--text); letter-spacing: -0.025em; font-size: clamp(26px, 3vw, 32px); }
.login-subtitle { color: var(--muted); margin-bottom: 28px; }
.login-card label { color: var(--text-2); margin-top: 18px; }
.input-wrap {
  min-height: 44px;
  border-color: #cbd6e8;
  border-radius: 11px;
  background: #fbfcff;
}
.input-wrap:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(49, 95, 219, 0.13); background: #fff; }
.input-wrap input { min-height: 42px; }
.login-card .btn-block { min-height: 46px; margin-top: 28px; }

/* App frame and navigation */
.app { background: transparent; }
.sidebar {
  width: 248px;
  padding: 25px 16px;
  background: linear-gradient(180deg, #15243d 0%, #13213a 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
}
.sidebar-brand { padding: 0 10px 24px; border-bottom-color: rgba(202, 219, 255, 0.16); }
.sidebar-brand-text strong { letter-spacing: .09em; }
.sidebar-brand-text small { color: #aebbd1; }
.nav { gap: 6px; margin-top: 22px; }
.nav-item {
  min-height: 44px;
  padding: 0 13px;
  border-radius: 11px;
  color: var(--sidebar-muted);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item:hover { color: #fff; background: rgba(111, 148, 232, .14); transform: translateX(2px); }
.nav-item.active {
  color: #fff;
  background: linear-gradient(100deg, rgba(77, 121, 236, .34), rgba(49, 95, 219, .16));
  box-shadow: inset 3px 0 0 #6a90f1, 0 6px 16px rgba(6, 17, 39, .16);
}
.nav-badge { background: rgba(255,255,255,.14); color: #e5edff; border-radius: 999px; }
.sidebar-user { padding: 18px 9px 0; border-top-color: rgba(202, 219, 255, 0.16); }
.avatar { background: #2f4b77; color: #eaf0ff; }
.logout-btn { min-height: 40px; border-radius: 9px; }
.logout-btn:hover { background: rgba(111,148,232,.16); }

/* Topbar and controls */
.topbar {
  min-height: 76px;
  padding: 0 clamp(18px, 3vw, 38px);
  background: rgba(255,255,255,.86);
  border-bottom-color: var(--border);
  box-shadow: 0 2px 14px rgba(27, 50, 91, .04);
}
.topbar h2 { font-size: 20px; letter-spacing: -.02em; }
.topbar-right { gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.language-select, .refresh-seconds {
  min-height: 40px;
  border-color: #cbd6e8;
  border-radius: 10px;
  background: #fff;
}
.sync-badge { padding: 6px 10px; border-radius: 999px; background: var(--green-soft); color: #257d63; }
.sync-badge i { background: var(--green); box-shadow: 0 0 0 4px rgba(31,155,116,.13); }
.btn-primary, .btn-secondary, .accepting-toggle {
  min-height: 44px;
  border-radius: 10px;
  padding: 9px 15px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary { background: linear-gradient(135deg, #3f6fe5, #315fdb); border-color: #315fdb; box-shadow: 0 6px 14px rgba(49,95,219,.2); }
.btn-primary:hover { background: linear-gradient(135deg, #315fdb, #244bb6); box-shadow: 0 8px 18px rgba(49,95,219,.28); transform: translateY(-1px); }
.btn-secondary { border-color: #cbd6e8; color: var(--text-2); background: #fff; }
.btn-secondary:hover { color: var(--primary-2); background: var(--primary-soft); border-color: #9eb6ee; }
.accepting-toggle { box-shadow: 0 6px 14px rgba(49,95,219,.18); }
.accepting-toggle.off { background: var(--red); border-color: var(--red); box-shadow: 0 6px 14px rgba(201,77,97,.18); }
.auto-refresh-control { min-height: 40px; }
.auto-refresh-control input { accent-color: var(--primary); }

#pageContent { max-width: 1600px; padding: clamp(20px, 3vw, 36px) clamp(18px, 3vw, 38px) 58px; }
.page.active { animation: fadeInRefresh .22s ease both; }
@keyframes fadeInRefresh { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* Panels, metrics, and tables */
.panel, .stat-card {
  border-color: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.panel { padding: clamp(18px, 2vw, 24px); }
.panel-head { margin-bottom: 18px; }
.panel-head h3 { color: var(--text); font-size: 17px; letter-spacing: -.01em; }
.panel-sub, .stat-label { color: var(--muted); }
.stats-row { gap: 14px; margin-bottom: 16px; }
.stat-card { padding: 20px 21px; background: rgba(255,255,255,.95); }
.stats-row .stat-card:first-child {
  background: linear-gradient(145deg, #15243d, #244574);
  border-color: #20385e;
  box-shadow: 0 12px 25px rgba(21,36,61,.16);
}
.stat-value { color: var(--text); font-size: 23px; }
.stats-row .stat-card:first-child .stat-value { color: #fff; }
.stat-value .unit { color: var(--muted); }
.balance-value { color: var(--primary) !important; }
.data-table { font-size: 12.5px; }
.data-table th {
  padding: 13px 14px;
  background: #f4f7fc;
  color: #60718d;
  border-bottom-color: var(--border);
  letter-spacing: .02em;
}
.data-table td { padding: 14px; border-bottom-color: #e8edf5; }
.data-table tbody tr:not(.empty-row):hover { background: #f7f9ff; }
.status-pill { border-radius: 999px; padding: 5px 10px; background: #f1f4f9; }

/* ---------- 渠道徽标：工人接单前一眼分清 Adobe / UPI ----------
   颜色 + 文字双通道区分：Adobe = 琥珀色，UPI = 主色蓝。
   沿用主题变量，所以第二套调色板（WebUI Refresh 20260921）下同样自适应。 */
.source-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: middle;
}
.source-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .85;
}
.source-badge.src-adobe {
  background: var(--amber-soft);
  color: var(--amber);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 38%, transparent);
}
.source-badge.src-upi {
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent);
}

/* Operational strips and forms */
.contact-strip, .worker-boss-strip, .worker-ban-strip {
  border-radius: 11px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.contact-strip { border-color: #d5e0f3; background: #fff; }
.contact-strip-item, .worker-boss-account { color: var(--primary); }
.worker-boss-strip { border-color: #cbdafa; background: var(--primary-soft); }
.worker-ban-strip { border-color: #f2c9d0; background: var(--red-soft); }
.withdrawal-form input, .withdrawal-form select, .modal input, .modal select, .modal textarea {
  min-height: 44px;
  border-color: #cbd6e8;
  border-radius: 10px;
}
.withdrawal-form input:focus, .withdrawal-form select:focus, .modal input:focus, .modal select:focus, .modal textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(49,95,219,.12);
}
.check-row { border-radius: 10px; background: #f5f7fb; }

/* Dialogs and notifications */
.modal-mask { background: rgba(13, 28, 53, .58); backdrop-filter: blur(6px); }
.modal {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 24px 60px rgba(15, 31, 62, .24);
}
.modal h3 { color: var(--text); font-size: 19px; }
.modal-actions { gap: 10px; }
.secret-box { border-color: #cbdafa; border-radius: 11px; background: var(--primary-soft); }
.toast-stack { right: 24px; bottom: 24px; gap: 10px; }
.toast { border-radius: 11px; box-shadow: 0 12px 30px rgba(15,31,62,.2); }
.toast.success { background: #207f67; }
.toast.error { background: #b23f53; }

/* Links, row actions, QR, and countdown states */
.row-action, .qr-btn, .mode-tab { border-radius: 9px; border-color: #cbd6e8; }
.row-action:hover, .qr-btn:hover { border-color: var(--primary); background: var(--primary-soft); }
.qr-box { border-radius: 11px; border-color: var(--border); }
.countdown-cell { border-radius: 999px; color: var(--primary); background: var(--primary-soft); }
.countdown-cell.urgent { color: var(--amber); background: var(--amber-soft); }
.countdown-cell.expired { color: var(--red); background: var(--red-soft); }

/* Responsive workbench: preserve all page states while remaining usable */
@media (max-width: 1100px) {
  .sidebar { width: 82px; padding-inline: 10px; }
  .sidebar-brand-text, .nav-item span, .sidebar-user-info, .logout-btn { display: none; }
  .nav-item { justify-content: center; padding-inline: 0; }
  .nav-item.active { box-shadow: 0 6px 15px rgba(6,17,39,.16); }
  .sidebar-user { justify-content: center; padding-inline: 0; }
  .topbar-right { gap: 8px; }
}
@media (max-width: 768px) {
  .sidebar { width: 100%; background: #15243d; border-top-color: rgba(202,219,255,.18); }
  .topbar { min-height: 62px; padding: 0 14px; }
  .topbar-right { gap: 6px; }
  .topbar-right .btn-secondary, .topbar-right .accepting-toggle { min-height: 40px; padding-inline: 10px; }
  #pageContent { padding: 16px 14px 90px; }
  .panel { padding: 16px 14px; }
  .stats-row.cols-4 { gap: 10px; }
  .stat-card { padding: 16px; }
  .modal { border-radius: 14px; padding: 21px 16px; }
}
@media (max-width: 480px) {
  .login-page { display: block; }
  .login-top { min-height: 114px; padding: 22px 20px; }
  .login-top:after { display: none; }
  .login-center { padding: 22px 16px 40px; }
  .login-card { padding: 22px 18px; border-radius: 14px; }
  .topbar h2 { font-size: 17px; }
  .topbar-right .language-select, .topbar-right .sync-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Secondary content blocks keep the same surface language */
.code-textarea, .settings-form input[type="number"] {
  min-height: 44px;
  border-color: #cbd6e8;
  border-radius: 10px;
  background: #fbfcff;
}
.code-textarea:focus, .settings-form input[type="number"]:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(49,95,219,.12); }
.code-block { border-radius: 11px; background: #162943; color: #dbe6ff; }
.flow-list li, .info-row { border-bottom-color: #e8edf5; }
.flow-type { color: var(--text-2); }
.flow-detail, .flow-time, .hint-line, .quota-hint { color: var(--muted); }
.data-table td.link-cell { min-width: 280px; }
.mode-tab { min-height: 44px; background: #fff; }
.mode-tab.active { border-color: #8ea9ec; background: var(--primary-soft); color: var(--primary-2); }
.panel-actions { gap: 10px; }
.form-actions { gap: 10px; }

/* Ensure all toolbar widgets retain a comfortable 44px hit target */
.topbar-right input[type="number"], .topbar-right select,
.topbar-right button, .topbar-right label { min-height: 40px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* Preserve semantic visibility for runtime-controlled state classes */
.worker-boss-strip[hidden], .worker-ban-strip[hidden], .modal-mask.hidden,
body.is-worker .money-only { display: none !important; }

/* Explicit semantic states: neutral component styling must not erase status. */
.status-success { color: #177858; background: var(--green-soft); }
.status-success::before { background: var(--green); }
.status-running { color: var(--primary-2); background: var(--primary-soft); }
.status-running::before { background: var(--primary); }
.status-waiting { color: #98600c; background: var(--amber-soft); }
.status-waiting::before { background: var(--amber); }
.status-error { color: #ad364d; background: var(--red-soft); }
.status-error::before { background: var(--red); }
.ban-modal h3 { color: var(--red); }
.stats-row .stat-card:first-child .stat-label,
.stats-row .stat-card:first-child .unit,
.stats-row .stat-card:first-child .slash,
.stats-row .stat-card:first-child .accent { color: #c5d5f2; }
.brand-caption { color: #bdcbe1; }
.row-action, .qr-btn, .btn-mini, .logout-btn,
.language-select, .refresh-seconds,
.topbar-right input[type="number"], .topbar-right select,
.topbar-right button, .topbar-right label { min-height: 44px; }
.logout-btn { align-items: center; justify-content: center; min-width: 40px; }
.topbar { flex-shrink: 0; gap: 16px; padding-top: 12px; padding-bottom: 12px; }
.topbar h2 { flex-shrink: 0; }
.topbar-right { min-width: 0; }
@media (max-width: 1100px) and (min-width: 769px) {
  .sidebar-brand { padding: 0 0 22px; justify-content: center; }
  .nav-item { position: relative; }
  .nav-badge { position: absolute; top: 2px; right: 0; min-width: 18px; padding: 1px 4px; font-size: 10px; }
  .sidebar-user { flex-wrap: wrap; }
  .logout-btn { display: inline-flex; }
}
@media (max-width: 920px) {
  .login-page { grid-template-columns: 1fr; }
  .login-top { min-height: 124px; padding: 28px; }
  .login-top:after { display: none; }
  .login-center { padding: 38px 20px; }
}
@media (max-width: 768px) {
  .sidebar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .nav { gap: 2px; margin-top: 0; }
  .nav-item { min-height: 54px; padding: 5px 2px; }
  .nav-item:hover { transform: none; }
  .nav-item span { display: block; }
  .sidebar-user { padding: 0; }
  .logout-btn { display: inline-flex; min-height: 54px; }
  .topbar { align-items: flex-start; flex-direction: column; gap: 10px; padding: 16px 14px; }
  .topbar-right { justify-content: flex-start; width: 100%; gap: 8px; }
  .topbar-right .language-select { display: inline-block; max-width: 100px; padding: 0 10px; font-size: 14px; }
  .topbar-right .btn-secondary, .topbar-right .accepting-toggle { min-height: 44px; }
  #pageContent { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (max-width: 480px) {
  .login-top { padding: 22px 20px; }
  .login-center { padding: 22px 16px 40px; }
  .topbar-right .language-select { display: inline-block; }
  .panel-head-actions, .field-row { flex-wrap: wrap; }
  .field-row > div { flex-basis: 100%; }
  .data-table td.link-cell { min-width: 220px; }
}

/* Refresh mobile toast placement: keep notices above the fixed navigation. */
@media (max-width: 768px) {
  .toast-stack { left: 14px; right: 14px; bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* Supplier mobile repair: bounded navigation, predictable toolbar, no business changes. */
@media (max-width: 768px) {
  .sidebar { gap: 6px; border-right: 0; }
  .nav { min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .nav-item { flex: 1 0 72px; min-width: 72px; width: auto; gap: 5px; }
  .nav-item span { white-space: normal; text-align: center; line-height: 1.25; font-size: 11px; }
  .nav-badge { top: 0; }
  .sidebar-user { flex: 0 0 44px; margin: 0; border-left: 1px solid #344560; }
  .logout-btn { width: 44px; }
  .topbar { padding: 12px 14px; gap: 8px; }
  .topbar-right { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .topbar-right > .language-select { grid-column: span 2; max-width: none; width: 100%; order: 0; }
  #credentialsBtn { grid-column: span 2; order: 1; }
  #refreshBtn { grid-column: span 2; order: 2; }
  #acceptingToggle { grid-column: span 3; order: 3; }
  #alarmToggle { grid-column: span 3; order: 4; }
  .topbar-right .auto-refresh-control { grid-column: span 3; order: 5; white-space: normal; line-height: 1.3; }
  #autoRefreshSeconds { grid-column: span 2; width: 100%; min-width: 0; order: 6; }
  .topbar-right > [data-i18n="auto.seconds"] { order: 7; }
  .topbar-right button { min-width: 0; padding: 8px; white-space: normal; line-height: 1.3; }
  .input-wrap input, .topbar-right select, .refresh-seconds,
  .withdrawal-form input, .withdrawal-form select,
  .modal input:not([type="checkbox"]):not([type="radio"]), .modal textarea { font-size: 16px; }
  #pageContent { min-height: 0; padding: 14px 12px calc(88px + env(safe-area-inset-bottom)); }
  .panel, .stat-card, .finance-grid > * { min-width: 0; }
  .stats-row.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { padding: 14px; }
  .contact-strip-item, .worker-boss-account { overflow-wrap: anywhere; }
  .modal-mask { padding: 12px; }
  .modal { max-width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; }
}


/* Prominent official community notice, shared by public and supplier home. */
.contact-strip { gap: 12px 24px; padding: 18px 20px; margin-bottom: 20px; border: 1px solid #b7cdf4; border-left: 5px solid #315fdb; border-radius: 12px; background: #edf4ff; font-size: 17px; line-height: 1.6; }
.contact-strip-label { color: #182842; font-size: 18px; font-weight: 800; }
.contact-strip-item { color: #204fb9; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
a.contact-strip-item { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.contact-strip-sep { display: none; }
@media (max-width: 768px) {
  .contact-strip { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
  .contact-strip-label { width: 100%; font-size: 18px; }
  .contact-strip-item { max-width: 100%; font-size: 16px; line-height: 1.6; }
}

/* Owned orders become readable cards only on phones; preserve original controls. */
@media (max-width: 768px) {
  #page-mine .table-wrap { overflow: visible; border: 0; background: transparent; }
  #page-mine .data-table { display: block; width: 100%; min-width: 0; }
  #page-mine .data-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  #mineBody { display: grid; gap: 14px; }
  #mineBody > tr { display: grid; grid-template-columns: minmax(0, 1fr); padding: 14px; border: 1px solid #dbe3f1; border-radius: 12px; background: #fff; }
  #mineBody > tr > td { display: block; width: 100%; min-width: 0; max-width: none; padding: 10px 0; border: 0; border-bottom: 1px solid #edf1f7; white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: 14px; }
  #mineBody > tr > td::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #62748d; font-size: 12px; font-weight: 600; }
  #mineBody > tr > td:first-child { padding-top: 0; font-size: 16px; font-weight: 700; color: #182842; }
  #mineBody > tr > td:last-child { border-bottom: 0; padding-bottom: 0; }
  #mineBody .link-cell .copy-link { max-width: 100%; font-size: 14px; line-height: 1.55; }
  #mineBody .qr-btn { display: inline-flex; justify-content: center; align-items: center; padding: 8px 14px; min-height: 44px; margin-top: 10px; }
  #mineBody .row-actions { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; }
  #mineBody .row-action { flex: 1 1 100px; min-width: 0; min-height: 44px; white-space: normal; line-height: 1.4; padding: 10px 12px; font-size: 14px; }
  #mineBody .row-action[data-action="start"], #mineBody .row-action[data-action="complete"] { color: #fff; background: #315fdb; border-color: #315fdb; }
  #mineBody .countdown-cell { display: inline-flex; padding: 7px 12px; font-size: 16px; }
  #mineBody .countdown-hint { font-size: 12px; line-height: 1.5; }
  #mineBody .empty-row > td { text-align: center; padding: 18px 0; }
  #mineBody .empty-row > td::before { display: none; }
}
@media (max-width: 768px) {
  #mineBody > tr { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  #mineBody > tr > td { grid-column: 1 / -1; }
  #mineBody > tr > td:nth-child(1) { order: 0; }
  #mineBody > tr > td:nth-child(2) { order: 1; grid-column: span 1; }
  #mineBody > tr > td:nth-child(6) { order: 2; grid-column: span 1; }
  #mineBody > tr > td:nth-child(3) { order: 3; }
  #mineBody > tr > td:nth-child(7) { order: 4; padding-bottom: 10px; border-bottom: 1px solid #edf1f7; }
  #mineBody > tr > td:nth-child(4) { order: 5; }
  #mineBody > tr > td:nth-child(5) { order: 6; border-bottom: 0; padding-bottom: 0; }
}

/* ---- 降价公告弹窗（登录后弹一次，固定英文）---- */
/* 比普通 .modal 宽一点，正文用可读字号而不是 .modal-sub 的 12px 小字 */
.notice-modal { width: 460px; max-width: 92vw; }
.notice-modal h3 { margin-bottom: 14px; }
.notice-body { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--text-2); }
.notice-body + .notice-body { margin-top: 12px; }
.notice-body b { color: var(--text); }

/* ---- 顶栏「API 文档」入口（语言选择器左侧，新标签打开 /api-doc）---- */
/* 视觉对齐截图：蓝色文字链接 + 文档图标 + 右上角外链箭头，不占按钮边框。
   ★ 这段必须写在文件最末：前面的旧皮肤有 `.topbar-right button/label {min-height:44px}` 等
     高优先级规则，靠「后出现 + 同特异性」覆盖不了 <a>，所以这里用等特异性选择器放最后。 */
.docs-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 2px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  border: 0;
  background: none;
  border-radius: 8px;
  transition: color .18s ease, opacity .18s ease;
}
.docs-link:hover { color: var(--primary-2); opacity: .88; }
.docs-link:focus-visible { outline: 3px solid rgba(49, 95, 219, .28); outline-offset: 3px; }
.docs-link-icon { flex: 0 0 auto; width: 16px; height: 16px; }
/* 右上角外链箭头（截图里那个 ↗），用 CSS 画，避免再加一个 SVG/字体依赖 */
.docs-link::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  opacity: .85;
}
/* 触屏 / 中等屏：跟随顶栏按钮的 44px 触控高度 */
@media (max-width: 1100px) {
  .docs-link { min-height: 44px; }
}
/* 窄屏（<=768px 起 topbar-right 变 grid）：文档入口占 2 格、排在语言选择器之后、其余控件之前 */
@media (max-width: 768px) {
  .docs-link { grid-column: span 2; order: 1; justify-content: center; padding: 0 4px; }
  #credentialsBtn { order: 2; }
  #refreshBtn { order: 3; }
  #acceptingToggle { order: 4; }
  #alarmToggle { order: 5; }
  .topbar-right .auto-refresh-control { order: 6; }
  #autoRefreshSeconds { order: 7; }
  .topbar-right > [data-i18n="auto.seconds"] { order: 8; }
}

/* ===== 2026-10-29 对外 API 密钥页 ===== */
/* 工人不开放对外 API（服务端也会拒绝），导航与页面整块隐藏。 */
body.is-worker .nav-item[data-page="apikeys"],
body.is-worker #page-apikeys { display: none !important; }
.api-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 4px 0 16px;
  font-size: 13px;
  opacity: .85;
}
.api-base code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(127, 127, 127, .14);
  padding: 4px 8px;
  border-radius: 6px;
  word-break: break-all;
}
.api-key-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(127, 127, 127, .14);
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0 6px;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  user-select: all;
}

/* === BOARD_6CARD (2026-11-07) ===
   供货商端个人看板：顶部两卡（可提现余额 / 接单状态）+ 下面 6 张订单指标卡
   数据来源 sidecar cdk_supplier_board.py :8126（/api/v1/supplier/board） */
.stats-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.board-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 16px; }
.board-card { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.board-card .board-label { font-size: 11px; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; }
.board-card .board-value { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.board-card .board-sub { font-size: 11px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.board-ok { color: var(--green); }
.board-bad { color: var(--red); }
@media (max-width: 1180px) { .board-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .board-row { grid-template-columns: repeat(2, 1fr); } }

/* === 手机端收紧（2026-11-07 站长反馈）===
   1) 顶部「API 文档」入口隐藏（内容不删，随时可恢复）
   2) 顶部按钮组不许中文竖排：不换行 + 允许横向换行排列
   3) 卡片缩小、间距收紧，避免一屏只看到两三张卡 */
.topbar-right .docs-link { display: none !important; }
.accepting-toggle, .btn-secondary, .logout-btn { white-space: nowrap; }

@media (max-width: 720px) {
  .topbar-right { flex-wrap: wrap; gap: 6px; }
  .topbar-right > button, .topbar-right > a, .topbar-right > label,
  .topbar-right > input { flex: 0 0 auto; }
  .accepting-toggle, .btn-secondary { font-size: 12px; padding: 7px 10px; }

  .stats-row.cols-2 { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
  .stats-row.cols-2 .stat-card { padding: 10px 12px; border-radius: 6px; }
  .stats-row.cols-2 .stat-card:first-child .stat-value { font-size: 22px; }
  .stats-row.cols-2 .stat-label { font-size: 10px; margin-bottom: 3px; }
  .stats-row.cols-2 .stat-value { font-size: 17px; }

  .board-row { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
  .board-card { padding: 10px 12px; border-radius: 6px; }
  .board-card .board-label { font-size: 10px; letter-spacing: 0; margin-bottom: 3px; }
  .board-card .board-value { font-size: 19px; }
  .board-card .board-sub { font-size: 10px; margin-top: 3px; }
}

/* === MOBILE_CLASS_20261107 ===
   ★ 为什么不用 @media：站内已有 `.topbar-right button` 这类更具体的规则，
     实测会把 `.accepting-toggle{white-space:nowrap}` 顶回 normal（中文就竖排了），
     而 @media 断点在某些内置浏览器里也不稳定。
     改成 JS 给 <html> 加 .m 类，这里用 `html.m` 前缀 + !important，优先级稳赢。 */
html.m .topbar-right { flex-wrap: wrap !important; gap: 6px !important; }
html.m .topbar-right > button,
html.m .topbar-right > a,
html.m .topbar-right > label,
html.m .topbar-right > input,
html.m .topbar-right > span {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}
html.m .accepting-toggle,
html.m .btn-secondary,
html.m .logout-btn {
  white-space: nowrap !important;
  word-break: keep-all !important;
  font-size: 12px !important;
  padding: 7px 10px !important;
  min-width: 0 !important;
}
html.m .topbar-right .docs-link { display: none !important; }

html.m .stats-row.cols-2 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 10px !important; }
html.m .stats-row.cols-2 .stat-card { padding: 10px 12px !important; border-radius: 6px !important; }
html.m .stats-row.cols-2 .stat-label { font-size: 10px !important; margin-bottom: 3px !important; }
html.m .stats-row.cols-2 .stat-value { font-size: 17px !important; }
html.m .stats-row.cols-2 .stat-card:first-child .stat-value { font-size: 22px !important; }

html.m .board-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; margin-bottom: 10px !important; }
html.m .board-card { padding: 10px 12px !important; border-radius: 6px !important; }
html.m .board-card .board-label { font-size: 10px !important; letter-spacing: 0 !important; margin-bottom: 3px !important; }
html.m .board-card .board-value { font-size: 19px !important; }
html.m .board-card .board-sub { font-size: 10px !important; margin-top: 3px !important; }

/* === GOPAY_BTN_FIX_20261107 ===
   ★ 手机端 .topbar-right 原本是 grid(repeat(6, minmax(0,1fr)))，
     按钮默认只占 1 列 → 360/6 = 50px，中文被压成竖排。
   ★ 先用 flex 救火了，但 flex 会丢掉原来的 grid-column/order 排布，
     导致「秒」掉到单独一行、输入框撑满。
   ★ 最终方案：保留 grid，把每个按钮改成 **跨 2 列**（每行 3 个，约 110px），
     并显式指定 order，让「语言 → 按钮 → 刷新控制」顺序稳定。 */
html.m .topbar-right {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 6px !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

html.m .topbar-right > .language-select {
  grid-column: span 2 !important;
  order: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

html.m .topbar-right > button {
  grid-column: span 2 !important;
  order: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  padding: 8px 4px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html.m .topbar-right > .logout-btn { grid-column: span 1 !important; padding: 8px !important; }

html.m .topbar-right > .auto-refresh-control {
  grid-column: span 3 !important;
  order: 2 !important;
}
html.m .topbar-right > .refresh-seconds {
  grid-column: span 2 !important;
  order: 3 !important;
  width: 100% !important;
}
html.m .topbar-right > [data-i18n="auto.seconds"] {
  grid-column: span 1 !important;
  order: 4 !important;
  align-self: center !important;
}
html.m .topbar-right .docs-link { display: none !important; }

/* === STRIP_TITLE_20261107 ===
   ① 手机端「官方社群」条：从上下堆叠改成一行（官方社群 | QQ群），整体缩小，
      给下面内容腾空间。原样式里有 flex-direction:column + font-size:17/18px + padding 18px。
   ② 顶部标题只在首页显示：switchPage 会给 .topbar 加 .title-hidden。 */
html.m .contact-strip {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px 10px !important;
  padding: 7px 11px !important;
  margin-bottom: 10px !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  border-radius: 8px !important;
  border-left-width: 4px !important;
}
html.m .contact-strip-label {
  width: auto !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--muted) !important;
}
html.m .contact-strip-item {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
  line-height: 1.35 !important;
  max-width: none !important;
  overflow-wrap: anywhere !important;
}
html.m .contact-strip-sep {
  display: block !important;
  width: 1px !important;
  height: 10px !important;
  background: var(--border) !important;
}

/* 切页后隐藏标题（app.js switchPage 控制 .title-hidden） */
.topbar.title-hidden h2 { display: none !important; }

/* 标题只在首页：CSS 兜底（JS 已在 switchPage 里加 .title-hidden，这里再兜一层） */
body:has(#page-overview.active) .topbar h2#pageTitle { display: block !important; }
body:not(:has(#page-overview.active)) .topbar h2#pageTitle { display: none !important; }
/* 只读接单池提示（未上线时） */
body.pool-view-only #poolViewOnlyHint { display: block !important; }
#poolViewOnlyHint { display: none; }

/* 社群条也只在首页显示（与标题同一套判定：page-overview 是否为 active） */
body:not(:has(#page-overview.active)) .contact-strip { display: none !important; }

/* 顶部工具栏整条只在首页显示（站长 11-07：切页后这块也收起来，给内容腾空间）
   ★ 非首页连 .topbar 一起隐藏，否则会留一条空白吸附栏 */
body:not(:has(#page-overview.active)) .topbar { display: none !important; }
body:has(#page-overview.active) .topbar { display: flex !important; }

/* === WORKER_TOPBAR_20261108 ===
   工人只有「待接订单 / 我的订单」两页（switchPage 里强制），
   而公告条/标题/工具栏被限制在首页显示 → 工人看不到「开启接单」和「订单提醒」。
   这里给工人放开：在这两页保留整条工具栏。 */
body.is-worker:has(#page-available.active) .topbar,
body.is-worker:has(#page-mine.active) .topbar {
  display: flex !important;
}

/* === 2026-11-10 消除闪烁：身份确认前默认隐藏，确认后由 mode-ready 控制显示 === */
body:not(.mode-ready) .nav-item[data-page="finance"],
body:not(.mode-ready) .nav-item[data-page="overview"],
body:not(.mode-ready) .nav-item[data-page="workers"],
body:not(.mode-ready) .nav-item[data-page="team"],
body:not(.mode-ready) .nav-item[data-page="apikeys"] { display: none !important; }