/* 特勤处助手 · 云控 —— 配色取自数据可视化参考色板：中性底 + 一个强调蓝 + 固定的状态色（状态色只配圆点+文字，不单靠颜色） */
:root {
  color-scheme: light;
  --page: #f9f9f7;
  --surface: #fcfcfb;
  --surface-2: #f1f0ec;
  --ink: #0b0b0b;
  --ink-2: #52514e;
  --muted: #898781;
  --muted-dot: #c3c2b7;
  --grid: #e1e0d9;
  --axis: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.18);
  --input-bg: #ffffff;
  --accent: #2a78d6;
  --accent-hover: #256abf;
  --accent-ink: #1c5cab;
  --accent-wash: #e3eefc;
  --good: #0ca30c;
  --good-ink: #006300;
  --warning: #fab219;
  --warning-ink: #8a5a00;      /* 警示文字：黄点在浅底上对比度不够当字用，换深一档（5.8:1） */
  --serious: #ec835a;
  --critical: #d03b3b;
  --critical-ink: #b42323;
  --good-wash: #e3f4e3;        /* 看板小格子的底色：字用对应的 *-ink，对比度都 ≥ 5:1 */
  --warning-wash: #fcefd2;
  --critical-wash: #fbe5e5;
  --spark: #9a9893;
  --shadow: 0 18px 48px rgba(20, 20, 18, 0.18);
  --font: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #242422;
    --ink: #f0efec;
    --ink-2: #c3c2b7;
    --muted: #898781;
    --muted-dot: #5d5c58;
    --grid: #2c2c2a;
    --axis: #45443f;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.18);
    --input-bg: #121211;
    --accent: #3987e5;
    --accent-hover: #5598e7;
    --accent-ink: #86b6ef;
    --accent-wash: rgba(57, 135, 229, 0.18);
    --good-ink: #2fbf2f;
    --warning-ink: #fab219;
    --critical-ink: #e66767;
    --good-wash: rgba(12, 163, 12, 0.18);
    --warning-wash: rgba(250, 178, 25, 0.16);
    --critical-wash: rgba(208, 59, 59, 0.20);
    --spark: #8f8d86;
    --shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.5 var(--font); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.3; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px;
  min-height: 48px; padding: 4px 16px;
  /* 刘海屏（viewport-fit=cover）：上面让出状态栏、左右让出横屏的刘海；别的屏幕 env() 是 0，跟上一行一样 */
  padding: calc(4px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 4px max(16px, env(safe-area-inset-left, 0px));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; }
.brand img { display: block; }
.brand-sub { color: var(--muted); font-weight: 400; }
.topbar-right { display: flex; align-items: center; gap: 12px; min-width: 0; margin-left: auto; }
/* 顶栏右边打头：「下载 App vX」「添加手机」（登录后才有），跟在总览后面、「已刷新」前面 */
.tb-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.sync-status { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-status.is-bad { color: var(--critical-ink); }
/* 顶栏里的一行总览：小字、标签淡、数字粗；在线比设备少标黄 */
.header-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; font-size: 12px; color: var(--muted); }
.hstat { white-space: nowrap; }
.hs-label { margin-right: 4px; }
.hs-value { font-size: 13px; font-weight: 600; color: var(--ink); }
.hs-extra { color: var(--ink-2); }
.hstat.is-warn .hs-value { color: var(--warning-ink); }
.hs-sep { color: var(--axis); }

main {
  max-width: 2560px; margin: 0 auto; padding: 14px 16px;
  padding: 14px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
}
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }

/* ---------- 表单 / 按钮 ---------- */
.field { display: grid; gap: 6px; }
.field > span { font-size: 12px; color: var(--ink-2); }
input[type="text"], input[type="password"], textarea, select {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg);
}
textarea { resize: vertical; min-height: 72px; line-height: 1.55; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.form-error { margin: 0; min-height: 1.3em; color: var(--critical-ink); font-size: 13px; white-space: pre-line; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 8px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink);
  font-size: 13px; white-space: nowrap; cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--accent); border-color: transparent; color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 32px; padding: 0 10px; font-size: 12px; }     /* 点的地方不小于 32px */
.btn-stop { color: var(--critical-ink); }
/* 图标按钮：可点的地方 32×32，负外边距让它占的位置跟原来一样小 */
.btn-icon {
  display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -4px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.btn-icon:hover { background: var(--surface-2); color: var(--ink); }
.btn-icon svg { width: 15px; height: 15px; fill: currentColor; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent-ink); cursor: pointer; font-size: 12px; justify-self: start; }
.link-btn:hover { text-decoration: underline; }
/* 一行字那么高的文字按钮：上下垫 7px 凑够 32px 的点击区，负外边距不占地方 */
.hit { padding: 7px 4px; margin: -7px -4px; }

/* ---------- 状态：圆点 + 文字 ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-dot); }
.badge.tone-good::before { background: var(--good); }
.badge.tone-accent::before { background: var(--accent); }
.badge.tone-warning::before { background: var(--warning); }
.badge.tone-serious::before { background: var(--serious); }
.badge.tone-critical::before { background: var(--critical); }
.badge.wrap { white-space: normal; align-items: flex-start; }
.badge.wrap::before { margin-top: 5px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 1px 8px; border-radius: 999px; background: var(--surface-2);
  font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip.is-pending { background: var(--accent-wash); color: var(--accent-ink); }
.chip.is-auto { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-ink); font-weight: 400; }
.chip.is-bad { background: var(--critical-wash); color: var(--critical-ink); font-weight: 600; }
.chip.is-warn { background: var(--warning-wash); color: var(--warning-ink); font-weight: 600; }
button.chip { border: 0; font: inherit; font-size: 12px; cursor: pointer; }

/* ---------- 登录 / 注册 ---------- */
.login-view { display: grid; place-items: center; min-height: calc(100vh - 160px); }
.login-card { width: min(360px, 100%); padding: 28px; display: grid; gap: 16px; }
.login-card h1 { margin: 0; font-size: 18px; }
.login-switch { margin: 0; font-size: 13px; color: var(--muted); }
.login-switch .link-btn { font-size: 13px; }
.whoami { display: inline-flex; align-items: center; gap: 5px; max-width: 18em; overflow: hidden; }
.whoami svg { flex: none; width: 15px; height: 15px; fill: currentColor; }
.whoami-label { flex: none; }
.whoami-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.whoami-label + .whoami-name::before { content: "·"; margin-right: 5px; }

