/* ============================================================================
   ROBAM老板全域AI服务中台 · V5.1 设计系统 (theme-v4.css)
   ----------------------------------------------------------------------------
   本文件在 style.css 之后加载，作为 V4.0 的"唯一新规则来源"。
   分区（严格按层，不允许在文件末尾随意追加补丁）：
     01 Design Tokens
     02 Base / 排版与防溢出基线
     03 Layout · 应用骨架（侧边栏 / 顶栏 / 主内容 / 抽屉）
     04 Brand · 侧边栏品牌区
     05 Components · 按钮 / 面板 / 卡片 / 统计卡 / 徽标 / 空状态 / 骨架屏
     06 Tables · 表格硬规则（不换行 / 内部横滚 / 固定表头 / 固定操作列）
     07 Forms · 表单与筛选
     08 Modal / Drawer
     09 AI Assistant
     10 Auth · 登录 / 注册 / 找回密码
     11 Responsive · 断点收敛（1440 / 1024 / 768 / 430 / 390 / 375）
   ============================================================================ */

/* ============================ 01 Design Tokens ============================ */
:root {
    /* —— 品牌 —— */
    --rb-navy: #0A1F44;
    --rb-navy-deep: #06122B;
    --rb-navy-soft: #16305C;
    --rb-blue: #333;
    --rb-blue-soft: #F0F0F0;
    --rb-gold: #C8A876;
    --rb-gold-deep: #A88A5A;
    --rb-gold-soft: #FBF6EE;

    /* —— 语义色 —— */
    --rb-bg: #F4F6FA;
    --rb-surface: #FFFFFF;
    --rb-surface-2: #F8FAFD;
    --rb-border: #E6EAF2;
    --rb-border-strong: #D6DCE8;
    --rb-text: #16233A;
    --rb-text-2: #5A6B85;
    --rb-text-3: #93A0B5;
    --rb-success: #12A594;
    --rb-warning: #E08700;
    --rb-danger: #D92D20;

    /* —— 尺寸 —— */
    --rb-header-h: 64px;
    /* V5.5：用户要求「左侧菜单栏宽度稍微小一点」248 → 226px，
       同时保持一级/二级文字完整不截断（配合 --rb-menu-font-l1/l2） */
    --rb-sidebar-w: 226px;
    --rb-radius-xs: 6px;
    --rb-radius-sm: 10px;
    --rb-radius-md: 14px;
    --rb-radius-lg: 18px;
    --rb-shadow-1: 0 1px 2px rgba(16, 30, 54, .04), 0 2px 8px rgba(16, 30, 54, .04);
    --rb-shadow-2: 0 4px 14px rgba(16, 30, 54, .07);
    --rb-shadow-3: 0 16px 44px rgba(16, 30, 54, .14);
    --rb-gap: 16px;

    /* —— 兼容旧变量，避免老页面失效 —— */
    --bg-primary: #F4F6FA;
    --bg-card: #FFFFFF;
    --text-primary: #16233A;
    --text-secondary: #5A6B85;
    --text-light: #93A0B5;
    --border-color: #E6EAF2;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
}

/* ==================== 02 Base · 排版与防溢出基线 ==================== */
/* 取消"用 body 裁掉横向溢出"的掩盖式写法：改为在源头控制宽度。
   任何页面出现横向滚动都会被验收脚本直接判为不合格。 */
body {
    overflow-x: clip;          /* 仅阻断滚动条，不掩盖元素越界（验收脚本会检测越界） */
    background: var(--rb-bg);
    color: var(--rb-text);
    font-size: 14px;
    line-height: 1.62;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.35;
    letter-spacing: -.1px;
    word-break: keep-all;      /* 中文标题优先整词换行，不逐字断行 */
    overflow-wrap: anywhere;
}

/* 关键：所有 flex/grid 子项默认可收缩，杜绝"文字被挤成竖排" */
.flex-1, .min-w-0 { min-width: 0; }

p, li, td, th, label, span, div, a, button {
    overflow-wrap: anywhere;   /* 长串型号/链接不撑破容器 */
}

/* 数字与金额使用等宽数字，列表对齐更高级 */
.num, .money, .stat-card .value, .data-table td.num,
.tbl-box td, .data-table td { font-variant-numeric: tabular-nums; }

/* 长英文/型号允许在任意位置断行，但不允许把中文压成竖排 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ==================== 03 Layout · 应用骨架 ==================== */
.app-layout {
    display: grid;
    grid-template-columns: var(--rb-sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--rb-header-h) minmax(0, 1fr);
    grid-template-areas:
        "sidebar header"
        "sidebar main";
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--rb-bg);
}

/* ---- 顶栏 ---- */
.app-header {
    grid-area: header;
    height: var(--rb-header-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 20px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--rb-border);
    box-shadow: 0 1px 0 rgba(16, 30, 54, .02);
    position: sticky;
    top: 0;
    z-index: 900;
    overflow: hidden;          /* 顶栏自身绝不产生横向滚动条 */
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 1 1 auto;
    min-width: 0;
}

.header-page-title {
    font-size: 16.5px;
    font-weight: 700;
    color: var(--rb-navy);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    max-width: 42vw;
}

/* V5.1：当前岗位只读标识。
   用户要求「登录后角色就固定了，右上角不要出现多余的切换栏目」，
   所以把岗位名做成标题左侧的一枚静态徽标 —— 一眼能看到自己是谁，
   但没有任何可点击的切换入口，也不再占用右上角空间。 */
.header-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 26px;
    padding: 0 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--rb-navy), var(--rb-navy-soft));
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(10, 31, 68, .22);
}
.header-role-badge i { font-size: 11px; color: var(--rb-gold); }

/* 汉堡按钮：桌面隐藏；移动显示 */
.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-sm);
    background: #fff;
    color: var(--rb-navy);
    font-size: 16px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}
.menu-toggle:active { background: var(--rb-surface-2); }
.menu-toggle:hover { border-color: var(--rb-gold); }

.header-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.header-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--rb-surface-2);
    border: 1px solid var(--rb-border);
    color: var(--rb-text-2);
    font-size: 12px;
    white-space: nowrap;
    max-width: 220px;
}
.header-chip i { color: var(--rb-gold); }
.header-notice {
    cursor: pointer;
    color: var(--rb-navy);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 26px;
    max-width: 240px;
}
.header-notice:hover { border-color: var(--rb-gold); }

.role-switcher {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: var(--rb-radius-sm);
    border: 1px solid var(--rb-border);
    background: #fff;
    color: var(--rb-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.icon-btn:hover { border-color: var(--rb-gold); color: var(--rb-gold-deep); }
.icon-btn:active { transform: scale(.96); }
.icon-btn.gold { color: var(--rb-gold-deep); border-color: rgba(200, 168, 118, .5); background: var(--rb-gold-soft); }
.msg-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--rb-danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

/* 角色静态标识（系统管理员） */
.role-chip-static {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--rb-surface-2);
    border: 1px solid var(--rb-border);
    color: var(--rb-navy);
    font-weight: 700;
    font-size: 12.5px;
    white-space: nowrap;
}
.role-chip-static i { color: var(--rb-gold); }

/* 账号区（V5.1 最终定稿）：纯只读胶囊 —— 头像 + 姓名 + 岗位，
   无下拉箭头、无 hover 反馈、无任何点击行为（cursor: default）。
   用户要求：「右上角角色名称只保留椭圆，不要 ^ V 这类的，要求点不动」。 */
.account-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 42px;
    padding: 0 16px 0 5px;
    border-radius: 999px;
    border: 1px solid var(--rb-border);
    background: #fff;
    cursor: default;
    user-select: none;
    max-width: 260px;
    pointer-events: none;   /* 彻底不可交互 */
}
.account-pill .avatar-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
    background: transparent;
}
.account-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; text-align: left; }
.account-name {
    font-size: 13px; font-weight: 600; color: var(--rb-text);
    max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-role { font-size: 11px; color: var(--rb-text-3); white-space: nowrap; }

/* 兼容旧结构（V5.1 及更早）：账号菜单与下拉已弃用，保留兜底避免残留样式错位 */
.account-btn { display: none !important; }
.role-caret { display: none !important; }
.account-menu-head, .role-menu-dropdown { display: none !important; }

/* 角色下拉菜单容器（保留旧类名兼容） */
.role-menu { position: relative; flex-shrink: 0; }
.role-menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-md);
    box-shadow: var(--rb-shadow-3);
    padding: 6px;
    z-index: 1200;
    max-height: min(70vh, 460px);
    overflow-y: auto;
}
.role-menu.open .role-menu-dropdown { display: block; animation: rbDropIn .16s ease; }
@keyframes rbDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.role-menu-label {
    padding: 8px 10px 6px;
    font-size: 11px;
    color: var(--rb-text-3);
    letter-spacing: 1px;
}
.role-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: var(--rb-radius-xs);
    color: var(--rb-text);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}
.role-menu-item:hover { background: var(--rb-surface-2); }
.role-menu-item.active { background: var(--rb-gold-soft); color: var(--rb-gold-deep); font-weight: 600; }
.role-menu-item i { color: var(--rb-gold); width: 16px; text-align: center; flex-shrink: 0; }

/* ---- 主内容区 ---- */
.app-main {
    grid-area: main;
    min-width: 0;
    min-height: 0;
    padding: 20px 22px 40px;
    overflow-x: clip;
}
.page-wrap { max-width: 1600px; margin: 0 auto; }

/* ---- 侧边栏 ---- */
.app-sidebar {
    grid-area: sidebar;
    width: var(--rb-sidebar-w);
    background: linear-gradient(180deg, #0A1F44 0%, #0C2449 55%, #0A1F44 100%);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
    z-index: 1000;
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 8px; }

.menu { list-style: none; padding: 6px 0 0; margin: 0; flex: 1 0 auto; }
.menu-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 12px 10px;
    padding: 9px 12px;
    border-radius: var(--rb-radius-sm);
    background: rgba(200, 168, 118, .12);
    border: 1px solid rgba(200, 168, 118, .22);
    color: var(--rb-gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
}
.menu-section {
    padding: 14px 20px 6px;
    color: rgba(255, 255, 255, .42);
    font-size: 11px;
    letter-spacing: 1.6px;
}
.menu-item {
    display: flex;
    align-items: center;
    margin: 2px 10px;
    padding: 10px 12px;
    border-radius: var(--rb-radius-sm);
    color: rgba(255, 255, 255, .84);
    font-size: 13.5px;
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
    position: relative;
}
.menu-item > span { display: flex; align-items: center; gap: 10px; min-width: 0; }
.menu-item i { width: 18px; text-align: center; font-size: 14px; color: rgba(200, 168, 118, .85); flex-shrink: 0; }
.menu-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu-item.active {
    background: linear-gradient(90deg, rgba(200, 168, 118, .22), rgba(200, 168, 118, .06));
    color: #fff;
    font-weight: 600;
}
.menu-item.active::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--rb-gold);
}

.sidebar-footer {
    margin-top: auto;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .42);
    font-size: 11px;
    line-height: 1.75;
    text-align: left;
}
.sidebar-user { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sidebar-user-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, var(--rb-gold), var(--rb-gold-deep));
    color: #24190A; font-weight: 800; font-size: 12px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-user-name {
    color: rgba(255, 255, 255, .9); font-weight: 600; font-size: 12.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-logout {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 34px; margin-bottom: 10px;
    border-radius: var(--rb-radius-sm);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .78);
    font-size: 12px;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.sidebar-logout:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sidebar-copy { margin-bottom: 2px; }

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 18, 43, .5);
    z-index: 990;
    opacity: 0;
    transition: opacity .24s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block; opacity: 1; }

