/*
 * 用户授权中心 自定义样式（唯一入口，勿改 vendor 里的 layui.css）
 *
 * 已实测：layui.css 里 0 个 CSS 自定义属性，所以换主题只能在此覆盖 class，不能改 :root 变量。
 * 视觉基调 = 品牌蓝 #1E9FFF（文末"美化第 1 批"负责把 layui 自带的青/绿强调色收敛过来）。
 */

.auth-body { margin: 0; }

/* hidden 属性必须压过组件自己的 display：.auth-cell 那批是 grid 子元素，
   浏览器 UA 样式里的 [hidden]{display:none}  specificity 是 0,1,0，一个 class 就盖掉了，
   不写这条的话 JS 用 .prop('hidden', true) 收起一块来是"设上了但还看得见"。 */
[hidden] { display: none !important; }

/* ---------- 登录 / 同意页的外壳 ---------- */
/* 用 "子元素 margin:auto" 而不是 align-items:center 居中：
   flex 容器按 center 对齐时，内容一旦比视口高，顶部会被裁掉且滚不回去
   （同意页 scope 多、手机上必然发生）。auto margin 在没有剩余空间时会自动塌成 0，不裁。 */
.auth-login-wrap {
    min-height: 100vh;
    display: flex;
    box-sizing: border-box;
    padding: 24px 12px;
    background: #f2f4f8;
}
.auth-login-wrap > .layui-card { margin: auto; }
.auth-login-card { width: 360px; box-shadow: 0 8px 28px rgba(0, 0, 0, .07); }

/* ---------- 社交登录落地页：绑已有账号 / 注册新账号，二选一 ---------- */
/* 复用 .auth-login-wrap 的"子元素 margin:auto"居中（理由见上面那条注释），
   但这一页比登录卡宽：顶部一张身份说明 + 下面两张并列的选择卡 */
.auth-join-col { width: 100%; max-width: 780px; margin: auto; display: flex; flex-direction: column; gap: 14px; }
.auth-join-card { width: 100%; box-shadow: 0 8px 28px rgba(0, 0, 0, .07); }
/* 默认竖着排：窄屏上两张卡并排会把表单压到没法点 */
.auth-join-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.auth-join-avatar { max-width: 64px; border-radius: 6px; display: block; }
.auth-join-lead { margin-bottom: 12px; line-height: 1.9; }
.auth-join-notes { margin-top: 14px; }
.auth-join-foot { text-align: center; }
.auth-login-card .layui-card-header { font-size: 15px; }
.auth-sub { float: right; font-size: 12px; color: var(--auth-ink-3); line-height: 42px; }
/* 验证码行的排版只有一处实现（下面"美化第 2 批"的 flex 那段）。
   这里原先还有一套 inline-block 60%/36% 的老写法，被后面整段覆盖；
   留着它只会让下一个人改错地方，删掉。 */
