/**
 * 欲见运营中台 · 人体工学与审美修复层(第二层)
 * ------------------------------------------------------------------
 * 定位:纯视觉/手感修复,叠加在 yj-admin.css 之后加载,不含任何行为逻辑。
 * 回滚:从 application/admin/view/common/meta.html 摘除本文件那一行引用即恢复。
 * 本轮解决:
 *   1. 表格里中文被拦腰折断("未处 / 理""野径守 / 望者""2026- / 09-04")
 *   2. 操作列彩色小胶囊挤成两行 → 降格为克制的文字按钮
 *   3. 列表页顶部工具栏三种按钮体量不一、与搜索框不在同一基线
 *   4. 筛选区占掉大半屏,数据被挤到折叠线以下
 *   5. 缩略图裂图直接露出浏览器默认破图标
 *   6. 空值"-""无"与真实数据抢注意力
 * ------------------------------------------------------------------
 */

/* ===== 0. 地基:本层自己的尺度与语义色(前缀 --yjx- 避免与 yj-admin.css 撞车) ===== */
:root {
    /* 间距刻度:4 的倍数 */
    --yjx-s1: 4px;
    --yjx-s2: 8px;
    --yjx-s3: 12px;
    --yjx-s4: 16px;
    --yjx-s5: 24px;

    /* 圆角三档:控件 / 卡片 / 弹层 */
    --yjx-r-ctl: 8px;
    --yjx-r-card: 12px;
    --yjx-r-pop: 12px;

    /* 阴影两档:卡片 / 浮层 */
    --yjx-sh-card: 0 1px 3px rgba(31, 35, 51, .05);
    --yjx-sh-pop: 0 8px 24px rgba(31, 35, 51, .12);

    /* 操作类文字按钮的语义色(比实心按钮暗一档,做文字才够沉) */
    --yjx-act-primary: #4338CA;
    --yjx-act-ok: #0B7C72;
    --yjx-act-danger: #BE123C;
    --yjx-act-warn: #B45309;
    --yjx-act-muted: #6B7280;

    /* 弱化色:空值、次要说明 */
    --yjx-faint: #A8ADBD;
    --yjx-line-soft: #EDEEF4;
}

/* ===== 1. 表格:先把"中文被拦腰折断"治好 ===== */

/* 1.1 表头永不折行。中文表头一折行,列宽就被压到比内容还窄,
       整张表跟着崩。表头不折行 = 每列自动拿到不小于标题的宽度。 */
.fixed-table-container thead th .th-inner,
.bootstrap-table thead th .th-inner,
.table > thead > tr > th {
    white-space: nowrap;
}
.fixed-table-container thead th .th-inner {
    padding: 10px 10px;
}

/* 1.2 正文一律单行。原来"未处理"被折成"未处 / 理"、时间被折成"2026- / 09-04",
       是因为列被压得比内容还窄。改成单行后表格按内容取宽,放不下就整体横向滚动,
       再配合 3.4 节把「操作」列钉在右侧,横向滚动不会把按钮滚没。
       超长文本(聊天内容、举报内容)用省略号收口,鼠标悬停仍可看全。 */
.fixed-table-container tbody > tr > td,
.bootstrap-table tbody > tr > td {
    white-space: nowrap;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.7;
}

/* 1.3 时间、金额、数字这类等长内容不许断行,并用等宽数字让整列对齐好扫读 */
.fixed-table-container tbody > tr > td {
    font-variant-numeric: tabular-nums;
}

/* 1.4 行高与内距:比原来松一档,长表格扫读不串行。
       选择器要跟框架那条 .bootstrap-table .table:not(.table-condensed)>tbody>tr>td
       同等重量,否则会被它的 8px 压回去。 */
.bootstrap-table .table:not(.table-condensed) > tbody > tr > td,
.fixed-table-container tbody > tr > td,
.table > tbody > tr > td {
    padding: 9px 10px;
}
.fixed-table-container tbody > tr:hover > td {
    background: #F7F8FC !important;
}

/* 1.5 表格外框收口:圆角与横向滚动条。
       注意:分页条(含"每页显示 N 条"那个下拉)就生成在这个容器内部,
       所以这里绝对不能写 overflow:hidden,否则下拉会被裁掉。 */
.fixed-table-container {
    border-radius: var(--yjx-r-card) !important;
}
.fixed-table-body {
    scrollbar-width: thin;
}
.fixed-table-body::-webkit-scrollbar {
    height: 9px;
}
.fixed-table-body::-webkit-scrollbar-thumb {
    background: #CFD2DE;
    border-radius: 5px;
}

/* 1.6 空数据提示(颜色实测过:#A8ADBD 只有 2.24:1,看不清) */
.fixed-table-container .no-records-found td {
    padding: 44px 0 !important;
    color: #6B7280;
    font-size: 14px;
}

/* ===== 2. 单元格里的头像与缩略图 ===== */

/* 2.1 统一尺寸、圆角、裁切方式,不再各行各的高度 */
.fixed-table-container td img.img-sm,
.fixed-table-container td .img-sm {
    width: 34px !important;
    height: 34px !important;
    object-fit: cover;
    border-radius: var(--yjx-s2);
    background: #F1F2F7;
    vertical-align: middle;
}
/* 2.1.1(已撤销)后台本来就自带"悬停从缩略图弹出放大图"(layer tips 气泡),
        我先后写过悬浮层版和就地放大版,都是在原生功能上又叠一层,
        结果同一张图同时出现两个。本层不再管图片放大这件事,交还给原生。 */