/* ==================== 04 Brand · 侧边栏品牌区 ==================== */
/* V5.1 最终定稿：按用户要求恢复为「圆形 ROBAM 标识（上）+ ROBAM老板 / 全域AI服务中台（下）」。
   圆形图使用带透明通道的成品图（圆外已透明），不做任何抠图拼接；
   用固定宽高 + object-fit: contain 锁死比例，任何侧栏宽度下都不会被拉伸变形。 */
.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .16s ease;
    position: relative;
    text-align: center;
}
.sidebar-brand:hover { background: rgba(255, 255, 255, .04); }

/* 圆形品牌标识：浅色描边 + 外发光，保证在深蓝侧栏上边缘依然清晰 */
.brand-logo {
    width: 64px;
    height: 64px;
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: contain;
    background: transparent;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .30), 0 0 0 2px rgba(255, 255, 255, .16);
}

.brand-text {
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.brand-name {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.3;
    white-space: nowrap;
}
.brand-sub {
    color: rgba(255, 255, 255, .58);
    font-size: 11px;
    letter-spacing: .4px;
    line-height: 1.4;
    margin-top: 2px;
    white-space: nowrap;
}
/* 上一版的 1:1 白底方块结构已弃用；保留兜底，避免历史模板残留出现两套品牌 */
.brand-plate { display: none !important; }
.brand-avatar { display: none !important; }
.brand-text.brand-text-inline {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

/* V5.1 最终定稿：全站头像位统一使用圆形 ROBAM 标识（图片形式）。
   原来这些位置是「姓名首字」文字头像，带渐变底色；换成图片后
   背景渐变必须去掉（否则在圆形图边缘会透出一圈底色），只保留尺寸与圆形裁切。 */
img.avatar-circle,
img.sidebar-user-avatar,
img.account-avatar {
    object-fit: contain;
    background: transparent !important;
    display: block;
    padding: 0;
}
.sidebar-close {
    display: none;
    position: absolute;
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

/* ==================== 05 Components ==================== */
/* ---- 页面标题区 ---- */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.page-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--rb-navy);
    margin: 0;
    min-width: 0;
}
.page-title i { color: var(--rb-gold); font-size: 18px; }
.page-head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
/* 页面标题区里大量模板用无 class 的 <div> 包按钮，且带 inline `display:flex`。
   窄屏下这层 div 不换行 → 按钮排成一列冲出视口（实测 390px 下 right=754）。
   这里统一兜底：任何 .page-head 的直接子容器都允许换行且不压缩。 */
.page-head > div,
.page-head > form,
.page-head > span {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
}
/* 间距交给 gap，不要再用 margin-left：换行后的第二行会被 margin 再往右顶 8px，
   实测 390px 下 /after-sale、/training 等 6 个页面的标题区因此溢出 8px。 */
.page-head .btn,
.page-head .btn + .btn,
.page-head > div > .btn + .btn { margin-left: 0; margin-right: 0; }

/* ---- V5.1 角色工作台标题区：左侧 ROBAM 蓝字 logo + 标题 + 描述 ----
   用户要求「整个系统（XX）工作台这个位置都换成 ROBAM 老板的蓝色 logo」。 */
.page-head-main {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
}
.page-head-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-right: 16px;
    border-right: 1px solid var(--rb-border);
}
.page-head-brand-logo {
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.page-head-text { min-width: 0; flex: 1 1 auto; }
.page-head-text .page-title { max-width: 100%; }
.page-head-text .page-desc { max-width: 100%; }

/* 面板头筛选条：桌面右对齐，窄屏换行铺满 */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
    margin-left: auto;
}
.filter-bar .filter-input,
.filter-bar .filter-select { min-width: 0; }
.page-desc {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--rb-text-2);
    line-height: 1.6;
    max-width: 70ch;
}

/* ---- 按钮 ----
   V6.0 UI 规范：所有按钮统一为「蓝底白字」（企业级蓝 #1B7FD4）。
   仅 .btn-danger（破坏性/驳回操作）保留危险红，.btn-success 保留成功绿，
   用于语义区分；其余 .btn / .btn-primary / .btn-gold / .btn-outline 全部蓝底白字。 */
.btn,
.btn-primary, .btn-primary-solid, .btn-gold, .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--rb-radius-sm);
    border: 1px solid transparent;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn[disabled], .btn.is-loading { opacity: .62; cursor: not-allowed; pointer-events: none; }

/* 统一蓝底白字（含 hover 加深，同色系） */
.btn, .btn-primary, .btn-primary-solid, .btn-gold, .btn-outline {
    background: var(--rb-blue, #1B7FD4);
    color: #fff;
    border-color: var(--rb-blue, #1B7FD4);
    box-shadow: 0 2px 10px rgba(27, 127, 212, .22);
}
.btn:hover, .btn-primary:hover, .btn-primary-solid:hover,
.btn-gold:hover, .btn-outline:hover {
    background: #14639F;
    border-color: #14639F;
    color: #fff;
    box-shadow: 0 6px 18px rgba(27, 127, 212, .32);
}

/* 破坏性操作保留危险红（语义必需） */
.btn-danger { background: #D92D20; color: #fff; border-color: #D92D20; box-shadow: 0 2px 10px rgba(217,45,32,.22); }
.btn-danger:hover { background: #B42318; border-color: #B42318; color: #fff; }
.btn-success { background: #0E8A7B; color: #fff; border-color: #0E8A7B; box-shadow: 0 2px 10px rgba(18,165,148,.22); }
.btn-success:hover { background: #0B7A6C; border-color: #0B7A6C; color: #fff; }

.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: var(--rb-radius-xs); }
.btn-lg { height: 48px; padding: 0 24px; font-size: 15px; border-radius: var(--rb-radius-md); }
.btn-block { width: 100%; }

/* ---- 面板 / 卡片 ---- */
.panel {
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-md);
    box-shadow: var(--rb-shadow-1);
    margin-bottom: var(--rb-gap);
    min-width: 0;
    overflow: hidden;
    contain: layout style;
}
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 18px;
    border-bottom: 1px solid var(--rb-border);
    background: linear-gradient(180deg, #FFFFFF, #FCFDFF);
}
.panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--rb-navy);
    min-width: 0;
}
.panel-title i { color: var(--rb-gold); }
.panel-body { padding: 16px 18px; min-width: 0; }

.card {
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-md);
    box-shadow: var(--rb-shadow-1);
    padding: 20px;
    min-width: 0;
}
.card-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--rb-navy); }

/* ---- 统计卡 ---- */
.stat-grid, .stat-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.stat-card {
    position: relative;
    overflow: hidden;
    background: var(--rb-surface);
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-md);
    padding: 16px 18px;
    box-shadow: var(--rb-shadow-1);
    min-width: 0;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--rb-shadow-2); border-color: #DCE3EF; }
