/* ==========================================================================
宏森文化 · 传媒工作台 —— 样式表
基准：按参考实现（单文件版）的 CSS 原样保留，只在文件末尾「扩展」一节
补了少量必要的东西（表格横向滚动、行内操作按钮、标签兜底色等）。
改视觉请优先改这里的变量，页面结构不要动。
========================================================================== */
/* SECTION: reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
--sidebar-w:240px;
--header-h:56px;
--bg:#f0f2f5;
--sidebar-bg:#1a1d29;
--sidebar-hover:#262938;
--sidebar-active:#2d6cdf;
--card-bg:#fff;
--text:#1f2937;
--text-secondary:#6b7280;
--accent:#2d6cdf;
--accent-light:#e8f0fe;
--success:#10b981;
--warning:#f59e0b;
--danger:#ef4444;
--border:#e5e7eb;
--radius:8px;
--shadow:0 1px 3px rgba(0,0,0,.08);
}
html{font-size:14px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.5;overflow:hidden;height:100vh}
button{cursor:pointer;font:inherit;border:none;background:none}
input,select,textarea{font:inherit;border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px;outline:none;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(45,108,223,.15)}
table{width:100%;border-collapse:collapse}
/* 表头和数据统一居中 —— 窄列（学历/年龄/状态/操作）左对齐时会挤在格子左边，
居中后视觉重心和列宽对齐。数字列也一样居中，否则和相邻列不在一个节奏上。
⚠️ 内边距从 10px 12px 收紧到 8px 10px（按需求「调整一下间距」）：
行高 49px → 约 42px，一屏能多看好几行；列间空白也小了一圈。
改这个值必须同步改下面 th.th-who 的 padding-left（它有推导公式）。 */
/* 表格对齐按需求美化：
文字列（姓名/昵称/日期/金额）**左对齐** —— 居中会让每列中间空一大块，
尤其列少的时候（艺人数据现在就 7 列）。
标签列和操作列（按钮）仍然是居中 —— 那两种居中才好看。 */
th,td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--border)}
th{background:#f9fafb;font-weight:600;font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}
tr:hover td{background:#f9fafb}
/* 姓名那格是「头像 + 名字」。整格虽然居中，但这组内容要**左对齐** ——
否则两个字的名字（付爽）和三个字的（刘凯睿）会各自居中，名字的头不在一条线上。
左对齐后头像对齐、名字也从头对齐。 */
td .cell-who{justify-content:flex-start}
/* 头像列的「姓名」表头也要左对齐，而且要落在**名字文字**上方（不是头像上方）：
左内边距 = 原有 10px + 头像 26px(.avatar-sm) + 间距 8px(.cell-who 的 gap) = 44px。
注意这几个值要一起改，否则表头会和名字错位。 */
th.th-who{text-align:left;padding-left:44px}
/* SECTION: layout */
.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);color:#fff;display:flex;flex-direction:column;flex-shrink:0;transition:transform .3s;z-index:100}
.sidebar-header{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:12px}
.sidebar-logo{width:36px;height:36px;background:linear-gradient(135deg,#2d6cdf,#7c3aed);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}
.sidebar-logo img{width:100%;height:100%;object-fit:contain;border-radius:8px;background:#fff}
.sidebar-title{font-size:16px;font-weight:600}
.sidebar-subtitle{font-size:11px;color:rgba(255,255,255,.5)}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 0}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:2px}
.nav-group{padding:8px 16px 4px;font-size:11px;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:1px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;color:rgba(255,255,255,.7);transition:all .15s;cursor:pointer;border-left:3px solid transparent;font-size:13px}
.nav-item:hover{background:var(--sidebar-hover);color:#fff}
.nav-item.active{background:rgba(45,108,223,.15);color:#fff;border-left-color:var(--sidebar-active)}
.nav-item .icon{width:20px;text-align:center;font-size:15px;flex-shrink:0}
.nav-item .badge{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;padding:1px 7px;border-radius:10px}
/* 页签上的红角标（「审批中心」显示待审批条数） */
.tab .tab-badge{margin-left:6px;background:var(--danger);color:#fff;font-size:11px;
font-weight:600;padding:1px 6px;border-radius:10px;vertical-align:1px}
.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.4);display:flex;align-items:center;gap:8px}
.wecom-dot{width:8px;height:8px;border-radius:50%;background:var(--success)}
.wecom-dot.offline{background:var(--text-secondary)}
/* SECTION: main */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.header{height:var(--header-h);background:var(--card-bg);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0}
.hamburger{display:none;font-size:20px;padding:4px}
.header-title{font-size:16px;font-weight:600;white-space:nowrap}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.btn{padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2558b8}
.btn-outline{border:1px solid var(--border);color:var(--text);background:var(--card-bg)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#0d9668}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-sm{padding:5px 10px;font-size:12px}
.content{flex:1;overflow-y:auto;padding:24px}
/* SECTION: dashboard cards */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
.stat-card{background:var(--card-bg);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.stat-card .label{font-size:12px;color:var(--text-secondary);margin-bottom:4px}
.stat-card .value{font-size:24px;font-weight:700}
.stat-card .change{font-size:12px;margin-top:4px}
.stat-card .change.up{color:var(--success)}
.stat-card .change.down{color:var(--danger)}
/* warn：需要注意但非环比，只变色不加箭头（参考实现只有 up/down 两档） */
.stat-card .change.warn{color:var(--warning)}
/* SECTION: panels */
.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:20px}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.card-header h3{font-size:15px;font-weight:600}
.card-body{padding:20px}
.card-body.no-pad{padding:0}
/* SECTION: tags */
.tag{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500}
.tag-blue{background:#e8f0fe;color:#2d6cdf}
.tag-green{background:#d1fae5;color:#059669}
.tag-yellow{background:#fef3c7;color:#d97706}
.tag-red{background:#fee2e2;color:#dc2626}
.tag-purple{background:#ede9fe;color:#7c3aed}
.tag-gray{background:#f3f4f6;color:#6b7280}
/* SECTION: modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--card-bg);border-radius:12px;width:90%;max-width:520px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-header h3{font-size:16px;font-weight:600}
.modal-close{font-size:20px;color:var(--text-secondary);padding:4px}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--text-secondary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* 字段多的表单（新增员工 18 个字段）用宽版弹窗 + 分组 */
.modal-lg{max-width:780px}
.form-section{margin-bottom:4px}
.form-section+.form-section{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.form-section-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:12px}
.form-note{font-size:12px;line-height:1.7;color:var(--text-secondary);background:var(--bg);border-radius:8px;padding:10px 12px;margin-bottom:20px}
.form-hint{font-weight:400;color:var(--text-secondary);margin-left:6px;font-size:12px}
.account-create-form{font-size:13px}
.account-create-form #account-member{margin-top:8px}
.account-field-hint{font-size:12px;line-height:1.6;color:var(--text-secondary);margin-top:6px}
.account-form-error{font-size:12px;line-height:1.6;color:#b91c1c;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:9px 12px}
.account-created-status{font-size:14px;font-weight:500;color:#059669;margin-bottom:16px}
.account-created-note{margin-top:18px;margin-bottom:0}
.req{color:var(--danger)}
/* 新增部门里的「下级团队」动态行 */
.team-rows{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.team-row{display:flex;gap:8px;align-items:center}
.team-row input{flex:1}
.team-row .btn-text{flex-shrink:0}
/* SECTION: toast */
.toast-container{position:fixed;top:16px;right:16px;z-index:300;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 20px;border-radius:var(--radius);color:#fff;font-size:13px;animation:slideIn .3s;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.toast-success{background:var(--success)}
.toast-error{background:var(--danger)}
.toast-info{background:var(--accent)}
.toast-warning{background:var(--warning)}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
/* SECTION: tabs */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px}
.tab{padding:10px 20px;font-size:13px;font-weight:500;color:var(--text-secondary);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s;white-space:nowrap}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
/* SECTION: search */
.search-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
/* 关键字框给固定宽度，不再撑满整行 —— 右边三个筛选才是主角 */
.search-bar input{flex:0 1 220px;min-width:140px}
/* 带标签的筛选下拉：部门 / 团队 / 状态 */
.filter-field{display:flex;align-items:center;gap:6px;flex-shrink:0}
.filter-field>span{font-size:13px;color:var(--text-secondary);white-space:nowrap}
.filter-field select{width:auto;min-width:96px;padding-top:8px;padding-bottom:8px}
/* SECTION: empty */
.empty{text-align:center;padding:40px 20px;color:var(--text-secondary)}
.empty .icon{font-size:40px;margin-bottom:12px;opacity:.4}
.empty p{font-size:14px}
/* SECTION: progress */
.progress{height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-bar{height:100%;border-radius:3px;transition:width .3s}
/* SECTION: responsive */
@media(max-width:768px){
.sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99;display:none}
.sidebar-overlay.open{display:block}
.hamburger{display:block}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.form-row{grid-template-columns:1fr}
.content{padding:16px}
}
/* SECTION: wecom panel */
.wecom-status{display:flex;align-items:center;gap:8px;padding:12px 20px;background:rgba(255,255,255,.05);margin:8px 12px;border-radius:var(--radius)}
.wecom-status .status-text{font-size:12px}
.wecom-status .status-text.connected{color:var(--success)}
.wecom-status .status-text.disconnected{color:var(--text-secondary)}
/* SECTION: kanban */
.kanban{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px}
.kanban-col{min-width:240px;flex:1;background:#f9fafb;border-radius:var(--radius);padding:12px}
.kanban-col h4{font-size:13px;color:var(--text-secondary);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.kanban-col h4 span{background:var(--border);border-radius:10px;padding:1px 8px;font-size:11px}
.kanban-card{background:var(--card-bg);border-radius:6px;padding:12px;margin-bottom:8px;box-shadow:0 1px 2px rgba(0,0,0,.06);cursor:pointer;transition:box-shadow .15s}
.kanban-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.12)}
.kanban-card .kc-title{font-size:13px;font-weight:500;margin-bottom:6px}
.kanban-card .kc-meta{font-size:11px;color:var(--text-secondary);display:flex;gap:8px}
/* SECTION: timeline */
.timeline-item{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.timeline-item:last-child{border-bottom:none}
.timeline-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:5px;flex-shrink:0}
.timeline-content .tl-title{font-size:13px;font-weight:500}
.timeline-content .tl-time{font-size:11px;color:var(--text-secondary);margin-top:2px}
/* SECTION: avatar */
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-light);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0;position:relative;overflow:hidden}
.avatar-sm{width:26px;height:26px;font-size:11px}
.avatar-lg{width:40px;height:40px;font-size:16px}
.avatar-xl{width:72px;height:72px;font-size:26px}
/* 有照片时：img 铺满圆形，加载失败则它自己藏起来、旁边的首字层顶上（永不破图） */
.avatar-photo{background:transparent}
.avatar-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar-photo .avatar-initial{width:100%;height:100%;align-items:center;justify-content:center;color:#fff;font-weight:600}
/* 详情弹窗顶部：优先显示照片 + 上传入口 */
.detail-hero{display:flex;align-items:flex-start;gap:14px;padding:2px 0 16px;
border-bottom:1px solid var(--border);margin-bottom:14px}
.detail-hero-photo{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0}
.detail-hero-name{font-size:18px;font-weight:600}
.detail-hero-sub{font-size:13px;color:var(--text-secondary);margin-top:3px}
.detail-photo-btn{padding:3px 10px;font-size:12px;border:1px solid var(--border);border-radius:6px;
background:#fff;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.detail-photo-btn:hover{border-color:var(--accent);color:var(--accent)}
.detail-photo-remove{margin-top:6px;padding:0;border:0;background:none;cursor:pointer;
font-size:12px;color:var(--text-secondary);text-decoration:underline}
.detail-photo-remove:hover{color:var(--danger)}
/* 搜索选人框（办理离职表单）—— 花名册一百多人，下拉框不好找 */
.picker{margin-top:6px;max-height:220px;overflow:auto;border:1px solid var(--border);
border-radius:8px;background:#fff}
.picker:empty{display:none}
.picker-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid var(--border);
display:flex;flex-direction:column;gap:2px}
.picker-item:last-child{border-bottom:0}
.picker-item:hover{background:var(--accent-light)}
.picker-item.active{background:var(--accent-light);box-shadow:inset 3px 0 0 var(--accent)}
.picker-item b{font-weight:600;font-size:14px}
.picker-item .muted{font-size:12px;color:var(--text-secondary)}
.picker-empty{padding:14px 12px;text-align:center;color:var(--text-secondary);font-size:13px}
.picker-hint{margin-top:5px;font-size:12px;color:var(--text-secondary)}
/* 人事部板块（人员管理 / 招聘管理）——板块名现在是顶部页签，这里只留说明行 */
.section-head{display:flex;align-items:baseline;gap:10px;margin:4px 0 12px;
padding-left:10px;border-left:3px solid var(--accent)}
.section-head h3{font-size:16px;font-weight:600;margin:0}
.section-head .section-desc{font-size:13px;color:var(--text-secondary)}
.section-desc-line{font-size:13px;color:var(--text-secondary);margin:-6px 0 14px}
/* 板块的「一条信息」行：本月入职 X 人 · 本月离职 Y 人 */
.section-info{display:flex;flex-wrap:wrap;gap:32px;align-items:baseline;
padding:10px 16px;margin:0 0 14px;background:#fff;border-radius:var(--radius);
box-shadow:var(--shadow)}
.section-info .si-item{display:flex;align-items:baseline;gap:8px;font-size:13px}
.section-info .si-item b{color:var(--text-secondary);font-weight:500}
.section-info .si-item span{font-weight:700;font-size:17px}
/* 搜索条里的日期区间：**一整条**（开始日期 ~ 结束日期 📅）
两个输入框去掉各自的边框，由外层 .date-range 统一画一个浅灰圆角条。
空着时是 text（显示「开始日期 / 结束日期」），点一下切成 date 弹原生日历。 */
.search-bar .date-range{display:flex;align-items:center;gap:2px;padding:0 10px;
background:#f3f4f6;border:1px solid var(--border);border-radius:6px;height:30px;
box-sizing:border-box;cursor:pointer}
.search-bar .date-range:hover{border-color:#c9d6e8}
.search-bar .date-range:focus-within{border-color:var(--accent);background:#fff}
.search-bar .date-range input{width:88px;border:0;background:transparent;padding:0;
font-size:13px;font-family:inherit;color:var(--text);outline:none;cursor:pointer;
text-align:center;min-width:0}
.search-bar .date-range input[type=date]{width:112px;text-align:left}
.search-bar .date-range input::placeholder{color:#9ca3af}
.search-bar .date-range em{font-style:normal;color:#9ca3af;font-size:12px;padding:0 2px}
.finance-search{gap:12px;flex-wrap:wrap}
.finance-search .date-range{height:34px}
.finance-quick{display:inline-flex;gap:2px;padding:3px;background:#e6e9ee;border-radius:8px}
.finance-quick .sc-quick{border:0;background:transparent;color:var(--text-secondary);font-size:13px;height:28px;padding:0 16px;border-radius:6px;cursor:pointer}
.finance-quick .sc-quick.on{background:#fff;color:var(--accent);font-weight:600;box-shadow:0 1px 3px #00000012}
.finance-search input[type=search]{width:230px;height:34px}
.finance-data-card{background:#f2f3f5;border:1px solid #e6e8ec;border-radius:12px;overflow:hidden;margin:0 0 16px}
.finance-data-title{margin:0;padding:14px 18px;border-bottom:1px solid #e6e8ec;font-size:15px;font-weight:600}
.page-root .finance-data-card .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));border:none !important;border-radius:0 !important;margin:0}
@media(max-width:760px){.page-root .finance-data-card .stats-grid{grid-template-columns:1fr}}
.finance-detail-tabs{margin:0 0 12px}
.finance-detail-tabs .tab{font-size:14px;font-weight:500}
.finance-category-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.finance-category{border:0;border-radius:6px;background:transparent;color:var(--text-secondary);padding:8px 16px;font:inherit;font-size:13px;cursor:pointer}
.finance-category:hover{background:#e6e9ee}
.finance-category.active{background:#eaf1ff;color:var(--accent);font-weight:500}
.finance-detail-note{font-size:13px;margin:0 0 14px}
.search-bar .date-range .dr-icon{font-size:13px;line-height:1;opacity:.55;margin-left:4px}
.section-actions{display:flex;gap:8px;margin:0 0 14px}
/* 板块页签栏：页签在左、动作按钮在这一栏最后面 */
.tabs-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border);margin-bottom:16px}
.tabs-row .tabs{border-bottom:0;margin-bottom:0;flex:1}
.tabs-actions{display:flex;gap:8px;padding-bottom:8px}
/* 板块内部的复选框式选择器（招聘管理：招聘信息 / 面试信息 / 人才储备）
单选 —— 点一个就把其它的取消，只显示那一个列表 */
.chooser{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 14px;padding:10px 16px;
background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.chooser-item{display:flex;align-items:center;gap:7px;font-size:14px;cursor:pointer;
user-select:none;color:var(--text-secondary)}
.chooser-item:hover{color:var(--text)}
.chooser-item.checked{color:var(--accent);font-weight:600}
.chooser-box{width:16px;height:16px;border:1.5px solid var(--border);border-radius:4px;
display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;
background:#fff;color:#fff;flex-shrink:0;transition:background .12s,border-color .12s}
.chooser-item.checked .chooser-box{background:var(--accent);border-color:var(--accent)}
/* 卡片上方那排时间段：今天 / 本月 / 自定义日期（+ 日期区间） */
.period-bar{display:flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.period-chip{padding:5px 14px;font-size:13px;font-family:inherit;cursor:pointer;
color:var(--text-secondary);background:#fff;border:1px solid var(--border);
border-radius:15px;transition:all .13s}
.period-chip:hover{border-color:#c9d6e8;color:var(--text)}
.period-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.period-bar .period-range{display:flex;align-items:center;gap:2px;padding:0 10px;
background:#f3f4f6;border:1px solid var(--border);border-radius:6px;height:30px;
box-sizing:border-box;cursor:pointer}
.period-bar .period-range[hidden]{display:none}
.period-bar .period-range:focus-within{border-color:var(--accent);background:#fff}
.period-bar .period-range input{width:88px;border:0;background:transparent;padding:0;
font-size:13px;font-family:inherit;color:var(--text);outline:none;cursor:pointer;
text-align:center;min-width:0}
.period-bar .period-range input[type=date]{width:112px;text-align:left}
.period-bar .period-range input::placeholder{color:#9ca3af}
.period-bar .period-range em{font-style:normal;color:#9ca3af;font-size:12px;padding:0 2px}
.period-bar .period-range .dr-icon{font-size:13px;line-height:1;opacity:.55;margin-left:4px}
/* 卡片式选择器（招聘管理：招聘信息 / 面试信息 / 人才储备 / 岗位分工）
四张并排的卡片，彩色图标 + 名称 + 数量；选中的蓝框浅蓝底。
⚠️ 名称和数量**上下两行**。中间试过压扁成一行（高 50px），太挤了，已还原。
数量下面那行单位小字（个岗位 / 位候选人…）按需求去掉了，不再恢复。 */
.pick-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:14px;margin:0 0 16px}
.pick-card{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;
background:#fff;border:1.5px solid var(--border);border-radius:10px;
transition:border-color .13s,background .13s,box-shadow .13s}
.pick-card:hover{border-color:#c9d6e8}
.pick-card.active{border-color:#2d6cdf;background:#f2f6fd;box-shadow:0 1px 6px rgba(45,108,223,.1)}
.pick-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;
justify-content:center;font-size:21px;flex-shrink:0;color:#fff}
.pick-icon.tone-blue{background:linear-gradient(135deg,#5b7cfa,#3a5ff0)}
.pick-icon.tone-orange{background:linear-gradient(135deg,#f5a623,#e8890c)}
.pick-icon.tone-green{background:linear-gradient(135deg,#12b886,#0ca678)}
.pick-icon.tone-purple{background:linear-gradient(135deg,#9775fa,#7048e8)}
.pick-text{display:flex;flex-direction:column;gap:1px;min-width:0}
.pick-label{font-size:13px;color:var(--text-secondary);line-height:1.2}
.pick-card.active .pick-label{color:#2d6cdf}
.pick-count{font-size:23px;font-weight:700;line-height:1.1}
.pick-card.active .pick-count{color:#2d6cdf}
/* 表格底部的汇总条（申请列表的「总入职人数 / 总离职人数」） */
.table-footer{display:flex;gap:28px;padding:12px 20px;border-top:1px solid var(--border);
background:#fafafa;border-radius:0 0 var(--radius) var(--radius)}
.table-footer .tf-item{display:flex;align-items:baseline;gap:6px;font-size:13px}
.table-footer .tf-item b{color:var(--text-secondary);font-weight:500}
.table-footer .tf-item span{font-weight:600;font-size:15px}
/* ==========================================================================
扩展（参考实现没有、但接真实接口后需要的东西）
========================================================================== */
/* 表格横向滚动容器：参考实现的表格直接塞在 card 里，列多了会撑破布局 */
.table-wrap{overflow-x:auto}
.table-wrap table{min-width:100%}
/* 列宽由 colWidths() 按**全部行**算好后写在 上。
不用 fixed 的话，分页（display:none 隐藏行）会让浏览器按当前页重算列宽，翻页时整表横向跳。 */
.table-wrap table.fixed-cols{table-layout:fixed}
/* 表格行内操作按钮组 */
.row-actions{display:flex;gap:6px;white-space:nowrap;justify-content:center}
.row-actions .btn{padding:4px 10px;font-size:12px}
.btn-text{color:var(--danger);padding:4px 8px;font-size:12px;border-radius:var(--radius)}
.btn-text:hover{background:#fee2e2}
/* 表格分页条：左侧显示人数，右侧显示页码 */
.table-pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--border);font-size:13px}
.table-pager .pager-total{color:var(--text-secondary)}
.table-pager .pager-total b{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.table-pager .pager-pages{margin-left:auto;display:flex;align-items:center;gap:4px}
.pager-btn{min-width:30px;height:30px;padding:0 9px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card-bg);color:var(--text);font-size:13px;transition:all .15s;font-variant-numeric:tabular-nums}
.pager-btn:hover:not(:disabled):not(.active){border-color:var(--accent);color:var(--accent)}
.pager-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.pager-btn:disabled{opacity:.45;cursor:not-allowed}
.pager-ellipsis{color:var(--text-secondary);padding:0 2px}
/* 表格里的进度条 + 百分比 */
.cell-progress{display:flex;align-items:center;gap:8px;min-width:120px}
.cell-progress .progress{flex:1}
.cell-progress span{font-size:12px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
/* 表格里的头像 + 姓名 */
.cell-who{display:flex;align-items:center;gap:8px}
/* 数字右对齐 */
.num{text-align:center;font-variant-numeric:tabular-nums}
/* 金额正负色 */
.amount-in{color:var(--success);font-weight:600}
.amount-out{color:var(--danger);font-weight:600}
/* 详情弹窗里的键值对 */
.desc{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px 16px;font-size:13px}
.desc dt{color:var(--text-secondary);font-size:12.5px}
.desc dd{margin:0}
/* 分区版详情（员工详情字段多，按基本信息/任职/联系…分组） */
.desc-section+.desc-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.desc-section-title{font-size:12px;font-weight:600;color:var(--text-secondary);letter-spacing:.04em;margin-bottom:12px}
.desc-section .desc{grid-template-columns:104px minmax(0,1fr)}
.desc dd.wrap{word-break:break-all}
/* 危险操作按钮：办理离职 */
.btn-danger-outline{color:var(--danger);border-color:#fca5a5;background:var(--card-bg)}
.btn-danger-outline:hover{background:#fef2f2;border-color:var(--danger)}
/* 星探部：四个「部」的可选卡片 */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.team-card{cursor:pointer;border:1px solid transparent;transition:all .15s;position:relative}
.team-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.team-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}
.team-card.active::after{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:var(--radius) 0 0 var(--radius)}
.team-card .team-size{font-size:12px;color:var(--text-secondary);font-weight:400;margin-left:8px}
.team-card .unit{font-size:12px;font-weight:500;color:var(--text-secondary);margin-left:6px}
.team-card .change b{color:var(--text);font-variant-numeric:tabular-nums}
.team-card .change .sound{color:var(--warning)}
/* 音浪数字统一用琥珀色，和签约/开播区分开 */
.sound b,.sound{color:var(--warning);font-variant-numeric:tabular-nums}
/* 可点选的人员行 */
.pick-row{cursor:pointer;transition:background .12s}
.pick-row:hover{background:var(--bg)}
.pick-row.selected{background:rgba(45,108,223,.08)}
.pick-row.selected td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.hint-card .empty{padding:36px 20px}
/* 达成率：达标绿 / 接近橙 / 差红 */
/* 可点选当筛选用的统计卡（员工数据页那 4 张） */
.stat-card.clickable{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .1s;user-select:none}
.stat-card.clickable:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(228,121,27,.12)}
.stat-card.clickable:active{transform:translateY(1px)}
.stat-card.clickable::after{content:'点击筛选';position:absolute;top:10px;right:12px;
font-size:11px;color:var(--text-secondary);opacity:0;transition:opacity .15s}
.stat-card.clickable:hover::after{opacity:.8}
.stat-card.clickable.active{border-color:var(--accent);border-width:2px;
background:linear-gradient(180deg,#fff8f1,#fff)}
.stat-card.clickable.active::after{content:'筛选中 ✕';opacity:1;color:var(--accent);font-weight:600}
.stat-card{position:relative}
/* compact：卡片不撑满一行，按内容宽度排（只有几张卡时不占满屏）。
⚠️ 上限从 236px 放宽到 340px（按需求「卡片加长一些」）——
现在资金管理那三张卡没有副标题了，236px 显得很短很空。 */
.stats-grid.compact{grid-template-columns:repeat(auto-fill,minmax(220px,340px));
justify-content:start;gap:12px;margin-bottom:18px}
.stats-grid.compact .stat-card{padding:14px 16px}
.stats-grid.compact .stat-card .value{font-size:20px}
.stats-grid.compact .stat-card .change{margin-top:2px}
/* 卡片里的动作按钮（本月入职卡里的「入职办理」等） */
.stat-card.has-action{padding-bottom:60px}
.stats-grid.compact .stat-card.has-action{padding-bottom:52px}
.stat-card .stat-action{position:absolute;right:20px;bottom:18px}
.stats-grid.compact .stat-card .stat-action{right:14px;bottom:12px}
.stat-card .stat-action.btn-primary{color:#fff}
/* 数据中心页面顶部的口径说明条 */
.data-note{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;
padding:10px 14px;margin-bottom:16px;font-size:13px;line-height:1.7}
.data-note b{font-weight:600}
.rate{font-variant-numeric:tabular-nums;font-weight:600}
.rate.good{color:var(--success)}
.rate.ok{color:var(--warning)}
.rate.bad{color:var(--danger)}
/* 页签上的条数角标 */
.tab-count{display:inline-block;margin-left:5px;padding:0 5px;border-radius:8px;
background:var(--warning);color:#fff;font-size:10px;line-height:15px}
/* 星探部：真实数据那一行的说明条 */
.live-note{margin:-4px 0 18px;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.8;
background:#f0fdf4;border:1px solid #bbf7d0;color:#166534}
.live-note b{color:#065f46}
/* 待确认提示（比如榜单文件里没有月份） */
.warn-note{background:#fffbeb;border-color:#fde68a;color:#92400e}
.warn-note b{color:#78350f}
/* 签约趋势的横条 */
.trend-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:12px}
.trend-label{width:64px;color:var(--text-secondary);flex:none;font-variant-numeric:tabular-nums}
.trend-bar{height:16px;border-radius:3px;background:linear-gradient(90deg,#f59e0b,#fbbf24);min-width:2px;
transition:width .2s}
.trend-num{color:var(--text-secondary);flex:none;font-variant-numeric:tabular-nums}
/* 本月新签的行 */
.row-new{background:#f0fdf4}
/* 趋势条：绿=正向（在播），红=流失 */
.trend-bar.bar-green{background:linear-gradient(90deg,#10b981,#34d399)}
.trend-bar.bar-red{background:linear-gradient(90deg,#ef4444,#f87171)}
.live-line{border-top:1px dashed var(--border);padding-top:6px;margin-top:6px}
/* 表头里的小字副标题 */
.th-sub{display:block;font-size:10px;font-weight:400;color:var(--text-secondary);margin-top:1px}
/* 侧边栏底部的「当前身份」——演示用，不是登录 */
.sidebar-user{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}
.sidebar-user .su-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sidebar-user .su-name{font-size:13px;font-weight:600;color:#fff}
.sidebar-user .su-scope{font-size:10px;padding:1px 6px;border-radius:8px;white-space:nowrap}
.sidebar-user .su-scope.all{background:rgba(16,185,129,.18);color:#6ee7b7}
.sidebar-user .su-scope.dept{background:rgba(245,158,11,.18);color:#fcd34d}
.sidebar-user .su-dept{font-size:11px;color:rgba(255,255,255,.45);margin:2px 0 8px}
.sidebar-user select{width:100%;font-size:11px;padding:5px 6px;border-radius:6px;
background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.8)}
.sidebar-user select option,.sidebar-user select optgroup{background:#1a1d29;color:#e5e7eb}
/* 页面内的次级说明文字 */
.muted{color:var(--text-secondary);font-size:12px}
.mono{font-family:SFMono-Regular,Consolas,"Liberation Mono",Menlo,monospace;font-size:12px}
/* 统一加载态 */
.loading{padding:60px;text-align:center;color:var(--text-secondary);font-size:13px}
.spinner{width:18px;height:18px;border:2px solid rgba(45,108,223,.25);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:-3px;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
/* 企业微信页面 */
.wecom-hero{text-align:center;padding:20px 0 30px}
.wecom-hero .ico{font-size:48px;margin-bottom:12px}
.wecom-hero h2{margin-bottom:8px;font-size:20px}
.wecom-hero p{color:var(--text-secondary);max-width:480px;margin:0 auto 24px}
.wecom-hero .btn{font-size:15px;padding:12px 32px}
.cap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.cap-card .ico{font-size:24px;margin-bottom:8px}
.cap-card h4{margin-bottom:6px;font-size:14px}
.cap-card p{font-size:13px;color:var(--text-secondary)}
.cap-card .foot{margin-top:12px}
.config-hint{font-size:12px;color:var(--text-secondary);margin-top:16px}
.status-line{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:var(--radius);background:#f9fafb;margin-bottom:20px;font-size:13px}
.status-line .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.status-line .dot.ok{background:var(--success)}
.status-line .dot.warn{background:var(--warning)}
.status-line code{font-family:SFMono-Regular,Consolas,monospace;font-size:12px}
/* 艺人数据顶部的「分类」下拉（原来是一排 8 个页签，按需求挪进搜索区） */
.pick-bar{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.pick-field{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-secondary)}
.pick-field select{padding:5px 10px;font-size:13px;font-family:inherit;color:var(--text);
background:#fff;border:1px solid var(--border);border-radius:6px;min-width:132px;cursor:pointer}
.pick-field select:hover{border-color:#c9d6e8}
.pick-count-hint{font-size:13px;color:var(--text-secondary)}
.pick-count-hint b{color:var(--text);font-weight:600}
/* 参考图里「直播达人」那张卡是玫红渐变图标 */
.pick-icon.tone-pink{background:linear-gradient(135deg,#ff5c8a,#e91e63)}
/* 不可点的卡片（艺人数据顶部那两张）：去掉指针和悬停反馈 */
.pick-card.static{cursor:default}
.pick-card.static:hover{border-color:var(--border)}
/* 查看详情里的「音浪明细」：每日柱状 + 月度对比 */
.sd-wrap{margin-top:4px}
.sd-month{margin-bottom:10px}
.sd-title{font-size:12px;color:var(--text-secondary);margin-bottom:6px}
.sd-days{display:flex;gap:3px;align-items:flex-end;flex-wrap:wrap}
.sd-day{display:flex;flex-direction:column;align-items:center;width:34px;gap:2px}
.sd-day i{display:block;width:100%;background:linear-gradient(180deg,#7aa8ff,#3b6fd4);
border-radius:2px;min-height:2px;height:0}
.sd-day b{font-size:10px;color:var(--text);font-weight:600;white-space:nowrap;
transform:scale(.92)}
.sd-day em{font-size:10px;font-style:normal;color:#9ca3af}
.sd-mrow{display:flex;align-items:center;gap:8px;margin:4px 0;font-size:12px}
.sd-mlabel{width:64px;color:var(--text-secondary)}
.sd-mbar{flex:1;height:10px;background:#f1f3f6;border-radius:5px;overflow:hidden}
.sd-mbar i{display:block;height:100%;background:linear-gradient(90deg,#ffb066,#e4791b)}
.sd-mrow b{width:84px;text-align:right;font-variant-numeric:tabular-nums}
/* 音浪详情：日历形式 */
.cal-wrap{max-height:62vh;overflow:auto}
.cal-month{margin-bottom:16px}
.cal-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-w{font-size:11px;color:#9ca3af;text-align:center;padding-bottom:2px}
.cal-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:42px;border-radius:6px;background:#f7f8fa;border:1px solid #eef0f3;gap:1px}
.cal-cell.empty{background:transparent;border-color:transparent}
.cal-cell em{font-size:10px;font-style:normal;color:#9ca3af}
.cal-cell b{font-size:10px;font-weight:600;color:var(--text-secondary);white-space:nowrap}
.cal-cell.h1{background:#eef4ff;border-color:#dbe6ff}
.cal-cell.h2{background:#dbe8ff;border-color:#c7daff}
.cal-cell.h3{background:#c2d7ff;border-color:#aecbff}
.cal-cell.h4{background:#a8c6ff;border-color:#8fb5ff}
.cal-cell.h4 b,.cal-cell.h3 b{color:#1e3a8a}
/* 音浪详情：累计 + 年/月选择 + 日历 */
.sd-top{display:flex;align-items:baseline;gap:10px;padding:10px 12px;margin-bottom:10px;
background:linear-gradient(90deg,#fff7ee,#fffdfa);border:1px solid #ffe3c7;border-radius:8px}
.sd-toplabel{font-size:12px;color:var(--text-secondary)}
.sd-total{font-size:22px;font-weight:700;color:#e4791b;font-variant-numeric:tabular-nums}
.sd-topnote{font-size:12px;margin-left:auto}
.sd-pick{display:flex;align-items:center;gap:14px;margin-bottom:12px;font-size:13px;
color:var(--text-secondary);flex-wrap:wrap}
.sd-pick label{display:flex;align-items:center;gap:6px}
.sd-pick select{padding:5px 10px;font-size:13px;font-family:inherit;color:var(--text);
background:#fff;border:1px solid var(--border);border-radius:6px;cursor:pointer;min-width:96px}
.sd-pick select:hover{border-color:#c9d6e8}
.sd-sum{margin-left:auto;font-size:13px;color:var(--text-secondary)}
.sd-sum b{color:var(--text);font-size:15px;font-variant-numeric:tabular-nums}
/* 卡片的表头默认是「标题左、说明右」；这个变体让说明紧跟标题、一起靠左 */
.card-header.hdr-left{justify-content:flex-start;gap:16px;flex-wrap:wrap}
/* 进度条（直播部运营业绩：本月音浪 / 目标音浪） */
.bar-wrap{display:flex;align-items:center;gap:8px}
.bar{flex:1;height:9px;background:#e8eaee;border-radius:99px;overflow:hidden;min-width:60px;box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}
/* ⚠️ 这里原来写的是 var(--brand)，但主题里**没有这个变量**（只有 --accent 蓝），
导致「没达标」的实心段颜色无效、看着是黑的。改成品牌橙（和 logo 一致）。 */
.bar>i{display:block;height:100%;background:#e4791b;border-radius:99px;transition:width .3s ease}
.bar>i.over{background:#2e9e5b}
.bar-txt{font-size:12px;color:var(--text-secondary);white-space:nowrap;font-variant-numeric:tabular-nums}
/* 自定义悬停浮层（替代浏览器原生 title：样式统一、立刻出现、不用等 1 秒）
用 data-tip + attr() 实现，纯 CSS，不写 JS。 */
[data-tip]{position:relative}
[data-tip]:hover::after{
content:attr(data-tip);
position:absolute;left:0;bottom:calc(100% + 8px);z-index:60;
background:#1f2430;color:#fff;font-size:12px;line-height:1.6;
padding:8px 12px;border-radius:8px;white-space:pre;pointer-events:none;
box-shadow:0 6px 20px rgba(0,0,0,.22);
}
[data-tip]:hover::before{
content:'';position:absolute;left:16px;bottom:calc(100% + 2px);z-index:61;
border:6px solid transparent;border-top-color:#1f2430;pointer-events:none;
}
/* 刻度条（直播部「任务音浪」列，用户选择③）
一条尺子 + 档位刻度 + 当前音浪的小圆点。 */
.scale{position:relative;padding:2px 0 0}
.scale-track{position:relative;height:10px;background:#eef0f4;border-radius:99px;overflow:visible}
.scale-track .fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#f5b071,#e4791b);border-radius:99px}
.scale-track .tick{position:absolute;top:-4px;width:2px;height:18px;background:#c8ccd6;border-radius:2px}
.scale-track .dot{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
background:#fff;border:3px solid #e4791b;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.scale-lbl{position:relative;height:16px;margin-top:4px;font-size:11px;color:#8b90a0}
.scale-lbl span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.scale-lbl span:first-child{left:0;transform:none}
.scale-lbl span.right{left:auto;right:0;transform:none}
.scale-val{font-size:12px;color:var(--text-secondary);margin-top:2px;font-variant-numeric:tabular-nums}
.scale-val b{color:#e4791b;font-size:13px}
/* 完成状态的百分比（不用进度条了）：达标绿、没到橙、还没开始灰 */
.pct{font-size:13px;font-variant-numeric:tabular-nums}
.pct.ok{color:#2e9e5b}
.pct.low{color:#e4791b}
/* 表头跟单元格对齐（直播部那三列：数字右对齐 → 表头也要右对齐，否则看着不齐） */
th.ta-r{text-align:right}
th.ta-l{text-align:left}
/* 每日音浪矩阵（日期 × 艺人）—— 按用户要求做成「固定的，能上下左右拉」：
外层容器固定高度 + 双向滚动，表头行和日期列都冻结（滚动时不动）。 */
/* 按用户要求：纵向只露约 10 行（10×33 + 表头 ≈ 380px）；横向每列定宽，
一屏大约 8 位主播，多出来的往右拉（容器宽度不够就出横向滚动条）。 */
/* max-width：日期(130) + 8 位主播(8×104) + 合计(104) ≈ 1070px —— 一屏正好 8 位主播，
第 9 位开始往右拉。 */
/* ⚠️ 不要给这里加 max-width —— 之前卡在 1070px 想「一屏 8 位主播」，
结果右边空了一大半（用户要求铺满）。现在宽度跟着卡片走，能显示多少列就显示多少，
列多了再横向拉。 */
.mx-scroll{max-height:608px;width:100%;overflow:auto;border-top:1px solid var(--border);
border-bottom:1px solid var(--border);background:#fff}
table.daily-mx{border-collapse:separate;border-spacing:0;min-width:100%}
/* 列宽 92px：容器约 1345px 时 → 日期(120) + **12 位主播**(12×92) + 合计(92) ≈ 1316px，正好一屏 12 位。 */
/* 列宽由 JS 动态算：--mx-col = (容器宽 - 日期 - 合计) / 12 —— 永远是「12 位主播」 */
table.daily-mx th,table.daily-mx td{padding:8px 10px;font-size:12.5px;white-space:nowrap;width:var(--mx-col,92px);min-width:var(--mx-col,92px);
border-bottom:1px solid var(--border)}
table.daily-mx thead th{position:sticky;top:0;z-index:3;background:#f7f8fa;font-weight:600}
/* ⚠️ ta-l 必须显式写 text-align:left —— 全局 th,td 是居中的，只写 sticky 不管对齐 */
table.daily-mx td.ta-l,table.daily-mx th.ta-l{text-align:left;width:var(--mx-date,120px);min-width:var(--mx-date,120px);position:sticky;left:0;z-index:2;background:#fff;
box-shadow:1px 0 0 var(--border)}
table.daily-mx thead th.ta-l{z-index:4;background:#f7f8fa;text-align:left}
table.daily-mx tbody tr:hover td{background:#fafbfc}
/* 滚动条细一点，别太抢眼 */
.mx-scroll::-webkit-scrollbar{width:10px;height:10px}
.mx-scroll::-webkit-scrollbar-thumb{background:#c8ccd6;border-radius:6px}
.mx-scroll::-webkit-scrollbar-track{background:#f0f2f5}
/* 「艺人详情」面板的搜索框（自带搜索，和年月联动） */
.pick-input{border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;
min-width:300px;outline:none;background:#fff}
.pick-input:focus{border-color:#e4791b;box-shadow:0 0 0 3px rgba(228,121,27,.12)}
/* 每日矩阵里「合计」列靠右（td 全局是居中的，得显式写） */
table.daily-mx td.ta-r{text-align:right;font-variant-numeric:tabular-nums}
table.daily-mx th.ta-r{text-align:right}
/* 底部「每位主播合计」那一行：底色略深、加粗 */
/* 收尾「合计」行 —— 按用户要求**不冻结**，就当普通最后一行（sticky 会让格子跟上面错位 ✗） */
table.daily-mx tr.mx-sum td{background:#f7f8fa;font-weight:600;
border-top:2px solid var(--border);border-bottom:none}
/* 编辑弹窗里的表单控件（form-group 里原来是给 input 写死了，select 要一起管） */
.form-group select,.form-group input[type="date"]{
width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;
font-size:13px;background:#fff;outline:none;color:var(--text);
}
.form-group select:focus,.form-group input:focus{border-color:#e4791b;box-shadow:0 0 0 3px rgba(228,121,27,.12)}
/* 直播部·三个部总概览（三张卡上面那一行） */
.ov-bar{display:flex;align-items:center;gap:26px;background:#fff;border-radius:var(--radius);
box-shadow:var(--shadow);padding:14px 20px;margin-bottom:16px;flex-wrap:wrap}
.ov-cell{display:flex;align-items:baseline;gap:6px}
.ov-cell.ov-grow{flex:1;min-width:220px;align-items:center}
.ov-k{font-size:13px;color:var(--text-secondary);margin-right:2px}
.ov-v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.ov-u{font-size:12px;color:var(--text-secondary)}
.ov-bar-in{flex:1;display:flex;height:10px;border-radius:99px;overflow:hidden;background:#eef0f4;min-width:120px}
.ov-bar-in>i{display:block;height:100%}
.ov-bar-in>i:nth-child(1){background:#2d6cdf}
.ov-bar-in>i:nth-child(2){background:#2e9e5b}
.ov-bar-in>i:nth-child(3){background:#8b5cf6}
/* 概览改成只有三项 → 字号大一点、间距宽一点，一行就够 */
.ov-bar{justify-content:flex-start;gap:56px;padding:18px 24px}
.ov-bar .ov-k{font-size:14px}
.ov-bar .ov-v{font-size:24px}
/* 直播部：部门页签（带人数徽标 + 音浪小字） */
.lv-team-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 16px}
.lv-tab-sub{font-size:12px;color:var(--text-secondary);font-weight:400}
.lv-team-tab.active .lv-tab-sub{color:#fff;opacity:.85}
/* 直播部：选中部门的那条单独信息（页签下面） */
.lv-team-info{display:flex;align-items:center;gap:28px;background:#fff;border-radius:var(--radius);
box-shadow:var(--shadow);padding:12px 20px;margin-bottom:16px;flex-wrap:wrap}
.lv-ti-name{font-size:15px;font-weight:700;padding-right:14px;border-right:1px solid var(--border)}
.lv-ti{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;color:var(--text-secondary)}
.lv-ti em{font-style:normal}
.lv-ti b{font-size:17px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
/* 直播部：运营人员页签（名字 + 人数徽标 + 职位 + 音浪·达成率） */
.op-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px}
.op-tab .lv-tab-sub{font-size:12px;color:var(--text-secondary);font-weight:400}
.op-tab.active .lv-tab-sub{color:#fff;opacity:.9}
.op-tab .pct{font-size:12px}
/* 直播部：顶部「核心数据」四格（照抖音后台那种：标题 + 一条分隔线 + 四格） */
.core-card{background:#f2f3f5;border:1px solid #e8eaed;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px}
.core-title{padding:16px 20px 12px;font-size:15px;font-weight:700}
.core-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e2e5e9}
.core-cell{padding:14px 20px 15px;border-right:1px solid #e2e5e9}
.core-cell:last-child{border-right:none}
.core-k{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:6px}
.core-v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.core-u{font-style:normal;font-size:13px;font-weight:500;color:var(--text-secondary);margin-left:3px}
/* 直播部的年/月下拉也调暗一点（和「核心数据」卡一个调子 ✓ 只改这两个 select ✗ 别的不动） */
#lv-year,#lv-month{background:#f2f3f5;border:1px solid #e8eaed}
#lv-year:hover,#lv-month:hover{background:#ecedef}
/* 核心数据五格 */
.core-grid-5{grid-template-columns:repeat(5,1fr)}
.core-v.ok{color:var(--success)}
.core-v.low{color:var(--warning)}
/* 核心数据标题后面那个范围小字 */
.core-scope{font-size:13px;font-weight:400;color:var(--text-secondary);margin-left:6px}
/* 直播部艺人详情：不要外层卡片，直接铺在页面上 */
.lv-detail-wrap{margin-bottom:16px}
.lv-detail-wrap .mx-scroll{background:#fff;border-radius:8px}
.lv-detail-wrap table.daily-mx{background:#fff}
/* 艺人详情黄条里的强调色 */
.warn-note b{color:#78350f}
.warn-note .rate.good{color:#166534}
.warn-note .rate.ok{color:#c2410c}
.warn-note .rate.bad{color:#b91c1c}
/* 直播部艺人详情那条提示条（按用户要求：绿色版 ✓ 左对齐 ✓ 上下窄一点 ✓） */
.lv-detail-note{display:flex;align-items:center;justify-content:flex-start;gap:8px;
text-align:left;padding:6px 14px;line-height:1.6;margin:0}
.lv-note-ico{font-size:14px;flex:none}
.warn-note b{color:inherit}
/* 艺人详情顶部（绿条那一层）：不加内边距，和下面的表格左边缘对齐 */
.lv-detail-head{padding:0;margin-bottom:4px}
/* ===== 直播部整体纵向间距统一（按用户要求「上下好好整整间距」）=====
节奏：顶部页签 → 年月下拉 → 核心数据 → 运营页签 → 详情绿条 → 表格
统一 14px；页签自带下划线，所以下面留稍多一点 */
.tabs-row{margin:0 0 14px}
.lv-team-tab,.op-tab{padding:8px 14px}
.search-bar{margin:0 0 14px}
.core-card{margin:0 0 14px}
.core-title{padding:14px 20px 10px}
.core-k{margin-bottom:4px}
.core-cell{padding:12px 20px 14px}
.lv-detail-head{margin:0 0 6px;padding:0}
.lv-detail-note{padding:7px 14px;margin:0}
.lv-detail-wrap{margin-bottom:0}
.lv-detail-wrap .mx-scroll{margin-top:6px;margin-bottom:0}
/* 绿条和下面表格严格对齐：外边距清零、左右内边距和表格首列一致（10px） */
.lv-detail-head{padding:0;margin:0 0 6px}
.lv-detail-note{padding:7px 10px;margin:0;border-radius:8px}
.lv-detail-wrap .mx-scroll{margin:0}
/* 按用户要求：绿条不要圆角 */
.lv-detail-note{border-radius:0}
/* 艺人详情那一块的标题行 */
.lv-detail-title{font-size:15px;font-weight:700;padding:0 0 8px}
/* 艺人详情整块（按用户要求：标题 + 绿条 + 表格 同一个白框，一体） */
.lv-detail-wrap{background:#fff;border-radius:8px;box-shadow:var(--shadow);padding:14px 0 0;margin-bottom:16px}
.lv-detail-title{font-size:15px;font-weight:700;padding:0 16px 12px}
.lv-detail-head{padding:0 16px;margin:0}
.lv-detail-note{border-radius:0}
.lv-detail-wrap .mx-scroll{margin:8px 0 0;border-radius:0 0 8px 8px}
.lv-detail-wrap table.daily-mx{background:#fff}
/* 绿条在框外 → 上下留点距离；白框里只放标题+表格 */
.lv-detail-note{margin:0 0 10px}
.lv-detail-head{padding:0;margin:0}
.lv-detail-wrap{padding:14px 0 0;margin-bottom:16px}
.lv-detail-title{padding:0 16px 10px}
.lv-detail-wrap .mx-scroll{margin:0;border-radius:0 0 8px 8px}
/* 按用户要求：绿条那行字稍微明显一点（字号+1、加粗值更重、颜色加深） */
.lv-detail-note{font-size:13px;font-weight:500;padding:8px 12px}
.lv-detail-note b{font-weight:700;color:#065f46;font-size:13.5px}
.lv-note-ico{font-size:15px}
/* 按用户要求：绿条**固定高度**，换运营时不跳（原来是几行就多高，切人就串一下） */
.lv-detail-note{height:38px;min-height:38px;max-height:38px;box-sizing:border-box;
display:flex;align-items:center;flex-wrap:nowrap;overflow:hidden}
.lv-detail-note>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 按用户要求：绿条里每个字段**固定宽度**，换人时数字不左右串 */
.lv-detail-note{gap:0}
.lv-nf{display:inline-block;flex:none;padding-right:18px;white-space:nowrap}
.lv-nf-wide{width:260px}
.lv-nf:nth-of-type(2){width:180px}
.lv-nf:nth-of-type(3){width:170px}
.lv-nf:nth-of-type(4){width:170px}
.lv-nf:nth-of-type(5){width:200px}
.lv-nf:nth-of-type(6){width:200px}
.lv-nf:nth-of-type(7){width:auto}
.lv-note-ico{width:24px;margin-right:6px}
/* 修正：宽度收小 + 靠左排，别撑满（上一版太宽把最后一格挤出去了） */
.lv-detail-note{justify-content:flex-start}
.lv-nf-wide{width:200px}
.lv-nf:nth-of-type(2){width:110px}
.lv-nf:nth-of-type(3){width:145px}
.lv-nf:nth-of-type(4){width:145px}
.lv-nf:nth-of-type(5){width:165px}
.lv-nf:nth-of-type(6){width:165px}
.lv-nf:nth-of-type(7){width:auto}
/* 再修：第一格（部门·运营）200px 太窄被压字了 → 260px，职位那格给足 */
.lv-nf-wide{width:260px}
.lv-nf:nth-of-type(2){width:120px}
.lv-nf{overflow:hidden;text-overflow:ellipsis}
/* 最后一版：第一格给足 340px 不再截断 */
.lv-nf-wide{width:340px}
/* 只写运营名了 → 第一格不用 340px 那么宽 */
.lv-nf-wide{width:120px}
/* 分配弹窗 */
.search-bar .spacer{flex:1}
.as-list{max-height:420px;overflow:auto;border:1px solid var(--border);border-radius:8px}
.as-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-bottom:1px solid #f1f2f4}
.as-row:last-child{border-bottom:none}
.as-name{width:150px;font-weight:500;display:flex;align-items:baseline;gap:6px}
.as-sub{font-style:normal;font-size:12px;color:var(--text-secondary)}
.as-cur{width:190px;font-size:12px;color:var(--text-secondary)}
.as-sel{flex:1;min-width:120px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;font-size:13px}
.as-go{flex:none;padding:6px 12px;font-size:13px}
/* 审批状态徽标 */
.ap-badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:500}
.ap-badge.warn{background:#fffbeb;color:#92400e;border:1px solid #fde68a}
.ap-badge.ok{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.ap-badge.no{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}
/* 单元格里多个ID 竖着叠（第一个正常，后面的小一号淡化缩进） */
.cell-ids{line-height:1.5}
.cell-ids-sub{font-size:12px;color:var(--text-secondary);padding-left:8px;position:relative}
.cell-ids-sub::before{content:'·';position:absolute;left:0}
/* 编辑里的多行框 */
.form-group textarea{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;line-height:1.7;resize:vertical;outline:none}
.form-group textarea:focus{border-color:#e4791b;box-shadow:0 0 0 3px rgba(228,121,27,.12)}
/* 直播部艺人详情列头里的（昵称）—— 小一号淡化，别抢名字 */
.mx-nick{font-weight:400;font-size:11px;color:var(--text-secondary);white-space:nowrap}
/* 直播部「艺人详情」列头：姓名在上、昵称在下（上下两行） */
.daily-mx thead th .mx-nm{font-weight:600;line-height:1.35;white-space:nowrap}
.daily-mx thead th .mx-nk{font-weight:400;font-size:11px;color:var(--text-secondary);line-height:1.3;white-space:nowrap}
/* 列头加高一点，两行放得下；竖线（列分隔）加明显一些 */
.daily-mx thead th{border-right:1px solid #eceef2;padding-top:8px;padding-bottom:8px}
.daily-mx thead th:last-child{border-right:none}
.daily-mx tbody td{border-right:1px solid #f4f5f7}
.daily-mx tbody td:last-child{border-right:none}
/* 艺人详情表头两行：第一行姓名、第二行昵称（各自独立一格） */
.daily-mx thead tr:first-child th{border-bottom:none}
.daily-mx thead tr:nth-child(2) th{border-top:1px dashed #e8eaee}
.daily-mx thead th.mx-r1{font-weight:600;font-size:13px;white-space:nowrap;padding-bottom:2px}
.daily-mx thead th.mx-r2{font-weight:500;font-size:11.5px;color:#8a6d4b;background:#fdf7f1;white-space:nowrap;padding-top:2px;min-width:64px}
.daily-mx thead th.mx-r2:empty::after{content:'—';color:#c8ccd4;font-weight:400}
/* 按用户要求：姓名和昵称**字体大小、颜色、粗细完全一样** ✓
（原来昵称小一号、暖色底 ✗ 现在统一 ✓）
两行只靠「上下位置」区分 ✓ 不靠颜色/字号 ✗ */
.daily-mx thead th.mx-r1,
.daily-mx thead th.mx-r2{
font-weight:600;
font-size:13px;
color:inherit;
background:transparent;
white-space:nowrap;
padding-top:6px;
padding-bottom:6px;
}
.daily-mx thead th.mx-r1{padding-bottom:2px}
.daily-mx thead th.mx-r2{padding-top:2px}
.daily-mx thead th.mx-r2:empty::after{content:'—';color:#c8ccd4;font-weight:600}
/* 按用户要求：列宽**固定**，昵称长短不许把列撑变形 ✓
table-layout:fixed → 列宽只认 --mx-col ✓ 内容超了走省略号 ✓ */
.daily-mx{table-layout:fixed}
.daily-mx thead th.mx-r1,
.daily-mx thead th.mx-r2{
overflow:hidden;
text-overflow:ellipsis;
max-width:var(--mx-col);
}
.daily-mx thead th.mx-r2:not(:empty){cursor:default}
.daily-mx thead th .mx-full{display:none}
/* 悬停时把完整昵称显示出来（title 也带着 ✓） */
.daily-mx thead th.mx-r1:hover,
.daily-mx thead th.mx-r2:hover{overflow:visible}
/* 按用户要求：表头**两行的高度钉死** ✓ 昵称长短/有无都不许上下动 ✗
（原来 :empty 那格靠 ::after 撑高度 ✗ 内容和空格的盒高不一样 → 行高会抖 ✗）
现在是固定 height + 固定 line-height ✓ 内容垂直居中 ✓ */
.daily-mx thead tr{height:24px}
.daily-mx thead th{
height:24px;
line-height:24px;
padding-top:0;
padding-bottom:0;
vertical-align:middle;
box-sizing:border-box;
}
.daily-mx thead th.mx-r1,
.daily-mx thead th.mx-r2{
height:24px;
line-height:24px;
padding:0 6px;
vertical-align:middle;
}
.daily-mx thead th.mx-r2:empty::after{content:'—';color:#c8ccd4;line-height:24px}
/* 悬停不再改变尺寸（原来 overflow:visible 会跳 ✗） */
.daily-mx thead th.mx-r1:hover,
.daily-mx thead th.mx-r2:hover{overflow:hidden}
/* ⚠️ 修正上一版：上一版把 th 硬钉成 height:24px ✗ 内容比格子高就**叠在一起**了 ✗
（用户看到的「昵称跟着动 / 上下重影」就是这个 ✗）
正确做法：**只给 tr 一个最小高度** ✓ th 让它自然撑开 ✓ 两行高度就一致了 ✓ */
.daily-mx thead tr{height:26px}
.daily-mx thead th{
height:auto;
min-height:0;
line-height:1.5;
padding:5px 6px;
vertical-align:middle;
box-sizing:border-box;
}
.daily-mx thead th.mx-r1,
.daily-mx thead th.mx-r2{
height:auto;
line-height:1.5;
padding:5px 6px;
vertical-align:middle;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
max-width:var(--mx-col);
}
/* 按用户要求：昵称那一行**底部线必须是平的** ✓
办法：每个表头格子里一定要有内容（空的也要占位 ✓）→ 行高才会一致 ✓
再给 th 一个固定 min-height ✓ 双保险 ✓ */
.daily-mx thead th.mx-r1,
.daily-mx thead th.mx-r2{ min-height:22px; }
.daily-mx thead th .mx-dash{ display:inline-block; min-width:10px; color:#c8ccd4; }
.daily-mx thead th.muted{ color:#c8ccd4; }
.daily-mx thead th.mx-r2:empty::after{ content:'\00a0'; }
/* 表头整体下边框统一 ✓ 一条直线 ✓ */
.daily-mx thead tr:nth-child(2) th{ border-bottom:1px solid #e8eaee; }
/* 按用户要求：滚动容器里**表头两行都钉住** ✓（姓名一行 + 昵称一行 ✓）
数据往下滚，这两行不动 ✓ */
.mx-scroll{ position:relative; }
.daily-mx thead th{
position:sticky;
z-index:3;
background:#fff;
}
/* 第一行（姓名）钉在最上面 ✓ 第二行（昵称）钉在它下面 ✓ */
.daily-mx thead tr:nth-child(1) th{ top:0; }
.daily-mx thead tr:nth-child(2) th{ top:26px; }
/* 日期 + 合计 跨两行，也要钉住，别被盖 */
.daily-mx thead th[rowspan]{ z-index:4; }
/* 钉住时给个底影，滚过去能看出来是表头 ✓ */
.daily-mx thead tr:nth-child(2) th{ box-shadow:0 1px 0 #e8eaee; }
/* ⚠️ 按用户要求：表头（姓名行 + 昵称行）背景**必须完全不透明** ✗
上一版我给 .mx-r2 设过 background:transparent ✗（为了统一字体那轮 ✗）
→ 钉住的时候下面的数据会**透出来** ✗
这里用 !important 全部压回白色 ✓ 连 tr / thead 一起 ✓ */
.daily-mx thead,
.daily-mx thead tr,
.daily-mx thead tr th,
.daily-mx thead th.mx-r1,
.daily-mx thead th.mx-r2,
.daily-mx thead th.muted{
background:#ffffff !important;
background-image:none !important;
}
/* 钉住那两行再加一层实心底 + 分隔线 ✓ 滚动时不会和数据混在一起 ✓ */
.daily-mx thead tr:nth-child(1) th{ box-shadow:inset 0 -1px 0 #f0f1f4; }
.daily-mx thead tr:nth-child(2) th{ box-shadow:0 1px 0 #e8eaee; }
/* ⚠️ 按用户反馈：昵称栏滚动时还会「抖一下」✗
根因：默认 border-collapse:collapse 时 sticky 表头的边框和行高会差半个像素 ✗
（而且 top:26px 是估的 ✗ 实际行高 26.5px 就会错位 ✗）
修法：
① border-collapse:separate + border-spacing:0 ✓（sticky 不再抖 ✓）
② 表头两行用**固定像素高度**、并且 top 值跟它严格对齐 ✓
③ 用 line-height 定死内容高度 ✓ 不用 padding 撑 ✗ */
.daily-mx{ border-collapse:separate !important; border-spacing:0 !important; }
.daily-mx thead th{ box-sizing:border-box; }
.daily-mx thead tr:nth-child(1) th{ height:28px !important; line-height:28px !important; padding:0 6px !important; top:0 !important; }
.daily-mx thead tr:nth-child(2) th{ height:26px !important; line-height:26px !important; padding:0 6px !important; top:28px !important; }
.daily-mx thead th[rowspan]{ top:0 !important; height:54px !important; line-height:54px !important; }
/* 分隔线用 box-shadow 画（separate 模式下 border 会占位 ✗） */
.daily-mx thead tr:nth-child(1) th{ box-shadow:inset 0 -1px 0 #f0f1f4 !important; }
.daily-mx thead tr:nth-child(2) th{ box-shadow:0 1px 0 #e8eaee !important; }
.daily-mx tbody td{ border-right:1px solid #f4f5f7; }
/* 按用户要求：**姓名那一行暗一点** ✓（浅灰底 ✓ 跟昵称行分得开 ✓）
注意：钉住时背景必须不透明 ✓ 这里用的是实色 #f7f8fa（不是 rgba ✗）✓ */
.daily-mx thead tr:nth-child(1) th{
background:#f7f8fa !important;
color:#3d4249;
font-weight:600;
}
.daily-mx thead tr:nth-child(1) th.muted{ background:#f7f8fa !important; }
/* 昵称行保持白的 ✓ 两行一深一浅 ✓ */
.daily-mx thead tr:nth-child(2) th{ background:#ffffff !important; }
/* 跨两行的「日期 / 合计」跟着深的走 ✓ 不然两截颜色 ✗ */
.daily-mx thead th[rowspan]{ background:#f7f8fa !important; }
/* 按用户要求：**昵称行也加深** ✓（和姓名行一个底色 ✓）
两行都是浅灰 ✓ 中间用一条白线分开 ✓ 依旧实色不透明 ✓ */
.daily-mx thead tr:nth-child(2) th{
background:#f7f8fa !important;
color:#5a6068;
}
.daily-mx thead tr:nth-child(2) th.muted{ background:#f7f8fa !important; }
.daily-mx thead tr:nth-child(2) th .mx-dash{ color:#a8adb6; }
/* 两行之间的分界线在浅灰上要看得见 ✓ 用略深一点的线 ✓ */
.daily-mx thead tr:nth-child(1) th{ box-shadow:inset 0 -1px 0 #e6e8ec !important; }
/* 表头整体下沿一条稍深的线 ✓ 跟数据分开 ✓ */
.daily-mx thead tr:nth-child(2) th{ box-shadow:0 1px 0 #dfe2e7 !important; }
/* 按用户要求：**姓名行不要加粗** ✓（跟上面「赵天龙」那排运营页签一个粗细 ✓）
昵称行保持原样不动 ✓ */
.daily-mx thead tr:nth-child(1) th,
.daily-mx thead tr:nth-child(1) th.mx-r1{
font-weight:400 !important;
}
/* 「日期 / 合计」这两格跨行 ✗ 是表头标签 ✓ 也统一不加粗 ✓ */
.daily-mx thead th[rowspan]{ font-weight:400 !important; }
/* 昵称行：明确不动 ✗（这行只是写出来说明，实际不加任何新规则） */
/* 按用户要求：艺人详情表头**只剩一行**（姓名 ✓ 昵称放悬停提示里 ✓）
原来给第二行（昵称）设的那些 sticky/高度规则自然失效 ✓ 这里显式收尾 ✓ */
.daily-mx thead tr:nth-child(2){ display:none; }
.daily-mx thead th.mx-r1{
height:30px !important;
line-height:30px !important;
padding:0 6px !important;
top:0 !important;
background:#f7f8fa !important;
font-weight:400 !important;
font-size:13px;
color:#3d4249;
cursor:default;
text-align:center;
}
.daily-mx thead th{ height:30px !important; line-height:30px !important; background:#f7f8fa !important; }
.daily-mx thead th.muted{ background:#f7f8fa !important; }
/* 悬停提示：系统的原生 title ✓ 另外加个淡色下划线暗示「这里能看昵称」✓ */
.daily-mx thead th.mx-r1[title]:hover{ background:#eef1f5 !important; }
/* ═══ 按用户要求：表头姓名悬停**瞬时提示** + 悬停底色加深且不透明 ═══
① 不用系统 title ✗（系统要等 1~2 秒 ✗）
改用 data-tip + ::after 自绘 ✓ 鼠标一进去就显示 ✓
② 悬停背景 #e4e8ee（实色 ✓ 不透明 ✓ 比 #f7f8fa 明显深一档 ✓） */
.daily-mx thead th.mx-r1{
position:sticky;
background:#f7f8fa !important;
overflow:visible;
}
.daily-mx thead th.mx-r1 .mx-tipwrap{
display:inline-block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
vertical-align:middle;
}
.daily-mx thead th.mx-r1:hover{ background:#e4e8ee !important; }
/* 提示气泡：实色深底 ✓ 不透明 ✓ 立刻出现 ✓ */
.daily-mx thead th.mx-r1[data-tip]:hover::after{
content:attr(data-tip);
position:absolute;
left:50%;
top:calc(100% + 6px);
transform:translateX(-50%);
z-index:99;
background:#2f3540;
color:#fff;
font-size:12px;
font-weight:400;
line-height:1.5;
padding:6px 10px;
border-radius:6px;
white-space:nowrap;
box-shadow:0 6px 18px rgba(0,0,0,.22);
pointer-events:none;
transition:none;
}
/* 小三角 ✓ */
.daily-mx thead th.mx-r1[data-tip]:hover::before{
content:'';
position:absolute;
left:50%;
top:calc(100% + 1px);
transform:translateX(-50%);
z-index:100;
border:5px solid transparent;
border-bottom-color:#2f3540;
pointer-events:none;
}
/* ⚠️ 按诊断结果修：气泡**确实生成了** ✓ 但被下面的数据格盖住 / 被 sticky 层级压住 ✗
（th 是 sticky z-index:3 ✗ 气泡虽然 z-index:99 ✗ 但父级层叠上下文把它锁在 3 那一层 ✗）
修法：
① 悬停时把 th 自己的 z-index 抬到 60 ✓ 让它整体浮到数据行上面 ✓
② 气泡改成**显示在姓名上方**（top:auto; bottom:calc(100% + 6px) ✓）
这样不会被下面的表格内容压 ✗ 也不受滚动容器裁切影响 ✓
③ 表格外层 .mx-scroll 加 isolation:isolate ✓ 层叠更干净 ✓ */
.daily-mx thead th.mx-r1:hover{ z-index:60 !important; }
.daily-mx{ isolation:isolate; }
.daily-mx thead th.mx-r1[data-tip]:hover::after{
top:auto;
bottom:calc(100% + 7px);
z-index:1000;
}
.daily-mx thead th.mx-r1[data-tip]:hover::before{
top:auto;
bottom:calc(100% + 2px);
border-bottom-color:transparent;
border-top-color:#2f3540;
z-index:1001;
}
/* ⚠️ 上一版把气泡放到姓名**上方** ✗ 跑出滚动容器被裁掉了 ✗
现在：放回**下方**（在容器内部 ✓ 不会被裁 ✓）
+ th 悬停时 z-index:60（已加 ✓）盖住数据行 ✓ */
.daily-mx thead th.mx-r1[data-tip]:hover::after{
top:calc(100% + 7px);
bottom:auto;
z-index:1000;
}
.daily-mx thead th.mx-r1[data-tip]:hover::before{
top:calc(100% + 2px);
bottom:auto;
border-top-color:transparent;
border-bottom-color:#2f3540;
z-index:1001;
}
/* 保险：容器不裁横向溢出 ✓ 竖向还是 auto（要滚动 ✓） */
.mx-scroll{ overflow-x:visible; }
/* 真实 DOM 气泡（#mxTip）—— 保证看得见 ✓ 深色实底 ✓ 立刻显示 ✓ */
#mxTip{
position:fixed;
transform:translateX(-50%);
z-index:99999;
display:none;
background:#2f3540;
color:#fff;
font-size:12.5px;
line-height:1.5;
padding:7px 12px;
border-radius:7px;
white-space:nowrap;
box-shadow:0 8px 22px rgba(0,0,0,.28);
pointer-events:none;
}
#mxTip::before{
content:'';
position:absolute;
left:50%;
top:-5px;
transform:translateX(-50%);
border:5px solid transparent;
border-bottom-color:#2f3540;
border-top:none;
}
/* 悬停那格深一档 ✓ 实色 ✓ */
.daily-mx thead th.mx-r1:hover{ background:#dde2e9 !important; }
/* ═══ 按用户要求：运营页签做成截图里那种「胶囊 + 数字角标」═══
（像「全部主播 768」「今日开播 88」那种 ✓）
未选中：白底 + 细边 + 灰字
选中： 浅橙底 + 橙字 + 橙色数字底（跟品牌色一致 ✓） */
.op-pills{display:flex;flex-wrap:wrap;gap:10px}
.op-pill{
display:inline-flex;
align-items:center;
gap:8px;
height:34px;
padding:0 14px;
border:1px solid #e6e8ec;
border-radius:9px;
background:#fff;
color:#4a5058;
font-size:14px;
font-weight:400;
line-height:1;
cursor:pointer;
transition:background .12s,border-color .12s,color .12s;
}
.op-pill:hover{background:#f7f8fa;border-color:#d8dce3}
.op-pill .op-pill-n{
display:inline-block;
min-width:22px;
padding:2px 6px;
border-radius:6px;
background:#f0f2f5;
color:#6b7280;
font-size:12px;
font-weight:600;
text-align:center;
}
.op-pill.on{
background:#eef4ff;
border-color:#cddffb;
color:#2d6cdf;
font-weight:600;
}
.op-pill.on .op-pill-n{background:#fff;color:#2d6cdf}
/* 按用户要求：运营胶囊**去圆角** ✓ **背景透明** ✓
（原来 border-radius:9px + 白底/浅蓝底 ✗ 现在都去掉 ✓）
选中只靠**文字颜色 + 加粗 + 下划线**区分 ✓ */
.op-pill{
border-radius:0 !important;
background:transparent !important;
border:none !important;
border-bottom:2px solid transparent !important;
height:36px;
padding:0 14px;
color:#6b7280;
}
.op-pill:hover{ background:transparent !important; color:#25292f; }
.op-pill.on{
background:transparent !important;
color:#e4791b !important;
font-weight:600;
border-bottom-color:#e4791b !important;
}
.op-pill .op-pill-n{
border-radius:0 !important;
background:transparent !important;
color:inherit;
min-width:0;
padding:0;
font-weight:600;
}
.op-pill.on .op-pill-n{ background:transparent !important; color:#e4791b !important; }
.op-pills{ gap:4px; }
/* 按用户要求：选中态从「下划线」改成**一整圈方框** ✓
（还是直角 ✓ 背景透明 ✓ 边框橙色 ✓） */
.op-pill{
border:1px solid transparent !important;
border-bottom:1px solid transparent !important;
border-radius:0 !important;
background:transparent !important;
}
.op-pill:hover{
border-color:#e0e3e8 !important;
background:transparent !important;
}
.op-pill.on{
border:1px solid #e4791b !important;
background:transparent !important;
color:#e4791b !important;
font-weight:600;
}
/* 按用户给的参考图：选中的运营页签 = **浅色实心底块** ✓
（不是边框 ✗ 不是下划线 ✗ 就是一块淡淡的底 ✓ 直角 ✓）
参考图里「全部主播 768」就是这种：浅蓝灰底 + 蓝色文字 ✓ */
.op-pill{
border:none !important;
border-radius:0 !important;
background:transparent !important;
padding:0 16px !important;
height:38px;
color:#6b7280;
}
.op-pill:hover{ background:#f4f6f8 !important; color:#25292f; }
.op-pill.on{
background:#eef2f7 !important; /* ← 淡淡的实心底块 ✓ */
border:none !important;
color:#2d6cdf !important;
font-weight:600;
}
.op-pill.on .op-pill-n{ background:transparent !important; color:#2d6cdf !important; }
.op-pill .op-pill-n{ background:transparent !important; }
/* 按用户要求：运营页签选中的底块**加深一档** ✓
#eef2f7（很浅 ✗）→ #dde5ef（明显看得见 ✓） */
.op-pill.on{
background:#dde5ef !important;
color:#2d6cdf !important;
font-weight:600;
}
.op-pill:hover{ background:#eaedf1 !important; }
/* 按用户要求：再浅点 ✓（在 #dde5ef 和 #eef2f7 之间取中间值 ✓） */
.op-pill.on{
background:#e6ecf4 !important;
color:#2d6cdf !important;
font-weight:600;
}
/* 星探部：年/月下拉框别铺满整行（照直播部的样子 ✓） */
.page-scout .search-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.page-scout .search-bar select{
width:auto;
min-width:120px;
max-width:160px;
height:38px;
padding:0 12px;
}
.page-scout .search-bar .spacer{flex:1}
/* 星探部顶部页签跟直播部一致 ✓ */
.page-scout .lv-team-tabs{margin-bottom:0}
.page-scout .core-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.page-scout .core-grid .core-cell{border-right:1px solid var(--border);padding:14px 18px}
.page-scout .core-grid .core-cell:last-child{border-right:none}
/* 按用户要求：星探部上半部分**跟直播部一模一样** ✓
① 年月框用同样的 .filter-field 包裹 ✓（外面还有一层灰底 ✓）
② 灰底加深一点（用户说「变暗」✓）—— 直播部/星探部一起变 ✓ */
.filter-field select,
.page-scout .search-bar select{
width:auto !important;
min-width:110px;
max-width:170px !important;
height:38px;
background:#eef0f3 !important; /* ← 灰底 ✓ 变暗 ✓ */
border:1px solid #e3e6ea !important;
border-radius:8px;
color:#2f3540;
font-size:14px;
padding:0 12px !important;
}
.filter-field select:hover,
.page-scout .search-bar select:hover{ background:#e6e9ed !important; }
.filter-field select:focus,
.page-scout .search-bar select:focus{ background:#fff !important; border-color:#e4791b !important; }
/* 星探部顶部页签与直播部一致 ✓ 核心数据卡片也一致 ✓ */
.page-scout .core-card{background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:16px}
.page-scout .core-card-head{padding:14px 18px;font-size:15px;font-weight:600;border-bottom:1px solid var(--border)}
/* ⚠️ 按用户对比图修：星探部的核心数据**没有了直播部那种「小灰标签 + 大黑数字」的层次** ✗
原因：我自己给 .page-scout 写的那几条把直播部的 .core-card 样式盖掉了 ✗
修法：把覆盖撤掉 ✓ 让星探部**完全继承**直播部的 .core-card / .core-grid / .core-cell ✓ */
.page-scout .core-card{ background:transparent !important; border:none !important; border-radius:0 !important; margin:0 !important; }
.page-scout .core-card-head{ padding:0 0 0 !important; border-bottom:none !important; font-size:inherit !important; font-weight:inherit !important; }
.page-scout .core-grid{ display:grid !important; grid-template-columns:repeat(5,1fr) !important; gap:0 !important; }
.page-scout .core-grid .core-cell{ border-right:none !important; padding:0 !important; }
/* 恢复直播部那套层次 ✓（小灰标签在上、大黑数字在下 ✓ 数字带橙色强调 ✓） */
.page-scout .core-cell .label{ font-size:13px !important; color:var(--text-secondary) !important; margin-bottom:8px !important; }
.page-scout .core-cell .value{ font-size:22px !important; font-weight:600 !important; color:#25292f !important; line-height:1.2 !important; }
.page-scout .core-cell .value .unit{ font-size:14px !important; font-weight:400 !important; color:var(--text-secondary) !important; margin-left:3px !important; }
.page-scout .core-cell .value.accent{ color:#e4791b !important; }
/* 年月框：跟直播部一样（保持灰底 ✓ 两个页面统一 ✓） */
.page-scout .search-bar{ margin:14px 0 !important; }
/* ⚠️ 上一版我把星探部的白卡片也撤了 ✗ 结果核心数据直接贴在灰底上 ✗
现在：**恢复白卡片** ✓（和直播部一模一样：白底 + 细边 + 圆角 + 标题行 ✓） */
.page-scout .core-card{
background:#fff !important;
border:1px solid var(--border) !important;
border-radius:12px !important;
overflow:hidden !important;
margin:0 0 16px !important;
}
.page-scout .core-card-head{
padding:14px 18px !important;
border-bottom:1px solid var(--border) !important;
font-size:15px !important;
font-weight:600 !important;
}
.page-scout .core-grid .core-cell{
padding:16px 18px !important;
border-right:1px solid var(--border) !important;
}
.page-scout .core-grid .core-cell:last-child{ border-right:none !important; }
/* ⚠️ 前两条 .page-scout .core-card 特异性一样 ✗ 谁后写谁赢 ✗ 但实测还是白的 ✗
说明别处还有更靠后的规则 ✗ → 这里用**双类名**提高一档 ✓ 稳赢 ✓ */
.page-scout .core-card.core-card{
background:#f2f3f5 !important;
border:1px solid #e6e8ec !important;
border-radius:12px !important;
overflow:hidden !important;
margin:0 0 16px !important;
}
.page-scout .core-card.core-card .core-card-head{
background:transparent !important;
border-bottom:1px solid #e6e8ec !important;
padding:14px 18px !important;
}
.page-scout .core-card.core-card .core-grid .core-cell{
background:transparent !important;
border-right:1px solid #e6e8ec !important;
padding:16px 18px !important;
}
/* 星探部「签约艺人详情」栏里的搜索 + 状态筛选（子页签那排删掉了 ✓） */
.page-scout .sc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.page-scout .sc-filters{display:flex;align-items:center;gap:10px}
.page-scout .sc-filters input[type=search]{
width:220px;height:34px;padding:0 12px;
border:1px solid #e3e6ea;border-radius:8px;background:#eef0f3;
font-size:13px;outline:none;
}
.page-scout .sc-filters input[type=search]:focus{background:#fff;border-color:#e4791b}
.page-scout .sc-filters select{
height:34px;min-width:110px;padding:0 10px;
border:1px solid #e3e6ea;border-radius:8px;background:#eef0f3;
font-size:13px;outline:none;
}
.page-scout .sc-filters select:focus{background:#fff;border-color:#e4791b}
/* 按用户要求：① 搜索框挪到**左边** ✓（跟在标题后面 ✓ 不再靠右 ✓）
② 这一栏**上下间距收小** ✓（原来 18px 上下太松 ✗ → 10px ✓） */
.page-scout .card-header.sc-head{
display:flex;
align-items:center;
justify-content:flex-start; /* ← 靠左 ✓ */
gap:14px;
flex-wrap:wrap;
padding:10px 16px !important; /* ← 上下收小 ✓ */
min-height:0 !important;
}
.page-scout .sc-head h3{
margin:0 !important;
font-size:15px !important;
line-height:34px !important; /* 跟输入框一样高 ✓ 一行对齐 ✓ */
white-space:nowrap;
}
.page-scout .sc-filters{
display:flex;
align-items:center;
gap:8px;
margin-left:0; /* 紧跟标题 ✓ */
}
.page-scout .sc-filters input[type=search]{
width:200px;
height:32px; /* 稍微矮一点 ✓ */
padding:0 11px;
line-height:32px;
}
.page-scout .sc-filters select{
height:32px;
min-width:104px;
padding:0 10px;
}
/* 按用户要求：星探部列表**只显示 10 条** ✓ 多的滚动 ✓
（一行约 45px ✗ 表头 44px ✓ → 10×45+44 ≈ 494px ✓ 取 500px ✓） */
.page-scout .table-wrap{
max-height:500px;
overflow-y:auto;
overflow-x:hidden;
}
/* 表头钉住 ✓ 滚的时候不跑 ✓ */
.page-scout .table-wrap thead th{
position:sticky;
top:0;
z-index:2;
background:#f7f8fa;
box-shadow:0 1px 0 #e6e8ec;
}
/* 滚动条细一点 ✓ */
.page-scout .table-wrap::-webkit-scrollbar{width:8px}
.page-scout .table-wrap::-webkit-scrollbar-thumb{background:#d6dae1;border-radius:4px}
.page-scout .table-wrap::-webkit-scrollbar-thumb:hover{background:#c2c8d0}
.page-scout .table-wrap::-webkit-scrollbar-track{background:transparent}
/* 按用户要求：**最左侧「主播姓名」列钉住** ✓
横向滚动时它不动 ✓ 竖向滚动时它跟着走 ✓ */
.page-scout .table-wrap{ overflow-x:auto; }
.page-scout .table-wrap table{ min-width:100%; }
.page-scout .table-wrap thead th:first-child,
.page-scout .table-wrap tbody td:first-child{
position:sticky;
left:0;
z-index:3;
background:#fff;
box-shadow:1px 0 0 #eef0f3;
}
/* 表头第一格要在表头之上 ✓ 否则被别的表头盖住 ✗ */
.page-scout .table-wrap thead th:first-child{
z-index:4;
background:#f7f8fa;
}
/* 第一格宽一点 ✓ 名字别换行 ✓ */
.page-scout .table-wrap thead th:first-child,
.page-scout .table-wrap tbody td:first-child{
min-width:120px;
white-space:nowrap;
}
/* ⚠️ 按用户截图：最左「主播姓名」列里文字是**居中**的 ✗
列又宽 ✗ → 名字两边空一大片 ✗（箭头指的就是这个空白 ✗）
修法：表头和数据格都**左对齐** ✓ 列宽收窄 ✓ 贴住左边 ✓ */
.page-scout .table-wrap thead th:first-child,
.page-scout .table-wrap tbody td:first-child{
text-align:left !important;
padding-left:18px !important;
min-width:104px !important;
width:104px;
max-width:160px;
}
/* 数据格贴左边 ✓ 跟表头一个字对齐 ✓ */
.page-scout .table-wrap tbody td:first-child{ font-weight:500; color:#25292f; }
/* 其余列的居中也顺手统一成表头那种 ✓ */
.page-scout .table-wrap thead th{ text-align:center; }
.page-scout .table-wrap tbody td{ text-align:center; }
.page-scout .table-wrap tbody td:nth-child(2){ text-align:left !important; padding-left:18px !important; }
.page-scout .table-wrap thead th:nth-child(2){ text-align:left !important; padding-left:18px !important; }
/* 星探部员工信息条（跟直播部那条绿色的一个样式 ✓） */
.page-scout .sc-bar{
display:flex;
align-items:center;
gap:28px;
flex-wrap:wrap;
height:auto;
min-height:38px;
padding:8px 16px;
margin:0 0 14px;
background:#f0f9f2;
border:1px solid #cfe9d6;
border-radius:8px;
font-size:13px;
color:#2f3540;
}
.page-scout .sc-bar .lv-nf{ white-space:nowrap; }
.page-scout .sc-bar b{ font-weight:600; color:#1f7a3d; }
.page-scout .sc-bar .lv-warn{ color:#e4791b; }
.page-scout .sc-bar .lv-ok{ color:#2e9e5b; }
/* ⚠️ 按用户反馈：切员工时（2 字名 / 3 字名）信息条**整个跟着动** ✗
因为每格宽度是内容撑的 ✗ 名字多一个字就全往后挪 ✗
修法：**每格给定宽** ✓ 名字那格也定宽 ✓ 用 flex 固定布局 ✓ */
.page-scout .sc-bar{
display:flex !important;
align-items:center;
gap:0 !important; /* 用固定宽度代替 gap ✓ 不再靠间距撑 ✓ */
flex-wrap:nowrap;
overflow-x:auto;
}
.page-scout .sc-bar .lv-nf{
flex:0 0 auto;
white-space:nowrap;
padding-right:16px;
}
/* ① 姓名格：固定 150px ✓（2 字 3 字都不影响后面 ✓） */
.page-scout .sc-bar .lv-nf:nth-child(1){
width:150px;
min-width:150px;
max-width:150px;
overflow:hidden;
text-overflow:ellipsis;
}
/* ② 职位格：固定 130px ✓ */
.page-scout .sc-bar .lv-nf:nth-child(2){
width:130px;
min-width:130px;
max-width:130px;
}
/* ③ 职级格：固定 110px ✓ */
.page-scout .sc-bar .lv-nf:nth-child(3){
width:110px;
min-width:110px;
max-width:110px;
}
/* ④ 签约数量：固定 140px ✓ */
.page-scout .sc-bar .lv-nf:nth-child(4){
width:140px;
min-width:140px;
max-width:140px;
}
/* ⑤ 目标签约：固定 140px ✓ */
.page-scout .sc-bar .lv-nf:nth-child(5){
width:140px;
min-width:140px;
max-width:140px;
}
/* ⑥ 签约音浪：剩下的都给它 ✓ */
.page-scout .sc-bar .lv-nf:nth-child(6){
flex:1 1 auto;
text-align:left;
}
/* 里面的数字也等宽 ✓（161万 / 3,033,600 长度不同也不推后面的 ✗） */
.page-scout .sc-bar b{ font-variant-numeric:tabular-nums; }
/* ═══ 全局体检结论：**滚动条忽隐忽现**是「一切跟着动」的元凶 ✗ ═══
内容一变高就出竖向滚动条 ✗ → 可视宽度少 15px ✗
→ 卡片 / 核心数据格 / 搜索栏 / 按钮**全部跟着挪** ✗
修法：**永远给滚动条留位置** ✓ 有没有滚动条宽度都不变 ✓ */
html{ overflow-y:scroll; }
/* 更稳的做法：用 scrollbar-gutter 让浏览器保位 ✓（支持的浏览器优先用它 ✓） */
html{ scrollbar-gutter:stable; }
/* 星探部核心数据：5 格等分 ✓ 每格宽度固定 ✓ 数字位数变了也不推邻居 ✓ */
.page-scout .core-card.core-card .core-grid{
display:grid !important;
grid-template-columns:repeat(5, minmax(0,1fr)) !important;
table-layout:fixed;
}
.page-scout .core-card.core-card .core-grid .core-cell{
min-width:0;
overflow:hidden;
}
.page-scout .core-card.core-card .core-grid .core-cell .value{
font-variant-numeric:tabular-nums;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ⚠️ 修上一版：滚动容器其实是**内容区**，不是 html ✗（所以给 html 留位没用 ✗）
给真正会滚的那几层都留好滚动条位 ✓ 有没有滚动条宽度都不变 ✓ */
.content,
.main,
html,
body{
scrollbar-gutter:stable;
}
/* 兜底：内容区永远预留 15px（不支持 scrollbar-gutter 的浏览器 ✓） */
.content{ padding-right:2px; }
/* 星探部核心数据：每格定死宽度 ✓ 数字位数变化不推邻居 ✓ */
.page-scout .core-card.core-card .core-grid{
grid-template-columns:repeat(5, minmax(0,1fr)) !important;
}
.page-scout .core-card.core-card .core-grid .core-cell .value{
min-width:0;
display:block;
}
/* ⚠️ 最后一处：卡片的**标题文字宽度**会变 ✗
（「签约艺人详情（107 位）」↔「（5 位）」✗ 位数一变标题就宽窄变 ✗
flex 布局里它一变宽 ✗ 后面的筛选器就跟着挪 6px ✗）
修法：标题**给定宽** ✓ 数字用等宽 ✓ 筛选器位置就钉死了 ✓ */
.page-scout .card-header.sc-head h3{
flex:0 0 260px !important;
width:260px !important;
min-width:260px !important;
max-width:260px !important;
overflow:hidden;
text-overflow:ellipsis;
font-variant-numeric:tabular-nums;
}
.page-scout .sc-filters{ flex:0 0 auto; }
/* 按用户要求：**标题在左 ✓ 搜索/筛选在右 ✓**（两端对齐 ✓） */
.page-scout .card-header.sc-head{
justify-content:space-between !important;
}
.page-scout .card-header.sc-head h3{
order:0 !important;
flex:0 0 auto !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
overflow:visible !important;
text-overflow:clip !important;
}
.page-scout .sc-filters{
order:1 !important;
margin-left:auto !important; /* ← 推到最右边 ✓ */
}
/* 按用户要求：**直播部矩阵表头的间距跟星探部表头一样** ✓
实测截图：直播部表头高 **62px** ✗ vs 星探部 **48px** ✓
直播部那格上下 padding 太大 ✗ + 列间距也松 ✗
修：高度压到 48px ✓ padding 跟星探部对齐 ✓ 字号也统一 ✓ */
.daily-mx thead th,
.daily-mx thead th.mx-r1,
.daily-mx thead th.mx-date{
height:48px !important;
padding:0 10px !important;
font-size:13px !important;
line-height:48px !important;
box-sizing:border-box;
}
/* 表头里那层包一层的（昵称/名字）也跟着居中 ✓ 别撑高 ✗ */
.daily-mx thead th .mx-tipwrap,
.daily-mx thead th > *{
line-height:normal;
display:inline-block;
vertical-align:middle;
}
/* 列内边距跟星探部表格一致 ✓（星探部是 0 18px 那种感觉 ✓ 这里取 10px 两边 ✓） */
.daily-mx tbody td{
padding:0 10px !important;
height:28px !important;
line-height:28px !important;
}
/* 按用户要求：星探部「签约艺人详情」这栏**上下间距再小一点** ✓ */
.page-scout .card-header.sc-head{
padding:6px 16px !important; /* 10px → **6px** ✓ 更紧 ✓ */
min-height:0 !important;
}
.page-scout .card-header.sc-head h3{
line-height:30px !important; /* 34 → 30px ✓ 跟输入框一起收 ✓ */
font-size:15px !important;
margin:0 !important;
}
.page-scout .sc-filters input[type=search],
.page-scout .sc-filters select{
height:30px !important; /* 32 → 30px ✓ */
}
.page-scout .sc-filters input[type=search]{ line-height:30px !important; }
/* 这一栏底下的表头也贴紧点 ✓ */
.page-scout .table-wrap thead th{
height:40px !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
/* 按用户要求：标题文字和搜索框**上下居中**对齐 ✓
（之前一个用 line-height 撑 ✗ 一个用 height 撑 ✗ 基线差一点 ✗） */
.page-scout .card-header.sc-head{
display:flex !important;
align-items:center !important; /* ← 主轴垂直居中 ✓ */
justify-content:space-between !important;
padding:6px 16px !important;
min-height:0 !important;
}
/* 标题：去掉 line-height 撑高 ✗ 用 flex 自己居中 ✓ */
.page-scout .card-header.sc-head h3{
display:flex !important;
align-items:center !important;
line-height:1 !important;
height:30px !important;
margin:0 !important;
padding:0 !important;
font-size:15px !important;
}
/* 筛选组也整组居中 ✓ */
.page-scout .sc-filters{
display:flex !important;
align-items:center !important;
height:30px !important;
}
.page-scout .sc-filters input[type=search],
.page-scout .sc-filters select{
height:30px !important;
line-height:30px !important; /* 输入框里的字也居中 ✓ */
padding-top:0 !important;
padding-bottom:0 !important;
vertical-align:middle;
}
.page-scout .sc-filters input[type=search]::-webkit-input-placeholder{
line-height:normal;
}
/* 按用户要求：标题还要**再往上一点** ✓
（中文字体的字形在行盒里偏下 ✗ flex 居中后还是看着低 ✗）
修：整栏 align-items:flex-start ✗ → 用固定高度 + 标题上提 2px ✓ */
.page-scout .card-header.sc-head{
height:44px !important;
min-height:44px !important;
max-height:44px !important;
padding:0 16px !important;
display:flex !important;
align-items:center !important;
box-sizing:border-box;
}
.page-scout .card-header.sc-head h3{
position:relative;
top:-2px; /* ← 上提 2px ✓ 视觉就正了 ✓ */
height:auto !important;
line-height:1 !important;
display:block !important;
font-size:15px !important;
margin:0 !important;
}
/* 筛选组不动 ✓ 保持居中 ✓ */
.page-scout .sc-filters{
position:relative;
top:-1px;
align-items:center !important;
}
/* 按用户要求：还得**再往上提** ✓（-2px 不够 ✗ → -5px ✓） */
.page-scout .card-header.sc-head h3{
top:-5px !important;
}
.page-scout .sc-filters{
top:-4px !important;
}
/* ⚠️ 实测数据（栏高 44px）：
标题 上留白 **9px** ✗ 下留白 **20px** ✗ ← 之前 -5px 提太狠了 ✗
输入框 top=458 h=30 中心 473 ✗ 栏中心 477 ✗
正确做法：**两边的 top 微调全部撤掉** ✓ 让 flex 的 align-items:center 真居中 ✓
→ 上留白 = 下留白 = 14.5px ✓ 标题框中心和输入框中心都落在栏中心 ✓ */
.page-scout .card-header.sc-head h3{
top:0 !important;
height:15px !important;
line-height:15px !important;
display:block !important;
}
.page-scout .sc-filters{
top:0 !important;
height:30px !important;
align-items:center !important;
}
.page-scout .card-header.sc-head{
align-items:center !important;
}
/* 按用户澄清：**框（栏）不动** ✓ 只把框里的内容**往上挪** ✓
—— 标题文字和搜索/筛选一起上移 ✓ 而且移一样多 ✓ 保持一条线 ✓
栏高还是 44px ✓ 卡片不变 ✓ 只挪内容 ✓ */
.page-scout .card-header.sc-head h3{
position:relative !important;
top:-6px !important; /* ← 标题上移 6px ✓ */
}
.page-scout .sc-filters{
position:relative !important;
top:-6px !important; /* ← 搜索/筛选同样上移 6px ✓ 两个永远同高 ✓ */
}
/* 按用户要求：绿条字段顺序改成
姓名 | 职位 | 职级 | 本月签约 | 本月目标 | 本月音浪 | 当前完成 | 签约总数
（签约总数挪到最后 ✓ 本月音浪紧跟在目标后面 ✓）
—— 固定宽度也跟着新的第几格重新分配 ✓ */
.page-scout .sc-bar .lv-nf:nth-child(1){ width:150px !important; min-width:150px !important; max-width:150px !important; }
.page-scout .sc-bar .lv-nf:nth-child(2){ width:120px !important; min-width:120px !important; max-width:120px !important; }
.page-scout .sc-bar .lv-nf:nth-child(3){ width:100px !important; min-width:100px !important; max-width:100px !important; }
.page-scout .sc-bar .lv-nf:nth-child(4){ width:130px !important; min-width:130px !important; max-width:130px !important; }
.page-scout .sc-bar .lv-nf:nth-child(5){ width:130px !important; min-width:130px !important; max-width:130px !important; }
.page-scout .sc-bar .lv-nf:nth-child(6){ width:170px !important; min-width:170px !important; max-width:170px !important; }
.page-scout .sc-bar .lv-nf:nth-child(7),
.page-scout .sc-bar .lv-nf:nth-child(8){ flex:0 0 auto !important; }
.page-scout .sc-bar .lv-nf:last-child{ flex:0 0 auto !important; }
/* 按用户要求：本月/上月 两个按钮的**背景暗一点** ✓ */
.page-scout .sc-quick{
background:#dfe3e9 !important; /* ← 比页面灰底再深一档 ✓ */
border:1px solid #d2d7de !important;
color:#3a4149 !important;
font-weight:500;
height:34px;
padding:0 16px;
border-radius:8px;
}
.page-scout .sc-quick:hover{ background:#d3d8df !important; }
.page-scout .sc-quick:active{ background:#c8ced6 !important; }
/* 日期区间那两个框跟按钮同高 ✓ */
.page-scout .search-bar .date-range{ height:34px; }
/* 按用户要求：本月/上月 **要能看出选的是哪个** ✓
选中态：深蓝底 + 白字 + 加粗 ✓ 一眼就能分辨 ✓ */
.page-scout .sc-quick.on{
background:#2d6cdf !important; /* ← 选中的是蓝底白字 ✓ */
border-color:#2d6cdf !important;
color:#fff !important;
font-weight:600 !important;
box-shadow:0 1px 3px rgba(45,108,223,.35);
}
.page-scout .sc-quick.on:hover{ background:#2560c9 !important; }
/* 没选中的还是浅灰 ✓ 两者对比明显 ✓ */
.page-scout .sc-quick:not(.on){
background:#dfe3e9 !important;
color:#3a4149 !important;
}
/* 按用户给的参考样式：本月/上月 改成**分段控件** ✓
灰底容器 ✓ 选中的是**白块 + 蓝字** ✓ 没选中的透明 + 灰字 ✓ */
.page-scout .sc-seg{
display:inline-flex;
align-items:center;
gap:0;
padding:3px;
height:34px;
background:#e7eaee; /* 容器灰底 ✓ */
border-radius:8px;
box-sizing:border-box;
}
.page-scout .sc-seg .sc-quick{
display:inline-flex;
align-items:center;
justify-content:center;
height:28px;
min-width:64px;
padding:0 14px;
border:none !important;
border-radius:6px;
background:transparent !important; /* 默认透明 ✓ */
color:#5a6068 !important; /* 灰字 ✓ */
font-size:13px;
font-weight:500;
cursor:pointer;
transition:background .15s, color .15s, box-shadow .15s;
box-shadow:none !important;
}
.page-scout .sc-seg .sc-quick:hover{ color:#2d6cdf !important; }
/* 选中的：白块 + 蓝字 ✓（跟参考图一模一样 ✓） */
.page-scout .sc-seg .sc-quick.on{
background:#fff !important;
color:#2d6cdf !important;
font-weight:600 !important;
box-shadow:0 1px 2px rgba(0,0,0,.08) !important;
}
/* 按用户要求：「签约目标」→「**签约目标管理**」✓ 按钮用**带颜色的实色背景** ✓
（原来 btn-outline = 白底描边 ✗ 太素 ✗）
用品牌橙 #E4791B ✓ 跟左上角的宏森文化 logo 一个色系 ✓ */
.page-scout .sc-target-btn{
background:#e4791b !important;
border:1px solid #d16c14 !important;
color:#fff !important;
font-weight:600;
height:34px;
padding:0 18px;
border-radius:8px;
box-shadow:0 1px 3px rgba(228,121,27,.3);
transition:background .15s, box-shadow .15s, transform .1s;
}
.page-scout .sc-target-btn:hover{
background:#d16c14 !important;
box-shadow:0 2px 6px rgba(228,121,27,.4);
}
.page-scout .sc-target-btn:active{
background:#bd6010 !important;
transform:translateY(1px);
box-shadow:0 1px 2px rgba(228,121,27,.3);
}
/* 按用户要求：直播部三个按钮 ① 都加「管理」✓ ② 背景换颜色 ✓
统一成跟「签约目标管理」一样的品牌橙 ✓ 整站按钮风格一致 ✓ */
.lv-mgr-btn{
background:#e4791b !important;
border:1px solid #d16c14 !important;
color:#fff !important;
font-weight:600;
height:38px;
padding:0 18px;
border-radius:8px;
box-shadow:0 1px 3px rgba(228,121,27,.3);
transition:background .15s, box-shadow .15s, transform .1s;
}
.lv-mgr-btn:hover{ background:#d16c14 !important; box-shadow:0 2px 6px rgba(228,121,27,.4); }
.lv-mgr-btn:active{ background:#bd6010 !important; transform:translateY(1px); box-shadow:0 1px 2px rgba(228,121,27,.3); }
/* ⚠️ 上一版 .sc-seg 我只写在 .page-scout 作用域里 ✗
直播部不是 .page-scout ✗ → 灰底容器没出来 ✗
现在改成**全局** ✓ 两个页面都能用 ✓ */
.sc-seg{
display:inline-flex;
align-items:center;
padding:3px;
height:34px;
background:#e7eaee;
border-radius:8px;
box-sizing:border-box;
}
.sc-seg .sc-quick{
display:inline-flex;
align-items:center;
justify-content:center;
height:28px;
min-width:64px;
padding:0 14px;
border:none !important;
border-radius:6px;
background:transparent !important;
color:#5a6068 !important;
font-size:13px;
font-weight:500;
cursor:pointer;
box-shadow:none !important;
transition:background .15s, color .15s, box-shadow .15s;
}
.sc-seg .sc-quick:hover{ color:#2d6cdf !important; }
.sc-seg .sc-quick.on{
background:#fff !important;
color:#2d6cdf !important;
font-weight:600 !important;
box-shadow:0 1px 2px rgba(0,0,0,.08) !important;
}
/* 直播部那两个按钮的高度跟日期区间对齐 ✓ */
.page-live .search-bar .date-range{ height:34px; }
/* 按用户要求：管理按钮**变小** ✓ 圆角**调小**（几乎直角 ✓） */
.lv-mgr-btn,
.page-scout .sc-target-btn{
height:30px !important; /* 38 → **30px** ✓ */
padding:0 12px !important; /* 18 → **12px** ✓ */
font-size:13px !important; /* 14 → **13px** ✓ */
border-radius:3px !important; /* 8px → **3px** ✓ 几乎直角 ✓ */
font-weight:500 !important; /* 600 → 500 ✓ 细一点显小 ✓ */
box-shadow:none !important; /* 去掉投影 ✓ 更扁更小 ✓ */
letter-spacing:0 !important;
}
.lv-mgr-btn:hover,
.page-scout .sc-target-btn:hover{
box-shadow:none !important;
}
/* 按用户要求：星探部列表里「抖音昵称」不再单独占一列 ✓
改成**悬浮在姓名上面**显示 ✓（跟直播部矩阵表头那个思路一样 ✓） */
.page-scout .sc-nm{
position:relative;
display:inline-block;
cursor:default;
}
.page-scout .sc-nm .sc-nk{
position:absolute;
left:0;
bottom:100%; /* ← 悬在姓名**上面** ✓ */
margin-bottom:6px;
padding:4px 9px;
background:rgba(35,40,48,.95); /* 深底 ✓ 不透明 ✓ */
color:#fff;
font-size:12px;
font-style:normal;
line-height:1.35;
border-radius:5px;
white-space:nowrap;
pointer-events:none;
opacity:0;
visibility:hidden;
transition:opacity .1s ease;
z-index:60;
box-shadow:0 3px 10px rgba(0,0,0,.22);
}
/* 小三角 ✓ */
.page-scout .sc-nm .sc-nk::after{
content:'';
position:absolute;
top:100%;
left:12px;
border:5px solid transparent;
border-top-color:rgba(35,40,48,.95);
}
.page-scout .sc-nm:hover .sc-nk{ opacity:1; visibility:visible; }
/* 姓名列右边没被遮住 ✓ */
.page-scout .table-wrap td:first-child{ overflow:visible; }
/* 按用户要求：悬浮框 ① 改成**向下**弹 ✓ ② **大一点** ✓ */
.page-scout .sc-nm .sc-nk{
bottom:auto !important;
top:100% !important; /* ← 从「上方」改成「**下方**」 ✓ */
margin-bottom:0 !important;
margin-top:8px !important; /* 跟姓名拉开 8px ✓ 不贴脸 ✓ */
padding:9px 16px !important; /* 4/9 → **9/16** ✓ 明显变大 ✓ */
font-size:14px !important; /* 12 → **14px** ✓ */
border-radius:8px !important;
line-height:1.5 !important;
letter-spacing:.3px;
box-shadow:0 6px 18px rgba(0,0,0,.3) !important;
max-width:none !important;
}
/* 小三角跟着翻到**上面** ✓ 指向姓名 ✓ */
.page-scout .sc-nm .sc-nk::after{
top:auto !important;
bottom:100% !important; /* 三角形移到框顶 ✓ */
left:16px !important;
border:7px solid transparent !important; /* 三角也大一点 ✓ */
border-bottom-color:rgba(35,40,48,.95) !important;
border-top-color:transparent !important;
}
/* 表格容器别裁掉弹出来的部分 ✓ */
.page-scout .table-wrap{ overflow-x:visible !important; }
.page-scout .table-wrap td:first-child{ overflow:visible !important; }
/* ⚠️ CSS 假浮框会被 .table-wrap 的 overflow 裁掉 ✗（超出容器的部分看不见 ✗）
改成**真 DOM 浮层** ✓ position:fixed ✓ 不受任何容器裁剪 ✓ */
.page-scout .sc-nm .sc-nk{ display:none !important; } /* 关掉 CSS 版 ✓ */
#scTip{
position:fixed;
z-index:9999;
padding:9px 15px;
background:rgba(35,40,48,.96);
color:#fff;
font-size:14px;
line-height:1.5;
border-radius:8px;
white-space:nowrap;
pointer-events:none;
opacity:0;
visibility:hidden;
transition:opacity .1s ease;
box-shadow:0 6px 18px rgba(0,0,0,.3);
}
#scTip.on{ opacity:1; visibility:visible; }
#scTip::before{
content:'';
position:absolute;
bottom:100%;
left:16px;
border:7px solid transparent;
border-bottom-color:rgba(35,40,48,.96);
}
/* 「查看详情」按钮：小、描边、不抢眼 ✓ */
.page-scout .sc-view{
height:26px !important;
padding:0 10px !important;
font-size:12px !important;
border-radius:4px !important;
background:#fff !important;
border:1px solid #d8dce2 !important;
color:#2d6cdf !important;
font-weight:500;
box-shadow:none !important;
}
.page-scout .sc-view:hover{ background:#f2f6ff !important; border-color:#2d6cdf !important; }
.page-scout .sc-view:active{ background:#e6efff !important; }
/* 按用户要求：**「全部成员」那条汇总不用固定宽度** ✓
让它按内容自然排 ✓（固定宽度是给「选具体某个人」那条用的 ✓
因为那条要防止 2 字 / 3 字姓名切换时整条左右跳 ✗） */
.page-scout .sc-bar.sc-bar-sum .lv-nf{
width:auto !important;
min-width:0 !important;
max-width:none !important;
flex:0 0 auto !important;
padding-right:0 !important;
margin-right:28px !important; /* 用间距代替固定格子 ✓ 更自然 ✓ */
}
.page-scout .sc-bar.sc-bar-sum .lv-nf:last-child{ margin-right:0 !important; }
/* 汇总条里的数字也用等宽 ✓ 数字变化时不抖 ✓ */
.page-scout .sc-bar.sc-bar-sum b{ font-variant-numeric:tabular-nums; }
/* ═══ 按用户要求：**所有列表的「操作/查看详情」列钉死在最右侧** ✓
横向滚动时它不动 ✓ 永远看得见 ✓
（统一走 blocks.js 的 .act-col ✓ 一处改全站生效 ✓） */
.table-wrap th.act-col,
.table-wrap td.act-col,
table th.act-col,
table td.act-col{
position:sticky !important;
right:0 !important;
z-index:5;
background:#fff !important;
box-shadow:-6px 0 8px -6px rgba(0,0,0,.12); /* 左边一道淡影 ✓ 看得出是固定层 ✓ */
white-space:nowrap;
}
/* 表头那格要在表头之上 ✓ */
.table-wrap th.act-col,
table th.act-col{
z-index:6 !important;
background:#f7f8fa !important;
}
/* ⚠️ 还在滚动容器里 ✗ → 容器必须允许 sticky 生效 ✓（不能是 overflow:visible 之外的问题 ✓） */
.table-wrap{ position:relative; }
/* 行悬停时固定列也跟着变色 ✓ 不然会看着断层 ✗ */
.table-wrap tbody tr:hover td.act-col,
table tbody tr:hover td.act-col{ background:#fafbfc !important; }
/* ═══ 按用户要求：**所有列表的第一列也钉住** ✓
（跟直播部矩阵的「日期」列一样 ✓ 横向滚动时不动 ✓）
—— 之前只给星探部写了 ✓ 现在提到全局 ✓ 所有列表统一 ✓ */
.table-wrap th:first-child,
.table-wrap td:first-child{
position:sticky !important;
left:0 !important;
z-index:4;
background:#fff !important;
box-shadow:6px 0 8px -6px rgba(0,0,0,.10); /* 右边一道淡影 ✓ 跟操作列对称 ✓ */
}
/* 表头第一格层级最高 ✓ 两边都钉的时候不能互相压住 ✓ */
.table-wrap thead th:first-child{
z-index:7 !important;
background:#f7f8fa !important;
}
/* 行悬停时第一列也跟着变色 ✓ */
.table-wrap tbody tr:hover td:first-child{ background:#fafbfc !important; }
/* 只有一列的表不用钉 ✓ */
.table-wrap table:has(th:only-child) th:first-child,
.table-wrap table:has(td:only-child) td:first-child{ position:static !important; box-shadow:none !important; }
/* 按用户要求：核心数据删掉「星探部成员数」✗ 从 5 格变 **4 格** ✓ */
.page-scout .core-card.core-card .core-grid{
grid-template-columns:repeat(4, minmax(0,1fr)) !important;
}
/* 按用户要求：「星探部成员数」加回来 ✓ 放**最后** ✓ 恢复 5 格均分 ✓ */
.page-scout .core-card.core-card .core-grid{
grid-template-columns:repeat(5, minmax(0,1fr)) !important;
}
/* 按用户要求：星探部列表删掉「本月音浪」和「查看详情」两列 ✓
剩下 5 列**均分间距** ✓（table-layout:fixed + 每列 20% ✓） */
.page-scout .table-wrap table{
table-layout:fixed !important;
width:100% !important;
}
.page-scout .table-wrap thead th:nth-child(1),
.page-scout .table-wrap tbody td:nth-child(1){ width:20% !important; }
.page-scout .table-wrap thead th:nth-child(2),
.page-scout .table-wrap tbody td:nth-child(2){ width:20% !important; }
.page-scout .table-wrap thead th:nth-child(3),
.page-scout .table-wrap tbody td:nth-child(3){ width:20% !important; }
.page-scout .table-wrap thead th:nth-child(4),
.page-scout .table-wrap tbody td:nth-child(4){ width:20% !important; }
.page-scout .table-wrap thead th:nth-child(5),
.page-scout .table-wrap tbody td:nth-child(5){ width:20% !important; }
/* 五列都**居中** ✓ 姓名列保持左对齐 ✓ 看着匀称 ✓ */
.page-scout .table-wrap thead th{ text-align:center !important; }
.page-scout .table-wrap tbody td{ text-align:center !important; }
.page-scout .table-wrap thead th:first-child,
.page-scout .table-wrap tbody td:first-child{ text-align:left !important; padding-left:22px !important; }
.page-scout .table-wrap thead th:nth-child(2),
.page-scout .table-wrap tbody td:nth-child(2){ text-align:left !important; padding-left:22px !important; }
/* 最后一列（在播状态）右边的留白跟姓名左边对称 ✓ */
.page-scout .table-wrap thead th:last-child,
.page-scout .table-wrap tbody td:last-child{ padding-right:22px !important; }
/* 不再需要给取消的列留位置了 ✓ 第一列不用那么窄 ✗ */
.page-scout .table-wrap thead th:first-child,
.page-scout .table-wrap tbody td:first-child{
min-width:0 !important;
max-width:none !important;
}
/* 按用户给的样式：签约艺人详情的搜索框改成**组合式** ✓
┌────────────────────────────────────────┐
│ 主播 ▾ │ 请输入主播昵称或ID 🔍 │
└────────────────────────────────────────┘ */
.page-scout .sc-sbox{
display:flex;
align-items:center;
height:32px;
width:300px;
padding:0 4px 0 12px;
background:#eef0f3;
border:1px solid transparent;
border-radius:6px;
transition:background .15s, border-color .15s;
}
.page-scout .sc-sbox:focus-within{ background:#fff; border-color:#e4791b; }
.page-scout .sc-sbox-tag{
display:inline-flex;
align-items:center;
font-size:13px;
color:#3a4149;
padding-right:10px;
margin-right:10px;
border-right:1px solid #d8dce2;
flex:0 0 auto;
white-space:nowrap;
cursor:default;
}
.page-scout .sc-sbox input{
flex:1 1 auto;
min-width:0;
height:30px;
border:0 !important;
background:transparent !important;
outline:none;
font-size:13px;
color:#25292f;
padding:0 !important;
box-shadow:none !important;
}
.page-scout .sc-sbox input::placeholder{ color:#9aa0a8; }
.page-scout .sc-sbox-ico{
display:inline-flex;
align-items:center;
justify-content:center;
width:26px;
flex:0 0 auto;
cursor:pointer;
opacity:.85;
}
.page-scout .sc-sbox-ico:hover{ opacity:1; }
/* 去掉 type=search 自带的清除小叉 ✓ 免得跟放大镜重叠 ✗ */
.page-scout .sc-sbox input::-webkit-search-cancel-button{ -webkit-appearance:none; }
/* 「在播」那个位置现在是**真下拉** ✓ 但看着还是标签样式 ✓ */
.page-scout .sc-sbox select.sc-sbox-tag{
appearance:none;
-webkit-appearance:none;
border:0 !important;
background:transparent !important;
outline:none;
font-size:13px;
color:#3a4149;
padding:0 16px 0 0 !important;
margin-right:10px;
height:30px;
cursor:pointer;
box-shadow:none !important;
/* 自己画下拉箭头 ✓ */
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-position:right 2px center !important;
flex:0 0 auto;
white-space:nowrap;
}
.page-scout .sc-sbox select.sc-sbox-tag:hover{ color:#2d6cdf; }
.page-scout .sc-sbox select.sc-sbox-tag option{ color:#25292f; background:#fff; }
/* ⚠️ 上一版那个 select 撑满了整条 ✗（把输入框挤没了 ✗）
修：**限宽 + 透明底 + 不加粗** ✓ 回到「小标签」的样子 ✓ */
.page-scout .sc-sbox select.sc-sbox-tag,
.page-scout .sc-sbox > select{
width:auto !important;
min-width:0 !important;
max-width:96px !important;
flex:0 0 auto !important;
height:30px !important;
padding:0 14px 0 0 !important;
margin:0 10px 0 0 !important;
background-color:transparent !important;
border:0 !important;
border-right:1px solid #d8dce2 !important; /* 竖分隔线放在 select 上 ✓ */
border-radius:0 !important;
font-size:13px !important;
font-weight:400 !important;
color:#3a4149 !important;
cursor:pointer;
appearance:none !important;
-webkit-appearance:none !important;
box-shadow:none !important;
background-image:url("data:image/svg+xml;utf8,") !important;
background-repeat:no-repeat !important;
background-position:right 0 center !important;
text-align:left;
overflow:hidden;
text-overflow:ellipsis;
}
/* 输入框要占满剩下的空间 ✓ */
.page-scout .sc-sbox input{
flex:1 1 auto !important;
min-width:60px !important;
}
/* 整个搜索框宽度固定 ✓ 别被内容撑开 ✗ */
.page-scout .sc-sbox{
width:300px !important;
max-width:300px !important;
box-sizing:border-box;
}
/* 按用户要求：下拉的小三角**往左挪一点** ✓
（原来 select 宽 96px ✗ 箭头贴在最右边 ✗ 离「在播」太远 ✗）
修：把 select 收窄成**刚好放下「培训中」三个字 + 箭头** ✓
箭头自然就跟在字后面了 ✓ */
.page-scout .sc-sbox select.sc-sbox-tag,
.page-scout .sc-sbox > select{
max-width:70px !important; /* 96 → **70px** ✓ */
padding:0 12px 0 0 !important; /* 右边给箭头留 12px ✓ */
background-position:right 0 center !important;
margin-right:8px !important; /* 跟竖线的距离也收一点 ✓ */
}
/* 按用户要求：**框别动** ✓ 只把三角形往左挪 ✓
（上一版我把 select 收窄了 ✗ 那是动了框 ✗ 不对 ✗）
修：select 宽度**恢复 96px** ✓ 框不动 ✓
箭头用 background-position 单独往左移 14px ✓ */
.page-scout .sc-sbox select.sc-sbox-tag,
.page-scout .sc-sbox > select{
max-width:96px !important; /* ← 框恢复原宽 ✓ 不动 ✓ */
width:96px !important;
padding:0 26px 0 0 !important; /* 右边留出箭头的空间 ✓ */
margin-right:10px !important;
background-position:right 14px center !important; /* ← 只挪箭头 ✓ 往左 14px ✓ */
}
/* 分隔线还是贴着 select 的右边 ✓ 位置不变 ✓ */
.page-scout .sc-sbox{ padding-left:12px !important; }
/* 按用户要求：红框那段**空隙删掉** ✓ 三角紧贴「在播」两个字 ✓
（框宽度照旧不动 ✓ 只是让文字 + 箭头贴在一起 ✓ 多余的空间留到右边 ✓） */
.page-scout .sc-sbox select.sc-sbox-tag,
.page-scout .sc-sbox > select{
width:96px !important; /* 框**不动** ✓ */
padding:0 10px 0 0 !important; /* 右边只留 10px ✓ */
background-position:right 0 center !important; /* ← 三角贴到 padding 的内边缘 ✓ 紧挨文字 ✓ */
margin-right:10px !important;
}
/* 按用户截图：那段空隙要**彻底删掉** ✓
框不能动 ✗ → 箭头改成**从左往右固定像素定位** ✓
实测「在播」两个字宽约 26px ✓ + 8px 间距 = 34px ✓
→ 箭头落在文字正后方 ✓ 框宽还是 96px ✓ 不动 ✓ */
.page-scout .sc-sbox select.sc-sbox-tag,
.page-scout .sc-sbox > select{
background-position:left 34px center !important; /* ← 固定在文字后 34px ✓ */
padding:0 0 0 0 !important;
width:96px !important; /* 框**不动** ✓ */
margin-right:10px !important;
}
/* 按用户要求：那个框**缩小点** ✓ 太宽了 ✗
96px → **62px** ✓（「在播」26px + 间隙 8px + 箭头 10px + 右边留 18px ✓）
箭头还是从左 34px 定位 ✓ 位置不变 ✓ 框窄了 → 三角就更靠右边缘了 ✓ */
.page-scout .sc-sbox select.sc-sbox-tag,
.page-scout .sc-sbox > select{
width:62px !important;
max-width:62px !important;
min-width:62px !important;
padding:0 !important;
background-position:left 34px center !important; /* 箭头位置保持 ✓ */
margin-right:8px !important;
}
/* 输入框自动占满多出来的空间 ✓ */
.page-scout .sc-sbox input{ flex:1 1 auto !important; }
/* 按用户要求：**下拉菜单的宽度要跟上面的框一样** ✓
⚠️ 原生 select 的弹出菜单宽度是浏览器按**最长选项**算的 ✗
框只有 62px ✗ 菜单却有 ~76px ✗ → 对不齐 ✗
修：① 选项去掉左右内边距 ✓ 弹出菜单自然变窄 ✓
② 框宽跟着调到 **72px** ✓ 两边就一样宽了 ✓ */
.page-scout .sc-sbox select.sc-sbox-tag,
.page-scout .sc-sbox > select{
width:72px !important;
max-width:72px !important;
min-width:72px !important;
background-position:left 36px center !important; /* 箭头跟着右移 2px ✓ 还是贴着字 ✓ */
}
.page-scout .sc-sbox select.sc-sbox-tag option{
padding:2px 0 2px 4px !important; /* 选项左右收窄 ✓ 弹出菜单就窄了 ✓ */
font-size:13px;
}
/* 按用户说明：原来参考图就是**三个字** ✓ 所以第一项应该是「**直播中**」✓ 不是「在播」✗
重新规划尺寸 ✓：
三个字「直播中」≈ 39px ✓ + 文字后间隙 8px + 箭头 10px + 右边留白 14px
= **72px** ✓
而弹出菜单里最长的也是三个字（直播中/未直播/培训中/待培训）✓
→ 菜单宽度 ≈ 39 + 选项左右内边距 14 = 约 72px ✓
→ **框和菜单就等宽了** ✓✓ */
.page-scout .sc-sbox select.sc-sbox-tag,
.page-scout .sc-sbox > select{
width:72px !important;
max-width:72px !important;
min-width:72px !important;
padding:0 14px 0 0 !important;
background-position:left 47px center !important; /* 39(三个字) + 8(间隙) = 47px ✓ 箭头紧贴「直播中」✓ */
margin-right:8px !important;
}
/* 选项左右内边距统一 ✓ 菜单宽度跟着框走 ✓ */
.page-scout .sc-sbox select.sc-sbox-tag option{
padding:2px 7px !important;
font-size:13px !important;
}
/* ═══ 自定义下拉 ✓ 原生 select 的菜单大小改不了 ✗ 所以自己画 ✓ ═══ */
.page-scout .sc-dd{
position:relative;
display:inline-flex;
align-items:center;
flex:0 0 auto;
height:30px;
padding:0 10px 0 0;
margin-right:8px;
border-right:1px solid #d8dce2;
cursor:pointer;
user-select:none;
}
.page-scout .sc-dd-cur{ font-size:13px; color:#3a4149; padding-right:6px; white-space:nowrap; }
.page-scout .sc-dd-ar{ flex:0 0 auto; transition:transform .15s; }
.page-scout .sc-dd-menu.open ~ .sc-dd-ar,
.page-scout .sc-dd .sc-dd-menu.open{ }
/* 下拉菜单：**比原来大很多** ✓ 每行 34px 高 ✓ 内边距 12px ✓ */
.page-scout .sc-dd-menu{
position:absolute;
top:calc(100% + 6px);
left:0;
min-width:118px;
padding:6px 0;
background:#fff;
border:1px solid #e3e6ea;
border-radius:8px;
box-shadow:0 8px 24px rgba(0,0,0,.14);
z-index:900;
display:none;
}
.page-scout .sc-dd-menu.open{ display:block; }
.page-scout .sc-dd-it{
padding:9px 16px;
font-size:14px;
color:#2f3540;
white-space:nowrap;
cursor:pointer;
line-height:1.2;
}
.page-scout .sc-dd-it:hover{ background:#f2f6ff; color:#2d6cdf; }
.page-scout .sc-dd-it.on{ color:#2d6cdf; font-weight:600; background:#eef4ff; }
/* 按用户反馈「点了卡 / 有时候不出来」：
① 整块下拉都可点 ✓（含文字和箭头之间的空白 ✓）
② 展开/收起**不重画页面** ✓ 秒开 ✓
③ 加大可点范围 ✓ 更好点 ✓ */
.page-scout .sc-dd{
cursor:pointer;
padding:0 10px 0 4px !important;
margin-right:8px;
}
.page-scout .sc-dd-cur{ padding:6px 0; }
.page-scout .sc-dd-ar{ pointer-events:none; } /* 箭头不再单独接事件 ✓ 整块一起处理 ✓ */
/* 按用户要求：组长页签**换个颜色** ✓（排在「全部成员」后面第一位 ✓） */
.page-scout .op-pill.lead{
color:#b45309 !important; /* ← 琥珀金 ✓ 一眼分清 ✓ */
font-weight:600 !important;
}
.page-scout .op-pill.lead .op-pill-l{
display:inline-block;
margin-left:5px;
padding:0 5px;
font-size:10px;
line-height:15px;
font-weight:500;
color:#fff;
background:#e0a23c; /* 小标签底色 ✓ */
border-radius:3px;
vertical-align:1px;
}
/* 选中的组长页签：底色也换一下 ✓ 跟普通成员区分开 ✓ */
.page-scout .op-pill.lead.on{
background:#fdf3e3 !important;
color:#a35a06 !important;
}
.page-scout .op-pill.lead.on .op-pill-l{ background:#c9821f; }
.page-scout .op-pill.lead:hover{ color:#8a4a05 !important; }
/* 按用户要求：组长页签**颜色不用变了** ✓ 也不用「组长」标签 ✓
只保留「排在全部成员后面第一位」✓ —— 职位信息还是放在下面的绿条里 ✓
（把之前那套金色样式**全部还原** ✓） */
.page-scout .op-pill.lead{ color:inherit !important; font-weight:inherit !important; background:inherit !important; }
.page-scout .op-pill.lead .op-pill-l{ display:none !important; }
.page-scout .op-pill.lead.on{ background:#e6ecf4 !important; color:#2d6cdf !important; }
.page-scout .op-pill.lead:hover{ color:inherit !important; }
/* 绿条里的「职位」照旧显示 ✓（组长会显示「经纪人组长」✓） */
/* ═══ 按用户要求：法务部的「宏森艺人 / 七木艺人」页签
要**排在四格卡片上面**（紧贴「艺人合同」下面）✓
实测真实类名：板块里有 **section-desc-line / section-info / sec-tabs** ✓
渲染顺序是 说明 → 统计卡 → 页签 ✗
→ 把 .sec-tabs 用 order 提到最前 ✓ */
.dept-detail, .section-wrap, .sec-wrap{ display:flex; flex-direction:column; }
.sec-tabs{ order:-10 !important; } /* ← 页签提到最上面 ✓ */
.section-info{ order:0 !important; } /* ← 统计卡排后面 ✓ */
.section-desc-line{ order:-20 !important; } /* ← 那行说明还在最前面 ✓ */
/* ⚠️ 橙色按钮样式原来只写在 .page-scout 作用域里 ✗
法务部不是 .page-scout ✗ → 按钮成了白底黑字 ✗
提到**全局** ✓ 两个页面共用 ✓ */
.sc-target-btn{
background:#e4791b !important;
border:1px solid #d16c14 !important;
color:#fff !important;
font-weight:600 !important;
height:34px !important;
padding:0 18px !important;
border-radius:8px !important;
box-shadow:0 1px 3px rgba(228,121,27,.3) !important;
}
.sc-target-btn:hover{ background:#d16c14 !important; }
.sc-target-btn:active{ background:#bd6010 !important; }
/* 法务部筛选栏的间距 ✓ */
.lg-bar{ margin:14px 0 4px; }
.lg-bar .search-bar{ display:flex; align-items:center; gap:10px; }
/* ═══ 按用户要求：法务部的间距**跟截图对齐** ✓
实测现状 ✗：页签到筛选栏之间空得太多 ✗ 卡片和区间也没对齐 ✗
统一成：页签 → 14px → 筛选栏（日期+按钮）→ 14px → 核心数据卡片 ✓ */
.lg-bar{
margin:14px 0 0 !important;
display:flex;
flex-direction:column;
gap:14px; /* 筛选栏和卡片之间 14px ✓ */
}
.lg-bar .search-bar{
margin:0 !important;
display:flex;
align-items:center;
gap:10px;
min-height:34px;
}
.lg-bar .core-card{
margin:0 !important; /* 卡片不再额外留边 ✓ */
background:#f2f3f5 !important;
border:1px solid #e6e8ec !important;
border-radius:12px !important;
overflow:hidden;
}
.lg-bar .core-card-head{
padding:12px 18px !important; /* 标题行 12px 上下 ✓ 跟截图一致 ✓ */
font-size:15px !important;
font-weight:600 !important;
border-bottom:1px solid #e6e8ec !important;
background:transparent !important;
}
.lg-bar .core-grid{
display:grid !important;
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.lg-bar .core-cell{
padding:14px 18px !important; /* 格子内边距 ✓ */
border-right:1px solid #e6e8ec !important;
}
.lg-bar .core-cell:last-child{ border-right:none !important; }
.lg-bar .core-cell .label{
font-size:13px !important;
color:#8a8f99 !important;
margin-bottom:8px !important;
}
.lg-bar .core-cell .value{
font-size:20px !important;
font-weight:600 !important;
color:#25292f !important;
line-height:1.2 !important;
}
.lg-bar .core-cell .value .unit{
font-size:13px !important;
font-weight:400 !important;
color:#8a8f99 !important;
margin-left:3px !important;
}
.lg-bar .core-cell .value.accent{ color:#e4791b !important; }
/* 页签那一条跟筛选栏贴紧 ✓（截图里就是紧挨着的 ✓） */
.sec-tabs{ margin-bottom:0 !important; }
/* 按用户要求：合同列表里「艺人姓名」列**靠左 + 钉住** ✓
（跟星探部那张表一样 ✓ 横向滚动时姓名不动 ✓）
合同表在法务部页签面板里 ✓ 用 .table-wrap 通配即可 ✓ */
.table-wrap table th:first-child,
.table-wrap table td:first-child{
text-align:left !important;
padding-left:22px !important;
position:sticky !important;
left:0 !important;
z-index:4;
background:#fff !important;
box-shadow:6px 0 8px -6px rgba(0,0,0,.10) !important;
min-width:110px;
white-space:nowrap;
}
.table-wrap table thead th:first-child{
z-index:7 !important;
background:#f7f8fa !important;
}
.table-wrap table tbody tr:hover td:first-child{ background:#fafbfc !important; }
/* 操作列还是钉右边 ✓ 两边对称 ✓ */
.table-wrap table th:last-child.act-col,
.table-wrap table td:last-child.act-col{ z-index:5 !important; }
/* 按用户要求：法务部那排页签**往下移动一点** ✓
（原来紧贴着核心数据卡片 ✗ 太挤 ✗）
实测页签在 .sec-tabs 里 ✓ 给它加个上边距 ✓ */
.sec-tabs{
margin-top:20px !important; /* ← 往下移动 20px ✓ */
margin-bottom:4px !important;
}
/* 页签下面那张表也拉开一点 ✓ */
.sec-tabs + div,
#sec-tab-body-0,
[id^="sec-tab-body-"]{
margin-top:6px !important;
}
/* 页签名不带数字了 ✓ 页签之间间距也顺眼一点 ✓ */
.sec-tabs .tabs .tab{ margin-right:28px !important; }
/* 按用户要求：① 下移太多了 ✗ 收到 8px ✓
② 「全部合同 / 宏森合同 / 七木合同」用**截图那种**样式 ✓
（就是星探部「全部成员 / 赵帅」那种 ✓
选中 = 浅蓝灰底 + 蓝字加粗 ✓ 未选 = 灰字透明底 ✓） */
.sec-tabs{
margin-top:8px !important; /* 20 → **8px** ✓ */
margin-bottom:0 !important;
border-bottom:none !important;
}
.sec-tabs .tabs{
border-bottom:none !important;
gap:0 !important;
display:inline-flex;
}
.sec-tabs .tabs .tab{
margin:0 !important;
padding:0 18px !important;
height:38px !important;
line-height:38px !important;
display:inline-flex;
align-items:center;
border:none !important;
border-radius:0 !important;
background:transparent !important;
color:#5a6068 !important;
font-size:14px !important;
font-weight:400 !important;
cursor:pointer;
box-shadow:none !important;
position:relative;
}
.sec-tabs .tabs .tab:hover{ color:#2d6cdf !important; }
/* 选中的：**浅蓝灰底块 + 蓝字加粗** ✓ 底下不再画横线 ✓ */
.sec-tabs .tabs .tab.active{
background:#e6ecf4 !important;
color:#2d6cdf !important;
font-weight:600 !important;
}
.sec-tabs .tabs .tab.active::after{ display:none !important; content:none !important; }
/* 按用户要求：三个合同页签（全部合同/宏森合同/七木合同）**上下间距调匀** ✓
现状 ✗：紧贴核心数据卡片 ✗ 又紧贴台账表 ✗ 上下都挤 ✗
统一：上面 18px ✓ 下面 16px ✓ 两边留白一样重 ✓ */
.sec-tabs{
margin-top:18px !important;
margin-bottom:16px !important;
}
.sec-tabs .tabs{
margin:0 !important;
padding:0 !important;
}
.sec-tabs .tabs .tab{
margin:0 !important;
height:36px !important;
line-height:36px !important;
padding:0 18px !important;
}
/* 页签下面那块（台账表）不要再叠加边距 ✗ 免得又挤又叠 */
#sec-tab-body-0,
[id^="sec-tab-body-"]{
margin-top:0 !important;
}
#sec-tab-body-0 > *:first-child,
[id^="sec-tab-body-"] > *:first-child{
margin-top:0 !important;
}
/* ⚠️ 之前我在上面写死了 4 列 ✗ 把内联的 5 列盖掉了 ✗
→ 第 5 格「即将到期数量」掉到第二行 ✗
按用户要求：核心数据是 **5 格** ✓ 改成 5 列 ✓ */
.lg-bar .core-grid{
grid-template-columns:repeat(5, minmax(0,1fr)) !important;
}
/* 5 格时格子窄一点 ✓ 标签不换行 ✓ */
.lg-bar .core-cell{ padding:14px 14px !important; min-width:0; }
.lg-bar .core-cell .label{ white-space:nowrap; font-size:12.5px !important; }
.lg-bar .core-cell .value{ font-size:19px !important; }
/* 按用户要求：法务部核心数据的**数字大小跟星探部截图一样** ✓
实测 ✗：星探部 数值 22px / 标签 13px / 内边距 16px 18px
法务部 数值 19px / 标签 12.5px / 内边距 14px ← 我前面自己写小了 ✗
现在**完全对齐星探部** ✓ */
.lg-bar .core-cell{
padding:16px 18px !important;
}
.lg-bar .core-cell .label{
font-size:13px !important;
color:#8a8f99 !important;
margin-bottom:10px !important;
white-space:nowrap !important;
}
.lg-bar .core-cell .value{
font-size:22px !important;
font-weight:600 !important;
line-height:1.15 !important;
color:#25292f !important;
}
.lg-bar .core-cell .value .unit{
font-size:13px !important;
font-weight:400 !important;
color:#8a8f99 !important;
margin-left:4px !important;
}
.lg-bar .core-cell .value.accent{ color:#e4791b !important; }
/* ⚠️ .sc-dd 那套样式原来只在 .page-scout 作用域里 ✗ 法务部用了没生效 ✗
→ 菜单**一直是展开的** ✗ 还盖住了核心数据 ✗
这里给法务部的下拉一套**全局**样式 ✓ 默认收起 ✓ 点了才展开 ✓ */
.lg-bar .sc-dd{ position:relative; display:inline-flex; align-items:center; height:36px; padding:0 12px; background:#fff; border:1px solid #e2e5ea; border-radius:8px; cursor:pointer; user-select:none; min-width:104px; }
.lg-bar .sc-dd-cur{ font-size:14px; color:#25292f; }
.lg-bar .sc-dd-ar{ margin-left:auto; color:#8a8f99; }
.lg-bar .sc-dd-menu{
display:none !important; /* ← 默认收起 ✓ */
position:absolute; top:40px; left:0; z-index:60;
min-width:118px; padding:6px 0;
background:#fff; border:1px solid #e2e5ea; border-radius:8px;
box-shadow:0 6px 20px rgba(0,0,0,.10);
}
.lg-bar .sc-dd.open .sc-dd-menu{ display:block !important; } /* ← 点了才出来 ✓ */
.lg-bar .sc-dd-it{ padding:8px 16px; font-size:14px; color:#3c4148; cursor:pointer; white-space:nowrap; }
.lg-bar .sc-dd-it:hover{ background:#f2f5f9; color:#2d6cdf; }
.lg-bar .sc-dd-it.on{ color:#2d6cdf; font-weight:600; background:#eef3fb; }
/* 搜索那一行 ✓ */
.lg-bar .search-bar{ display:flex; align-items:center; gap:10px; margin-top:0 !important; }
.lg-bar .search-bar input[type="search"]{
height:36px; min-width:260px; padding:0 34px 0 14px;
border:1px solid #e2e5ea; border-radius:8px; background:#fff;
font-size:14px; color:#25292f; outline:none;
}
.lg-bar .search-bar input[type="search"]::placeholder{ color:#a8adb5; }
.lg-bar .search-bar input[type="search"]:focus{ border-color:#b9cdf0; }
/* 按用户要求：法务部搜索栏 = 直播部那种**灰底组合条** ✓
（截图二：左边下拉（直播中▾）+ 竖线 + 输入框 + 🔍 整体一个灰底胶囊 ✓ 没有白框 ✗）
位置在**表格卡片标题行右侧** ✓ */
.lg-bar .lg-search{
display:inline-flex !important;
align-items:center;
gap:0 !important;
height:38px;
padding:0 14px;
background:#f2f3f5 !important;
border:1px solid #e8eaee;
border-radius:9px;
margin:0 !important;
}
/* 下拉：透明 ✓ 去掉白底白框 ✓ */
.lg-bar .lg-search .sc-dd{
background:transparent !important;
border:none !important;
border-radius:0 !important;
height:100% !important;
min-width:0 !important;
padding:0 !important;
padding-right:10px !important;
}
.lg-bar .lg-search .sc-dd-cur{ font-size:14px !important; color:#3c4148 !important; }
.lg-bar .lg-search .sc-dd-ar{ margin-left:4px !important; color:#8a8f99 !important; }
/* 竖线分隔 ✓ */
.lg-bar .lg-search::after{ content:''; }
.lg-bar .lg-search .sc-sbox-sep,
.lg-bar .lg-search #lg-q{ border-left:1px solid #dfe2e7 !important; }
/* 输入框：透明无框 ✓ 占位灰 ✓ */
.lg-bar .lg-search #lg-q{
height:100% !important;
min-width:210px !important;
padding:0 8px 0 12px !important;
background:transparent !important;
border:none !important;
border-left:1px solid #dfe2e7 !important;
border-radius:0 !important;
font-size:14px !important;
color:#25292f !important;
outline:none !important;
}
.lg-bar .lg-search #lg-q::placeholder{ color:#a8adb5 !important; }
/* 放大镜 ✓ */
.lg-bar .lg-search .sc-sbox-ico{ display:inline-flex; align-items:center; color:#8a8f99; padding-left:4px; }
/* 下拉菜单还是白色浮层 ✓ 展开时压在灰色条上 ✓ */
.lg-bar .lg-search .sc-dd-menu{ top:42px !important; }
/* ⚠️ 上次样式没生效的原因 ✗：我把搜索行**搬进 .card-header** 了 ✓
但样式选择器还写着 .lg-bar .lg-search ✗ → 搬出去就不匹配了 ✗
→ 菜单又展开 ✗ 灰底也没了 ✗
这次用**不带 .lg-bar 前缀**的选择器 ✓ 搬到哪都生效 ✓ */
.lg-search{
display:inline-flex !important;
align-items:center;
height:38px;
padding:0 14px;
background:#f2f3f5 !important;
border:1px solid #e8eaee;
border-radius:9px;
margin:0 !important;
gap:0 !important;
}
.lg-search .sc-dd{
position:relative;
display:inline-flex !important;
align-items:center;
background:transparent !important;
border:none !important;
border-radius:0 !important;
height:100% !important;
min-width:0 !important;
padding:0 10px 0 0 !important;
cursor:pointer;
}
.lg-search .sc-dd-cur{ font-size:14px !important; color:#3c4148 !important; }
.lg-search .sc-dd-ar{ margin-left:4px !important; color:#8a8f99 !important; }
.lg-search .sc-dd-menu{
display:none !important; /* ← 默认收起 ✓ */
position:absolute; top:42px; left:0; z-index:80;
min-width:118px; padding:6px 0;
background:#fff !important;
border:1px solid #e2e5ea; border-radius:8px;
box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.lg-search .sc-dd.open .sc-dd-menu{ display:block !important; }
.lg-search .sc-dd-it{ padding:8px 16px; font-size:14px; color:#3c4148; cursor:pointer; white-space:nowrap; }
.lg-search .sc-dd-it:hover{ background:#f2f5f9; color:#2d6cdf; }
.lg-search .sc-dd-it.on{ color:#2d6cdf; font-weight:600; background:#eef3fb; }
.lg-search #lg-q{
height:100% !important;
min-width:210px !important;
padding:0 8px 0 12px !important;
background:transparent !important;
border:none !important;
border-left:1px solid #dfe2e7 !important;
border-radius:0 !important;
font-size:14px !important;
color:#25292f !important;
outline:none !important;
}
.lg-search #lg-q::placeholder{ color:#a8adb5 !important; }
.lg-search .sc-sbox-ico{ display:inline-flex; align-items:center; color:#8a8f99; padding-left:4px; }
/* 标题行：标题在左 ✓ 搜索在右 ✓ */
.card-header:has(.lg-search){ display:flex !important; align-items:center !important; justify-content:space-between !important; }
/* 按用户要求：放大镜别换行 ✗ 收拾一下宽度 ✓（截图二那种一条排开 ✓） */
.lg-search{
flex-wrap:nowrap !important;
white-space:nowrap !important;
max-width:100%;
}
.lg-search #lg-q{
min-width:170px !important; /* 210 → 170 ✓ 一条就放得下 ✓ */
width:170px !important;
}
.lg-search .sc-sbox-ico{ flex:0 0 auto !important; }
.lg-search .sc-dd{ flex:0 0 auto !important; }
/* 按用户要求：**切页签别弹一下** ✓（搜索条搬家时高度不能变 ✓ 宽度固定 ✓） */
.lg-search{
height:38px !important;
min-height:38px !important;
flex:0 0 auto !important;
}
[id^="sec-tab-body-"]{ contain:layout paint; } /* 面板内部重画不影响外面布局 ✓ */
.card-header:has(.lg-search){ min-height:64px !important; } /* 标题行高度固定 ✓ 搬不搬都一样 ✓ */
/* ⚠️ 切页签弹 52px 的真正原因 ✗（实测顶边 390→442→390 ✓）：
搜索条搬走的那一瞬间 ✗ 卡片标题行**没有内容撑高**了 ✗ → 塌下去 ✗
搬到新表又撑回来 ✗ → 一上一下 = 你看到的「弹一下」✗
改法 ✓：标题行**永远**保留那个高度 ✓ 跟有没有搜索条无关 ✓ */
.page-legal .card-header,
[id^="sec-tab-body-"] .card-header{
min-height:66px !important; /* ← 固定住 ✓ 搬不搬都一样高 ✓ */
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
box-sizing:border-box !important;
}
/* 搜索条本身也固定尺寸 ✓ 别让它的出现改变行高 ✓ */
.lg-search{
height:38px !important;
min-height:38px !important;
max-height:38px !important;
flex:0 0 auto !important;
}
/* 按用户要求：切页签**还是晃** ✗
上一版修的是「面板顶边」✓（已恒定 ✓）但还晃 ✗
真正原因 ✗：四个页签的**内容高度差很多** ✓
全部合同 19 行 / 宏森 18 行 / 七木 1 行 / 即将到期 0 行 ✗
→ 内容变短 ✗ 整页高度变 ✗ 右侧**滚动条忽隐忽现** ✗
→ 滚动条一出现/消失 ✓ 内容宽度变 ✗ 整页横向抖一下 ✗ = 「晃」✗
两个修法一起上 ✓：
① 滚动条**常驻** ✓ 宽度固定 ✓ 不忽隐忽现 ✓
② 面板给个**最小高度** ✓ 内容少的时候也不塌 ✓ */
html{
overflow-y:scroll !important; /* ① 滚动条常驻 ✓ */
scrollbar-gutter:stable !important;
}
body, .app, .main, .content{
scrollbar-gutter:stable !important;
}
[id^="sec-tab-body-"]{
min-height:52vh !important; /* ② 面板不塌 ✓ 页签换来换去总高度差不多 ✓ */
}
/* 表格卡片本身也留个底 ✓ 别一页 0 行就缩成一条 ✗ */
[id^="sec-tab-body-"] .card{
min-height:320px !important;
}
/* 按用户要求：**还会晃** ✗ 再往深处修一层 ✓
实测（逐帧采三组值 ✓）：
面板顶边 = 442 **恒定** ✓
文档总高 = 804 **恒定** ✓（滚动条不再忽隐忽现 ✓）
但**卡片高度**还在变 ✗：1056 / 643 / 1009 / 320 ✗
= 四个页签的行数不一样 ✓（19 行 / 18 行 / 1 行 / 0 行 ✓）
→ 卡片一高一矮 ✗ 底下的区域跟着伸缩 ✗ 看着就是「晃」✗
改法 ✓：**四个页签给同一个固定高度** ✓ 内容多了内部滚动 ✓ 高度永远不变 ✓ */
[id^="sec-tab-body-"] .card{
height:1060px !important; /* ← 按最多的那档定死 ✓ */
min-height:1060px !important;
max-height:1060px !important;
display:flex !important;
flex-direction:column !important;
overflow:hidden !important;
}
[id^="sec-tab-body-"] .card > .table-wrap{
flex:1 1 auto !important;
min-height:0 !important;
overflow:auto !important; /* 内容多就在卡片**内部**滚 ✓ 不撑页面 ✓ */
}
/* 按用户要求：切页签还剩 **5px 的抖** ✗（实测表体顶 497→492→497 ✓）
原因 ✗：四个页签的表格列宽略有不同 ✗ 表头那行的行高就差几像素 ✗
改法 ✓：把**标题行**和**表头行**的高度都锁死 ✓ 谁来都一样高 ✓ */
[id^="sec-tab-body-"] .card-header{
height:66px !important;
min-height:66px !important;
max-height:66px !important;
box-sizing:border-box !important;
}
[id^="sec-tab-body-"] thead th{
height:44px !important;
min-height:44px !important;
max-height:44px !important;
line-height:44px !important;
padding-top:0 !important;
padding-bottom:0 !important;
white-space:nowrap !important;
box-sizing:border-box !important;
}
[id^="sec-tab-body-"] thead tr{ height:44px !important; }
/* 表格容器也从标题行下面精确开始 ✓ 不受里面内容影响 ✓ */
[id^="sec-tab-body-"] table{ margin-top:0 !important; }
/* 按用户要求：① 每页 10 条 ✓（pageSize 已改回 10 ✓）
② 切换页签还晃 ✗ 剩下的原因是**列宽不一致** ✗
（四个页签数据不同 ✗ 表格自动分配列宽 ✗ 每张表宽窄不一样 ✗
换表时列位置一变 ✓ 看着就是「来回晃一下」✗）
改法 ✓：**锁死列宽** ✓ 四张表用同一套宽度 ✓ 谁换谁都不动 ✓ */
[id^="sec-tab-body-"] table{
table-layout:fixed !important; /* ← 列宽不再按内容自动算 ✓ */
width:100% !important;
}
[id^="sec-tab-body-"] table col,
[id^="sec-tab-body-"] thead th{
box-sizing:border-box !important;
}
/* 12 列按固定比例分 ✓ 四个页签一模一样 ✓ */
[id^="sec-tab-body-"] thead th:nth-child(1){ width:11% !important; } /* 艺人姓名 */
[id^="sec-tab-body-"] thead th:nth-child(2){ width:10% !important; } /* 合同编号 */
[id^="sec-tab-body-"] thead th:nth-child(3){ width:11% !important; } /* 签订日期 */
[id^="sec-tab-body-"] thead th:nth-child(4){ width:9% !important; } /* 合同年限 */
[id^="sec-tab-body-"] thead th:nth-child(5){ width:11% !important; } /* 到期日 */
[id^="sec-tab-body-"] thead th:nth-child(6){ width:9% !important; } /* 剩余 */
[id^="sec-tab-body-"] thead th:nth-child(7){ width:8% !important; } /* 收益类型 */
[id^="sec-tab-body-"] thead th:nth-child(8){ width:10% !important; } /* 结算方式 */
[id^="sec-tab-body-"] thead th:nth-child(9){ width:7% !important; } /* 经纪人 */
[id^="sec-tab-body-"] thead th:nth-child(10){ width:8% !important; } /* 在播状态 */
[id^="sec-tab-body-"] thead th:nth-child(11){ width:6% !important; }
[id^="sec-tab-body-"] thead th:nth-child(12){ width:8% !important; } /* 操作 */
/* 单元格文字超长就省略 ✓ 免得撑破固定列宽 ✗ */
[id^="sec-tab-body-"] tbody td{
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
/* 按用户要求：切页签还晃 ✗ 实测列 left 坐标 ✗
全部/宏森：264,371,468,616,… ✓
七木： 264,**357,458,567**,… ✗ 窄了 ✗
即将到期：264,**375,475,583**,… ✗ 宽了 ✗
→ 列宽不一致 ✓ 换表的时候整排列**左右挪** = 你看到的「来回晃一下」✗
原因 ✗：只给 | 设了宽度 ✗ 但 | 里的长文本会把它撑开 ✗
（七木/即将到期那两张表的数据不一样 ✗ 撑出来的宽度也不一样 ✗）
改法 ✓：
① | 和 | **都**上固定宽度 ✓（百分比一致 ✓）
② 长文本一律省略 ✓ 不许撑列 ✗
③ 表格 **定宽** ✓ 不受内容影响 ✓ */
[id^="sec-tab-body-"] table{
table-layout:fixed !important;
width:100% !important;
min-width:0 !important;
}
[id^="sec-tab-body-"] table th,
[id^="sec-tab-body-"] table td{
box-sizing:border-box !important;
min-width:0 !important;
max-width:0 !important; /* ← 关键：让 fixed 布局真正生效 ✓ */
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
}
[id^="sec-tab-body-"] table th:nth-child(1),
[id^="sec-tab-body-"] table td:nth-child(1){ width:11% !important; }
[id^="sec-tab-body-"] table th:nth-child(2),
[id^="sec-tab-body-"] table td:nth-child(2){ width:10% !important; }
[id^="sec-tab-body-"] table th:nth-child(3),
[id^="sec-tab-body-"] table td:nth-child(3){ width:11% !important; }
[id^="sec-tab-body-"] table th:nth-child(4),
[id^="sec-tab-body-"] table td:nth-child(4){ width:9% !important; }
[id^="sec-tab-body-"] table th:nth-child(5),
[id^="sec-tab-body-"] table td:nth-child(5){ width:11% !important; }
[id^="sec-tab-body-"] table th:nth-child(6),
[id^="sec-tab-body-"] table td:nth-child(6){ width:9% !important; }
[id^="sec-tab-body-"] table th:nth-child(7),
[id^="sec-tab-body-"] table td:nth-child(7){ width:8% !important; }
[id^="sec-tab-body-"] table th:nth-child(8),
[id^="sec-tab-body-"] table td:nth-child(8){ width:10% !important; }
[id^="sec-tab-body-"] table th:nth-child(9),
[id^="sec-tab-body-"] table td:nth-child(9){ width:7% !important; }
[id^="sec-tab-body-"] table th:nth-child(10),
[id^="sec-tab-body-"] table td:nth-child(10){ width:8% !important; }
[id^="sec-tab-body-"] table th:nth-child(11),
[id^="sec-tab-body-"] table td:nth-child(11){ width:6% !important; }
[id^="sec-tab-body-"] table th:nth-child(12),
[id^="sec-tab-body-"] table td:nth-child(12){ width:8% !important; }
/* 操作列那个「查看详情」按钮别被压变形 ✓ */
[id^="sec-tab-body-"] table td:last-child .row-actions{ justify-content:center !important; }
/* ⚠️ 我前面按 nth-child 写死了一堆百分比宽度 ✗ 会跟「均分」打架 ✗
这里**全部撤掉** ✓ 让浏览器自己把 11 列均分 ✓ 四张表自然一模一样 ✓ */
[id^="sec-tab-body-"] table th:nth-child(1),
[id^="sec-tab-body-"] table td:nth-child(1),
[id^="sec-tab-body-"] table th:nth-child(2),
[id^="sec-tab-body-"] table td:nth-child(2),
[id^="sec-tab-body-"] table th:nth-child(3),
[id^="sec-tab-body-"] table td:nth-child(3),
[id^="sec-tab-body-"] table th:nth-child(4),
[id^="sec-tab-body-"] table td:nth-child(4),
[id^="sec-tab-body-"] table th:nth-child(5),
[id^="sec-tab-body-"] table td:nth-child(5),
[id^="sec-tab-body-"] table th:nth-child(6),
[id^="sec-tab-body-"] table td:nth-child(6),
[id^="sec-tab-body-"] table th:nth-child(7),
[id^="sec-tab-body-"] table td:nth-child(7),
[id^="sec-tab-body-"] table th:nth-child(8),
[id^="sec-tab-body-"] table td:nth-child(8),
[id^="sec-tab-body-"] table th:nth-child(9),
[id^="sec-tab-body-"] table td:nth-child(9),
[id^="sec-tab-body-"] table th:nth-child(10),
[id^="sec-tab-body-"] table td:nth-child(10),
[id^="sec-tab-body-"] table th:nth-child(11),
[id^="sec-tab-body-"] table td:nth-child(11),
[id^="sec-tab-body-"] table th:nth-child(12),
[id^="sec-tab-body-"] table td:nth-child(12){
width:auto !important;
}
/* 法务部台账的页码条 ✓（每页 10 条 ✓ 剩下的放第二页 ✓） */
.lg-pager{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
padding:14px 22px !important;
border-top:1px solid #eef0f3 !important;
background:#fff !important;
flex:0 0 auto !important;
}
.lg-pg-info{ font-size:13px; color:#8a8f99; }
.lg-pg-btns{ display:inline-flex; align-items:center; gap:6px; }
.lg-pg{
min-width:32px; height:32px; padding:0 10px;
border:1px solid #e2e5ea; border-radius:7px; background:#fff;
font-size:13px; color:#3c4148; cursor:pointer;
}
.lg-pg:hover{ border-color:#b9cdf0; color:#2d6cdf; }
.lg-pg.on{ background:#2d6cdf; border-color:#2d6cdf; color:#fff; font-weight:600; }
.lg-pg.off{ color:#c4c8cf; cursor:default; border-color:#eceef1; }
.lg-pg.off:hover{ border-color:#eceef1; color:#c4c8cf; }
.lg-pg-dots{ color:#a8adb5; padding:0 2px; }
/* ═══════════════════════════════════════════════════════════════
法务部 · 艺人合同（重写版 pages/legal.js 专用）✓
⚠️ 之前那套样式全写在 .lg-bar 下面 ✗
重写后页面根类是 .page-legal ✗ 所以一条都没生效 ✗
→ 排版跟原来不一样 ✗ 这里按 .page-legal 重写一套 ✓
═══════════════════════════════════════════════════════════════ */
/* 一级页签「艺人合同」 */
.page-legal > .tabs{
border-bottom:none !important;
margin-bottom:14px !important;
}
.page-legal > .tabs .tab{
display:inline-block;
padding:0 0 10px 0 !important;
font-size:15px !important;
color:#2d6cdf !important;
font-weight:500 !important;
border-bottom:2px solid #2d6cdf !important;
}
/* 顶部：日期区间 + 本月/上月/全部 + 管理按钮 */
.page-legal .lg-top{
display:flex !important;
align-items:center !important;
gap:12px !important;
margin-bottom:16px !important;
}
/* 核心数据卡片 */
.page-legal .core-card{
background:#f2f3f5 !important;
border:1px solid #e6e8ec !important;
border-radius:12px !important;
overflow:hidden;
margin-bottom:18px !important;
}
.page-legal .core-card-head{
padding:12px 18px !important;
font-size:15px !important;
font-weight:600 !important;
color:#25292f !important;
border-bottom:1px solid #e6e8ec !important;
}
.page-legal .core-grid{
display:grid !important;
grid-template-columns:repeat(5,minmax(0,1fr)) !important;
}
.page-legal .core-cell{
padding:16px 18px !important;
border-right:1px solid #e6e8ec !important;
}
.page-legal .core-cell:last-child{ border-right:none !important; }
.page-legal .core-cell .label{
font-size:13px !important;
color:#8a8f99 !important;
margin-bottom:10px !important;
white-space:nowrap !important;
}
.page-legal .core-cell .value{
font-size:22px !important;
font-weight:600 !important;
color:#25292f !important;
line-height:1.15 !important;
}
.page-legal .core-cell .value .unit{
font-size:13px !important;
font-weight:400 !important;
color:#8a8f99 !important;
margin-left:4px !important;
}
.page-legal .core-cell .value.accent{ color:#e4791b !important; }
/* 四个子页签 */
.page-legal .sec-tabs{
margin:0 0 16px 0 !important;
border-bottom:none !important;
}
.page-legal .sec-tabs .tabs{ display:inline-flex; gap:0 !important; border-bottom:none !important; }
.page-legal .sec-tabs .tab{
margin:0 !important;
padding:0 18px !important;
height:36px !important;
line-height:36px !important;
display:inline-flex; align-items:center;
border:none !important;
border-radius:0 !important;
background:transparent !important;
color:#5a6068 !important;
font-size:14px !important;
font-weight:400 !important;
cursor:pointer;
}
.page-legal .sec-tabs .tab:hover{ color:#2d6cdf !important; }
.page-legal .sec-tabs .tab.active{
background:#e6ecf4 !important;
color:#2d6cdf !important;
font-weight:600 !important;
}
.page-legal .sec-tabs .tab.active::after{ display:none !important; content:none !important; }
/* 台账表卡片 + 标题行（搜索条就在标题行右侧 ✓） */
.page-legal .card{
background:#fff !important;
border:1px solid #eceef1 !important;
border-radius:12px !important;
overflow:hidden;
}
.page-legal .card-header{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
min-height:66px !important;
padding:0 22px !important;
border-bottom:1px solid #eef0f3 !important;
box-sizing:border-box !important;
}
.page-legal .card-header h3{
font-size:16px !important;
font-weight:600 !important;
color:#25292f !important;
margin:0 !important;
}
/* 搜索条（灰底组合条 ✓ 跟直播部一致 ✓） */
.page-legal .lg-search{
display:inline-flex !important;
align-items:center !important;
flex-wrap:nowrap !important;
height:38px !important;
min-height:38px !important;
padding:0 14px !important;
background:#f2f3f5 !important;
border:1px solid #e8eaee !important;
border-radius:9px !important;
margin:0 !important;
gap:0 !important;
}
.page-legal .lg-search .sc-dd{
position:relative; display:inline-flex !important; align-items:center;
height:100% !important; padding:0 10px 0 0 !important;
background:transparent !important; border:none !important;
cursor:pointer; flex:0 0 auto !important;
}
.page-legal .lg-search .sc-dd-cur{ font-size:14px !important; color:#3c4148 !important; }
.page-legal .lg-search .sc-dd-ar{ margin-left:4px !important; color:#8a8f99 !important; }
.page-legal .lg-search .sc-dd-menu{
display:none !important;
position:absolute; top:42px; left:0; z-index:80;
min-width:118px; padding:6px 0;
background:#fff !important; border:1px solid #e2e5ea; border-radius:8px;
box-shadow:0 6px 20px rgba(0,0,0,.12);
}
.page-legal .lg-search .sc-dd.open .sc-dd-menu{ display:block !important; }
.page-legal .lg-search .sc-dd-it{ padding:8px 16px; font-size:14px; color:#3c4148; cursor:pointer; white-space:nowrap; }
.page-legal .lg-search .sc-dd-it:hover{ background:#f2f5f9; color:#2d6cdf; }
.page-legal .lg-search .sc-dd-it.on{ color:#2d6cdf; font-weight:600; background:#eef3fb; }
.page-legal .lg-search #lg-q{
height:100% !important;
width:190px !important;
padding:0 8px 0 12px !important;
background:transparent !important;
border:none !important;
border-left:1px solid #dfe2e7 !important;
border-radius:0 !important;
font-size:14px !important;
color:#25292f !important;
outline:none !important;
}
.page-legal .lg-search #lg-q::placeholder{ color:#a8adb5 !important; }
.page-legal .lg-search .sc-sbox-ico{ display:inline-flex; align-items:center; color:#8a8f99; padding-left:4px; flex:0 0 auto !important; }
/* 表格：列宽均分 ✓ 姓名钉左 ✓ 操作钉右 ✓ */
.page-legal .table-wrap{ overflow:auto; max-height:none; }
.page-legal table{ width:100% !important; table-layout:fixed !important; border-collapse:separate !important; border-spacing:0 !important; }
.page-legal table th,
.page-legal table td{
padding:14px 10px !important;
font-size:13.5px !important;
text-align:center !important;
border-bottom:1px solid #f0f2f5 !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
white-space:nowrap !important;
background:#fff;
}
.page-legal table thead th{
height:44px !important;
padding:0 10px !important;
font-size:13px !important;
font-weight:500 !important;
color:#8a8f99 !important;
background:#fafbfc !important;
}
.page-legal table th:first-child,
.page-legal table td:first-child{
text-align:left !important;
padding-left:22px !important;
position:sticky !important; left:0 !important; z-index:4;
box-shadow:6px 0 8px -6px rgba(0,0,0,.10) !important;
}
.page-legal table thead th:first-child{ z-index:7 !important; background:#fafbfc !important; }
.page-legal table th.act-col,
.page-legal table td.act-col{
position:sticky !important; right:0 !important; z-index:4;
box-shadow:-6px 0 8px -6px rgba(0,0,0,.10) !important;
background:#fff !important;
}
.page-legal table thead th.act-col{ z-index:7 !important; background:#fafbfc !important; }
.page-legal table tbody tr:hover td{ background:#fafbfc !important; }
.page-legal .btn-mini{
height:28px; padding:0 12px; border:1px solid #e2e5ea; border-radius:6px;
background:#fff; font-size:12.5px; color:#3c4148; cursor:pointer;
}
.page-legal .btn-mini:hover{ border-color:#b9cdf0; color:#2d6cdf; }
.page-legal .tag{
display:inline-block; padding:2px 9px; border-radius:999px;
background:#f2f3f5; color:#5a6068; font-size:12.5px;
}
/* 页码条 */
.page-legal .lg-pager{
display:flex !important; align-items:center !important; justify-content:space-between !important;
padding:14px 22px !important; border-top:1px solid #eef0f3 !important; background:#fff !important;
}
.page-legal .lg-pg-info{ font-size:13px; color:#8a8f99; }
.page-legal .lg-pg-btns{ display:inline-flex; align-items:center; gap:6px; }
.page-legal .lg-pg{
min-width:32px; height:32px; padding:0 10px;
border:1px solid #e2e5ea; border-radius:7px; background:#fff;
font-size:13px; color:#3c4148; cursor:pointer;
}
.page-legal .lg-pg:hover{ border-color:#b9cdf0; color:#2d6cdf; }
.page-legal .lg-pg.on{ background:#2d6cdf; border-color:#2d6cdf; color:#fff; font-weight:600; }
.page-legal .lg-pg.off{ color:#c4c8cf; cursor:default; border-color:#eceef1; }
.page-legal .lg-pg-dots{ color:#a8adb5; padding:0 2px; }
/* 日期区间框 ✓ 跟其他页一致 ✓ */
.page-legal .date-range{
display:inline-flex !important; align-items:center !important; gap:8px !important;
height:36px !important; padding:0 12px !important;
background:#f2f3f5 !important; border:1px solid #e8eaee !important; border-radius:9px !important;
}
.page-legal .date-range .dr-icon{ color:#8a8f99; font-size:14px; }
.page-legal .date-range input[type="date"]{
border:none !important; background:transparent !important;
font-size:13.5px !important; color:#3c4148 !important; outline:none !important;
width:120px !important;
}
.page-legal .date-range em{ color:#a8adb5; font-style:normal; }
/* 合同详情弹窗里的字段表 ✓ */
.detail-grid{ display:flex; flex-direction:column; }
.detail-row{
display:flex; align-items:flex-start; gap:14px;
padding:11px 0; border-bottom:1px solid #f0f2f5;
}
.detail-row:last-child{ border-bottom:none; }
.detail-row .dk{
flex:0 0 88px; text-align:right;
font-size:13px; color:#8a8f99; line-height:20px;
}
.detail-row .dv{
flex:1 1 auto; font-size:13.5px; color:#25292f; line-height:20px;
word-break:break-all; white-space:pre-wrap;
}
/* 合同台账：鼠标指向艺人姓名时的抖音昵称浮层 ✓ */
.lg-tip{
position:fixed; z-index:9999;
padding:7px 12px;
background:#25292f; color:#fff;
font-size:12.5px; line-height:1.4;
border-radius:7px;
box-shadow:0 6px 18px rgba(0,0,0,.22);
pointer-events:none;
white-space:nowrap;
}
.page-legal table td.lg-name{ cursor:default; }
/* 按用户要求：顶部「艺人合同」「案件管理」是**两个按钮** ✓
之前粘成一个「艺人合同案件管理」✗ 因为我前面给 .page-legal > .tabs .tab
写了 padding:0（当成单个只读标题用的 ✗）现在两个页签了 ✗ 得给间距 ✓ */
.page-legal > .tabs{
display:flex !important;
align-items:flex-end !important;
gap:28px !important; /* ← 两个按钮之间留 28px ✓ */
border-bottom:1px solid #eef0f3 !important; /* 底下一条灰线 ✓ 像页签栏 ✓ */
margin-bottom:18px !important;
padding:0 !important;
}
.page-legal > .tabs .tab{
display:inline-block !important;
padding:0 0 12px 0 !important; /* 只留底边距 ✓ */
margin:0 !important;
font-size:15px !important;
color:#5a6068 !important; /* 未选中：灰字 ✓ */
font-weight:400 !important;
border:none !important;
border-bottom:2px solid transparent !important; /* 占位 ✓ 免得选中时抖 ✗ */
background:transparent !important;
cursor:pointer !important;
border-radius:0 !important;
}
.page-legal > .tabs .tab:hover{ color:#2d6cdf !important; }
.page-legal > .tabs .tab.active{
color:#2d6cdf !important; /* 选中：蓝字 ✓ */
font-weight:500 !important;
border-bottom:2px solid #2d6cdf !important; /* 蓝下划线 ✓ */
}
/* 核心数据网格：五格 / 四格 ✓（两个视图共用 ✓） */
.page-legal .core-grid.grid5{ grid-template-columns:repeat(5,minmax(0,1fr)) !important; }
.page-legal .core-grid.grid4{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
.page-legal .lg-empty{ text-align:center !important; color:#a8adb5 !important; padding:40px !important; }
/* ═══════════════════════════════════════════════════════════════
财务部 · 资金管理：样式跟截图（法务部那套）对齐 ✓
实测财务部用的是 .period-bar + 普通统计卡 ✗
不是 .core-card / .core-cell ✗ 所以看着跟截图不一样 ✗
这里把它**改造成截图那个样子**：
① 上面一排：日期区间框 + 本月/上月/全部 灰底段控件 + 右边橙色按钮
② 下面「财务数据」卡片：浅灰底 + 标题行 + 格子分隔
═══════════════════════════════════════════════════════════════ */
/* ① 时间段那一排 → 灰底段控件（跟本月/上月/全部 一个样）✓ */
.page-root .period-bar{
display:flex !important;
align-items:center !important;
gap:10px !important;
margin:0 0 16px 0 !important;
padding:0 !important;
border:none !important;
background:transparent !important;
}
.page-root .period-bar .seg,
.page-root .period-bar .period-btns,
.page-root .period-bar [data-period]{
font-size:14px !important;
}
.page-root .period-bar [data-period]{
height:36px !important;
padding:0 18px !important;
border:none !important;
border-radius:0 !important;
background:transparent !important;
color:#5a6068 !important;
cursor:pointer;
}
.page-root .period-bar [data-period].active{
background:#fff !important;
color:#2d6cdf !important;
font-weight:600 !important;
border-radius:7px !important;
box-shadow:0 1px 3px rgba(0,0,0,.08) !important;
}
/* 段控件整体做成一个灰底槽 ✓（截图里就是这种） */
.page-root .period-bar{
background:#f2f3f5 !important;
border:1px solid #e8eaee !important;
border-radius:10px !important;
padding:3px !important;
display:inline-flex !important;
}
.page-root .period-bar .period-range{
background:transparent !important;
border:none !important;
}
.page-root .period-bar .period-range input[type="date"]{
border:none !important;
background:transparent !important;
font-size:13.5px !important;
color:#3c4148 !important;
}
/* ② 「财务数据 / 核心数据」卡片 → 浅灰底 + 标题行 + 分隔 ✓ */
.page-root .stat-grid,
.page-root .stats-grid,
.page-root .section-stats{
background:#f2f3f5 !important;
border:1px solid #e6e8ec !important;
border-radius:12px !important;
overflow:hidden !important;
display:grid !important;
gap:0 !important;
}
/* 卡片里的每一格 ✓ */
.page-root .stat-card,
.page-root .stat-item{
background:#f2f3f5 !important;
border:none !important;
border-right:1px solid #e6e8ec !important;
border-radius:0 !important;
box-shadow:none !important;
padding:16px 18px !important;
margin:0 !important;
}
.page-root .stat-card:last-child,
.page-root .stat-item:last-child{ border-right:none !important; }
.page-root .stat-card .label,
.page-root .stat-item .label{
font-size:13px !important;
color:#8a8f99 !important;
margin-bottom:10px !important;
}
.page-root .stat-card .value,
.page-root .stat-item .value{
font-size:22px !important;
font-weight:600 !important;
color:#25292f !important;
line-height:1.15 !important;
}
.page-root .stat-card .unit,
.page-root .stat-item .unit{
font-size:13px !important;
font-weight:400 !important;
color:#8a8f99 !important;
margin-left:4px !important;
}
/* ═══════════════════════════════════════════════════════════════
财务部 · 资金管理 三张卡 → 改成截图那种「一整块浅灰 + 竖分隔」✓
实测真名 ✗（不是 .stat-card ✗）：
容器 = .pick-cards 卡片 = .pick-card 文字 = .pick-text / .pick-label / .pick-count
时间段 = button.period-chip
═══════════════════════════════════════════════════════════════ */
.page-root .pick-cards{
display:grid !important;
grid-template-columns:repeat(3, minmax(0,1fr)) !important;
gap:0 !important;
background:#f2f3f5 !important;
border:1px solid #e6e8ec !important;
border-radius:12px !important;
overflow:hidden !important;
margin:0 0 18px 0 !important;
padding:0 !important;
}
.page-root .pick-cards .pick-card{
background:#f2f3f5 !important;
border:none !important;
border-right:1px solid #e6e8ec !important;
border-radius:0 !important;
box-shadow:none !important;
margin:0 !important;
padding:16px 18px !important;
display:flex !important;
align-items:center !important;
gap:12px !important;
cursor:pointer;
}
.page-root .pick-cards .pick-card:last-child{ border-right:none !important; }
.page-root .pick-cards .pick-card.active{
background:#fff !important;
box-shadow:inset 0 0 0 1px #cfdcf5 !important;
}
.page-root .pick-cards .pick-icon{
width:38px !important; height:38px !important;
border-radius:9px !important;
display:inline-flex !important; align-items:center !important; justify-content:center !important;
font-size:17px !important;
flex:0 0 auto !important;
}
.page-root .pick-cards .pick-text{ display:flex !important; flex-direction:column !important; gap:6px !important; }
.page-root .pick-cards .pick-label{
font-size:13px !important;
color:#8a8f99 !important;
font-weight:400 !important;
line-height:1 !important;
}
.page-root .pick-cards .pick-count{
font-size:22px !important;
font-weight:600 !important;
color:#25292f !important;
line-height:1.15 !important;
}
/* 时间段：今天 / 本月 / 自定义日期 → 灰底槽里的白底蓝字 ✓ */
.page-root .period-bar{
display:inline-flex !important;
align-items:center !important;
gap:2px !important;
background:#f2f3f5 !important;
border:1px solid #e8eaee !important;
border-radius:10px !important;
padding:3px !important;
margin:0 0 16px 0 !important;
}
.page-root .period-chip{
height:30px !important;
padding:0 16px !important;
border:none !important;
border-radius:7px !important;
background:transparent !important;
color:#5a6068 !important;
font-size:13.5px !important;
cursor:pointer;
}
.page-root .period-chip.active{
background:#fff !important;
color:#2d6cdf !important;
font-weight:600 !important;
box-shadow:0 1px 3px rgba(0,0,0,.08) !important;
}
.page-root .period-range{
display:inline-flex !important; align-items:center !important; gap:6px !important;
padding:0 8px !important;
}
.page-root .period-range input[type="date"]{
border:none !important; background:transparent !important;
font-size:13px !important; color:#3c4148 !important; outline:none !important;
}
/* 三张卡统一**浅灰底** ✓（截图里就是一整块灰 ✓ 不分选中/未选中 ✗）
选中只用一条淡蓝描边区分 ✓ 不改底色 ✓ */
.page-root .pick-cards .pick-card,
.page-root .pick-cards .pick-card.active{
background:#f2f3f5 !important;
}
.page-root .pick-cards .pick-card.active{
box-shadow:inset 0 0 0 1.5px #b9cdf0 !important;
}
/* 星探部专属手机外壳；离开星探部时由路由移除模式类。 */
html:has(body.scout-mobile-view){overflow-y:hidden!important;scrollbar-gutter:auto!important}
body.scout-mobile-view,body.scout-mobile-view .app,body.scout-mobile-view .main,body.scout-mobile-view .content{scrollbar-gutter:auto!important}
body.scout-mobile-view .app{height:100dvh}
body.scout-mobile-view .main{min-height:0}
body.scout-mobile-view .header{height:auto;min-height:60px;padding:8px 12px;gap:8px;flex-wrap:wrap}
body.scout-mobile-view .header-title{font-size:16px}
body.scout-mobile-view .header-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
body.scout-mobile-view .header-actions .btn{min-height:40px;white-space:nowrap;padding:8px 10px;font-size:12px}
body.scout-mobile-view .hamburger{display:block;min-width:36px;min-height:40px}
body.scout-mobile-view .sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);width:min(280px,85vw)}
body.scout-mobile-view .sidebar.open{transform:translateX(0)}
body.scout-mobile-view .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:99;display:none}
body.scout-mobile-view .sidebar-overlay.open{display:block}
body.scout-mobile-view .content{padding:14px 12px max(20px,env(safe-area-inset-bottom));min-width:0;overflow-x:hidden;overscroll-behavior:contain}
body.scout-mobile-view .content>.page-root{width:100%;max-width:600px;margin:0 auto;min-width:0}
body.scout-mobile-view .modal-overlay{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
body.scout-mobile-view .modal-overlay .modal{width:100%;max-width:600px!important;max-height:calc(100dvh - 20px);min-width:0;border-radius:14px;display:flex;flex-direction:column;overflow:hidden}
body.scout-mobile-view .modal-header{padding:14px 16px;flex-shrink:0;gap:8px}
body.scout-mobile-view .modal-header h3{font-size:16px;min-width:0;overflow-wrap:anywhere}
body.scout-mobile-view .modal-close{min-width:40px;min-height:40px;flex-shrink:0}
body.scout-mobile-view .modal-body{padding:16px;overflow:auto;min-height:0;overscroll-behavior:contain}
body.scout-mobile-view .modal-footer{padding:12px 16px;flex-shrink:0;flex-wrap:wrap;gap:8px}
body.scout-mobile-view .modal-footer .btn{min-height:42px;justify-content:center}
body.scout-mobile-view .form-row{grid-template-columns:minmax(0,1fr)}
body.scout-mobile-view .modal input,body.scout-mobile-view .modal select,body.scout-mobile-view .modal textarea{min-width:0;max-width:100%;font-size:16px;min-height:44px}
body.scout-mobile-view .detail-row{gap:12px;min-width:0;padding:12px 0}
body.scout-mobile-view .detail-row .dk{flex-basis:78px;text-align:left}
body.scout-mobile-view .detail-row .dv{min-width:0;overflow-wrap:anywhere}
body.scout-desktop-view .content{overflow:auto}
@media(max-width:768px){
body.scout-desktop-view .content>.page-root{min-width:1120px}
body.scout-desktop-view .header{height:auto;min-height:60px;padding:8px 12px;gap:8px;flex-wrap:wrap}
body.scout-desktop-view .header-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end}
body.scout-desktop-view .header-actions .btn{min-height:40px;white-space:nowrap}
body.scout-desktop-view .hamburger{min-width:36px;min-height:40px}
}
|