/* 上号平台 —— 唯一一份样式。结构：手机优先（顶栏 + 底部标签栏），PC 左侧栏。
   配色 + 组件照 Binance 设计变量体系（2026-09-21 定稿，样本见 CLAUDE.md 第十三节）：
   浅色 = Binance 白天，深色 = Binance 夜间三层（bg2 最深 / bg 页面 / card 卡片 / input 输入框）。
   所有颜色在 :root 变量里，[data-theme=dark] 只覆盖颜色。改风格 = 改这一段。 */
:root{
  /* 亮色分三层：页面浅灰 → 卡片纯白（+淡阴影）→ 输入框白但边更深。之前三层同白，元素糊成一片（2026-09-23 改）*/
  --bg:#F5F5F5; --bg2:#FFFFFF; --card:#FFFFFF; --input:#FFFFFF; --input-line:#D5D8DC; --line:#E4E7EB; --hover:#F0F2F5;
  --disable:#EAECEF; --disabled-fg:#B7BDC6; --placeholder:#B7BDC6; --seg-track:#EBEDF0;
  --toast-bg:#2B3139; --toast-fg:#EAECEF;
  --fg:#1E2329; --fg2:#474D57; --muted:#707A8A;
  --yellow:#FCD535; --btn-bg:#FCD535; --btn-hover:#FCE36E; --btn-fg:#181A20; --accent:#C99400; --accent-soft:#FEF6D8;
  --good:#2EBD85; --good-soft:#E9F7F1; --bad:#F6465D; --bad-soft:#FEEDEF; --warn:#C99400; --warn-soft:#FEF6D8; --info-soft:#EEF0F2;
  /* 状态标签单独一套：亮主题下 xx-soft 太浅，状态一眼看不出（2026-09-23 改） */
  --pill-good-bg:#D3F1E4; --pill-good-fg:#0A7D54; --pill-bad-bg:#FFDDE2; --pill-bad-fg:#C4263A;
  --pill-warn-bg:#FBEBBC; --pill-warn-fg:#8A6500; --pill-info-bg:#E2E6EB; --pill-info-fg:#474D57;
  --shadow:0 4px 16px rgba(24,26,32,.08); --card-shadow:0 1px 3px rgba(24,26,32,.07);   /* 卡片的淡阴影，深色主题关掉 */
  --r:8px; --r-sm:4px; --r-lg:12px;
  --font:"IBM Plex Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  /* 号码 / OTP：正文字体 + 等宽数字（tabular-nums），0 干净没点，还少下载一个字体（用户 2026-09-23 选的 G）。
     --code 只给 API key / hash / JSON 用：系统自带等宽，不下载，l 和 1 分得清。 */
  --mono:"IBM Plex Sans","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --code:ui-monospace,Consolas,"SF Mono",Menlo,monospace;
  --side:220px; --tab:60px;
}
[data-theme=dark]{
  --bg:#181A20; --bg2:#0B0E11; --card:#1E2329; --input:#2B3139; --input-line:#474D57; --line:#2B3139; --hover:#2B3139;
  --disable:#2B3139; --disabled-fg:#5E6673; --placeholder:#5E6673; --seg-track:#2B3139;
  --toast-bg:#3A2028; --toast-fg:#FFE3E7;
  --fg:#EAECEF; --fg2:#B7BDC6; --muted:#848E9C;
  --accent:#F0B90B; --accent-soft:#3A3419;
  --good:#2EBD85; --good-soft:#1B3A2F; --bad:#F6465D; --bad-soft:#3A2028; --warn:#F0B90B; --warn-soft:#3A3419; --info-soft:#2B3139;
  --pill-good-bg:#1B3A2F; --pill-good-fg:#2EBD85; --pill-bad-bg:#3A2028; --pill-bad-fg:#F6465D;
  --pill-warn-bg:#3A3419; --pill-warn-fg:#F0B90B; --pill-info-bg:#2B3139; --pill-info-fg:#B7BDC6;
  --shadow:0 4px 16px rgba(0,0,0,.4); --card-shadow:none;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0;line-height:1.3}