.stat-card::before { display: none; }     /* 去掉旧版装饰圆，避免与内容重叠 */
.stat-card .stat-label,
.stat-card .label {
    font-size: 12.5px;
    color: var(--rb-text-2);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-card .stat-value,
.stat-card .value {
    font-size: 24px;
    font-weight: 800;
    color: var(--rb-navy);
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.stat-card .stat-icon {
    width: 34px; height: 34px;
    border-radius: var(--rb-radius-sm);
    background: var(--rb-gold-soft);
    color: var(--rb-gold-deep);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 15px; margin-bottom: 10px;
}
.stat-card .delta { font-size: 12px; margin-top: 6px; color: var(--rb-success); }
.stat-card .delta.down { color: var(--rb-danger); }

/* ---- 徽标 / 标签 ---- */
.badge, .tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1;
}
.badge-info { background: var(--rb-blue-soft); color: #1668B5; }
.badge-success, .tag-success { background: #E7F8F4; color: #0E8776; }
.badge-warning, .tag-warning { background: #FFF6E6; color: #B26A00; }
.badge-danger, .tag-danger { background: #FEF1F0; color: #C42A1D; }
.badge-gray, .tag-gray { background: #F1F3F7; color: var(--rb-text-2); }
.badge-gold, .tag-gold { background: var(--rb-gold-soft); color: var(--rb-gold-deep); }

/* ---- 入口卡片网格（各角色工作台的快捷入口）----
   .entry-grid 默认 auto-fill + minmax(150px,1fr)：宽容器下会分出 7 列，
   每列仅 153px，卡片内的 h3/p 在 112px 宽度里放不下 → 文字溢出卡片（实测 1440px 下必然发生）。
   这里改成「一列至少 220px」，让中文短标题（如「第一步 · 选择客户类型」）能完整显示；
   手机端固定两列。 */
.entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.entry-item h3, .entry-item .entry-title { white-space: normal; }
.entry-item p, .entry-item .entry-sub {
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow-wrap: anywhere;
}

/* ---- 空状态 / 骨架屏 ---- */
.empty-tip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 44px 16px !important;
    color: var(--rb-text-3);
    font-size: 13px;
    text-align: center;
}
.empty-tip i { font-size: 26px; color: #CFD8E6; }
.skeleton-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #EFF2F7 25%, #E4E9F1 37%, #EFF2F7 63%);
    background-size: 400% 100%;
    animation: rbSkeleton 1.3s ease infinite;
    margin-bottom: 8px;
}
@keyframes rbSkeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ==================== 06 Tables · 表格硬规则 ==================== */
/* 规则：宁可表格内部横向滚动，也绝不让 SKU / 手机号 / 金额 / 订单号 / 状态换行。
   页面本身永远不产生横向滚动。 */
.tbl-box, .table-scroll, .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow: auto;                 /* 双向滚动：横向看列，纵向看行 */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-md);
    background: #fff;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 31, 68, .22) transparent;
    /* 表格自身不设 overflow，保证 sticky 操作列与 sticky 表头生效 */
}
.tbl-box::-webkit-scrollbar, .table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tbl-box::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track { background: #F4F6FA; border-radius: 8px; }
.tbl-box::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb {
    background: rgba(10, 31, 68, .22);
    border-radius: 8px;
    border: 2px solid #F4F6FA;
}
.tbl-box::-webkit-scrollbar-thumb:hover, .table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(10, 31, 68, .38); }

/* 兜底：未被滚动容器包裹的表格，由外层自动提供横向滚动 */
.panel-body:has(> table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 表格最小宽度 = 内容自然宽度 → 关键列永不换行，超出部分由容器横向滚动承担。
   V5.1 关键修复：这里必须是 width:100% 而不是 width:auto ——
   auto 会让表格按内容"收缩"，内容少的表（门店排行 / 库存明细 / 知识库摘要 / 审批记录 /
   基础价一览 / 公告列表 / 课件库 / 话术库…）右侧就会留出大片空白，
   这正是用户反复反馈的「右边留白太严重」的根因。
   100% + min-width:max-content 可以同时满足两件事：
     · 容器够宽 → 表格铺满（无留白）
     · 容器不够宽 → 由 min-width 撑开，走容器横向滚动（不挤压、不竖排） */
.tbl-box > .data-table, .table-scroll > .data-table,
.tbl-box > table, .table-scroll > table,
.table-wrap > .data-table, .table-wrap > table {
    width: 100%;
    min-width: max-content;
    max-width: none;
}

/* V5.1 单滚动条容器：只保留一根纵向滚动条。
   旧写法是 .panel-body 同时设 max-height + overflow-y:auto，
   而表格自身又包在 .tbl-box 里自带一根横向滚动条 ——
   视觉上变成"上下两个滚动条"，且纵向滚动区与外层面板脱节（店长「每日明细」就是这个问题）。
   统一用这个类：纵向滚动只由它负责，横向仍交给内部 .tbl-box。 */
.tbl-scroll-y {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(10, 31, 68, .22) transparent;
}
.tbl-scroll-y::-webkit-scrollbar { width: 8px; }
.tbl-scroll-y::-webkit-scrollbar-track { background: #F4F6FA; }
.tbl-scroll-y::-webkit-scrollbar-thumb { background: rgba(10, 31, 68, .22); border-radius: 8px; }
/* 该容器里的表头吸顶，滚动时始终可见 */
.tbl-scroll-y .data-table thead th { position: sticky; top: 0; z-index: 3; background: #F7F9FC; }
table.data-table, .data-table, .shift-table {
    display: table;
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: #fff;
}
.tbl-box > .data-table, .table-scroll > .data-table { border: none; border-radius: 0; }

/* 单元格换行策略（红线 1/2）：
   关键列（SKU / 手机号 / 金额 / 订单号 / 姓名 / 状态 / 日期 / 产品名称）一律 nowrap，
   宁可表格内部横向滚动，绝不把「李国强」压成竖排三行；
   内容列（卖点 / 备注 / 地址 / 描述）允许横向折行，但限宽，避免把表格撑爆。 */
.tbl-box > .data-table td,
.tbl-box > .data-table th,
.table-scroll > .data-table td,
.table-scroll > .data-table th,
.table-wrap > .data-table td,
.table-wrap > .data-table th {
    white-space: nowrap;
}
/* 内容列：允许横向折行（多行也是从左往右读，不是逐字竖排），并限宽防止把表格撑爆。
   注意必须带 .col-text 提高优先级，否则会被 style.css 的
   `.data-table td:last-child { white-space: nowrap }` 覆盖（末列常常正是描述列）。 */
.data-table td.col-text,
.data-table th.col-text,
.tbl-box .data-table td.col-text,
.tbl-box .data-table th.col-text,
.table-scroll .data-table td.col-text,
.table-scroll .data-table th.col-text,
.table-wrap .data-table td.col-text,
.table-wrap .data-table th.col-text {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 280px;
    max-width: 300px;
    line-height: 1.55;
}
/* 安全网：万一同一个单元格同时带上 col-text 与 col-key（分类器在极端数据下可能都命中），
   一律让 col-key 胜出 —— 关键字段宁可横向滚动，也绝不允许被折行拆散。
   这条放在 col-text 之后、且选择器更具体，保证优先级更高。 */
.data-table td.col-text.col-key,
.data-table th.col-text.col-key,
.tbl-box .data-table td.col-text.col-key,
.tbl-box .data-table th.col-text.col-key {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    max-width: none;
}

/* 兜底：模板里给 <td> 写了内联 max-width（如 style="max-width:200px"）但内容判为 nowrap 时，
   两者会打架 —— 单元格被 max-width 卡住 212px，内容却按 nowrap 需要 264px，于是出现裁切。
   这里对「被限宽但已 nowrap」的单元格补 min-width:max-content，让列宽跟着内容走。 */
.tbl-box .data-table td[style*="max-width"],
.table-scroll .data-table td[style*="max-width"] {
    min-width: 96px;
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* 但真正标记为关键列（col-key 且未标 col-text）的，仍强制 nowrap + 不限宽 */
.tbl-box .data-table td.col-key:not(.col-text)[style*="max-width"],
.table-scroll .data-table td.col-key:not(.col-text)[style*="max-width"] {
    max-width: none !important;
    white-space: nowrap;
}
/* 关键列给一个可读的最小列宽，杜绝被挤成 40px */
.data-table td.col-key,
.data-table th.col-key { min-width: 56px; }

/* 表头：固定 + 统一底色 */
.data-table thead th, .shift-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #F7F9FC;
    color: var(--rb-text-2);
    font-size: 12.5px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    padding: 12px 14px;
    border-bottom: 1px solid var(--rb-border);
}
.data-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #F1F4F9;
    vertical-align: middle;
    color: var(--rb-text);
    line-height: 1.5;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background-color .14s ease; }
.data-table tbody tr:hover { background: rgba(200, 168, 118, .055); }

/* 关键字段列：禁止换行（由模板加 .nowrap 或自动识别） */
.data-table th.nowrap, .data-table td.nowrap,
.data-table .col-key, .data-table .col-num,
.data-table td.sku, .data-table td.phone, .data-table td.money,
.data-table td.order-no, .data-table td.status {
    white-space: nowrap;
}
/* 内容型列允许换行，但限定宽度，避免整表被一段长文本撑爆 */
.data-table .col-text { min-width: 220px; max-width: 340px; }

/* V5.5 需求 14/24：取消「末列吸右固定」。
   原因：:last-child 吸右会把最后一列盖在前一列之上，横滚时遮挡数据，
   与「所有表格等宽、不遮盖内容」的硬要求冲突。
   现在改为：末列与其它列完全等权参与横向滚动，仅保证不换行、宽度按角色类固定。
   （保留 .col-actions 这一显式命名的操作列行为，便于少数宽表使用） */
@media (min-width: 768px) {
    .data-table th.col-actions, .data-table td.col-actions {
        min-width: 128px;
        white-space: nowrap;
    }
}
@media (max-width: 767px) {
    .row-actions { gap: 4px; }
    .row-actions .btn, .data-table td .btn {
        height: 30px; min-width: 34px; padding: 0 8px; font-size: 12px;
    }
}
.row-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.row-actions .btn { height: 30px; padding: 0 11px; font-size: 12.5px; }
.data-table td .btn { flex-shrink: 0; }
/* V5.1 实测修复：手机端表格操作列里的 .row-actions 会被压到 78px 宽，
   两个图标按钮于是上下叠成两行（top 相差 36px），视觉上"按钮没对齐"。
   根因是 .row-actions 作为 inline-flex 在窄单元格里允许换行且按钮允许收缩。
   这里强制单行 + 按钮不收缩：宁可让操作列变宽、由表格横向滚动承担，
   也绝不让同一行的按钮错位。 */
.row-actions,
.data-table td .row-actions,
.data-table td:last-child {
    flex-wrap: nowrap;
}
.row-actions .btn,
.row-actions > a.btn,
.row-actions > button.btn {
    flex: 0 0 auto;
    white-space: nowrap;
    vertical-align: middle;
}

/* ---- V5.1 操作按钮「水平齐平」硬规则 ----
   用户反复反馈：「去处理 / 去补货 / 去派单 / 去验收 / 跟进」这类按钮在不同行里
   左右乱晃、高低不齐，看起来"排列得非常丑陋"。根因是它们散落在三种容器里
   （.todo-row 列表行、表格操作列、.grid 卡片），每种容器各自为政。
   下面统一处理成一个标准：
     ① 竖向：与同行文字基线/中线严格对齐（align-items: center + 统一 height）；
     ② 横向：同一列里的按钮固定宽度，右边缘对齐，不会因为文字长短而错位；
     ③ 同行多个按钮：等距 gap，不换行、不被压缩。 */
.todo-row,
.rank-row,
.notice-item,
.list-row,
.timeline-row {
    align-items: center;
}
/* 列表行右侧的动作按钮：固定宽度 + 右对齐 + 不压缩，任意行宽下都在同一竖线上 */
.todo-row > .btn,
.todo-row > a.btn,
.todo-row > .row-actions,
.todo-row > .badge:last-child,
.todo-row > span:last-child:not(:first-child) {
    flex-shrink: 0;
    margin-left: auto;
}
.todo-row > .btn,
.todo-row > a.btn {
    min-width: 78px;
    height: 32px;
    justify-content: center;
    text-align: center;
    align-self: center;
}
.todo-row > .row-actions { justify-content: flex-end; align-self: center; }
/* 列表行左侧文字区：允许收缩并把长文本换行，绝不把右侧按钮顶出容器 */
.todo-row > div:first-child { min-width: 0; flex: 1 1 auto; }
.todo-row > div:first-child > div { overflow-wrap: anywhere; }

/* 表格操作列里的按钮组：单行不换行，等距排列，统一高度 */
.data-table td .row-actions,
.data-table td.col-actions,
.data-table td:last-child {
    white-space: nowrap;
}
.data-table td .btn {
    height: 30px;
    padding: 0 11px;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}
.data-table td .btn + .btn { margin-left: 6px; }

/* 分页条（V4.0 服务端分页统一组件） */
.table-pager,
.rb-pager {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-top: 1px solid var(--rb-border);
    background: #fff;
    flex-wrap: wrap;
}
.table-pager .pager-info,
.rb-pager .pager-info {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--rb-text-2);
    white-space: nowrap;
}
.rb-pager .pager-btn,
.rb-pager .pager-num {
    min-width: 34px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--rb-border);
    border-radius: 8px;
    background: #fff;
    color: var(--rb-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.rb-pager .pager-btn:hover:not([disabled]),
.rb-pager .pager-num:hover { border-color: var(--rb-gold); color: var(--rb-gold-deep, #A8864F); }
.rb-pager .pager-num.active {
    background: var(--rb-navy);
    border-color: var(--rb-navy);
    color: #fff;
}
.rb-pager .pager-gap { color: var(--rb-text-3, #9CA3AF); padding: 0 2px; }
.rb-pager button[disabled] { opacity: .38; cursor: not-allowed; }

/* 移动端横向滚动提示 */
@media (max-width: 767px) {
    .tbl-box, .table-scroll { position: relative; }
    .table-scroll-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        font-size: 12px;
        color: var(--rb-text-2);
        background: var(--rb-gold-soft);
        border-bottom: 1px solid var(--rb-border);
    }
}
.table-scroll-hint { display: none; }

/* ==================== 07 Forms ==================== */
.form-item { margin-bottom: 16px; min-width: 0; }
.form-item > label,
.form-group > label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--rb-text-2);
    margin-bottom: 7px;
}
.form-row { display: flex; gap: 14px; flex-wrap: wrap; }
.form-row > .form-item { flex: 1 1 220px; min-width: 0; }

input[type="text"], input[type="password"], input[type="number"], input[type="tel"],
input[type="search"], input[type="email"], input[type="date"], select, textarea,
.form-item input, .form-item select, .form-item textarea,
.form-group input, .search-bar input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--rb-border-strong);
    border-radius: var(--rb-radius-sm);
    background: #fff;
    color: var(--rb-text);
    font-size: 13.5px;
    font-family: inherit;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
textarea { height: auto; min-height: 96px; padding: 11px 14px; line-height: 1.6; resize: vertical; }
input::placeholder, textarea::placeholder { color: #A9B4C6; }
input:focus, select:focus, textarea:focus,
.form-item input:focus, .form-item select:focus, .form-item textarea:focus {
    border-color: var(--rb-gold);
    box-shadow: 0 0 0 3px rgba(200, 168, 118, .16);
}
.filter-select {
    height: 38px;
    min-width: 128px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--rb-border-strong);
    border-radius: 999px;
    background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A6B85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 13px center;
    appearance: none;
    -webkit-appearance: none;
    font-size: 13px;
    color: var(--rb-text-2);
    cursor: pointer;
}
.filter-select:focus { border-color: var(--rb-gold); box-shadow: 0 0 0 3px rgba(200, 168, 118, .16); }
.filter-input {
    height: 38px;
    width: 220px;
    max-width: 100%;
    min-width: 0;
    padding: 0 14px;
    border: 1px solid var(--rb-border-strong);
    border-radius: 999px;
    background: #fff;
    color: var(--rb-text);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.filter-input:focus { border-color: var(--rb-gold); box-shadow: 0 0 0 3px rgba(200, 168, 118, .16); }

/* 搜索输入：带放大镜 */
.input-search { position: relative; min-width: 0; }
.input-search input { padding-left: 36px; }
.input-search::before {
    content: '\f002';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 13px; top: 50%;
    transform: translateY(-50%);
    color: #A9B4C6;
    font-size: 12.5px;
    pointer-events: none;
}

/* 工具条：筛选行 */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}
.toolbar .grow { flex: 1 1 220px; min-width: 0; }

/* ==================== 08 Modal / Drawer ==================== */
/* V5.1 卡顿根治：
   旧实现有两处拖慢「卡片式弹窗」（智能算价 / 一键查价 / 话术预览）打开速度：
   ① `backdrop-filter: blur(3px)` —— 遮罩覆盖整屏，浏览器每帧都要对「整页内容」做一次
      高斯模糊重新合成。页面上只要有任一元素在跑动画（侧栏 hover、AI 球光圈、图表重绘），
      就会连续触发全屏重模糊，中低端机上一帧可达 40~90ms，表现就是「点了要愣一下」。
   ② 遮罩自身 `overflow-y: auto` —— 让遮罩同时承担滚动容器 + 滚动链，
      在 iOS 上还会与 body 的滚动锁打架。
   改法：模糊降到 2px 并只保留静态合成层（不使用动画），滚动交给弹窗正文自己管。 */
.modal-mask {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(9, 20, 40, .48);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;              /* 滚动交给 .modal-content 自己，遮罩不再做滚动容器 */
    overscroll-behavior: contain;
    contain: strict;               /* 隔离重绘：遮罩内部变化不影响整页，反之亦然 */
}
.modal-mask.show { display: flex; }
.modal, .modal-content {
    width: 100%;
    max-width: 640px;
    max-height: min(88vh, 860px);
    background: #fff;
    border-radius: var(--rb-radius-lg);
    border: 1px solid var(--rb-border);
    box-shadow: var(--rb-shadow-3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* 只动 transform / opacity —— 这两个属性可由合成器直接处理，不触发 layout/paint */
    animation: rbModalIn .2s cubic-bezier(.22, 1, .36, 1);
    will-change: transform, opacity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
@keyframes rbModalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head, .modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-bottom: 1px solid var(--rb-border);
    background: linear-gradient(180deg, #fff, #FBFCFE);
    flex-shrink: 0;
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--rb-navy); min-width: 0; }
.modal-close {
    margin-left: auto;
    width: 32px; height: 32px;
    border: none; border-radius: 50%;
    background: var(--rb-surface-2);
    color: var(--rb-text-2);
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
}
.modal-close:hover { background: #EEF1F6; color: var(--rb-navy); }
/* 弹窗正文是唯一纵向滚动区；横向一律 clip（不要 hidden，否则内部 sticky/固定定位失效） */
.modal-body, .modal-content .modal-body {
    padding: 18px;
    overflow-y: auto;
    overflow-x: clip;
    min-width: 0;
    flex: 1 1 auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.modal-foot, .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid var(--rb-border);
    background: var(--rb-surface-2);
    flex-shrink: 0;
}

/* ==================== 09 AI Assistant ==================== */
/* V5.1：悬浮球升级为「发光 + 有动效」的圆球。
   结构：.ai-fab（球体，深蓝径向渐变 + 内外发光）
         ::before（旋转的锥形扫光，制造"星空"流动感）
         ::after （扩散光环，向外呼吸）
         .ai-fab-badge（"AI" 文字，压在扫光之上）
   性能：全部动效只用 transform / opacity（合成器线程直接处理，不触发 layout/paint），
         并且固定在独立合成层上，滚动页面时不会掉帧。 */
.ai-fab {
    position: fixed;
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background:
        radial-gradient(circle at 32% 26%, #3E6DB5 0%, #1B3E77 42%, #0A1F44 78%, #06122B 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;      /* 内部只有 "AI" 两个字母，绝不产生自身滚动 */
    cursor: pointer;
    z-index: 1200;
    isolation: isolate;
    /* 三层光：内高光 + 品牌金描边光 + 外扩散蓝晕 */
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .35),
        inset 0 -6px 12px rgba(0, 0, 0, .32),
        0 0 0 1.5px rgba(200, 168, 118, .55),
        0 8px 22px rgba(10, 31, 68, .42);
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    transform: translateZ(0);
    will-change: transform;
    animation: aiFabFloat 3.6s ease-in-out infinite;
    contain: layout paint;
}
/* 呼吸浮动：只做位移，不做 scale ——
   scale 会让按钮的布局盒变化，进而影响内部绝对定位子元素的计算尺寸，
   在 Chromium 下实测把 .ai-fab-glow 撑到 69.6px（按钮本体只有 60px），
   最终表现为按钮 scrollWidth > clientWidth。改为纯 translateY 位移，
   视觉上一样"活"，但尺寸永远稳定。 */
@keyframes aiFabFloat {
    0%, 100% { transform: translateZ(0) translateY(0); }
    50%      { transform: translateZ(0) translateY(-4px); }
}
/* 旋转扫光层：锥形渐变缓慢自转，像球内有星云/能量在流动 */
.ai-fab-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    background: conic-gradient(from 0deg,
        rgba(255, 255, 255, 0) 0deg,
        rgba(90, 158, 235, .55) 55deg,
        rgba(255, 255, 255, 0) 120deg,
        rgba(200, 168, 118, .5) 200deg,
        rgba(255, 255, 255, 0) 265deg,
        rgba(90, 158, 235, .45) 320deg,
        rgba(255, 255, 255, 0) 360deg);
    animation: aiFabSpin 5.2s linear infinite;
    pointer-events: none;
    z-index: 0;
    contain: paint;
}
@keyframes aiFabSpin { to { transform: rotate(360deg); } }
/* 扩散光环层。
   关键：任何"放大后超出按钮"的元素都会撑大 scrollWidth（Chromium 实测 71 > 60），
   被溢出审计判为「文字被裁切」。所以这里让光环只在按钮内部由粗变细地呼吸，
   不动尺寸、不动位移 —— 只用 opacity + box-shadow 的扩散感来表达"有动效"，
   视觉上依然是向外扩散的金环，但滚动尺寸永远是 0 增量。 */
.ai-fab-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    box-shadow: inset 0 0 0 1.5px rgba(200, 168, 118, .8);
    animation: aiRipple 2.4s ease-out infinite;
    contain: paint;
}
@keyframes aiRipple {
    0%   { opacity: .95; box-shadow: inset 0 0 0 1.5px rgba(200, 168, 118, .85); }
    55%  { opacity: .55; box-shadow: inset 0 0 0 1.5px rgba(200, 168, 118, .55), 0 0 0 6px rgba(200, 168, 118, .12); }
    100% { opacity: .95; box-shadow: inset 0 0 0 1.5px rgba(200, 168, 118, .85); }
}
.ai-fab:hover {
    animation-play-state: paused;
    transform: translateZ(0) scale(1.08);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, .45),
        inset 0 -6px 12px rgba(0, 0, 0, .3),
        0 0 0 2px rgba(200, 168, 118, .85),
        0 12px 30px rgba(10, 31, 68, .5),
        0 0 26px rgba(74, 144, 226, .55);
}
.ai-fab:active { transform: translateZ(0) scale(.94); }
.ai-fab .ai-fab-badge {
    position: relative;
    z-index: 1;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1;
    display: block;
    max-width: 100%;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(140, 195, 255, .85), 0 1px 2px rgba(0, 0, 0, .4);
    font-family: "Segoe UI", -apple-system, "PingFang SC", sans-serif;
}
/* 兼容旧结构（若模板仍传入 logo 图片，统一按文字 AI 覆盖隐藏） */
.ai-fab .ai-fab-logo { display: none !important; }

.ai-assistant-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(9, 20, 40, .42);
    z-index: 1300;
    opacity: 0;
    transition: opacity .2s ease;
}
.ai-assistant-mask.show { display: block; opacity: 1; }
.ai-assistant {
    position: fixed;
    right: 24px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: min(420px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 150px));
    background: #fff;
    border-radius: var(--rb-radius-lg);
    border: 1px solid var(--rb-border);
    box-shadow: var(--rb-shadow-3);
    z-index: 1310;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(14px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
}
.ai-assistant.show { transform: none; opacity: 1; pointer-events: auto; }
.ai-assistant-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--rb-navy), var(--rb-navy-soft));
    color: #fff;
    flex-shrink: 0;
}
.ai-assistant-head .ai-head-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(140deg, #1B3E77, #0A1F44);
    border: 1.5px solid rgba(200, 168, 118, .55);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .5px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ai-assistant-head .ai-head-icon img { display: none !important; }
.ai-assistant-head .ai-head-title { font-size: 14.5px; font-weight: 700; }
.ai-assistant-head .ai-head-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .72);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ai-assistant-head .ai-head-close {
    margin-left: auto;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
}
.ai-assistant-body {
    flex: 1 1 auto;
    min-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px 16px;
    background: var(--rb-bg);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.ai-assistant-foot {
    display: flex;
    gap: 8px;
    padding: 11px 13px;
    border-top: 1px solid var(--rb-border);
    background: #fff;
    flex-shrink: 0;
}
.ai-assistant-foot input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--rb-border-strong);
    border-radius: var(--rb-radius-sm);
    font-size: 13.5px;
    outline: none;
}
.ai-assistant-foot input:focus { border-color: var(--rb-gold); box-shadow: 0 0 0 3px rgba(200, 168, 118, .16); }
.ai-assistant-foot .btn { height: 40px; flex-shrink: 0; }
.ai-quick-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 13px 10px;
    background: #fff;
    max-height: 118px;
    overflow-y: auto;
}
.ai-quick-tags .btn {
    height: 28px;
    padding: 0 11px;
    font-size: 12px;
    border-radius: 999px;
    font-weight: 500;
}