/* 2.3 头像 + 昵称同格时保持一行,不再"头像一行、昵称另一行" */
.fixed-table-container td img.img-center {
    margin-right: var(--yjx-s1);
}
/* 头像格里的图与名同行,且不被省略号截断 */
.fixed-table-container tbody td:has(> a > img.img-sm) {
    max-width: none;
    overflow: visible;
}

/* ===== 3. 操作列:彩色小胶囊 → 克制的文字按钮 ===== */
/* 依据:操作列的每个按钮都由 Table.api.buttonlink 生成,一律带 data-button-index,
   用它把作用域死死圈在表格单元格内,绝不波及工具栏/表单/弹层里的同名按钮。 */

/* 作用域说明:框架生成的按钮带 data-button-index;另有二十多个页面(提现审核、意见反馈、
   会长申请、昵称审核、通话列表等)是在自己的格式化函数里手写 <a class="btn btn-xs ...">,
   没有那个属性。两类都要降格,否则同一排里一半文字一半胶囊。
   例外:少数 btn-xs 其实是"值"不是"动作"(IP、浏览器、银行卡号),另见 3.5 节按标签处理。 */
td:has(a.btn.btn-xs), td:has(> a.btn[data-button-index]) {
    white-space: nowrap;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.9;
}

td a.btn.btn-xs:not(.btn-ip):not(.btn-browser):not(.card_account_num),
td > a.btn[data-button-index] {
    position: relative;
    display: inline-block;
    height: auto;
    min-height: 24px;
    padding: 3px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: .2px;
    vertical-align: middle;
    color: var(--yjx-act-muted);
    transition: color .15s ease;
}
td a.btn.btn-xs:not(.btn-ip):not(.btn-browser):not(.card_account_num) > .fa,
td > a.btn[data-button-index] > .fa {
    margin-right: 3px;
    font-size: 12px;
    opacity: .85;
}
td a.btn.btn-xs:not(.btn-ip):not(.btn-browser):not(.card_account_num):hover,
td > a.btn[data-button-index]:hover {
    background: transparent !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

/* 3.1 按钮之间的细分隔线:画在按钮外侧的空白里,pointer-events:none 保证点不到,
       不会出现"点分隔线误触旁边的删除"这种事故。 */
/* 注意:上面那条基础规则带三个 :not(),权重比这里高,所以这条也必须补齐同样的
   :not() 链,否则 margin 会被上面的 margin:0 压掉、分隔线贴在按钮身上。 */
/* ★必须用「通用兄弟 ~」而不是「相邻兄弟 +」:鼠标停在带提示气泡的按钮上时,
   Bootstrap 会把气泡节点直接插到该按钮后面,+ 关系当场断掉 → 后面按钮的间距和
   分隔线整排消失 → 列宽突变 → 鼠标一抖就来回伸缩。用 ~ 就不受气泡影响。 */
td a.btn.btn-xs:not(.btn-ip):not(.btn-browser):not(.card_account_num) ~ a.btn.btn-xs:not(.btn-ip):not(.btn-browser):not(.card_account_num),
td > a.btn[data-button-index] ~ a.btn[data-button-index] {
    margin-left: 14px !important;
}
td a.btn.btn-xs:not(.btn-ip):not(.btn-browser):not(.card_account_num) ~ a.btn.btn-xs:not(.btn-ip):not(.btn-browser):not(.card_account_num)::before,
td > a.btn[data-button-index] ~ a.btn[data-button-index]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    width: 1px;
    height: 12px;
    margin-top: -6px;
    background: #E1E3EC;
    pointer-events: none;
}

/* 3.1.1 提示气泡被插在按钮之间,让它脱离文档流,免得参与列宽计算。 */
td > .tooltip { position: absolute; }

/* 3.2 语义色:全后台按同一套口径(已核对 19 个列表页的按钮定义)
       通过/开启=绿, 不通过/下架/删除=红, 禁言/重发=橙, 主动作(弹窗)=主色, 取消/关闭=灰 */
td a.btn.btn-xs.btn-primary,
td > a.btn.btn-primary[data-button-index] { color: var(--yjx-act-primary); }
td a.btn.btn-xs.btn-success,
td > a.btn.btn-success[data-button-index] { color: var(--yjx-act-ok); }
td > a.btn.btn-danger[data-button-index]  { color: var(--yjx-act-danger); }
td a.btn.btn-xs.btn-warning,
td > a.btn.btn-warning[data-button-index] { color: var(--yjx-act-warn); }
td a.btn.btn-xs.btn-info:not(.card_account_num),
td a.btn.btn-xs.btn-default,
td > a.btn.btn-info[data-button-index],
td > a.btn.btn-default[data-button-index] { color: var(--yjx-act-muted); }

/* 3.3 框架自带的三个按钮本来只有图标没有文字,在一排文字按钮里显得断层,
       补上标签(纯 CSS 追加文字,不动生成逻辑)。编辑是中性动作,不该是绿色。 */