h1{font-size:22px;font-weight:600;letter-spacing:-.01em}
h2{font-size:16px;font-weight:600}
h3{font-size:13px;font-weight:600;color:var(--fg2)}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-0.1em;display:inline-block}
.mono{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;letter-spacing:.005em}
.muted{color:var(--muted)}
.small{font-size:12px}
.good{color:var(--good)} .bad{color:var(--bad)} .warn{color:var(--warn)}
.right{text-align:right}
code{font-family:var(--code);font-size:12px;background:var(--input);border:1px solid var(--line);padding:1px 6px;border-radius:var(--r-sm)}

/* ── 布局：手机 = 顶栏 + 底部标签栏；PC ≥ 900px = 左侧栏（最深一层）── */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:56px;padding:0 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.top .brand{font-weight:600;font-size:16px;color:var(--fg)}
.top .who{font-size:12px;color:var(--muted)}
.main{padding:16px 16px calc(var(--tab) + 24px);max-width:1180px;margin:0 auto;display:grid;gap:14px;align-content:start}
/* grid/flex 子项默认 min-width:auto，宽表格会把卡片和整页撑宽 → 手机上 position:fixed 的底栏会跟着横滑出屏幕。
   让子项可收缩、表格只在 .tw 里滚，页面就永远不会比屏幕宽，底栏才真正钉住。 */
.main > *, .grid2 > *, .card, .tiles > *, .list .it > *, .row > *{min-width:0}
.tw, table{max-width:100%}
.main{overflow-x:clip}                      /* 兜底：正文再长也不会把页面撑宽（.tw 里的表格照常横滚）*/
.list .it{flex-wrap:wrap}                   /* 标签 + 长地址挤不下就换行，不顶宽 */
.mono{overflow-wrap:anywhere}               /* 钱包地址 / key / hash 这种长串允许断行 */
/* 底栏固定；横向滑动只在这排标签内部发生（overscroll-behavior 阻止把滑动传给页面），隐藏滚动条 */
.tabs{position:fixed;left:0;right:0;bottom:0;height:calc(var(--tab) + env(safe-area-inset-bottom,0px));display:flex;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);z-index:10;touch-action:pan-x}
.tabs::-webkit-scrollbar{display:none}
.tabs{scrollbar-width:none;-ms-overflow-style:none}
.tabs a{flex:0 0 auto;min-width:76px;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 10px;
  font-size:11px;font-weight:500;color:var(--muted);white-space:nowrap}
.ic{width:18px;height:18px;flex:0 0 auto}
.tabs .ic{width:20px;height:20px}
.tabs a.on{color:var(--accent);font-weight:600}
.side{display:none}
@media (min-width:900px){
  .top{display:none}
  .tabs{display:none}
  .side{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--side);padding:20px 12px;
    background:var(--bg2);border-right:1px solid var(--line);gap:2px}
  .side .brand{font-weight:700;font-size:18px;padding:4px 12px 18px;color:var(--fg)}
  .side .brand::after{content:".";color:var(--yellow)}
  .side a.nav{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);font-weight:500;color:var(--fg2)}
  .side a.nav:hover{background:var(--hover);color:var(--fg)}
  .side a.nav.on:hover{background:var(--btn-hover)}
  .side a.nav.on{background:var(--yellow);color:#181A20;font-weight:600}   /* 用户选的 F：黄底黑字 */
  .side .foot{margin-top:auto;display:grid;gap:8px;padding:0 6px}
  .main{margin-left:var(--side);padding:24px 28px 40px;max-width:none}
}

/* ── 卡片 / 数字块 ── */
.card{background:var(--card);border-radius:var(--r-lg);padding:16px 20px;border:1px solid var(--line);box-shadow:var(--card-shadow)}
.card > h2, .card > h3{margin-bottom:12px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:700px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--card);border-radius:var(--r-lg);padding:14px 16px;border:1px solid var(--line);box-shadow:var(--card-shadow)}
.tile .l{font-size:12px;font-weight:500;color:var(--muted)}
.tile .v{font-size:24px;font-weight:600;margin-top:4px;letter-spacing:-.01em}
.tile .v.accent{color:var(--accent)}
.tile .s{font-size:12px;color:var(--muted);margin-top:4px}
.grid2{display:grid;gap:14px}
@media (min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.list{display:grid;gap:6px}
/* 资料型的「标签 → 值」用这个，不要用 .list（那个是两端对齐，宽屏上中间会空一大片）。
   标签一列固定宽、值紧跟着，整块最多 640px（2026-09-28 用户反馈设置页太散）。 */
.kv{display:grid;gap:6px;max-width:640px}
.kv .it{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px;padding:10px 12px;
        border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}
.kv .it > :first-child{color:var(--muted);font-size:13px}
@media (max-width:520px){ .kv .it{grid-template-columns:110px 1fr;gap:8px} }
.list .it{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);background:var(--bg);border:1px solid var(--line)}