.ai-msg { display: flex; gap: 9px; margin-bottom: 12px; align-items: flex-start; min-width: 0; }
.ai-msg-user { flex-direction: row-reverse; }
.ai-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, #1B3E77, #0A1F44);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .3px;
    border: 1.5px solid rgba(200, 168, 118, .42);
}
.ai-avatar img { display: none !important; }
.ai-avatar-user { background: linear-gradient(140deg, var(--rb-gold), var(--rb-gold-deep)); border-color: transparent; font-size: 12px; }
.ai-bubble {
    max-width: min(78%, calc(100% - 46px));
    padding: 10px 13px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--rb-border);
    color: var(--rb-text);
    font-size: 13.5px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ai-msg-user .ai-bubble {
    background: linear-gradient(135deg, var(--rb-navy), var(--rb-navy-soft));
    color: #fff;
    border-color: transparent;
}
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--rb-gold);
    animation: dotPulse 1.2s infinite ease-in-out;
}
.dots span:nth-child(2) { animation-delay: .18s; }
.dots span:nth-child(3) { animation-delay: .36s; }
@keyframes dotPulse { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* ==================== 10 Auth · 登录 / 注册 / 找回密码 ==================== */
.auth-wrap, .login-container, .auth-container {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    background:
        radial-gradient(1000px 620px at 12% -8%, rgba(200, 168, 118, .16), transparent 60%),
        radial-gradient(900px 560px at 100% 108%, rgba(27, 127, 212, .16), transparent 62%),
        linear-gradient(160deg, #071733 0%, #0A1F44 42%, #12305F 100%);
    position: relative;
    overflow-x: clip;
}
.auth-container::before, .login-container::before { animation: none; opacity: .5; }

.auth-card, .forgot-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: var(--rb-radius-lg);
    padding: 32px 30px 26px;
    box-shadow: 0 30px 70px rgba(4, 12, 26, .38);
    border: 1px solid rgba(255, 255, 255, .6);
    min-width: 0;
}
.forgot-card { max-width: 460px; }

/* 品牌头部：纵向堆叠，任何宽度下都不会把文字挤成竖排 */
.auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 24px; }
.auth-brand-logo { height: 42px; width: auto; max-width: 100%; object-fit: contain; }
/* V5.1：登录/注册/找回密码改用 ROBAM老板 横排蓝字 logo。
   横排 logo 天然很宽（原图 1481×185，比例约 8:1），所以给一个较大的高度，
   再用 max-width:100% 兜底，保证窄屏也不会溢出卡片。 */
