/* ============================================================
上知科技 · 标准界面样式（科技蓝 · 企业后台）
============================================================ */
:root{
/* ---- 腾讯云配色体系（品牌蓝 #006EFF + 白） ---- */
--primary:#006EFF; /* 腾讯云品牌蓝 */
--primary-dark:#0052D9; /* hover 深蓝 */
--primary-darker:#0043B3; /* active 按下更深 */
--primary-light:#E8F1FF; /* 浅蓝：选中底 / KPI 图标底 */
--primary-lighter:#F5F9FF;/* 更浅蓝：hover 底 */
/* ---- 明度层次：底暗 → 侧栏中 → 卡片亮，避免一片白晃眼 ---- */
--bg:#E8ECF2; /* 页面底：加深灰蓝，让白卡片浮起、避免满屏白晃眼 */
--card:#FFFFFF; /* 卡片：最亮层（纯白，靠深底衬托对比） */
--sidebar-bg:#F3F6FA; /* 侧栏：微灰白，明显区分于纯白卡片 */
--topbar-bg:#FFFFFF; /* 顶栏：纯白 */
--text:#1D2129; /* 主文本 */
--muted:#5E6B80; /* 次要文本（加深：原 #86909C 对比度不足，阅读吃力） */
--border:#E5E6EB; /* 边框 */
--border-light:#F0F2F5; /* 更浅分割线 */
--sidebar-text:#4E5969; /* 侧栏文字 */
--sidebar-active:#006EFF; /* 侧栏选中 */
--danger:#E54545; /* 腾讯云红 */
--danger-dark:#C9353F; /* 红色 hover / 按下 */
--success:#0ABF5B; /* 腾讯云绿 */
--warning:#FF9D00; /* 腾讯云橙 */
/* ---- 交互态专用 ---- */
--hover-bg:#F2F5F9; /* 中性 hover 底 */
--active-bg:#E6EBF3; /* 中性 active 按下底 */
--hover-blue:#F0F6FF; /* 蓝色系 hover 底 */
--active-blue:#DCE9FF; /* 蓝色系 active 底 */
/* ---- 缓动曲线（丝滑） ---- */
--ease:cubic-bezier(.4,0,.2,1);
--t-fast:.15s;
--t-base:.22s;
--shadow:0 1px 3px rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.04);
--shadow-hover:0 4px 14px rgba(0,110,255,.18),0 2px 4px rgba(0,0,0,.05);
--shadow-active:0 1px 2px rgba(0,110,255,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
/* ⚠ 为纵向滚动条**预留位置**（scrollbar-gutter:stable）：
页面内容一变高（例如表格里多敲一行换行让某行变高），纵向滚动条就会出现/消失，
内容区宽度随之±15px —— 看起来就是「整个页面的左右布局在跳」。
预留后宽度恒定，滚动条出现也不会挤动布局。 */
html{scrollbar-gutter:stable}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none}
/* ---------- 全局交互基线：统一焦点环 + 尊重「减少动效」偏好 ---------- */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
/* ---------- 登录页（左图右表单） ---------- */
.login-body{min-height:100vh;min-height:100dvh;display:flex;margin:0;padding:0;overflow-x:hidden;overflow-y:auto;background:#0052D9}
.login-hero{
flex:1.1;position:relative;overflow:hidden;
background:linear-gradient(135deg,#0052D9 0%,#006EFF 50%,#4DA3FF 100%);
display:flex;align-items:flex-start;color:#fff;
}
.login-hero .hero-svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.hero-overlay{position:relative;z-index:2;padding:56px 64px 48px;width:100%;height:100%;
display:flex;flex-direction:column;justify-content:space-between;
background:linear-gradient(180deg,rgba(10,22,56,0.0) 0%,rgba(10,22,56,0.55) 100%);}
.hero-brand{display:flex;align-items:center}
.hero-logo{height:60px;width:auto;display:block;filter:drop-shadow(0 4px 16px rgba(0,30,94,0.45))}
.hero-slogan{margin-top:auto;margin-bottom:56px;max-width:520px}
.hero-slogan h2{font-size:34px;font-weight:700;line-height:1.45;color:#fff;
text-shadow:0 2px 12px rgba(0,0,0,0.3);margin-bottom:14px;letter-spacing:1px}
.hero-slogan p{font-size:15px;color:#D6E4FF;letter-spacing:1px}
.hero-features{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.hero-features .feat{display:flex;align-items:center;gap:10px;font-size:13px;color:#E8F1FF}
.hero-features .dot{width:6px;height:6px;border-radius:50%;background:#FFFFFF;
box-shadow:0 0 8px rgba(95,161,255,0.8)}
.login-pane{
width:480px;flex-shrink:0;background:#fff;display:flex;flex-direction:column;
box-shadow:-10px 0 40px rgba(0,0,0,0.25);position:relative;z-index:3;
}
.login-card{width:100%;max-width:400px;margin:auto;padding:48px 36px 24px}
.login-logo{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.login-logo-img{height:48px;width:auto}
.login-card h1{font-size:22px;color:var(--text);font-weight:600}
.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:28px}
.login-footer{padding:18px;text-align:center;font-size:12px;color:#86909C;border-top:1px solid #F2F3F5}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input,.field select{width:100%;height:42px;border:1px solid var(--border);border-radius:8px;padding:0 12px;
font-size:14px;color:var(--text);background:#fff;outline:none;transition:border .15s}
.field input:focus,.field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.login-card .btn-primary{width:100%;height:44px;background:linear-gradient(135deg,#006EFF,#4DA3FF);color:#fff;border-radius:8px;
font-size:15px;font-weight:600;letter-spacing:1px;transition:opacity .15s;margin-top:6px}
.login-card .btn-primary:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,110,255,0.35)}
.login-tip{margin-top:18px;font-size:12px;color:var(--muted);text-align:center}
.acct-type{font-size:12px;margin-top:6px;min-height:16px;line-height:16px;color:#86909C}
.acct-type.ok{color:#0ABF5B}
.acct-type.ok b{color:#0ABF5B}
.acct-type.err{color:#E54545}
/* ---------- 后台侧栏 logo（替换原 .mark 占位） ---------- */
.login-card .mark{display:none} /* 旧占位隐藏 */
/* ---------- 布局 ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:230px;background:var(--sidebar-bg);flex-shrink:0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
border-right:1px solid var(--border)}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:#C9CDD4;border-radius:3px}
.side-logo{display:flex;align-items:center;justify-content:center;height:66px;padding:0 18px;border-bottom:1px solid var(--border);background:#FAFBFC}
.side-logo .logo-img{height:48px;width:auto;max-width:100%;display:block;transition:transform var(--t-base) var(--ease)}
.side-logo .logo-img:hover{transform:scale(1.04)}
.nav{flex:1;padding:10px 0 20px}
.nav-group-title{padding:14px 20px 6px;font-size:11px;color:var(--muted);letter-spacing:1px}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 20px;color:var(--sidebar-text);cursor:pointer;
font-size:14px;position:relative;border-left:3px solid transparent;
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.nav-item:hover{background:var(--hover-bg);color:var(--text)}
.nav-item:active{background:var(--active-bg)}
.nav-item.active{background:var(--primary-light);color:var(--primary);border-left-color:var(--primary);font-weight:500}
.nav-item.active:hover{background:var(--active-blue)}
.nav-item .ico{width:18px;text-align:center;flex-shrink:0;font-size:15px}
.nav-item .arrow{margin-left:auto;font-size:11px;color:var(--muted);transition:transform .2s}
.nav-item.open .arrow{transform:rotate(90deg)}
.nav-item .dot{margin-left:auto;width:8px;height:8px;border-radius:50%;background:var(--warning)}
.subnav{display:none;background:#FAFBFC}
.subnav.show{display:block}
.subnav-item{display:block;padding:9px 20px 9px 48px;color:var(--muted);font-size:13px;cursor:pointer;border-left:3px solid transparent;border-radius:0 6px 6px 0;margin-right:10px;
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.subnav-item:hover{color:var(--primary);background:var(--hover-blue)}
.subnav-item:active{background:var(--active-blue);color:var(--primary-darker)}
.subnav-item.active{color:var(--primary);background:var(--primary-lighter);border-left-color:var(--primary);font-weight:500}
.subnav-item.active:hover{background:var(--active-blue)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{height:60px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;
padding:0 24px;position:sticky;top:0;z-index:10}
.topbar .crumb{font-size:14px;color:var(--muted)}
.topbar .crumb b{color:var(--text);font-weight:600}
.topbar .spacer{flex:1}
.topbar .user{display:flex;align-items:center;gap:10px;cursor:pointer;position:relative;padding:6px 10px;border-radius:10px;
transition:background var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.topbar .user:hover{background:var(--hover-bg)}
.topbar .user:active{background:var(--active-bg);transform:scale(.98)}
.topbar .user .user-caret{font-size:10px;color:var(--muted);transition:transform .18s}
.topbar .user:hover .user-caret{transform:rotate(180deg)}
.topbar .avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#006EFF,#4DA3FF);
color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.topbar .uname{font-size:13px;color:var(--text)}
.topbar .urole{font-size:11px;color:var(--muted)}
/* 右上角用户下拉菜单
交互要点：
1) .user::after 是一条透明「桥」，把 100% 与菜单之间那 8px 间隙纳入 .user 的命中区 ——
鼠标从头像滑向菜单时不会穿过空隙导致 hover 断开（原来菜单会闪一下、点不中）。
2) 只过渡 opacity/transform/visibility，不用 transition:all（all 会连离散属性一起过渡，反而更慢）。
3) 收起状态用 .um-closed 类而不是 inline display:none，便于鼠标移入时复位。 */
.topbar .user::after{content:"";position:absolute;left:0;right:0;top:100%;height:10px}
.user-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:#fff;border:1px solid var(--border);
border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.16);padding:6px;z-index:200;
opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .16s ease,transform .16s ease,visibility .16s}
.topbar .user:hover .user-menu{opacity:1;visibility:visible;transform:translateY(0)}
.user-menu.um-closed{display:none!important}
.user-menu-item{padding:10px 14px;border-radius:8px;font-size:13px;color:var(--text);cursor:pointer;
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.user-menu-item:hover{background:var(--primary-light);color:var(--primary)}
.user-menu-item:active{background:var(--active-blue);color:var(--primary-darker);transform:scale(.98)}
.user-menu-item.danger{color:var(--danger)}
.user-menu-item.danger:hover{background:#FDECEC;color:var(--danger)}
.content{padding:24px;flex:1}
.page{display:none}
.page.show{display:block}
.page-title{font-size:20px;font-weight:700;margin-bottom:6px}
.page-desc{color:var(--muted);font-size:13px;margin-bottom:20px}
/* ---------- 组件 ---------- */
.card{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:20px;margin-bottom:18px;
transition:box-shadow var(--t-base) var(--ease)}
.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.07),0 10px 28px rgba(0,0,0,.055)}
.card-title{font-size:15px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.card-title .right{margin-left:auto;display:flex;gap:8px}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.grid-2{grid-template-columns:minmax(0,1fr)}}
.kpi{background:var(--card);border-radius:12px;box-shadow:var(--shadow);padding:20px;position:relative;overflow:hidden;
transition:box-shadow var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.kpi:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.kpi .label{color:var(--muted);font-size:13px}
.kpi .value{font-size:28px;font-weight:700;margin:8px 0 4px}
.kpi .trend{font-size:12px}
.kpi .trend.up{color:var(--success)}
.kpi .trend.down{color:var(--danger)}
.kpi .ico{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:10px;background:var(--primary-light);
display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden}
.kpi .ico img{width:40px;height:40px;display:block}
.kpi .ico svg{width:40px;height:40px;display:block}
/* 弹窗头部图标（详情/驳回等） */
.modal-head .ico{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}
.modal-head .ico img{width:38px;height:38px;display:block}
/* 通知图标 */
.notify-empty .ico, .notify-empty .ico img{width:56px;height:56px}
/* 导航图标（与 KPI 同源风格）
白底侧栏：直接显示 SVG 原色（腾讯云蓝），不可再 invert 转白，否则隐形。
选中态时图标底色加深为品牌浅蓝，与 .nav-item.active 呼应。 */
.nav-item .ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.nav-item .ico img{width:20px;height:20px;display:block;border-radius:5px}
.nav-item.active .ico img{filter:saturate(1.15)}
.btn{height:36px;padding:0 16px;border-radius:7px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;
cursor:pointer;border:1px solid transparent;user-select:none;white-space:nowrap;
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),
border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),
transform var(--t-fast) var(--ease)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn[disabled],.btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
/* 主按钮：hover 上浮 + 蓝色光晕 → 按下回落 + 阴影收缩 */
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(0,110,255,.2)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-hover)}
.btn-primary:active{background:var(--primary-darker);transform:translateY(0) scale(.98);box-shadow:var(--shadow-active)}
/* 描边按钮 */
.btn-outline{background:#fff;color:var(--primary);border:1px solid #BCD5FF}
.btn-outline:hover{background:var(--hover-blue);border-color:var(--primary);color:var(--primary-dark)}
.btn-outline:active{background:var(--active-blue);border-color:var(--primary-darker);color:var(--primary-darker)}
/* 幽灵按钮 */
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--primary);background:var(--hover-blue)}
.btn-ghost:active{background:var(--active-blue);color:var(--primary-darker)}
/* 危险按钮：原来完全没有 hover，补齐 */
.btn-danger{background:#fff;color:var(--danger);border:1px solid #F9C7C7}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);
transform:translateY(-1px);box-shadow:0 4px 12px rgba(229,69,69,.25)}
.btn-danger:active{background:var(--danger-dark);border-color:var(--danger-dark);
transform:translateY(0) scale(.98);box-shadow:0 1px 2px rgba(229,69,69,.2)}
.btn-sm{height:28px;padding:0 10px;font-size:12px}
.btn-lg{padding:11px 22px;font-size:14px;border-radius:9px}
/* 写信器：三段操作区 */
.mc-actions{padding-top:14px;margin-top:8px;border-top:1px dashed #E6EBF5}
.mc-actions-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mc-actions-sub{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mc-actions-tip{font-size:12px;color:#86909C;line-height:1.6}
.mc-actions-tip .demo{color:#FF8800}
/* 四宫格操作按钮：上传企微草稿箱 / 保存草稿 / 连接企微 / 导出 HTML（等宽等高） */
.mc-btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mc-btn-grid .btn{width:100%;height:44px;padding:0 10px;justify-content:center;font-size:13.5px;border-radius:9px;white-space:nowrap}
/* 企微邮箱连接状态条（展示于按钮下方） */
.mc-wecom-status{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:12px;color:#4E5969;
background:#F7F8FA;border:1px solid #EEF1F6;border-radius:8px;padding:9px 11px;line-height:1.6}
.mc-wecom-status .dot{width:8px;height:8px;border-radius:50%;background:#C9CDD4;flex:0 0 8px}
.mc-wecom-status .who{color:#1D2129;font-weight:600}
.mc-wecom-status .lnk{margin-left:auto;flex:0 0 auto;color:#006EFF;cursor:pointer;font-weight:500;white-space:nowrap}
.mc-wecom-status .lnk:hover{text-decoration:underline}
.mc-wecom-status.on{background:#F1FAF3;border-color:#CFEED8}
.mc-wecom-status.on .dot{background:#00B42A;box-shadow:0 0 0 3px rgba(0,180,42,.14)}
/* 上传按钮：蓝色 chip，明显可点 */
.mc-upl{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:#006EFF;
background:#EAF2FF;border:1px solid #BCD5FF;border-radius:8px;padding:7px 14px;cursor:pointer;white-space:nowrap;
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.mc-upl:hover{background:#DFE9FF;border-color:#7FB1FF;color:#0050CC}
.mc-upl:active{background:var(--active-blue);border-color:var(--primary-darker);color:var(--primary-darker);transform:scale(.97)}
.mc-upl .upl-ico{font-size:14px}
.mc-upl-primary{background:#006EFF;color:#fff;border-color:#006EFF;box-shadow:0 1px 2px rgba(0,110,255,.2)}
.mc-upl-primary:hover{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);box-shadow:var(--shadow-hover)}
.mc-upl-primary:active{background:var(--primary-darker);border-color:var(--primary-darker);transform:scale(.97);box-shadow:var(--shadow-active)}
/* 已上传图片缩略图 */
.mc-thumb{display:inline-block;width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid var(--border);background:#f7f9fd;vertical-align:middle}
.mc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--border);transition:background var(--t-fast) var(--ease)}
th{background:#F1F4F8;color:#4E5969;font-weight:600;white-space:nowrap}
td{color:var(--text)}
tbody tr:hover td{background:var(--hover-blue)}
tbody tr:active td{background:var(--active-blue)}
/* 账号类型权限：矩阵勾选 */
.rp-row{border:1px solid var(--border);border-radius:11px;padding:13px 15px;margin-bottom:12px;background:#fff}
.rp-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.rp-name{font-size:14px;font-weight:700;color:var(--text)}
.rp-meta{font-size:12px;color:var(--muted)}
.rp-ops{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.rp-cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.rp-cell{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid var(--border);
border-radius:8px;background:#FAFBFC;font-size:13px;color:var(--text);cursor:pointer;transition:.14s;user-select:none}
.rp-cell:hover{border-color:#BCD5FF}
.rp-cell.on{background:var(--primary-light);border-color:#BCD5FF;color:var(--primary);font-weight:600}
.rp-cell.lock{opacity:.62;cursor:not-allowed;background:#F7F8FA}
.rp-cell input{width:15px;height:15px;accent-color:var(--primary);cursor:inherit}
/* 站内信：申请审批操作区 */
.nf-acts{display:flex;gap:6px;margin-top:8px}
.nf-acts .btn{height:26px;padding:0 10px;font-size:12px}
.nf-done{font-size:12px;color:#00B96B;font-weight:600}
.notify-item .ic.rename{background:#E8F1FF}
.notify-item .ic.replace{background:#FFF3E0}
.notify-item .ic.ok{background:#E8F8F0}
/* 多选下拉组件（授权范围选择） */
.lib-multi{position:relative;display:inline-block}
.lib-multi-btn{display:inline-flex;align-items:center;gap:6px;min-width:180px;height:36px;padding:0 12px;
border:1px solid var(--border);border-radius:7px;background:#fff;font-size:13px;color:var(--text);cursor:pointer;transition:.15s}
.lib-multi-btn:hover{border-color:#BCD5FF}
.lib-multi-btn.on{border-color:var(--primary);background:var(--primary-light);color:var(--primary);font-weight:600}
.lib-multi-btn i{margin-left:auto;font-style:normal;color:#B8C4D9;font-size:11px}
.lib-multi-btn.on i{color:var(--primary)}
.lib-multi-panel{position:absolute;z-index:60;top:calc(100% + 4px);left:0;min-width:240px;background:#fff;
border:1px solid var(--border);border-radius:9px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px}
.lib-multi-list{max-height:230px;overflow:auto}
.lib-multi-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text);user-select:none}
.lib-multi-opt:hover{background:#F7F8FA}
.lib-multi-opt input{width:15px;height:15px;accent-color:var(--primary);cursor:pointer}
.lib-multi-foot{display:flex;gap:6px;justify-content:flex-end;padding-top:8px;margin-top:6px;border-top:1px solid var(--border)}
/* 还原冲突：Windows 式「确认替换」对比 */
.lib-conflict{margin-top:14px;border:1px solid #FFD08A;background:#FFFBF2;border-radius:10px;padding:13px 15px}
.lib-conflict .cf-title{font-size:13px;font-weight:600;color:#A2600B;margin-bottom:10px}
.lib-conflict .cf-table{width:100%;border-collapse:collapse;font-size:12px}
.lib-conflict .cf-table th{background:transparent;color:#86909C;font-weight:600;padding:5px 8px;border-bottom:1px solid #FFE3B0;text-align:left}
.lib-conflict .cf-table td{padding:6px 8px;border-bottom:1px solid #FFE3B0;color:#1D2129;word-break:break-all}
.lib-conflict .cf-table tr:last-child td{border-bottom:none}
.lib-conflict .cf-table .cf-lb{color:#86909C;white-space:nowrap;width:74px}
.lib-warn{margin-top:12px;padding:10px 12px;background:#FFF7E8;border:1px solid #FFD08A;
border-radius:8px;font-size:12px;color:#A2600B;line-height:1.7}
/* 还原确认：目标位置高亮 */
.lib-restore-target{background:#F7FAFF;border:1px solid #D3E0FF;border-radius:10px;padding:14px 16px}
.lib-restore-target .rt-row{display:flex;align-items:baseline;gap:10px;padding:5px 0}
.lib-restore-target .lb{flex:0 0 92px;font-size:12px;color:#86909C}
.lib-restore-target .vl{flex:1;font-size:14px;color:#1D2129;font-weight:600;word-break:break-all}
.lib-restore-target .vl.hl{color:#006EFF}
.lib-restore-target .vl i{color:#B8C4D9;font-style:normal;margin:0 4px}
/* 产品资料预览 */
.lib-prev-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:#4E5969}
.lib-prev-meta span{background:#F7F8FA;border:1px solid var(--border);border-radius:12px;padding:3px 10px}
.lib-prev-text{background:#F7F8FA;border:1px solid var(--border);border-radius:10px;padding:16px 18px;
font-size:14px;line-height:1.9;color:#1D2129;white-space:pre-wrap;max-height:420px;overflow:auto}
.lib-prev-link{background:#F7F8FA;border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.lib-prev-empty{background:#F7F8FA;border:1px dashed var(--border);border-radius:10px;padding:48px 20px;text-align:center;color:#86909C}
/* 邮件列表过滤标签 */
.filter-tabs{display:flex;gap:6px;margin-bottom:0}
.filter-tabs a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;background:#fff;border:1px solid var(--border);color:var(--muted);font-size:13px;cursor:pointer;text-decoration:none;
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.filter-tabs a:hover{color:var(--primary);border-color:#BCD5FF;background:var(--hover-blue)}
.filter-tabs a:active{background:var(--active-blue);color:var(--primary-darker);border-color:var(--primary);transform:scale(.97)}
.filter-tabs a.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 8px rgba(0,110,255,.22)}
.filter-tabs a.active:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.filter-tabs a.active:active{background:var(--primary-darker);transform:scale(.97)}
.filter-tabs a .num{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:rgba(255,255,255,.25);font-size:11px;font-weight:600}
.filter-tabs a:not(.active) .num{background:var(--primary-light);color:var(--primary)}
.table-wrap{overflow-x:auto}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.search{height:36px;border:1px solid var(--border);border-radius:7px;padding:0 12px;font-size:13px;outline:none;width:220px}
.search:focus{border-color:var(--primary)}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:500}
.badge-blue{background:var(--primary-light);color:var(--primary)}
.badge-green{background:#e6f7ef;color:var(--success)}
.badge-orange{background:#fef3e0;color:var(--warning)}
.badge-red{background:#FDECEC;color:var(--danger)}
.badge-gray{background:#F2F3F5;color:var(--muted)}
.pwd-val{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--text);letter-spacing:1px;cursor:pointer;user-select:all}
.pwd-val[data-show="1"]{color:var(--primary);font-weight:600}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
@media(max-width:900px){.form-grid{grid-template-columns:1fr}}
/* ============================================================
填报类表单（日报 / 周报）：按「内容多少」给尺寸，不搞一刀切
—— 基准 6 列：
· 数字 / 金额 / 日期 / 时间 / 单行文本 / 下拉（span-3，约 1/4 宽）→ 一行四个
· 名字这类短字段也走 1/4，不必占半行
· 多行文本 / 单选 / 多选（full 整行 + 加高） → 内容多、会换行，给足地方
跨列类由 sales.html 的 fieldSize() / admin.html 的 fdPreviewSize() 按字段类型自动分配，
⚠ 不要在具体页面上写死宽度；类型判定改 inferType()（销售端）/ FIELD_TYPES（后台）
============================================================ */
/* ⚠ 基准 12 列（不是 6 列）：1/4 宽才好表达 —— 6 列只能给到 1/3，数字/姓名框都偏大（用户报过） */
/* ⚠ 行距压到 10px：一屏能装下多少行是「能不能不滚动」的关键（2026-09-18） */
.form-grid.rf-grid{ grid-template-columns:repeat(12,1fr); gap:10px 12px; }
.form-grid.rf-grid .span-3{ grid-column:span 3; } /* 1/4 宽：短文本 / 下拉 */
.form-grid.rf-grid .span-2{ grid-column:span 2; } /* 1/6 宽：数字 / 金额 / 日期 / 时间（一行六个） */
/* 多行框 1/2 宽（**两个并排**）：日报有 5 个多行框，各占一整行时合计 800+px，
在 900px 高的可视区里根本填不完（2026-09-18「尽量一屏显示，不用下划」）。
半宽并排后行数直接减半，框本身还给到 100px 高（比原来的 88px 更好写）。 */
.form-grid.rf-grid .span-6{ grid-column:span 6; }
.form-grid.rf-grid textarea{ min-height:92px; }
@media(max-width:1200px){ /* 中屏：1/4 → 1/3，一行三个 */
.form-grid.rf-grid .span-3{ grid-column:span 4; }
}
@media(max-width:900px){
.form-grid.rf-grid{ grid-template-columns:1fr 1fr; }
.form-grid.rf-grid .span-2,
.form-grid.rf-grid .span-3{ grid-column:span 1; }
.form-grid.rf-grid .span-6{ grid-column:span 1; }
}
@media(max-width:700px){
/* ⚠ 必须带 !important：通用的 `.form-grid{grid-template-columns:1fr !important}` 在下方更靠后 */
.form-grid.rf-grid{ grid-template-columns:1fr !important; }
.form-grid.rf-grid .span-2,
.form-grid.rf-grid .span-3,
.form-grid.rf-grid .span-6{ grid-column:1/-1 !important; }
}
.f-item label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.f-item label .req{color:var(--danger);margin-left:2px}
.f-item input,.f-item select,.f-item textarea{width:100%;border:1px solid var(--border);border-radius:7px;
padding:0 12px;font-size:13px;outline:none;background:#fff;transition:border .15s}
.f-item input,.f-item select{height:38px}
.f-item textarea{padding:10px 12px;resize:vertical;min-height:90px;line-height:1.6}
.f-item input:focus,.f-item select:focus,.f-item textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.upload-zone{border:2px dashed #C9CDD4;border-radius:10px;padding:32px;text-align:center;color:var(--muted);
cursor:pointer;background:#FAFBFC;
transition:border-color var(--t-base) var(--ease),background var(--t-base) var(--ease),color var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.upload-zone:hover{border-color:var(--primary);background:var(--primary-lighter);color:var(--primary-dark)}
.upload-zone:active{background:var(--active-blue);border-color:var(--primary-darker);transform:scale(.995)}
.upload-zone .big{font-size:34px;margin-bottom:8px}
.upload-zone .hint{font-size:12px;margin-top:6px}
.mail-preview{border:1px solid var(--border);border-radius:10px;overflow:hidden}
.mail-preview .head{background:#F7F8FA;padding:14px 18px;border-bottom:1px solid var(--border)}
.mail-preview .head .row{display:flex;gap:8px;font-size:13px;margin:4px 0;color:#4E5969}
.mail-preview .head .row b{color:var(--text);min-width:56px}
.mail-preview .body{padding:22px 20px;line-height:1.8;font-size:14px;color:#333;white-space:pre-wrap}
.mp-meta{display:flex;gap:8px;font-size:13px;margin:6px 0;color:#4E5969;padding:0 18px}
.mp-meta:first-child{padding-top:16px}
.mp-meta span{color:var(--muted);min-width:56px}
.mp-body{padding:16px 18px 22px;line-height:1.8;font-size:14px;color:#333}
.var-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.var-chip{background:var(--primary-light);color:var(--primary);border:1px solid #d6e2ff;border-radius:6px;
padding:3px 10px;font-size:12px;font-family:monospace;cursor:pointer;transition:all .12s}
.var-chip:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.var-chip:active{background:var(--primary-darker);border-color:var(--primary-darker);transform:scale(.95)}
.permission-tree{font-size:13px}
.pt-group{font-weight:600;padding:8px 0;color:var(--text)}
.pt-item{padding:5px 0 5px 22px;color:#4E5969}
.pt-item input{margin-right:8px}
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--primary-light);color:var(--primary);
padding:4px 10px;border-radius:6px;font-size:12px;margin:0 6px 6px 0}
.tag .x{cursor:pointer;font-weight:700;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px;
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.tag .x:hover{background:var(--danger);color:#fff}
.tag .x:active{background:var(--danger-dark);transform:scale(.85)}
.empty{padding:60px;text-align:center;color:var(--muted)}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:18px}
.tab{padding:10px 18px;cursor:pointer;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;border-radius:6px 6px 0 0;
transition:color var(--t-base) var(--ease),background var(--t-base) var(--ease)}
.tab:hover{color:var(--primary-dark);background:var(--hover-blue)}
.tab:active{background:var(--active-blue);color:var(--primary-darker)}
.tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.tab.active:hover{background:var(--primary-lighter)}
.footer{padding:18px 24px;color:var(--muted);font-size:12px;text-align:center}
/* ================= 审批人看板（老板工作台） ================= */
/* 维度切换器 */
.dim-tabs{display:inline-flex;gap:4px;background:#F2F3F5;border-radius:10px;padding:4px}
.dim-tab{padding:8px 18px;border-radius:8px;font-size:13px;color:var(--muted);cursor:pointer;white-space:nowrap;
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.dim-tab:hover{color:var(--primary-dark);background:rgba(255,255,255,.75)}
.dim-tab:active{background:#E6EBF3;transform:scale(.97)}
.dim-tab.active{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.dim-tab.active:active{transform:scale(.97)}
/* 横向条形图（部门/组对比） */
.hbar-list{width:100%;display:flex;flex-direction:column;gap:12px;padding:4px 2px}
.hbar{display:flex;align-items:center;gap:12px}
.hbar-label{width:100px;font-size:13px;color:var(--text);flex-shrink:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar-track{flex:1;height:20px;background:#F2F3F5;border-radius:10px;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
.hbar-fill{height:100%;background:linear-gradient(90deg,#006EFF,#4DA3FF);border-radius:10px;transition:width .5s cubic-bezier(.22,.61,.36,1);box-shadow:0 1px 3px rgba(0,110,255,.28)}
.hbar-fill.g2{background:linear-gradient(90deg,#0ABF5B,#4CD68C);box-shadow:0 1px 3px rgba(10,191,91,.28)}
.hbar-fill.g3{background:linear-gradient(90deg,#FF9D00,#ffc163);box-shadow:0 1px 3px rgba(255,157,0,.28)}
.hbar-val{width:86px;font-size:13px;color:var(--text);font-weight:700;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums}
/* 纵向柱状图（柱体独立绘图区 + 底部两行标签，不遮挡） */
.vbar-chart{width:100%;display:flex;align-items:stretch;gap:14px;height:100%;padding:0 2px}
.vbar{flex:1;display:flex;flex-direction:column;min-width:0}
.vbar-plot{position:relative;flex:1;min-height:0;background-image:linear-gradient(to top,#F2F3F5 1px,transparent 1px);background-size:100% 25%}
.vbar .col{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:64%;max-width:42px;background:linear-gradient(180deg,#4DA3FF,#006EFF);border-radius:7px 7px 2px 2px;box-shadow:0 2px 6px rgba(0,110,255,.22);transition:height .5s cubic-bezier(.22,.61,.36,1)}
.vbar .col.g2{background:linear-gradient(180deg,#4CD68C,#0ABF5B);box-shadow:0 2px 6px rgba(10,191,91,.22)}
.vbar .lab{height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
.vbar .lv{font-size:11px;color:var(--text);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.vbar .lt{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 醒目提醒横幅 */
.alert-banner{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:12px;
background:linear-gradient(135deg,#FDECEC,#ffe8e0);border:1px solid #F9C7C7;margin-bottom:18px;
box-shadow:0 2px 10px rgba(229,69,69,.10)}
.alert-banner .ico{font-size:26px}
.alert-banner .msg{flex:1}
.alert-banner .msg b{color:#E54545;font-size:15px}
.alert-banner .msg .detail{font-size:13px;color:#C9353F;margin-top:3px}
.alert-banner .nums{display:flex;gap:16px}
.alert-banner .num{text-align:center;min-width:56px}
.alert-banner .num .v{font-size:26px;font-weight:700;color:#E54545;line-height:1}
.alert-banner .num .l{font-size:12px;color:#C9353F;margin-top:4px}
/* 铃铛 + 角标 */
.bell{position:relative;width:38px;height:38px;border-radius:10px;background:#F5F7FA;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;margin-right:6px;transition:background .15s}
.bell:hover{background:#F2F3F5}
.bell .bdg{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#E54545;color:#fff;font-size:11px;font-weight:600;display:none;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(229,69,69,.5)}
.bell .bdg.show{display:flex}
.bell .bdg.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,69,69,.55)}50%{box-shadow:0 0 0 7px rgba(229,69,69,0)}}
/* 个人明细开关 */
.switch{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--muted);user-select:none}
.switch .track{width:40px;height:22px;border-radius:11px;background:#d7dde8;position:relative;
transition:background var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease)}
.switch:hover .track{background:#c2cad8}
.switch .track::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);
transition:left var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
.switch:active .track::after{transform:scale(.92)}
.switch.on .track{background:var(--primary);box-shadow:0 0 0 3px rgba(0,110,255,.12)}
.switch.on:hover .track{background:var(--primary-dark)}
.switch.on .track::after{left:20px}
.switch.on{color:var(--primary);font-weight:500}
/* 指标分组 tab 卡（按指标切换柱状图） */
.metric-pills{display:flex;gap:6px;flex-wrap:wrap}
.metric-pill{padding:5px 14px;border-radius:16px;font-size:12px;background:#F2F3F5;color:var(--muted);cursor:pointer;transition:all .15s}
.metric-pill.active{background:var(--primary);color:#fff}
/* ================= 战报审批（优化） ================= */
.req{color:var(--danger);margin-left:2px}
.approve-tabs{display:flex;gap:6px;border-bottom:2px solid var(--border);margin-bottom:0}
.approve-tab{padding:12px 18px;cursor:pointer;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;display:flex;align-items:center;gap:7px;transition:all .15s}
.approve-tab .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.approve-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.approve-tab .cnt.pending{background:var(--primary);color:#fff}
.approve-tab .cnt.green{background:#e6f7ef;color:var(--success)}
.approve-tab .cnt.red{background:#FDECEC;color:var(--danger)}
.approve-list{display:flex;flex-direction:column;gap:14px}
.approve-item{display:flex;align-items:flex-start;gap:16px;padding:16px 18px;border:1px solid var(--border);border-radius:12px;transition:all .15s;background:#fff;flex-wrap:wrap}
.approve-item:hover{border-color:#C9CDD4;box-shadow:0 4px 16px rgba(0,0,0,.06)}
.approve-item .ava{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#006EFF,#4DA3FF);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;flex-shrink:0}
.approve-item .info{flex:1;min-width:200px}
.approve-item .info .name{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.approve-item .info .meta{font-size:12px;color:var(--muted);margin-top:5px;display:flex;gap:14px;flex-wrap:wrap}
.approve-item .info .meta span{display:inline-flex;align-items:center;gap:4px}
.approve-item .ops{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap}
.approve-item .reason{flex-basis:100%;font-size:12px;color:#C9353F;background:#FDECEC;border:1px solid #F9C7C7;border-radius:8px;padding:8px 12px;margin-top:2px;line-height:1.7}
/* 审批按钮 */
.btn-view{background:#fff;color:#4E5969;border:1px solid var(--border)}
.btn-view:hover{color:var(--primary);border-color:var(--primary)}
.btn-pass{background:var(--success);color:#fff}
.btn-pass:hover{background:#128c4b}
.btn-reject{background:var(--danger);color:#fff}
.btn-reject:hover{background:#cf3b40}
/* 模态框 */
.modal-mask{position:fixed;inset:0;background:rgba(10,18,40,.55);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:maskIn .18s ease}
@keyframes maskIn{from{opacity:0}to{opacity:1}}
.modal{width:600px;max-width:100%;max-height:88vh;background:#fff;border-radius:14px;display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(10,18,40,.35);animation:modalIn .22s ease;overflow:hidden}
@keyframes modalIn{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.modal-head{display:flex;align-items:center;gap:10px;padding:18px 22px;border-bottom:1px solid var(--border);flex-shrink:0}
.modal-head .ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.modal-head .t{font-size:16px;font-weight:600;flex:1}
.modal-head .x{width:30px;height:30px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:20px;display:flex;align-items:center;justify-content:center;line-height:1}
.modal-head .x:hover{background:#F2F3F5;color:var(--text)}
.modal-body{padding:22px;overflow-y:auto;flex:1}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--border);flex-shrink:0;background:#FAFBFC}
/* 审批详情 */
.rd-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(135deg,#F7F8FA,#F5F9FF);border-radius:10px;margin-bottom:18px}
.rd-head .ava{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#006EFF,#4DA3FF);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:17px;flex-shrink:0}
.rd-head .nm{font-size:15px;font-weight:600}
.rd-head .mt{font-size:12px;color:var(--muted);margin-top:3px}
.rd-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.rd-grid .cell{padding:13px 16px;border-right:1px solid var(--border);border-bottom:1px solid var(--border)}
.rd-grid .cell:nth-child(even){border-right:none}
.rd-grid .cell .k{font-size:12px;color:var(--muted);margin-bottom:5px}
.rd-grid .cell .v{font-size:15px;font-weight:600;color:var(--text)}
.rd-grid .cell.full{grid-column:1/-1;border-right:none}
.rd-grid .cell .v.text{font-weight:400;font-size:13px;line-height:1.7;color:#1D2129;white-space:pre-wrap}
.rd-grid .cell .v.rd-num{color:var(--primary)}
/* 驳回理由 */
.reject-target{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#FDECEC;border:1px solid #F9C7C7;border-radius:10px;margin-bottom:16px;font-size:13px;color:#C9353F}
.reject-box label{display:block;font-size:13px;color:var(--text);font-weight:600;margin-bottom:10px}
.reject-box textarea{width:100%;min-height:110px;border:1px solid #F9C7C7;border-radius:9px;padding:12px;font-size:13px;line-height:1.7;outline:none;resize:vertical;color:var(--text);background:#fff8f7}
.reject-box textarea:focus{border-color:var(--danger);box-shadow:0 0 0 3px #FDECEC}
.reject-box .hint{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6}
/* Excel 导入结果弹窗 */
.imp-result{font-size:13px;line-height:1.8}
.imp-ok{padding:12px 14px;background:#f0faf4;border:1px solid #bfe8cd;border-radius:10px;color:#146a3b;margin-bottom:14px}
.imp-ok b{color:#0f5a30}
.imp-dim{background:#F7F8FA;border-color:var(--border);color:var(--muted)}
.imp-fail{padding:12px 14px;background:#fdf0ef;border:1px solid #F9C7C7;border-radius:10px;color:#b3433f;margin-bottom:10px}
.imp-all-ok{background:#f0faf4;border-color:#bfe8cd;color:#146a3b;text-align:center}
.imp-fail-list{max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:10px}
.imp-fail-item{display:flex;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);font-size:12px;color:var(--text)}
.imp-fail-item:last-child{border-bottom:none}
.imp-fail-item .row{color:var(--muted);flex-shrink:0;min-width:52px}
.imp-fail-item .nm{font-weight:600;flex-shrink:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.imp-fail-item .rs{color:#b3433f;flex:1}
/* 通知面板（铃铛消息中心） */
.notify-mask{position:fixed;inset:0;z-index:150}
.notify-panel{position:fixed;top:66px;right:24px;width:360px;max-width:92vw;max-height:70vh;background:#fff;border-radius:14px;box-shadow:0 16px 48px rgba(10,18,40,.25);z-index:160;display:flex;flex-direction:column;overflow:hidden;animation:notifyIn .18s ease}
@keyframes notifyIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
.notify-head{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--border);flex-shrink:0}
.notify-head .t{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.notify-head .t .n{font-size:12px;color:var(--danger);background:#FDECEC;padding:1px 8px;border-radius:10px;font-weight:500}
.notify-head .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:18px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:6px}
.notify-head .x:hover{background:#F2F3F5}
.notify-body{overflow-y:auto;flex:1;padding:8px}
.notify-hero{margin:8px;padding:14px 16px;border-radius:10px;background:linear-gradient(135deg,#FDECEC,#ffe8e0);border:1px solid #F9C7C7;cursor:pointer;display:flex;align-items:center;gap:12px}
.notify-hero .ic{font-size:22px}
.notify-hero .tx{flex:1}
.notify-hero .tx b{font-size:13px;color:#E54545;display:block}
.notify-hero .tx span{font-size:12px;color:#C9353F;margin-top:2px;display:block}
.notify-hero .arr{color:#E54545;font-weight:700;font-size:18px}
.notify-item{display:flex;gap:12px;padding:13px 12px;border-radius:10px;cursor:pointer;transition:background .15s;position:relative}
.notify-item:hover{background:#F7F8FA}
.notify-item.unread{background:#f2f6ff}
.notify-item.unread:hover{background:#E8F1FF}
.notify-item .ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.notify-item .ic.reject{background:#FDECEC}
.notify-item .tx{flex:1;min-width:0}
.notify-item .tx .tt{font-size:13px;font-weight:600;color:var(--text)}
.notify-item .tx .tt .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--danger);margin-left:6px;vertical-align:middle}
.notify-item .tx .ds{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.6}
.notify-item .tx .tm{font-size:11px;color:#86909C;margin-top:4px}
.notify-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;line-height:1.8}
.notify-empty .ic{font-size:30px;margin-bottom:10px;opacity:.5}
.notify-foot{padding:10px 16px;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--muted);flex-shrink:0}
.notify-foot a{color:var(--primary);cursor:pointer}
/* ================= 后台通用操作按钮 ================= */
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#128c4b}
.btn-danger-solid{background:var(--danger);color:#fff}
.btn-danger-solid:hover{background:#cf3b40}
/* ============ 表格操作按钮组（全局统一：固定间距、不换行、随页面缩放） ============ */
.ops{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.ops .btn{flex-shrink:0}
/* 兜底：未包 .ops 的相邻按钮保持统一间距 */
td button + button{margin-left:6px}
td .ops button + button{margin-left:0}
table th,table td{vertical-align:middle}
/* ============ 部门管理员功能权限勾选 ============ */
.perm-section{margin-top:6px}
.perm-title{font-size:13px;color:var(--muted);margin-bottom:12px;font-weight:500}
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.perm-check{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:9px;cursor:pointer;transition:all .15s;background:#fff}
.perm-check:hover{border-color:#C9CDD4}
.perm-check:has(input:checked){border-color:var(--primary);background:var(--primary-light)}
.perm-check input{width:16px;height:16px;margin-top:2px;accent-color:var(--primary);flex-shrink:0;cursor:pointer}
.pc-body{display:flex;flex-direction:column;gap:3px}
.pc-name{font-size:13px;font-weight:600;color:var(--text)}
.pc-desc{font-size:12px;color:var(--muted);line-height:1.4}
@media(max-width:560px){.perm-grid{grid-template-columns:1fr}}
/* ============ 权限项配置（精确控制 + 块状显示） ============ */
.perm-filter-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.perm-cur-user{font-size:13px;color:#4E5969}
.perm-cur-user b{color:var(--text)}
.perm-group-card{border:1px solid var(--border);border-radius:11px;padding:14px 16px;margin-bottom:14px;background:#fff;transition:all .15s}
.perm-group-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.perm-group-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.perm-group-toggle input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;margin:0}
.pg-name{font-size:14px;font-weight:700;color:var(--text)}
.pg-count{font-size:12px;color:var(--muted);background:#f0f3f9;padding:1px 8px;border-radius:10px}
.pg-desc{font-size:12px;color:var(--muted)}
.pg-lock{font-size:12px;color:var(--danger);background:#FDECEC;padding:2px 8px;border-radius:6px}
/* 细分权限项：块状网格排列，多列自动换行，不占整行 */
.perm-item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px}
.perm-item-grid .perm-check{padding:9px 11px;align-items:center}
.perm-item-grid .perm-check .pc-name{font-size:13px}
/* 锁定（未授权）功能大项：整块淡化、不可操作 */
.perm-group-locked{background:#f7f9fc;border-color:#e6ebf4}
.perm-group-locked .pg-name,.perm-group-locked .pg-desc,.perm-group-locked .pc-name{color:#86909C}
.perm-disabled{cursor:not-allowed;background:#f2f4f8;border-color:#e2e7f0;opacity:.72}
.perm-disabled:hover{border-color:#e2e7f0}
.perm-disabled input{cursor:not-allowed}
.perm-foot{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
/* 权限模板卡片 */
.tpl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tpl-tags .tag{font-size:11px;padding:2px 8px}
/* ============ 拖拽式表单设计器（日报/周报模板配置） ============ */
.fd-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fd-toolbar .spacer{flex:1}
.fd-tip{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:5px}
.fd-body{display:grid;grid-template-columns:220px 1fr 280px;gap:14px;align-items:start}
@media(max-width:1100px){.fd-body{grid-template-columns:1fr}}
/* 左栏：字段控件库 */
.fd-palette{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;position:sticky;top:14px}
.fd-palette .fd-col-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.fd-col-title .hint{font-size:11px;color:var(--muted);font-weight:400}
.fd-src{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.fd-ctrl{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px dashed #E5E6EB;border-radius:9px;
background:#FAFBFC;cursor:grab;user-select:none;transition:all .14s;font-size:13px;color:#1D2129}
.fd-ctrl:hover{border-color:var(--primary);background:var(--primary-light);color:var(--primary-dark);box-shadow:0 3px 10px rgba(0,110,255,.12)}
.fd-ctrl:active{cursor:grabbing}
.fd-ctrl .ic{width:24px;height:24px;border-radius:6px;background:#F5F9FF;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--primary);flex-shrink:0}
/* 中栏：表单画布 */
.fd-canvas{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;min-height:420px}
.fd-canvas .fd-canvas-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.fd-canvas .fd-form-title{font-size:15px;font-weight:700;color:var(--text)}
.fd-canvas .fd-form-title input{border:1px solid transparent;border-radius:6px;font-size:15px;font-weight:700;color:var(--text);
padding:3px 8px;width:200px;background:transparent;transition:.15s}
.fd-canvas .fd-form-title input:hover,.fd-canvas .fd-form-title input:focus{border-color:var(--primary);background:#fff;outline:none}
.fd-dropzone{display:flex;flex-direction:column;gap:10px;min-height:300px;border-radius:10px;padding:4px;transition:background .15s}
.fd-dropzone.drag-over{background:var(--primary-light);outline:2px dashed var(--primary);outline-offset:-2px}
.fd-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
color:var(--muted);padding:70px 20px;text-align:center;border:2px dashed #dfe6f2;border-radius:10px}
.fd-empty .big{font-size:40px;opacity:.7}
.fd-empty p{font-size:13px}
/* 画布中的字段项 */
.fd-field{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border);border-radius:10px;
background:#fff;cursor:grab;transition:all .14s;position:relative}
.fd-field:hover{border-color:#b9c6e0}
.fd-field.sel{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);background:#FAFBFC}
.fd-field.dragging{opacity:.4;border-style:dashed}
.fd-field.drag-over-top{box-shadow:0 -3px 0 0 var(--primary)}
.fd-field.drag-over-bot{box-shadow:0 3px 0 0 var(--primary)}
.fd-field .fd-grip{color:#c2cbdE;font-size:15px;cursor:grab;flex-shrink:0;letter-spacing:-2px}
.fd-field .fd-fico{width:30px;height:30px;border-radius:8px;background:#F5F9FF;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--primary);flex-shrink:0}
.fd-field .fd-fmeta{flex:1;min-width:0}
.fd-field .fd-fname{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fd-field .fd-fname .req{margin:0}
.fd-field .fd-fkey{font-size:11px;color:var(--muted);margin-top:2px;font-family:Consolas,monospace}
.fd-field .fd-ftype{font-size:11px;color:var(--primary);background:var(--primary-light);padding:1px 8px;border-radius:10px;flex-shrink:0}
.fd-field .fd-fop{display:flex;gap:4px;flex-shrink:0}
.fd-field .fd-fop button{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:13px;background:transparent;color:var(--muted);transition:.13s}
.fd-field .fd-fop button:hover{background:#F2F3F5;color:var(--text)}
.fd-field .fd-fop .del:hover{background:#FDECEC;color:var(--danger)}
/* 右栏：属性面板 */
.fd-props{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;position:sticky;top:14px}
.fd-props .fd-col-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.fd-props-empty{color:var(--muted);font-size:13px;text-align:center;padding:46px 14px;line-height:1.9}
.fd-props-empty .ic{font-size:30px;display:block;margin-bottom:8px;opacity:.6}
.fd-prop{margin-bottom:13px}
.fd-prop label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.fd-prop label .req{color:var(--danger);margin-left:2px}
.fd-prop input,.fd-prop select,.fd-prop textarea{width:100%;border:1px solid var(--border);border-radius:7px;padding:0 10px;font-size:13px;color:var(--text);background:#fff;outline:none;transition:.15s}
.fd-prop input,.fd-prop select{height:36px}
.fd-prop textarea{min-height:70px;padding:8px 10px;resize:vertical;line-height:1.6}
/* 字段宽度自动分档的提示（只读，不让管理员手配 —— 避免和销售端尺寸对不上） */
.fd-size-tip{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.6}
.fd-prop input:focus,.fd-prop select:focus,.fd-prop textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.fd-prop-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fd-prop .switch{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13px;color:var(--text)}
.fd-prop .switch input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;margin:0}
/* 选项编辑 */
.fd-opt-list{display:flex;flex-direction:column;gap:6px}
.fd-opt-item{display:flex;align-items:center;gap:6px}
.fd-opt-item input{flex:1}
.fd-opt-item .rm{width:24px;height:24px;border-radius:6px;background:transparent;color:var(--muted);font-size:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.fd-opt-item .rm:hover{background:#FDECEC;color:var(--danger)}
.fd-add-opt{font-size:12px;color:var(--primary);cursor:pointer;user-select:none}
.fd-add-opt:hover{text-decoration:underline}
.fd-prop .fd-del-btn{width:100%;height:36px;border:1px solid #f3c5c7;color:var(--danger);background:#fff;border-radius:7px;font-size:13px;transition:.14s}
.fd-prop .fd-del-btn:hover{background:#FDECEC;border-color:var(--danger)}
.fd-count{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}
/* ================= 邮件模板可视化设计器（三栏：块库/画布/属性） ================= */
.mb-designer{display:grid;grid-template-columns:200px 1fr 280px;gap:14px;align-items:start;margin-top:18px;border-top:1px dashed var(--border);padding-top:18px}
@media(max-width:1100px){.mb-designer{grid-template-columns:1fr}}
.mb-palette{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px}
.mb-palette .mb-col-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mb-col-title .hint{font-size:11px;color:var(--muted);font-weight:400}
.mb-ctrl-list{display:flex;flex-direction:column;gap:8px}
.mb-ctrl{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px dashed #E5E6EB;border-radius:9px;cursor:grab;transition:all .14s;background:#FAFBFC}
.mb-ctrl:hover{border-color:var(--primary);background:var(--primary-light);box-shadow:0 3px 10px rgba(0,110,255,.12)}
.mb-ctrl:active{cursor:grabbing}
.mb-ctrl .ic{font-size:20px;line-height:1}
.mb-ctrl .nm{font-size:13px;font-weight:600;color:var(--text)}
.mb-ctrl .ds{font-size:11px;color:var(--muted);line-height:1.5}
.mb-canvas{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;min-height:420px}
.mb-canvas .mb-col-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;padding-bottom:10px;border-bottom:1px dashed var(--border);display:flex;align-items:center;gap:6px}
.mb-dropzone{display:flex;flex-direction:column;gap:10px;min-height:320px;border-radius:10px;padding:4px;transition:background .15s}
.mb-empty{text-align:center;color:var(--muted);font-size:13px;line-height:2;padding:70px 16px}
.mb-empty .big{font-size:34px;display:block;margin-bottom:8px;opacity:.6}
.mb-block{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;transition:all .14s}
.mb-block:hover{border-color:#b9c6e0}
.mb-block.sel{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);background:#FAFBFC}
.mb-block .mb-grip{color:#c2cbde;font-size:15px;cursor:grab;flex-shrink:0;letter-spacing:-2px;margin-top:2px}
.mb-block .mb-type{font-size:16px;flex-shrink:0}
.mb-block-body{flex:1;min-width:0}
.mb-block-ops{display:flex;flex-direction:column;gap:4px;flex-shrink:0}
.mb-block-ops button{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;background:transparent;color:var(--muted);transition:.13s}
.mb-block-ops button:hover{background:#F2F3F5;color:var(--text)}
.mb-block-ops .del:hover{background:#FDECEC;color:var(--danger)}
.mb-text-preview{font-size:13px;color:#1D2129;line-height:1.8;white-space:normal}
.mb-text-preview .empty{color:#86909C;font-style:italic}
.mb-img{max-width:100%;max-height:160px;border-radius:6px;display:block}
.mb-img-placeholder{font-size:12px;color:var(--muted);background:#F7F8FA;border:1px dashed #E5E6EB;border-radius:8px;padding:18px;text-align:center}
.mb-attach{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text)}
.mb-attach .fn{font-weight:600}
.mb-attach .sz{font-size:11px;color:var(--success)}
.mb-attach .sz.dim{color:var(--muted)}
.mb-divider-line{height:1px;background:var(--border);margin:6px 0}
.mb-props{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px}
.mb-props .mb-col-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.mb-props-empty{color:var(--muted);font-size:13px;text-align:center;padding:46px 14px;line-height:1.9}
.mb-prop{margin-bottom:13px}
.mb-prop label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.mb-prop textarea,.mb-prop select{width:100%;border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-size:13px;color:var(--text);background:#fff;outline:none;transition:.15s}
.mb-prop textarea{min-height:110px;resize:vertical;line-height:1.6}
.mb-prop select{height:36px;padding:0 10px}
.mb-prop textarea:focus,.mb-prop select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.mb-prop-img{max-width:100%;max-height:120px;border-radius:6px;display:block;margin-bottom:8px;border:1px solid var(--border)}
.mb-prop-img-empty{font-size:12px;color:var(--muted);background:#F7F8FA;border:1px dashed #E5E6EB;border-radius:8px;padding:16px;text-align:center;margin-bottom:8px}
.mb-upload-row{display:flex;gap:8px;margin-bottom:6px}
.mb-prop-hint{font-size:11px;color:var(--muted);line-height:1.6}
.mb-attach-name{font-size:13px;color:var(--text);font-weight:600;padding:10px 12px;background:#F7F8FA;border:1px solid var(--border);border-radius:8px;margin-bottom:8px;word-break:break-all}
.mb-del-btn{width:100%;height:36px;border:1px solid #f3c5c7;color:var(--danger);background:#fff;border-radius:7px;font-size:13px;transition:.14s}
.mb-del-btn:hover{background:#FDECEC;border-color:var(--danger)}
/* 销售端写信：块编辑器附加样式 */
.sb-tpl-tag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:9px;font-size:10px;font-weight:600;
color:#006EFF;background:#EAF2FF;border:1px solid #D3E0FF;vertical-align:middle}
.mb-block.drop-target{border-color:var(--primary)!important;border-style:dashed!important;background:#F5F9FF!important}
.mb-dropzone.over{background:#F5F9FF;outline:2px dashed #BCD5FF;outline-offset:-2px;border-radius:10px}
/* 变量 chip：显示中文名，点击插入对应变量 */
.var-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.var-chip{padding:4px 10px;border-radius:13px;font-size:12px;color:#006EFF;background:#EAF2FF;
border:1px solid #D3E0FF;cursor:pointer;transition:.14s;white-space:nowrap}
.var-chip:hover{background:#006EFF;color:#fff;border-color:#006EFF}
/* 选项型变量：chip 带点线边，提示「插入后销售是点选而非手打」 */
.var-chip-pick{border-style:dashed;border-color:#A6E5C1;color:#0A8F4A;background:#F2FCF7}
.var-chip-pick:hover{background:#0A8F4A;border-color:#0A8F4A;color:#fff}
/* 窄屏下写信页改为单列 */
@media (max-width:1180px){
.mb-designer{grid-template-columns:170px 1fr 240px!important}
}
/* 邮件预览 blocks 样式（管理员预览 + 销售端） */
.mbk-text{font-size:14px;color:#333;line-height:1.8;margin:0 0 4px}
.mbk-image{margin:10px 0}
.mbk-image img{max-width:100%}
.mbk-image.mbk-empty{font-size:12px;color:var(--muted);background:#F7F8FA;border:1px dashed #E5E6EB;border-radius:8px;padding:16px;text-align:center}
.mbk-attach{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#4E5969;background:#F7F8FA;border:1px solid var(--border);border-radius:8px;padding:8px 12px;margin:6px 0}
.mbk-attach.mbk-empty{color:var(--muted);border-style:dashed}
.mbk-divider{height:1px;background:var(--border);margin:14px 0}
/* 写信器：附件 / 图片上传区 */
.mc-att{display:flex;align-items:center;gap:8px;font-size:13px;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:#fafcff;margin-top:6px}
.mc-att .ico{font-size:14px}
.mc-att .nm{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-att .sz{color:#86909C;font-size:12px}
.mc-att a{color:var(--danger);font-size:12px;text-decoration:none}
.mc-att a:hover{text-decoration:underline}
.mc-upl{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--primary);background:var(--primary-light);
border:1px solid #d3e0ff;border-radius:7px;padding:5px 10px;cursor:pointer;transition:.15s}
.mc-upl:hover{background:#dfe9ff}
.mc-upl input{display:none}
.mp-body .mbk-attach a{color:var(--danger);font-size:12px;text-decoration:none}
/* ================= 日志与审计：筛选胶囊 + 分页 ================= */
.filter-pills{display:inline-flex;gap:4px;background:#F2F3F5;border-radius:9px;padding:3px}
.fpill{padding:5px 14px;border-radius:7px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none;transition:all .14s;white-space:nowrap}
.fpill:hover{color:var(--primary)}
.fpill.active{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.pager{display:flex;align-items:center;gap:6px;justify-content:flex-end;padding:12px 2px 2px;flex-wrap:wrap}
.pager .pg-info{font-size:12px;color:var(--muted);margin-right:8px}
.pg-btn{min-width:28px;height:28px;padding:0 6px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--muted);cursor:pointer;user-select:none;border:1px solid transparent;
transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.pg-btn:hover{color:var(--primary);border-color:#BCD5FF;background:var(--hover-blue)}
.pg-btn:active{background:var(--active-blue);color:var(--primary-darker);transform:scale(.94)}
.pg-btn.active{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 2px 6px rgba(0,110,255,.25)}
.pg-btn.active:hover{background:var(--primary-dark);border-color:var(--primary-dark);color:#fff}
.pg-btn.active:active{background:var(--primary-darker);transform:scale(.94)}
.pg-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.pg-btn.disabled:hover{color:var(--muted);border-color:transparent}
/* ================= 开发接口：密钥 / 接口目录 ================= */
.secret-val{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;color:var(--text);letter-spacing:.5px}
.secret-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--border);border-radius:9px;margin-bottom:10px;background:#FAFBFC}
.secret-row .secret-label{font-size:12px;color:var(--muted);width:76px;flex-shrink:0;font-weight:600}
.secret-row .secret-val{flex:1;word-break:break-all;user-select:all}
.secret-tip{font-size:12px;color:#C9353F;background:#FDECEC;border:1px solid #F9C7C7;border-radius:8px;padding:10px 12px;line-height:1.6;margin:6px 0 12px}
.secret-doc{font-size:12px;color:var(--muted);background:#f2f6ff;border:1px solid #d6e2ff;border-radius:8px;padding:10px 12px;line-height:1.8}
.secret-doc code{font-family:ui-monospace,Consolas,monospace;background:#E8F1FF;color:var(--primary);padding:1px 6px;border-radius:4px;font-size:11px}
.api-group{border:1px solid var(--border);border-radius:12px;margin-bottom:16px;overflow:hidden}
.api-group-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#F7F8FA;border-bottom:1px solid var(--border)}
.api-dir-badge{width:52px;height:52px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;color:#fff;writing-mode:vertical-rl;letter-spacing:2px;padding:4px 0}
.api-dir-badge.in{background:linear-gradient(180deg,#006EFF,#4DA3FF)}
.api-dir-badge.out{background:linear-gradient(180deg,#0ABF5B,#4CD68C)}
.api-group-title{font-size:14px;font-weight:700;color:var(--text)}
.api-list{display:flex;flex-direction:column}
.api-item{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-bottom:1px solid var(--border)}
.api-item:last-child{border-bottom:none}
.api-item:hover{background:#FAFBFC}
.api-item-body{flex:1;min-width:0}
.api-item-name{font-size:13px;font-weight:600;color:var(--text)}
.api-item-path{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--primary);margin:3px 0}
/* ================= 审批人工作台：时间维度 / 同比 / 富表格 ================= */
/* 涨红跌绿（A股/中文财报惯例：涨=红，跌=绿） */
.delta{display:inline-block;font-size:12px;font-weight:600;white-space:nowrap}
.delta.up{color:var(--danger)}
.delta.down{color:var(--success)}
.delta.flat{color:var(--muted)}
.kpi .trend .cmp{color:var(--muted);font-weight:400;margin-right:6px}
/* 筛选卡片：时间维度 + 统计维度 两行 */
.filter-card{padding:14px 20px}
.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filter-row+.filter-row{margin-top:12px;border-top:1px solid var(--border);padding-top:12px}
.fl-label{font-size:13px;color:var(--muted);font-weight:600;margin-right:2px;white-space:nowrap}
.period-tabs{background:#E8F1FF}
.period-tabs .dim-tab.active{background:var(--primary);color:#fff;box-shadow:none}
.cmp-tip{font-size:12px;color:var(--muted);font-weight:400}
/* 富表格：排名 / 排序 / 同比 / 占比 */
table.rich{width:100%;border-collapse:collapse}
table.rich th,table.rich td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left;font-size:13px;white-space:nowrap}
table.rich th{color:var(--muted);font-weight:600;background:#FAFBFC}
table.rich th.sortable{cursor:pointer;user-select:none}
table.rich th.sortable:hover{color:var(--primary)}
table.rich th.sortable.on{color:var(--primary)}
table.rich tr.top-row td{background:#f6f9ff}
table.rich tr.sum-row td{background:#FAFBFC;font-weight:600;border-top:2px solid var(--border)}
table.rich td.strong .cell-val{font-weight:700;color:var(--primary)}
table.rich .sub{font-size:11px;color:var(--muted);margin-top:2px}
.cell-val{font-weight:600;color:var(--text)}
.rank{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#F2F3F5;color:var(--muted)}
.rank.r1{background:linear-gradient(135deg,#f6c344,#eaa20c);color:#fff;box-shadow:0 2px 6px rgba(234,162,12,.35)}
.rank.r2{background:linear-gradient(135deg,#b9c3d4,#8a94a8);color:#fff}
.rank.r3{background:linear-gradient(135deg,#d9a878,#bf7a3a);color:#fff}
/* 占比进度条 */
.share{display:flex;align-items:center;gap:8px;min-width:120px}
.share-bar{flex:1;height:8px;background:#F2F3F5;border-radius:5px;overflow:hidden}
.share-fill{height:100%;background:linear-gradient(90deg,#006EFF,#4DA3FF);border-radius:5px;transition:width .4s}
.share-txt{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
/* 达成率进度条（财报风格） */
.rate{display:flex;align-items:center;gap:8px;min-width:150px}
.rate-bar{flex:1;height:8px;background:#F2F3F5;border-radius:5px;overflow:hidden}
.rate-fill{height:100%;border-radius:5px}
.rate-fill.g{background:linear-gradient(90deg,#0ABF5B,#4CD68C)}
.rate-fill.b{background:linear-gradient(90deg,#006EFF,#4DA3FF)}
.rate-fill.o{background:linear-gradient(90deg,#FF9D00,#ffc163)}
.rate-txt{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.rate-txt.g{color:var(--success)}
.rate-txt.b{color:var(--primary)}
.rate-txt.o{color:var(--warning)}
/* 表单字段联动：单位后缀 / 选项组 */
.unit-wrap{display:flex;align-items:center;gap:8px}
.unit-wrap input{flex:1}
.unit-tip{font-size:12px;color:var(--muted);white-space:nowrap}
.opt-group{display:flex;gap:16px;flex-wrap:wrap;padding:6px 0}
.opt{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);cursor:pointer}
.opt input{margin:0}
/* ================= 图表样式切换 + 多种图表（统一 230px 高） ================= */
.chart-body{height:230px;display:flex;align-items:center;overflow:hidden}
.chart-toolbar{display:flex;align-items:center;gap:10px;padding:2px 0 14px;border-bottom:1px solid #F2F3F5;margin-bottom:16px}
.ct-label{font-size:12px;color:var(--muted)}
.chart-pills{display:inline-flex;gap:4px;background:#F2F3F5;border-radius:8px;padding:3px}
.chart-pill{padding:5px 14px;border-radius:6px;font-size:12px;color:var(--muted);cursor:pointer;transition:all .15s}
.chart-pill.active{background:#fff;color:var(--primary);font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.12)}
/* 环形占比图 */
.donut-wrap{width:100%;display:flex;align-items:center;gap:32px;padding:4px 2px}
.donut-svg{width:190px;height:190px;flex-shrink:0;filter:drop-shadow(0 3px 8px rgba(0,0,0,.10))}
.donut-svg circle{stroke-linecap:butt}
.donut-center{font-size:12px;fill:var(--muted)}
.donut-total{font-size:20px;font-weight:700;fill:var(--text);font-variant-numeric:tabular-nums}
.donut-legend{flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px}
.donut-li{display:flex;align-items:center;gap:10px;font-size:13px;padding:5px 8px;border-radius:8px;transition:background .15s}
.donut-li:hover{background:#f6f8fc}
.donut-li .dot{width:11px;height:11px;border-radius:3px;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.donut-li .lname{color:var(--text);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.donut-li .lval{color:var(--text);font-weight:700;min-width:70px;text-align:right;font-variant-numeric:tabular-nums}
.donut-li .lpct{color:var(--muted);min-width:52px;text-align:right;font-variant-numeric:tabular-nums}
/* ================= 轻提示 toast（居中顶部） ================= */
.toast{position:fixed;top:28px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:99999;display:flex;align-items:center;gap:10px;
padding:11px 22px 11px 16px;border-radius:12px;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.18);
font-size:14px;color:var(--text);font-weight:600;opacity:0;pointer-events:none;
transition:opacity .22s ease,transform .22s ease}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .t-ico{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;color:#fff;flex-shrink:0}
.toast.warn .t-ico{background:#FF9D00}
.toast.success .t-ico{background:#0ABF5B}
.toast.error .t-ico{background:#E54545}
.toast .t-msg{line-height:1.4}
/* ============================================================
交互态统一覆写区（置于文件末尾，保证优先级最高）
—— 本文件存在多处同名类重复定义，交互态统一在此收口
============================================================ */
/* 导航图标：统一 20px（SVG 版，覆盖早期 18px 符号版） */
.nav-item .ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.nav-item .ico img{width:20px;height:20px;display:block;border-radius:5px}
.nav-item.active .ico img{filter:saturate(1.15)}
/* 弹窗头图标：统一 34px */
.modal-head .ico{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;overflow:hidden}
.modal-head .ico img{width:34px;height:34px;display:block}
/* 上传 chip 按钮：hover / 按下双态 */
.mc-upl{transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.mc-upl:hover{background:#DFE9FF;border-color:#7FB1FF;color:#0050CC}
.mc-upl:active{background:var(--active-blue);border-color:var(--primary-darker);color:var(--primary-darker);transform:scale(.97)}
.mc-upl-primary{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 1px 2px rgba(0,110,255,.2)}
.mc-upl-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark);box-shadow:var(--shadow-hover)}
.mc-upl-primary:active{background:var(--primary-darker);border-color:var(--primary-darker);transform:scale(.97);box-shadow:var(--shadow-active)}
/* 变量 chip：hover 填充 / 按下加深 */
.var-chip{transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.var-chip:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.var-chip:active{background:var(--primary-darker);border-color:var(--primary-darker);transform:scale(.95)}
/* ============================================================
导航与交互控件：禁止选中文字
—— 避免点击左侧导航/按钮时误选中文字、弹出浏览器的选择操作框
（内容区、表格正文、输入框保持可选中，不影响复制）
============================================================ */
.nav-item, .subnav-item, .nav-group-title,
.topbar, .topbar .crumb, .topbar .user, .topbar .avatar,
.topbar .uname, .topbar .urole, .user-caret,
.user-menu, .user-menu-item,
.btn, .tab, .filter-tabs a, .badge, .tag,
th, .rate-txt, .pg-name, .pg-count,
.lib-multi-btn, .lib-multi-opt, .mb-grip, .mb-block-ops button,
.rt-row, .cf-lb, .notify-item, .notify-head {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 可点击的行/卡片同样禁止拖选 */
.ops, .lib-search-item, .rp-cell { -webkit-user-select: none; user-select: none; }
/* ============================================================
环比徽标（较昨日 / 较上周 提升·下降）
—— 涨红跌绿（中国习惯）；无历史数据显示「新增」，零变化显示「持平」
============================================================ */
.trend-badge{
display:inline-flex; align-items:center; gap:2px;
font-size:11px; font-weight:600; line-height:1.5;
padding:1px 6px; border-radius:10px;
white-space:nowrap; vertical-align:middle;
-webkit-user-select:none; user-select:none;
}
.trend-badge i{ font-style:normal; font-weight:400; opacity:.72; margin-left:2px; }
.trend-badge.up { color:#E54545; background:#FDECEC; }
.trend-badge.down{ color:#00A870; background:#E8F8F2; }
.trend-badge.flat{ color:#86909C; background:#F2F3F5; }
.trend-badge.new { color:#006EFF; background:#E8F1FF; }
/* KPI 卡片内的环比行 */
.kpi .trend{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.kpi .value small{ font-weight:400; }
/* 环比：新增（上期无数据） */
.delta.new{ color:#006EFF; }
/* ============================================================
布局防挤压加固（全局防御）
—— 解决「块挤压到一起」：内容撑破容器、按钮挤成一行、
宽表撑破卡片、长文本不换行等问题
============================================================ */
/* 1. Grid / Flex 子项最小宽度归零
默认 min-width:auto 会让子项被内容（长单词、宽表格）撑破，
是网格布局「越挤越宽」的头号原因 */
.grid > *,
[class^='grid-'] > *,
.grid[class] > * { min-width: 0; }
.card > * { min-width: 0; }
/* 2. 表单行与卡片：允许内部收缩 */
.f-item { min-width: 0; }
.f-item > * { min-width: 0; max-width: 100%; }
/* 3. 表格：单元格长内容自动换行，避免把整表撑宽 */
th, td {
word-break: break-word;
overflow-wrap: anywhere;
}
/* 表格内徽标、按钮组不换行，避免被拆散 */
th .badge, td .badge,
th .trend-badge, td .trend-badge { white-space: nowrap; }
/* 4. 操作按钮区：空间不足自动换行（原来会挤成一条） */
.ops {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.ops .btn, .ops > span { white-space: nowrap; }
/* 5. 卡片标题与右侧控件（筛选/tab/按钮）：自动换行防重叠 */
.card-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.card-title .right {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* 6. 工具条：已 wrap，补充子元素收缩保护 */
.toolbar > * { min-width: 0; }
/* 7. 超长名称 / 邮箱 / 文件名：超出显示省略号 */
.ellipsis,
.lib-search-item .nm,
.approve-item .name,
td .strong { max-width: 100%; }
/* 8. KPI 卡片：数值过长时缩小字号，避免溢出 */
.kpi .value {
overflow-wrap: anywhere;
line-height: 1.25;
}
.kpi .label { overflow-wrap: anywhere; }
/* 9. 筛选 tab / 维度 tab：允许换行，不挤压 */
.tabs, .dim-tabs, .filter-tabs {
flex-wrap: wrap;
}
/* 10. 模态框内表单：窄屏时两列合一列 */
@media (max-width: 700px) {
.form-grid { grid-template-columns: 1fr !important; }
.modal { width: 96vw !important; max-width: 96vw !important; }
.grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
.kpi { padding: 14px; }
.card { padding: 14px; }
}
/* 宽表（≥7列）：改为横向滚动而非压缩列宽 */
.table-wrap.wide > table{ min-width: 880px; }
@media (max-width:700px){ .table-wrap.wide > table{ min-width: 720px; } }
/* 审批人明细表：列数随统计指标增长（2026-09-21 加到 11 列）——
给足 min-width 让它横向滚动，别把「通话时长」这类列压成两行 */
.table-wrap.wide > table.rich{ min-width: 1240px; }
/* ============================================================
Grid 垂直间距修复（治「上下挤在一起 / 覆盖」）
.grid 容器原本没有 margin-bottom —— KPI 行与下方卡片行间距为 0，
卡片阴影紧贴上排卡底边，视觉上像被覆盖。
同时 grid 单元格内的 .card 自带 margin-bottom:18px 会把单元格
撑高 18px（底部虚位、两列不齐），在 grid 内归零、由 gap 统一负责。
============================================================ */
.grid { margin-bottom: 18px; }
.grid > .card,
.grid > .kpi { margin-bottom: 0; }
/* 页面最后一个 grid 不留多余底部间距 */
#page > .grid:last-child { margin-bottom: 0; }
/* ============================================================
大导航可收缩 / 展开子导航
—— 点击分组标题切换；前两项默认展开，其余默认收缩；状态持久化
============================================================ */
.nav-group-title{
display:flex; align-items:center; gap:6px;
cursor:pointer; user-select:none;
transition:color var(--t-fast) var(--ease);
}
.nav-group-title:hover{ color:var(--text); }
.nav-group-title .nav-arrow{
display:inline-block; width:12px; font-size:10px;
color:var(--muted); transition:transform var(--t-fast) var(--ease);
}
.nav-group.open .nav-group-title .nav-arrow{ transform:rotate(0deg); }
.nav-subs{ overflow:hidden; }
/* ============================================================
侧栏导航视觉重制
1. 主导航（工作台/待办提醒/个人中心）：加粗 + 圆角色块，选中态为浅蓝块+蓝字+左侧蓝条
2. 大导航标题（外呼统计/产品资料/…）：浅灰块 + 加粗，一眼区分层级
3. 子导航容器：白色块 + 左侧竖线，与侧栏灰底分离，不再糊在一起
说明：选中态统一用「浅蓝底 + 蓝字」而非深蓝底白字，
避免 SVG 图标在深色底上不可见（侧栏图标为原色 SVG）
============================================================ */
/* --- 主导航（叶子项） --- */
.nav-item{
margin:2px 10px;
padding:11px 14px;
border-radius:9px;
border-left:none;
font-size:14.5px;
font-weight:600;
color:#1D2129;
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.nav-item:hover{
background:#FFFFFF;
color:var(--primary);
box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.nav-item:active{ background:var(--active-bg); }
.nav-item.active{
background:var(--primary-lighter);
color:var(--primary);
font-weight:700;
box-shadow:inset 3px 0 0 var(--primary);
}
.nav-item .ico{ display:flex; align-items:center; justify-content:center; }
/* --- 大导航标题（可点击收缩/展开） --- */
.nav-group{ margin-top:2px; }
.nav-group-title{
margin:8px 10px 4px;
padding:8px 12px;
background:rgba(29,33,41,.045);
border-radius:8px;
font-size:12px;
font-weight:700;
color:#1D2129;
letter-spacing:.5px;
}
.nav-group-title:hover{
background:rgba(0,110,255,.08);
color:var(--primary);
}
.nav-group.open .nav-group-title{
background:rgba(0,110,255,.07);
color:var(--primary-dark);
}
.nav-group-title .nav-arrow{
width:12px; font-size:9px; color:var(--muted);
transition:transform var(--t-fast) var(--ease);
}
.nav-group.open .nav-group-title .nav-arrow{ color:var(--primary); }
/* --- 子导航容器：白底色块，与侧栏底色分离 --- */
.nav-subs{
margin:2px 10px 8px 14px;
padding:5px 6px;
background:#FFFFFF;
border-radius:9px;
border-left:2px solid #E1E6EE;
box-shadow:0 1px 3px rgba(0,0,0,.03);
}
/* --- 子导航项 --- */
.subnav-item{
display:block;
padding:8px 12px;
margin:1px 0;
border-radius:7px;
border-left:none;
margin-right:0;
color:#4E5969;
font-size:13px;
font-weight:500;
transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease);
}
.subnav-item:hover{
background:var(--hover-blue);
color:var(--primary);
}
.subnav-item:active{ background:#E1EDFF; }
.subnav-item.active{
color:var(--primary);
font-weight:700;
background:var(--primary-lighter);
box-shadow:inset 3px 0 0 var(--primary);
}
/* ============================================================
跟进记录表（行内直接填写）
—— 紧凑输入框、跟进记录固定高度可展开、字数计数、新建行高亮
============================================================ */
.ftable input.finput{
width:100%; border:1px solid transparent; background:transparent;
padding:5px 7px; border-radius:6px; font-size:13px; color:var(--text);
transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease);
}
.ftable input.finput:hover{ background:#F7F9FC; border-color:var(--border-light); }
.ftable input.finput:focus{
background:#fff; border-color:var(--primary); outline:none;
box-shadow:0 0 0 2px rgba(0,110,255,.12);
}
/* 记录时间列 */
.ftime{ font-size:12px; color:#86909C; white-space:nowrap; }
/* 新建行：淡蓝底区分 */
.f-new-row{ background:var(--primary-lighter); }
.f-new-row:hover{ background:#EAF2FF; }
/* ============================================================
跟进记录表补充：复制角标 / 分页条 / 日期控件位置 / 布局防变形
============================================================ */
/* 单元格内 输入框 + 复制角标 的组合 */
.fcell-wrap{ display:flex; align-items:center; gap:4px; min-width:0; }
.fcell-wrap .finput{ flex:1; min-width:0; }
.fcell-wrap .fcopy{
flex:none; font-size:12px; line-height:1; color:#A9B0BF;
cursor:pointer; user-select:none; padding:2px;
border-radius:4px; opacity:.55;
transition:color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.fcell-wrap .fcopy:hover{ color:var(--primary); opacity:1; background:var(--primary-lighter); }
/* 分页条 */
.fpage-bar{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border-light); }
.fpage{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#86909C; }
.fpage-lb{ white-space:nowrap; }
.fpage-info{ white-space:nowrap; margin:0 4px; }
.fpage .btn[disabled]{ opacity:.4; cursor:not-allowed; }
/* 「今日」日期选择器：与搜索框同高同风格，位置在搜索框之后 */
.fdatepick{ margin-left:4px; }
/* 下次回访：斜杠文本输入，居中显示更像日期 */
.ftable .fnext{ text-align:center; }
/* 表格布局防变形：列宽按定义收缩，内容不撑破 */
.ftable{ table-layout:fixed; }
.ftable td{ vertical-align:top; }
.ftable .ops{ flex-wrap:nowrap; }
/* ============================================================
跟进记录表 v4：输入框对比明显 / 新建行对齐 / 加载动画
============================================================ */
/* 输入框：白底 + 可见边框（不与背景糊在一起） */
.ftable input.finput,
.ftable input.finput:hover,
.ftable input.finput:focus,
/* 新建行记录框与输入框同高，不撑行 */
/* 筛选下拉与搜索框同风格 */
.fsel{ width:110px; }
.fapplied{
display:inline-block; margin:-6px 0 8px; padding:3px 10px;
font-size:12px; color:var(--primary); background:var(--primary-lighter);
border-radius:6px;
}
/* 加载动画（圆形转圈） */
.floading{
position:absolute; inset:0; z-index:5;
background:rgba(255,255,255,.78);
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; border-radius:12px;
}
.floading .spinner{
width:34px; height:34px; border-radius:50%;
border:3px solid #E5EAF2; border-top-color:var(--primary);
animation:fspin .8s linear infinite;
}
.floading-txt{ font-size:13px; color:#4E5969; }
@keyframes fspin{ to{ transform:rotate(360deg); } }
/* =============================================================
* 邮件写信器（邮件客户端式 UI）
* ============================================================= */
.mc-shell{ display:grid; grid-template-columns:minmax(0,1fr) 368px; gap:16px; align-items:start; }
.mc-shell.mc-wide{ grid-template-columns:minmax(0,1fr); }
.mc-shell.mc-wide .mc-side{ display:none; }
/* --- 顶部模板固定条 --- */
.mc-tplbar{ display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff;
border:1px solid var(--border); border-radius:12px; margin-bottom:14px; overflow-x:auto; }
.mc-tplbar::-webkit-scrollbar{ height:4px; }
.mc-tplbar::-webkit-scrollbar-thumb{ background:#DCE1E8; border-radius:4px; }
.mc-tpl-lb{ flex:none; font-size:12px; color:#86909C; margin-right:2px; }
.mc-tpl-chip{ position:relative; flex:none; display:inline-flex; align-items:center; gap:6px;
padding:7px 14px 7px 12px; border-radius:20px; border:1px solid var(--border); background:#F7F8FA;
color:#4E5969; font-size:13px; cursor:pointer; transition:.15s; white-space:nowrap; }
.mc-tpl-chip:hover{ border-color:#9CC4FF; background:#F0F6FF; color:#006EFF; }
.mc-tpl-chip.on{ background:#006EFF; border-color:#006EFF; color:#fff; box-shadow:0 2px 8px rgba(0,110,255,.25); }
.mc-tpl-chip.on .mc-pin{ color:#BBD9FF; }
.mc-tpl-chip .mc-pin{ color:#C0C8D4; font-size:12px; margin-left:2px; }
.mc-tpl-chip .mc-pin:hover{ color:#FF8800; }
.mc-tpl-chip.on .mc-pin:hover{ color:#FFD699; }
.mc-tpl-chip.pinned{ order:-1; }
.mc-tpl-def{ flex:none; margin-left:auto; font-size:12px; color:#86909C; white-space:nowrap; }
.mc-tpl-def b{ color:#006EFF; font-weight:600; }
/* --- 邮件头（收件人 / 抄送 / 主题） --- */
.mc-head{ background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.mc-field{ display:flex; align-items:center; gap:12px; padding:0 16px; min-height:46px;
border-bottom:1px solid #F2F4F7; transition:.15s; }
.mc-field:focus-within{ background:#FAFCFF; }
.mc-field:last-child{ border-bottom:none; }
.mc-field > label{ flex:none; width:64px; font-size:13px; color:#86909C; }
.mc-field input{ flex:1; min-width:0; border:none; outline:none; background:transparent;
font-size:14px; color:#1F2329; height:44px; font-family:inherit; }
.mc-field input::placeholder{ color:#C0C8D4; }
.mc-field .mc-fops{ flex:none; display:flex; gap:4px; }
/* 主题已是富文本编辑区（见下方 .mc-subj-ed），不再用 .mc-subj-in */
.mc-tagbtn{ font-size:12px; color:#006EFF; cursor:pointer; padding:2px 6px; border-radius:4px; white-space:nowrap; }
.mc-tagbtn:hover{ background:#E8F1FF; }
/* --- 富文本编辑器 --- */
.me-wrap{ border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#fff; }
.me-tb{ display:flex; flex-wrap:wrap; align-items:center; gap:2px; padding:7px 10px;
background:#F7F8FA; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:3; }
.me-grp{ display:inline-flex; align-items:center; gap:2px; padding-right:8px; margin-right:6px;
border-right:1px solid #E5E8ED; }
.me-grp:last-child{ border-right:none; margin-right:0; }
.me-btn{ min-width:30px; height:29px; padding:0 6px; border:1px solid transparent; background:transparent;
border-radius:6px; cursor:pointer; font-size:13px; color:#4E5969; line-height:1; }
.me-btn:hover{ background:#E8F1FF; border-color:#C9DDFF; color:#006EFF; }
.me-btn:active{ background:#D6E6FF; }
.me-sel{ height:29px; max-width:130px; border:1px solid #E5E6EB; border-radius:6px; background:#fff;
font-size:12px; color:#4E5969; padding:0 4px; cursor:pointer; }
.me-sel:hover{ border-color:#9CC4FF; color:#006EFF; }
.me-var-sel{ color:#006EFF; border-color:#C9DDFF; background:#F5F9FF; }
.me-body{ min-height:430px; max-height:none; padding:20px 24px; outline:none; font-size:14px;
line-height:1.9; color:#1F2329; background:#fff; overflow-y:auto; }
.me-body:empty:before{ content:'在此输入邮件正文…'; color:#C0C8D4; }
.me-body img{ max-width:100%; border-radius:6px; }
.me-body hr{ border:none; border-top:1px solid #E5E6EB; margin:12px 0; }
.me-body ul, .me-body ol{ margin:0 0 8px; padding-left:24px; }
.me-foot{ display:flex; align-items:center; gap:10px; padding:8px 14px; border-top:1px solid #F2F4F7;
background:#FCFDFF; font-size:12px; color:#86909C; }
/* --- 变量胶囊 --- */
.mv{ display:inline; padding:1px 6px; margin:0 1px; border-radius:5px; font-size:13.5px;
cursor:pointer; transition:.15s; white-space:nowrap; }
.mv-empty{ background:#FFF4E8; color:#D97A00; border:1px dashed #FFB265; }
.mv-empty:hover{ background:#FFE9CF; }
.mv-ok{ background:#E8F9EF; color:#0A8F4A; border:1px solid #A6E5C1; font-weight:500; }
.mv-ok:hover{ background:#D6F3E3; }
/* 选项型变量：值是从候选里点选的，正文中加下划线标记（主管一眼可辨） */
.mv-pick{ background:#E8F9EF; color:#0A8F4A; border:1px solid #A6E5C1; font-weight:500;
text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.mv-pick:hover{ background:#D6F3E3; }
/* 管理员端模板正文里的变量只作展示（没有可填的输入框），不要显示成可点 */
#admTplBody .mv{ cursor:default; }
/* --- 选项型变量的候选按钮组（销售端写信页右侧面板） --- */
.mc-pick{ display:flex; flex-wrap:wrap; gap:6px; }
.mc-pick-btn{ padding:5px 12px; border:1px solid #D6DCE6; border-radius:14px; background:#fff;
font-size:12.5px; color:#4E5969; cursor:pointer; font-family:inherit; line-height:1.5;
transition:background .15s, color .15s, border-color .15s; }
.mc-pick-btn:hover{ border-color:#006EFF; color:#006EFF; background:#F5F9FF; }
.mc-pick-btn.on{ background:#006EFF; border-color:#006EFF; color:#fff; font-weight:500; }
.mc-pick-btn.on:hover{ background:#0060E0; color:#fff; }
.mc-pick-btn.wide{ flex:1 1 auto; text-align:left; }
/* --- 正文内联「二选一」小气泡（点正文里的选项型变量胶囊弹出） --- */
.me-pickpop{ position:fixed; z-index:9999; min-width:150px; max-width:320px;
background:#fff; border:1px solid #E5E6EB; border-radius:10px; padding:10px 12px 12px;
box-shadow:0 6px 24px rgba(31,35,41,.12); }
.me-pickpop-t{ display:flex; align-items:center; font-size:12px; color:#86909C; margin-bottom:8px; }
.me-pickpop-t .me-pickpop-x{ margin-left:auto; cursor:pointer; font-size:15px; line-height:1;
color:#C0C8D4; padding:0 2px; }
.me-pickpop-t .me-pickpop-x:hover{ color:#E54545; }
.me-pickpop-b{ display:flex; flex-wrap:wrap; gap:6px; }
/* --- 附件区 --- */
.mc-att{ display:flex; flex-wrap:wrap; gap:8px; }
.mc-att-item{ display:inline-flex; align-items:center; gap:7px; padding:7px 10px; background:#F7F8FA;
border:1px solid var(--border); border-radius:8px; font-size:12.5px; color:#4E5969; max-width:100%; }
.mc-att-item .fname{ max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mc-att-item .fsz{ color:#A9B0BC; font-size:11.5px; }
.mc-att-item .fdel{ color:#C0C8D4; cursor:pointer; font-size:14px; line-height:1; }
.mc-att-item .fdel:hover{ color:#E54545; }
.mc-att-drop{ border:1.5px dashed #D6DCE6; border-radius:10px; padding:14px; text-align:center;
color:#A9B0BC; font-size:12.5px; cursor:pointer; transition:.15s; }
.mc-att-drop:hover, .mc-att-drop.over{ border-color:#006EFF; background:#F5F9FF; color:#006EFF; }
/* --- 右侧面板 --- */
.mc-side{ position:sticky; top:16px; display:flex; flex-direction:column; gap:14px;
max-height:calc(100vh - 100px); overflow-y:auto; padding-right:2px; }
.mc-side::-webkit-scrollbar{ width:5px; }
.mc-side::-webkit-scrollbar-thumb{ background:#DCE1E8; border-radius:4px; }
.mc-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.mc-card-t{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#1F2329; margin-bottom:10px; }
.mc-card-t .cnt{ margin-left:auto; font-size:11.5px; font-weight:400; color:#86909C; }
.mc-var{ margin-bottom:12px; }
.mc-var:last-child{ margin-bottom:0; }
.mc-var label{ display:block; font-size:12.5px; color:#4E5969; margin-bottom:4px; }
.mc-var label .tip{ color:#A9B0BC; font-weight:400; }
.mc-var-head label{ margin-bottom:6px; }
.mc-var input{ width:100%; height:34px; padding:0 10px; border:1px solid var(--border); border-radius:7px;
font-size:13px; color:#1F2329; outline:none; font-family:inherit; transition:.15s; }
.mc-var input:focus{ border-color:#006EFF; }
.mc-var input.ok{ border-color:#A6E5C1; background:#FAFFFC; }
.mc-var input.sys{ background:#F7F8FA; color:#86909C; }
.mc-empty-vars{ font-size:13px; color:#A9B0BC; padding:6px 0; }
/* --- 规范速查 --- */
.mc-rule{ font-size:12.5px; color:#4E5969; line-height:1.85; }
.mc-rule ul{ margin:0; padding:0; list-style:none; }
.mc-rule li{ position:relative; padding-left:16px; margin-bottom:7px; }
.mc-rule li:before{ content:'▸'; position:absolute; left:0; color:#006EFF; }
.mc-rule li:last-child{ margin-bottom:0; }
.mc-rule-more{ margin-top:10px; font-size:12px; color:#006EFF; cursor:pointer; }
.mc-rule-more:hover{ text-decoration:underline; }
/* --- 底部操作 --- */
.mc-actbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }
.mc-actbar .spacer{ flex:1; }
/* --- 规范全文弹窗 --- */
.rule-doc{ font-size:13px; line-height:1.95; color:#333E52; max-height:60vh; overflow-y:auto; padding-right:6px; }
.rule-doc p{ margin:0 0 6px; }
.rule-doc b{ color:#1F2329; }
/* ================= 销售工作台（应用中心 · 企微风格） ================= */
.wb-hero{ position:relative; overflow:hidden; border-radius:14px; padding:22px 26px; margin-bottom:20px;
background:linear-gradient(118deg,#006EFF 0%,#3D8BFF 55%,#63A9FF 100%); color:#fff;
box-shadow:0 10px 26px rgba(0,110,255,.24); }
.wb-hero::after{ content:""; position:absolute; right:-46px; top:-70px; width:230px; height:230px;
border-radius:50%; background:rgba(255,255,255,.13); pointer-events:none; }
.wb-hero::before{ content:""; position:absolute; right:64px; bottom:-90px; width:160px; height:160px;
border-radius:50%; background:rgba(255,255,255,.09); pointer-events:none; }
.wb-hero h2{ position:relative; margin:0 0 7px; font-size:19px; font-weight:700; letter-spacing:.3px; }
.wb-hero p{ position:relative; margin:0; font-size:13px; opacity:.92; line-height:1.7; }
.wb-hero .wb-hero-meta{ position:relative; margin-top:12px; display:flex; gap:20px; flex-wrap:wrap; font-size:12px; opacity:.9; }
.wb-hero .wb-hero-meta b{ font-weight:600; }
.wb-group{ margin-bottom:22px; }
.wb-group-hd{ display:flex; align-items:center; gap:10px; margin:0 0 12px; font-size:14px; font-weight:600; color:#1F2329; }
.wb-group-hd .line{ flex:1; height:1px; background:linear-gradient(90deg,#E5E9F0,rgba(229,233,240,0)); }
.wb-group-hd .cnt{ font-size:12px; font-weight:400; color:#86909C; }
.wb-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.wb-app{ position:relative; display:flex; flex-direction:column; gap:10px; padding:16px; min-height:118px;
background:var(--card); border:1px solid #EDF0F5; border-radius:12px; cursor:pointer; box-sizing:border-box;
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.wb-app:hover{ transform:translateY(-3px); border-color:#BCD6FF; box-shadow:0 12px 26px rgba(0,110,255,.14); }
.wb-app:active{ transform:translateY(-1px); }
.wb-app-ico{ width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
font-size:21px; line-height:1; flex:0 0 auto; }
.wb-app-ico img{ width:22px; height:22px; display:block; }
.wb-app-name{ font-size:14px; font-weight:600; color:#1F2329; line-height:1.3; }
.wb-app-desc{ font-size:12px; color:#86909C; line-height:1.5; flex:1; }
.wb-app-badge{ position:absolute; top:13px; right:13px; }
.wb-app-dot{ position:absolute; top:14px; right:14px; width:7px; height:7px; border-radius:50%; background:#FF8800; }
.wb-app-soon{ position:absolute; top:13px; right:13px; font-size:11px; color:#A9B2C2; }
.wb-app.is-soon{ cursor:default; }
.wb-app.is-soon:hover{ transform:none; border-color:#EDF0F5; box-shadow:none; }
/* 分组内「添加应用」虚线占位 */
.wb-app-add{ align-items:center; justify-content:center; text-align:center; border-style:dashed; border-color:#DCE3EC;
background:rgba(247,249,252,.6); }
.wb-app-add:hover{ border-color:#9EC2FF; }
.wb-app-add .wb-app-ico{ background:#F2F5FA; color:#A9B2C2; font-size:22px; }
.wb-app-add .wb-app-name{ color:#6B7686; font-weight:500; }
.wb-app-add .wb-app-desc{ flex:0; }
.wb-group-hd .wb-tip{ font-size:12px; font-weight:400; color:#86909C; }
/* --- 应用自定义 logo（销售端应用卡） --- */
.wb-app-ico.has-logo{ padding:0; overflow:hidden; border:1px solid #EDF0F5; box-sizing:border-box; }
.wb-app-ico.has-logo img{ width:100%; height:100%; object-fit:contain; display:block; border-radius:10px; background:#fff; }
/* --- 应用管理：logo 上传 --- */
.wb-logo-pick{ display:inline-flex; width:42px; height:42px; border-radius:11px; overflow:hidden; cursor:pointer;
border:1px dashed #DCE3EC; align-items:center; justify-content:center; transition:border-color .15s; }
.wb-logo-pick:hover{ border-color:#7FA8E8; }
.wb-logo-pick img{ width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
.wb-logo-pick .ph{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:19px; }
.wb-logo-del{ font-size:11px; color:#86909C; cursor:pointer; }
.wb-logo-del:hover{ color:#E54545; text-decoration:underline; }
.wb-logo-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.wb-logo-prev{ display:inline-flex; width:52px; height:52px; border-radius:13px; overflow:hidden; background:#F5F7FA;
align-items:center; justify-content:center; font-size:23px; border:1px solid #E5E9F0; }
.wb-logo-prev img{ width:100%; height:100%; object-fit:contain; display:block; background:#fff; }
.wb-logo-row .tip{ font-size:12px; color:#86909C; }
/* --- 应用管理：工作台预览 --- */
.wb-prev-hint{ font-size:12px; color:#86909C; background:#F7FAFF; border:1px solid #E3EEFF; border-radius:8px;
padding:8px 12px; margin-bottom:14px; line-height:1.7; }
/* --- 云产品用量查询：统计小卡 --- */
.cu-stat{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.cu-stat .box{ background:var(--card); border:1px solid #EDF0F5; border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); }
.cu-stat .box .k{ font-size:12px; color:#86909C; margin-bottom:6px; }
.cu-stat .box .v{ font-size:21px; font-weight:700; color:#1F2329; }
.cu-stat .box .v small{ font-size:12px; font-weight:400; color:#86909C; margin-left:3px; }
.cu-stat .box code{ font-size:12px; background:#F2F5FA; padding:1px 5px; border-radius:4px; }
/* --- 报价表单：Excel 风格表格（格子里直接输入，无输入框边框） --- */
.qf-sheet-wrap{ overflow-x:auto; border:1px solid #D0D7E2; border-radius:8px; background:#fff; }
/* ⚠ 必须 table-layout:fixed：
① 否则自建列表头里的列名输入框（ 的固有宽度）会把该列撑到 240px+，
把别的列挤扁、表格横向溢出，新加的列甚至被挤出可视区（用户报过"新加的列不能编辑"）；
② 固定布局下列宽只由 | 的 width 决定，规格要求列自动吃掉剩余宽度。
配合 min-width（由 PAGES.quoteForm 按列数动态给）：窗口太窄时横向滚动，
而不是把每列压到 60px 无法阅读。 */
.qf-sheet{ width:100%; border-collapse:collapse; font-size:12.5px; table-layout:fixed; }
.qf-sheet th{ background:#F2F6FC; color:#1F2329; font-weight:600; border:1px solid #D0D7E2;
padding:7px 8px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qf-sheet td{ border:1px solid #D0D7E2; padding:0; vertical-align:top; }
/* ⚠ 序号 / 金额这类纯文本格不要给上下 padding ——
它没有 .cell 撑高，td 高度会变成「文本 + padding」而**高于 .cell**，
于是同一行的输入框看起来「没铺满格子」（上下各留几像素）。 */
.qf-sheet td.c{ text-align:center; padding:0 4px; color:#86909C; vertical-align:middle; }
.qf-sheet .cell{ display:block; width:100%; box-sizing:border-box; border:none; background:transparent;
padding:7px 8px; min-height:32px; font-family:inherit; font-size:12.5px; line-height:1.6; color:#1F2329;
outline:none; resize:none; }
.qf-sheet .cell:focus{ box-shadow:inset 0 0 0 2px #006EFF; background:#F7FAFF; }
.qf-sheet select.cell{ padding-right:20px; cursor:pointer; appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 7px center; }
.qf-sheet .cell::placeholder{ color:#C2CAD6; }
/* 行尾操作列：删除按钮靠右、比原来大一圈，且随整行垂直居中（不再贴在格子顶部）
⚠ 必须显式写 display:table-cell —— 全局有 `.ops{display:inline-flex}`（是给按钮组用的），
同名的 | 会吃到它变成 flex 容器：text-align 彻底失效、按钮被顶到左边，
整格也不算表格单元格了（用户报过「删除功能左对齐」）。 */
.qf-sheet td.ops{ display:table-cell; text-align:right; padding:0 12px 0 0;
white-space:nowrap; vertical-align:middle; }
.qf-sheet .row-del{ display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:7px; color:#A9B2C2; cursor:pointer; font-size:14px;
user-select:none; transition:background .15s, color .15s; }
.qf-sheet .row-del:hover{ background:#FFECE8; color:#E54545; }
/* --- 报价信息·备注：固定高度多行输入（不自动增高，不会把下面的清单表顶下去） ---
⚠ 选择器必须带 .f-item 前缀：全局 `.f-item textarea{ min-height:90px }` 权重相同但定义更靠前，
否则这个 56px 会被顶掉（踩过）。 */
.f-item textarea.qf-remark, textarea.qf-remark{ height:56px; min-height:56px; resize:vertical;
padding:7px 12px; line-height:1.6; font-family:inherit; }
/* --- 表头「＋ 加列」与自定义列表头（改名 / 左右移 / 删除） --- */
.qf-sheet .qf-addcol{ display:inline-block; padding:3px 8px; border-radius:6px; font-size:12px;
font-weight:600; color:#006EFF; background:#EAF3FF; cursor:pointer; user-select:none;
transition:background .15s, color .15s; }
.qf-sheet .qf-addcol:hover{ background:#006EFF; color:#fff; }
.qf-col-hd{ display:flex; align-items:center; gap:4px; }
/* ⚠ 列名输入框必须 width:100%： 的固有宽度（默认约 170px）在
table-layout:auto 下会把整列撑到 240px+，把别的列挤扁（踩过）。 */
.qf-col-name{ width:100%; flex:1 1 auto; min-width:0; border:1px solid transparent; border-radius:5px;
background:transparent; font:inherit; font-weight:600; color:#1F2329; text-align:center;
padding:2px 4px; outline:none; }
.qf-col-name:hover{ border-color:#C6DDFF; background:#fff; }
.qf-col-name:focus{ border-color:#006EFF; background:#fff; box-shadow:0 0 0 2px #E8F1FF; }
.qf-col-ops{ display:flex; align-items:center; gap:1px; flex:0 0 auto; }
.qf-col-ops i{ display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
border-radius:4px; font-style:normal; font-size:11px; color:#A9B2C2; cursor:pointer;
user-select:none; transition:background .15s, color .15s; }
.qf-col-ops i:hover{ background:#EAF3FF; color:#006EFF; }
.qf-col-ops i.del:hover{ background:#FFECE8; color:#E54545; }
/* --- 分页栏（Excel 的工作表标签）：2026-09-17 起放在「云服务清单」标题行右侧 --- */
.qf-pages-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.qf-tab{ display:inline-flex; align-items:center; gap:5px; padding:3px 6px 3px 9px; cursor:pointer;
border:1px solid #D9E0EA; border-radius:7px; background:#F7F9FC; font-size:12px;
color:#4E5969; user-select:none; font-weight:400;
transition:background .15s, border-color .15s, color .15s; }
.qf-tab:hover{ background:#EEF4FF; border-color:#C6DDFF; }
.qf-tab.on{ background:#EAF3FF; border-color:#006EFF; color:#006EFF; font-weight:600; }
.qf-tab b{ font-weight:inherit; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qf-tab .cnt{ font-size:10.5px; color:#86909C; background:#EDF1F7; border-radius:9px; padding:0 5px; }
.qf-tab.on .cnt{ background:#fff; color:#006EFF; }
.qf-tab i{ font-style:normal; font-size:10.5px; color:#A9B2C2; width:14px; height:14px; border-radius:4px;
display:inline-flex; align-items:center; justify-content:center; }
.qf-tab i:hover{ background:#EAF3FF; color:#006EFF; }
.qf-tab i.x:hover{ background:#FFECE8; color:#E54545; }
.qf-tab-input{ width:96px; height:20px; border:1px solid #006EFF; border-radius:5px; padding:0 5px;
font-size:12px; font-family:inherit; outline:none; box-shadow:0 0 0 2px #E8F1FF; }
.qf-tab-add{ display:inline-flex; align-items:center; justify-content:center; width:23px; height:23px;
border:1px dashed #C9CDD4; border-radius:7px; color:#86909C; font-size:13px; cursor:pointer;
user-select:none; transition:all .15s; }
.qf-tab-add:hover{ border-color:#006EFF; border-style:solid; background:#EAF3FF; color:#006EFF; }
.qf-pages-tip{ margin-left:2px; font-size:11.5px; color:#B0B8C4; font-weight:400; }
/* --- 主题变量胶囊字段（销售端写信 / 管理员端模板编辑 共用，见 js/subjfield.js） --- */
.mc-subj-ed{ flex:1; min-width:0; min-height:22px; max-height:80px; overflow-y:auto;
outline:none; background:transparent; font-size:13.5px; font-weight:600; color:var(--text);
line-height:1.8; white-space:pre-wrap; word-break:break-word; padding:2px 0; }
.mc-subj-ed:empty:before{ content:attr(data-ph); color:#C0C8D4; font-weight:400; }
.mc-subj-ed .mv{ cursor:pointer; user-select:none; }
.mc-subj-ed .mv-ok{ font-weight:600; }
/* 管理员端：主题行 + 「插入变量」下拉 */
.subj-row{ display:flex; align-items:flex-start; gap:8px; }
.subj-row .mc-subj-ed{ border:1px solid var(--border); border-radius:8px; padding:9px 11px;
background:#fff; font-weight:500; max-height:104px; }
.subj-row .mc-subj-ed:focus{ border-color:#006EFF; box-shadow:0 0 0 3px rgba(0,110,255,.12); }
.subj-row .mc-subj-ed .mv{ cursor:default; }
.subj-row .subj-var-sel{ flex:none; width:132px; }
.subj-tip{ font-size:12px; color:#86909C; margin-top:6px; line-height:1.7; }
/* --- 报价单预览（贴近导出的 Excel 版式） --- */
.qf-prev{ overflow-x:auto; }
.qf-prev table{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:920px; }
.qf-prev th{ background:#4A7EBB; color:#fff; font-weight:600; text-align:center; padding:9px 8px; border:1px solid #9DB6D6; }
.qf-prev td{ border:1px solid #9DB6D6; padding:8px; vertical-align:middle; }
.qf-prev td.c{ text-align:center; }
.qf-prev tr.gp td{ background:#DCE9F7; color:#1F4E79; font-weight:600; }
.qf-prev .cap{ text-align:center; font-size:17px; font-weight:700; letter-spacing:2px; margin:0 0 10px; }
.qf-prev .meta{ font-size:12px; color:#4E5969; line-height:1.9; }
.qf-prev .sum{ text-align:right; font-size:13px; color:#4E5969; margin-top:14px; }
.qf-prev .sum b{ color:#006EFF; font-size:17px; }
/* 多分页预览：每页一段，与导出的工作表一一对应 */
.qf-prev .qf-prev-sec{ margin-top:18px; padding-top:14px; border-top:1px dashed #DCE3EC; }
.qf-prev .qf-prev-sec:first-of-type{ margin-top:12px; padding-top:0; border-top:none; }
.qf-prev .sec-cap{ font-size:13px; font-weight:600; color:#1F4E79; margin:0 0 8px; }
/* ================= 顶栏页签（首页 + 可同时打开/关闭多个应用页，合并在同一行） ================= */
.topbar .tabbar{ display:flex; align-items:center; gap:7px; flex:1; min-width:0;
overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding-right:12px; }
.topbar .tabbar::-webkit-scrollbar{ display:none; }
.topbar .tab-fixed{ position:relative; font-size:13px; font-weight:600; color:#006EFF; cursor:pointer; white-space:nowrap;
flex:0 0 auto; padding:5px 12px; border-radius:8px; margin-right:6px; transition:background .14s; }
.topbar .tab-fixed::after{ content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
width:1px; height:18px; background:var(--border); }
.topbar .tab-fixed:hover{ background:#F2F6FC; }
.topbar .tab-fixed.active{ background:#EAF3FF; }
/* 「关闭全部页签」按钮：与消息中心按钮同尺寸 */
.topbar .topbtn{ width:38px; height:38px; border-radius:10px; background:#F5F7FA; display:flex; align-items:center;
justify-content:center; cursor:pointer; font-size:15px; color:#4E5969; margin-right:6px; flex:0 0 auto;
transition:background .15s, color .15s; }
.topbar .topbtn:hover{ background:#F2F3F5; color:#006EFF; }
.topbar .topbtn[data-empty="1"]{ opacity:.4; cursor:default; }
.topbar .topbtn[data-empty="1"]:hover{ background:#F5F7FA; color:#4E5969; }
/* 拖拽排序中的页签 */
.topbar .tabx.dragging{ opacity:.45; }
.topbar .tabx.drop-target{ border-color:#7FA8E8; background:#F0F6FF; }
.topbar .tabx{ display:flex; align-items:center; gap:6px; padding:5px 9px 5px 12px; border-radius:8px;
font-size:13px; color:#4E5969; cursor:pointer; white-space:nowrap; max-width:180px; flex:0 0 auto;
border:1px solid transparent; transition:background .14s, color .14s, border-color .14s; }
.topbar .tabx:hover{ background:#F2F6FC; color:#1F2329; }
.topbar .tabx.active{ background:#EAF3FF; color:#006EFF; font-weight:600; border-color:#C6DDFF; }
.topbar .tabx .tb-t{ overflow:hidden; text-overflow:ellipsis; }
.topbar .tabx .tb-x{ width:16px; height:16px; border-radius:4px; display:flex; align-items:center; justify-content:center;
font-size:13px; line-height:1; color:#A9B2C2; flex:0 0 auto; transition:background .14s, color .14s; }
.topbar .tabx .tb-x:hover{ background:#DCE3EC; color:#E54545; }
.topbar .tabx.active .tb-x{ color:#7FA8E8; }
.topbar .tabx.active .tb-x:hover{ background:#C6DDFF; color:#E54545; }
.topbar .tabbar .tabs-act{ font-size:12px; color:#86909C; cursor:pointer; padding:3px 8px; border-radius:6px;
white-space:nowrap; flex:0 0 auto; }
.topbar .tabbar .tabs-act:hover{ background:#F2F6FC; color:#006EFF; }
/* ================= 应用拆包：结果表单 ================= */
.up-result{ font-size:13px; line-height:1.95; color:#333E52; }
.up-result h4{ margin:16px 0 8px; font-size:14px; color:#1F2329; }
.up-result h4:first-child{ margin-top:0; }
.up-result table{ width:100%; border-collapse:collapse; font-size:12.5px; margin:6px 0 4px; }
.up-result th, .up-result td{ border:1px solid #E5E9F0; padding:7px 9px; text-align:left; vertical-align:top; }
.up-result th{ background:#F5F8FD; font-weight:600; }
.up-result code{ background:#F2F5FA; padding:1px 5px; border-radius:4px; font-size:12px; }
.up-result ul{ margin:4px 0 4px 18px; padding:0; }
.up-result li{ margin:2px 0; }
/* --- Markdown 报告渲染（由 md-lite.js 输出） --- */
.md-file{ display:inline-block; font-size:12px; color:#4E5969; background:#F2F6FC; border:1px solid #DCE3EC;
border-radius:6px; padding:4px 10px; margin-bottom:12px; }
.md-body{ font-size:13px; line-height:1.9; color:#333E52; }
.md-body h1{ font-size:19px; margin:0 0 10px; color:#1F2329; }
.md-body h2{ font-size:16px; margin:20px 0 8px; padding-bottom:6px; border-bottom:2px solid #EDF1F7; color:#1F2329; }
.md-body h3{ font-size:14px; margin:15px 0 6px; color:#1F2329; }
.md-body h4, .md-body h5, .md-body h6{ font-size:13px; margin:12px 0 5px; color:#1F2329; }
.md-body p{ margin:8px 0; }
.md-body hr{ border:none; border-top:1px solid #E5E9F0; margin:18px 0; }
.md-body blockquote{ margin:10px 0; padding:8px 14px; border-left:3px solid #B7C9E0; background:#F7FAFF;
color:#4E5969; font-size:12.5px; border-radius:0 6px 6px 0; }
.md-body ul, .md-body ol{ margin:8px 0 8px 20px; padding:0; }
.md-body li{ margin:3px 0; }
.md-body code{ background:#F2F5FA; padding:1px 5px; border-radius:4px; font-size:12px;
font-family:Consolas,Monaco,"Courier New",monospace; }
.md-body pre.md-code{ background:#F5F7FA; border:1px solid #E5E9F0; border-radius:8px; padding:12px 14px;
overflow:auto; margin:10px 0; }
.md-body pre.md-code code{ background:none; padding:0; font-size:12px; line-height:1.7; }
.md-body .md-table-wrap{ overflow-x:auto; margin:10px 0; }
.md-body table.md-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.md-body table.md-table th{ background:#4A7EBB; color:#fff; font-weight:600; }
.md-body table.md-table th, .md-body table.md-table td{ border:1px solid #DCE3EC; padding:7px 9px;
text-align:left; vertical-align:top; }
.md-body a{ color:#006EFF; }
/* --- 管理员上传拆包报告 --- */
.up-upload{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:14px 16px; border:1px dashed #C6DDFF;
border-radius:10px; background:#F7FAFF; margin-bottom:12px; }
.up-upload .fn{ font-size:12px; color:#4E5969; }
.up-upload .tip{ flex-basis:100%; font-size:12px; color:#86909C; }
.up-md-input{ width:100%; box-sizing:border-box; border:1px solid #DCE3EC; border-radius:10px; padding:10px 12px;
font-family:Consolas,Monaco,"Courier New",monospace; font-size:12.5px; line-height:1.7; resize:vertical; }
.up-md-input:focus{ outline:none; border-color:#7FA8E8; }
.up-prev-title{ font-size:12px; color:#86909C; margin:16px 0 8px; padding-top:12px; border-top:1px dashed #E5E9F0; }
/* ================= 计费文档（腾讯云产品计费文档速查） ================= */
.tcb-chk{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted);
cursor:pointer; user-select:none; white-space:nowrap; }
.tcb-chk input{ width:14px; height:14px; accent-color:var(--primary); cursor:pointer; margin:0; }
.tcb-stat{ font-size:12px; color:var(--muted); white-space:nowrap; }
.tcb-stat b{ color:var(--primary); font-size:14px; }
.tcb-chips{ flex-wrap:wrap; gap:6px; margin:2px 0 16px; }
.tcb-cat{ display:flex; align-items:center; gap:10px; margin:24px 0 10px; padding:10px 14px;
background:var(--hover-blue); border-left:3px solid var(--primary); border-radius:8px; }
.tcb-cat:first-child{ margin-top:4px; }
.tcb-cat h3{ font-size:15px; font-weight:700; margin:0; }
.tcb-cat-n{ font-size:12px; font-weight:600; color:var(--primary); background:#fff;
border-radius:20px; padding:2px 10px; white-space:nowrap; }
.tcb-cat-link{ margin-left:auto; font-size:12px; color:var(--muted); text-decoration:none; white-space:nowrap; }
.tcb-cat-link:hover{ color:var(--primary); }
.tcb-sub{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
margin:16px 0 6px; color:var(--text); }
.tcb-sub:before{ content:""; width:3px; height:13px; border-radius:2px; background:var(--primary); }
.tcb-sub .c{ font-weight:400; font-size:12px; color:var(--muted); }
.tcb-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tcb-table th{ background:#F7F8FA; color:var(--muted); font-weight:600; font-size:12px; text-align:left;
padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.tcb-table td{ padding:9px 10px; border-bottom:1px solid #F2F3F5; vertical-align:top; }
.tcb-table tr:hover td{ background:#FAFBFF; }
.tcb-no{ width:42px; color:#C9CDD4; font-variant-numeric:tabular-nums; }
.tcb-name{ width:215px; font-weight:600; }
.tcb-name .tcb-nm{ color:var(--text); text-decoration:none; }
a.tcb-nm:hover{ color:var(--primary); text-decoration:underline; }
.tcb-slug{ display:block; font-weight:400; font-size:11px; color:#C9CDD4; margin-top:2px;
font-family:Consolas,Monaco,monospace; word-break:break-all; }
.tcb-tag{ display:inline-block; font-size:10px; font-weight:500; border-radius:4px;
padding:0 5px; margin-left:5px; vertical-align:1px; }
.tcb-tag-d{ background:#F2F3F5; color:#86909C; }
.tcb-tag-f{ background:#FEF3E0; color:#D25F00; }
.tcb-desc{ color:#4E5969; font-size:12.5px; min-width:220px; }
.tcb-links{ width:296px; white-space:nowrap; }
.tcb-lnk{ display:inline-block; padding:3px 10px; border-radius:6px; font-size:12px;
margin:2px 5px 2px 0; text-decoration:none; border:1px solid transparent; }
.tcb-lnk-doc{ background:var(--primary-light); color:var(--primary); }
.tcb-lnk-fee{ background:#E8F7F0; color:#00A870; }
.tcb-lnk-buy{ background:#FFF3E6; color:#C25A08; }
.tcb-lnk-off{ background:#F7F8FA; color:#C9CDD4; }
.tcb-lnk:hover{ filter:brightness(.95); text-decoration:none; }
/* ================= 系统弹窗层（接管浏览器原生 alert / confirm） ================= */
.szdlg-mask{ position:fixed; inset:0; background:rgba(10,18,40,.55); z-index:260;
display:flex; align-items:center; justify-content:center; padding:20px; animation:maskIn .18s ease; }
.szdlg{ width:460px; max-width:100%; }
.szdlg .modal-body{ padding:20px 24px; }
.szdlg-msg{ font-size:14px; line-height:1.9; color:var(--text); word-break:break-word; }
.szdlg-sub{ font-size:12px; color:#86909C; line-height:1.8; margin-top:9px; }
.szdlg .modal-foot{ align-items:center; }
.szdlg .modal-foot .szdlg-sp{ flex:1; }
/* ============================================================
可读性增强覆写区（2026-09-16）
目标：次要文字过淡看不清 → 加深颜色 / 提升字重，全局视觉更清晰
原则：主文本仍最深、次要文字明显可读、占位提示保持淡
============================================================ */
/* ---- 全局文字基线 ---- */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.page-desc{ color:#4E5969; font-weight:500; line-height:1.7; }
.empty{ color:#5E6B80; font-weight:500; }
.search::placeholder, .field input::placeholder{ color:#98A2B3; }
.topbar .crumb{ color:#4E5969; font-weight:500; }
.topbar .urole{ color:#6B7787; font-weight:500; }
/* ---- 左侧导航：分组标题与子导航 ---- */
.nav-group-title{ color:#5E6B80; font-weight:600; }
.subnav-item{ color:#4E5969; font-weight:500; }
/* ---- 顶栏页签：未激活页签加深 ---- */
.topbar .tabx{ color:#3D4757; font-weight:500; }
.topbar .tabx:hover{ color:#1F2329; }
.topbar .tabx .tb-x{ color:#8F9AAB; }
.topbar .tabbar .tabs-act{ color:#5E6B80; font-weight:500; }
/* ---- 筛选胶囊（类目 chips / filter-tabs）：文字加粗 ---- */
.filter-tabs a{ color:#4E5969; font-weight:500; }
.filter-tabs a .num{ font-weight:700; }
.filter-tabs a:not(.active){ border-color:#DCE0E8; }
/* ---- 计费文档页（tcb-）专项 ---- */
.tcb-chk{ color:#4E5969; font-weight:500; }
.tcb-stat{ color:#4E5969; font-weight:500; }
.tcb-cat{ border-left:3px solid var(--primary); }
.tcb-cat h3{ font-size:15.5px; }
.tcb-cat-n{ font-size:12.5px; }
.tcb-cat-link{ color:#4E5969; font-weight:500; }
.tcb-sub{ font-weight:700; color:#1F2329; }
.tcb-sub .c{ color:#5E6B80; font-weight:500; }
.tcb-table th{ background:#F2F5F9; color:#3D4757; font-weight:700; }
.tcb-no{ color:#86909C; font-weight:600; }
.tcb-name .tcb-nm{ font-weight:700; }
.tcb-slug{ color:#8F9AAB; font-weight:500; }
.tcb-desc{ color:#333B49; font-size:13px; line-height:1.65; }
.tcb-tag-d{ background:#E8EBF0; color:#4E5969; font-weight:600; }
.tcb-lnk{ font-weight:600; }
.tcb-lnk-off{ background:#F2F3F5; color:#86909C; }
/* ---- 工作台应用卡片 ---- */
.wb-app-desc{ color:#5E6B80; }
.wb-app-name{ font-weight:600; }
/* ---- 工具栏按钮文字 ---- */
.btn-outline{ font-weight:600; }
/* ============================================================
登录页重设计（2026-09-16）：动态品牌场景 + 玻璃登录面板
============================================================ */
.login-body{
min-height:100vh;
min-height:100dvh; /* 移动端地址栏收起/展开时高度自适应（旧浏览器忽略本行，用上面的 100vh） */
/* 只裁横向：挡住溢出的背景光效，同时保留纵向滚动 ——
矮窗口 / 手机横屏时，登录按钮不会被裁掉，且能滚到 */
overflow-x:hidden;
overflow-y:auto;
background:#07111f;
color:#172033;
}
.login-shell{
width:100%; /* 原 100vw：100vw 含纵向滚动条宽度，出现滚动条时会横向溢出 */
min-height:100vh;
min-height:100dvh;
display:grid;
grid-template-columns:minmax(0,1fr) 460px;
position:relative;
isolation:isolate;
background:
radial-gradient(circle at 8% 14%, rgba(18,198,255,.36), transparent 30%),
radial-gradient(circle at 68% 18%, rgba(22,111,255,.34), transparent 32%),
linear-gradient(135deg,#081527 0%,#0a2348 46%,#eef7ff 46.2%,#ffffff 100%);
}
.login-hero{
position:relative;
min-height:100vh;
min-height:100dvh;
overflow:hidden;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
}
.login-aurora{
position:absolute;
inset:-18%;
background:
conic-gradient(from 170deg at 42% 50%, rgba(0,238,255,.0), rgba(0,179,255,.38), rgba(0,110,255,.12), rgba(18,205,173,.28), rgba(0,238,255,.0));
filter:blur(28px);
opacity:.86;
animation:loginAurora 12s ease-in-out infinite alternate;
}
.login-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(111,203,255,.11) 1px, transparent 1px),
linear-gradient(90deg, rgba(111,203,255,.11) 1px, transparent 1px);
background-size:46px 46px;
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 78%, transparent 100%);
transform:perspective(700px) rotateX(57deg) translateY(27%);
transform-origin:center bottom;
animation:gridDrift 16s linear infinite;
}
.login-orbit{
position:absolute;
border:1px solid rgba(142,218,255,.26);
border-radius:50%;
box-shadow:inset 0 0 40px rgba(57,166,255,.08),0 0 34px rgba(0,125,255,.1);
}
.login-orbit::after{
content:"";
position:absolute;
width:9px;
height:9px;
border-radius:50%;
background:#8ee6ff;
box-shadow:0 0 18px rgba(142,230,255,.9);
}
.login-orbit-a{width:520px;height:520px;left:9%;top:13%;animation:orbitFloat 10s ease-in-out infinite alternate}
.login-orbit-a::after{right:56px;top:88px}
.login-orbit-b{width:310px;height:310px;right:13%;bottom:12%;animation:orbitFloat 12s ease-in-out infinite alternate-reverse}
.login-orbit-b::after{left:42px;bottom:56px}
.login-data-stream{
position:absolute;
height:2px;
width:34%;
min-width:260px;
background:linear-gradient(90deg, transparent, rgba(135,225,255,.9), transparent);
opacity:.62;
filter:drop-shadow(0 0 8px rgba(69,194,255,.78));
animation:dataSweep 5.6s linear infinite;
}
.stream-a{left:-8%;top:24%;animation-delay:.1s}
.stream-b{left:12%;top:64%;animation-delay:1.7s}
.stream-c{left:34%;top:42%;animation-delay:3s}
.brand-stage{
position:relative;
z-index:2;
width:min(78%,760px);
display:flex;
flex-direction:column;
align-items:flex-start;
gap:42px;
padding-left:4vw;
}
.brand-mark-xl{
width:min(420px,58vw);
aspect-ratio:260/180;
filter:drop-shadow(0 24px 54px rgba(0,71,180,.38));
animation:brandBreath 5.8s ease-in-out infinite;
}
.brand-mark-xl svg{width:100%;height:100%;overflow:visible}
.brand-mark-xl .mark-cloud{stroke-dasharray:680;stroke-dashoffset:680;animation:drawCloud 1.9s ease forwards .2s, cloudPulse 3.8s ease-in-out infinite 2s}
.brand-mark-xl .mark-s{transform-origin:center;animation:markRise .9s cubic-bezier(.2,.8,.2,1) forwards .55s;opacity:0}
.brand-mark-xl .mark-cut{animation:markRise .9s cubic-bezier(.2,.8,.2,1) forwards .72s;opacity:0}
.hero-copy h1{
margin:0;
color:#fff;
font-size:clamp(42px,5.2vw,78px);
line-height:1.12;
font-weight:800;
letter-spacing:0;
text-shadow:0 18px 50px rgba(0,0,0,.28);
}
.hero-copy p{
margin:22px 0 0;
color:#d7f2ff;
font-size:clamp(17px,1.45vw,24px);
letter-spacing:0;
font-weight:500;
}
.metric-panel{
position:absolute;
z-index:2;
width:152px;
height:82px;
border:1px solid rgba(170,228,255,.24);
border-radius:8px;
background:rgba(7,20,42,.38);
backdrop-filter:blur(16px);
box-shadow:0 18px 45px rgba(0,30,70,.18);
opacity:.78;
animation:panelFloat 7s ease-in-out infinite;
}
.metric-panel span,.metric-panel i,.metric-panel b{
position:absolute;
display:block;
left:18px;
right:18px;
height:8px;
border-radius:99px;
background:rgba(148,222,255,.36);
}
.metric-panel span{top:18px;width:42%}
.metric-panel i{top:37px;width:74%;background:linear-gradient(90deg,#6ee7ff,#1b8cff)}
.metric-panel b{top:56px;width:56%;background:rgba(255,255,255,.26)}
.panel-a{left:7%;bottom:16%}
.panel-b{right:13%;top:18%;animation-delay:1.4s}
.panel-c{right:6%;bottom:25%;animation-delay:2.3s}
.login-pane{
width:auto;
min-height:100vh;
min-height:100dvh;
position:relative;
z-index:4;
display:flex;
align-items:center;
justify-content:center;
padding:42px;
background:rgba(255,255,255,.7);
box-shadow:-30px 0 80px rgba(9,26,56,.16);
backdrop-filter:blur(22px);
}
.login-pane::before{
content:"";
position:absolute;
inset:22px;
border:1px solid rgba(255,255,255,.68);
border-radius:22px;
pointer-events:none;
}
.login-card{
width:100%;
max-width:372px;
margin:0;
padding:38px 34px 34px;
border:1px solid rgba(220,232,247,.9);
border-radius:8px;
background:rgba(255,255,255,.86);
box-shadow:0 28px 70px rgba(19,45,84,.16);
backdrop-filter:blur(18px);
}
.login-logo{
gap:13px;
margin-bottom:34px;
}
.brand-mark-sm{
width:58px;
height:44px;
color:#0788df;
display:flex;
align-items:center;
justify-content:center;
filter:drop-shadow(0 6px 14px rgba(0,110,255,.18));
}
.brand-mark-sm svg{width:100%;height:100%;overflow:visible}
.login-card h1{
color:#14213a;
font-size:23px;
font-weight:800;
letter-spacing:0;
}
.login-card .sub,.login-footer,.login-tip{display:none}
.login-card .field{margin-bottom:18px}
.login-card .field label{
color:#526072;
font-size:13px;
font-weight:600;
margin-bottom:8px;
}
.login-card .field input:not([type="checkbox"]){
height:48px;
border:1px solid #dbe5f2;
border-radius:8px;
padding:0 15px;
color:#172033;
background:#f8fbff;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.login-card .field input:not([type="checkbox"]):focus{
border-color:#0b86ff;
background:#fff;
box-shadow:0 0 0 4px rgba(0,110,255,.12);
}
.remember-field{margin-bottom:20px!important}
.remember-field label{
display:flex!important;
align-items:center;
gap:8px;
margin:0!important;
color:#64748b!important;
cursor:pointer;
user-select:none;
}
.remember-field input{
width:15px;
height:15px;
accent-color:#0076e8;
}
.login-card .btn-primary{
height:48px;
border-radius:8px;
background:linear-gradient(135deg,#0076e8,#08b7ff 72%,#22d3b6);
color:#fff;
font-size:15px;
font-weight:800;
letter-spacing:0;
box-shadow:0 14px 28px rgba(0,118,232,.28);
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.login-card .btn-primary:hover{
opacity:1;
filter:saturate(1.08);
transform:translateY(-2px);
box-shadow:0 20px 38px rgba(0,118,232,.34);
}
.login-card .btn-primary:active{transform:translateY(0) scale(.99)}
.acct-type{min-height:18px;line-height:18px;margin-top:7px;color:#7a8798}
.acct-type.ok,.acct-type.ok b{color:#079a63}
.acct-type.err{color:#d93f3f}
@keyframes loginAurora{from{transform:rotate(0deg) scale(1)}to{transform:rotate(18deg) scale(1.08)}}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:0 46px,46px 0}}
@keyframes orbitFloat{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(18px,-18px,0) rotate(12deg)}}
@keyframes dataSweep{0%{transform:translateX(-40vw);opacity:0}16%,72%{opacity:.62}100%{transform:translateX(78vw);opacity:0}}
@keyframes brandBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drawCloud{to{stroke-dashoffset:0}}
@keyframes cloudPulse{0%,100%{filter:url(#szGlow);opacity:1}50%{filter:url(#szGlow);opacity:.82}}
@keyframes markRise{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes panelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(max-width:980px){
/* 此处原有 background:linear-gradient(145deg,#071527,#0a3262 58%,#f7fbff 58.2%) 的「上深下浅」硬分割，
已被下方同断点的 .login-shell 三段 radial 覆盖，从未生效 → 已移除（避免日后误删覆盖规则时冒出横切硬边）。
本行只保留栅格定义。 */
.login-shell{grid-template-columns:1fr}
.login-hero{min-height:46vh;padding:42px 22px 20px;align-items:flex-end;justify-content:flex-start}
.brand-stage{width:100%;padding-left:0;gap:22px}
.brand-mark-xl{width:min(280px,64vw)}
.hero-copy h1{font-size:38px}
.hero-copy p{font-size:16px;margin-top:14px}
.metric-panel{display:none}
.login-pane{min-height:54vh;padding:24px;background:#f7fbff;box-shadow:none;backdrop-filter:none}
.login-pane::before{display:none}
.login-card{max-width:460px;padding:30px 24px}
}
@media(max-width:520px){
/* 注意：这里不要再写 .login-body{overflow:auto} —— 那会让横向也能滚，破坏上面的 overflow-x:hidden */
.login-hero{min-height:42vh;min-height:42dvh}
.hero-copy h1{font-size:31px}
.hero-copy p{font-size:14px}
.login-pane{padding:18px}
.login-card{padding:26px 20px}
.login-logo{margin-bottom:26px}
}
/* 登录页可读性微调：桌面文案始终落在深色视觉层 */
.login-shell{
background:
radial-gradient(circle at 8% 14%, rgba(18,198,255,.36), transparent 30%),
radial-gradient(circle at 68% 18%, rgba(22,111,255,.34), transparent 32%),
linear-gradient(135deg,#081527 0%,#0a2348 100%);
}
.login-hero::before{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
radial-gradient(circle at 29% 64%, rgba(0,70,145,.62), transparent 34%),
linear-gradient(90deg, rgba(5,18,39,.64) 0%, rgba(5,18,39,.34) 50%, rgba(5,18,39,0) 82%);
pointer-events:none;
}
.hero-copy{position:relative;z-index:3;max-width:720px}
.hero-copy h1{max-width:720px}
.hero-copy p{color:#eefbff;text-shadow:0 8px 24px rgba(0,18,52,.55)}
.brand-mark-xl{position:relative;z-index:3}
.login-grid,.login-orbit,.login-data-stream,.metric-panel{z-index:2}
/* 说明：此处原有 980px 断点的「#071527 → #f7fbff 58% 硬编码分割」规则，已被下方
同断点的三段 radial 渐变完全覆盖（同特异性、后定义胜出），属死规则；
若哪天真生效，窄屏会出现一道横切硬边，故已删除。 */
/* 登录页二次调整：全屏共用背景 + 原版蓝色图标层 + 亚克力登录框 */
.login-shell{
grid-template-columns:minmax(0,1fr) minmax(380px,500px);
background:
radial-gradient(circle at 18% 18%, rgba(15,151,232,.45), transparent 32%),
radial-gradient(circle at 80% 44%, rgba(178,236,255,.40), transparent 30%),
radial-gradient(circle at 63% 86%, rgba(24,211,184,.26), transparent 34%),
linear-gradient(126deg,#061126 0%,#082848 45%,#0c6791 100%);
}
.login-shell::before{
content:"";
position:absolute;
inset:0;
z-index:0;
background:
linear-gradient(90deg, rgba(4,15,34,.68) 0%, rgba(4,15,34,.24) 48%, rgba(226,248,255,.16) 100%),
radial-gradient(circle at 82% 50%, rgba(255,255,255,.34), transparent 34%);
pointer-events:none;
}
.login-shell::after{
content:"";
position:absolute;
inset:0;
z-index:0;
background-image:
linear-gradient(rgba(216,246,255,.075) 1px, transparent 1px),
linear-gradient(90deg, rgba(216,246,255,.075) 1px, transparent 1px);
background-size:42px 42px;
-webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
pointer-events:none;
}
.login-hero,.login-pane{z-index:1}
.login-aurora{opacity:.72}
.login-hero::before{
display:none;
}
.brand-stage{width:min(80%,760px);padding-left:3vw;gap:36px}
.brand-mark-xl{
width:min(470px,58vw);
aspect-ratio:895/531;
filter:drop-shadow(0 28px 56px rgba(0,26,70,.46));
}
.brand-mark-xl::before{
content:"";
position:absolute;
inset:15% 11%;
border-radius:50%;
background:rgba(64,184,255,.22);
filter:blur(38px);
z-index:-1;
}
.brand-mark-xl img{
width:100%;
height:100%;
display:block;
object-fit:contain;
animation:markRise .8s cubic-bezier(.2,.8,.2,1) both .2s;
}
.hero-copy::before{
content:"";
position:absolute;
inset:-28px -42px;
z-index:-1;
background:radial-gradient(circle at 34% 60%, rgba(4,20,45,.50), transparent 68%);
filter:blur(10px);
pointer-events:none;
}
.login-pane{
min-height:100vh;
min-height:100dvh;
padding:54px 56px 54px 24px;
background:transparent;
box-shadow:none;
backdrop-filter:none;
}
.login-pane::before{display:none}
.login-card{
max-width:390px;
padding:40px 36px 36px;
border:1px solid rgba(255,255,255,.44);
border-radius:14px;
background:linear-gradient(145deg, rgba(255,255,255,.48), rgba(255,255,255,.26));
box-shadow:0 26px 70px rgba(0,22,52,.26), inset 0 1px 0 rgba(255,255,255,.58);
backdrop-filter:blur(26px) saturate(1.22);
-webkit-backdrop-filter:blur(26px) saturate(1.22);
}
.login-logo{margin-bottom:32px}
.brand-mark-sm{
width:76px;
height:46px;
color:unset;
filter:drop-shadow(0 8px 18px rgba(0,88,180,.22));
}
.brand-mark-sm img{
width:100%;
height:100%;
display:block;
object-fit:contain;
}
.login-card h1{color:#10203d}
.login-card .field label{color:#41516a}
.login-card .field input:not([type="checkbox"]){
border-color:rgba(174,205,235,.82);
background:rgba(250,253,255,.58);
box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}
.login-card .field input:not([type="checkbox"]):focus{
background:rgba(255,255,255,.80);
}
.remember-field label{color:#50627a!important}
.login-card .btn-primary{
background:linear-gradient(135deg,#087ceb,#10b9f7 56%,#22cdbd);
box-shadow:0 16px 34px rgba(0,94,190,.30);
}
@media(max-width:980px){
.login-shell{
grid-template-columns:1fr;
background:
radial-gradient(circle at 18% 14%, rgba(15,151,232,.42), transparent 34%),
radial-gradient(circle at 78% 74%, rgba(178,236,255,.30), transparent 34%),
linear-gradient(145deg,#061126 0%,#07365f 100%);
}
.login-hero{min-height:44vh;min-height:44dvh}
.brand-stage{width:100%;gap:20px}
.brand-mark-xl{width:min(320px,70vw)}
.login-pane{min-height:56vh;min-height:56dvh;padding:22px;background:transparent}
.login-card{max-width:460px;background:linear-gradient(145deg, rgba(255,255,255,.56), rgba(255,255,255,.32))}
}
@media(max-width:520px){
.brand-mark-xl{width:min(300px,76vw)}
.brand-mark-sm{width:66px;height:40px}
.login-pane{min-width:0;width:100%;padding:22px}
.login-card{width:100%;max-width:100%;padding:28px 20px;border-radius:12px}
}
/* 登录页背景层最终融合：动态光效跨越左右两侧，不产生分栏硬边 */
.login-aurora,.login-grid{
position:fixed;
inset:0;
z-index:0;
pointer-events:none;
/* 动效分层：提升为合成层，使 transform 动画不必每帧重算 filter:blur ——
模糊范围接近整屏且一直在旋转缩放，是登录页首屏卡顿的主因。 */
will-change:transform;
}
.login-aurora{inset:-18%}
.login-grid{
transform:perspective(900px) rotateX(58deg) translateY(26%);
opacity:.78;
}
.brand-stage,.login-pane{position:relative}
.login-orbit,.login-data-stream,.metric-panel{position:absolute}
.brand-stage,.login-pane{z-index:3}
.login-orbit,.login-data-stream,.metric-panel{z-index:2}
.panel-a{left:9%;bottom:6%;opacity:.42}
/* ================= 部门管理：组织层级显示 ================= */
.dept-name{ display:flex; align-items:center; gap:6px; line-height:1.5; }
.dept-name.is-root{ font-weight:600; }
.dept-tree-mark{ flex:0 0 auto; color:#C0C8D4; font-family:Consolas,"Courier New",monospace; font-size:13px; }
.dept-cnt-sub{ font-size:11.5px; font-weight:400; color:#86909C; }
.dept-foot-tip{ margin-top:12px; padding-top:10px; border-top:1px dashed #E5E9F0;
font-size:12px; color:#86909C; line-height:1.8; }
.dept-foot-tip b{ color:#4E5969; }
/* ================= 销售资料：编辑权限（锁定图标 + 权限设置弹窗） ================= */
.lib-lock{ display:inline-flex; align-items:center; justify-content:center; margin-left:6px;
padding:0 5px; height:20px; border-radius:5px; font-size:12px; line-height:1;
cursor:pointer; user-select:none; vertical-align:middle;
background:#F2F4F8; color:#86909C; transition:background .15s, color .15s; }
.lib-lock:hover{ background:#E4EAF2; }
.lib-lock.on{ background:#FFF4E8; color:#D97A00; } /* 已锁定（仅上传者） */
.lib-lock.custom{ background:#EAF3FF; color:#006EFF; } /* 指定部门 / 人员 */
.lib-perm-opt{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px; margin-bottom:8px;
border:1px solid var(--border); border-radius:10px; cursor:pointer;
transition:border-color .15s, background .15s, box-shadow .15s; }
.lib-perm-opt:hover{ border-color:#C6DDFF; background:#FAFCFF; }
.lib-perm-opt:has(input:checked){ border-color:#BCD5FF; background:#F5F9FF; }
.lib-perm-opt input{ width:16px; height:16px; margin:3px 0 0; flex:0 0 auto; cursor:pointer; accent-color:var(--primary); }
.lib-perm-opt span{ display:flex; flex-direction:column; gap:2px; line-height:1.55; min-width:0; }
.lib-perm-opt b{ font-size:13.5px; font-weight:600; color:#1F2329; }
.lib-perm-opt i{ font-style:normal; font-size:12px; color:#86909C; }
.lib-perm-opt input:checked + span b{ color:#006EFF; }
/* 三选一横排（三个互斥选项，横排更省纵向空间，弹窗不用滚到底才看到） */
.lib-perm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media(max-width:620px){ .lib-perm-grid{ grid-template-columns:1fr; } }
.lib-perm-grid .lib-perm-opt{ margin-bottom:0; padding:10px 11px; gap:7px; }
.lib-perm-grid .lib-perm-opt b{ font-size:13px; }
.lib-perm-grid .lib-perm-opt i{ font-size:11.5px; line-height:1.5; }
/* ============================================================
资料弹窗：分区标题 / 类型卡片 / 上传区 / 多选下拉（2026-09-17 重做）
============================================================ */
/* 分区标题：竖条 + 标题 + 说明 + 贯穿细线 */
.lib-sec-hd{ display:flex; align-items:center; gap:8px; margin:0 0 12px; }
.lib-sec-hd .bar{ width:3px; height:14px; border-radius:2px; background:var(--primary); flex:0 0 auto; }
.lib-sec-hd .t{ font-size:13.5px; font-weight:600; color:#1F2329; flex:0 0 auto; }
.lib-sec-hd .tip{ font-size:12px; color:#86909C; flex:0 0 auto; }
.lib-sec-hd .line{ flex:1 1 auto; height:1px; background:#EEF1F5; }
/* 资料类型：四张卡片（取代原生下拉） */
.lib-kinds{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:2px; }
@media(max-width:900px){ .lib-kinds{ grid-template-columns:repeat(2,1fr); } }
.lib-kind{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
padding:12px 6px; border:1px solid var(--border); border-radius:10px; background:#fff;
cursor:pointer; user-select:none; transition:border-color .15s, background .15s, box-shadow .15s; }
.lib-kind .ic{ font-size:19px; line-height:1; }
.lib-kind .nm{ font-size:13px; color:#4E5969; }
.lib-kind:hover{ border-color:#C6DDFF; background:#FAFCFF; }
.lib-kind.on{ border-color:var(--primary); background:var(--primary-light); box-shadow:0 0 0 3px rgba(0,110,255,.08); }
.lib-kind.on .nm{ color:var(--primary); font-weight:600; }
/* 上传区：点击 / 拖拽 */
.lib-drop{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
min-height:126px; padding:18px; border:1.5px dashed #C9CDD4; border-radius:11px; background:#FAFBFC;
cursor:pointer; text-align:center; transition:border-color .16s, background .16s; }
.lib-drop:hover{ border-color:var(--primary); background:var(--primary-lighter); }
.lib-drop.over{ border-color:var(--primary); background:var(--primary-light); }
.lib-drop.on{ border-style:solid; border-color:#9FD3B6; background:#F3FBF7; }
.lib-drop .ic{ font-size:26px; line-height:1; }
.lib-drop .t{ font-size:13px; color:#4E5969; font-weight:500; }
.lib-drop .h{ font-size:12px; color:#86909C; line-height:1.6; }
/* 已选文件胶囊 */
.lib-file-chip{ display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px;
border:1px solid #C9E9D8; background:#F3FBF7; border-radius:9px; font-size:13px; color:#1F2329; }
.lib-file-chip .ic{ font-size:18px; flex:0 0 auto; line-height:1; }
.lib-file-chip .nm{ font-weight:600; min-width:0; word-break:break-all; }
.lib-file-chip .sz{ color:#86909C; font-size:12px; flex:0 0 auto; }
.lib-file-chip .rm{ margin-left:auto; flex:0 0 auto; color:#86909C; cursor:pointer; padding:1px 6px;
border-radius:6px; line-height:1.4; }
.lib-file-chip .rm:hover{ background:#E1F2E9; color:#D54941; }
/* ===== 多选下拉（重做：整宽按钮 + 搜索 + 已选统计 + 选中态） ===== */
.lib-multi{ position:relative; display:block; }
.lib-multi-btn{ display:flex; width:100%; box-sizing:border-box; align-items:center; gap:8px;
min-height:38px; padding:0 12px; border:1px solid var(--border); border-radius:7px; background:#fff;
font-size:13px; color:var(--muted); cursor:pointer; text-align:left; transition:border-color .15s, background .15s; }
.lib-multi-btn > span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-multi-btn:hover{ border-color:#BCD5FF; }
.lib-multi-btn.on{ border-color:var(--primary); background:var(--primary-light); color:var(--primary); font-weight:600; }
.lib-multi-btn i{ flex:0 0 auto; font-style:normal; color:#B8C4D9; font-size:10px; transition:transform .18s; }
.lib-multi-btn.on i{ color:var(--primary); }
.lib-multi-panel{ position:absolute; z-index:60; top:calc(100% + 6px); left:0; width:100%; box-sizing:border-box;
min-width:248px; background:#fff; border:1px solid #E5E9F0; border-radius:10px;
box-shadow:0 12px 32px rgba(10,18,40,.14); padding:8px; }
.lib-multi-panel.up{ top:auto; bottom:calc(100% + 6px); }
.lib-multi-search{ padding:0 2px 8px; }
.lib-multi-search input{ width:100%; box-sizing:border-box; height:32px; border:1px solid var(--border);
border-radius:7px; padding:0 10px; font-size:12.5px; outline:none; background:#FAFBFC; }
.lib-multi-search input:focus{ border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px var(--primary-light); }
.lib-multi-list{ max-height:212px; overflow-y:auto; padding:1px 2px; }
.lib-multi-list::-webkit-scrollbar{ width:8px; }
.lib-multi-list::-webkit-scrollbar-track{ background:transparent; }
.lib-multi-list::-webkit-scrollbar-thumb{ background:#DCE1E8; border-radius:8px; }
.lib-multi-list::-webkit-scrollbar-thumb:hover{ background:#C6CDD8; }
.lib-multi-empty{ padding:12px 8px; color:#86909C; font-size:12px; text-align:center; }
/* ⚠ 选择器必须压过 .f-item input（同权重时后定义者胜）——这里提高到 3 个类 */
.lib-multi-panel .lib-multi-opt{ display:flex; align-items:center; gap:9px; padding:8px 9px;
border-radius:7px; cursor:pointer; font-size:13px; color:var(--text); user-select:none; }
.lib-multi-panel .lib-multi-opt:hover{ background:#F5F8FD; }
.lib-multi-panel .lib-multi-opt > span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib-multi-panel .lib-multi-opt input[type="checkbox"]{
-webkit-appearance:none; appearance:none; box-sizing:border-box;
flex:0 0 16px; width:16px; height:16px; min-width:16px; margin:0; padding:0;
border:1.5px solid #C9CDD4; border-radius:4px; background:#fff center/10px 8px no-repeat;
cursor:pointer; transition:border-color .15s, background-color .15s; }
.lib-multi-panel .lib-multi-opt input[type="checkbox"]:hover{ border-color:#9DBBEE; }
.lib-multi-panel .lib-multi-opt input[type="checkbox"]:checked{
border-color:var(--primary); background-color:var(--primary);
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.1 4.3 8.4 11 1.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lib-multi-foot{ display:flex; align-items:center; gap:6px; padding-top:8px; margin-top:6px; border-top:1px solid var(--border); }
.lib-multi-foot .lib-multi-cnt{ margin-right:auto; font-size:12px; color:#86909C; padding-left:3px; }
.lib-multi-foot .lib-multi-cnt b{ color:var(--primary); font-weight:600; }
/* 表单下拉统一自定义箭头（去掉系统原生箭头，跨浏览器一致） */
.f-item select{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
padding-right:34px; cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.4 6 6.4l5-5' fill='none' stroke='%2386909C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 13px center; }
.f-item select:hover{ border-color:#BCD5FF; }
.f-item select::-ms-expand{ display:none; }
/* ============================================================
Sheets 可调列引擎（列宽拖动 / 列顺序拖动）
—— 报价表单「云服务清单」与「跟进记录表」共用
============================================================ */
.qf-sheet th.sc-th{ position:relative; cursor:grab; }
.qf-sheet th.sc-th.sc-fixed{ cursor:default; }
.qf-sheet th.sc-th.sc-dragging{ opacity:.45; }
/* 拖宽手柄：贴在 th 右边缘（略微外扩，方便抓取），悬停才显形 */
.qf-sheet .sc-grip{ position:absolute; top:0; right:-4px; width:9px; height:100%;
cursor:col-resize; z-index:5; }
.qf-sheet .sc-grip::after{ content:''; position:absolute; top:18%; left:4px; width:2px; height:64%;
background:transparent; border-radius:2px; transition:background .12s; }
.qf-sheet th:hover .sc-grip::after{ background:#C6DDFF; }
.qf-sheet .sc-grip:hover::after{ background:#006EFF; }
.qf-sheet th.sc-active{ background:#E8F1FF; }
/* 拖序插入位置指示条 */
.qf-sheet th.sc-drop-l::before,
.qf-sheet th.sc-drop-r::before{ content:''; position:absolute; top:0; width:3px; height:100%;
background:#006EFF; z-index:6; }
.qf-sheet th.sc-drop-l::before{ left:-2px; }
.qf-sheet th.sc-drop-r::before{ right:-2px; }
body.sc-resizing, body.sc-resizing *{ cursor:col-resize !important; user-select:none !important; }
/* 表头里被拖动的列名不参与文本选择 */
.qf-sheet th[draggable="true"] .sc-hd{ user-select:none; }
/* ============================================================
跟进记录表：并入 Excel 式表格（与报价表单同一套单元格风格）
—— 表格本身改用 .qf-sheet，这里只补它特有的部分
============================================================ */
/* 跟进记录格：沿用 Excel 单元格外观，高度仍由「单行 / 展开」控制 */
.qf-sheet td.sc-rec{ padding:0; }
/* 记录日期：随整行垂直居中 + **水平居中**（用户要求日期居中显示） */
.qf-sheet td.ftime{ vertical-align:middle; text-align:center; }
/* 「下次回访」= 统一日期组件（SZDate）：文字居中，右侧自绘日历图标 */
.qf-sheet td.sc-date{ vertical-align:middle; padding:0; }
/* ⚠ 左右留白要「刚好够」：左侧只管贴边、右侧给图标让位（图标占右侧 5~22px）。
之前 26+30=56px 太占空间，列一窄日期就被裁掉最后一位（用户报过两次）。 */
.qf-sheet td.sc-date .cell.fdate{ text-align:left; padding-left:8px; padding-right:26px; font-size:12px; }
/* 回访内容：与跟进记录同款多行格 */
.qf-sheet td.sc-visit{ padding:0; }
/* ⚠ 操作格（按钮）同样不能带上下 padding：按钮本身比 .cell 矮，
但 padding 会把 td 撑得比 .cell 高 → 整行输入框上下露白（用户报过「占不满一个框」）。
按钮改用 vertical-align:middle 居中即可。 */
.qf-sheet td.sc-ops{ vertical-align:middle; text-align:center; padding:0 8px; }
.qf-sheet td.sc-ops .ops{ justify-content:center; flex-wrap:nowrap; }
/* 新建行的输入框不用再加白底（.cell 本身透明，行有淡蓝底） */
.f-new-row .cell{ background:transparent; }
/* ⚠ 不要给表格加「吸附列」（position:sticky 的固定列）：
表格一旦横向溢出，吸附列就会**盖住**它旁边的列
（用户看到的是「记录日期」被「操作」列遮挡、字被切掉，当成 bug）。
正确做法是让表格**始终铺满容器**（见 js/sheet-cols.js 的 fit()），
而不是用 sticky 去兜底滚动 —— 那样只会把问题从「看不见」换成「遮挡」。 */
/* ============================================================
待办提醒 · 日历视图（月历表格 + 选中日清单）
—— 当日（今天）醒目描边；有待办的日期显示角标；点日期切换下方清单
============================================================ */
.td-cal{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.td-cal-hd{ display:flex; align-items:center; gap:8px; padding:10px 12px;
background:#FAFCFF; border-bottom:1px solid var(--border); }
.td-ym{ min-width:112px; text-align:center; font-size:15px; font-weight:700; color:var(--text); }
.td-nav{ width:28px; height:28px; padding:0 !important; font-size:15px; line-height:1; }
.td-legend{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.td-legend .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; }
.td-legend .dot.orange{ background:#FF7D00; }
.td-legend .dot.green{ background:#0ABF5B; }
/* 1px 网格线：用 gap + 底色代替逐格边框，避免最后一行/列多出一条线 */
.td-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); }
.td-wd{ padding:8px 0; text-align:center; font-size:12px; font-weight:600;
color:var(--muted); background:#F7F9FC; }
.td-wd.we{ color:#E54545; }
.td-day{ position:relative; min-height:64px; padding:6px 8px; background:#fff;
cursor:pointer; transition:background .12s, box-shadow .12s; }
.td-day:hover{ background:#F2F7FF; }
.td-day .d{ font-size:13px; color:var(--text); font-variant-numeric:tabular-nums; }
.td-day.out{ background:#FCFDFF; }
.td-day.out .d{ color:#C2CAD6; }
/* 当日醒目：蓝色内描边 + 蓝字 + 「今」标 */
.td-day.today{ background:#F7FAFF; box-shadow:inset 0 0 0 2px #006EFF; }
.td-day.today .d{ color:#006EFF; font-weight:700; }
.td-today-tag{ position:absolute; top:5px; right:6px; padding:0 4px; border-radius:4px;
font-size:10px; line-height:14px; background:#E8F1FF; color:#006EFF; }
/* 选中日：蓝底白字 */
.td-day.on{ background:#006EFF; }
.td-day.on .d{ color:#fff; font-weight:700; }
.td-day.on .n{ background:#fff; color:#006EFF; }
.td-day.on .td-today-tag{ background:rgba(255,255,255,.26); color:#fff; }
/* 待办角标：未完成=橙底数字；全部完成=绿底 ✓ */
.td-day .n{ position:absolute; right:6px; bottom:6px; min-width:16px; height:16px;
padding:0 4px; border-radius:8px; font-size:11px; line-height:16px; text-align:center;
background:#FFF1E6; color:#FF7D00; }
.td-day.done .n{ background:#E8F8EF; color:#0ABF5B; }
/* 选中日清单 */
.td-day-hd{ display:flex; align-items:center; gap:10px; margin-bottom:12px;
font-size:14px; color:var(--text); }
.td-day-hd b{ font-size:15px; }
.td-wd-name{ font-size:12.5px; color:var(--muted); }
.td-list{ display:flex; flex-direction:column; gap:8px; }
.td-item{ display:flex; align-items:center; gap:10px; padding:9px 12px;
border:1px solid var(--border); border-radius:9px; background:#fff; transition:border-color .15s, background .15s; }
.td-item:hover{ border-color:#C6DDFF; background:#FAFCFF; }
.td-item.done{ background:#FAFBFC; }
.td-item.done .td-txt{ color:#A9B2C2; text-decoration:line-through; }
.td-check{ display:flex; align-items:center; cursor:pointer; }
.td-check input{ width:16px; height:16px; cursor:pointer; accent-color:#006EFF; }
.td-time{ min-width:46px; font-size:12.5px; font-weight:600; color:#006EFF;
font-variant-numeric:tabular-nums; }
.td-date{ min-width:84px; font-size:12px; color:var(--muted); }
.td-txt{ flex:1; font-size:13px; color:var(--text); line-height:1.6; word-break:break-word; }
.td-from{ margin-left:6px; padding:1px 5px; border-radius:4px; font-size:11px;
background:#E8F1FF; color:#006EFF; }
.td-del{ opacity:.45; padding:2px 8px !important; }
.td-item:hover .td-del{ opacity:1; }
/* ============================================================
SZDate —— 统一日期选择组件（webapp/js/datepicker.js）
—— 输入框 + 右侧图标 + 自绘日历面板（年/月切换、清除/今天）
============================================================ */
.szd-wrap{ position:relative; display:block; width:100%; min-width:0; }
.szd-ico{ position:absolute; right:5px; top:50%; transform:translateY(-50%);
color:#86909C; line-height:0; cursor:pointer; padding:3px; border-radius:5px;
transition:color .15s, background .15s; }
.szd-ico:hover{ color:#006EFF; background:#EAF3FF; }
/* 给右侧图标让出位置（.cell 与 .f-item input 都适用）；⚠ 图标盒占右侧 5~22px（svg 再内缩 3px），
留 26px 正好不碰文字；多留会挤掉本来就窄的日期文字（`.qf-sheet td.sc-date` 同值） */
.szd-wrap > .cell, .szd-wrap > input{ padding-right:26px; }
/* 面板 */
.szdp{ position:fixed; z-index:300; width:264px; padding:8px 8px 6px; background:#fff;
border:1px solid #E5E9F0; border-radius:10px; box-shadow:0 8px 28px rgba(10,18,40,.16); }
.szdp-hd{ display:flex; align-items:center; gap:2px; padding:2px 0 8px; }
.szdp-tt{ flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--text); }
.szdp-nav{ width:24px; height:24px; padding:0; border:none; background:transparent; color:#86909C;
border-radius:6px; cursor:pointer; font-size:13px; line-height:1; }
.szdp-nav:hover{ background:#F0F5FF; color:#006EFF; }
.szdp-wd{ display:grid; grid-template-columns:repeat(7,1fr); }
.szdp-wd i{ font-style:normal; text-align:center; font-size:11.5px; color:#86909C; padding:2px 0 6px; }
.szdp-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.szdp-d{ height:28px; display:flex; align-items:center; justify-content:center;
font-size:12.5px; color:var(--text); border-radius:6px; cursor:pointer;
font-variant-numeric:tabular-nums; transition:background .12s, color .12s; }
.szdp-d:hover{ background:#EAF3FF; color:#006EFF; }
.szdp-d.out{ color:#C2CAD6; }
.szdp-d.now{ color:#006EFF; font-weight:700; box-shadow:inset 0 0 0 1px #006EFF; }
.szdp-d.on{ background:#006EFF; color:#fff; font-weight:600; }
.szdp-d.dis{ color:#E1E5EB; cursor:not-allowed; }
.szdp-d.dis:hover{ background:transparent; color:#E1E5EB; }
.szdp-ft{ display:flex; align-items:center; margin-top:8px; padding-top:6px;
border-top:1px solid var(--border); }
.szdp-btn{ border:none; background:transparent; color:#006EFF; font-size:12.5px;
cursor:pointer; padding:4px 8px; border-radius:6px; }
.szdp-btn:hover{ background:#EAF3FF; }
.szdp-btn.primary{ font-weight:600; } /* 「今天」是主操作，稍作强调（禁用态见下） */
.szdp-btn:disabled{ color:#C2CAD6; cursor:not-allowed; }
.szdp-btn:disabled:hover{ background:transparent; }
.szdp-sp{ flex:1; }
/* 单元格提示文字：一律单行省略 —— 窄列里折行会被格高裁掉，看着像坏掉（用户报过） */
.qf-sheet .cell::placeholder{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* ============================================================
学习中心（产品资料 → 学习中心）
—— 分类卡片网格：像一个个「大文件夹」，封面 + 名称 + 说明 + 形态标签
—— 封面支持自定义图（coverImg）与渐变主题（SZ_LEARN_COVERS）
============================================================ */
.lc-bar{ padding:14px 20px; }
.lc-sum{ font-size:13px; color:var(--muted); }
/* 卡片网格：自适应列数（窄屏 1~2 列，宽屏 4~5 列） */
.lc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
gap:18px; margin-top:18px; }
@media(max-width:640px){ .lc-grid{ grid-template-columns:1fr; gap:14px; } }
.lc-card{ background:var(--card); border:1px solid var(--border); border-radius:14px;
overflow:hidden; cursor:pointer; display:flex; flex-direction:column;
box-shadow:0 1px 3px rgba(10,18,40,.05);
transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); }
.lc-card:hover{ transform:translateY(-3px); border-color:#BCD5FF;
box-shadow:0 10px 26px rgba(0,110,255,.14); }
.lc-card:active{ transform:translateY(-1px); }
/* 封面：渐变底 + 大图标水印；左下角折角「文件夹」暗示 */
.lc-cover{ position:relative; height:128px; display:flex; align-items:center; justify-content:center;
overflow:hidden; flex:0 0 auto; }
.lc-cover-tab{ position:absolute; left:14px; top:0; width:52px; height:9px;
border-radius:0 0 7px 7px; background:rgba(255,255,255,.55); }
.lc-cover-ico{ position:relative; z-index:2; font-size:46px; line-height:1;
filter:drop-shadow(0 4px 10px rgba(0,0,0,.22)); transition:transform .22s var(--ease); }
.lc-card:hover .lc-cover-ico{ transform:scale(1.08); }
/* 图标背后的柔光，避免纯色块太扁 */
.lc-cover-glow{ position:absolute; z-index:1; width:150px; height:150px; border-radius:50%;
background:radial-gradient(circle, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 68%); }
.lc-cover-img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block; }
.lc-cover-cnt{ position:absolute; z-index:3; right:10px; bottom:9px; padding:2px 9px; border-radius:20px;
font-size:11.5px; font-weight:600; color:#fff; background:rgba(10,18,40,.32);
backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.lc-body{ padding:12px 14px 13px; display:flex; flex-direction:column; gap:7px; flex:1 1 auto; }
.lc-title{ font-size:14.5px; font-weight:600; color:var(--text); line-height:1.45;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.lc-desc{ font-size:12.5px; color:var(--muted); line-height:1.55;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:16px; }
.lc-kinds{ display:flex; flex-wrap:wrap; gap:5px; }
.lc-kchip{ display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:6px;
font-size:11.5px; line-height:16px; background:#F2F6FD; color:#4E5969; border:1px solid #E6EDF8; }
.lc-kchip.off{ background:#F7F8FA; color:#A9B2C2; border-color:#EFF1F5; }
.lc-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:auto; padding-top:8px;
border-top:1px solid var(--border-light); font-size:12px; color:var(--muted); }
.lc-mi{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; flex:0 0 auto; }
.lc-mi.go{ margin-left:auto; color:var(--primary); font-weight:600; }
.lc-mi.off{ margin-left:auto; color:#B8C4D9; }
/* ---------- 文件夹详情弹窗 ---------- */
.lc-hd-n{ margin-left:10px; padding:1px 8px; border-radius:20px; background:var(--primary-light);
color:var(--primary); font-size:11.5px; font-weight:600; vertical-align:2px; }
.lc-dt-desc{ font-size:13px; color:#4E5969; line-height:1.7; margin-bottom:12px; }
.lc-dt-bar{ display:flex; gap:8px; margin-bottom:12px; }
.lc-dlist{ display:flex; flex-direction:column; gap:8px; }
.lc-di{ display:flex; align-items:center; gap:12px; padding:11px 13px;
border:1px solid var(--border); border-radius:10px; background:#fff;
transition:border-color .15s, background .15s, box-shadow .15s; }
.lc-di:hover{ border-color:#C6DDFF; background:#FAFCFF; box-shadow:0 2px 10px rgba(0,110,255,.07); }
.lc-di-ico{ width:38px; height:38px; border-radius:10px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1; }
.lc-di-main{ flex:1 1 auto; min-width:0; }
.lc-di-t{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.5;
display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lc-di-d{ font-size:12.5px; color:#4E5969; line-height:1.6; margin-top:2px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-di-m{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.lc-di-ops{ flex:0 0 auto; }
.lc-di-off{ font-size:12px; color:#B8C4D9; }
.lc-tag{ padding:1px 6px; border-radius:5px; font-size:11px; font-weight:400;
background:#FFF4E8; color:#D97A00; }
/* ---------- 单份资料视图 ---------- */
.lc-it-head{ display:flex; align-items:flex-start; gap:12px; padding:13px 14px;
background:linear-gradient(135deg,#F7F8FA,#F5F9FF); border-radius:11px; margin-bottom:16px; }
.lc-it-ico{ width:44px; height:44px; border-radius:11px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center; font-size:21px; line-height:1; }
.lc-it-meta{ flex:1 1 auto; min-width:0; }
.lc-it-t{ font-size:15.5px; font-weight:600; color:var(--text); line-height:1.5;
display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.lc-it-s{ font-size:12px; color:var(--muted); margin-top:5px; }
.lc-img{ text-align:center; }
.lc-img img{ max-width:100%; max-height:60vh; border-radius:10px; border:1px solid var(--border); }
.lc-ext{ font-size:13px; color:#4E5969; line-height:1.9; }
.lc-ext-url{ margin-top:10px; padding:11px 13px; border:1px solid var(--border); border-radius:9px;
background:#FAFBFC; word-break:break-all; }
.lc-ext-url a{ color:var(--primary); text-decoration:none; }
.lc-ext-url a:hover{ text-decoration:underline; }
/* 正文（复用 md-body 排版，只补一层边框把内容框起来） */
.lc-md{ font-size:13.5px; line-height:1.85; color:var(--text); }
.lc-md::after{ content:''; display:block; clear:both; }
/* ---------- 管理员端「学习中心」维护页 ---------- */
.lc-adm-tabs{ margin-bottom:0; }
/* 表格里的封面缩略（与销售端卡片封面同一主题色） */
.lc-thumb{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
width:46px; height:30px; border-radius:7px; font-size:15px; line-height:1;
background-size:cover; background-position:center; box-shadow:0 1px 3px rgba(10,18,40,.12); }
/* 图标快捷选择 */
.lc-icpick{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
margin:0 6px 6px 0; border:1px solid var(--border); border-radius:8px; cursor:pointer;
font-size:15px; line-height:1; background:#fff; transition:border-color .15s, background .15s; }
.lc-icpick:hover{ border-color:var(--primary); background:var(--primary-light); }
/* 弹窗里的「选文件」一行 */
.lc-filepick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lc-fn{ font-size:12.5px; color:#4E5969; word-break:break-all; }
/* 管理页顶部的「仅系统管理员」标 */
.lc-admin-tag{ margin-left:10px; padding:2px 9px; border-radius:20px; vertical-align:3px;
background:#FFF4E8; color:#D97A00; font-size:11.5px; font-weight:600; }
/* 弹窗 / 卡片里的灰色说明条 */
.lc-hint{ margin-top:12px; padding:9px 12px; border-radius:8px; background:#F7F9FC;
border:1px solid #EEF1F5; font-size:12.5px; line-height:1.75; color:#86909C; }
.lc-hint b{ color:#4E5969; }
/* 「导入 HTML / 文本文件」这类挂在分区标题右侧的链接 */
.lc-import{ margin-left:auto; font-size:12.5px; color:var(--primary); text-decoration:none; }
.lc-import:hover{ text-decoration:underline; }
/* ---------- 权限设置：范围单选 + 对象勾选 ---------- */
.lc-scope-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:9px; }
.lc-scope{ display:flex; align-items:flex-start; gap:9px; padding:10px 12px; cursor:pointer;
border:1px solid var(--border); border-radius:10px; background:#fff;
transition:border-color .15s, background .15s, box-shadow .15s; }
.lc-scope:hover{ border-color:#C6DDFF; background:#FAFCFF; }
.lc-scope:has(input:checked){ border-color:#BCD5FF; background:#F5F9FF; }
.lc-scope input{ width:15px; height:15px; margin:3px 0 0; flex:0 0 auto; cursor:pointer; accent-color:var(--primary); }
.lc-scope span{ display:flex; flex-direction:column; gap:2px; min-width:0; line-height:1.5; }
.lc-scope b{ font-size:13px; font-weight:600; color:#1F2329; }
.lc-scope i{ font-style:normal; font-size:11.5px; color:#86909C; }
.lc-scope input:checked + span b{ color:var(--primary); }
.lc-pickbox{ border:1px solid var(--border); border-radius:10px; background:#fff; overflow:hidden; }
.lc-pickbox-empty{ padding:12px 14px; border:1px dashed #DCE0E8; border-radius:9px;
font-size:12.5px; color:#A9B2C2; background:#FAFBFC; }
.lc-pickbox-s{ padding:8px 10px; border-bottom:1px solid var(--border-light); background:#FAFBFC; }
.lc-pickbox-s input{ width:100%; box-sizing:border-box; height:30px; border:1px solid var(--border);
border-radius:7px; padding:0 10px; font-size:12.5px; outline:none; background:#fff; }
.lc-pickbox-s input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light); }
.lc-pickbox-l{ max-height:224px; overflow-y:auto; padding:6px; }
/* ⚠ 选择器必须压过 .f-item input（width:100%;height:38px）—— 这里用 2 个以上的类 */
.lc-pickbox .lc-opt{ display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px;
cursor:pointer; font-size:13px; color:var(--text); user-select:none; }
.lc-pickbox .lc-opt:hover{ background:#F5F8FD; }
.lc-pickbox .lc-opt span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-pickbox .lc-opt span i{ font-style:normal; font-size:11.5px; color:#86909C; }
.lc-pickbox .lc-opt input[type="checkbox"]{
-webkit-appearance:none; appearance:none; box-sizing:border-box;
flex:0 0 16px; width:16px; height:16px; min-width:16px; margin:0; padding:0;
border:1.5px solid #C9CDD4; border-radius:4px; background:#fff center/10px 8px no-repeat;
cursor:pointer; transition:border-color .15s, background-color .15s; }
.lc-pickbox .lc-opt input[type="checkbox"]:hover{ border-color:#9DBBEE; }
.lc-pickbox .lc-opt input[type="checkbox"]:checked{
border-color:var(--primary); background-color:var(--primary);
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1 5.1 4.3 8.4 11 1.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lc-pickbox-f{ display:flex; align-items:center; gap:12px; padding:8px 12px;
border-top:1px solid var(--border-light); background:#FAFBFC; font-size:12px; color:#86909C; }
.lc-pickbox-f .lc-cnt{ margin-right:auto; }
.lc-pickbox-f .lc-cnt b{ color:var(--primary); font-weight:600; }
.lc-pickbox-f a{ color:var(--primary); text-decoration:none; }
.lc-pickbox-f a:hover{ text-decoration:underline; }
/* 权限设置里正在展开编辑的那一行 */
.lc-row-on > td{ background:#F5F9FF; }
/* ---------- 管理端内联预览 ---------- */
.lc-pv-grid{ display:grid; grid-template-columns:248px minmax(0,1fr); gap:18px; align-items:start; }
@media(max-width:900px){ .lc-pv-grid{ grid-template-columns:1fr; } }
.lc-card-flat{ cursor:default; }
.lc-card-flat:hover{ transform:none; border-color:var(--border); box-shadow:0 1px 3px rgba(10,18,40,.05); }
.lc-pv-side{ min-width:0; }
.lc-pv-tip{ font-size:12.5px; color:#86909C; margin-bottom:10px; }
/* ---------- 页面化浏览：面包屑 / 资料页 / 自定义网页 ---------- */
.lc-crumb{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:-2px 0 12px;
font-size:13px; color:var(--muted); }
.lc-crumb-a{ color:var(--primary); text-decoration:none; cursor:pointer; }
.lc-crumb-a:hover{ text-decoration:underline; }
.lc-crumb-sep{ color:#C9CDD4; }
.lc-crumb-cur{ color:var(--text); font-weight:600; }
/* 资料页头部的操作按钮：贴在右侧，窄屏时换行到下面 */
.lc-it-head{ flex-wrap:wrap; }
.lc-it-ops{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lc-it-lead{ font-size:13px; color:#4E5969; line-height:1.75; margin:-6px 0 14px; }
.lc-doc{ padding:22px 26px; }
@media(max-width:760px){ .lc-doc{ padding:16px 14px; } }
/* 自定义 HTML 资料：整体放进 iframe 沙箱，避免污染主页面样式 */
.lc-framewrap{ background:var(--card); border:1px solid var(--border); border-radius:12px;
overflow:hidden; box-shadow:0 1px 3px rgba(10,18,40,.05); }
.lc-frame{ display:block; width:100%; height:76vh; min-height:440px; border:0; background:#fff; }
/* =================================================================
应用权限（应用维度）：应用卡片 / 范围编辑器 / 账号类型矩阵
—— 卡片沿用工作台的 .wb-app / .wb-grid，这里只补状态与权限专属件
================================================================= */
.ap-sum{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:0 0 14px;font-size:12.5px;color:#4E5969}
.ap-sum-i b{color:#1F2329;font-size:14px}
.ap-sum-i.ok b{color:#0ABF5B}
.ap-sum-i.off b{color:#E54545}
.ap-sum-tip{color:#86909C;margin-left:auto}
.ap-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;line-height:1}
.ap-ico.has-logo{padding:0;overflow:hidden;border:1px solid #EDF0F5;background:#fff}
.ap-ico.has-logo img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;border-radius:inherit}
.wb-app.is-sel{border-color:#006EFF;box-shadow:0 0 0 3px rgba(0,110,255,.12)}
.wb-app.is-off{opacity:.6}
.wb-app.is-builtin{background:#FAFBFC}
.wb-app .ap-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.ap-chip{padding:2px 7px;border-radius:6px;font-size:11px;line-height:1.65;background:#F2F4F8;color:#4E5969;border:1px solid #E7EBF2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-chip.ok{background:#E8F8EF;border-color:#C6EED8;color:#0A8F4A}
.ap-chip.warn{background:#FFF4E6;border-color:#FFE0BC;color:#B96A00}
.ap-chip.off{background:#FDECEC;border-color:#F8D4D4;color:#C4322E}
.ap-chip.gray{background:#F5F7FA;border-color:#E9EDF3;color:#86909C}
.ap-editor{border-left:3px solid #006EFF;box-shadow:0 6px 20px rgba(0,110,255,.08)}
.ap-editor-hd{display:flex;align-items:center;gap:12px}
.ap-editor-tt{min-width:0;flex:1 1 auto}
.ap-editor-n{font-size:15px;font-weight:700;color:#1F2329}
.ap-editor-d{font-size:12.5px;color:#86909C;margin-top:3px;line-height:1.6}
.ap-itembox{display:flex;flex-wrap:wrap;gap:8px}
.ap-item{display:inline-flex;flex-direction:column;gap:2px;padding:7px 11px;border:1px solid #E7EBF2;border-radius:9px;background:#FBFCFF}
.ap-item b{font-size:12.5px;color:#1F2329;font-weight:600}
.ap-item i{font-style:normal;font-size:11px;color:#A9B2C2}
.ap-cells{grid-template-columns:repeat(auto-fill,minmax(186px,1fr))}
.ap-cell{cursor:pointer;gap:8px}
.ap-cell-n{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
.ap-cell-s{font-size:12px;color:#C9CDD4}
.ap-cell.on .ap-cell-s{color:#0ABF5B;font-weight:700}
.ap-cell-f{font-size:11px;color:#FF9D00}
.ap-pick-cell{gap:9px;align-items:center}
/* —— 应用权限：草稿（未保存）/ 保存提示条 / 生效校验 —— */
.ap-pending{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 14px;padding:11px 15px;
border:1px solid #FFE0BC;background:#FFF8EE;border-radius:11px}
.ap-pending-t{font-size:13px;color:#8A5300;line-height:1.6}
.ap-pending-t b{color:#E54545}
.ap-pending-o{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.ap-chip.dirty{background:#FFF4E6;border-color:#FFD9A8;color:#B96A00;font-weight:600}
.wb-app.is-dirty{border-color:#FFC978}
.wb-app.is-dirty::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:12px 12px 0 0;
background:linear-gradient(90deg,#FFB13D,#FF9D00)}
.ap-cell.dirty{box-shadow:inset 0 0 0 2px #FFD9A8}
.ap-audit{border-left:3px solid #0ABF5B;margin-top:14px}
.ap-ok{margin:10px 0 14px;padding:10px 13px;border-radius:9px;background:#F1FBF5;border:1px solid #CDEFDC;
font-size:12.5px;color:#0A8F4A;line-height:1.7}
.ap-warn{margin:10px 0 14px;padding:10px 13px;border-radius:9px;background:#FFF8EE;border:1px solid #FFE0BC;
font-size:12.5px;color:#8A5300;line-height:1.85}
.ap-diff{display:flex;flex-direction:column;gap:7px;margin:0 0 14px}
.ap-diff-r{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 12px;border:1px solid #E7EBF2;
border-radius:9px;background:#FBFCFF;font-size:12.5px}
.ap-diff-r b{color:#1F2329}
.ap-diff-from{color:#86909C}
.ap-diff-arrow{color:#C9CDD4}
.ap-diff-to{color:#006EFF;font-weight:600}
.ap-diff-chg{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
/* 应用分类图标（左栏导航分组标题 / 后台权限页分类标题共用；与工作台同一套分类） */
.ng-ico,.ap-gico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 7px 0 1px;vertical-align:-3px;flex:0 0 auto}
.ng-ico img,.ap-gico img{width:16px;height:16px;display:block;border-radius:4px}
/* ============ 身份预览（后台「以此身份查看」打开的销售端只读视图） ============ */
.pv-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 16px;
background:linear-gradient(90deg,#FFF6E5,#FFFBF2); border-bottom:1px solid #FFE0BC;
font-size:12.5px; color:#8A5300; position:relative; z-index:40; flex:0 0 auto; }
.pv-bar .pv-tag{ flex:0 0 auto; padding:2px 9px; border-radius:20px; background:#FF9D00; color:#fff;
font-weight:700; font-size:11px; letter-spacing:.5px; }
.pv-bar .pv-txt{ flex:1 1 auto; min-width:200px; line-height:1.6; }
.pv-bar .pv-txt b{ color:#B96A00; }
.pv-bar .pv-ops{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto; }
.pv-bar .pv-sel{ height:28px; border:1px solid #FFD9A8; border-radius:7px; background:#fff;
color:#8A5300; font-size:12.5px; padding:0 6px; }
.pv-jump{ border-left:3px solid #006EFF; background:#F7FAFF; }
/* =================================================================
学习中心 · 子文件夹（资源管理器式的文件夹网格）
—— 文件夹造型用单元素 + clip-path 画出带舌片的轮廓，配色跟随封面主题
================================================================= */
.lc-fico{ position:relative; display:inline-flex; align-items:flex-end; justify-content:center;
flex:0 0 auto; border-radius:3px; overflow:hidden;
clip-path:polygon(0 0, 40% 0, 49% 26%, 100% 26%, 100% 100%, 0 100%);
filter:drop-shadow(0 5px 11px rgba(10,18,40,.18)); }
.lc-fico::after{ content:''; position:absolute; left:0; right:0; top:26%; bottom:0; z-index:2;
background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.04) 60%, rgba(0,0,0,.07));
pointer-events:none; }
.lc-fico-ico{ position:relative; z-index:3; line-height:1; margin-bottom:11%; }
.lc-fico-img{ position:absolute; left:0; top:0; z-index:3; width:100%; height:100%;
object-fit:cover; display:block; }
.lc-fgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:13px; }
.lc-ftile{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:16px 12px 13px;
background:var(--card); border:1px solid var(--border); border-radius:13px;
transition:transform .18s, border-color .18s, box-shadow .18s; cursor:pointer; }
.lc-ftile:hover{ transform:translateY(-2px); border-color:#BCD5FF; box-shadow:0 8px 22px rgba(0,110,255,.13); }
.lc-ftile:active{ transform:translateY(0); }
.lc-ftile-t{ font-size:13.5px; font-weight:600; color:var(--text); line-height:1.45; max-width:100%;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-ftile-m{ font-size:11.5px; color:var(--muted); line-height:1.6; text-align:center; }
/* 分区小标题（「子文件夹」/「资料」） */
.lc-sech{ display:flex; align-items:center; gap:9px; margin:16px 0 11px; }
.lc-sech-t{ font-size:13.5px; font-weight:600; color:var(--text); }
.lc-sech-n{ font-size:11.5px; color:var(--muted); padding:1px 7px; border-radius:10px;
background:var(--primary-light); color:var(--primary); }
.lc-sech-line{ flex:1 1 auto; height:1px; background:var(--border); }
/* 深层搜索结果里的「所在文件夹」路径小签 */
.lc-pchip{ display:inline-flex; align-items:center; gap:4px; max-width:100%; font-size:11px;
color:#86909C; background:#F5F7FA; border:1px solid #E9EDF3; border-radius:6px;
padding:1px 7px; line-height:1.7; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lc-di-path{ margin-top:4px; }
/* 后台「文件夹」列表的层级缩进 */
.lc-tname{ display:inline-flex; align-items:center; gap:6px; }
.lc-tmark{ color:#C9CDD4; font-family:ui-monospace,Menlo,Consolas,monospace; }
/* 后台「学习中心 → 文件夹」卡片上的管理按钮 / 新建卡 / 停用态（与销售端同一套卡片） */
.lc-card-click{ cursor:pointer; }
.lc-ops{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--border); }
.lc-ops .btn{ padding:3px 9px; font-size:12px; }
.lc-card-off{ opacity:.72; background:#FAFBFC; }
.lc-card-off .lc-cover{ filter:grayscale(.45); }
.lc-off-tag{ display:inline-block; margin-left:7px; padding:1px 7px; border-radius:20px; font-size:11px;
font-weight:400; color:#86909C; background:#F2F4F8; border:1px solid #E7EBF2; vertical-align:1px; }
.lc-card-new{ display:flex; align-items:center; justify-content:center; min-height:210px;
border-style:dashed; background:#FBFCFF; }
.lc-card-new:hover{ border-color:var(--primary); background:#F5F9FF; }
.lc-new-inner{ text-align:center; padding:10px; }
.lc-new-plus{ font-size:34px; line-height:1; color:var(--primary); font-weight:300; }
.lc-new-t{ margin-top:8px; font-size:13.5px; font-weight:600; color:var(--text); }
.lc-new-d{ margin-top:3px; font-size:11.5px; color:var(--muted); }
/* =================================================================
学习中心 · 标题行合并 + 文件夹标签
—— 标题与右侧操作（搜索/返回/新建）合成一行，不再单独占一条工具栏
================================================================= */
.lc-hd{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.lc-hd-main{ flex:1 1 300px; min-width:0; }
.lc-hd-ops{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-left:auto; padding-top:4px; }
.lc-hd .page-desc{ margin:5px 0 0; }
.lc-hd .page-title{ margin-bottom:0; }
.lc-tags-hd{ margin-top:9px; }
/* 标签胶囊：静态展示（卡片 / 格子 / 表格）与可点筛选（筛选条）共用 */
.lc-tags{ display:flex; flex-wrap:wrap; gap:5px; }
.lc-tagchip{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:20px;
font-size:11.5px; line-height:1.7; background:#F2F5FA; color:#4E5969; border:1px solid #E5EAF2;
cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s; }
.lc-tagchip:not(.sm):hover{ border-color:#9DBBEE; color:var(--primary); }
.lc-tagchip.on{ background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.lc-tagchip.on:hover{ color:#fff; }
.lc-tagchip i{ font-style:normal; font-size:10.5px; opacity:.72; }
.lc-tagchip.on i{ opacity:.9; }
/* 静态胶囊（卡片 / 格子 / 表格 / 弹窗）：颜色由 .t0~.t5 给（见文件末尾的调色板），
所以这里不给底色，避免覆盖色调、也避免 hover 变色显得像可点 */
.lc-tagchip.sm{ cursor:default; font-size:11px; padding:2px 9px; }
.lc-tagchip.sm.more{ background:#F5F7FA; border-color:#E9EDF3; color:#86909C; }
/* 静态胶囊上的删除叉（弹窗里的标签编辑） */
.lc-tagchip .lc-tagx{ cursor:pointer; font-style:normal; font-size:12px; line-height:1;
margin-left:3px; opacity:.5; }
.lc-tagchip .lc-tagx:hover{ opacity:1; }
.lc-tags-in{ display:inline-flex; margin-left:7px; vertical-align:1px; }
.lc-ftile .lc-tags{ justify-content:center; margin-top:3px; }
/* 标签筛选条：与「子文件夹 / 顶层文件夹」小标题同一行 */
.lc-tagbar{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; }
.lc-tagbar-l{ font-size:11.5px; color:var(--muted); }
/* =================================================================
学习中心 · 浏览器式返回箭头 + 顶栏可点面包屑
================================================================= */
.lc-back{ flex:0 0 auto; width:32px; height:32px; padding:0; margin-top:2px; border-radius:50%;
border:1px solid var(--border); background:var(--card); color:#4E5969;
font-size:16px; line-height:1; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
transition:background .15s, border-color .15s, color .15s, transform .1s; }
.lc-back:hover{ background:var(--primary-light); border-color:#BCD5FF; color:var(--primary); }
.lc-back:active{ transform:scale(.93); }
/* 顶栏面包屑里的可点层级（学习中心文件夹路径） */
.topbar .crumb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56vw; }
.topbar .crumb .crumb-a{ color:var(--primary); cursor:pointer; }
.topbar .crumb .crumb-a:hover{ text-decoration:underline; }
.topbar .crumb .crumb-sep{ color:#C9CDD4; margin:0 6px; }
/* =================================================================
文件夹标签 · 柔和胶囊调色板（同名标签恒定同色，见 learn-center.js 的 tagTone）
—— 底色极浅 + 同色系文字 + 无重描边，多标签并排也不吵
================================================================= */
.lc-tagchip.t0:not(.on){ background:#F1EEFF; border-color:#E3DDFF; color:#6B4EE6; }
.lc-tagchip.t1:not(.on){ background:#EAF2FF; border-color:#D8E6FF; color:#2F6FE4; }
.lc-tagchip.t2:not(.on){ background:#E7F7F3; border-color:#CFF0E8; color:#0E9C86; }
.lc-tagchip.t3:not(.on){ background:#FFF4E6; border-color:#FFE4C4; color:#C07A12; }
.lc-tagchip.t4:not(.on){ background:#FDEDF3; border-color:#F9D8E5; color:#D2417E; }
.lc-tagchip.t5:not(.on){ background:#F1F4F9; border-color:#E3E9F2; color:#5A6B85; }
/* =================================================================
弹窗里的标签编辑：输入框内就是胶囊（回车 / 逗号 / 顿号 / 分号 都能加）
================================================================= */
.lc-tagedit{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-height:40px;
padding:6px 10px; border:1px solid var(--border); border-radius:9px; background:var(--card);
cursor:text; transition:border-color .15s, box-shadow .15s; }
.lc-tagedit:focus-within{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,110,255,.1); }
.lc-tagedit-box{ display:contents; }
.lc-tagedit-in{ flex:1 1 150px; min-width:130px; border:none; outline:none; padding:2px 0;
font-size:13px; background:transparent; color:var(--text); }
.lc-tagedit-in::placeholder{ color:#A9B2C2; }
/* =================================================================
子文件夹格子上的三个管理按钮（编辑 / 停用 / 删除）
================================================================= */
.lc-ftile-ops{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:9px;
padding-top:8px; border-top:1px dashed var(--border); }
.lc-ftile-ops .btn{ padding:2px 8px; font-size:11.5px; }
.lc-tagchip.t0:not(.on):hover{ background:#E9E3FF; border-color:#CFC4FF; color:#6B4EE6; }
.lc-tagchip.t1:not(.on):hover{ background:#DEEBFF; border-color:#C3DAFF; color:#2F6FE4; }
.lc-tagchip.t2:not(.on):hover{ background:#D9F3EC; border-color:#B7E9DD; color:#0E9C86; }
.lc-tagchip.t3:not(.on):hover{ background:#FFECD6; border-color:#FFD9AC; color:#C07A12; }
.lc-tagchip.t4:not(.on):hover{ background:#FBE0EC; border-color:#F6C9DD; color:#D2417E; }
.lc-tagchip.t5:not(.on):hover{ background:#E8EDF5; border-color:#D8E0EC; color:#5A6B85; }
/* =================================================================
乐享知识库 · 列表（产品资料 → 乐享知识库）
—— 一行一条资料，点标题新标签页打开乐享里那份文件
================================================================= */
.lxk-sel{ height:34px; padding:0 30px 0 11px; border:1px solid var(--border); border-radius:8px;
background:var(--card) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2386909C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center;
font-size:13px; color:var(--text); cursor:pointer; outline:none;
appearance:none; -webkit-appearance:none; max-width:230px; }
.lxk-sel:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,110,255,.1); }
.lxk-list{ display:flex; flex-direction:column; }
.lxk-row{ display:flex; align-items:center; gap:14px; padding:12px 16px;
border-bottom:1px solid #F2F4F8; cursor:pointer;
transition:background .14s; }
.lxk-row:last-child{ border-bottom:none; }
.lxk-row:hover{ background:#F7FAFF; }
.lxk-row:hover .lxk-t{ color:var(--primary); }
.lxk-row:hover .lxk-go{ opacity:1; transform:translateX(0); }
/* 表头：只给列名，不参与 hover 与点击 */
.lxk-head{ cursor:default; background:#FAFBFD; border-bottom:1px solid #EDF0F5;
padding-top:9px; padding-bottom:9px; }
.lxk-head:hover{ background:#FAFBFD; }
.lxk-head span{ font-size:12px; color:var(--muted); font-weight:400; }
.lxk-head .lxk-nm{ padding-left:0; }
.lxk-nm{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:9px; }
.lxk-ico{ flex:0 0 auto; font-size:15px; line-height:1; }
.lxk-t{ font-size:13.5px; color:var(--text); font-weight:500;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
transition:color .14s; }
.lxk-tag{ flex:0 0 auto; padding:1px 7px; border-radius:20px; font-size:11px;
color:#86909C; background:#F2F4F8; border:1px solid #E7EBF2; }
.lxk-tp{ flex:0 0 92px; font-size:12.5px; color:#4E5969; }
.lxk-tm{ flex:0 0 132px; font-size:12.5px; color:var(--muted); }
.lxk-go{ flex:0 0 56px; text-align:right; font-size:12.5px; color:var(--primary);
opacity:0; transform:translateX(-4px);
transition:opacity .14s, transform .14s; }
.lxk-head .lxk-go{ opacity:1; transform:none; }
/* 列表下方的补充说明（如条目被截断） */
.lxk-note{ margin-top:10px; font-size:12.5px; color:var(--muted); }
/* 后台配置页：字段说明与只读回显 */
.lxk-fld{ margin-bottom:16px; }
.lxk-fld > label{ display:block; font-size:13px; color:var(--text); font-weight:500; margin-bottom:6px; }
.lxk-fld-tip{ font-size:12px; color:var(--muted); margin-top:5px; line-height:1.6; }
.lxk-fld input{ width:100%; max-width:460px; height:36px; padding:0 12px;
border:1px solid var(--border); border-radius:8px; box-sizing:border-box;
font-size:13px; color:var(--text); background:var(--card); outline:none;
transition:border-color .15s, box-shadow .15s; }
.lxk-fld input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,110,255,.1); }
.lxk-acts{ display:flex; gap:10px; margin-top:6px; }
/* ------------------------------------------------------------------
AI 助手（AgentOS）配置页字段
⚠ 以前直接用 .input 类，但全站 CSS **根本没有 .input 规则** →
输入框是浏览器默认宽度（窄、贴标签），截图上看着很挤。
这里给一套显式样式：占满该列宽、高度统一、聚焦有蓝环。
------------------------------------------------------------------ */
/* 两列网格；服务地址（第 2 格）单独占满一行 —— 它最常填错（漏 /v2/agentos 就 404），
给足宽度 + 独占一行，用户更容易看清自己填了什么 */
.ai-grid{ grid-template-columns:1fr 1fr; gap:16px 20px; }
.ai-grid > .ai-fld:nth-child(2){ grid-column:1 / -1; }
@media(max-width:900px){ .ai-grid{ grid-template-columns:1fr; } .ai-grid > .ai-fld:nth-child(2){ grid-column:auto; } }
.ai-fld{ display:flex; flex-direction:column; }
.ai-fld > label{ font-size:12.5px; font-weight:600; color:#475467; margin-bottom:6px; letter-spacing:.2px; }
.ai-input{ width:100%; height:38px; padding:0 12px; box-sizing:border-box;
border:1px solid var(--border); border-radius:8px; background:#fff;
font-size:13px; color:var(--text); outline:none; font-family:inherit;
transition:border-color .15s, box-shadow .15s, background .15s; }
.ai-input:hover{ border-color:#C3CFE0; }
.ai-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,110,255,.1); background:#fff; }
.ai-input::placeholder{ color:#98A2B3; }
/* 下拉选择（认证方式）复用 .ai-input：select 默认外观会跟输入框差异很大，显式抹平。
⚠ select 的高度由 line-height 决定，必须显式给 height 才和输入框对齐。 */
select.ai-input{ appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:34px;
background-color:#fff;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 10px center; background-size:14px 14px; }
/* 整行字段（跨两列）—— 认证方式下方那几项长文本/长说明都值得占满整行 */
.ai-grid > .ai-full{ grid-column:1 / -1; }
/* 密钥/ID 这类机器串用等宽体，长串一眼能核对字符 */
.ai-input#aiApiKey, .ai-input#aiAgentId, .ai-input#aiRuntimeId{
font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; letter-spacing:.2px; }
.ai-fld-hint{ font-size:11.5px; color:#98A2B3; margin-top:5px; line-height:1.55; }
/* 失败步骤下的「怎么办」提示条：浅红底 + 左侧竖线，和原始报错明显区分 */
.ai-hint-box{ margin-top:7px; padding:8px 11px; font-size:12px; line-height:1.65;
color:#9A3412; background:#FFF7ED; border-left:3px solid #F59E0B; border-radius:0 6px 6px 0; }
/* 官方值一键填入的小按钮 */
.ai-fill-btn{ display:inline-block; margin-left:6px; padding:1px 7px; font-size:11px;
color:var(--primary); background:#EFF5FF; border:1px solid #D6E4FF; border-radius:5px;
cursor:pointer; font-family:inherit; transition:background .15s; }
.ai-fill-btn:hover{ background:#E0EDFF; }
/* 凭证状态只读回显（键值两列） */
.lxk-status{ display:flex; flex-direction:column; gap:0; }
.lxk-srow{ display:flex; align-items:baseline; gap:14px; padding:9px 0;
border-bottom:1px solid #F2F4F8; font-size:13px; }
.lxk-srow:last-child{ border-bottom:none; }
.lxk-sk{ flex:0 0 116px; color:var(--muted); }
.lxk-sv{ flex:1 1 auto; color:var(--text); word-break:break-all; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; }
.lxk-dim{ color:var(--muted); font-family:inherit; font-size:13px; }
/* 状态胶囊 */
.lxk-pill{ display:inline-block; padding:2px 10px; border-radius:9px; font-size:12px; font-weight:500; }
.lxk-pill.lxk-ok{ background:rgba(10,191,91,.1); color:#0ABF5B; }
.lxk-pill.lxk-bad{ background:rgba(229,69,69,.1); color:#E54545; }
/* 连通性测试的逐步结果 */
.lxk-steps{ display:flex; flex-direction:column; }
.lxk-step{ display:flex; align-items:flex-start; gap:9px; padding:8px 0;
border-bottom:1px solid #F2F4F8; font-size:13px; }
.lxk-step:last-child{ border-bottom:none; }
.lxk-step-ok{ flex:0 0 auto; width:16px; text-align:center; line-height:1.6; color:#0ABF5B; }
.lxk-step-bad{ flex:0 0 auto; width:16px; text-align:center; line-height:1.6; color:#E54545; }
.lxk-step-n{ flex:0 0 132px; color:var(--text); }
.lxk-step-v{ flex:1 1 auto; color:var(--muted); word-break:break-all; }
.lxk-ok{ color:#0ABF5B; }
.lxk-bad{ color:#E54545; }
/* =================================================================
实时监控大盘（后台「实时监控」页，js/sysmon.js）
—— 只呈现读数与状态：KPI / 占用条 / 迷你走势 / 依赖灯 / 明细表
================================================================= */
.szm-muted{ color:var(--muted); font-size:13px; padding:4px 0 }
.szm-mono{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px }
.szm-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 14px;
padding:11px 15px; background:var(--card); border-radius:12px; box-shadow:var(--shadow) }
.szm-head-meta{ font-size:12.5px; color:var(--muted) }
.szm-head-ops{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.szm-lbl{ font-size:12.5px; color:var(--muted) }
.szm-sel{ height:30px; border:1px solid var(--border); border-radius:8px; background:var(--card);
color:var(--text); font-size:12.5px; padding:0 6px }
.szm-state{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
padding:3px 12px; border-radius:20px }
.szm-state i{ width:8px; height:8px; border-radius:50%; display:block; background:currentColor }
.szm-state.ok{ color:#0A8F4A; background:#E8F8EF }
.szm-state.warn{ color:#B96A00; background:#FFF4E6 }
.szm-state.crit{ color:#C4322E; background:#FDECEC }
.szm-state.unknown{ color:#86909C; background:#F2F3F5 }
.szm-ok{ display:flex; align-items:center; gap:8px; margin:0 0 14px; padding:10px 14px; border-radius:10px;
background:#F1FBF5; border:1px solid #CDEFDC; color:#0A8F4A; font-size:13px }
.szm-warn{ margin:0 0 14px; padding:10px 14px; border-radius:10px; background:#FFF8EE;
border:1px solid #FFE0BC; color:#8A5300; font-size:13px }
.szm-alerts{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px }
.szm-alert{ padding:9px 13px; border-radius:10px; font-size:13px; line-height:1.6 }
.szm-alert.crit{ background:#FDECEC; border:1px solid #F8D4D4; color:#C4322E }
.szm-alert.warn{ background:#FFF8EE; border:1px solid #FFE0BC; color:#8A5300 }
.szm-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto; background:#C9CDD4 }
.szm-dot.ok{ background:#0ABF5B } .szm-dot.bad{ background:#E54545 } .szm-dot.unknown{ background:#C9CDD4 }
.szm-kpis{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; margin-bottom:18px }
.szm-kpi{ padding:15px 16px }
.szm-kpi .label{ font-size:12.5px }
.szm-v{ font-size:26px !important; margin:6px 0 4px !important; line-height:1.15 }
.szm-v small{ font-size:13px; font-weight:500; color:var(--muted); margin-left:2px }
.szm-v.crit{ color:#E54545 } .szm-v.warn{ color:#E08A00 }
.szm-sub{ font-size:11.5px !important; color:var(--muted); line-height:1.6; min-height:18px }
.szm-spark{ display:block; width:100%; height:36px; margin:6px 0 2px }
.szm-spark-empty{ height:36px }
.szm-bar{ height:7px; border-radius:6px; background:#EEF1F6; overflow:hidden }
.szm-bar i{ display:block; height:100%; border-radius:6px; background:#0ABF5B; transition:width .4s }
.szm-bar.warn i{ background:#FF9D00 } .szm-bar.crit i{ background:#E54545 }
.szm-big{ font-size:34px; font-weight:700; line-height:1.1; color:var(--text); margin:2px 0 8px }
.szm-big small{ font-size:13px; font-weight:500; color:var(--muted); margin-left:3px }
.szm-big.warn{ color:#E08A00 } .szm-big.crit{ color:#E54545 } .szm-big.sm{ font-size:24px; margin-top:14px }
.szm-sep{ height:1px; background:var(--border); margin:14px 0 6px }
.szm-corewrap{ display:flex; flex-wrap:wrap; gap:3px; margin:9px 0 12px }
.szm-core{ width:14px; height:14px; border-radius:3px; background:#0ABF5B; opacity:.85; display:block }
.szm-core.warn{ background:#FF9D00 } .szm-core.crit{ background:#E54545 }
.szm-kv{ display:flex; align-items:baseline; gap:10px; padding:5px 0; font-size:12.5px; border-bottom:1px dashed #F0F2F5 }
.szm-kv:last-child{ border-bottom:none }
.szm-kv > span{ color:var(--muted); flex:0 0 auto }
.szm-kv > b{ margin-left:auto; text-align:right; font-weight:600; word-break:break-all }
.szm-sec{ margin:14px 0 6px; font-size:12.5px; font-weight:600; color:var(--text) }
.szm-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px }
.szm-s-chip{ padding:2px 9px; border-radius:20px; font-size:11.5px; background:#F2F5FA; color:#4E5969; border:1px solid #E5EAF2 }
.szm-s-chip.ok{ background:#E8F8EF; border-color:#C6EED8; color:#0A8F4A }
.szm-s-chip.warn{ background:#FFF4E6; border-color:#FFE4C4; color:#B96A00 }
.szm-s-chip.crit{ background:#FDECEC; border-color:#F8D4D4; color:#C4322E }
.szm-chip{ font-size:12px; font-weight:400; color:var(--muted) }
.szm-deps{ display:flex; flex-direction:column; gap:7px; margin-bottom:8px }
.szm-dep{ display:flex; align-items:center; gap:9px; font-size:12.5px; padding:7px 11px;
border:1px solid var(--border); border-radius:9px; background:#FBFCFF }
.szm-dep b{ font-weight:600 }
.szm-dep span{ margin-left:auto; color:var(--muted) }
.szm-tb{ width:100%; border-collapse:collapse; font-size:12.5px }
.szm-tb th{ text-align:left; font-weight:500; color:var(--muted); padding:5px 8px; border-bottom:1px solid var(--border) }
.szm-tb td{ padding:5px 8px; border-bottom:1px dashed #F0F2F5 }
.szm-warn-t{ color:#B96A00; font-weight:600 } .szm-crit-t{ color:#C4322E; font-weight:600 }
@media (max-width:1400px){ .szm-kpis{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:900px){ .szm-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
|