/* ── 标签 / 提示 ── */
.pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-sm);font-size:12px;font-weight:600;line-height:1.5}
.pill.good{background:var(--pill-good-bg);color:var(--pill-good-fg)} .pill.bad{background:var(--pill-bad-bg);color:var(--pill-bad-fg)}
.pill.warn{background:var(--pill-warn-bg);color:var(--pill-warn-fg)} .pill.info{background:var(--pill-info-bg);color:var(--pill-info-fg)}
.pill.muted{border:1px solid var(--input-line);color:var(--muted)}
/* ⚠️ 这里**必须是 block**（2026-10-02 修）：原来是 flex，于是框里每一段文字、每个 <b>、每个 <br>
   都变成一个 flex 列，中间还塞 10px 间距 —— 只要提示语里有粗体或换行，整段就被切成几根窄柱子。
   全站有 5 处提示语带 <b>/<code>，都被这条坑到过。 */
/* ⚠️ 必须有这条：`hidden` 属性的默认样式是 display:none，但它和 `.msg{display:block}`
   这类类选择器**优先级相同**，后定义的赢 —— 于是 `<div class="msg err" hidden>` 会
   露出一个空的红框（2026-10-07 登录页踩到）。全局压住，所有带 hidden 的元素都安全。 */
[hidden]{display:none!important}
.msg{display:block;padding:12px 14px;border-radius:var(--r);font-size:13px;line-height:1.55;border:1px solid transparent}
.msg.ok{background:var(--good-soft);color:var(--good)} .msg.err{background:var(--bad-soft);color:var(--bad)}
.msg.info{background:var(--info-soft);color:var(--fg)}
.msg.warn{background:var(--warn-soft);color:var(--fg);border-color:rgba(252,213,53,.4)}