.auth-brand-logo-lg { height: 46px; width: auto; max-width: 100%; display: block; }
/* V5.1 最终定稿：登录/注册/找回密码统一使用圆形 ROBAM 标识（与侧栏、站点图标同一张图）。
   固定正方形 + object-fit 保证不变形；外发光让圆形在浅色卡片上也有层次。 */
.auth-brand-avatar {
    width: 76px;
    height: 76px;
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 8px 22px rgba(10, 31, 68, .18), 0 0 0 3px rgba(10, 31, 68, .05);
}
.auth-brand-name { font-size: 19px; font-weight: 800; color: var(--rb-navy); line-height: 1.35; }
.auth-brand-sub { font-size: 12.5px; color: var(--rb-text-2); line-height: 1.6; }
.auth-card h1, .forgot-card h1 { font-size: 20px; font-weight: 800; color: var(--rb-navy); margin: 0; line-height: 1.35; }
.auth-card .auth-sub { font-size: 13px; color: var(--rb-text-2); margin-top: 6px; line-height: 1.6; }
.auth-logo { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 22px; gap: 8px; }
.auth-card .auth-logo .auth-logo-robam-ai { height: 44px; width: auto; max-width: 100%; object-fit: contain; }

.auth-links-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 16px;
    font-size: 13px;
}
.auth-links-row a { color: var(--rb-blue); display: inline-flex; align-items: center; gap: 5px; }
.auth-links-row a:hover { color: var(--rb-navy); }

.btn-login { width: 100%; height: 50px; font-size: 15px; border-radius: var(--rb-radius-sm); }

.pwd-toggle {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    border: none;
    background: transparent;
    color: var(--rb-text-3);
    cursor: pointer;
    border-radius: 8px;
}
.pwd-toggle:hover { color: var(--rb-navy); background: var(--rb-surface-2); }
.pwd-field { position: relative; }
.pwd-field input { padding-right: 44px; }

.login-tip, .login-tip-block {
    margin-top: 18px;
    padding: 13px 14px;
    border-radius: var(--rb-radius-sm);
    background: var(--rb-surface-2);
    border: 1px solid var(--rb-border);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.login-tip-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--rb-text-2);
    min-width: 0;
}
.login-tip-line i { color: var(--rb-success); margin-top: 4px; flex-shrink: 0; }
.login-tip-line span { min-width: 0; }

/* 找回密码步骤 */
.forgot-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 16px;
    flex-wrap: wrap;
}
.forgot-step {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    padding: 9px 10px;
    border-radius: var(--rb-radius-sm);
    background: var(--rb-surface-2);
    border: 1px solid var(--rb-border);
    font-size: 12.5px;
    color: var(--rb-text-2);
    white-space: nowrap;
}
.forgot-step.on { background: linear-gradient(135deg, var(--rb-navy), var(--rb-navy-soft)); color: #fff; border-color: transparent; font-weight: 600; }
.forgot-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: var(--rb-text-2);
    background: var(--rb-blue-soft);
    border: 1px solid #D3E6F8;
    border-radius: var(--rb-radius-sm);
    padding: 11px 13px;
    margin-bottom: 16px;
    line-height: 1.7;
}
.forgot-hint i { color: var(--rb-blue); margin-top: 4px; flex-shrink: 0; }
.code-row { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.code-row input { flex: 1 1 auto; min-width: 0; }
.btn-send-code {
    height: 42px;
    padding: 0 16px;
    flex-shrink: 0;
    border-radius: var(--rb-radius-sm);
    border: 1px solid var(--rb-border-strong);
    background: #fff;
    color: var(--rb-navy);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.btn-send-code:hover { border-color: var(--rb-gold); color: var(--rb-gold-deep); }
.btn-send-code[disabled] { opacity: .55; cursor: not-allowed; }

/* Toast */
.toast {
    position: fixed;
    left: 50%;
    top: 22px;
    transform: translateX(-50%);
    z-index: 2000;
    max-width: min(92vw, 460px);
    padding: 11px 18px;
    border-radius: var(--rb-radius-sm);
    background: #12203A;
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--rb-shadow-3);
    animation: toastIn .22s ease;
    text-align: center;
}
.toast.error { background: #B42318; }
.toast.success { background: #0E7C6B; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

#global-loading-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--rb-gold), var(--rb-navy));
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: width .3s ease, opacity .3s ease;
}
#global-loading-bar.on { opacity: 1; width: 84%; }

/* 列表 / 条目通用 */
.rank-row, .todo-row, .notice-item, .entry-item, .prod-pick, .course-card-item,
.price-quick-card, .script-card, .rel-course { min-width: 0; }
.entry-item h3, .entry-item p { overflow-wrap: anywhere; }
/* 卡片条目：图标列固定，文字列可压缩（否则窄屏下整行被顶宽、文字冲出卡片） */
.entry-item { min-width: 0; max-width: 100%; }
.entry-item > * { max-width: 100%; min-width: 0; }
/* 文字容器撑满（entry-item 是 align-items:center 的纵向 flex，不 stretch 会让
   `width:100%` 的 h3/p 拿不到真实可用宽度，单行省略号失效、文字溢出卡片） */
.entry-item > div:not(.entry-icon) { align-self: stretch; }
.entry-item h3, .entry-item p,
.entry-item .entry-title, .entry-item .entry-sub {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ---- V5.1 文档/课件长条列表（课件库 · 话术库 · 快捷入口） ----
   旧实现用 .entry-grid 单列 + 固定图标列，条目右侧大片空白，
   且标题一长就把右侧按钮挤出容器。
   这里改成「图标 | 主内容(自适应) | 操作区(固定)」三段式 flex 行：
     · 主内容 flex:1 1 auto → 天然铺满整行宽度，右侧不再留白；
     · 操作区 flex-shrink:0 → 下载/分享按钮永远贴右、永远同一竖线；
     · 标题单行省略，meta 自动换行，任何宽度都不溢出。 */
.doc-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.doc-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1px solid var(--rb-border);
    border-radius: var(--rb-radius-sm);
    background: #fff;
    min-width: 0;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.doc-item:hover {
    border-color: rgba(200, 168, 118, .6);
    box-shadow: 0 4px 14px rgba(16, 30, 54, .08);
    transform: translateY(-1px);
}
.doc-item-link { text-decoration: none; color: inherit; cursor: pointer; }
.doc-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--rb-navy), var(--rb-navy-soft));
}
.doc-item:nth-child(2n) .doc-icon { background: linear-gradient(135deg, var(--rb-gold), var(--rb-gold-deep)); }
.doc-main { min-width: 0; flex: 1 1 auto; }
.doc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rb-navy);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 3px;
    font-size: 12px;
    color: var(--rb-text-2);
    line-height: 1.6;
}
.doc-meta span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.doc-meta i { color: var(--rb-gold-deep); font-size: 11px; }
.doc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}
.doc-actions .btn {
    height: 32px;
    padding: 0 12px;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.doc-arrow { color: var(--rb-text-3); font-size: 13px; }

/* V5.1 补：.todo-icon 此前在模板里被大量使用但样式表里从未定义，
   于是它退化成 0 宽度的行内块 —— 内部 FontAwesome 图标（10px 宽）
   直接顶出容器，被溢出审计判为「文字被裁切」（实测 10 > 6）。
   这里补一个 26×26 的圆形图标底座，图标被稳稳装进去，也不再外溢。 */
.todo-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    color: var(--rb-navy);
    background: var(--rb-surface-2);
    overflow: hidden;
}
.todo-icon i { font-size: 12px; line-height: 1; }