/* ---------- 账号设置：独立的一页（不再是弹窗）。左边分区导航（≥ 900px 一竖排）/ 窄屏收成顶上一排药丸；右边一块一块（卡片） ---------- */
.form-error.is-ok { color: var(--good-ink); }
.account-view { display: grid; gap: 14px; max-width: 1200px; }
.aset-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aset-back { flex: none; }
.aset-back-arrow { font-size: 15px; }
.aset-title { margin: 0; font-size: 18px; font-weight: 600; }
.aset-title .muted { font-size: 14px; font-weight: 400; }
.aset-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.aset-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.aset-navlink {
  display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2);
  font-size: 13px; white-space: nowrap; cursor: pointer;
}
.aset-navlink:hover { background: var(--surface-2); color: var(--ink); }
.aset-navlink.is-on { border-color: var(--ink); background: var(--ink); color: var(--surface); font-weight: 600; }
.aset-navn { font-variant-numeric: tabular-nums; }
.aset-navn:empty { display: none; }     /* 没数时别占位（inline-flex 里空 span 会歪在一边） */
.aset-main { display: grid; gap: 14px; min-width: 0; }
.aset-pane { display: grid; gap: 12px; padding: 16px 18px; }
.aset-pane-head { margin: 0; font-size: 16px; font-weight: 600; }
.aset-pane-head .muted { font-size: 13px; font-weight: 400; }
.aset-adminerror { margin: 0; }
/* ≥ 900px：左边一竖排导航、右边内容（内容比老弹窗宽，管理那几张表更松快） */
@media (min-width: 900px) {
  .aset-shell { grid-template-columns: 196px minmax(0, 1fr); align-items: start; }
  .aset-nav { position: sticky; top: 60px; flex-direction: column; flex-wrap: nowrap; gap: 4px; }
  .aset-navlink { justify-content: flex-start; border-radius: 10px; }
  .aset-navn { margin-left: auto; }
}
/* 账号设置里的表格：这一页上整张竖着摊开（不卡在 240px 高的小滚动框里）、表头不吸顶；真放不下时只在这张表里横着滚、不撑破整页 */
.aset-pane .table-scroll { max-height: none; overflow-x: auto; }
.aset-table thead th { position: static; }
.aset-list { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.aset-list > :not(:first-child) { border-top: 1px solid var(--border); }
.aset-row { display: grid; grid-template-columns: 6em minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; }
.aset-label { color: var(--ink-2); font-size: 13px; }
.aset-value { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-width: 0; font-size: 13px; }
.aset-value strong { font-size: 14px; overflow-wrap: anywhere; }
.aset-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.aset-warn { padding: 2px 8px; border-radius: 6px; background: var(--warning-wash); color: var(--warning-ink); font-size: 12px; }
.aset-panel { display: grid; gap: 10px; padding: 12px 14px 14px; background: var(--surface-2); }
.aset-panel > form { display: grid; gap: 10px; }
.aset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.aset-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aset-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aset-panel .form-error, .aset-pane .form-error, #admin-error { min-height: 0; }
.aset-panel .form-error:empty, .aset-pane .form-error:empty, #admin-error:empty { display: none; }
.aset-panel p { margin: 0; }
.tfa-setup { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px; }
.tfa-qr { width: 220px; height: 220px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.tfa-qr svg { display: block; width: 100%; height: 100%; }
.tfa-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 12px; font-size: 13px; line-height: 1.6; }
.tfa-steps .aset-actions { margin-top: 8px; }
.tfa-secret { padding: 1px 6px; border-radius: 4px; background: var(--surface); font-size: 13px; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.tfa-code-field input { max-width: 10em; font-size: 16px; letter-spacing: 0.15em; }
.tfa-codes { display: grid; gap: 10px; }
.tfa-codes-note { font-size: 13px; line-height: 1.6; }
.tfa-code-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: 6px; }
.tfa-code-list li { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 14px; letter-spacing: 0.06em; text-align: center; }
#login-code-field > label { font-size: 12px; color: var(--ink-2); }
.admin-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.admin-row .reg-mode { width: 11em; }
.admin-row .invite-note { flex: 1 1 12em; }
.invite-new { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--accent-wash); color: var(--ink); font-size: 13px; }
.invite-new strong { margin: 0 4px; font-size: 15px; letter-spacing: 0.04em; }
.mono { font-family: var(--mono); }
.row-actions { white-space: nowrap; }
.row-actions .link-btn + .link-btn { margin-left: 14px; }

/* ---------- 卡密：我的卡密（每个用户）+ 管理员「卡密」分区（lic- 开头的只在账号设置这一页里用） ---------- */
.lic-table th, .lic-table td { white-space: nowrap; }     /* 电脑 / 平板上放不下就在表里横着滚；手机上整行变一张卡（下面 600px） */
.lic-table td.lic-empty { white-space: normal; }
.lic-claim { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.lic-claim .field { flex: 1 1 16em; }
.lic-claim input { font-family: var(--mono); letter-spacing: 0.04em; }
.lic-howto { margin: 0; line-height: 1.6; }
.lic-expired { color: var(--critical-ink); font-weight: 600; }
.lic-gen .lic-gen-days { width: 7em; }
.lic-gen .lic-gen-count { width: 6.5em; }
.lic-gen .lic-gen-owner { width: 12em; }
.lic-gen .lic-gen-note { flex: 1 1 10em; }
.lic-new { display: grid; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--accent-wash); }
.lic-new-note { margin: 0; font-size: 13px; line-height: 1.6; }
.lic-code-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5em, 1fr)); gap: 6px; }
.lic-code-list li { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 14px; letter-spacing: 0.04em; text-align: center; user-select: all; }
@media (max-width: 640px) {
  .aset-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .aset-row .aset-label { grid-column: 1 / -1; }
  .aset-grid, .aset-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .tfa-setup { grid-template-columns: minmax(0, 1fr); }
  .tfa-qr { justify-self: center; }
}
/* 手机（≤ 600px）：导航收成顶上一排药丸（点的地方 40px 高）；管理那几张表 + 我的卡密一行变一张卡（跟设备详情的账号小卡片一个路子，样式名各管各的） */
@media (max-width: 600px) {
  .aset-pane { padding: 12px 14px; }
  .aset-navlink { min-height: 40px; }
  .aset-table, .aset-table tbody, .aset-table tr, .aset-table td { display: block; width: 100%; }
  .aset-table thead { display: none; }
  .aset-table tr { margin-bottom: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
  .aset-table tr:last-child { margin-bottom: 0; }
  .aset-table td { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 2px 10px; padding: 3px 0; border: 0; white-space: normal; }
  .aset-table td::before { content: attr(data-label); color: var(--muted); }
  .aset-table td.num { text-align: left; }                   /* 卡片里的「手机 1」靠左跟标签挨着，别甩到右边 */
  .aset-table td:not([data-label]) { display: block; }       /* 操作列、空状态那行：整条、不写标签 */
  .aset-table td:not([data-label])::before { content: none; }
  .aset-table td.row-actions { margin-top: 4px; white-space: normal; }
}

/* ---------- 添加手机 ---------- */
.steps { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; }
.steps li { line-height: 1.6; }
.steps li > strong { display: block; }
.steps li > span, .steps li > a.bind-link { display: block; }
.bind-code {
  margin: 8px 0 2px; font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink); user-select: all;
}
.bind-link { width: fit-content; margin-top: 8px; }
a.btn { text-decoration: none; }
/* 第 3 步下面：自己有几个没用的卡密 / 一个都没有 */
.bind-lic-has, .bind-lic-none { display: block; width: fit-content; max-width: 100%; margin: 6px 0 2px; padding: 3px 8px; border-radius: 6px; font-size: 12px; }
.bind-lic-has { background: var(--accent-wash); color: var(--accent-ink); }
.bind-lic-none { background: var(--warning-wash); color: var(--warning-ink); }
.bind-lic-info:empty { display: none; }
/* 「添加手机」开着时新连上来的手机 */
.bind-done { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding: 6px 10px; border-radius: 6px;
  background: var(--good-wash); color: var(--good-ink); font-size: 13px; font-weight: 600; }