td > a.btn.btn-editone[data-button-index]   { color: var(--yjx-act-primary); }
td > a.btn.btn-detailone[data-button-index] { color: var(--yjx-act-muted); }
td > a.btn.btn-delone[data-button-index]    { color: var(--yjx-act-danger); }
td > a.btn.btn-editone[data-button-index]::after   { content: "编辑"; }
td > a.btn.btn-detailone[data-button-index]::after { content: "详情"; }
td > a.btn.btn-delone[data-button-index]::after    { content: "删除"; }
td > a.btn.btn-dragsort[data-button-index] {
    color: var(--yjx-faint);
    cursor: move;
}
td > a.btn.btn-dragsort[data-button-index] > .fa { margin-right: 0; }

/* 3.5 少数 btn-xs 其实是"值"不是"动作":登录IP、浏览器信息、银行卡号。
       它们不该长得像按钮,但仍可点,做成安静的软标签。 */
td a.btn.btn-xs.btn-ip,
td a.btn.btn-xs.btn-browser,
td a.btn.btn-xs.card_account_num {
    background: #F1F2F7 !important;
    border: 1px solid var(--yjx-line-soft) !important;
    color: #4B5563 !important;
    box-shadow: none !important;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 400;
}
td a.btn.btn-xs.btn-ip:hover,
td a.btn.btn-xs.btn-browser:hover,
td a.btn.btn-xs.card_account_num:hover {
    border-color: var(--yj-primary) !important;
    color: var(--yj-primary) !important;
}

/* 3.4 把「操作」列钉在表格右侧。
       表格一旦横向滚动,最常用的操作按钮就会滚出屏幕,运营每处理一行都要来回拉。
       钉住之后按钮永远在手边。只在「操作」确实是最后一列时才生效,
       没有操作列的表格完全不受影响。 */
.fixed-table-container table:has(> thead th[data-field="operate"]:last-child) > thead > tr > th:last-child,
.fixed-table-container table:has(> thead th[data-field="operate"]:last-child) > tbody > tr > td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
}
.fixed-table-container table:has(> thead th[data-field="operate"]:last-child) > thead > tr > th:last-child {
    background: #F8F9FC;
    z-index: 3;
}
.fixed-table-container table:has(> thead th[data-field="operate"]:last-child) > tbody > tr > td:last-child {
    background: var(--yj-card);
}
.fixed-table-container table:has(> thead th[data-field="operate"]:last-child) > tbody > tr:hover > td:last-child {
    background: #F7F8FC;
}
/* 钉住列的左侧给一道很淡的投影,提示"这一列是浮在上面的" */
.fixed-table-container table:has(> thead th[data-field="operate"]:last-child) > thead > tr > th:last-child::after,
.fixed-table-container table:has(> thead th[data-field="operate"]:last-child) > tbody > tr > td:last-child::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 12px;
    transform: translateX(-100%);
    background: linear-gradient(to left, rgba(31, 35, 51, .07), rgba(31, 35, 51, 0));
    pointer-events: none;
}