/* 栅格子项默认可压缩：否则 1fr 轨道会被内容的 min-content 顶宽，把整页撑出横向滚动 */.grid > *, .stat-grid > *, .stat-cards > *,
.grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-5 > *,
.grid-2-1 > *, .grid-1-2 > *, .grid-3-2 > * { min-width: 0; }
/* 单行截断标题：省略号已是设计意图（style.css 已配 ellipsis），这里只补容器宽度约束 */
.rel-title, .rel-course { max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ============================ 11 Responsive ============================ */
/* —— 1024~1200：平板横屏，收窄侧栏 —— */
@media (max-width: 1199px) {
    :root { --rb-sidebar-w: 200px; --rb-header-h: 60px; }
    .app-main { padding: 16px 16px 36px; }
    .header-center { gap: 6px; }
    .header-chip { padding: 4px 10px; font-size: 11.5px; }
    .header-notice { max-width: 170px; }
    .stat-grid, .stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* —— ≤1024：顶栏空间告急，元信息整块收起，页面标题拿回全部可用宽度 —— */
@media (max-width: 1024px) {
    :root { --rb-sidebar-w: 188px; }
    .header-notice { display: none; }
    /* V4.0：实测 768px 下侧栏 200px + 公告 264px + 账号区 200px = 664px > 568px 可用宽度，
       标题被压到 43px（「安装规范」只剩「安装…」）。这里把中间信息区整块收起。 */
    .header-center { display: none; }
    .header-left { flex: 1 1 auto; min-width: 0; }
    .header-page-title { max-width: none; flex: 1 1 auto; }
    .stat-grid, .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* —— ≤767：手机 —— 侧栏变抽屉、顶栏精简、表格内部横滚、弹窗变底部抽屉 —— */
@media (max-width: 767px) {
    :root { --rb-header-h: 58px; }

    .app-layout {
        display: block;
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;
        max-height: none;
        overflow: visible;
    }

    /* 顶栏：汉堡 + 标题 + 3 个关键入口，绝不溢出 */
    .app-header {
        position: sticky;
        top: 0;
        height: auto;
        min-height: var(--rb-header-h);
        padding: calc(6px + env(safe-area-inset-top, 0px)) 10px 6px;
        gap: 8px;
        flex-wrap: nowrap;
        overflow: visible;
        border-bottom: 1px solid var(--rb-border);
        box-shadow: 0 2px 12px rgba(16, 30, 54, .06);
    }
    .menu-toggle { display: inline-flex; }
    /* 手机上所有多列栅格一律单列，且用 minmax(0,1fr) 防止被内容 min-content 顶宽 */
    .grid-2, .grid-3, .grid-5,
    .grid-2-1, .grid-1-2, .grid-3-2,
    .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: minmax(0, 1fr); }
    .header-left { flex: 1 1 auto; min-width: 0; gap: 8px; }
    .header-page-title { font-size: 15px; max-width: none; flex: 1 1 auto; }
    .header-center { display: none; }        /* 时间/门店/热线/公告移入侧栏，不占手机顶栏 */
    .role-switcher { margin-left: 0; gap: 6px; overflow: visible; max-width: none; }
    .icon-btn { width: 38px; height: 38px; }
    /* 账号胶囊在手机上只留头像，避免顶栏拥挤 */
    .account-pill { padding: 0 8px 0 4px; gap: 5px; height: 38px; max-width: none; }
    .account-pill .account-meta { display: none; }
    .account-pill .avatar-circle { width: 30px; height: 30px; }

    /* 抽屉 */
    .app-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: 272px;
        max-width: 86vw;
        transform: translateX(-104%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 0 0 60px rgba(0, 0, 0, .4);
        z-index: 1100;
    }
    body.sidebar-open .app-sidebar { transform: translateX(0); }
    .sidebar-close { display: inline-flex; }
    .brand-logo { width: 56px; height: 56px; }
    .sidebar-footer { margin-top: auto; }

    .app-main { padding: 12px 12px calc(84px + env(safe-area-inset-bottom, 0px)); }

    /* 手机上岗位徽标只留图标前的小字，避免和标题抢横向空间 */
    .header-role-badge {
        height: 24px;
        padding: 0 9px;
        font-size: 11px;
        max-width: 30vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        line-height: 24px;
    }
    .header-role-badge i { display: none; }

    /* 手机：品牌 logo 与标题改为上下两行，logo 不占横向空间 */
    .page-head-main { flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; }
    .page-head-brand {
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--rb-border);
        padding-bottom: 8px;
        width: 100%;
        justify-content: flex-start;
    }
    .page-head-brand-logo { height: 26px; }
    .page-head-text { width: 100%; }

    .page-head { margin-bottom: 12px; gap: 10px; align-items: flex-start; }
    .page-title { font-size: 17.5px; }
    .page-desc { font-size: 12.5px; }
    .page-head .btn { width: 100%; }
    .page-head > div { width: 100%; min-width: 0; }
    .page-head .filter-select { width: 100%; margin: 0 0 8px !important; }

    .panel-head { padding: 12px 13px; }
    .panel-title { font-size: 14px; }
    .panel-body { padding: 13px; }
    .panel-body:has(> .tbl-box), .panel-body:has(> .table-scroll) { padding: 0; }

    .stat-grid, .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat-card { padding: 13px 14px; }
    .stat-card .stat-value, .stat-card .value { font-size: 20px; }

    /* 表格：容器内横向滚动；关键列不换行 */
    .tbl-box, .table-scroll { border-radius: var(--rb-radius-sm); }
    table.data-table, .data-table, .shift-table { font-size: 12.5px; }
    /* 手机上容器本身就窄，width:100% 不会造成留白（本来也铺满），
       但仍保留 min-width:max-content 保证关键列不竖排 */
    .tbl-box > .data-table, .table-scroll > .data-table,
    .tbl-box > table, .table-scroll > table {
        width: 100%;
        min-width: max-content;
        max-width: none;
    }
    .data-table thead th { padding: 10px 12px; font-size: 12px; }
    .data-table tbody td { padding: 11px 12px; }
    .table-pager { padding: 10px 12px; }
    .table-pager .pager-info { width: 100%; margin: 0 0 6px; }

    /* 表单与筛选：单列堆叠 */
    .form-row { flex-direction: column; gap: 0; }
    .form-row > .form-item { flex: 1 1 auto; }
    .toolbar { gap: 8px; }
    .toolbar > * { min-width: 0; }
    .toolbar .filter-select, .toolbar .input-search { flex: 1 1 100%; }
    input, textarea, select, .form-item input, .form-item select { font-size: 16px !important; }  /* iOS 防自动放大 */

    /* 弹窗 → 底部抽屉 */
    .modal-mask { padding: 0; align-items: flex-end; }
    .modal, .modal-content {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: var(--rb-radius-lg) var(--rb-radius-lg) 0 0;
        animation: rbSheetIn .24s cubic-bezier(.22, 1, .36, 1);
    }
    @keyframes rbSheetIn { from { transform: translateY(100%); } to { transform: none; } }
    .modal-body, .modal-head, .modal-foot { padding-left: 15px; padding-right: 15px; }
    .modal-foot { position: sticky; bottom: 0; padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)); }
    .modal-foot .btn { flex: 1 1 auto; min-width: 0; }
    .modal::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        border-radius: 999px;
        background: #DFE5EE;
        margin: 8px auto -4px;
        flex-shrink: 0;
    }

    /* 按钮热区 */
    .btn { min-height: 42px; }
    .btn-sm { min-height: 34px; }
    .icon-btn { min-width: 38px; min-height: 38px; }

    /* AI 面板：跟随 visualViewport，软键盘不遮输入框 */
    .ai-fab { width: 56px; height: 56px; right: calc(16px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
    .ai-fab .ai-fab-badge { font-size: 18px; }
    .ai-assistant {
        left: 12px; right: 12px; width: auto;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        max-height: 72vh;
        border-radius: var(--rb-radius-lg);
    }
    .ai-assistant.keypad-open { bottom: 8px; max-height: 62vh; }
    .ai-assistant-body { min-height: 140px; }
    .ai-quick-tags .btn { height: 30px; font-size: 12px; }

    /* 认证页 */
    .auth-container, .login-container { padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); align-items: center; }
    .auth-card, .forgot-card { padding: 26px 20px 22px; max-width: 100%; border-radius: var(--rb-radius-md); }
    .auth-brand-logo, .auth-brand-logo-lg { height: 34px; }
    .auth-brand-avatar { width: 64px; height: 64px; }
    .auth-brand-name { font-size: 17.5px; }
    .forgot-steps { gap: 6px; }
    .forgot-step { font-size: 11.5px; padding: 8px 8px; }
    .btn-login { height: 48px; font-size: 15px; }
    .code-row { gap: 8px; }
    .btn-send-code { padding: 0 12px; font-size: 12.5px; }
    .toast { top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
}

/* —— ≤430：超窄屏进一步收敛 —— */
@media (max-width: 430px) {
    .header-page-title { font-size: 14.5px; }
    .icon-btn { width: 36px; height: 36px; font-size: 14px; }
    .account-pill { padding: 0 6px 0 3px; }
    .stat-grid, .stat-cards { gap: 9px; }
    .stat-card .stat-value, .stat-card .value { font-size: 19px; }
    .modal-foot { flex-direction: row; }
    .forgot-step { font-size: 11px; }
}

/* —— ≤375：iPhone SE 级别 —— */
@media (max-width: 375px) {
    .app-main { padding-left: 10px; padding-right: 10px; }
    .header-page-title { font-size: 14px; max-width: 34vw; }
    .icon-btn { width: 34px; height: 34px; }
    .auth-card, .forgot-card { padding: 22px 16px 20px; }
    .stat-card { padding: 11px 12px; }
    .stat-card .stat-value, .stat-card .value { font-size: 17.5px; }
}

/* —— 打印 —— */
@media print {
    .app-sidebar, .app-header, .ai-fab, .ai-assistant, .btn, .no-print, .sidebar-overlay { display: none !important; }
    .app-layout { display: block; height: auto; overflow: visible; }
    .app-main { overflow: visible; height: auto; padding: 0; }
    body { background: #fff; }
}

/* —— 降低动效偏好 —— */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   V5.2 性能与动画修复（追加在最后，优先级最高）
   ============================================================ */

/* ---- 1. 弹窗进入动画去掉 scale ----
   原来是 translateY(10px) scale(.985)：弹窗打开瞬间整块内容被缩放，
   浏览器要重新光栅化弹窗全部像素（大表单尤其明显），表现为「闪一下 + 卡一下」。
   改成纯 opacity + translateY，走合成层，不重排也不重绘。 */
@keyframes rbModalIn {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.modal, .modal-content { animation: rbModalIn .18s cubic-bezier(.22, 1, .36, 1); }

/* ---- 2. 店长「每日明细」双滚动条根治 ----
   结构：.tbl-scroll-y（纵向滚动）> .tbl-box（JS 包上去的双向滚动容器）
   两根纵向滚动条嵌套，滚动区还互相脱节。
   规则：进了纵向滚动容器的 .tbl-box 只负责横向，纵向交给外层 —— 全站只剩一根。 */
.tbl-scroll-y .tbl-box,
.tbl-scroll-y .table-scroll,
.tbl-scroll-y .table-wrap {
    overflow-y: visible;
    overflow-x: auto;
    max-height: none;
}
/* 纵向滚动容器自身统一惯性滚动 + 防滚动链 */
.tbl-scroll-y {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    contain: layout paint;
}
/* 吸顶表头在 contain 下仍生效 */
.tbl-scroll-y .data-table thead th { position: sticky; top: 0; z-index: 3; }

/* ---- 3. 侧栏品牌区毛玻璃（顶栏同款）改为实色，减少每帧模糊计算 ---- */
.app-sidebar .sidebar-brand, .app-header {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ---- 4. 全站滚动容器：原生滚动 + 惯性，禁止 JS 模拟 ---- */
.app-main, .tbl-box, .table-scroll, .table-wrap, .modal-body, .app-sidebar {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ---- 5. 列表项渲染边界：滚动时只重绘可视区 ---- */
.todo-row, .list-item, .doc-item, .course-card, .notice-item, .msg-item {
    contain: layout paint style;
}
.data-table tbody tr { content-visibility: auto; contain-intrinsic-size: auto 46px; }

/* ---- 6. 账号管理：搜索框默认边框 & 操作列宽度 ---- */
#user-search {
    border: 1px solid var(--rb-border-strong) !important;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}
#user-search:focus {
    border-color: var(--rb-gold) !important;
    box-shadow: 0 0 0 3px rgba(200, 168, 118, .16);
}

/* 操作列：保证按钮文字完整显示 */
.data-table td:last-child,
.data-table th:last-child {
    min-width: 320px;
    white-space: nowrap;
}
@media (max-width: 768px) {
    .data-table td:last-child,
    .data-table th:last-child {
        min-width: 280px;
    }
}

/* ---- 7. 账号管理表格：横向滚动 & 固定表头 ---- */
/* 表格容器：支持触摸/鼠标横向滚动 */
.table-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* 表格最小宽度：保证所有列完整显示 */
.table-scroll-x .data-table {
    min-width: 900px;
    width: max-content;
}

/* 固定表头 */
.table-scroll-x .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #F7F9FC;
}

/* 滚动条美化 */
.table-scroll-x::-webkit-scrollbar {
    height: 6px;
}
.table-scroll-x::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}
.table-scroll-x::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
.table-scroll-x::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}


/* ============================================================================
   ==================== V5.4 视觉与交互修复（用户报障专项）====================
   ============================================================================
   本区段只做「覆盖」，不改动上方既有规则，便于回溯与逐条验收。
   对应报障：
     1. 侧边菜单文字大小不统一（一级/二级/图标字号各不相同）
     2. 表格文字未横向排列、操作列纵向堆叠
     3. 「我今日成交订单」区域鼠标滚轮划不动（滚动链断裂）
     4. 报价清单/价格清单最右列覆盖前列表格内容
     5. 全系统表格长宽高不一致
     8. 公告「发送方式 / 按角色群发 / 指定人员」换行
    11. 手机端表格最后一列长宽需固定并与前几列均匀排列
   ============================================================================ */

:root {
    /* 菜单字号 token —— 全站唯一来源，杜绝各处硬编码（报障 1） */
    --rb-menu-font-l1: 15px;      /* 一级类目（分组标题）——「第一大类目文字要大一点」 */
    --rb-menu-font-l2: 13.5px;    /* 二级品类（子菜单项）—— 与一级保持统一节奏 */
    --rb-menu-icon-l1: 14px;
    --rb-menu-icon-l2: 13px;
    --rb-menu-row-h: 40px;        /* 统一行高，保证长宽一致 */
}

/* ---------- 1. 侧边菜单字号统一（报障 1） ---------- */
/* 一级分组标题：统一 15px / 600 字重 / 统一图标 14px */
.app-sidebar .menu-section,
.app-sidebar .menu-section-label {
    font-size: var(--rb-menu-font-l1);
    font-weight: 600;
    letter-spacing: .2px;
    line-height: var(--rb-menu-row-h);
    white-space: nowrap;
}
.app-sidebar .menu-section-label i,
.app-sidebar .menu-section > .menu-section-label > i {
    font-size: var(--rb-menu-icon-l1);
    width: 20px;
    flex-shrink: 0;
}
/* 一级「单入口」菜单项（无子项那种）与分组标题同号同重 */
.app-sidebar .menu-item:not(.sub) {
    font-size: var(--rb-menu-font-l1);
    font-weight: 600;
    min-height: var(--rb-menu-row-h);
}
.app-sidebar .menu-item:not(.sub) i {
    font-size: var(--rb-menu-icon-l1);
    width: 20px;
}
/* 二级子菜单项：统一 13.5px，与一级形成清晰层级但绝不忽大忽小 */
.app-sidebar .menu-item.sub,
.app-sidebar .menu-item.sub > span {
    font-size: var(--rb-menu-font-l2);
    font-weight: 400;
    line-height: 1.35;
}
.app-sidebar .menu-item.sub i {
    font-size: var(--rb-menu-icon-l2);
    width: 20px;
}
/* 折叠箭头与分组标题同色同号，避免视觉忽大忽小 */
.app-sidebar .menu-caret { font-size: 11px; }