/* ── 按钮：主黄 / 次灰（ghost）/ 危险红边（danger）/ 纯文字（text）── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:var(--r);border:0;
  font:inherit;font-weight:500;font-size:14px;cursor:pointer;background:var(--btn-bg);color:var(--btn-fg);white-space:nowrap;transition:background .15s}
.btn:hover{background:var(--btn-hover)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:var(--input);color:var(--fg);border:1px solid var(--input-line)} .btn.ghost:hover{background:var(--hover)}
.btn.text{background:transparent;color:var(--fg)} .btn.text:hover{background:var(--hover)}
.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--bad)} .btn.danger:hover{background:var(--bad-soft)}
.btn.good{background:var(--good);color:#fff} .btn.good:hover{background:var(--good)}
.btn.sm{height:32px;padding:0 12px;font-size:13px}
.btn.xs{height:24px;padding:0 8px;font-size:12px;border-radius:var(--r-sm)}
.btn:disabled{background:var(--disable);color:var(--disabled-fg);border-color:transparent;cursor:not-allowed}
.theme-btn{height:32px;border:1px solid var(--input-line);background:var(--input);color:var(--fg);border-radius:var(--r);padding:0 10px;font:inherit;
  font-size:12px;font-weight:500;cursor:pointer}
.theme-btn:hover{background:var(--hover)}
/* 手机顶栏的「Desktop」按钮（用户 2026-09-30：A 方案，但要显眼）——黄底黑字，和主按钮同一个颜色 */
.wide-btn{display:inline-flex;align-items:center;gap:5px;background:var(--yellow);border-color:var(--yellow);
  color:#181A20;font-weight:600;white-space:nowrap}
.wide-btn:hover{background:var(--btn-hover);border-color:var(--btn-hover)}
.wide-btn .ic{width:15px;height:15px}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── 输入 ── */
input,select,textarea{font:inherit;color:var(--fg);background:var(--input);border:1px solid var(--input-line);border-radius:var(--r);
  height:40px;padding:0 12px;width:100%;transition:border-color .15s}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{border-color:var(--yellow);outline:0;box-shadow:0 0 0 2px rgba(252,213,53,.2)}
input:disabled,select:disabled{background:var(--disable);color:var(--disabled-fg);border-color:transparent}
::placeholder{color:var(--placeholder)}
textarea{height:auto;min-height:120px;padding:10px 12px;font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;line-height:1.5;resize:vertical}
select{appearance:none;-webkit-appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23848E9C' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
input[type=radio],input[type=checkbox]{width:auto;height:auto}
label{display:block;font-size:12px;font-weight:500;color:var(--fg2);margin-bottom:6px}
.field{display:grid;gap:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.row > *{flex:1 1 160px}
.row > .btn{flex:0 0 auto}
.seg{display:flex;background:var(--seg-track);border:1px solid var(--input-line);padding:3px;border-radius:var(--r);gap:2px}
.seg label{flex:1;margin:0;text-align:center;padding:8px 0;border-radius:6px;font-weight:500;font-size:13px;color:var(--fg2);cursor:pointer}
.seg input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}   /* 不用 display:none，否则键盘 Tab 选不到 */
.seg input:checked + label{background:var(--card);color:var(--fg);font-weight:600;box-shadow:0 1px 3px rgba(24,26,32,.18)}
/* .seg.auto：格子宽度跟着字走，不再平分（用户 2026-09-28：Method 的格子不要固定 size）*/
.seg.auto{display:inline-flex;max-width:100%;flex-wrap:wrap}
.seg.auto label{flex:0 0 auto;padding:8px 14px}
.seg label:hover{color:var(--fg)}
/* 上传页每个号码的倒计时（2026-09-30）：离超时还有多久，30 秒内变红 */
/* 倒计时跟在状态标签右边，两个盒子一起按中线对齐（用户 2026-09-30：任何字和倒计时都要上下 align）*/
.left{font-size:12px;font-weight:600;color:var(--fg2);font-variant-numeric:tabular-nums;
  vertical-align:middle;line-height:1.5}
.pill{vertical-align:middle}
.left.bad{color:var(--bad)}
/* 上传框：一个框既能打一个也能贴一列，别拉太长；Submit 永远在它右边（手机上也是，用户 2026-09-30）*/
.numbar{display:flex;gap:8px;align-items:flex-start}
.numbar textarea{flex:1 1 auto;min-width:0;min-height:40px;resize:vertical;line-height:1.4;padding-top:9px}
.numbar .btn{flex:0 0 auto}
/* 顶部提示框（用户 2026-09-30 从 3 个样本里选的 A）：贴了非数字的号码时弹一下，4 秒自己走。
   下面那条细线是倒计时；点一下马上关掉；连着弹会重新计时，不会堆一摞。 */
.toast{position:fixed;left:50%;top:10px;transform:translate(-50%,-14px);z-index:60;
  width:min(420px, calc(100vw - 24px));background:var(--toast-bg);color:var(--toast-fg);
  border-radius:10px;padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.28);font-size:12.5px;
  display:grid;grid-template-columns:18px 1fr;gap:9px;align-items:start;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .18s, transform .18s}
.toast.on{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.toast b{display:block;font-weight:600;margin-bottom:1px}
.toast .list{font-variant-numeric:tabular-nums;opacity:.85;word-break:break-all}
.toast .bar{grid-column:1 / -1;height:2px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:7px}
.toast .bar i{display:block;height:100%;background:var(--bad);width:100%;transform-origin:left}
.toast.on .bar i{animation:toastdrain 4s linear forwards}
@keyframes toastdrain{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.toast{transition:none}.toast.on .bar i{animation:none}}
/* 手机上的号码表 = 样本 B（用户 2026-09-30 从 4 个排法里选的）：
   只留「号码 · 验证码 · 状态」三列，其余（日期/应用/国家/方式/上传人）收进一行，点一下展开。
   PC 完全不受影响 —— 下面这些规则只在 640px 以下生效。*/
.nonly{display:none}          /* 短词：只在手机上出现，见下面的 @media */
/* 箭头那一格：**点它才展开**，所以要够大好按（整行高 + 左右各留一点） */
.mcell{display:none;width:34px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer;
  user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,.08)}
.mcell:active{color:var(--fg)}
tr.rmore{display:none}
tr.rmore td{background:var(--bg);white-space:normal;font-size:12px;color:var(--muted);line-height:1.5}
tr.rmore .sep{opacity:.5;margin:0 4px}
@media (max-width:640px){
  .mcell{display:table-cell}
  .hide-s{display:none}                  /* 手机上收起来的列（th 和 td 都打这个类）*/
  tr.rmore.on{display:table-row}
  tr.rmain td{padding-top:9px;padding-bottom:9px}   /* 手指点得中 */
  /* **状态那一格永不换行**（用户 2026-09-30：倒计时要跟在状态右边，不许掉到第二行）——
     手机上标签已经换成短词（Wait/Code/OK…），「Code 1:55」一行只要 ~80px，放得下。
     需要换行的是**放原因的那一列**（`BAD_NUMBER`、`Already submitted within 30 days`…）。 */
  /* 这一格可以折行（长原因），但**只能在空格处折** —— `.mono` 带着 overflow-wrap:anywhere，
     不挡住的话 BAD_NUMBER 会被拦腰断成两行（用户 2026-09-30："无端端换行"）。
     再给它一个固定宽度：贴了新号码、那一行冒出输入框/Cancel 时，列宽不会整张表跟着跳。 */
  td.wrapcell{white-space:normal;overflow-wrap:normal;word-break:normal;width:96px}
  /* 状态标签在手机上换短词（2026-09-30）：「Waiting for code 2:13」在 98px 的格子里放不下，
     会折成两行、行高从 41 变 60。同一个标签里放两份文字，靠 CSS 切换，JS/模板不用判断屏幕宽。*/
  .wonly{display:none}
  .nonly{display:inline}
  /* 手机上别把内容硬挤在中间（用户 2026-09-30）：412px 的屏幕原来光留白就吃掉 74px（18%）——
     外层 16+16、卡片 20+20。手机上收窄，再让表格顶到卡片边缘，表格可用宽度 338 → 400。*/
  .main{padding-left:8px;padding-right:8px}
  .card{padding-left:12px;padding-right:12px}
  /* 表格顶到卡片边缘：卡片打 `bleed`（左右内边距归零），卡片里**除了表格**的东西自己补回内边距。
     （试过给 .tw 负边距 + width，Chrome 里量出来宽度纹丝不动，所以走这条明确的路）*/
  .card.bleed{padding-left:0;padding-right:0}
  .card.bleed > *:not(.tw){padding-left:12px;padding-right:12px}
  .tw td, .tw th{padding-left:6px;padding-right:6px}
  .tw td:first-child, .tw th:first-child{padding-left:12px}
  .tw td:last-child, .tw th:last-child{padding-right:12px}
  /* 号码那一列**按全世界最长的号码预留**：E.164 上限 15 位数字。`ch` = 一个数字的宽度
     （我们的数字是 tabular-nums，每个字符等宽），所以 15ch + 左右内边距刚好，
     换成任何国家的号码都不会挤、也不会让别的列跳来跳去。 */
  tr.rmain td:first-child, .tw thead th:first-child{min-width:calc(15ch + 24px)}
}
/* Daily bills：有问题的行左边一条红边；点开的明细行用页面底色 */
tr.warnrow td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
tr.detail td{background:var(--bg);white-space:normal}
.agentlink{color:inherit}
.agentlink:hover{color:var(--accent)}
/* 账单卡：一行「标签 → 数字」的小格子（2026-09-29 重排 Daily bills）*/
.billrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.billrow > div{flex:1 1 130px;background:var(--bg);border-radius:var(--r);padding:8px 10px}
.billrow span{display:block;font-size:11px;color:var(--muted);margin-bottom:2px}
.billrow b{font-size:15px;font-weight:600}
.billrow i{font-style:normal;font-size:10px}
/* 各国明细：一个国家一个小方块，别再挤成一长串文字 */
.ccs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cc{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--fg2);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px;white-space:nowrap}
.cc i{font-style:normal;color:var(--muted)}
.cc i.good{color:var(--good)}
/* 左右滑动开关（用户 2026-09-29：要和 TG bot 面板的 maintenance 开关一样的形式）。
   用法：<label class="switch"><input type="checkbox" …><span class="slider"></span></label>
   —— 开 = 绿色（运行/跟随中），关 = 灰；旁边配一个 .statusdot 文字标签。 */
