/* JBTool 应用面样式重写版（v7）
范围：只覆盖 /login /register /user/* /admin/* /downloads 这些吃 style.css 的页；
首页与定价页自带内联样式，不经这一层，所以不会被我改动。
原则：类名与结构一律沿用原文件（模板不改），只重排观感层。
为什么保留浅色底：后台是 12 列数据表，浅色在高密度数字上的可读性明显优于深色；
顶部条本来就是 #10182a 深色，与首页同族，所以"深浅不统一"其实只发生在 body 之下。
*/
:root {
color-scheme: light;
/* 底色不用纯白：大面积表格里纯白最刺眼 */
--bg: #f5f7fa; --bg-2: #eef2f8; --card: #fff;
--ink: #16202f; --ink-2: #46536b; --muted: #6b7789;
--brand: #2563eb; --brand-2: #1d4ed8; --brand-soft: #eaf0fe;
/* 与首页同一支渐变，用于品牌字与主按钮，让两侧认得出是同一个产品 */
--grad: linear-gradient(135deg, #4f7cff 0%, #7c5cff 100%);
--line: #e2e8f1; --line-2: #cfd8e6;
--danger: #c0392b; --danger-bg: #fdecea; --danger-line: #f3c4bd;
--ok: #1a7f37; --ok-bg: #e9f6ee; --ok-line: #bfe3ca;
--warn: #9a6700; --warn-bg: #fff6e0;
--r-s: 8px; --r-m: 12px; --r-l: 16px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 14px; --sp-4: 22px; --sp-5: 32px;
/* 阴影分三档，之前全站没有阴影，卡片和页面贴在一起没有层次 */
--sh-1: 0 1px 2px rgba(16, 24, 42, .06);
--sh-2: 0 2px 6px rgba(16, 24, 42, .07), 0 1px 2px rgba(16, 24, 42, .05);
--sh-3: 0 12px 32px -12px rgba(16, 24, 42, .22), 0 2px 6px rgba(16, 24, 42, .06);
--ring: 0 0 0 3px rgba(37, 99, 235, .18);
--mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
body {
font-family: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
background: var(--bg); color: var(--ink);
font-size: 14.5px; line-height: 1.65;
-webkit-font-smoothing: antialiased;
/* 原来 body 没有 flex 列，footer 会浮在半屏空白里；钉住视口让主区吃掉剩余高度 */
min-height: 100vh; display: flex; flex-direction: column;
}
a { color: inherit; text-decoration: none }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px }
::selection { background: rgba(37, 99, 235, .18) }
/* ---------- 顶部条 ---------- */
.topbar {
background: #10182a; padding: 0; position: sticky; top: 0; z-index: 40;
box-shadow: var(--sh-2);
}
.topbar .wrap {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
min-height: 58px; padding-top: 6px; padding-bottom: 6px;
}
.brand { color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .3px; line-height: 1 }
/* 品牌字用首页那支渐变，取代原来"JB 白 + Tool 蓝"的拼色 */
.brand b {
background: var(--grad); -webkit-background-clip: text; background-clip: text;
color: transparent; font-weight: 800;
}
.topbar nav {
display: flex; gap: 2px; align-items: center;
/* 后台导航 11 项，窄屏放不下；用横向滚动取代折行，折行会把顶栏撑高一倍 */
overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
flex-wrap: nowrap; padding: 4px 0; margin: 0 -4px;
}
.topbar nav::-webkit-scrollbar { display: none }
.topbar nav a {
color: #b9c6dd; font-size: 13.5px; padding: 7px 11px; border-radius: var(--r-s);
white-space: nowrap; transition: color .18s, background-color .18s;
}
.topbar nav a:hover { color: #fff; background: rgba(255, 255, 255, .08) }
.linklike {
background: none; border: 0; color: #b9c6dd; font: inherit; font-size: 13.5px;
cursor: pointer; padding: 7px 11px; border-radius: var(--r-s); white-space: nowrap;
transition: color .18s, background-color .18s;
}
.linklike:hover { color: #fff; background: rgba(255, 255, 255, .08) }
.inline { display: inline-flex; align-items: center }
/* ---------- 版面 ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 28px); width: 100% }
main.wrap { flex: 1 0 auto; padding-top: clamp(20px, 3.2vw, 34px); padding-bottom: clamp(30px, 5vw, 56px) }
.narrow { max-width: 460px; margin: 0 auto }
/* ---------- ★认证页（登录 / 注册 / 找回密码）----------
上一版我只把这几页的按钮和间距换了，几何与留白几乎没动 —— 用户看完的原话是
"好像变化并不大"。而未登录时用户能看到的**就只有这几页**（`/user`、后台根路径
都会 303 到登录页），所以"改得多"的那部分（宽表密度）他根本没看见。
这一档做的是能一眼看出的三件事：品牌底色带、卡片落位、把三个登录方式做成一个分段控件。 */
body:has(main .panel.narrow) {
background:
radial-gradient(1100px 460px at 50% -140px, var(--brand-soft), rgba(255, 255, 255, 0) 72%),
var(--bg);
}
main.wrap:has(> .panel.narrow) {
display: flex;
padding-top: clamp(24px, 6vh, 64px); padding-bottom: clamp(24px, 6vh, 64px);
}
/* 用 margin:auto 而不是 align-items:center 居中：flex 容器配 align-items:center 时，
比视口高的卡片会把顶部顶到滚动区之外且滚不回来；margin:auto 没这个毛病。 */
main.wrap:has(> .panel.narrow) > .panel.narrow { margin: auto }
.panel.narrow {
width: min(468px, 100%); padding: clamp(24px, 4.5vw, 36px) clamp(20px, 4.5vw, 32px);
box-shadow: var(--sh-3); border-color: var(--line-2);
}
.panel.narrow h2 { font-size: 24px; margin-bottom: var(--sp-4) }
/* 三种凭据方式：模板里原本是一排独立 .btn + 行内 style，且**首屏没有选中态**
（`setTab()` 只在点击后才跑）⇒ 配套把模板改成打 `.on` 类并在载入时调一次。 */
.segs {
display: flex; gap: 0; margin: 0 0 var(--sp-4);
border: 1px solid var(--line-2); border-radius: var(--r-s); overflow: hidden; background: #fff;
}
.segs .btn {
flex: 1 1 auto; min-width: 0; padding: 9px 6px; font-size: 13.5px;
border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--ink-2);
}
.segs .btn + .btn { border-left: 1px solid var(--line) }
.segs .btn:hover { background: var(--bg-2); color: var(--ink); box-shadow: none }
.segs .btn.on {
background: var(--brand-soft); color: var(--brand); font-weight: 650;
box-shadow: inset 0 -2px 0 var(--brand);
}
.segs .btn:focus-visible { outline-offset: -2px }
.panel {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
padding: clamp(18px, 2.6vw, 28px); box-shadow: var(--sh-2);
}
.panel h2 { font-size: 21px; line-height: 1.35; letter-spacing: -.01em; margin-bottom: var(--sp-3); font-weight: 700 }
.panel h3 { font-size: 15.5px; color: var(--ink); margin: var(--sp-4) 0 var(--sp-2); font-weight: 650 }
.panel > h2:first-child { margin-top: 0 }
.card {
background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m);
padding: var(--sp-4); box-shadow: var(--sh-1); transition: box-shadow .2s, border-color .2s, transform .2s;
}
.card:hover { box-shadow: var(--sh-3); border-color: var(--line-2) }
.card h3 { font-size: 16px; margin-bottom: 6px }
.card p { color: var(--ink-2); font-size: 14px }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4) }
/* 设备页那张 12 列表要突破 1240 容器拉满视口（原设计保留，只把负边距跟新 padding 对齐）
★后半条选择器是给 /admin/users 补的：它有 13 列却是普通 .panel（模板里没标 .wide，
而源码在 /root/jbweb-build-scratch 是只读的，我不能改模板）。
用 :has(th:nth-child(10)) 在 CSS 侧认出"列数 ≥10 的密表"，套同一套拉满视口的处理。 */
.panel.wide, .panel:has(> table.list th:nth-child(10)) {
max-width: none; width: auto;
margin-left: calc(50% - 50vw + clamp(14px, 3vw, 28px));
margin-right: calc(50% - 50vw + clamp(14px, 3vw, 28px));
}
/* ---------- 按钮 ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 15px; border-radius: var(--r-s); border: 1px solid var(--line-2);
background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 550;
line-height: 1.4; cursor: pointer; white-space: nowrap; user-select: none;
box-shadow: var(--sh-1);
transition: background-color .16s, border-color .16s, box-shadow .16s, transform .08s, color .16s;
}
/* 原来 hover 只有 opacity:.9，按下去毫无反馈；改成可感知的底色+阴影变化 */
.btn:hover { background: var(--bg-2); border-color: #b9c5d8; box-shadow: var(--sh-2) }
.btn:active { transform: translateY(1px); box-shadow: none }
.btn:focus-visible { outline: none; box-shadow: var(--ring) }
.btn.primary {
background: var(--grad); border-color: transparent; color: #fff;
box-shadow: 0 1px 2px rgba(37, 99, 235, .35), 0 4px 14px -6px rgba(79, 124, 255, .55);
}
.btn.primary:hover { background: linear-gradient(135deg, #3f6cf0, #6c4bf0); border-color: transparent }
.btn.danger, button.danger { color: var(--danger); border-color: var(--danger-line); background: #fff }
.btn.danger:hover, button.danger:hover { background: var(--danger-bg); border-color: #e6a49b }
.btn.small { padding: 4px 10px; font-size: 12.5px; border-radius: 6px; box-shadow: none }
.btn.small:hover { box-shadow: var(--sh-1) }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none }
.btn.wide { width: 100% }
/* ---------- 表单 ---------- */
form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 550; color: var(--ink-2); letter-spacing: .01em }
form input, form select, form textarea {
display: block; width: 100%; padding: 9px 12px; font: inherit; font-size: 14.5px;
color: var(--ink); background: #fff;
border: 1px solid var(--line-2); border-radius: var(--r-s);
transition: border-color .16s, box-shadow .16s, background-color .16s;
}
form input::placeholder, form textarea::placeholder { color: #9aa6b8 }
form input:hover, form select:hover { border-color: #b3c0d4 }
form input:focus, form select:focus, form textarea:focus {
outline: none; border-color: var(--brand); box-shadow: var(--ring); background: #fff;
}
form input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--brand); height: auto; padding: 0 }
.rowform { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin: var(--sp-3) 0 var(--sp-4) }
.rowform label { margin: 0; flex: 1 1 150px; min-width: 0 }
.genform { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; margin: var(--sp-3) 0 var(--sp-2) }
.genform label { margin: 0; flex: 0 1 auto }
.genform input, .genform select { width: 190px; margin-top: 6px }
.genform .btn { margin-bottom: 1px }
.searchform { display: flex; gap: 8px; align-items: center; margin: var(--sp-1) 0 var(--sp-2) }
.searchform input { width: min(320px, 100%); margin: 0; padding: 8px 11px; font-size: 14px }
.filebox { display: block; margin: var(--sp-3) 0 }
/* ---------- 提示条 ---------- */
.alert, .notice {
border-radius: var(--r-s); padding: 10px 14px; margin-bottom: var(--sp-3);
font-size: 13.5px; line-height: 1.6; border: 1px solid; display: flex; gap: 8px; align-items: flex-start;
}
.alert { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line) }
.notice { background: var(--ok-bg); color: var(--ok); border-color: var(--ok-line) }
.muted { color: var(--muted); font-size: 13px }
/* 只给段落级的 muted 加间距。上一版写的是 .panel .muted，而模板里表格里到处是
(管理员) 这种行内用法 ⇒ 给行内 span 加了 margin-top，
直接造成同一张表里行高忽高忽低（截图第 1 行 admin 明显比别的行矮）。 */
p.muted { margin-top: 10px; line-height: 1.75 }
/* ---------- 表格（本轮主战场） ---------- */
table.list, table.kv { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0 var(--sp-4); font-size: 14px }
table.list th, table.list td, table.kv th, table.kv td {
/* 内边距维持原版的 9px：上一版我改成 10px，单行看不出差别，
但 /admin/loginlogs 那种 318 行的页面上就放大成"整页变高 1.3KB px"（实测 30208 → 31521）。
密度靠斑马纹与表头吸顶去解决，不靠加内边距。
★横向从 10px 收到 7px：13 列的表每列省 6px = 78px，是补"表宽 > 视口"最便宜的一笔，
且不改变行高（纵向仍是 9px）。 */
border-bottom: 1px solid var(--line); padding: 9px 7px; text-align: left; vertical-align: middle;
}
/* ★表头断行是"看着乱"的头号来源：12 列时 th 被挤成两行（"到期时/间"） */
table.list th {
font-size: 12.5px; font-weight: 650; color: var(--ink-2); letter-spacing: .02em;
white-space: nowrap; background: var(--bg-2); border-bottom: 1px solid var(--line-2);
position: sticky; top: 58px; z-index: 2;
}
table.list tbody tr:nth-child(even) { background: #fafbfe }
table.list tbody tr:hover { background: var(--brand-soft) }
table.list tbody tr:last-child td { border-bottom: 0 }
/* 日期/时间在窄列里折行很难读，统一不折 */
/* 长值（邮箱、注册码、URL）允许按字符断，但不许把中文词拆成竖排。
★这两条必须与 color 写在同一条 `table.list td` 里：顶层出现两次同名选择器时，
后写的会静默盖掉前写的，对拍会把它读成"修复无效"。 */
table.list td { color: var(--ink); word-break: normal; overflow-wrap: anywhere }
table.kv { font-size: 14.5px }
table.kv th { width: clamp(96px, 22%, 160px); color: var(--muted); font-weight: 500; white-space: nowrap }
table.kv td { color: var(--ink) }
.tablescroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-m) }
/* ★这里原来写着 `.tablescroll table.list { min-width: 100% }` —— 它比下面全局那条
`table.list { min-width: max-content }` 特异度更高(0,2,1 > 0,1,1)，于是**只有带 .tablescroll
的三张表**(admin_devices / admin_cmd / user_devices)拿不到 max-content 下限，被压回容器宽，
中文列逐字竖排：实测 /user/devices@390 行高 167px、/admin/devices@1440 行高 65px。
删掉之后由全局那条统一给下限；表格窄于容器时仍由上面的 width:100% 撑满。 */
/* ★13 列的用户表外面没有 .tablescroll 包（模板里就是裸 table），
所以它只能被压进面板宽度：我上一版给所有 th 加 nowrap 之后，
长文本列被饿成一字一行（截图里"已封禁(管理员手动)"竖排就是这个）。
让带表的面板自己横向滚动、表格按内容自然撑开，列宽就不再被抢。
:has() 不支持的浏览器退化成"和现在一样挤"，不会更糟。 */
.panel:has(> table.list), .panel:has(> .tablescroll) { overflow-x: auto }
/* 密表已经拉满视口了，面板自己那 28px 左右内边距就成了最后一格被切掉的原因。
给"≥10 列"的面板让出这 20px（18px 上限），比再压字号划算。 */
.panel:has(> table.list th:nth-child(10)) { padding-left: clamp(12px, 1.8vw, 18px); padding-right: clamp(12px, 1.8vw, 18px) }
/* 字号 14 → 13.5：/admin/users 的 max-content 宽 1506px 比拉满视口后的可用宽还多，
光靠收内边距补不平。这一档是"密表"与"正文"的分界，13.5px 在 1440 上仍可读。 */
table.list { min-width: max-content; font-size: 13.5px }
.mono { font-family: var(--mono); font-size: .95em; letter-spacing: .02em }
/* 数字列对齐：卡密/大小/次数这类值不等宽时竖着看会跳 */
td.mono, .codebox { font-variant-numeric: tabular-nums }
/* ---------- ★操作列 ----------
实测线上是 | ，
而 opsrow 原本 flex-wrap:wrap + 该列只有 113px 宽 ⇒ 两个按钮折成两行，把每行撑到 86px（封禁行四个按钮更高）。
这里改成不折行、让列按内容撑开；表格本身在 .tablescroll 里，横向放不下时是整表滚动而不是把行撑高。
（.userops 是另一版源码里的类名，线上没有，两条都留着以便将来切到那版时仍然成立。） */
.opsrow { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; white-space: nowrap }
/* ★光 flex-wrap:nowrap 不够：子项默认 flex-shrink:1，四个按钮会被挤窄而不是撑开列。
必须让它们不伸缩，列宽自然被撑到内容宽，放不下时交给 .tablescroll 整表横滚。
（操作列里每个按钮外面还套着一个