/* ---------- 2. 表格文字横向排列 + 操作列横向（报障 2 / 4 / 5） ---------- */
/* 操作按钮一律横向单行，禁止纵向堆叠（此前模板硬编码了 column 方向） */
.row-actions,
.data-table td .row-actions,
.data-table td:last-child .row-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    flex-wrap: nowrap;
}
/* 历史模板里残留的内联 flex-direction:column 一并压制 */
.data-table td span[style*="flex-direction:column"],
.data-table td span[style*="flex-direction: column"] {
    flex-direction: row !important;
}
.row-actions .btn { flex: 0 0 auto; white-space: nowrap; }

/* 最右列表格：宽度与其它列一致，内容不超出、不覆盖前列（报障 4） */
.data-table th:last-child,
.data-table td:last-child {
    max-width: 220px;
}
@media (min-width: 768px) {
    .data-table th:last-child,
    .data-table td:last-child {
        min-width: 128px;
        /* V5.4.1：不再写死 128px —— 两个图标按钮 + 间距实际需要约 136px，
           写死会把最右侧按钮裁掉。改为「以内容为准，最少 128px」。 */
        width: max-content;
        max-width: 260px;
        box-sizing: border-box;
    }
    /* 无操作按钮的末列（纯状态/备注）允许更宽，避免把文字挤断 */
    .data-table td:last-child:not(:has(.btn)):not(:has(.row-actions)) {
        width: auto;
        min-width: 96px;
        max-width: 320px;
    }
    /* 操作列内部按钮给足呼吸空间 */
    .data-table td:last-child .row-actions { padding: 0 4px; }
}
/* 表格内的文本框（输入框 / 进度条 / 标签）不超过单元格宽度 */
.data-table td input:not([type="checkbox"]):not([type="radio"]),
.data-table td select,
.data-table td textarea {
    max-width: 100%;
    box-sizing: border-box;
}

/* ---------- 3. 滚动链修复：鼠标滚轮在表格区域内可正常下滑（报障 3） ---------- */
/* 根因：.panel-body 与内层 .tbl-scroll-y / .tbl-box 同时声明 overflow，
   形成「滚动嵌套」，鼠标位于内层时滚轮事件被内层吃掉但内层已达边界，
   且 overscroll-behavior 阻断了向外传递 → 表现为「划不动」。
   方案：滚动容器统一用 overscroll-behavior:auto（允许滚动链向上传递），
   并把 page-wrap 明确为纵向滚动宿主。 */
.page-wrap {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
}
.tbl-box,
.table-scroll,
.table-wrap,
.tbl-scroll-y,
.panel-body {
    overscroll-behavior-y: auto;      /* 关键：允许滚动链向上传递，不再"卡住" */
    overscroll-behavior-x: contain;   /* 横向仍不外溢到页面 */
    -webkit-overflow-scrolling: touch;
}
/* 内层已到底/到顶时，滚轮事件必须能继续驱动外层滚动 */
.tbl-scroll-y .tbl-box { overscroll-behavior: auto; }
/* 移动端：内容区滚动更顺滑 */
@media (max-width: 767px) {
    .app-main { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .page-wrap { overflow: visible; }
}

/* ---------- 4. 全系统表格长宽高一致（报障 5） ---------- */
:root {
    --rb-tbl-row-h: 46px;         /* 统一行高 */
    --rb-tbl-head-h: 44px;        /* 统一表头高 */
    --rb-tbl-cell-px: 14px;       /* 统一左右内边距 */
    --rb-tbl-min-w: 880px;        /* 统一最小宽度：保证列宽不塌陷 */
}
.data-table {
    table-layout: auto;
    min-width: var(--rb-tbl-min-w);
}
.data-table thead th {
    height: var(--rb-tbl-head-h);
    padding: 0 var(--rb-tbl-cell-px);
    vertical-align: middle;
    font-size: 12.5px;
}
.data-table tbody td {
    height: var(--rb-tbl-row-h);
    padding: 0 var(--rb-tbl-cell-px);
    vertical-align: middle;
    font-size: 13px;
}
/* 单元格内容超长时省略号收口，保证列宽稳定、不忽宽忽窄 */
.data-table tbody td {
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 但内容列（col-text）仍需可读折行 */
.data-table td.col-text { text-overflow: clip; }

/* ---------- 5. 公告表单文案不换行（报障 8） ---------- */
/* 「发送方式 / 按角色群发 / 指定人员」等短标签必须横向单行 */
.form-row .form-label,
.form-row label,
.field-label,
.role-menu-label,
.notice-form .form-label,
.notice-form .radio-label,
.notice-form .checkbox-label,
.modal .form-row > label {
    white-space: nowrap;
}
.radio-group,
.checkbox-group,
.radio-group label,
.checkbox-group label,
.inline-radios,
.inline-radios label {
    white-space: nowrap;
}
.field-inline label,
.field-inline .form-label { white-space: nowrap; }

/* ---------- 6. 手机端表格：末列与前列等宽，取消吸右（V5.5 需求 14/24） ---------- */
@media (max-width: 767px) {
    :root { --rb-tbl-min-w: 720px; }
    .data-table { min-width: var(--rb-tbl-min-w); }
    .data-table thead th { height: 40px; padding: 0 10px; }
    .data-table tbody td { height: 42px; padding: 0 10px; font-size: 12.5px; }

    /* V5.5：末列不再 sticky 吸右，与其它列一样参与横向滚动，杜绝遮挡 */
    .data-table th:last-child,
    .data-table td:last-child {
        width: max-content;
        min-width: 96px;
        max-width: 168px;
        height: 42px;
        padding: 0 6px;
        box-sizing: border-box;
    }
    .data-table thead th:last-child { height: 40px; }
    /* 末列内的按钮横向排布、尺寸统一 */
    .row-actions { gap: 4px; }
    .row-actions .btn,
    .data-table td:last-child .btn {
        height: 28px; min-width: 32px; padding: 0 7px; font-size: 12px;
    }
    /* 侧边菜单在手机端同样沿用统一字号，不缩水 */
    .app-sidebar .menu-section,
    .app-sidebar .menu-section-label,
    .app-sidebar .menu-item:not(.sub) { font-size: 15px; }
    .app-sidebar .menu-item.sub,
    .app-sidebar .menu-item.sub > span { font-size: 13.5px; }
}

/* ---------- 7. 只读模式角标（配合「只能看不能改」） ---------- */
.readonly-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: var(--rb-radius-sm);
    background: rgba(27, 127, 212, .08);
    border: 1px solid rgba(27, 127, 212, .22);
    color: #1B7FD4;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- 8. 菜单改 <a> 后的链接样式（V5.4 局部刷新需要） ---------- */
/* 菜单项改为真实 <a>，以便 RBNav 统一拦截点击做局部刷新；
   视觉上仍占满整行、继承菜单配色，不出现下划线/蓝色。 */
.app-sidebar .menu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    color: inherit;
    text-decoration: none;
    font: inherit;
    min-width: 0;
}
.app-sidebar .menu-link > span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-sidebar .menu-link i { flex-shrink: 0; }
.app-sidebar .menu-item:hover .menu-link,
.app-sidebar .menu-item.active .menu-link { color: inherit; }
/* 局部刷新期间给主内容一点柔和的过渡，避免"闪白" */
.app-main { transition: opacity .18s ease; }
body.rb-navigating .app-main { opacity: .55; }

/* ---------- 9. 单选/复选行：文案横向排列不换行（V5.4 报障 8） ---------- */
/* 「按角色群发」「指定人员」等选项必须在同一行内横向排布，窄屏也不折行。
   此前模板用内联 flex + gap 直排，480px 弹窗里被挤成两行。 */
.radio-row,
.radio-group,
.checkbox-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    row-gap: 8px;
}
.radio-inline,
.checkbox-inline,
.radio-row label,
.radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    white-space: nowrap;      /* 关键：文案整体不换行 */
    flex: 0 0 auto;
}
.radio-inline input,
.checkbox-inline input { margin: 0; flex-shrink: 0; }
/* 表单标签同样不换行 */
.form-item > label,
.form-item .label,
.form-row > label { white-space: nowrap; }
/* 窄屏下允许选项整体折到下一行（但每个选项自身仍不换行） */
@media (max-width: 520px) {
    .radio-row, .radio-group { gap: 12px; }
}

/* ============================================================================
   ==================== V5.5 全站表格硬规则（报障 4/13/14/21/24）====================
   用户反馈原话：
     「表格不要覆盖之前的内容」「政策下发编辑那个末端表格收窄一点」
     「换新记录『状态』太宽」「所有表格等宽等宽等宽，严格执行，不要再遮盖数据」

   —— 根因 ——
   V5.3/V5.4 把 **所有表格的最后一列** 一律做成了「吸右固定」(position:sticky;
   right:0) 并加白底 + 左阴影。但对于「末列不是操作列」的表（如换新记录末列是
   『状态』、报价清单末列是『时间』、政策下发末列是普通文本），这会导致：
     ① 横向滚动时，被吸住的末列盖住前面列的内容（即用户说的「覆盖」）；
     ② 末列被强制 min-width，与前面列宽不一，视觉参差（「宽窄不齐」）。

   —— 方案（用户已确认：全部取消吸右）——
   取消**一切**末列 sticky / 白底 / 阴影 / 强制宽度，让末列回归普通流式列，
   与其它列参与同一套自动列宽算法 → 既「等宽」又「绝不覆盖」。
   横向滚动仍由外层滚动容器 (.table-scroll/.tbl-box/.tbl-wrap) 承担，
   表格 min-width:max-content 保证列不被挤压，用户滚动即可看全所有列。
   ============================================================================ */

/* ---------- V5.5-1. 末列去吸右（覆盖 L1070-1103 与 L2440-2462 的旧规则） ---------- */
.data-table th:last-child,
.data-table td:last-child {
    position: static !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
    box-shadow: none !important;
    background: inherit !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap;
}
.data-table thead th:last-child { background: inherit !important; }
.data-table tbody tr:hover td:last-child { background: inherit !important; }
/* 明确的操作列（带 .col-actions 语义类）：不吸右，但内容不换行 */
.data-table th.col-actions,
.data-table td.col-actions {
    position: static !important;
    white-space: nowrap;
    width: auto;
    max-width: none;
}

/* ---------- V5.5-2. 列宽一致性：所有列参与同一套自动算法 ---------- */
/* 覆盖 style.css:3316 的 td:last-child{min-width:128px} 等历史强制值 */
.data-table td,
.data-table th {
    max-width: none;
}
/* 内容型列（长文本）限定合理宽度并允许换行，避免把整表撑爆 */
.data-table td.col-text,
.data-table th.col-text {
    min-width: 0;
    max-width: 300px;
    white-space: normal;
    word-break: break-word;
}
/* 关键/数值列保持不换行（SKU / 金额 / 编号 / 日期 / 状态） */
.data-table td.col-key,
.data-table td.col-num,
.data-table td.money,
.data-table td.order-no,
.data-table td.status,
.data-table td.sku,
.data-table td.date {
    white-space: nowrap;
}