.switch{position:relative;width:44px;height:24px;display:inline-block;flex:0 0 auto}
.switch input{position:absolute;width:0;height:0;opacity:0}
.switch .slider{position:absolute;inset:0;background:var(--seg-track);border:1px solid var(--input-line);
  border-radius:999px;transition:.18s;cursor:pointer}
.switch .slider::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;
  border-radius:50%;transition:.18s;box-shadow:0 1px 2px rgba(24,26,32,.3)}
.switch input:checked + .slider{background:var(--good);border-color:var(--good)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.switch input:disabled + .slider{opacity:.45;cursor:not-allowed}
.switch input:focus-visible + .slider{outline:2px solid var(--accent);outline-offset:2px}
/* 开关旁边的状态文字：小圆点 + 字 */
.statusdot{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600}
.statusdot i{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block}
.statusdot.off{color:var(--fg2)}
.statusdot.off i{background:var(--muted)}
.statusdot.warn{color:var(--bad)}
.statusdot.warn i{background:var(--bad)}
.seg input:focus-visible + label{outline:2px solid var(--accent);outline-offset:1px}
.btn:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

/* ── 表格：无斑马纹、表头灰字 12px、行 hover、数字右对齐 ── */
/* 宽表格在自己的框里横滑；overscroll-behavior-x:contain = 滑到头不会把滑动传给页面 */
.tw{overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:13px}
th{font-size:12px;font-weight:500;color:var(--muted);text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
table tr:hover td{background:var(--hover)}
tr.sum td{font-weight:600;background:var(--bg)}
th.r,td.r{text-align:right}
td input,td select{height:32px;padding:0 8px}
.pager{display:flex;gap:6px;align-items:center;justify-content:flex-end;padding-top:12px;font-size:13px}
.pager a{min-width:32px;height:32px;display:inline-grid;place-items:center;padding:0 10px;border-radius:var(--r-sm);color:var(--fg2);border:1px solid var(--input-line)}
.pager a:hover{background:var(--hover)}
.pager .muted{margin-right:auto}

/* ── 其他 ── */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:var(--bg2)}
.login .card{width:100%;max-width:400px;display:grid;gap:14px;padding:24px}
.card.narrow{max-width:680px}               /* 设置页这类窄内容，别铺满整个宽屏 */
details summary{cursor:pointer;font-weight:500;color:var(--accent);font-size:13px}
.keybox{font-family:var(--code);font-size:13px;word-break:break-all;background:var(--warn-soft);color:var(--fg);border:1px solid var(--yellow);
  padding:10px 12px;border-radius:var(--r)}
pre{font-family:var(--code);font-size:12px;line-height:1.5}

/* ── 自定义下拉（app.js 把所有 <select> 换成它）── */
.dd{position:relative;width:100%}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:40px;padding:0 12px;
  background:var(--input);border:1px solid var(--input-line);border-radius:var(--r);color:var(--fg);font:inherit;cursor:pointer;text-align:left}