/* 管理员才有：收着的「用绑定码直接绑（不占卡密）」，点开才生成码 */
.bind-admin { border: 1px solid var(--border); border-radius: 10px; padding: 0 12px; }
.bind-admin > summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; font-size: 13px; color: var(--ink-2); }
.bind-admin > summary:hover { color: var(--ink); }
.bind-admin[open] > summary { border-bottom: 1px solid var(--border); }
.bind-admin-body { padding: 8px 0 12px; line-height: 1.6; }
.bind-admin-body > span, .bind-admin-body > a.bind-link { display: block; }
.bind-admin-body .btn { margin-top: 8px; }
.empty { padding: 28px; text-align: center; color: var(--ink-2); }
.empty h2 { margin: 0 0 6px; font-size: 16px; color: var(--ink); }
.empty p { margin: 0; }

/* ---------- 工具条：视图切换 + 搜索 + 筛选，一行（窄屏换行） ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.toolbar input[type="search"] {
  width: min(280px, 100%); height: 34px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: 8px; background: var(--input-bg);
}
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink-2); font-size: 13px; cursor: pointer;
}
.fchip:hover { background: var(--surface-2); }
.fchip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.fchip-n { font-weight: 600; font-variant-numeric: tabular-nums; }
.filter-empty { margin: 4px 0 12px; color: var(--muted); }

/* ---------- 制造收益：平时一行，「详情」展开整块 ---------- */
.ranking { margin-bottom: 10px; overflow: hidden; }
.rk-strip { display: flex; align-items: center; gap: 4px 10px; min-height: 38px; padding: 5px 14px; }
.rk-strip-title { flex: none; margin: 0; font-size: 13px; font-weight: 600; white-space: nowrap; }
.rk-strip-title::after { content: "·"; margin-left: 10px; font-weight: 400; color: var(--axis); }
.rk-strip-items { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--ink-2); }
.rks-item { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.rks-fac { flex: none; color: var(--muted); white-space: nowrap; }
.rks-name { flex: 0 1 auto; min-width: 2.5em; max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.rks-name.is-none { color: var(--muted); }
.rks-ph { flex: none; font-weight: 600; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rks-daily, .rks-time { flex: none; white-space: nowrap; }
.rks-daily b { color: var(--ink); }
.rks-time .is-stale { color: var(--warning-ink); font-weight: 600; }
.rks-time .badge { margin-left: 6px; vertical-align: -1px; }
.rks-sep { flex: none; color: var(--axis); }
.rks-empty { color: var(--muted); }
.rks-lv { flex: none; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }   /* 选了 1 / 2 级台子：打头说一声 */
.rk-toggle { flex: none; margin-left: auto; font-size: 13px; }
.rk-panel { border-top: 1px solid var(--border); }
.rk-panel-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; padding: 7px 14px; border-bottom: 1px solid var(--border); }
.rk-panel-head .link-btn { margin-left: auto; font-size: 13px; }
.ranking-sub { font-size: 12px; color: var(--muted); }
.ranking-daily { font-size: 12px; color: var(--ink-2); }
.ranking-daily strong { font-size: 13px; color: var(--ink); }
.ranking-daily .muted { margin-left: 4px; }
/* 「台子等级 1 / 2 / 3」（排名里有分级数才有）：选几级，四个台就只留那一级造得了的、按那一级的数重新排 */
.rk-level { display: inline-flex; flex: none; align-items: center; gap: 8px; }
.rk-level-label { font-size: 12px; color: var(--muted); white-space: nowrap; cursor: help; }
.rk-level-segs { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.rk-level-seg {
  min-width: 34px; height: 32px; padding: 0 10px; border: 0; background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer;
}
.rk-level-seg + .rk-level-seg { border-left: 1px solid var(--border-strong); }
.rk-level-seg:hover { background: var(--surface-2); color: var(--ink); }
.rk-level-seg.is-on { background: var(--ink); color: var(--surface); font-weight: 600; }
@media (min-width: 1280px) {
  .rk-strip-items { flex-wrap: nowrap; }      /* 宽屏一行放下：名字自己缩、省略号 */
}
.rk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rk-col { min-width: 0; padding: 10px 14px 12px; }
.rk-col + .rk-col { border-left: 1px solid var(--border); }
.rk-bench { margin: 0 0 6px; font-size: 12px; font-weight: 500; color: var(--muted); }
.rk-top { display: grid; gap: 1px; padding-bottom: 10px; }
.rk-top-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-top-value { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.rk-top-value strong { margin-right: 2px; font-size: 20px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.rk-top-meta { font-size: 12px; color: var(--muted); }
.rk-none { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.rk-empty { margin: 0; padding: 16px 20px; color: var(--muted); }
.rk-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); font-size: 12px; }
.rk-list li {
  display: grid; grid-template-columns: 1.3em minmax(0, 1fr) max-content max-content; gap: 1px 8px; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--border);
}
.rk-list li:last-child { border-bottom: 0; }
.rk-no { color: var(--muted); font-variant-numeric: tabular-nums; }
.rk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-lv { color: var(--muted); }
.rk-ph { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rk-meta { grid-column: 2 / -1; color: var(--muted); }
/* 配方列表跟交易行叫法不一样的：名字下面一行淡字「交易行叫 PKM通用机枪」 */
.rk-market { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-list .rk-market { grid-column: 2 / -1; }
/* 每个台底下「另有 N 条没排名（看原因）」：平时收着，点开一条一句人话（电脑端的原文在悬停提示里） */
.rk-uv { margin-top: 10px; font-size: 12px; color: var(--muted); }
.rk-uv-toggle { font-size: 12px; }
.rk-uv-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.rk-uv-list li { display: grid; cursor: help; }
.rk-uv-name { color: var(--ink-2); overflow-wrap: anywhere; }
.rk-uv-why { font-size: 11px; overflow-wrap: anywhere; }

/* ---------- 视图切换（工具条最左） ---------- */
.view-switch { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.view-switch .seg { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font-size: 13px; cursor: pointer; }
.view-switch .seg:hover { color: var(--ink); }
.view-switch .seg.is-on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }

/* ---------- 综合看板：格子最窄 400px（四个台 + 下次醒一行放得下）、间距 12px：1280~1600 宽三列、1920 宽四列、2560 宽六列 ---------- */
.board { margin-bottom: 12px; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 12px; align-items: start; }

.tile { min-width: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.tile:hover { border-color: var(--border-strong); }
.tile.is-alert { box-shadow: inset 3px 0 0 var(--critical); }
.tile-head { padding: 7px 12px 6px; border-bottom: 1px solid var(--border); }
/* 卡头一行放下：「名字 · 型号」一段字从后面截成省略号（先没了型号、再截名字）；窄屏（≤ 560px）照旧换行 */
.tile-title { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px 10px; min-width: 0; }
.tile-title > * { flex: none; }
.odot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-dot); }
.odot.is-on { background: var(--good); }
.tile-title > .tile-ident { flex: 0 1 auto; min-width: 2em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile-ident .tile-name { display: inline; margin: 0; font-size: 15px; font-weight: 600; }
.tile-ident .tile-model { margin-left: 6px; font-size: 12px; color: var(--muted); }
.tile-title .btn-icon { margin: -7px -8px -7px -10px; }
.tile-title .btn-icon svg { width: 13px; height: 13px; }
.tile-count { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.tile-end { display: inline-flex; align-items: baseline; gap: 10px; margin-left: auto; white-space: nowrap; }
@media (max-width: 560px) {
  .tile-title { flex-wrap: wrap; }
  .tile-title > .tile-ident { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
}
.tile-total { font-size: 15px; font-weight: 600; white-space: nowrap; }   /* 单独的大数：比例数字 */
.tile-total small { font-size: 12px; font-weight: 400; color: var(--muted); }
.tile-go { font-size: 12px; }
.tile-meta { display: flex; align-items: baseline; gap: 0 6px; min-width: 0; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.tile-meta > * { flex: none; }
.tile-meta .tm-status { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.tile-meta .sep { color: var(--axis); }
.tile-meta .tm-off, .tile-meta .is-bad { color: var(--critical-ink); font-weight: 600; }
.tile-meta .is-warn { color: var(--warning-ink); }
/* 「卡密到 11-12」；到期标红、没激活 / 快到期标黄（上面两条）。不缩（地方不够缩的是运行状态） */
.tile-meta .tm-lic:not(.is-bad):not(.is-warn) { color: var(--ink-2); }
.tile.is-offline .tile-body { opacity: 0.6; }
.tile-body { padding: 0 12px 2px; }
.tile-empty { margin: 0; padding: 8px 0; font-size: 12px; color: var(--muted); }

.tacct {
  display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 3px 8px;
  padding: 5px 0; border-top: 1px solid var(--border);
}
.tacct:first-child { border-top: 0; }
.tacct-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 13px; }
.tname { font-weight: 600; overflow-wrap: anywhere; }
.tacct.is-hit .tname, .acct-label.is-hit { padding: 0 3px; border-radius: 3px; background: var(--accent-wash); color: var(--accent-ink); }
.tacct.is-off .tname, .tacct.is-off .tlv, .tacct.is-off .tacct-bal, .tacct.is-off .bchips, .tacct.is-off .tacct-wake { opacity: 0.55; }
.tacct.is-removing > * { opacity: 0.45; }                 /* 发了「删除账号」、手机还没执行：整条变灰 */
.tcur { padding: 0 5px; border-radius: 4px; background: var(--accent-wash); color: var(--accent-ink); font-size: 11px; white-space: nowrap; }
.tlv { color: var(--ink-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tlv.is-pending { color: var(--muted); }
.tflag { padding: 0 6px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; white-space: nowrap; }
.tflag.is-auto { background: transparent; box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-ink); }
.tflag.is-bad { background: var(--critical-wash); color: var(--critical-ink); font-weight: 600; }
.tacct-bal { font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tacct-wake { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tsurvey { margin-left: 4px; font-size: 12px; }
.tsurvey.is-pending { color: var(--accent-ink); }
.tile-add { font-size: 12px; }
.bchips { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
/* 账号第二行占满格子宽：四个台一整块不拆开；「下次醒 · 采集」放得下就靠右跟在同一行，放不下（窄手机）才换行 */
.tacct-row2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; min-width: 0; }
.tacct-row2 .bchips { flex: none; flex-wrap: nowrap; }
.tacct-row2 .tacct-wake { margin-left: auto; }
/* inline-block 不用 flex：flex 会吞掉「技²」和「3:32」中间那个空格，等级跟倒计时粘成「技23:32」 */
.bchip { display: inline-block; padding: 1px 5px; border-radius: 6px; font-size: 12px; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bchip-lv { margin-left: 1px; font-size: 9px; line-height: 0; vertical-align: super; opacity: 0.85; }
.bchip.st-busy { background: var(--accent-wash); color: var(--accent-ink); }
.bchip.st-ready { background: var(--good-wash); color: var(--good-ink); font-weight: 600; }
.bchip.st-idle { background: var(--warning-wash); color: var(--warning-ink); }
.bchip.st-unknown { background: var(--surface-2); color: var(--ink-2); }
.bchip .cd.is-due { color: inherit; font-weight: 600; }

/* ---------- 设备卡片 ---------- */
.device { margin-bottom: 12px; overflow: hidden; scroll-margin-top: 64px; }     /* 从看板跳过来：别被顶栏挡住 */
.device.is-flash { animation: card-flash 2s ease-out; }
@keyframes card-flash {
  0%, 35% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .device.is-flash { animation: none; box-shadow: 0 0 0 3px var(--accent); }
}
.device-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; }
.dev-model { font-size: 13px; color: var(--muted); white-space: nowrap; }
.dev-total { font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.dev-total strong { font-size: 15px; color: var(--ink); }
.dev-count { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.device-head { display: grid; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.device-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.device-title h2 { margin: 0; font-size: 16px; font-weight: 600; }
.device-id { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.facts { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.fact { display: grid; gap: 1px; min-width: 0; }
.fact-label { font-size: 12px; color: var(--muted); }
.fact-value { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.device-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.device-actions .spacer { flex: 1; }
.pending-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* 卡头：「删除这台手机」紧跟在名字和 ✎ 后面；卡密状态 */
.device-name .dev-del { margin-left: 2px; }
/* 卡头右边的「卡密」块：到期时间、还剩多久、「续期」（电脑上在名字和几项情况的右边，手机上占一行） */
/* 卡头右边：「一键统一配置」+ 卡密块（统一配置在卡密左边） */
.dside { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dlic { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; min-width: 240px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.dlic-label { font-size: 12px; color: var(--muted); }
.dlic-text { display: grid; gap: 1px; min-width: 0; }
.dlic-main { font-size: 14px; font-weight: 600; color: var(--ink); }
.dlic-sub { font-size: 12px; color: var(--ink-2); }
.dlic-exempt .dlic-main, .dlic-forever .dlic-main { font-weight: 500; color: var(--ink-2); }
.dlic-soon, .dlic-none { border-color: var(--warning); background: var(--warning-wash); }
.dlic-soon .dlic-main, .dlic-none .dlic-main { color: var(--warning-ink); }
.dlic.is-hot { border-color: var(--critical); background: var(--critical-wash); }
.dlic.is-hot .dlic-main, .dlic.is-hot .dlic-sub { color: var(--critical-ink); }
@media (max-width: 600px) {
  .dlic-label, .dlic-sub { font-size: 13px; }   /* 手机上正文字不小于 13px */
}
@media (min-width: 601px) {
  .device-head { grid-template-columns: minmax(0, 1fr) auto; }
  .device-head > .device-title { grid-column: 1; grid-row: 1; }
  .device-head > .dside { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .device-head > .facts { grid-column: 1; grid-row: 2; }
  .device-head > .device-actions { grid-column: 1 / -1; grid-row: 3; }
}
/* 页面顶上的红条：卡密只剩 1 天 / 到期了的手机，每台一个「续期」 */
.dlic-alert { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 12px; padding: 10px 44px 10px 14px;
  border: 1px solid var(--critical); border-radius: 10px; background: var(--critical-wash); color: var(--critical-ink); }
.dlic-alert-title { font-size: 14px; }
.dlic-alert-list { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.dlic-alert-list li { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dlic-alert-x { position: absolute; top: 6px; right: 6px; }
/* 续期弹窗：挑卡密的单选列表、续上后到哪天 */
.renew-pick { margin: 10px 0; padding: 0; border: 0; }
.renew-pick legend { margin-bottom: 6px; font-size: 13px; color: var(--ink-2); }
.renew-keys { display: grid; gap: 4px; max-height: 13em; margin: 0; padding: 0; overflow: auto; list-style: none; }
.renew-after { margin: 8px 0 0; min-height: 1.3em; font-weight: 600; color: var(--accent-ink); }
/* 添加手机第 3 步：就地添加卡密 */
.bind-claim { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 2px; }
.bind-claim input { flex: 1 1 12em; min-width: 0; }
.empty .empty-act { margin-top: 14px; }
/* 省电息屏开关（按钮那一行）：发了还没被手机报上来时开关变淡 +「待手机确认」 */
.psave { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; margin-left: 4px; }
.psave .switch { min-height: 32px; }
.psave.is-pending .track { opacity: 0.6; }

/* ---------- 账号表 ---------- */
.table-wrap { overflow-x: auto; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.acct-table th {
  padding: 6px 10px; text-align: left; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.acct-table th:first-child, .acct-table td:first-child { padding-left: 16px; }
.acct-table th:last-child, .acct-table td:last-child { padding-right: 16px; }
.acct-table td { padding: 8px 10px; vertical-align: top; border-bottom: 1px solid var(--border); }
.acct-table tbody tr:last-child td { border-bottom: 0; }
.acct-row.is-off .acct-name, .acct-row.is-off .bal-value { color: var(--ink-2); }
.acct-row.is-removing > td { opacity: 0.45; }             /* 「删除中」：手机执行完就从表里消失 */
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty-accounts { margin: 0; padding: 16px 20px; }

.acct-name { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; font-weight: 600; font-size: 14px; }
.acct-sub { display: grid; gap: 1px; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.acct-sub .chip { justify-self: start; }
/* 「待核」：这个号有一笔买卖结果不明，手机停了它的购买和补料、等人核对 —— 红底一整行，「已核对」就在旁边 */
.acct-pending {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; padding: 6px 10px;
  border: 1px solid var(--critical); border-radius: 8px; background: var(--critical-wash); color: var(--critical-ink);
  font-size: 13px; font-weight: 600;
}
.acct-pending-text { flex: 1 1 14em; min-width: 0; overflow-wrap: anywhere; }
.acct-pending .btn { flex: none; }
.mcard .acct-pending { margin-top: 0; }
/* 数据画不出来的那台：兜底卡片 / 格子里那句话 */
.broken-note { margin: 0; color: var(--critical-ink); font-size: 13px; }
.device-head.device-broken > .broken-note { grid-column: 1 / -1; }
.reveal {
  border: 0; background: none; padding: 0; cursor: pointer;
  color: var(--ink-2); font-variant-numeric: tabular-nums;
  text-decoration: underline dotted var(--axis); text-underline-offset: 3px;
}
.reveal:hover { color: var(--ink); }

.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.switch .track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--axis); transition: background 0.15s; }
.switch .track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(14px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 2px; }
.cell-stack { display: grid; gap: 6px; justify-items: start; }

.bal { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 14px; }
.bal-nums { display: grid; gap: 1px; min-width: 110px; }
.bal-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.delta { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.delta.up { color: var(--good-ink); }
.delta.down { color: var(--critical-ink); }
.delta.flat { color: var(--muted); }

.benches { display: grid; grid-template-columns: max-content max-content minmax(56px, 1fr) minmax(4.5em, max-content); gap: 3px 10px; align-items: center; font-size: 12px; }
.bench-fac { color: var(--ink-2); white-space: nowrap; }
.bench-lv { margin-left: 4px; font-size: 11px; color: var(--muted); }
.acct-sub .levels { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.acct-sub .lv-item { white-space: nowrap; margin-right: 4px; }
.bench-product { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.cd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd.is-due { color: var(--good-ink); }
.unsold { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px; }
.round { display: grid; gap: 3px; max-width: 260px; justify-items: start; }
.round-first { max-width: 100%; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.ops { display: grid; gap: 6px; justify-items: stretch; }
.detail-row td { background: var(--surface-2); }
.round-detail { display: grid; gap: 6px; }
.round-detail pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: 12px/1.65 var(--mono); }
.errors { margin: 0; padding-left: 18px; color: var(--critical-ink); font-size: 12px; }

/* ---------- 账号小卡片：手机上（≤ 600px）账号表换成一个号一张（mcard- 开头的只在这里用） ---------- */
.mcard { display: grid; gap: 6px; min-width: 0; padding: 8px 12px 10px; border-top: 1px solid var(--border); }
.mcard:first-child { border-top: 0; }
.mcard.is-off .acct-label, .mcard.is-off .mcard-coins { color: var(--ink-2); }
.mcard.is-removing > * { opacity: 0.45; }               /* 「删除中」：手机执行完就从这里消失 */
/* 第一行：名字 ✎ + 小标记（放不下就折到名字下面），「参加轮换」开关一直在右边 */
.mcard-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 10px; }
.mcard-title { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; min-height: 40px; }
.mcard-title .acct-label { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.mcard-switch { display: grid; justify-items: end; }
.mcard-bal { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.mcard-coins { font-size: 18px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
.mcard-chart { margin-left: auto; }
/* 四个台：跟看板一样的小格子，四个一排、等宽（几张卡片上下对得齐）；很窄的手机两个一排 */
.mcard-benches .bchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.mcard-benches .bchip { padding: 2px 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.mcard-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-width: 0; }
.mcard-unsold { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.mcard-unsold .chip { max-width: 10em; }
.mcard-k { margin-right: 2px; color: var(--muted); }    /* 一行打头的「待卖」「下次醒」「上一轮」 */
.mcard-wake { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mcard-round { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mcard-round-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.mcard-round .link-btn { flex: none; }
.mcard .round-detail { padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.mcard-ops { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.mcard-more { margin-left: auto; }
.mcard-pend { display: flex; flex-wrap: wrap; gap: 4px; flex-basis: 100%; }
.mcard-more-body { display: grid; gap: 8px; padding-top: 8px; border-top: 1px dashed var(--border); }
.mcard-more-body .acct-sub { margin-top: 0; }
.mcard-more-body .mcard-ids { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }   /* 昵称、QQ、UID 一行 */
@media (max-width: 340px) {
  .mcard-benches .bchips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 小走势图 ---------- */
.spark-btn { padding: 3px; border: 0; border-radius: 6px; background: none; cursor: pointer; line-height: 0; }
.spark-btn:hover { background: var(--surface-2); }
.spark { display: block; overflow: visible; }
.spark-line { fill: none; stroke: var(--spark); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-base { stroke: var(--grid); stroke-width: 1; }
.spark-empty { fill: var(--muted); font-size: 10px; }
.spark-dot, .chart-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.spark-cross, .chart-cross { stroke: var(--axis); stroke-width: 1; }

/* ---------- 事件 / 命令 ---------- */
.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--border); }
/* 最近事件 / 最近命令：平时各收成一行「最近事件（12）▾」，点开才有列表和按号筛的下拉框
   （10-14 起电脑上也默认收着：用户嫌摊开太占地方，看账号得往下翻） */
.panel { min-width: 0; padding: 0 16px; }
.panel:not(.is-folded) { padding-bottom: 12px; }
.panel + .panel { border-left: 1px solid var(--border); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.panel-head h3 { display: none; margin: 0; font-size: 13px; font-weight: 600; }
.panel-head select { width: auto; max-width: 60%; padding: 3px 8px; font-size: 12px; }
.panel.is-folded .panel-head select, .panel.is-folded .feed { display: none; }
.panel-fold {
  display: flex; flex: 1 1 auto; align-items: center; gap: 4px; min-width: 0; min-height: 40px; padding: 0;
  border: 0; background: none; color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
}
.panel-fold::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 6px;
  border: solid var(--muted); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg);
}
.panel-fold[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.panel-n { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.feed { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; font-size: 12px; }
.feed li { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 1px 10px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.feed li:last-child { border-bottom: 0; }
.feed time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.feed .who { color: var(--ink-2); white-space: nowrap; }
.feed .text { white-space: pre-wrap; word-break: break-word; }
.feed .feed-empty { display: block; color: var(--muted); border: 0; }
.cmd-feed li { grid-template-columns: max-content max-content minmax(0, 1fr) max-content; }
.cmd-id { color: var(--muted); font-variant-numeric: tabular-nums; }
.cmd-msg { grid-column: 3 / -1; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; }

/* ---------- 弹窗 ---------- */
.dialog {
  width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0;
  /* 手机：高度按看得见的那块（地址栏收放的 dvh）算，上下左右让出刘海和底部横条；电脑上 dvh = vh、env() = 0，跟上一行一样 */
  inset: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
}
.dialog-wide { width: min(880px, calc(100vw - 24px)); }
#logs-dialog { width: min(1100px, calc(100vw - 24px)); }
.logs-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 12px; min-height: 0; }
.logs-runs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; max-height: 62vh; overflow-y: auto; }
.logs-runs .btn { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; }
.logs-runs .btn.on { background: var(--accent-wash); color: var(--accent-ink); }
.logs-view { display: grid; gap: 8px; min-width: 0; }
.logs-files { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.logs-text { margin: 0; max-height: 62vh; overflow: auto; white-space: pre-wrap; word-break: break-all;
  font: 12px/1.5 var(--mono); background: var(--page); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
@media (max-width: 600px) {
  .tb-test { display: none; }
  .logs-layout { grid-template-columns: 1fr; }
  .logs-runs { max-height: 22vh; }
  .logs-text { max-height: 50vh; }
}
.dialog::backdrop { background: rgba(20, 20, 18, 0.38); }
.dialog-form {
  display: flex; flex-direction: column; max-height: calc(100vh - 34px);
  max-height: calc(100dvh - 34px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.dialog-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.dialog-body { display: grid; gap: 16px; padding: 16px 18px; overflow-y: auto; }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; margin-bottom: 8px; font-weight: 600; font-size: 13px; }
legend small { margin-left: 6px; font-weight: 400; color: var(--muted); }
.note { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--accent-wash); color: var(--accent-ink); font-size: 12px; }
.recipe-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* 一行里别的台框下有小图、这个台没有：格子被拉到一样高时多出来的高度别摊给标题和框（不然这一格的标题、框往下错开） */
.recipe-grid > .field { align-content: start; }
/* 管理员「更新缩略图」：「制造配方」标题那一行的右边，放不下就挪到标题下面靠右。标题和它都浮动 —— 两个浮动不会叠；
   原来绝对定位，可 fieldset 的标题不算在定位的框里，整条掉进台子那一行，压住「防具台」和它的「从列表选」（10-15） */
.recipes-fs > legend { float: left; }
.catalog-bar { float: right; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 8px; margin: -4px 0 4px 16px; }
.recipes-fs > .recipe-grid { clear: both; }
/* 从列表选：框上面的按钮、框下面的小图预览、选的弹窗 */
.pick-open { margin-left: 8px; vertical-align: baseline; }
.recipe-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.recipe-head > label { font-size: 12px; color: var(--ink-2); }
.pick-preview { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; }
.pick-preview:empty { display: none; }
.pick-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 6px 2px 2px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface-2); font-size: 12px; color: var(--ink-2); }
.pick-chip img { width: 48px; height: 18px; object-fit: contain; border-radius: 3px; background: #1d2630; }
.pick-chip.is-unknown { border-style: dashed; color: var(--muted); }
.pick-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.pick-tools input { flex: 1 1 220px; }
.pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-height: 60vh; overflow: auto; padding: 2px; }
.pick-card { display: grid; gap: 3px; justify-items: center; padding: 6px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; text-align: center; cursor: pointer; position: relative; }
.pick-card img, .pick-card .pick-noimg { width: 120px; height: 45px; object-fit: contain; border-radius: 4px; background: #1d2630; }
.pick-card .pick-noimg { display: grid; place-items: center; color: #8a96a3; font-size: 11px; }
.pick-card .pick-sub { font-size: 11px; color: var(--muted); }
.pick-card.is-picked { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash, rgba(37, 99, 235, .18)); }
.pick-card.is-picked::after { content: "✓"; position: absolute; top: 4px; right: 6px; color: var(--accent); font-weight: 700; }
.pick-card[data-grade="1"] { border-top: 3px solid #c9ced6; }
.pick-card[data-grade="2"] { border-top: 3px solid #3fae5a; }
.pick-card[data-grade="3"] { border-top: 3px solid #3a86e0; }
.pick-card[data-grade="4"] { border-top: 3px solid #9b5de5; }
.pick-card[data-grade="5"] { border-top: 3px solid #e0a43a; }
.pick-card[data-grade="6"] { border-top: 3px solid #e05252; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.checks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; }
.check { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.check input { margin-top: 3px; }
.check small { display: block; color: var(--muted); font-size: 12px; }
.check-auto { margin-top: 12px; }
/* 「删除账号」弹窗：一号一行的勾选框 */
.rmacc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.rmacc-item .check { min-height: 36px; padding: 6px 8px; border-radius: 8px; }
.rmacc-item .check:hover { background: var(--surface-2); }
.rmacc-item input:disabled + span { color: var(--muted); }
.auto-note { margin-top: 8px; }
.time-range { display: flex; align-items: center; gap: 8px; }
.time-range input { width: 110px; }
input[aria-invalid="true"] { border-color: var(--critical); }
.field-error { margin: 0; color: var(--critical-ink); font-size: 12px; white-space: pre-line; }
.field-hint { margin: -8px 0 0; color: var(--muted); font-size: 12px; }
.fieldset-hint { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.field-select select { justify-self: start; width: auto; min-width: 220px; max-width: 100%; }
.field-error:empty { display: none; }

.chart { position: relative; min-height: 120px; }
.chart svg { display: block; width: 100%; height: auto; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-grid { stroke: var(--grid); stroke-width: 1; }
.chart-axis { stroke: var(--axis); stroke-width: 1; }
.chart-label { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-hit { fill: transparent; pointer-events: all; cursor: crosshair; }
.chart-empty { fill: var(--muted); font-size: 13px; }
.table-scroll { max-height: 240px; overflow-y: auto; border-top: 1px solid var(--border); }
.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.data-table th.num { text-align: right; }
.data-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }

/* ---------- 浮层 ---------- */
.tooltip {
  position: fixed; z-index: 50; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
  display: grid; gap: 1px; padding: 6px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); font-size: 12px; white-space: nowrap;
}
.tooltip strong { font-size: 13px; font-variant-numeric: tabular-nums; }
.tooltip span { color: var(--ink-2); }
.toast {
  position: fixed; left: 50%; bottom: 24px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 10px;
  background: #1f1f1d; color: #f6f5f1; font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.toast.is-error { background: #8a2222; }

/* ---------- 窄屏：账号表变成一号一张卡 ---------- */
@media (max-width: 980px) {
  main { padding: 10px; padding: 10px max(10px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); }
  .topbar { padding: 4px 10px; padding: calc(4px + env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 4px max(10px, env(safe-area-inset-left, 0px)); }
  .device-head { padding: 10px 12px; }
  .facts { gap: 6px 20px; }
  .panels { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 10px 12px 12px; }
  .panel + .panel { border-left: 0; border-top: 1px solid var(--border); }
  .acct-table thead { display: none; }
  .acct-table, .acct-table tbody, .acct-table tr, .acct-table td { display: block; width: 100%; }
  .acct-table tr.acct-row { padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .acct-table tbody tr:last-child { border-bottom: 0; }
  .acct-table td, .acct-table td:first-child, .acct-table td:last-child {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px;
    padding: 5px 0; border: 0;
  }
  .acct-table td::before { content: attr(data-label); padding-top: 1px; font-size: 12px; color: var(--muted); }
  .acct-table td.cell-name { display: block; padding-bottom: 8px; }
  .acct-table td.cell-name::before, .acct-table td.cell-ops::before { content: none; }
  .acct-table td.cell-ops { display: block; padding-top: 8px; }
  .acct-table tr.detail-row td { display: block; padding: 10px 14px; }
  .acct-table tr.detail-row td::before { content: none; }
  .ops { display: flex; flex-wrap: wrap; }
  .round, .unsold { max-width: none; }
  .bench-product { max-width: none; }
  .recipe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-strip, .rk-panel-head { padding-left: 12px; padding-right: 12px; }
  .rk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-col { padding: 10px 12px 12px; }
  .rk-col:nth-child(odd) { border-left: 0; }
  .rk-col:nth-child(n + 3) { border-top: 1px solid var(--border); }
}
/* 顶栏窄了：两行就够（第一行 标题 +「下载 App」「添加手机」+ 用户名 + 退出登录，第二行总览），越窄让出越多 */
@media (max-width: 720px) {
  .header-stats { order: 3; flex-basis: 100%; padding-bottom: 2px; }    /* 总览挪到标题下面一行 */
  .brand-sub { display: none; }
  .tb-ver { display: none; }                 /* 「下载 App」不带版本号（悬停提示里有） */
  .sync-status:not(.is-bad) { display: none; }   /* 「已刷新」不占地方；连不上时照样显示（红字） */
  .whoami { max-width: 9em; }
}
/* ---------- 手机（≤ 600px，跟 app.js 的 PHONE_MQ 一致）：点的地方 ≥ 40px 高、正文字 ≥ 13px；设备详情紧凑排、事件 / 命令收成一行 ---------- */
@media (max-width: 600px) {
  main { padding: 8px; padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  /* 点的地方 40px 高：按钮、开关、分段按钮直接加高；一行字的文字按钮（.hit）、✎、点开看全的 QQ 上下多垫、负外边距不多占地方 */
  .btn, .btn-sm { height: 40px; }
  .hit { padding-top: 11px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; }   /* 只改上下：左右各个地方自己定（靠右的、隔开的） */
  .btn-icon { width: 40px; height: 40px; margin: -8px; }
  .tile-title .btn-icon { margin: -11px -12px -11px -14px; }
  .reveal { padding-top: 11px; padding-bottom: 11px; margin-top: -11px; margin-bottom: -11px; }
  .switch, .psave, .psave .switch { min-height: 40px; }
  .fchip, .view-switch .seg, .rk-level-seg { height: 40px; }
  button.chip { min-height: 40px; padding: 0 12px; font-size: 13px; }    /* 能点的小标签（「只关游戏、不锁屏」）：就当一个小按钮 */
  .bind-admin > summary, .check { min-height: 40px; }
  /* 输入框 16px 字：iPhone 上点进去不会自动放大页面 */
  input[type="text"], input[type="password"], textarea, select, .toolbar input[type="search"] { min-height: 40px; font-size: 16px; }
  .panel-head select { padding: 6px 8px; font-size: 16px; }
  /* 正文字不小于 13px（只有顶栏那行总览的小标签、台子小格子右上角的等级小数字更小） */
  .small, .badge, .chip, .btn-sm, .link-btn, .field > span, .recipe-head > label, #login-code-field > label, .note, .check small, .field-error,
  .field-hint, .fieldset-hint, .aset-warn, .bind-lic-has, .bind-lic-none, .data-table, .tooltip, .sync-status, .feed,
  .rk-strip-items, .rk-level-label, .ranking-sub, .ranking-daily, .rk-bench, .rk-top-value, .rk-top-meta, .rk-none, .rk-list, .rk-market,
  .rk-uv, .rk-uv-toggle, .rk-uv-why, .tile-ident .tile-model, .tile-count, .tile-total small, .tile-go, .tile-add, .tile-meta, .tile-empty,
  .tcur, .tlv, .tflag, .tacct-wake, .tsurvey, .bchip, .dev-count, .device-id, .fact-label, .acct-sub, .delta, .benches, .bench-lv,
  .round-detail pre, .errors, legend small, .chart-label, .switch { font-size: 13px; }
  .bchip-lv { font-size: 10px; }
  #bind-download { padding: 11px 0; white-space: nowrap; }   /* 句子里的「下载 App」链接：上下垫高好点（行内元素，不撑开行）、不拆成两行 */

  /* 工具条：搜索框跟「全部 / 异常 / 离线」一行；综合看板：格子之间、格子里收紧一点 */
  .toolbar { gap: 8px 6px; margin-bottom: 8px; }
  .toolbar input[type="search"] { flex: 1 1 120px; min-width: 0; }
  .toolbar input[type="search"]::placeholder { font-size: 14px; }   /* 跟筛选挤一行：提示字小一号放得下（打进去的字还是 16px） */
  .filters { flex: none; gap: 4px; }
  .fchip { gap: 4px; padding: 0 10px; }
  .board-grid { gap: 8px; }
  .tile-head { padding: 6px 10px 5px; }
  .tile-body { padding: 0 10px 2px; }
  .tacct { padding: 4px 0; }
  .bchip { padding: 1px 4px; }
  .rk-strip { padding-left: 10px; padding-right: 10px; }

  /* 设备详情的卡头：名字一行（「删除这台手机」靠右）、状态一行、几项情况两列（运行状态占一整行）、按钮三个一排 */
  .device { scroll-margin-top: calc(84px + env(safe-area-inset-top, 0px)); }     /* 手机上顶栏两行高：跳过来别被挡住 */
  .device-head { gap: 6px; padding: 8px 12px 10px; }
  .device-title { gap: 2px 12px; }
  .device-name { flex: 1 1 100%; }
  .device-name .dev-del { margin-left: auto; }
  .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 12px; }
  .fact { display: block; }                    /* 「电量 100%」：小标签跟值连着写，放不下接着往下折 */
  .fact-label { margin-right: 6px; }
  .fact-value { display: inline; }
  .fact-wide { grid-column: 1 / -1; }
  .device-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 8px; }   /* 省电开关下面多一行字也跟按钮顶对齐 */
  .device-actions .btn { padding: 0 6px; }
  .device-actions .spacer { display: none; }
  .psave { min-width: 0; margin-left: 0; }
  .pending-chips { grid-column: 1 / -1; }
  .panel { padding: 0 12px; }

  /* 弹窗：边上留少一点，里面自己滚；生成卡密那一行字大了，「个数」那格放宽、「直接分给」占一整行（下拉框里的字不被截） */
  .dialog-head { padding: 8px 14px; }
  .dialog-body { padding: 12px 14px; }
  .dialog-foot { padding: 8px 14px; }
  .lic-gen .lic-gen-count { width: 8em; }
  .lic-gen .lic-gen-owner { flex: 1 1 100%; width: auto; }
}
@media (max-width: 560px) {
  .tile-meta { column-gap: 4px; }              /* 格子第二行多了卡密状态：间距收一点、「最后上报」只留「N 秒前」（悬停看得到） */
  .tile-meta .tm-ago-label { display: none; }
  .topbar { column-gap: 10px; }
  .topbar-right, .tb-actions { gap: 6px; }
  .whoami { max-width: 7em; }
  .two-col, .checks { grid-template-columns: minmax(0, 1fr); }
  .device-actions .spacer { display: none; }
  .rk-grid { grid-template-columns: minmax(0, 1fr); }
  .rk-col + .rk-col { border-left: 0; border-top: 1px solid var(--border); }
  .view-switch { display: flex; flex: 1 1 100%; }
  .view-switch .seg { flex: 1; }
  .toolbar input[type="search"] { flex: 1 1 140px; width: auto; }
  .rk-strip { flex-wrap: wrap; }
  .rk-strip-title::after { content: none; }
  .rk-toggle { order: 1; }                   /* 「详情」跟标题一行，下面整行放各台 */
  .rk-strip-items { order: 2; flex-basis: 100%; }
  .rks-name { max-width: 5.5em; }            /* 手机上一行能放两个台 */
}
@media (max-width: 460px) {
  .topbar.is-in .brand-name { display: none; }   /* 登录后标题只留图标（悬停看得到全名），给两个按钮让地方 */
}
@media (max-width: 380px) {
  .topbar { column-gap: 6px; }
  .topbar-right, .tb-actions { gap: 4px; }
  .topbar .btn-sm { padding: 0 6px; }         /* 手机上按钮字是 13px：边上收一点，四个按钮还在标题那一行 */
  .whoami { max-width: 5.5em; }
}
@media (max-width: 340px) {
  /* 很窄的手机：账号那一格上下叠起来（再宽一点的手机两行就放得下：名字 + 余额 / 四个台 + 下次醒） */
  .tacct { grid-template-columns: minmax(0, 1fr); }
  .tacct-bal, .tacct-wake { text-align: left; }
  .tacct-row2 .bchips { flex-wrap: wrap; }   /* 再窄就只好让四个台换行 */
}
.dlic-alert-more { font-size: 12px; }