/* ===== 4. 列表页工具栏:左右两组,一条基线 ===== */
.fixed-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--yjx-s3);
    flex-wrap: wrap;
    padding: 0 0 var(--yjx-s3);
    margin-bottom: var(--yjx-s1);
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .columns,
.fixed-table-toolbar .search {
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.fixed-table-toolbar .bs-bars { flex: 1 1 auto; min-width: 0; order: 1; }
.fixed-table-toolbar .search  { order: 2; }
.fixed-table-toolbar .columns { order: 3; }
/* 「普通搜索」那个放大镜单独在一个 columns-right 容器里(且带内联外边距),
   不排序的话会跑到搜索框左边、孤零零悬在中间 */
.fixed-table-toolbar .columns-right:not(.columns) {
    order: 4;
    margin: 0 !important;
}

/* 4.1 工具栏里的按钮统一高度与圆角 */
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .bs-bars > .toolbar,
.fixed-table-toolbar .toolbar {
    display: flex;
    align-items: center;
    gap: var(--yjx-s2);
    flex-wrap: wrap;
}
.fixed-table-toolbar .toolbar > .btn,
.fixed-table-toolbar .toolbar > .btn-group > .btn,
.fixed-table-toolbar .columns .btn {
    height: 34px;
    padding: 0 14px;
    border-radius: var(--yjx-r-ctl);
    font-size: 13px;
    line-height: 32px;
}
.fixed-table-toolbar .toolbar > .btn-group { margin: 0; }
.fixed-table-toolbar .toolbar > .btn > .fa,
.fixed-table-toolbar .toolbar > .btn-group > .btn > .fa { margin-right: 5px; }

/* 4.1.1 主次分明:一排工具按钮原来是"绿+绿+红+绿"四块实心色,谁都在喊。
        改成只有「添加」是实心主色(唯一的新建动作),其余一律白底描边,
        危险动作只在鼠标悬停时才亮红,平时不吓人。 */
.fixed-table-toolbar .toolbar > .btn,
.fixed-table-toolbar .toolbar > .btn-group > .btn {
    background: var(--yj-card) !important;
    border: 1px solid #D8DAE5 !important;
    color: #4B5563 !important;
    box-shadow: none !important;
}
.fixed-table-toolbar .toolbar > .btn:hover,
.fixed-table-toolbar .toolbar > .btn:focus,
.fixed-table-toolbar .toolbar > .btn-group > .btn:hover,
.fixed-table-toolbar .toolbar > .btn-group.open > .btn {
    background: var(--yj-primary-soft) !important;
    border-color: var(--yj-primary) !important;
    color: var(--yj-primary) !important;
}
.fixed-table-toolbar .toolbar > .btn-add {
    background: var(--yj-primary) !important;
    border-color: var(--yj-primary) !important;
    color: #fff !important;
}
.fixed-table-toolbar .toolbar > .btn-add:hover,
.fixed-table-toolbar .toolbar > .btn-add:focus {
    background: var(--yj-primary-dark) !important;
    border-color: var(--yj-primary-dark) !important;
    color: #fff !important;
}
.fixed-table-toolbar .toolbar > .btn-del:hover,
.fixed-table-toolbar .toolbar > .btn-del:focus {
    background: #FDEAF0 !important;
    border-color: var(--yj-rose) !important;
    color: var(--yj-rose) !important;
}
/* 未选中数据时那几个按钮本来就是禁用态,让它看起来确实是"现在点不了" */
.fixed-table-toolbar .toolbar > .btn.disabled,
.fixed-table-toolbar .toolbar > .btn-group > .btn.disabled {
    opacity: .45;
    box-shadow: none !important;
}

/* 4.2 搜索框:给足宽度与聚焦反馈,不再浮在半空 */
.fixed-table-toolbar .search input.form-control,
.fixed-table-toolbar .search .search-input {
    height: 34px;
    width: 240px;
    border-radius: var(--yjx-r-ctl);
    border-color: #D8DAE5;
}
.fixed-table-toolbar .search input.form-control:focus {
    border-color: var(--yj-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}

/* 4.3 右侧图标按钮组(列选择/导出/搜索切换)收成同一组 */
.fixed-table-toolbar .columns .btn-group > .btn {
    background: var(--yj-card);
    border: 1px solid #D8DAE5;
    color: #4B5563;
}
.fixed-table-toolbar .columns .btn-group > .btn:hover {
    border-color: var(--yj-primary);
    color: var(--yj-primary);
}

/* ===== 5. 筛选区(通用搜索):把被挤到折叠线以下的数据拉回屏幕 ===== */
.commonsearch-table {
    background: #FAFBFD;
    border: 1px solid var(--yjx-line-soft);
    border-radius: var(--yjx-r-card);
    padding: var(--yjx-s4) var(--yjx-s4) var(--yjx-s2);
    margin-bottom: var(--yjx-s3);
}
.commonsearch-table .form-group {
    margin-bottom: var(--yjx-s2);
}
.commonsearch-table .form-control,
.commonsearch-table .selectpage,
.commonsearch-table select {
    height: 32px;
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: 13px;
    border-radius: var(--yjx-r-ctl);
}
.commonsearch-table .control-label,
.commonsearch-table label {
    font-size: 13px;
    font-weight: 500;
    color: #4B5563;
    line-height: 32px;
    padding-top: 0;
    margin-bottom: 0;
}
/* 时间区间选择框内容长,给它比别的筛选项更宽一点,不再显示成"2026-0…" */
.commonsearch-table input.datetimerange,
.commonsearch-table input[name$="_range"],
.commonsearch-table .datetimepicker {
    min-width: 240px;
}
.commonsearch-table .form-group .btn {
    height: 32px;
    padding: 0 18px;
    line-height: 30px;
    border-radius: var(--yjx-r-ctl);
    font-size: 13px;
}

/* ===== 6. 状态、标签与空值:让待办一眼跳出来,空值退到背景里 ===== */

/* 6.1 状态圆点与文字的间距、对齐 */
.fixed-table-container td .fa-circle {
    font-size: 8px;
    vertical-align: 1px;
    margin-right: 3px;
}

/* 6.1.1 "圆点 + 状态词"是一个整体,不许在圆点后面断开(原来会折成"● / 未处理") */
.fixed-table-container td span:has(> .fa-circle),
.fixed-table-container td span:has(> .fa-dot-circle-o) {
    white-space: nowrap;
}

/* 6.2 软标签:浅底深字,替代原来的高饱和实心块,一屏几十个也不刺眼 */
.fixed-table-container td > .label,
.fixed-table-container td .label {
    display: inline-block;
    padding: 3px 9px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    border-radius: 6px;
}
.fixed-table-container td .label-primary { background: #EEF2FF; color: #4338CA; }
.fixed-table-container td .label-success { background: #E6F6F4; color: #0B7C72; }
.fixed-table-container td .label-danger  { background: #FDEAF0; color: #BE123C; }
.fixed-table-container td .label-warning { background: #FDF2E3; color: #B45309; }
.fixed-table-container td .label-info    { background: #E6F2FA; color: #026AA2; }
.fixed-table-container td .label-default { background: #F1F2F6; color: #6B7280; }

/* ===== 7. 焦点可见性与动效纪律 ===== */
.btn:focus-visible,
.form-control:focus-visible,
a:focus-visible {
    outline: 2px solid rgba(79, 70, 229, .45);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ===== 8. 弹窗与表单 ===== */

/* 8.1 弹窗标题栏原来是深藏青色,和全站白底浅灰的调子完全两个年代。
       改成白底+细分界线;右上角的最小化/最大化/关闭图标本来是白色画的,
       同步改成灰色,否则白底上就看不见了。 */
.layui-layer-fast .layui-layer-title {
    background: var(--yj-card) !important;
    color: var(--yj-text) !important;
    border-bottom: 1px solid var(--yj-line) !important;
    font-weight: 600;
    font-size: 14px;
}
.layui-layer-fast .layui-layer-setwin a::after,
.layui-layer-fast .layui-layer-setwin a::before {
    color: #8A90A2 !important;
}
.layui-layer-fast .layui-layer-min cite {
    background-color: #8A90A2 !important;
}
.layui-layer-fast .layui-layer-setwin a:hover::after,
.layui-layer-fast .layui-layer-setwin a:hover::before {
    color: var(--yj-primary) !important;
}
.layui-layer-fast .layui-layer-setwin .layui-layer-close:hover::after {
    color: var(--yj-rose) !important;
}
.layui-layer-fast {
    border-radius: var(--yjx-r-pop) !important;
    overflow: hidden;
}

/* 8.2 弹窗底部操作条:加一道分界线把它和表单分开,主按钮用主色,
       "确定"不该是绿色——绿色是"通过/成功"的语义,不是"提交"的语义。 */
.form-group.layer-footer {
    margin: var(--yjx-s4) 0 0;
    padding: var(--yjx-s3) 0 var(--yjx-s1);
    border-top: 1px solid var(--yjx-line-soft);
}
.form-group.layer-footer .btn {
    min-width: 88px;
    height: 34px;
    line-height: 32px;
    padding: 0 18px;
    border-radius: var(--yjx-r-ctl);
    box-shadow: none !important;
    text-shadow: none !important;
}
.form-group.layer-footer .btn[type="submit"],
.form-group.layer-footer .btn.btn-success {
    background: var(--yj-primary) !important;
    border-color: var(--yj-primary) !important;
    color: #fff !important;
}
.form-group.layer-footer .btn[type="submit"]:hover,
.form-group.layer-footer .btn.btn-success:hover {
    background: var(--yj-primary-dark) !important;
    border-color: var(--yj-primary-dark) !important;
}
.form-group.layer-footer .btn[type="reset"] {
    background: var(--yj-card) !important;
    border-color: #D8DAE5 !important;
    color: #4B5563 !important;
}
.btn-embossed { box-shadow: none !important; text-shadow: none !important; }

/* 8.2.1 真正显示出来的那排按钮在弹窗自己的底栏里(表单里那份是隐藏的备份),
        所以同一套规则要在这里再落一次,否则「确定」永远是绿的。 */
.layui-layer-fast .layui-layer-btn.layui-layer-footer {
    background: #FAFBFD !important;
    border-top: 1px solid var(--yj-line) !important;
    padding: 10px 15px !important;
}
.layui-layer-fast .layui-layer-btn.layui-layer-footer .btn {
    min-width: 88px;
    height: 34px;
    line-height: 32px;
    padding: 0 18px;
    border-radius: var(--yjx-r-ctl);
    box-shadow: none !important;
    text-shadow: none !important;
}
.layui-layer-fast .layui-layer-btn.layui-layer-footer .btn[type="submit"],
.layui-layer-fast .layui-layer-btn.layui-layer-footer .btn.btn-success {
    background: var(--yj-primary) !important;
    border-color: var(--yj-primary) !important;
    color: #fff !important;
}
.layui-layer-fast .layui-layer-btn.layui-layer-footer .btn[type="submit"]:hover,
.layui-layer-fast .layui-layer-btn.layui-layer-footer .btn.btn-success:hover {
    background: var(--yj-primary-dark) !important;
    border-color: var(--yj-primary-dark) !important;
}
.layui-layer-fast .layui-layer-btn.layui-layer-footer .btn[type="reset"],
.layui-layer-fast .layui-layer-btn.layui-layer-footer .btn.btn-default {
    background: var(--yj-card) !important;
    border-color: #D8DAE5 !important;
    color: #4B5563 !important;
}

/* 8.3 表单节奏:标签与控件同一基线,字段之间留一致的呼吸 */
.form-group > .control-label {
    font-weight: 500;
    color: #4B5563;
    padding-top: 8px;
}
form .form-group { margin-bottom: var(--yjx-s3); }
.help-block { margin-top: 5px; font-size: 12px; color: var(--yjx-faint); }
.has-error .form-control { border-color: var(--yj-rose); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(225, 29, 72, .12); }

/* 8.4 上传区:「上传」本来是红色的,红色在全站代表危险动作,不该拿来当上传。
       改成描边按钮,和旁边的「选择」成一组。 */
.btn.plupload,
.btn.fachoose {
    background: var(--yj-card) !important;
    border: 1px solid #D8DAE5 !important;
    color: #4B5563 !important;
    box-shadow: none !important;
}
.btn.plupload:hover,
.btn.fachoose:hover {
    border-color: var(--yj-primary) !important;
    color: var(--yj-primary) !important;
    background: var(--yj-primary-soft) !important;
}

/* 8.5 已传图片的预览:删除键原来是图片下面一整条红杠,收成右上角的小圆钮 */
li:has(> a.btn-trash) {
    position: relative;
}
li:has(> a.btn-trash) > a.btn-trash {
    position: absolute;
    top: 6px;
    right: 21px;
    width: 22px;
    height: 22px;
    padding: 0;
    line-height: 22px;
    text-align: center;
    border-radius: 50%;
    background: rgba(31, 35, 51, .55) !important;
    border: 0 !important;
    color: #fff !important;
    opacity: 0;
    transition: opacity .15s ease;
}
li:has(> a.btn-trash):hover > a.btn-trash { opacity: 1; }
li:has(> a.btn-trash) > a.btn-trash:hover { background: var(--yj-rose) !important; }
li:has(> a.btn-trash) > a.thumbnail {
    border-radius: var(--yjx-r-ctl);
    border-color: var(--yj-line);
    overflow: hidden;
    margin-bottom: 0;
}

/* 8.6 普通页面(非弹窗)里的表单提交键同样是主色。"确定/提交"是主动作,
       绿色在本后台代表"通过/成功",不该拿来当提交。 */
form button[type="submit"].btn-success,
.panel-body button[type="submit"].btn-success {
    background: var(--yj-primary) !important;
    border-color: var(--yj-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
form button[type="submit"].btn-success:hover,
.panel-body button[type="submit"].btn-success:hover {
    background: var(--yj-primary-dark) !important;
    border-color: var(--yj-primary-dark) !important;
}

/* ===== 9. 表格里的链接:几十个紫色链接同屏太吵 ===== */
/* 数据本身用正文色,悬停才亮主色并出下划线;操作列的按钮不受影响。 */
.fixed-table-container tbody > tr > td a:not(.btn):not(.thumbnail) {
    color: var(--yj-text);
    text-decoration: none;
}
.fixed-table-container tbody > tr > td a:not(.btn):not(.thumbnail):hover {
    color: var(--yj-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ===== 10. 筛选区的提交按钮同样用主色,不用绿色 ===== */
.commonsearch-table button[type="submit"],
.commonsearch-table .btn-success {
    background: var(--yj-primary) !important;
    border-color: var(--yj-primary) !important;
    color: #fff !important;
}
.commonsearch-table button[type="submit"]:hover,
.commonsearch-table .btn-success:hover {
    background: var(--yj-primary-dark) !important;
    border-color: var(--yj-primary-dark) !important;
}

/* ===== 11. 两处"看不见的字" ===== */

/* 11.1 用户列表把 Apple 注册方式标成 label-inverse,但全站根本没有这个样式,
        于是那一格永远是没有底色的裸字,和旁边的手机号/QQ/微信标签对不齐。 */
.label-inverse {
    background: #EEF0F6;
    color: #4B5563;
}
.fixed-table-container td .label-inverse {
    background: #EEF0F6;
    color: #4B5563;
}

/* 11.2 灰色文字原色 #d2d6de 在白底上几乎看不见(对比度约 1.5:1),
        隐藏/停用这类状态本来就该看得清是"停用",不是看不见。 */
.text-gray,
.fixed-table-container td .text-gray {
    color: #6B7280 !important;   /* 原 #d2d6de 只有 1.5:1;中途试过 #8A90A2 还是 3.19,这一档实测 4.83 */
}

/* ===== 12. 表单细节补齐 ===== */

/* 12.1(已撤销)本来想给必填项补红星,实测发现模板里的 required 属性并不可信:
        用户编辑表单的「密码」「手机号」都带着 required,可提示语却写着"不修改密码请留空"。
        照着它标红星会误导运营,所以这条不做——要做得先把模板里的属性理清楚。 */

/* 12.2 输入控件原本是 31px 高、12px 字,在 1440 以上的屏上偏小、点起来也费劲。
        统一到 34px / 13px,和工具栏按钮同高。 */
form .form-control,
.commonsearch-table .form-control {
    font-size: 13px;
}
form input.form-control,
form select.form-control {
    height: 34px;
}

/* 12.3 只读字段(生日、举报编号这类)要一眼看出"这格不用填" */
.form-control[disabled],
.form-control[readonly] {
    background: #F4F5F9;
    color: #8A90A2;
    cursor: not-allowed;
}

/* 12.4 单选/复选项挤成一坨,拉开间距并让点击热区落在整个"圆点+文字"上 */
.form-group .radio,
.form-group .checkbox {
    display: inline-block;
    margin: 0 18px 0 0;
    padding: 0;
}
/* 注意:这里绝不能把 label 的左内距归零 —— Bootstrap 把单选/复选的圆点做成
   绝对定位,靠 label 的 padding-left 给它让位,归零会让圆点压在文字上。 */
.form-group .radio > label,
.form-group .checkbox > label {
    font-weight: 400;
    cursor: pointer;
}

/* 12.5 两个第三方下拉(selectpage / bootstrap-select)聚焦时没有任何反馈,
        补上和普通输入框一致的聚焦圈。只动颜色与边框,不碰它们的尺寸与显隐。 */
.selectpage .sp_container.sp_container_open .sp_input,
.selectpage .sp_input:focus,
.bootstrap-select.open > .dropdown-toggle {
    border-color: var(--yj-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12) !important;
}

/* ===== 13. 可读性:被背景吃掉的字 ===== */

/* 13.1 分页条当前页:底色是主色紫,字却还是灰色(上一层的
        「.fixed-table-pagination .pagination > li > a」权重比「.pagination > .active > a」高,
        把白字压掉了),于是"第几页"在紫块上几乎看不见。 */
.fixed-table-pagination .pagination > .active > a,
.fixed-table-pagination .pagination > .active > span,
.fixed-table-pagination .pagination > li.active > a,
.pagination > .active > a,
.pagination > .active > span {
    color: #fff !important;
    font-weight: 600;
}
.fixed-table-pagination .pagination > li > a:hover {
    background: var(--yj-primary-soft);
    color: var(--yj-primary);
    border-color: #D8DAE5;
}
/* 上一页/下一页在禁用态要看得出"到头了" */
.pagination > .disabled > a,
.pagination > .disabled > span {
    color: var(--yjx-faint) !important;
    background: #FAFBFD;
}

/* 13.2 状态文字沿用的是老 AdminLTE 的荧光色,白底上又浅又飘,
        且同一个"通过"在不同页面分别写成 success 和 green,是两个绿。
        统一收进一套能读的语义色,只换颜色值,不碰"哪个状态用哪个类"。 */
.text-green, .text-success  { color: #0B7C72 !important; }
.text-red, .text-danger     { color: #BE123C !important; }
.text-yellow, .text-warning { color: #B45309 !important; }
.text-aqua, .text-info, .text-blue { color: #026AA2 !important; }
.text-muted { color: #7A8093 !important; }

/* 13.3 表格行的定位感:极淡斑马线 + 勾选行标记 */
.fixed-table-container tbody > tr:nth-of-type(even) > td {
    background: #FCFCFE;
}
.fixed-table-container tbody > tr.selected > td,
.fixed-table-container tbody > tr.selected > td:last-child {
    background: var(--yj-primary-soft) !important;
}

/* 13.4 侧栏与内页的滚动条:原来几乎看不见,不知道下面还有内容 */
.main-sidebar::-webkit-scrollbar,
.sidebar::-webkit-scrollbar { width: 8px; }
.main-sidebar::-webkit-scrollbar-thumb,
.sidebar::-webkit-scrollbar-thumb {
    background: #CFD2DE;
    border-radius: 4px;
}
.main-sidebar::-webkit-scrollbar-thumb:hover,
.sidebar::-webkit-scrollbar-thumb:hover,
.fixed-table-body::-webkit-scrollbar-thumb:hover { background: #AEB3C4; }
::-webkit-scrollbar-corner { background: transparent; }

/* 13.5 顶栏未读角标:9px 的数字挤在图标角上,两位数就糊成一团 */
.main-header .navbar .label,
.main-header .navbar .badge {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    line-height: 17px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    border: 2px solid #fff;
    box-sizing: content-box;
}

/* ===== 14. 对比度巡检修复(用脚本量过每一处的实际对比度,不是凭感觉) ===== */
/* 判定口径:正文 4.5:1、大字/粗体 3:1(WCAG AA)。以下都是实测不达标的。 */

/* 14.1 侧栏顶部的管理员名字:浅蓝灰 #B8C7CE 落在白底上只有 1.74:1,基本靠猜。 */
.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info p,
.skin-green .user-panel .info a {
    color: #3F4658 !important;
    font-weight: 500;
}

/* 14.2 面包屑「控制台 / 用户运营」:#777 落在浅灰画布上 4.08:1,差一档。 */
#ribbon .breadcrumb > li,
#ribbon .breadcrumb > li > a,
#ribbon .breadcrumb > li > a.addtabsit,
#ribbon .breadcrumb > .active {
    color: #5A6072 !important;
}
#ribbon .breadcrumb > li > a:hover { color: var(--yj-primary); }

/* 14.3 次要文字与空值占位:原来 2.5~3.9:1,调到刚好过线又不抢戏。 */
.text-muted { color: #6B7280 !important; }
.fixed-table-container td .label-default { color: #565E70; }
.pagination > li > a,
.pagination > li > span { color: #5A6072; }
.pagination > .disabled > a,
.pagination > .disabled > span { color: #6B7280 !important; }
/* 页码之间那个省略号也是 disabled 态,实测 3.08:1,一并提上来 */
.fixed-table-pagination .pagination > li > a,
.fixed-table-pagination .pagination > li > span { color: #5A6072; }

/* 14.4 工作台首页的几处小字是模板内联样式写死的浅灰(1.7~2.5:1):
        空数据提示、榜单序号、KPI 副标题、指标名称。 */
.yj-empty,
.yj-quick-name,
.yj-rank-idx,
.yj-kpi-sub,
.yj-card-title small,
.yj-kpi-value small {
    color: #6B7280 !important;
}
.yj-rank-idx { background: #E9EAF0 !important; color: #4B5563 !important; }
.yj-kpi-num small,
.yj-kpi small { color: #6B7280 !important; }

/* 14.5 提现审核页顶上那句"列表每15秒自动更新"实测 3.03:1,提到能读。 */
.withdrawal-auto-hint { color: #6B7280 !important; }

/* ===== 15. 说明条与专题页的浅字(同样是量出来的,不是估的) ===== */

/* 15.1 全站的说明条原来是"高饱和实色底 + 白字":蓝底白字只有 3.15:1、
        绿底白字只有 2.41:1,一句话说明反而比正文还刺眼且更难读。
        改成浅底深字的软样式,既好读又不抢戏。 */
.alert {
    border: 1px solid;
    border-radius: 10px;
    text-shadow: none;
}
.alert-info    { background: #E8F3FB !important; border-color: #CBE4F5 !important; color: #0B5D8A !important; }
.alert-success { background: #E6F6F4 !important; border-color: #C8EAE4 !important; color: #0B6E5F !important; }
.alert-warning { background: #FDF4E5 !important; border-color: #F6E2C0 !important; color: #8A5209 !important; }
.alert-danger  { background: #FDECF1 !important; border-color: #F7CEDB !important; color: #A21341 !important; }
.alert strong, .alert b, .alert a { color: inherit !important; }
.alert a { text-decoration: underline; }

/* 15.2 绿色实心按钮上的白字只有 3.9:1(部分页面自带的老绿更是 2.41:1),
        把绿加深一档,白字才读得清。 */
/* ★这里绝对不能写 color:#fff !important。表格操作列的按钮已经被降格成"透明底+
   语义色文字",一旦在这里用 !important 把字刷成白色,就会白字压白底彻底看不见
   (2026-09-04 实测在 支付设置/分享链接/客服系统 三个页面翻过车)。
   底色加深即可,字色交给各自的规则。 */
.btn-success,
.btn-success:focus,
.bg-green {
    background-color: #0B7C72 !important;
    border-color: #0B7C72 !important;
}
.btn-success:hover,
.btn-success:active { background-color: #096A62 !important; border-color: #096A62 !important; }

/* 15.3 表单帮助文字:上一轮我自己给的 #A8ADBD 实测只有 2.1:1,提上来。 */
.help-block { color: #6B7280 !important; }

/* 15.4 几个专题页自建的浅灰小字与灰底白字(客服对话 / 双桶系统 / AI文案智检) */
.cs-empty,
.cs-meta,
.cr-current,
.cr-round-meta,
.cr-empty,
.dbk-st-closed,
.dbk-muted { color: #6B7280 !important; }
.cs-chip.closed {
    background: #EEF0F6 !important;
    color: #4B5563 !important;
}

/* 15.5 客服对话页把一批小字统一写成 #89949b(实测 3.1:1),连同统计数字标题一起提上来 */
.cs-stat span,
.cs-item-preview,
.cs-item-meta,
.cs-thread-subtitle,
.cs-message-time { color: #6B7280 !important; }

/* 15.6 AI文案智检页的统计标题 #9AA0A6(2.64:1) */
.cr-stat .name,
.cr-stat .label { color: #6B7280 !important; }

/* 15.7 双桶系统:关态开关与状态字 */
.dbk-switch.dbk-toggle,
.dbk-st-closed { color: #5C6373 !important; }
.dbk-st-pending { color: #8A5209 !important; }

/* 15.8 客服对话页的筛选按钮:选中态是白字压在老绿 #18bc9c 上,只有 2.41:1。
        选中态本来就是"当前位置",按全站口径改成主色。 */
.cs-filters .active {
    background: var(--yj-primary) !important;
    border-color: var(--yj-primary) !important;
    color: #fff !important;
}
.cs-chip.serving {
    background: #0B7C72 !important;
    color: #fff !important;
}

/* 15.9 其余专题页自建的浅灰说明字(违规系统 / 举报系统 / 客服系统 / 短信系统 / 合规导航),
        实测 1.8~3.9:1,统一提到过线。 */
/* 合规导航(appcompliance)整页不动 —— 甲方 2026-09-04 明确排除,本层不写它的任何选择器。 */
.vio-hint, td.vio-hint,
.rp-hint, td.rp-hint, p.rp-hint,
.cs-form-note,
.cs-duty-off,
.sms-field .tip,
.sms-pool .sub,
.sms-pool .num small { color: #6B7280 !important; }

/* 违规系统:等级色块与已撤销行。已撤销本来就该弱化(还带删除线),
   只把灰提到看得清的一档,不改它"被划掉"的观感。 */
#violation-page .vio-l-mid { color: #8A5209 !important; }
#violation-page .vio-l-low { color: #4B5563 !important; }
#violation-page .vio-revoked,
#violation-page .vio-revoked td { color: #6B7280 !important; }
.infopop-i { color: #7C8394 !important; }

/* ===== 16. 缩略图悬停放大气泡:给尺寸封顶 ===== */
/* 原生那段只写了 max-width/max-height:300%,百分比在这里没有可参照的高度,
   竖构图的照片就撑得比可视区还高,底部被切掉一截。这里按可视区给上限,
   宽高各留余量,长图缩到能一眼看全为止。只动尺寸,不碰它的弹出逻辑。 */
/* ★关键:layer.tips 自己把气泡框宽度封死在 260px 上下(它按纯文字提示设计的),
   于是图片再怎么调,白底框只有 210px 宽,图被框边切掉一条。
   这里把框和内容区都改成"由内容撑开",框才会跟着图片走。 */
/* 只放开"里面装的是图片"的那种气泡。纯文字的提示气泡还得靠这个宽度上限
   来换行,一起放开会变成一条拉得很长的横条。 */
.layui-layer-tips:has(img),
.layui-layer-tips:has(img) .layui-layer-content {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
}
.layui-layer-tips:has(img) .layui-layer-content {
    padding: 0;
    overflow: visible;
    line-height: 0;
}
.layui-layer-tips:has(img) img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 360px !important;
    max-height: 52vh !important;
    object-fit: contain;
    border-radius: 6px;
}