.dd-btn:hover{border-color:var(--muted)}
.dd.open .dd-btn{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(252,213,53,.2)}
.dd-caret{color:var(--muted);font-size:12px}
.dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-menu{display:none;position:absolute;left:0;top:calc(100% + 4px);min-width:100%;max-height:300px;overflow:auto;z-index:30;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:6px}
.dd.open .dd-menu{display:block}
.dd-search{height:34px;margin-bottom:6px}
.dd-item{padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;white-space:nowrap;color:var(--fg)}
.dd-item:hover{background:var(--hover)}
.dd-item.on{color:var(--accent);font-weight:600}
td .dd-btn{height:32px;padding:0 8px}

/* ── 密码框 + 看密码按钮（app.js 自动包上）── */
.pw{position:relative;display:block;width:100%}
.pw input{padding-right:40px}
.pw-eye{position:absolute;right:1px;top:1px;bottom:1px;width:36px;border:0;background:transparent;color:var(--muted);
  cursor:pointer;border-radius:0 var(--r) var(--r) 0;display:grid;place-items:center;padding:0}
.pw-eye:hover{color:var(--fg)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* 图标真的会换（方案 A，用户 2026-09-28 选的）：睁眼 = 现在藏着，点一下看；闭眼划线 + 变黄 = 现在是明文 */
.pw-eye svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.pw-eye .eye-off{display:none}
.pw-eye.on{color:var(--accent)}
.pw-eye.on .eye-on{display:none}
.pw-eye.on .eye-off{display:block}
td .pw input, .row .pw input{width:100%}

/* 应用 logo（多项目区分） */
img.applogo{vertical-align:-0.2em;border-radius:4px;flex:0 0 auto}   /* 方形（圆角），同号池后台 */
.seg label img.applogo{vertical-align:-0.25em;margin-right:2px}

/* 勾选框 / 单选（样本里的 .check），模板写 <label class="check"><input type=checkbox><i></i> 文字</label> */
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--fg);font-weight:400;margin:0}
.check i{width:18px;height:18px;border:1.5px solid var(--input-line);border-radius:4px;display:inline-grid;place-items:center;
  background:var(--input);flex:0 0 auto}