.auth-msg { min-height: 20px; color: #ff5722; font-size: 13px; text-align: center; }

/* ---------- 前台公共 ---------- */
.auth-links { text-align: center; font-size: 13px; }
.auth-links a { margin: 0 8px; color: #1E9FFF; }
.auth-tip { color: var(--auth-ink-3); font-size: 12px; line-height: 1.8; }
/* 说明行里的外链：品牌蓝 #1E9FFF 配白底实测只有 2.8:1，12px 字必须到 4.5:1，
   所以这里单独收深到 #0b6bb8（5.5:1）并加下划线，只有"说明里的链接"用这一档 */
.auth-tip a { color: #0b6bb8; text-decoration: underline; text-underline-offset: 2px; }
.auth-ok { color: #16b777; }
.auth-warn { color: #ff5722; }

.auth-nav {
    display: flex; align-items: center;
    height: 56px; padding: 0 16px;
    background: #fff; border-bottom: 1px solid #eee;
}
.auth-nav-brand { font-size: 16px; color: #333; }
.auth-nav-brand:hover { color: #1E9FFF; }
.auth-nav-list { display: flex; margin: 0 0 0 24px; padding: 0; list-style: none; }
.auth-nav-list li { margin-right: 4px; }
.auth-nav-list li a { display: block; padding: 0 14px; line-height: 56px; color: #555; font-size: 14px; }
.auth-nav-list li a:hover { color: #1E9FFF; }
.auth-nav-list li.is-active a { color: #1E9FFF; box-shadow: inset 0 -2px 0 #1E9FFF; }
.auth-nav-right { margin-left: auto; font-size: 13px; }
.auth-nav-right a { margin-left: 12px; color: #555; }
.auth-nav-user { color: #333; }
.auth-badge-warn {
    padding: 2px 8px; border-radius: 2px; background: #fff3e0; color: #ff5722; font-size: 12px;
}

.auth-main { max-width: 960px; margin: 0 auto; padding: 16px; }
.auth-main > .layui-card { margin-bottom: 16px; }

.auth-kv { width: 100%; border-collapse: collapse; font-size: 13px; }
.auth-kv th { width: 140px; text-align: left; font-weight: 400; color: var(--auth-ink-3); padding: 8px 0; vertical-align: top; }
.auth-kv td { padding: 8px 0; }
.auth-kv code { padding: 2px 6px; background: #f5f5f5; font-size: 12px; }
.auth-kv .auth-sub { display: block; float: none; line-height: 1.8; }

.auth-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.auth-table th { text-align: left; color: var(--auth-ink-3); font-weight: 400; padding: 6px 8px; border-bottom: 1px solid #eee; }
.auth-table td { padding: 8px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }

/**
 * 被包进横向滚动容器的表：列一律按内容排，宁可滑也不折行。
 *
 * 中文没有"不可断词"，一旦允许折行，列可以被压到一字一行 —— 实测 532px 下
 * "已停用的老应用"竖成一列、表头"审核态"断成"审核/态"。所以这里不给逐列 min-width，
 * 而是让 nowrap 自己充当列宽下限（后台的 .auth-adm-table th 早就是这么做的）。
 *
 * 只作用于 .auth-scroll 的直接子表：前台另有三张 .auth-table（绑定、会话、后台用户资料）
 * 没包滚动容器，改它们的行为不在这轮范围里。
 */
.auth-scroll > .auth-table { min-width: 100%; }
.auth-scroll > .auth-table th,
.auth-scroll > .auth-table td { white-space: nowrap; }
/* 唯一允许换行的列：应用名下面那行用途说明，它长就该占地方而不是把表撑宽 */
.auth-scroll > .auth-table td.auth-wrap { white-space: normal; min-width: 148px; max-width: 300px; }

/* 钉在右侧的操作列：整张表横向滚动时它不动，否则"这一行能做什么"会滚出视野。
   border-collapse 下 sticky 单元格的边框会丢，所以分隔线用 box-shadow 画 */
.auth-scroll > .auth-table th.auth-pin,
.auth-scroll > .auth-table td.auth-pin {
    position: sticky; right: 0; z-index: 1;
    background: #fff; box-shadow: -1px 0 0 var(--auth-line);
}
.auth-scroll > .auth-table th.auth-pin { background: #fafbfc; }
.auth-scroll > .auth-table tbody tr:hover td.auth-pin { background: #fbfcfe; }
.auth-ua { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--auth-ink-3); }

.auth-inline { display: inline-block; margin-right: 8px; }
.auth-inline .layui-input { display: inline-block; width: 120px; vertical-align: middle; }
.auth-hr { border: 0; border-top: 1px solid #f0f0f0; margin: 14px 0; }
.auth-card-warn { border: 1px solid #ffc09f; }
.auth-card-warn .layui-card-header { color: #ff5722; }
.auth-card-pending { border: 1px solid #9fd2ff; }
.auth-card-pending .layui-card-header { color: #1E9FFF; }
.auth-card-mock { border: 1px dashed #ffb74d; }
.auth-notice {
    padding: 8px 12px; margin-bottom: 12px; border: 1px solid #ffe1a8; border-radius: 2px;
    background: #fff8e6; color: #a56a00; font-size: 13px;
}
.auth-msg-ok { color: #16b777; }
.auth-msg-err { color: #ff5722; }
.auth-label { display: block; margin-bottom: 4px; color: var(--auth-ink-3); font-size: 12px; }
.auth-row-form { display: flex; gap: 6px; align-items: center; }

/* 第三方登录入口 */
.auth-or { position: relative; text-align: center; margin: 18px 0 10px; color: var(--auth-ink-3); font-size: 12px; }
.auth-or::before, .auth-or::after {
    content: ""; position: absolute; top: 50%; width: 32%; height: 1px; background: #eee;
}
.auth-or::before { left: 0; }
.auth-or::after { right: 0; }
.auth-social { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.auth-kv .auth-tip { display: block; }

/* ---------- 授权同意页 ---------- */
.auth-consent { width: 460px; }
.auth-scope-title { margin: 14px 0 6px; font-size: 13px; color: #333; }
.auth-scope-list { margin: 0; padding: 0; list-style: none; }
.auth-scope-list li { padding: 8px 0; border-bottom: 1px solid #f5f5f5; font-size: 13px; }
.auth-scope-list li b { display: inline-block; min-width: 92px; }
.auth-scope-list li span { color: var(--auth-ink-3); }
.auth-redirect { word-break: break-all; }
/* 回调地址一栏永远允许折行：长 URI 不能把表格撑破 */
.auth-host, .auth-hosts div { word-break: break-all; font-size: 12px; color: #555; }
.auth-hosts { min-width: 220px; }

/* ---------- 授权管理 ---------- */
.auth-grant { padding: 16px 0; border-bottom: 1px solid #f0f0f0; }
.auth-grant:first-child { padding-top: 2px; }
/* 标题行左右两端对齐：应用名在左、授权时间在右，
   原来时间用 .auth-sub 的 float:right 挂在同一个块里，换行时会贴到名字下面 */
.auth-grant-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.auth-grant-head > div:first-child { min-width: 0; }
.auth-grant-head b { font-size: 15px; }
.auth-grant-when { margin-left: auto; color: var(--auth-ink-3); font-size: 12px; white-space: nowrap; }

/* 同意页那张 scope 列表被嵌进 kv 表格的一格里时用紧凑版：
   去掉外边距、字号压到 13px，否则一格里套一列表会把行高撑得比上下两行都宽 */
.auth-scope-list-in { margin: 2px 0 0; }
.auth-scope-list-in li { padding: 6px 0; }
.auth-scope-list-in li b { min-width: 0; margin-right: 6px; }

/* 底部说明 + 撤销按钮同一行：说明占满剩余宽度，按钮固定在右端。
   原来按钮直接跟在表格后面，看起来像表格多出来的半行 */
.auth-grant-foot { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-top: 10px; }
.auth-grant-foot .auth-tip { flex: 1 1 320px; min-width: 0; margin: 0; line-height: 1.8; }
.auth-grant-foot form { margin: 0; }

/* ---------- 后台表格 ---------- */
.auth-adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.auth-adm-table th { text-align: left; font-weight: 400; color: var(--auth-ink-3); padding: 6px 8px; border-bottom: 1px solid #eee; }
.auth-adm-table td { padding: 10px 8px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
.auth-adm-ops { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.auth-adm-ops .layui-btn { margin: 0; }
/* 操作列一旦标了 auth-nowrap / auth-pin，就不该在列宽不够时把按钮甩到第二行：
   竖排会让"这一行是什么"和"这一行能做什么"错位，窄屏交给表格横向滚动兜底 */
.auth-table td.auth-nowrap .auth-adm-ops,
.auth-table td.auth-pin .auth-adm-ops { flex-wrap: nowrap; }
.auth-card-header-sub { font-size: 12px; color: var(--auth-ink-3); float: right; }
.auth-card-header-sub a { color: #1E9FFF; }
.auth-card-header-sub .is-on { color: #333; font-weight: 700; }

/* ---------- 后台 ---------- */
.auth-logo { float: left; padding-left: 16px; line-height: 60px; color: #fff; font-size: 16px; }
.auth-panel { padding: 18px; }

/* 窄屏时收回侧栏，保证前台页在手机可用（后台不专门适配） */
/* ⚠️ 响应式规则必须放在文件**最后**：媒体查询不提高优先级，
   写在中间会被后面同优先级的桌面规则按顺序覆盖掉（原来这块就白写了）。
   整节见文件末尾的"响应式"。 */

/* ---------- P5 新增：首页、文档、通知中心、后台表单行内布局 ---------- */
.auth-home { max-width: 1120px; margin: 0 auto; padding: 24px 16px 40px; }
.auth-home-cta { margin-bottom: 8px; }
.auth-home-cards { margin-top: 22px; }
.auth-home-cards .layui-card { height: 100%; }

.auth-doc-item { padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.auth-doc-item:last-child { border-bottom: 0; }
.auth-doc-item a { color: #1E9FFF; font-size: 14px; }
.auth-doc-body { font-size: 14px; line-height: 1.9; color: #444; }
.auth-doc-body h1, .auth-doc-body h2, .auth-doc-body h3 { margin: 18px 0 8px; font-weight: 500; }
.auth-doc-body pre { padding: 10px 12px; background: #f7f7f7; border: 1px solid #eee; overflow-x: auto; }
.auth-doc-body code { padding: 1px 5px; background: #f5f5f5; }
.auth-doc-body table { border-collapse: collapse; width: 100%; }
.auth-doc-body th, .auth-doc-body td { border: 1px solid #eee; padding: 6px 8px; font-size: 13px; }
.auth-doc-body ul { padding-left: 22px; }

.auth-msgitem { padding: 10px 12px; margin-bottom: 10px; border: 1px solid #f0f0f0; border-radius: 2px; }
.auth-msgitem-unread { border-color: #9fd2ff; background: #f7fcff; }
.auth-msgitem-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 6px; }
/* 标题吃掉剩余空间，时间与"标为已读"按钮不许被压扁 ——
   窄屏上被压扁时，"账号安全 · 2026-10-09 22:33" 会竖排成一行两三个字 */
.auth-msgitem-head > b { flex: 1 1 auto; min-width: 0; font-size: 14px; }
.auth-msgitem-head > .auth-tip, .auth-msgitem-head > .layui-btn { flex: 0 0 auto; white-space: nowrap; }
.auth-msgitem-body { font-size: 13px; color: #555; line-height: 1.8; }

.auth-check { display: block; font-size: 13px; color: #444; }
.auth-nomargin { margin-bottom: 0; }
/* auth-sub 里的标签式筛选：当前项加粗，未选中保持链接色 */
.auth-sub a.is-on { color: #333; font-weight: 700; }

/* ============================================================================
 * 美化第 1 批：设计令牌 + 全局骨架
 *
 * 先纠正本文件开头那条实测结论：layui.css 的主色不是蓝。
 * `.layui-btn` / 侧栏选中 / 分页当前页是 #16baaa（青），输入框 focus 与勾选态是
 * #16b777（绿），#1e9fff 只出现在 `.layui-btn-normal` 一处。加上本站原有链接色
 * #1E9FFF，一个页面里同时出现三套强调色——这才是"显乱"的根因。
 * 所以这一层做两件事：把强调色收敛成单一品牌蓝，再统一圆角/描边/阴影的质感。
 * 版式（栅格、密度、列宽）没动，视图模板也没动。
 * ========================================================================== */
:root {
    --auth-brand:        #1E9FFF;
    --auth-brand-strong: #0c8de8;
    --auth-brand-soft:   #ecf5ff;
    --auth-ink:          #1f2329;
    --auth-ink-2:        #4e5968;
    --auth-ink-3:        #64748b;
    --auth-line:         #e6e9ef;
    --auth-line-soft:    #f1f3f7;
    --auth-bg:           #f5f7fa;
    --auth-surface:      #fff;
    --auth-ok:           #16b777;
    --auth-ok-soft:      #e9f9f3;
    --auth-danger:       #ff5722;
    --auth-danger-soft:  #fff2ec;
    --auth-warn:         #ffb800;
    --auth-warn-soft:    #fff8e6;
    --auth-radius:       6px;
    --auth-radius-sm:    3px;
    --auth-shadow-sm:    0 1px 2px rgba(31, 35, 41, .05);
    --auth-shadow:       0 2px 8px rgba(31, 35, 41, .07);
    --auth-shadow-lg:    0 12px 32px rgba(31, 35, 41, .12);
}

/* ---------- 基调 ---------- */
body.auth-body {
    color: var(--auth-ink);
    background: var(--auth-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--auth-brand-soft); color: var(--auth-brand-strong); }
.layui-btn, .layui-input, .layui-select, .layui-textarea, .layui-card,
.auth-nav-list li a, .auth-doc-item a { transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; }

/* ---------- 卡片 ---------- */
.layui-card {
    border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius);
    box-shadow: var(--auth-shadow-sm);
    overflow: hidden;
}
.layui-card:hover { box-shadow: var(--auth-shadow); }
.layui-card-header {
    border-bottom: 1px solid var(--auth-line-soft);
    color: var(--auth-ink);
    font-weight: 600;
}
/* 标题左侧的品牌竖条：整站卡片一眼同源，比再加一层背景色轻 */
.layui-card-header::before {
    content: ""; position: absolute; left: 0; top: 13px; bottom: 13px;
    width: 3px; border-radius: 0 2px 2px 0; background: var(--auth-brand);
}
.auth-card-warn .layui-card-header::before { background: var(--auth-danger); }
.auth-card-pending .layui-card-header::before { background: var(--auth-warn); }
.auth-card-mock .layui-card-header::before { background: var(--auth-ink-3); }
.layui-card-body { padding: 16px 18px; color: var(--auth-ink); }

/* ---------- 按钮：默认=品牌蓝，normal=绿，danger=红，primary=白底描边 ---------- */
.layui-btn { border-radius: var(--auth-radius-sm); background-color: var(--auth-brand); letter-spacing: .2px; }
.layui-btn:hover { background-color: var(--auth-brand-strong); opacity: 1; }
.layui-btn-normal { background-color: var(--auth-ok); }
.layui-btn-normal:hover { background-color: #12a06a; }
.layui-btn-danger { background-color: var(--auth-danger); }
.layui-btn-danger:hover { background-color: #ee4512; }
.layui-btn-primary { background-color: #fff; border-color: var(--auth-line); color: var(--auth-ink-2); }
.layui-btn-primary:hover { border-color: var(--auth-brand); color: var(--auth-brand-strong); }
.layui-btn-xs { padding: 0 9px; }
.layui-btn-sm { padding: 0 14px; }

/* ---------- 表单控件 ---------- */
.layui-input, .layui-select, .layui-textarea { border-color: var(--auth-line); border-radius: var(--auth-radius-sm); color: var(--auth-ink); }
.layui-input:hover, .layui-textarea:hover, .layui-select:hover { border-color: #c3ccd8; }
/* layui 自己给 focus 加了 !important，这里只能同样加，否则覆盖不掉它的绿框 */
.layui-input:focus, .layui-textarea:focus, .layui-select:focus {
    border-color: var(--auth-brand) !important;
    box-shadow: 0 0 0 3px rgba(30, 159, 255, .12);
}
.layui-input::placeholder, .layui-textarea::placeholder { color: #b7bfca; }
.layui-form-label { color: var(--auth-ink-2); }
.layui-form-pane .layui-form-label { background-color: #fafbfc; border-color: var(--auth-line); color: var(--auth-ink-2); }
.layui-form-pane .layui-input-inline .layui-input { border-radius: 0; }
.layui-form-select dl { border: 1px solid var(--auth-line); border-radius: var(--auth-radius); box-shadow: var(--auth-shadow); padding: 4px 0; }
.layui-form-select dl dd { line-height: 32px; padding: 4px 12px; }
.layui-form-select dl dd.layui-this { background-color: var(--auth-brand-soft); color: var(--auth-brand-strong); font-weight: 600; }
.layui-form-select dl dd:hover { background-color: var(--auth-line-soft); }
.layui-form-select dl dd.layui-this:hover { background-color: var(--auth-brand-soft); }
/* 勾选态、单选、开关：layui 全是 #16b777，逐个换成品牌蓝 */
.layui-form-checked, .layui-form-checked:hover { border-color: var(--auth-brand); }
.layui-form-checked > div, .layui-form-checked:hover > div { background-color: var(--auth-brand); }
.layui-form-checked > i, .layui-form-checked:hover > i { color: var(--auth-brand); }
.layui-form-checkbox[lay-skin=primary]:hover > i { border-color: var(--auth-brand); }
.layui-form-checked[lay-skin=primary] > i { border-color: var(--auth-brand) !important; background-color: var(--auth-brand); }
.layui-form-onswitch { border-color: var(--auth-brand); background-color: var(--auth-brand); }
.layui-form-radio:hover > *, .layui-form-radioed, .layui-form-radioed > i { color: var(--auth-brand); }
.layui-form-item { margin-bottom: 16px; }

/* ---------- 状态标签：把原来的纯文本色升成胶囊，表格读起来才有层次 ---------- */
.auth-ok, .auth-warn, .auth-msg-ok, .auth-msg-err {
    display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; line-height: 18px;
}
.auth-ok, .auth-msg-ok { color: var(--auth-ok); background: var(--auth-ok-soft); }
.auth-warn, .auth-msg-err { color: var(--auth-danger); background: var(--auth-danger-soft); }
.auth-badge-warn { background: var(--auth-warn-soft); color: #a56a00; border-radius: 10px; }
/* 明文回跳标记：用琥珀而不是红 —— 本站允许登记 http，这是"看清楚了再放行"的提示，不是错误 */
.auth-plain {
    display: inline-block; padding: 1px 8px; margin-left: 6px; border-radius: 10px;
    font-size: 12px; line-height: 18px; background: var(--auth-warn-soft); color: #a56a00;
}
.auth-tip { color: var(--auth-ink-3); }
.auth-sub { color: var(--auth-ink-3); font-weight: 400; }

/* ---------- 分页 ---------- */
.layui-laypage a:hover { color: var(--auth-brand-strong); }
.layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: var(--auth-brand); }
.layui-laypage a, .layui-laypage span, .layui-laypage input, .layui-laypage select, .layui-laypage button { border-color: var(--auth-line); }
.layui-laypage input:focus, .layui-laypage select:focus { border-color: var(--auth-brand) !important; }

/* ---------- layui.table ---------- */
.layui-table-view, .layui-table td, .layui-table th, .layui-table-page, .layui-table-tool, .layui-table-header { border-color: var(--auth-line-soft); }
.layui-table th { background-color: #fafbfc; }
.layui-table thead tr th { color: var(--auth-ink-2); font-weight: 600; }
.layui-table-hover { background-color: var(--auth-brand-soft) !important; }
.layui-table-click { background-color: var(--auth-brand-soft) !important; }
.layui-table-page { background: #fff; border-width: 1px 0 0; border-style: solid; padding: 10px 12px 12px; }
.layui-table-page .layui-laypage { margin: 0; }
.layui-table-tool { background: #fafbfc; }
/* 固定列和主表是两张独立表格，实测 layui.js 里没有任何"同步行高"的代码，
   所以多行 templet 只能靠整表统一行高来对齐，逐行 auto 会让固定列错位。
   56px = 正文两行（20px）+ 上下 8px，正好也容得下折行的操作按钮组。 */
/* 单元格用 flex 换行 + 垂直居中：主行与次级行各占一行、整组在 56px 里居中；
   操作列的按钮是行内元素，仍按一行排布，放不下才换行。 */
.layui-table-view .layui-table-cell {
    display: flex; flex-wrap: wrap; align-items: center;
    height: 56px; padding: 6px 14px; line-height: 20px; white-space: normal;
}
.layui-table-view .layui-table-cell > div { flex: 0 0 100%; min-width: 0; }
.layui-table-view .layui-table-header .layui-table-cell { display: block; height: 38px; padding: 8px 14px; line-height: 22px; }
.layui-table-view .layui-table-cell .auth-tip { font-size: 12px; line-height: 16px; }
.layui-table-cell .layui-btn + .layui-btn { margin-left: 0; }

/* ---------- 自绘表格（未接 layui.table 的页面） ---------- */
.auth-adm-table th, .auth-table th { color: var(--auth-ink-2); border-bottom: 1px solid var(--auth-line); background: #fafbfc; }
.auth-adm-table td, .auth-table td { border-bottom: 1px solid var(--auth-line-soft); }
.auth-adm-table tbody tr:hover td, .auth-table tbody tr:hover td { background: #fbfcfe; }
.auth-kv th { color: var(--auth-ink-3); }
.auth-kv td { color: var(--auth-ink); }
.auth-kv code, .auth-doc-body code { background: var(--auth-line-soft); border-radius: var(--auth-radius-sm); color: var(--auth-ink-2); }

/* ---------- 后台外壳：header/side 统一成同一套深灰蓝，选中项给品牌蓝 ---------- */
.layui-layout-admin .layui-header { background-color: #232b36; box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset; }
/* side 上挂着 layui-bg-black，那条规则带 !important，这里只能同级压过它 */
.layui-layout-admin .layui-side.layui-bg-black { background-color: #1c232c !important; }
.layui-layout-admin .layui-body { background: var(--auth-bg); }
.auth-logo { color: #fff; font-weight: 600; letter-spacing: .4px; }
.layui-layout-admin .layui-nav-tree .layui-nav-item > a { color: #b7c1cd; }
.layui-layout-admin .layui-nav-tree .layui-nav-item > a:hover { color: #fff; background-color: #27303b; }
.layui-layout-admin .layui-nav-tree .layui-this,
.layui-layout-admin .layui-nav-tree .layui-this > a,
.layui-layout-admin .layui-nav-tree .layui-this > a:hover { background-color: var(--auth-brand); color: #fff; }
.layui-nav-tree .layui-nav-bar { background-color: var(--auth-brand); }
.layui-header .layui-nav .layui-nav-more, .layui-side .layui-nav .layui-nav-more { border-top-color: #b7c1cd; }
.auth-panel { padding: 20px 22px 32px; }
.layui-nav-child { border: 1px solid var(--auth-line); border-radius: var(--auth-radius); box-shadow: var(--auth-shadow); overflow: hidden; }

/* ---------- 后台侧栏：分组小标题 + 图标 + 四字菜单 ---------- */
.auth-side-nav { padding: 4px 0 20px; }
.auth-nav-group {
    padding: 14px 20px 4px; font-size: 12px; line-height: 18px;
    color: #6b7785; letter-spacing: 1.5px;
}
.auth-side-nav .layui-nav-item { line-height: 36px; }
.auth-side-nav .layui-nav-item > a { position: relative; height: 36px; line-height: 36px; padding-left: 20px; }
.auth-side-nav .layui-nav-item .layui-icon { margin-right: 10px; font-size: 15px; color: inherit; }
/* 选中项：整条铺品牌蓝，再叠一道白色左沿——只靠底色在深色侧栏里不够醒目 */
.auth-side-nav .layui-this > a { box-shadow: inset 3px 0 0 rgba(255, 255, 255, .9); }
/* layui 默认把滚动容器做成 220px 宽、藏在外侧，等于"能滚但看不见"。
   16 项 + 6 个分组标题在笔记本上会顶出视口，所以收回 200px 并给一条细滚动条。 */
.layui-layout-admin .layui-side-scroll {
    width: 200px; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #3a4552 transparent;
}
.layui-layout-admin .layui-nav-tree { width: 100%; }
.layui-side-scroll::-webkit-scrollbar { width: 5px; }
.layui-side-scroll::-webkit-scrollbar-thumb { background: #3a4552; border-radius: 3px; }
.layui-side-scroll::-webkit-scrollbar-track { background: transparent; }

/* ============================================================================
 * 美化第 4 批：前台（首页 / 用户中心 / 注册表单行）
 * ========================================================================== */

/* 注册页两行"输入框 + 右侧控件"（图形码 + 验证码）：
   原来输入框写死 60%、图片写死 36%，而发送按钮是自适应宽度，
   两行的右边缘对不齐。改成 flex，右侧控件统一 128px。
   128×38 的宽高比≈3.4，与 think-captcha 默认出图 224×70（≈3.2）接近，不至于拉伸变形。 */
.auth-captcha-row { display: flex; gap: 8px; align-items: center; }
.auth-captcha-row .layui-input { display: block; flex: 1 1 auto; width: auto; min-width: 0; }
.auth-captcha-row img, .auth-captcha-row .layui-btn { flex: 0 0 128px; width: 128px; height: 38px; margin: 0; box-sizing: border-box; }
.auth-captcha-row img {
    border: 1px solid var(--auth-line); border-radius: var(--auth-radius-sm);
    cursor: pointer; background: #fff;
}
.auth-captcha-row .layui-btn { padding: 0 8px; font-size: 13px; line-height: 36px; white-space: nowrap; overflow: hidden; }

/* 首页能力卡：图标标题 + 要点列表，替掉原来两段同号灰字 */
.auth-feat-head {
    display: flex; align-items: center; gap: 8px; padding: 12px 16px;
    border-bottom: 1px solid var(--auth-line-soft); background: #fcfdfe;
    font-size: 14px; font-weight: 600; color: var(--auth-ink);
}
.auth-feat-head .layui-icon { color: var(--auth-brand); font-size: 17px; }
ul.auth-feat-list { margin: 0; padding: 12px 16px 14px 30px; list-style: none; }
ul.auth-feat-list li {
    position: relative; padding-left: 2px; margin-bottom: 7px;
    font-size: 13px; line-height: 1.85; color: var(--auth-ink-2);
}
ul.auth-feat-list li:last-child { margin-bottom: 0; }
ul.auth-feat-list li::before {
    content: ""; position: absolute; left: -11px; top: 9px;
    width: 4px; height: 4px; border-radius: 50%; background: #c9d3de;
}
ul.auth-feat-list li b { color: var(--auth-ink); }
ul.auth-feat-list code { padding: 1px 5px; border-radius: var(--auth-radius-sm); background: var(--auth-line-soft); color: var(--auth-ink-2); font-size: 12px; }

/* 首页与用户中心的指标卡：用户中心里它们同时是链接，hover 要能看出来 */
a.auth-metric { display: flex; color: inherit; }
a.auth-metric:hover { border-color: var(--auth-brand); box-shadow: var(--auth-shadow); }
a.auth-metric:hover b { color: var(--auth-brand-strong); }

/* 用户中心的"还能做什么"入口 */
.auth-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.auth-quick a {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border: 1px solid var(--auth-line); border-radius: var(--auth-radius);
    font-size: 13px; color: var(--auth-ink-2); background: #fcfdfe;
}
.auth-quick a:hover { border-color: var(--auth-brand); color: var(--auth-brand-strong); }
.auth-quick .layui-icon { color: var(--auth-brand); font-size: 16px; }

/* 长标签表单（前台"登记新应用"）：标签在上、说明做小字副标，短字段两列自适应。
   原来九个字段各占一行、说明塞在括号里，整张表读起来像一列注释而不是表。 */
.auth-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 20px; }
.auth-form .auth-cell { min-width: 0; }
.auth-form .auth-cell-full { grid-column: 1 / -1; }
.auth-form .auth-cell > label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--auth-ink); }
.auth-form .auth-cell > .layui-input, .auth-form .auth-cell > .layui-textarea { width: 100%; }
.auth-cell-hint { margin: 0 0 6px; min-height: 18px; font-size: 12px; line-height: 18px; color: var(--auth-ink-3); }
.auth-cell-opts { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.auth-cell-opts .layui-form-checkbox[lay-skin=primary], .auth-cell-opts .layui-form-radio { margin: 0; }
.auth-form-sec {
    grid-column: 1 / -1; margin-top: 8px; padding: 12px 0 0;
    border-top: 1px solid var(--auth-line-soft);
    font-size: 13px; font-weight: 600; letter-spacing: .5px; color: var(--auth-ink-2);
}
.auth-form-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.auth-form-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--auth-line-soft); }
.auth-form-foot .layui-btn { margin: 0; }
.auth-form-foot .auth-msg { display: inline-block; min-height: 20px; text-align: left; }

.auth-home-cta .layui-btn { height: 40px; padding: 0 22px; font-size: 14px; line-height: 39px; }
.auth-home-cta .layui-btn-primary { background: #fff; }

/* 能力卡：图标进圆角块、hover 抬一下，卡片之间不要贴成一片 */
.auth-feat { height: 100%; transition: box-shadow .18s, border-color .18s, transform .18s; }
.auth-feat:hover { box-shadow: var(--auth-shadow); border-color: #cfe3f7; transform: translateY(-1px); }
.auth-feat-head .layui-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; background: var(--auth-brand-soft); font-size: 15px;
}
/* 底部状态条已按"数据量太小反而像没做完"的结论撤掉，首页就到能力卡收尾 */
.auth-home { padding-bottom: 48px; }
/* 首页两块行（能力卡 / 状态条）之间要有间隔，第二块没挂类名 */

/* 顶栏面包屑：紧跟 logo，用一条竖线隔开，省得再回侧栏找自己在哪 */
.auth-crumb {
    float: left; margin-left: 16px; padding-left: 16px; line-height: 60px;
    font-size: 13px; color: #94a0af; border-left: 1px solid rgba(255, 255, 255, .13);
}

/* ---------- 弹层 ---------- */
.layui-layer { border-radius: var(--auth-radius) !important; box-shadow: var(--auth-shadow-lg); }
.layui-layer-title { background: #fafbfc; color: var(--auth-ink); border-bottom: 1px solid var(--auth-line-soft); font-weight: 600; }

/* ---------- 前台导航与容器 ---------- */
.auth-nav { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--auth-line); box-shadow: var(--auth-shadow-sm); }
.auth-nav-brand { font-weight: 600; letter-spacing: .3px; }
.auth-nav-list li.is-active a { color: var(--auth-brand); box-shadow: inset 0 -2px 0 var(--auth-brand); }
.auth-links a, .auth-doc-item a, .auth-card-header-sub a { color: var(--auth-brand); }
.auth-links a:hover, .auth-doc-item a:hover { color: var(--auth-brand-strong); }
.auth-main > .layui-card { margin-bottom: 18px; }

/* ---------- 提示块 / 统计卡 / 首页 / 文档 / 通知 ---------- */
.auth-notice { background: var(--auth-warn-soft); border-color: #ffe1a8; border-radius: var(--auth-radius); }
.auth-doc-body { color: var(--auth-ink-2); }
.auth-doc-body h1, .auth-doc-body h2 { color: var(--auth-ink); }
.auth-doc-body h2 { padding-bottom: 6px; border-bottom: 1px solid var(--auth-line-soft); }
.auth-doc-body pre { background: #232b36; border-color: #232b36; border-radius: var(--auth-radius); color: #dfe6ee; }
.auth-doc-body th, .auth-doc-body td { border-color: var(--auth-line); }
.auth-doc-body th { background: #fafbfc; }
.auth-doc-body blockquote { margin: 12px 0; padding: 8px 14px; border-left: 3px solid var(--auth-brand); background: var(--auth-brand-soft); color: var(--auth-ink-2); }
.auth-msgitem-unread { border-color: #b9ddff; background: #f8fcff; }
.auth-check { color: var(--auth-ink-2); }
.auth-consent-actions { text-align: center; margin-top: 22px; margin-bottom: 0; }
.auth-label { color: var(--auth-ink-3); }
.auth-ua { color: var(--auth-ink-3); }

/* ---------- 访客页（登录 / 注册 / 找回密码） ---------- */
.auth-login-wrap {
    background: linear-gradient(180deg, #eef3f9 0%, var(--auth-bg) 60%);
}
.auth-login-card { width: 380px; box-shadow: var(--auth-shadow-lg); border-color: var(--auth-line); }
.auth-login-card .layui-card-header { font-size: 16px; letter-spacing: .4px; }
.auth-captcha-row img { border-color: var(--auth-line); border-radius: var(--auth-radius-sm); }
.auth-msg { color: var(--auth-danger); }
.auth-or::before, .auth-or::after { background: var(--auth-line); }
.auth-social .layui-btn { margin: 0; }

/* ============================================================================
 * 美化第 2 批：后台页面级组件（配合各 admin 视图的小改）
 * ========================================================================== */

/* 自绘宽表在窄容器里应该横向滚动，而不是被卡片的 overflow:hidden 裁掉一列 */
.auth-scroll { overflow-x: auto; }
.auth-adm-table { min-width: 100%; }
.auth-adm-table th { white-space: nowrap; }
.auth-adm-table td.auth-nowrap, .auth-adm-table th.auth-nowrap,
.auth-table td.auth-nowrap, .auth-table th.auth-nowrap { white-space: nowrap; }
/* 滚动条做成细线：默认 17px 的滚动条会把表格底部吃掉一条白带 */
.auth-scroll::-webkit-scrollbar, .layui-table-body::-webkit-scrollbar, .layui-table-main::-webkit-scrollbar { width: 8px; height: 8px; }
.auth-scroll::-webkit-scrollbar-thumb, .layui-table-body::-webkit-scrollbar-thumb, .layui-table-main::-webkit-scrollbar-thumb { background: #d3dae3; border-radius: 4px; }
.auth-scroll::-webkit-scrollbar-track, .layui-table-body::-webkit-scrollbar-track, .layui-table-main::-webkit-scrollbar-track { background: var(--auth-line-soft); }

/* 卡片头部的标签式筛选（日志三签、文档分组都用它） */
.auth-tabs { float: right; display: inline-flex; gap: 6px; align-items: center; }
.auth-tabs > span { font-size: 12px; color: var(--auth-ink-3); }
.auth-tabs a {
    padding: 1px 10px; border: 1px solid var(--auth-line); border-radius: 12px;
    font-size: 12px; line-height: 20px; color: var(--auth-ink-2); font-weight: 400;
}
.auth-tabs a:hover { border-color: var(--auth-brand); color: var(--auth-brand-strong); }
.auth-tabs a.is-on { background: var(--auth-brand); border-color: var(--auth-brand); color: #fff; }
.auth-tabs a.is-on:hover { color: #fff; }

/* 一张卡里放多个同构分组（provider / 密钥 / 权限点）时的分组头 */
.auth-group { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--auth-line); border-radius: var(--auth-radius); }
.auth-group + .auth-group { margin-top: 14px; }
.auth-group-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.auth-group-head b { font-size: 14px; color: var(--auth-ink); }
.auth-group-head code { padding: 1px 6px; border-radius: var(--auth-radius-sm); background: var(--auth-line-soft); color: var(--auth-ink-3); font-size: 12px; }
.auth-group-head .auth-tip { font-size: 12px; }
.auth-group .layui-form-item { margin-bottom: 8px; }
.auth-group .layui-form-label { width: 96px; padding: 9px 10px; }
.auth-group .layui-input-inline { margin-right: 8px; }
/* 锚点跳转时别被 60px 的固定顶栏压住 */
.auth-group[id] { scroll-margin-top: 76px; }

/* 配置页顶部的分类条已改成"吸顶 + 筛选"，样式见文件末尾的美化第 7 批 */

/* 说明块：原来一处用 auth-msg 当段落（红字），语义上是"提示"而不是"错误" */
.auth-callout {
    padding: 10px 14px; margin-bottom: 14px; border-radius: var(--auth-radius);
    border: 1px solid var(--auth-line); background: #fafbfc; color: var(--auth-ink-2);
    font-size: 13px; line-height: 1.9;
}
.auth-callout-warn { border-color: #ffe1a8; background: var(--auth-warn-soft); color: #8a5b00; }
.auth-callout-danger { border-color: #ffc9b4; background: var(--auth-danger-soft); color: #b83c11; }
.auth-callout b { color: inherit; }
.auth-callout code { padding: 1px 5px; border-radius: var(--auth-radius-sm); background: rgba(255, 255, 255, .7); }

/**
 * 一次性凭据块（client_secret）。
 *
 * 它和 .auth-callout 的区别是语义上的：这不是"说明"，是**只出现一次的secret**。
 * 所以底色用品牌强调色、明文用等宽并可整段选中，复制按钮贴着值而不是贴着头部。
 */
.auth-once {
    padding: 14px 16px; margin-bottom: 14px; border-radius: var(--auth-radius);
    border: 1px solid #cfe0ff; background: var(--auth-brand-soft); color: var(--auth-ink);
    font-size: 13px; line-height: 1.7;
}
.auth-once:empty { display: none; }
.auth-once-head { margin-bottom: 10px; }
.auth-once-head b { display: block; color: var(--auth-brand-strong); font-size: 14px; }
.auth-once-head .auth-tip { display: block; margin-top: 2px; }
.auth-once-row { display: flex; flex-wrap: wrap; gap: 10px 20px; }
/* 一格 = label 一行 + (值 复制) 一行。label 和值不再并排，
   否则手机上长值换行后「复制」会掉成第三行 */
.auth-once-cell { flex: 1 1 300px; min-width: 0; display: grid; gap: 4px; }
.auth-once-cell label { color: var(--auth-ink-3); font-size: 12px; }
.auth-once-val { display: flex; align-items: stretch; gap: 8px; min-width: 0; }
.auth-once-val code {
    flex: 1 1 auto; min-width: 0; padding: 6px 9px;
    border: 1px solid var(--auth-line); border-radius: var(--auth-radius-sm);
    background: #fff; color: var(--auth-ink); font-size: 12px; line-height: 1.6;
    overflow-wrap: anywhere; user-select: all;
}
/* 复制按钮不跟着值一起被压窄，也不因为 align-items 变成拉伸出来的一大块 */
.auth-once-val .layui-btn { flex: 0 0 auto; align-self: flex-start; }
.auth-once-close { margin-top: 12px; }

/* 只读键值行（安全设置里那批"改了要马上生效"的参数） */
.auth-ro { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--auth-line-soft); }
.auth-ro:last-child { border-bottom: 0; }
.auth-ro-label { min-width: 220px; color: var(--auth-ink); font-size: 13px; }
.auth-ro-key { color: var(--auth-ink-3); font-size: 12px; }
.auth-ro .layui-input-inline { width: 120px; margin: 0; }

/* 表单里成组的"标签+控件"：用网格替掉模板里一堆内联 width，列宽随容器自适应 */
.auth-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 18px; }
.auth-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.auth-field > label { flex: 0 0 88px; color: var(--auth-ink-2); font-size: 13px; text-align: right; }
.auth-field > .layui-input, .auth-field > .layui-input-inline,
.auth-field > .layui-form-select, .auth-field > .layui-form-switch { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.auth-field > .layui-textarea { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.auth-field-top { align-items: flex-start; }
.auth-field-top > label { padding-top: 8px; }
.auth-field-wide { grid-column: 1 / -1; }
.auth-field-text { font-size: 13px; color: var(--auth-ink-2); line-height: 30px; }
.auth-field-text code { padding: 1px 6px; border-radius: var(--auth-radius-sm); background: var(--auth-line-soft); color: var(--auth-ink-3); }
.auth-fields-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.auth-fields-foot .layui-btn { margin: 0; }
.auth-fields-foot .auth-msg { display: inline-block; min-height: 20px; text-align: left; }
.auth-tabs .layui-btn { margin: 0; }

/* 卡片正文顶部的一行工具条：左边筛选、右边动作。
   原来这些塞在 42px 的卡片头里 float:right，三个页签加一个按钮就挤到换行、按钮被切一半。 */
.auth-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
    margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--auth-line-soft);
}
.auth-toolbar .auth-tabs { float: none; }
.auth-toolbar .layui-btn { margin: 0; }

/* 一行式表单（新增封禁、检索条）：控件按剩余空间折行，不再各写死一个 width */
.auth-line-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.auth-line-form .layui-input { flex: 1 1 200px; width: auto; min-width: 0; }
.auth-line-form .layui-btn { margin: 0; }


/* 配置页的"键 / 输入框 / 说明"三列行：说明跟在控件右边，一屏能看完一项。
   用容器查询而不是媒体查询——决定这行放不放得下三列的是卡片宽度，不是窗口宽度。 */
.auth-group { container-type: inline-size; }
.auth-cfg { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--auth-line-soft); }
.auth-cfg:last-child { border-bottom: 0; }
.auth-cfg-key code { padding: 2px 6px; border-radius: var(--auth-radius-sm); background: var(--auth-line-soft); color: var(--auth-ink-2); font-size: 12px; }
.auth-cfg-tip { font-size: 12px; line-height: 1.8; color: var(--auth-ink-3); }
.auth-cfg-tip .auth-warn { display: inline-block; margin-top: 2px; }
@container (min-width: 640px) {
    .auth-cfg { grid-template-columns: 210px minmax(220px, 340px) minmax(0, 1fr); gap: 0 14px; align-items: start; }
    .auth-cfg-key { padding-top: 9px; text-align: right; }
    .auth-cfg-tip { padding-top: 9px; }
}

/* ============================================================================
 * 美化第 3 批：后台细节（检索条 / 卡片头 / 指标卡 / 顶栏 / 空态）
 * ========================================================================== */

/* 列表页检索条：layui-form-pane 那套"灰底标签格子"是最重的后台旧感来源，
   换成一行轻标签 + 紧凑控件，控件高度也从 38 收到 34，和 sm/xs 按钮同一档 */
.auth-filter { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 16px; }
.auth-filter > label { color: var(--auth-ink-3); font-size: 13px; }
.auth-filter .layui-input, .auth-filter .layui-form-select { height: 34px; }
.auth-filter .layui-input { line-height: 34px; }
.auth-filter .layui-btn, .auth-filter .layui-form-select .layui-input { height: 34px; line-height: 34px; }
.auth-filter .layui-form-select { line-height: 33px; }
.auth-filter .layui-form-select { width: 100%; }
.auth-filter .auth-filter-sel { flex: 0 0 auto; }
.auth-filter .layui-btn { margin: 0; padding: 0 16px; }

/* 卡片头：给一点底色，标题和右侧元信息拉开层级 */
.layui-card-header { background: #fcfdfe; font-size: 15px; }
.layui-card-header .auth-sub { font-size: 12px; }
.layui-card-header .auth-tabs { line-height: 22px; }

/* 指标卡（首页与用户中心共用）：数字是主角，图标只负责分组识别 */
.auth-metric { display: flex; align-items: center; gap: 14px; padding: 18px; }
.auth-metric .layui-icon {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--auth-brand-soft); color: var(--auth-brand); font-size: 20px;
}
.auth-metric b { display: block; font-size: 24px; line-height: 1.2; font-weight: 600; color: var(--auth-ink); }
.auth-metric span { display: block; margin-top: 2px; font-size: 12px; color: var(--auth-ink-3); }

/* 页面小标题：首页那种"一进来先看什么"的引导语 */
.auth-page-head { margin: 2px 0 16px; }
.auth-page-head h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; color: var(--auth-ink); }
.auth-page-head p { margin: 0; font-size: 13px; color: var(--auth-ink-3); line-height: 1.8; }

/* 自检清单：每项一行，绿色对勾 + 文案，比堆一段说明好扫 */
.auth-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; margin-bottom: 10px; }
.auth-check-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--auth-ink-2); }
.auth-check-item .layui-icon { color: var(--auth-ok); font-size: 15px; }

/* 顶栏：和侧栏同色但加一道下沿，避免两块深色糊成一片 */
.layui-layout-admin .layui-header { border-bottom: 1px solid #141a21; }
.layui-layout-admin .layui-header .layui-nav .layui-this:after,
.layui-layout-admin .layui-header .layui-nav-bar { display: none; }
.auth-logo { display: flex; align-items: center; gap: 8px; float: left; height: 60px; padding-left: 16px; }

/* 表格空态与次级文字：原来一堆灰字同色同号，读起来没有主次 */
.auth-adm-table td.auth-empty, .auth-table td.auth-empty { padding: 26px 8px; text-align: center; color: var(--auth-ink-3); }
.auth-tip { color: var(--auth-ink-3); }
.auth-adm-table .auth-tip, .layui-table-cell .auth-tip { color: var(--auth-ink-3); }
.layui-table-view .layui-table-cell b { color: var(--auth-ink); }
.auth-adm-table td b { color: var(--auth-ink); }

/* 行内代码在表格里统一成浅底小片；但在说明段落里去掉底色，
   一段话里七八个灰底片会把文字切成马赛克，那里只需要等宽字体本身 */
.auth-adm-table code, .auth-kv code, .auth-callout code {
    padding: 1px 5px; border-radius: var(--auth-radius-sm);
    background: var(--auth-line-soft); color: var(--auth-ink-2); font-size: 12px;
}
.auth-tip code { color: #5f6b7a; font-size: 12px; }

/* 页面级说明（每页一个 <p class="auth-tip">）和表格里的次级行（div/span.auth-tip）
   是两种东西，以前同号同色同底色，所以每页看起来都像堆着一坨灰字。
   现在说明收进一个带"说明"标签的浅底块，并限制行长，宽屏上不至于横扫一屏。 */
p.auth-tip {
    position: relative; margin: 16px 0 0; padding: 11px 14px;
    border: 1px solid var(--auth-line); border-radius: var(--auth-radius);
    background: #fafbfc; color: var(--auth-ink-2);
    font-size: 12.5px; line-height: 1.95;
}
p.auth-tip::before {
    content: "说明"; display: inline-block; margin-right: 8px; padding: 0 6px;
    border-radius: var(--auth-radius-sm); background: var(--auth-brand-soft);
    color: var(--auth-brand-strong); font-size: 11px; line-height: 18px;
}
p.auth-tip b { color: var(--auth-ink); }
.layui-card-body > p.auth-tip:last-child { margin-bottom: 2px; }

/* 要点式说明：一个话题一行。原来这些说明是"停用…；删除…。驳回…"挤成一段，
   换行由容器宽度决定，读的时候要自己找边界。 */
ul.auth-notes {
    margin: 16px 0 0; padding: 11px 14px; list-style: none;
    border: 1px solid var(--auth-line); border-radius: var(--auth-radius);
    background: #fafbfc; font-size: 12.5px; line-height: 1.9;
    color: var(--auth-ink-2);
}
ul.auth-notes::before {
    content: "说明"; display: inline-block; margin-bottom: 4px; padding: 0 6px;
    border-radius: var(--auth-radius-sm); background: var(--auth-brand-soft);
    color: var(--auth-brand-strong); font-size: 11px; line-height: 18px;
}
ul.auth-notes li { position: relative; padding-left: 12px; }
ul.auth-notes li + li { margin-top: 3px; }
ul.auth-notes li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 4px; height: 4px; border-radius: 50%; background: #c9d3de;
}
ul.auth-notes b { color: var(--auth-ink); }
ul.auth-notes code { color: #5f6b7a; font-size: 12px; }
ul.auth-notes a { color: var(--auth-brand); }
.layui-card-body > ul.auth-notes:last-child { margin-bottom: 2px; }

/* 权限点目录：原来是 float 式 inline-block 列，宽度不齐、标题和 module 混在一行。
   改成等宽网格，每列一个 module，标题左、module 右，条目一行一项。 */
.auth-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 16px; }
.auth-perm-col { border: 1px solid var(--auth-line); border-radius: var(--auth-radius); padding: 10px 12px; background: #fcfdfe; }
.auth-perm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--auth-line-soft); }
.auth-perm-head b { font-size: 13px; color: var(--auth-ink); }
.auth-perm-head code { font-size: 11px; color: var(--auth-ink-3); }
.auth-perm-item { display: flex; align-items: center; gap: 7px; padding: 3px 0; margin: 0; font-size: 13px; color: var(--auth-ink-2); cursor: pointer; }
.auth-perm-item:hover { color: var(--auth-brand-strong); }
.auth-perm-item em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--auth-ink-3); }
input[type=checkbox], input[type=radio] { accent-color: var(--auth-brand); }

/* 一次性密码弹窗（后台重置用户密码）：值要能被看清、选中、复制，说明要压在主值之下 */
.auth-pwd { padding: 18px 20px 16px; }
.auth-pwd-user { margin-bottom: 8px; font-size: 13px; color: var(--auth-ink-2); }
.auth-pwd-val {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 16px; letter-spacing: .6px; color: var(--auth-ink); background: #fbfcfe;
}
.auth-pwd-tip { margin-top: 10px; font-size: 12px; line-height: 1.85; color: var(--auth-ink-3); }
.auth-pwd-warn {
    margin-top: 10px; padding: 7px 10px; border-radius: var(--auth-radius-sm);
    background: var(--auth-danger-soft); color: #b83c11; font-size: 12px; line-height: 1.8;
}
/* 复制用的临时节点：留在文档里才能被选中，但不能占位或把页面撑出滚动条 */
.auth-sr { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ============================================================================
 * 美化第 5 批：前台细节（导航对齐 / 胶囊选中 / 键值行 / 访客卡宽度 / 列表反馈）
 * ========================================================================== */

/* 顶栏内容与 .auth-main（960px 居中）对齐。
   原来顶栏是整宽 + 16px 内边距，宽屏上品牌贴在最左边、正文从中间开始，两者像两个页面。 */
.auth-nav { padding: 0 max(16px, calc((100% - 960px) / 2 + 16px)); }
.auth-nav-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; }
/* 当前项用软底胶囊，不用下划线：下划线在窄屏换行时会跑到第二行上 */
.auth-nav-list li a { height: 36px; line-height: 36px; margin: 10px 0; border-radius: 18px; }
.auth-nav-list li a:hover { background: var(--auth-line-soft); color: var(--auth-brand-strong); }
.auth-nav-list li.is-active a { background: var(--auth-brand-soft); box-shadow: none; }
.auth-nav-list li.is-active a:hover { background: var(--auth-brand-soft); }

/* 键值表加行分隔线：总览页原来行与行之间没有边界，六行读起来像一段话 */
.auth-kv tr + tr th, .auth-kv tr + tr td { border-top: 1px solid var(--auth-line-soft); }

/* 访客表单卡片：注册页有图形码 + 邮箱码两行，380px 会把右侧控件挤到换行 */
.auth-login-card { width: 400px; max-width: 100%; }

/* 未读通知给一道左沿，翻列表时能一眼挑出来，不用逐条读标题 */
.auth-notice { position: relative; }
.auth-msgitem-unread::before {
    content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px;
    width: 3px; border-radius: var(--auth-radius) 0 0 var(--auth-radius); background: var(--auth-brand);
}

/* 文档列表与授权行：整行有 hover 反馈，才看得出这一条是能点的 */
.auth-doc-item { margin: 0 -12px; padding: 10px 12px; border-radius: var(--auth-radius); }
.auth-doc-item:hover { background: #f7fbff; }
.auth-grant { transition: background-color .15s; }
.auth-scope-list li { border-radius: var(--auth-radius-sm); transition: background-color .15s; }
.auth-scope-list li:hover { background: #f9fbfd; }

/* ============================================================================
 * 美化第 6 批：门户化（访客顶栏 / 页脚 / 分栏 hero / 代码面板 / 接入三步）
 * ========================================================================== */

/* 访客顶栏：sticky，和登录后的用户顶栏同一高度，滚动时不跳版 */
.auth-portal-nav {
    position: sticky; top: 0; z-index: 100; height: 56px;
    background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(6px);
    border-bottom: 1px solid var(--auth-line);
}
.auth-portal-nav-in {
    display: flex; align-items: center; gap: 24px; height: 56px;
    max-width: 1120px; margin: 0 auto; padding: 0 20px;
}
.auth-portal-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--auth-ink); }
/* 站点标识：三处品牌位（门户顶栏 / 用户顶栏 / 后台顶栏）共用同一枚图，
   用 64px 的成品按 26px 显示，Retina 下不发虚 */
.auth-mark { display: block; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; }
.auth-portal-brand .auth-mark { width: 28px; height: 28px; }
.auth-portal-brand:hover { color: var(--auth-brand-strong); }
.auth-portal-links { display: flex; gap: 4px; }
.auth-portal-links a { padding: 6px 12px; border-radius: 16px; font-size: 14px; color: var(--auth-ink-2); }
.auth-portal-links a:hover { background: var(--auth-line-soft); color: var(--auth-brand-strong); }
.auth-portal-ops { display: flex; gap: 8px; margin-left: auto; }
.auth-portal-ops .layui-btn { margin: 0; }

/* 页脚：深色收口，和后台侧栏同一套灰蓝，整站看起来是一个产品 */
.auth-portal-foot { margin-top: 48px; background: #1f2630; color: #aeb8c4; }
.auth-portal-foot-in { max-width: 1120px; margin: 0 auto; padding: 34px 20px 22px; }
.auth-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1.4fr); gap: 24px 28px; }
.auth-foot-col b, .auth-foot-about b { display: block; margin-bottom: 10px; font-size: 13px; color: #fff; font-weight: 600; }
.auth-foot-col a { display: block; margin-bottom: 7px; font-size: 13px; line-height: 1.7; color: #93a0ae; }
.auth-foot-col a:hover { color: #fff; }
.auth-foot-about p { margin: 0 0 8px; font-size: 13px; line-height: 1.9; }
.auth-foot-base { color: #7c8896; font-size: 12px; }
.auth-foot-base code { color: #b9c4d0; }
.auth-foot-bar {
    display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between;
    margin-top: 26px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: 12px; color: #7c8896;
}

/* 分栏 hero：左文案右面板，比"三行居中字"更像门户首屏 */
.auth-hero {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 34px; align-items: center;
    padding: 40px 0 8px;
}
.auth-kicker {
    display: inline-block; margin-bottom: 12px; padding: 3px 10px;
    border: 1px solid #cfe4fb; border-radius: 14px; background: var(--auth-brand-soft);
    font-size: 12px; letter-spacing: .5px; color: var(--auth-brand-strong);
}
.auth-hero-text h1 { margin: 0 0 14px; font-size: 34px; line-height: 1.32; font-weight: 700; letter-spacing: .5px; color: var(--auth-ink); }
.auth-hero-sub { margin: 0 0 22px; max-width: 46ch; font-size: 15px; line-height: 1.95; color: var(--auth-ink-2); }
.auth-home-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.auth-home-cta .layui-btn { height: 42px; padding: 0 26px; font-size: 15px; line-height: 41px; margin: 0; }
.auth-hero-note { margin: 20px 0 0; font-size: 13px; color: var(--auth-ink-3); }
.auth-hero-note .layui-icon { margin: 0 4px 0 14px; color: var(--auth-ok); font-size: 14px; }
.auth-hero-note .layui-icon:first-child { margin-left: 0; }

/* 协议示例面板：门户首屏右侧最常见的一块，用深色和首页浅底拉开层次 */
.auth-code { border: 1px solid #232b36; border-radius: 10px; background: #232b36; box-shadow: var(--auth-shadow); overflow: hidden; }
.auth-code-head {
    display: flex; align-items: center; gap: 8px; padding: 11px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .09); font-size: 13px; color: #cdd7e2;
}
.auth-code-head .layui-icon { color: #6fc3ff; font-size: 16px; }
.auth-code pre {
    margin: 0; padding: 16px 18px; overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px; line-height: 2; color: #dbe4ee;
}
.auth-code-foot { margin: 0; padding: 12px 16px 14px; border-top: 1px solid rgba(255, 255, 255, .07); font-size: 12.5px; line-height: 1.9; color: #9fabba; }
.auth-code-foot code, .auth-code pre code { color: #7fd0ff; background: none; padding: 0; }

/* 接入三步 */
.auth-sec { margin-top: 46px; }
.auth-sec h2 { margin: 0 0 18px; font-size: 20px; font-weight: 600; color: var(--auth-ink); }
.auth-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.auth-step { position: relative; padding: 18px 18px 16px; border: 1px solid var(--auth-line); border-radius: var(--auth-radius); background: #fff; }
.auth-step b { display: block; margin: 10px 0 6px; font-size: 15px; color: var(--auth-ink); }
.auth-step p { margin: 0; font-size: 13px; line-height: 1.9; color: var(--auth-ink-2); }
.auth-step p code { padding: 1px 5px; border-radius: var(--auth-radius-sm); background: var(--auth-line-soft); color: var(--auth-ink-2); font-size: 12px; }
.auth-step-no {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--auth-brand-soft); color: var(--auth-brand-strong); font-size: 13px; font-weight: 600;
}
.auth-sec-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.auth-sec-cta .layui-btn { margin: 0; }

/* 有了顶栏之后，居中表单不能再按整屏高排版，否则底部会多出一屏滚动 */
.auth-portal .auth-login-wrap { min-height: calc(100vh - 56px); }

/* ============================================================================
 * 美化第 7 批：后台表格统一度量 / 卡片头垂直居中 / 操作列收纳 / 配置页吸顶筛选
 * ========================================================================== */

/* ---------- 卡片头：右上角真正垂直居中 ----------
   原来 .auth-sub 靠 line-height:42px 硬撑、.auth-tabs 靠 inline-flex，两套基准对不齐；
   右边一放按钮或文字折行就错位。改成 flex 后高度自适应，右侧统一贴右居中。 */
.layui-card-header {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
    height: auto; min-height: 44px; padding: 8px 15px;
    line-height: 1.6; white-space: normal; overflow: visible;
}
.layui-card-header > .auth-sub,
.layui-card-header > .auth-tabs { float: none; margin-left: auto; }
.layui-card-header > .auth-sub { text-align: right; line-height: 1.7; }
.layui-card-header > .auth-tabs { line-height: 20px; }

/* ---------- 两套表格共用一组度量 ----------
   7 张 layui.table 与 8 张自绘 .auth-adm-table 之前是两种观感。自绘表没有固定列，
   行高可以随内容；layui 表受"固定列不同步行高"限制必须锁死，所以两边统一的是
   字色/边线/内边距/次级文字，而不是行高。 */
.auth-adm-table th, .auth-table th { padding: 9px 14px; font-weight: 600; font-size: 13px; }
.auth-adm-table td, .auth-table td { padding: 9px 14px; }
.auth-adm-table tbody td b, .auth-table tbody td b { color: var(--auth-ink); font-weight: 600; }
.auth-adm-table td .auth-tip, .auth-table td .auth-tip { display: block; line-height: 1.7; }
.auth-adm-table tbody tr + tr, .auth-table tbody tr + tr { border-top: 0; }

/* 正文锁 56px 的表里，次级文字超出就省略号 —— 折第三行会被行高裁掉，
   裁掉的内容比省略号更糟：看着像数据丢了。
   code 只挑"单元格直接子元素"那种（sid / jti / 参数串），嵌在 auth-warn 胶囊里的
   不能改块级，否则胶囊会被撑满整行。 */
.layui-table-view .layui-table-cell .auth-tip {
    display: block; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.layui-table-view .layui-table-cell > code {
    max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 表头一律不折行：宽度不够说明列宽配小了，改列宽而不是让标题竖排 */
.layui-table-view .layui-table-header .layui-table-cell { white-space: nowrap; }

/* ---------- 操作列收纳：一个主按钮 + 「更多」下拉 ---------- */
.auth-ops { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.auth-ops .layui-btn { margin: 0; }
.layui-table-cell .auth-ops { flex: 0 0 100%; }

/* AUTH.menu() 的弹层（表格「更多」与顶栏「用户名」共用） */
.auth-menu {
    position: absolute; z-index: 1100; min-width: 136px; padding: 4px;
    background: #fff; border: 1px solid var(--auth-line); border-radius: var(--auth-radius);
    box-shadow: var(--auth-shadow-lg);
}
.auth-menu + .auth-menu { margin-top: 0; }
.auth-menu-item {
    display: block; width: 100%; padding: 7px 10px; border: 0; background: none;
    font-size: 13px; line-height: 1.5; text-align: left; text-decoration: none;
    color: var(--auth-ink-2); border-radius: var(--auth-radius-sm); cursor: pointer;
}
.auth-menu-item:hover { background: var(--auth-brand-soft); color: var(--auth-brand-strong); }
.auth-menu-item.is-danger { color: #d94a3d; }
.auth-menu-item.is-danger:hover { background: var(--auth-danger-soft); color: #b83c11; }
.auth-menu-item.is-disabled { color: var(--auth-ink-3); cursor: not-allowed; }
.auth-menu-item.is-disabled:hover { background: none; color: var(--auth-ink-3); }

/* ---------- 配置页分类条：吸顶 + 点击筛选（原来是锚点跳转，点一次跳到页面下方） ---------- */
.auth-jump {
    position: sticky; top: 0; z-index: 30;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    margin: 0 -15px 16px; padding: 9px 15px;
    background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--auth-line-soft);
}
.auth-jump button {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px;
    border: 1px solid var(--auth-line); border-radius: 14px; background: #fff;
    font-size: 12px; line-height: 20px; color: var(--auth-ink-2); cursor: pointer;
}
.auth-jump button:hover { border-color: var(--auth-brand); color: var(--auth-brand-strong); }
.auth-jump button span { color: var(--auth-ink-3); }
.auth-jump button em { font-style: normal; color: var(--auth-ink-3); }
.auth-jump button.is-on { background: var(--auth-brand); border-color: var(--auth-brand); color: #fff; }
.auth-jump button.is-on span, .auth-jump button.is-on em { color: rgba(255, 255, 255, .82); }
.auth-group.is-off { display: none; }
/* 「只看改动」是按行藏的：一节里只剩标题时整节也该消失（见 config 页 JS） */
.auth-cfg.is-off { display: none; }
.auth-cfg input.is-dirty { border-color: var(--auth-warn); box-shadow: 0 0 0 2px rgba(255, 184, 0, .16); }
.auth-cfg-ro { line-height: 30px; }
.auth-cfg-ro .auth-tip { margin-left: 8px; }
/* 保存前的新旧值对照：现值灰、新值蓝，一眼能看出哪一列是要写进去的 */
.auth-diff-wrap { padding: 14px 16px; }
.auth-diff { width: 100%; border-collapse: collapse; font-size: 13px; }
.auth-diff th { text-align: left; padding: 6px 10px; color: var(--auth-ink-3); font-weight: 600; background: #fafbfc; border-bottom: 1px solid var(--auth-line); }
.auth-diff td { padding: 6px 10px; border-bottom: 1px solid var(--auth-line-soft); vertical-align: top; word-break: break-all; }
.auth-diff-old { color: var(--auth-ink-3); text-decoration: line-through; }
.auth-diff-new { color: var(--auth-brand-strong); font-weight: 600; }
/* 筛选后只剩一节时，节与节之间的间距由 form 自己给 */
.auth-jump-hint { margin-left: auto; font-size: 12px; color: var(--auth-ink-3); }

/* ---------- 权限点目录：按模块全选 ---------- */
.auth-perm-head { display: flex; align-items: center; gap: 8px; }
.auth-perm-head b { font-size: 13px; }
.auth-perm-head code { font-size: 11px; color: var(--auth-ink-3); }
.auth-perm-head .auth-perm-count { margin-left: auto; font-size: 12px; color: var(--auth-ink-3); }
.auth-perm-all { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--auth-ink-2); }
.auth-perm-col.is-partial .auth-perm-count { color: var(--auth-brand); }

/* ---------- 顶栏「用户名 ▾」：首页与用户中心同一套组件 ---------- */
.auth-user-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border: 1px solid var(--auth-line); border-radius: 16px; background: #fff;
    font-size: 13px; color: var(--auth-ink); cursor: pointer;
}
.auth-user-btn:hover { border-color: var(--auth-brand); color: var(--auth-brand-strong); }
.auth-user-btn i { font-size: 15px; color: var(--auth-ink-3); }
.auth-user-btn .layui-icon-triangle-d { font-size: 11px; }
.auth-user-btn.is-on { border-color: var(--auth-brand); color: var(--auth-brand-strong); }
/* 未读通知做成按钮上的小红点，不再占一个独立徽标位 */
.auth-dot {
    position: relative; min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; background: #ff5722; color: #fff; font-size: 11px; line-height: 16px;
}
.auth-portal-ops, .auth-nav-right { display: flex; align-items: center; gap: 8px; }
.auth-nav-right .auth-badge-warn { margin-left: 0; }

/* 重置密码弹窗里的"管理员手输"那一栏：明文字号加大到与结果态同一档 */
.auth-pwd-in { font-family: Consolas, Monaco, monospace; letter-spacing: .5px; }

/* 长文档的目录：两列排，节多时也不会把正文挤到屏幕外 */
.auth-toc {
    margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--auth-line);
    border-radius: var(--auth-radius); background: #fbfcfe;
}
.auth-toc b { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .08em; color: var(--auth-ink-3); }
.auth-toc ol { columns: 2; column-gap: 28px; margin: 0; padding: 0 0 0 18px; font-size: 13px; }
.auth-toc li { margin: 3px 0; break-inside: avoid; }
.auth-toc li.lv3 { margin-left: 14px; font-size: 12.5px; }
.auth-toc a { color: var(--auth-ink-2); }
.auth-toc a:hover { color: var(--auth-brand); }
/* 点目录跳转时，标题不能被 56px 的吸顶导航压住 */
.auth-doc-body h2[id], .auth-doc-body h3[id] { scroll-margin-top: 76px; }

/* 自绘表的可排序表头：箭头只在当前排序列出现，避免满屏都是"可点"的错觉 */
.auth-sort { color: inherit; font-weight: inherit; border-bottom: 1px dotted transparent; }
.auth-sort:hover { color: var(--auth-brand); border-bottom-color: currentColor; }
.auth-sort.is-on::after { content: "↕"; margin-left: 4px; font-size: 11px; color: var(--auth-ink-3); }
.auth-sort.is-on.is-desc::after { content: "↓"; }
.auth-sort.is-on.is-asc::after { content: "↑"; }

/* 前台列表的分页条：与后台 layui 分页同一取向（计数在左、动作在右），
   不再是一行孤零零的文字链 */
.auth-pager {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--auth-line-soft);
}
.auth-pager .auth-tip { margin-right: auto; }
.auth-pager .layui-btn { margin: 0; }

/* ============================================================================
 * 响应式（前台）—— 必须留在文件最后
 *
 * 媒体查询不提高优先级，写在中间会被后面同优先级的桌面规则按顺序盖掉
 * （原来那小节就是这么失效的）。这里只覆盖前台：后台按既定结论不做手机适配，
 * 侧栏 200px + 固定表格在手机上本来就不该用。
 * ========================================================================== */

/* 窄屏通用：横向可滚的表格。table 改成 block 后，内部匿名 table 仍按内容宽排版，
   所以能横向滚动而不是把列压到不可读。 */
@media screen and (max-width: 767.98px) {
    .auth-nav { height: auto; flex-wrap: wrap; gap: 2px 0; padding: 8px 12px; }
    .auth-nav-brand { font-size: 15px; }
    .auth-nav-right { font-size: 12px; }
    .auth-nav-right a { margin-left: 10px; }
    /* 导航项换行会把顶栏撑成三行，改成第二行横向滚动 */
    .auth-nav-list { order: 3; flex: 0 0 100%; margin: 6px 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .auth-nav-list li { flex: 0 0 auto; margin-right: 2px; }
    .auth-nav-list li a { padding: 0 12px; line-height: 38px; white-space: nowrap; }

    .auth-main { padding: 12px 10px 24px; }
    .auth-home { padding: 14px 12px 32px; }

    /* 门户顶栏在窄屏只留品牌与两个动作：文档/首页这些链接页脚里都有，
       挤进 56px 一行会把品牌名截断 */
    .auth-portal-nav-in { gap: 10px; padding: 0 12px; }
    .auth-portal-links { display: none; }
    .auth-portal-brand { font-size: 15px; }
    .auth-portal-ops .layui-btn { padding: 0 12px; }
    .auth-portal .auth-login-wrap { min-height: 0; padding: 28px 0 20px; }

    /* 分栏 hero 在窄屏竖排，代码面板跟在文案后面 */
    .auth-hero { grid-template-columns: 1fr; gap: 22px; padding: 22px 0 4px; }
    .auth-hero-text h1 { font-size: 25px; }
    .auth-hero-sub { font-size: 14px; margin-bottom: 18px; }
    .auth-hero-note { margin-top: 16px; }
    .auth-code pre { padding: 13px 14px; font-size: 12px; line-height: 1.95; }
    .auth-sec { margin-top: 32px; }
    .auth-sec h2 { font-size: 18px; }

    .auth-foot-cols { grid-template-columns: 1fr 1fr; gap: 20px 18px; }
    .auth-foot-about { grid-column: 1 / -1; }
    .auth-portal-foot { margin-top: 36px; }
    .auth-portal-foot-in { padding: 26px 14px 18px; }
    /* 首屏 CTA 在手机上竖排满宽，三个并排会把按钮挤到换行 */
    .auth-home-cta .layui-btn { display: block; width: 100%; margin: 0 0 8px; }

    .auth-metric { padding: 12px; gap: 10px; }
    .auth-metric .layui-icon { width: 34px; height: 34px; font-size: 17px; border-radius: 8px; }
    .auth-metric b { font-size: 20px; }
    .auth-quick { grid-template-columns: 1fr; }
    .auth-feat-head { padding: 10px 12px; font-size: 13px; }
    ul.auth-feat-list { padding: 10px 12px 12px 26px; }

    /* ⚠️ `display:block` 会把 <table> 的表格盒模型整个毁掉（列不再按内容分配、
       th/td 变成块级），这正是窄屏下表头折行、名称一字一行的来源。
       所以只有"没包滚动容器"的表才走这条老兜底；包了 .auth-scroll 的交回表格布局，
       由容器横向滚动。前台另有两张表没包，行为保持原样。 */
    .auth-table, .auth-kv { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .auth-scroll > .auth-table { display: table; }
    .auth-kv th { width: 88px; }
    .auth-ua { max-width: 132px; }

    /* 同意页与协议页：460px 固定宽在小屏上直接溢出视口 */
    .auth-consent { width: 100%; }
    .auth-scope-list li { display: block; }
    .auth-scope-list li b { display: block; min-width: 0; margin-bottom: 2px; }

    .auth-login-card { width: 92%; }
    .auth-links a { display: inline-block; padding: 6px 2px; }
    .auth-msgitem-head { flex-wrap: wrap; gap: 4px 8px; }
    .auth-doc-body { font-size: 13.5px; }
    .auth-doc-body pre { font-size: 12px; }
    /* 两列目录在窄屏会变成一行两列的窄栏，读起来比一列还费劲 */
    .auth-toc ol { columns: 1; }
}

/* 更窄一档：验证码行竖排，输入框和图形码/按钮都占满整行，避免输入框被压到 100px 出头 */
@media screen and (max-width: 420px) {
    .auth-captcha-row { flex-wrap: wrap; }
    .auth-captcha-row .layui-input { flex: 0 0 100%; }
    .auth-captcha-row img, .auth-captcha-row .layui-btn { flex: 0 0 100%; width: 100%; }
    .auth-row-form { flex-wrap: wrap; }
    .auth-row-form .layui-input { flex: 1 1 100%; width: 100%; }
}

/* 宽屏才把两张选择卡并排 —— 媒体查询必须留在文件末尾，
   写在中间会被后面同优先级的桌面规则整节盖掉（这个坑踩过一次） */
@media screen and (min-width: 820px) {
    .auth-join-grid { grid-template-columns: 1fr 1fr; }
}