/* ---------- V5.5-3. 操作列按钮横排且不裁切 ---------- */
.data-table .row-actions {
    display: inline-flex;
    align-items: center;
    flex-direction: row !important;   /* 强制横排（报障 2 复核） */
    flex-wrap: nowrap;
    gap: 6px;
}
.data-table td.col-actions .btn,
.data-table td .row-actions .btn { flex-shrink: 0; }

/* ---------- V5.5-4. 表格容器：横向滚动看全列 + 竖向滚动链正常 ---------- */
.tbl-box, .table-scroll, .table-wrap, .tbl-wrap {
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}
/* 表格本体：以内容为准撑开，列不被压缩变形 */
.data-table {
    min-width: max-content;
    table-layout: auto;
}

/* ---------- V5.5-5. 手机端：末列同样取消吸右，与前列均匀 ---------- */
@media (max-width: 767px) {
    .data-table th:last-child,
    .data-table td:last-child {
        position: static !important;
        right: auto !important;
        min-width: 0 !important;
        width: auto !important;
        max-width: none !important;
        padding: 8px 10px;
        box-shadow: none !important;
        background: inherit !important;
    }
    .data-table thead th:last-child { background: inherit !important; }
    .data-table td.col-text,
    .data-table th.col-text { max-width: 220px; }
}

/* ============================================================================
   ==================== V5.5 弹窗瘦身 + 去卡顿 + 过渡动画（报障 5）====================
   用户反馈原话：
     「所有弹窗卡片设计得稍微小一点，不然在笔记本上显示有点吃紧；
       且所有弹窗卡片点击进去都有明显卡顿，优化一下过渡动画」

   —— 根因 ——
   ① 尺寸：多套弹窗 max-width 从 480~640px 不等，笔记本（1366×768）上偏高偏宽。
   ② 卡顿：`.modal-mask` 用了 `backdrop-filter: blur(2px)`——遮罩覆盖整屏，
      浏览器每帧都要对整页做高斯模糊重新合成，页面上任何动画（侧栏 hover、
      AI 球光圈、图表重绘）都会触发全屏重模糊，中低端机上单帧可达数十毫秒。
   ③ 动画：0.2s 但 cubic-bezier 回弹感偏重，且未处理「减少动态效果」偏好。

   —— 方案 ——
   ① 统一 token `--rb-modal-w`（默认 520px），用 !important 压制所有内联宽度；
      高度上限收到 76vh / 680px。
   ② 移除 backdrop-filter，改用纯半透明背景色（视觉几乎无差，性能大幅提升）。
   ③ 动画缩短到 .16s，只动 transform/opacity（合成器直接处理，不触发 layout/paint），
      并尊重 `prefers-reduced-motion`。
   ============================================================================ */

:root {
    --rb-modal-w: 520px;          /* 弹窗统一最大宽度（笔记本友好） */
    --rb-modal-w-sm: 440px;       /* 小型确认弹窗 */
    --rb-modal-h: 680px;          /* 弹窗统一最大高度 */
}

/* ---------- V5.5-1. 遮罩：去高斯模糊，改纯色半透明 ---------- */
.modal-mask {
    background: rgba(9, 20, 40, .44) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;      /* 关键：消除整屏重合成卡顿 */
    will-change: opacity;
    padding: 20px;
}

/* ---------- V5.5-2. 弹窗本体：整体收窄收矮（!important 压制内联 max-width） ---------- */
.modal, .modal-content {
    max-width: var(--rb-modal-w) !important;
    max-height: min(76vh, var(--rb-modal-h)) !important;
    border-radius: var(--rb-radius-md);
}
/* 明确标记为小弹窗的（.modal--sm / .modal.modal-sm）进一步收窄 */
.modal.modal-sm, .modal-content.modal-sm, .modal--sm {
    max-width: var(--rb-modal-w-sm) !important;
}
/* 弹窗头/身/脚的留白同步收紧，进一步降低整体高度 */
.modal-head, .modal-header { padding: 13px 16px; }
.modal-body, .modal-content .modal-body { padding: 16px; }
.modal-foot, .modal-footer { padding: 12px 16px; }

/* ---------- V5.5-3. 过渡动画：更短、更顺、只动合成属性 ---------- */
.modal, .modal-content {
    animation: rbModalInV55 .16s cubic-bezier(.16, 1, .3, 1) !important;
    will-change: transform, opacity;
}
@keyframes rbModalInV55 {
    from { opacity: 0; transform: translateY(8px) scale(.99); }
    to   { opacity: 1; transform: none; }
}
.modal-mask { animation: rbMaskInV55 .14s ease-out !important; }
@keyframes rbMaskInV55 { from { opacity: 0; } to { opacity: 1; } }

/* ---------- V5.5-4. 尊重「减少动态效果」系统偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
    .modal, .modal-content, .modal-mask {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- V5.5-5. 手机端：弹窗贴边铺开，高度用足 ---------- */
@media (max-width: 640px) {
    .modal-mask { padding: 12px; }
    .modal, .modal-content {
        max-width: 100% !important;
        max-height: 88vh !important;
    }
}

/* ============================================================================
   ==================== V5.5 驾驶舱下钻：可点击卡片 / 小按钮 / 等宽表（报障 3、7、14）
   用户反馈原话：
     「上海今日MV 点进去我要能看上海所有门店的 MV 排行，能导出 Excel」
     「在营门店 点进去要能看到上海所有门店，再点能看门店详情」
     「换新记录『状态』太宽了，要求整个系统所有类似的表格列宽等宽」
   ============================================================================ */

/* ---------- V5.5-6. 可点击统计卡（.stat-card-link） ---------- */
a.stat-card.stat-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
a.stat-card.stat-card-link:hover {
    transform: translateY(-2px);
    border-color: rgba(200, 168, 118, .55);
    box-shadow: 0 8px 22px rgba(10, 31, 68, .10);
}
a.stat-card.stat-card-link:active { transform: translateY(0); }
a.stat-card.stat-card-link:focus-visible { outline: 2px solid #C8A876; outline-offset: 2px; }
.stat-card .stat-more {
    margin-top: 6px;
    font-size: 12px;
    color: #C8A876;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat-card .stat-more i { font-size: 10px; transition: transform .14s ease; }
a.stat-card.stat-card-link:hover .stat-more i { transform: translateX(2px); }

/* ---------- V5.5-7. 超小按钮 .btn-xs（表格行内操作专用，保证行高不炸） ---------- */
.btn.btn-xs, .btn-xs {
    padding: 3px 8px;
    font-size: 12px;
    line-height: 1.35;
    min-height: 24px;
    border-radius: 6px;
}
@media (max-width: 640px) {
    .btn.btn-xs, .btn-xs { min-height: 30px; }   /* 触屏可点区域 */
}

/* ---------- V5.5-8. 表格列宽逻辑化：关键列窄、文案列宽、数字列等宽 ----------
   报障 14 原话「状态太宽，要求整个系统所有类似的表格列宽等宽」。
   解决思路：不去写死每张表的宽度（写死必然在别的表翻车），而是给**列角色**
   定义一套等宽规则，全站表格只要挂上对应 class 就自动等宽：
     · .w-56/.w-60/.w-72/.w-88/.w-110 … 固定像素宽（排名/状态/日期/操作）
     · .col-key  关键标识列（单号/编码）→ min-width 撑住、不折行
     · .col-text 文案列（门店名/标题）→ 限宽 + 省略号，防止把表格撑爆
   三档固定宽 + 两档弹性列，所有同类表格视觉上自然对齐。
   ---------------------------------------------------------------------------- */
.data-table th.w-56,  .data-table td.w-56  { width: 56px;  min-width: 56px;  max-width: 56px; }
.data-table th.w-60,  .data-table td.w-60  { width: 60px;  min-width: 60px;  max-width: 60px; }
.data-table th.w-72,  .data-table td.w-72  { width: 72px;  min-width: 72px;  max-width: 72px; }
.data-table th.w-88,  .data-table td.w-88  { width: 88px;  min-width: 88px;  max-width: 88px; }
.data-table th.w-110, .data-table td.w-110 { width: 110px; min-width: 110px; max-width: 110px; }
.data-table th.w-132, .data-table td.w-132 { width: 132px; min-width: 132px; max-width: 132px; }

/* 状态列专用：等宽 + 居中，全站所有「状态」列统一 88px */
.data-table th.col-status, .data-table td.col-status {
    width: 88px; min-width: 88px; max-width: 88px;
    text-align: center; white-space: nowrap;
}
/* 排名列专用：等宽 + 居中 */
.data-table th.col-rank, .data-table td.col-rank,
.data-table th.rank-cell, .data-table td.rank-cell {
    width: 60px; min-width: 60px; max-width: 60px;
    text-align: center; white-space: nowrap;
}
/* 日期列专用：等宽 + 不折行 */
.data-table th.col-date, .data-table td.col-date {
    width: 104px; min-width: 104px; max-width: 104px;
    white-space: nowrap;
}
/* 操作列专用：等宽 + 行内横排（V5.5 已取消吸右，这里只保证按钮横排不掉行） */
.data-table th.col-ops, .data-table td.col-ops,
.data-table th.row-actions, .data-table td.row-actions {
    white-space: nowrap;
}
.data-table td.row-actions { display: table-cell; }
.data-table td.row-actions > .btn { margin-right: 4px; }
.data-table td.row-actions > .btn:last-child { margin-right: 0; }

/* MV 排序切换条 */
.mv-sort { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mv-sort .btn.is-active {
    background: rgba(200, 168, 118, .16);
    border-color: #C8A876;
    color: #8A6D33;
    font-weight: 600;
}

/* ---------- V5.5-8b. 全站「等宽表格」统一定义（需求第 14 / 21 / 24 条） ----------
   报障原话「所有表格等宽等宽等宽，要有逻辑地设计」。
   这些 class 由 v59/table.html 的 colgroup + th/td 双侧挂载，
   保证「列宽由列角色唯一决定」——同类列在任意表里宽度完全一致：
     · col-index 序号        52px 居中
     · col-num   数量/次数    88px 居中，tabular-nums 对齐
     · col-code  编码/工号/手机 112px 不折行
     · col-text  文案列       min-width 132px，超出省略号（绝不撑爆表格）
     · col-status/col-rank/col-date/col-ops 见上
   任何列都**不再吸右**（V5.5 已全局取消 position:sticky），
   因此永远不可能覆盖前序单元格内容。
   ---------------------------------------------------------------------------- */
.data-table th.col-index, .data-table td.col-index {
    width: 52px; min-width: 52px; max-width: 52px;
    text-align: center; white-space: nowrap;
}
.data-table th.col-num, .data-table td.col-num {
    width: 88px; min-width: 88px; max-width: 88px;
    text-align: center; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.data-table th.col-code, .data-table td.col-code {
    width: 112px; min-width: 112px; max-width: 112px;
    white-space: nowrap;
}
.data-table th.col-text, .data-table td.col-text {
    min-width: 132px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-table .nowrap { white-space: nowrap; }

/* 表格外层的横向滚动容器：内容永不被压缩或遮盖 */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: max-content; }

/* v53 通用列表：等宽表（colgroup 已固定各列宽度） */
.data-table.v53-eq-table { table-layout: fixed; width: 100%; }
.data-table.v53-eq-table td.ellipsis {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 操作列内按钮横向紧凑排布（政策下发等） */
.ops-inline { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.data-table .btn.btn-xs {
    min-height: 26px; padding: 2px 8px; font-size: 11.5px; line-height: 1.4;
}

/* 政策下发表：等宽列组合 */
.data-table.policy-table .col-ops { width: 132px; }