.check input{display:none}
.check input:checked + i{background:var(--yellow);border-color:var(--yellow)}
.check input:checked + i::after{content:"";width:5px;height:9px;border:solid #181A20;border-width:0 2px 2px 0;transform:rotate(45deg);margin-top:-2px}
.check.radio i{border-radius:50%}
.check.radio input:checked + i::after{content:"";width:8px;height:8px;border:0;border-radius:50%;background:#181A20;transform:none;margin:0}

/* 上传表格：格子里的输入框平时没边框，像表格软件；hover/focus 才显形 */
/* 监控页的迷你折线（CPU / 内存），纯 flex 的小竖条，不引图表库 */
.spark{display:flex;align-items:flex-end;gap:1px;height:46px;background:var(--bg);border:1px solid var(--line);
       border-radius:var(--r);padding:4px}
.spark i{flex:1;min-width:1px;min-height:2px;display:block;background:var(--good);border-radius:2px 2px 0 0}
.spark.mem i{background:var(--accent)}

/* 上传页顶部的比例条（用户 2026-09-28 从 5 个样本里选的 D）：按比例上色的横条 + 一行数字 */
.statbar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--seg-track)}
.statbar i{display:block;height:100%;transition:width .3s}
.statbar i[data-bar=s]{background:var(--good)}
.statbar i[data-bar=w]{background:var(--warn)}
.statbar i[data-bar=r]{background:var(--muted)}
.statbar i[data-bar=f]{background:var(--bad)}
.statlegend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:6px}
.statlegend b{color:var(--fg);font-size:14px;font-weight:600;margin-right:3px;font-variant-numeric:tabular-nums}
.statlegend .g b{color:var(--good)} .statlegend .r b{color:var(--bad)}
.statlegend i{font-style:normal}
.statlegend .n{display:none}                 /* 窄屏用短词：ok / wait / run / fail */
@media (max-width:640px){ .statlegend{gap:10px} .statlegend .w{display:none} .statlegend .n{display:inline} }

.gridin{height:32px;padding:0 8px;border:1px solid transparent;background:transparent;border-radius:6px;width:100%}
.gridin:hover:not(:disabled){border-color:var(--input-line)}
.gridin:focus{background:var(--input);border-color:var(--yellow);box-shadow:none}

/* 后台 worker 配置里的国家按钮（照抄 bot 的交互：点一下变 Personal）*/
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 10px;border-radius:999px;
  border:1px solid var(--input-line);background:var(--card);color:var(--fg2);font:inherit;font-size:13px;cursor:pointer}
.chip:hover{background:var(--hover)}
.chip.on{background:var(--yellow);border-color:var(--yellow);color:var(--btn-fg);font-weight:600}   /* 黄 = Personal */
.chip i{font-style:normal;opacity:.5;padding:0 2px}
.chip i:hover{opacity:1;color:var(--bad)}
.apk-group{background:var(--bg)}

/* 结账表每一行右边那个「下载那天的号码」按钮（2026-10-01）：只有图标，手机上也不占地方 */
td.dl{width:1%;white-space:nowrap;padding-left:4px;padding-right:4px}
td.dl .btn{padding:0 6px}
td.dl .ic{width:14px;height:14px;display:block}

/* 展开行里的小表（账单按国家分类、Report 的各国/各成员，2026-10-02）：
   比外层表收紧一档、最后一行不画线，看起来像"附在这一天下面"而不是又一张独立的表。 */
tr.detail table.inner{width:auto;min-width:min(420px,100%)}
tr.detail table.inner th{padding:4px 10px 4px 0;font-size:11px}
tr.detail table.inner td{padding:5px 10px 5px 0;border-bottom:1px solid var(--line);font-size:12.5px}
tr.detail table.inner tr:last-child td{border-bottom:0}