/* 手写，不引任何 CSS 框架、不引 CDN、不引 web font。
 *
 * 队长台的号池和席位表格用了 Vue（vendor 在 public/vendor/，不走 CDN），
 * 因为那两张表要筛选、排序、批量操作、改完不刷新整页。
 *
 * 体积**没有上限**（早期那条 30KB 硬线已取消），但有一条要守：
 * 公开页（首页 / 队员页 / /s/<令牌> 直达页）不加载 Vue。
 * 队员在手机上点开一个只读页面，不该为队长的方便下载一个框架。
 */
:root{--bg:#12141a;--fg:#e7e9ee;--dim:#9aa3b2;--line:#262a35;--card:#181b23;--acc:#4a9eff;--bad:#ff6b6b;--warn:#ffb44a}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif}
header{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.brand{color:var(--fg);text-decoration:none;font-weight:600}
.sub{color:var(--dim);font-size:13px}
/* 960 是给**读**的页面定的：首页、队员页、直达页都是成段文字，一行太长反而难读。
   表格页（队长台、站长后台）走 .wide，屏幕有多宽就用多宽——那些页面的问题正好相反，
   被掐在 960 里会让「开号时间」折成三行、操作按钮竖着排。 */
main{max-width:960px;margin:0 auto;padding:18px}
/* 1600 封顶。再宽的屏就居中留白：表格铺到 1900+ 时列与列之间会拉出大片空白，
   眼睛从「号」扫到最右边的「删除」要横跨整个屏幕，反而更累。 */
main.wide{max-width:1600px}
/* 页脚要跟着 main 一起变宽，否则宽屏下 main 铺到 1600、页脚缩在中间 960，
   左边缘对不齐，一眼就看出来是漏改的 */
footer{max-width:960px;margin:0 auto;padding:18px;color:var(--dim);font-size:12px}
footer.wide{max-width:1600px}
h1{font-size:20px;margin:0 0 10px}
h2{font-size:16px;margin:0 0 10px}
h3{font-size:14px;margin:14px 0 6px}
/* overflow-x:auto —— 窗口不够宽时**横向滚动**，而不是把表格挤变形。
   七列的表格（号 / 区域 / 用量 / 备注 / 开号时间 / 状态 / 操作）在 800px 的窗口里
   装不下是物理事实，挤压的结果是下拉框、输入框、按钮全叠在一起；
   让人横向滚一下反而更能用。 */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px;overflow-x:auto}
/* 表格吃满宽度，但成段的说明文字仍然要限宽——宽屏下一行铺到 1500px 没人读得下去 */
.hint,.meta{color:var(--dim);font-size:13px;margin:8px 0;max-width:90ch}
.warn{color:var(--warn);font-size:13px;margin:8px 0}
.flash{background:#1d2a1f;border:1px solid #2f5233;border-radius:8px;padding:10px 12px;margin:0 0 14px}
.code{color:var(--acc);font-family:ui-monospace,Consolas,monospace}
a{color:var(--acc)}
footer a{color:var(--fg)}
label{display:block;margin:10px 0;color:var(--dim);font-size:13px}
input,select,textarea,button{font:inherit}
input,select,textarea{display:block;width:100%;margin-top:4px;padding:8px 10px;background:#0e1015;color:var(--fg);border:1px solid var(--line);border-radius:6px}
textarea{font-family:ui-monospace,Consolas,monospace;font-size:13px;resize:vertical}
button,.btn{display:inline-block;margin-top:10px;padding:8px 14px;background:var(--acc);color:#08111f;border:0;border-radius:6px;font-weight:600;cursor:pointer;text-decoration:none}
button:hover,.btn:hover{filter:brightness(1.1)}
button.d{background:#3a2226;color:var(--bad)}
button.c{margin:0;padding:3px 8px;font-size:12px;background:#232836;color:var(--fg);font-weight:400}
.row{display:flex;gap:8px;align-items:flex-start}
.row input{margin-top:0}
.row button{margin-top:0}
.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.inline input,.inline select{width:auto;margin-top:0}
.inline button{margin-top:0}
/* 一行最多五个操作（保存/测活/恢复/停用/删除），窄屏放不下就让它在按钮之间折行，
   按钮自己的文字不折。之前整格 nowrap，加了测活之后表格会横向溢出。 */
/* 操作格：按钮排成**两列**，不是横着拉一长条。
   一行摊开四五个按钮会把这一列撑到 250px 以上，把中间的备注、状态全挤扁；
   两列两行只占一个半按钮的宽度，而行高本来就有余量（开号时间那格已经是两行了），
   等于把横向的紧张换成纵向的空闲。
   width:1% 是让这一列缩到内容宽——多出来的宽度留给下面 td.ed 那一列。 */
.ops{display:grid;grid-template-columns:repeat(2,minmax(56px,auto));gap:4px;width:1%;white-space:normal}
.ops form{display:block;margin:0}
.ops button{width:100%;margin:0;white-space:nowrap}
.copy{margin:10px 0}
.copy label{margin:0 0 4px}
.copy>div{display:flex;gap:8px;align-items:center;background:#0e1015;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
.copy code{flex:1;overflow-x:auto;white-space:nowrap;font-family:ui-monospace,Consolas,monospace;font-size:13px}
table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
/* 表格页的行高放开一点：一行里有下拉框、输入框、进度条、两列按钮，
   6px 的上下 padding 会让它们贴在一起，扫起来分不清哪几样是同一行的 */
main.wide th,main.wide td{padding:10px}
/* 一行里有多行内容时（开号时间、状态、按钮组）顶对齐，别让它们各自居中错开 */
main.wide td{vertical-align:top}
main.wide td.us,main.wide td.ed{vertical-align:middle}
th{color:var(--dim);font-weight:500}
td code{font-family:ui-monospace,Consolas,monospace}
tr.off td{opacity:.5}
tr.bad td{color:var(--bad)}
ul.bad{color:var(--bad);font-size:13px;padding-left:20px}
/* 长报文：**两行**以内，超出打省略号，完整值挂 title。
   之前压成一行是怕把表格撑高，但行高本来就有余量（开号时间那格已经两行了），
   两行能多说一句话、少一次悬停。上游那句 403 每个死号都一样，
   所以不放开成完全不截断——那会把三五个死号撑成一整屏。 */
.rk{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:340px;line-height:1.45}
main.wide .rk{max-width:420px}
/* 时间和状态那两列别在数字中间折行 */
td.nw,.nw{white-space:nowrap}
.ip{color:var(--dim)}
.tk code{cursor:pointer}
.tk{white-space:nowrap}
.sm{font-size:11px;margin:2px 0 0}
/* 席位那格竖着堆三样：昵称、备注、保存 */
form.seat{display:block;margin:0;min-width:0}
form.seat input{width:100%;max-width:none;margin:0 0 4px;padding:4px 7px;font-size:12px}
/* 号池行内编辑：区域下拉和备注输入框在两个 td 里，靠 form= 属性挂到同一个表单 */
td select,td.ed input{width:auto;max-width:220px;margin-top:0;padding:4px 7px;font-size:12px}
/* 备注（席位表里是「谁在用」）吃掉整行多余的宽度。
   表格是 auto 布局，只要给一列 width:100%、其余缩到内容宽，slack 就全归它。
   这么排是因为它是唯一的自由文本：其它列都是定长的号、区域、时间、按钮，
   拉宽了只是拉宽空白，而备注拉宽了真的能多写几个字。 */
td.ed{width:100%;min-width:180px}
td.ed input{width:100%;max-width:none}
/* 「保存」跟着它作用的输入框，不跟右边那堆状态/危险操作混在一起。
   靠右对齐是因为输入框是满宽的，按钮贴右边缘才像「这一格的确认」。
   两种写法都要照顾到：服务端表格里 .save 是包着按钮的 form，
   Vue 表格里 .save 直接在 button 上——所以不能只写一条。 */
.save{margin-top:5px}
form.save{text-align:right}
form.save button{margin:0}
button.save{display:block;margin:5px 0 0 auto}
/* 用量进度条。要的是「扫一眼挑出快满的那几个」，所以宽度靠满、90% 以上变红 */
td.us{min-width:110px}
.ubar{height:6px;border-radius:3px;background:#0e1015;border:1px solid var(--line);overflow:hidden}
.ubar i{display:block;height:100%;background:var(--acc)}
.ubar.hot i{background:var(--bad)}
/* 上游取号：一个平台一块，块内是「密钥/查号/手动取号/自动取号」四组表单。
   .g 是一排紧凑的小输入框，四道闸门要能一眼看全，窄屏折行。 */
.up{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0}
.up h3{margin:0 0 4px}
.up .tag{font-size:12px;font-weight:400;color:var(--dim)}
.up .g{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0}
.up .g label{margin:0}
.up .g input,.up .g select{width:88px;margin-top:2px}
.up .g .k{width:240px}
.up .g input[type=checkbox]{width:auto}
/* 「在这个浏览器记住」。勾在字前面，整体按 hint 的字号和灰度走——
   它是一句附注，不该跟「保存」抢注意力 */
.up .g label.ck{flex-direction:row;align-items:center;gap:4px;display:flex;font-size:12px;color:var(--dim)}
.up .g button{margin:0}
/* 浏览器副本那一行说明由 upstream.js 填，里面带一两个小按钮 */
.up [data-up-note] button{margin:0 0 0 2px;padding:2px 8px;font-size:12px;vertical-align:baseline}
/* 队长台页签。就是一排链接，当前那个高亮。窄屏横向滚动而不是折行——
   折行会把下面的内容顶下去，反而更找不到。 */
.tabs{display:flex;gap:4px;margin:0 0 14px;overflow-x:auto;border-bottom:1px solid var(--line)}
.tabs a{padding:8px 14px;color:var(--dim);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--fg)}
.tabs a.on{color:var(--fg);font-weight:600;border-bottom-color:var(--acc)}
/* 号池表格的筛选条（Vue 那份）。.c 按钮当选中态用，颜色反过来 */
.kf-bar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0}
.kf-bar input[type=search]{width:auto;flex:1 1 200px;margin-top:0;padding:5px 8px;font-size:13px}
.kf-bar select{width:auto;margin-top:0;padding:5px 8px;font-size:13px}
.kf-bar button{margin-top:0}
.c.on{background:var(--acc);color:#08111f;font-weight:600}
.c.rm{background:#3a2226;color:var(--bad)}
.c:disabled{opacity:.45;cursor:default}
/* 批量操作栏。只在勾了东西之后出现，所以给个底色跟普通筛选条分开 */
.kf-batch{background:#0e1015;border:1px solid var(--line);border-radius:6px;padding:6px 8px}
/* Vue 那两张表里 .ed 格可能放两个输入框（席位的昵称 + 备注），所以要 block 堆叠。
   宽度交给上面 td.ed 那条统一处理，这里只管排布，别再写 max-width 把它压回去 */
.kf .ed input{display:block;margin:0 0 4px;padding:4px 7px;font-size:12px}
.kf .ed input:last-child{margin-bottom:0}
.kf td input[type=checkbox]{width:auto;margin:0}
.kf-note{margin:8px 0;font-size:13px;color:var(--acc)}
.kf-note.bad{color:var(--bad)}
/* Vue 还没挂上时（或者挂失败了）显示的是服务端那张表，不需要额外样式；
   挂上之后 data-fallback 会被摘掉，这条只是给排查时一眼看出处于哪个状态 */
#keys-app[data-fallback]{outline:none}
/* 上游取号的区域卡。一个区一张，两列；窄屏一列。
   两个区是两个独立市场（价格、库存、能买几个都不一样），摊开成两张卡是为了
   「哪个区现在划算」不用点就看得出来。 */
/* 两张卡平分，但整块封顶 1000px。
   不让它跟着 1600 一起摊开：那样单价和三个数字中间会拉出一大片空白，
   而这张卡的信息量本来就撑不起那么宽。窄屏下自动堆成一列。 */
.zg{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin:12px 0;max-width:1000px}
.zc{border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:#0e1015;margin:0}
.zc-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.zc-t{font-size:15px;font-weight:650}
.zc-t i{color:var(--dim);font-size:12px;font-weight:400}
/* 状态徽标。有货是绿的、没货是暗的——这一眼要能替代读数字 */
.zc-b{margin-left:auto;font-size:11px;color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:2px 9px;white-space:nowrap}
.zc-b.on{color:#5cd68a;border-color:#2f5233;background:#16261a}
.zc-b.on::before{content:'●';font-size:8px;margin-right:4px;vertical-align:1px}
/* 单价是这张卡的主角，给到 28px */
.zc-p{margin:0 0 12px;color:var(--dim);font-size:12px}
.zc-p b{color:var(--fg);font-size:28px;font-weight:700;margin-right:4px;letter-spacing:-.5px}
.zc-p i{color:var(--dim);font-size:11px;margin-left:3px}
.zc-s{display:flex;gap:22px;margin-bottom:12px}
.zc-s i{display:block;color:var(--dim);font-size:11px;margin-bottom:2px}
.zc-s b{font-size:16px;font-weight:650}
/* 说明条：正常时是灰的（上次查号 + 在架数），异常时是黄的（没货 / 买不起） */
.zc-n{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:11px;color:var(--dim);line-height:1.5}
.zc-n b{margin-left:auto;color:var(--fg);font-size:13px;white-space:nowrap}
.zc-w{margin:0 0 12px;padding:8px 10px;border:1px solid #5a4620;border-radius:6px;background:#241d0e;color:var(--warn);font-size:12px;line-height:1.5}
.zc-q{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.zc-q input{width:72px;margin-top:0;padding:6px 8px;text-align:center;font-size:14px}
.zc-sum{font-size:12px;color:var(--dim)}
.zc-sum b{color:var(--fg)}
/* 主 CTA。整卡最宽的那个东西，因为它是唯一花钱的动作 */
.zc-go{display:block;width:100%;margin:0;padding:10px;font-size:14px}
.zc-go:disabled{background:#2a2d3a;color:var(--dim);cursor:default;filter:none}
/* 折叠的长解释。summary 要看得出可以点 */
details{margin:8px 0}
summary{color:var(--acc);font-size:13px;cursor:pointer}
details[open] summary{margin-bottom:4px}
ol.steps{padding-left:20px;font-size:14px}
ol.steps li{margin:6px 0}
i{color:var(--dim);font-style:normal}
/* 中等宽度（笔记本、半屏）：先把行高和字号收回来，能不滚就不滚。
   收到这一步还装不下的，交给 .card 的横向滚动兜着。 */
@media(max-width:1100px){
  main.wide{padding:14px}
  main.wide th,main.wide td{padding:6px 7px}
  table{font-size:12px}
  main.wide .rk{max-width:240px}
}
@media(max-width:640px){main,footer{padding:12px}table{font-size:12px}th,td{padding:5px 4px}.rk{max-width:120px}
td select{max-width:104px}
/* 手机上按钮挤成两列会窄到看不清字，改回一列 */
.ops{grid-template-columns:1fr}}