/* ============ 抖音团长选品平台 · 后台样式 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; background: #f5f6f8; color: #333; font-size: 14px; }
a { color: #2d6cdf; text-decoration: none; }

/* ---------- 布局 ---------- */
.layout { display: flex; min-height: 100vh; }
.sidebar { width: 210px; background: #262b36; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; }
.brand { height: 56px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-name { font-size: 16px; font-weight: 700; color: #fff; }
.menu { flex: 1; overflow-y: auto; padding: 8px 0; }
.menu-group { padding: 16px 16px 8px; font-size: 13px; font-weight: 700; color: #aeb6c4; letter-spacing: .3px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; border-top: 1px solid rgba(255,255,255,.06); }
.menu-group:hover { color: #fff; }
.menu-group .arrow { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #6b7686; transition: transform .2s; margin-right: 3px; flex-shrink: 0; }
.menu-group:hover .arrow { border-top-color: #fff; }
.menu-group.collapsed .arrow { transform: rotate(-90deg); }
.menu-sub.collapsed { display: none; }
.menu-item { display: block; padding: 9px 16px 9px 30px; color: #b9c0cc; font-size: 13px; border-left: 3px solid transparent; }
.menu-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-item.active { background: #c8161d; color: #fff; border-left-color: #ffffff55; font-weight: 600; }
.menu-item-top { color: #e6eaf1; font-weight: 600; font-size: 14px; padding-left: 16px; }
.sidebar-foot { padding: 12px 16px; font-size: 12px; color: rgba(255,255,255,.35); border-top: 1px solid rgba(255,255,255,.06); }

.main { flex: 1; margin-left: 210px; display: flex; flex-direction: column; align-items: stretch; }
/* 内容区：防止任何继承的右对齐/rtl 把分页推到右侧 */
.content { flex: 1; text-align: left; }
.topbar { height: 56px; background: #262b36; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; position: sticky; top: 0; z-index: 10; }
.topbar-title { font-size: 16px; font-weight: 600; color: #fff; }
.topnav { display: flex; gap: 8px; }
.topnav a { padding: 7px 20px; border-radius: 4px; color: #c3c9d4; font-size: 14px; }
.topnav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.topnav a.on { background: #c8161d; color: #fff; }
.topbar-user { display: flex; align-items: center; gap: 16px; color: #cfd4dd; }
.topbar-user a { color: #cfd4dd; }
.topbar-user a:hover { color: #fff; }
.content { padding: 20px 24px; }

/* ---------- 工作台统计卡 ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.stat-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #f2f2f2; }
.stat-item { display: flex; justify-content: space-between; padding: 7px 0; color: #666; }
.stat-item b { color: #333; font-size: 15px; }

.panel { background: #fff; border-radius: 8px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.panel-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.table-info { width: 100%; border-collapse: collapse; }
.table-info td { padding: 9px 4px; border-bottom: 1px solid #f5f5f5; color: #555; }

/* ---------- 筛选栏 ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; background: #fff; padding: 14px 16px; border-radius: 8px; margin-bottom: 14px; align-items: center; }
.filter-bar input, .filter-bar select { height: 34px; padding: 0 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; min-width: 140px; }
.filter-bar .btn-default { height: 34px; padding: 0 18px; box-sizing: border-box; }
.filter-bar input:focus, .filter-bar select:focus { outline: none; border-color: #c8161d; }

/* ---------- 按钮 ---------- */
/* 主按钮与次按钮共用同一尺寸盒（高 34 / 圆角 4 / 字号 13 / 边框盒子），
   避免「取消/返回」等 btn-default 与 btn-primary 高低不齐、文字不居中 */
.btn-primary, .btn-default {
  display: inline-flex; align-items: center; justify-content: center;
  height: 34px; padding: 0 18px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 4px;
  font-family: inherit; font-size: 13px; line-height: 1; white-space: nowrap;
  text-decoration: none; vertical-align: middle; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-primary { padding: 0 20px; background: #c8161d; border-color: #c8161d; color: #fff; box-shadow: 0 1px 3px rgba(200,22,29,.22); }
.btn-primary:hover { background: #a81319; border-color: #a81319; color: #fff; }
.btn-default { background: #fff; border-color: #d9d9d9; color: #555; }
.btn-default:hover { border-color: #c8161d; color: #c8161d; }
.btn-link { background: none; border: none; color: #2d6cdf; cursor: pointer; font-size: 13px; padding: 0 4px; font-family: inherit; }
.btn-link:hover { text-decoration: underline; }
.btn-link.btn-danger { color: #c8161d; }
.op-sep { color: #e0e0e0; }
.op-none { color: #ccc; }

/* 列表图片缩略图（Banner / 弹窗等） */
.thumb-link { display: inline-block; line-height: 0; }
.thumb { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; border: 1px solid #eee; background: #f7f8fa; display: block; }
.thumb-link:hover .thumb { border-color: #c8161d; }
/* Banner 缩略图：16:9，图片加载失败时露出底图占位，不留破图 */
.banner-thumb { display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 54px; border: 1px solid #eee; border-radius: 4px; overflow: hidden; background: #f7f8fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='%23d5dae2'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center/26px no-repeat; }
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-link:hover .banner-thumb { border-color: #c8161d; }
/* 流程提示 */
.flow-tip {
  background: #eef4ff; border: 1px solid #b8d0f7; color: #2d5fb8;
  font-size: 13px; padding: 10px 16px; border-radius: 6px; margin-bottom: 14px;
}

/* 表单面板 */
.form-panel {
  background: #fff; border-radius: 8px; padding: 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05); max-width: 760px;
}
.panel-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.alert { padding: 10px 14px; border-radius: 4px; font-size: 13px; margin-bottom: 16px; }
.alert-error { background: #fff1f0; border: 1px solid #ffa39e; color: #c8161d; }
.alert-success { background: #f6ffed; border: 1px solid #b7eb8f; color: #389e0d; }
.bid-best td { background: #fffbe6; }
.alert-info { background: #eef4ff; border: 1px solid #b8d0f7; color: #2d5fb8; }
.pool-info {
  background: #fafafa; border: 1px solid #f0f0f0; border-radius: 6px;
  padding: 12px 16px; margin-bottom: 20px; font-size: 13px;
}
.pi-row { display: flex; gap: 16px; padding: 4px 0; }
.pi-label { color: #999; width: 90px; flex-shrink: 0; }
.form-item { display: flex; margin-bottom: 18px; }
.form-label { width: 130px; flex-shrink: 0; text-align: right; padding-right: 12px; font-size: 13px; color: #555; line-height: 32px; }
.form-label em { color: #c8161d; font-style: normal; }
.form-control { flex: 1; }
.form-control input[type=text], .form-control input[type=number], .form-control input[type=password], .form-control select, .form-control textarea {
  width: 100%; padding: 6px 10px; border: 1px solid #d9d9d9; border-radius: 4px;
  font-size: 13px; font-family: inherit;
}
.form-control input:focus, .form-control select:focus, .form-control textarea:focus { border-color: #c8161d; outline: none; }
.form-control .input-sm { max-width: 160px; }
.form-hint { font-size: 12px; color: #999; margin-top: 4px; }
.ro-notice { margin: 0 0 16px; padding: 10px 14px; background: #f6fafe; border: 1px solid #dbe9fb; border-radius: 4px; color: #3673c9; font-size: 12px; line-height: 1.8; }
.ro-value { min-height: 32px; padding: 6px 10px; background: #fafbfc; border: 1px solid #eee; border-radius: 4px; color: #333; font-size: 13px; line-height: 20px; word-break: break-all; }
.ro-sub { color: #999; font-size: 12px; margin-left: 8px; }
.form-actions { margin-top: 24px; padding-left: 142px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.form-actions .btn-primary { padding: 0 28px; }

/* 面板块（栏目配置等多分组页面） */
.panel-block {
  background: #fff; border-radius: 8px; padding: 20px 24px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05); margin-bottom: 20px;
}
.panel-block .panel-title { display: flex; justify-content: space-between; align-items: center; }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 4px; }

/* 弹层 */
.modal-mask {
  position: fixed; left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.modal-box {
  background: #fff; border-radius: 8px; padding: 24px;
  width: 440px; max-width: 90vw; box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
/* 加宽弹窗：字段多的表单（如任务领现金）用，超高时可滚动 */
.modal-box.modal-lg { width: 680px; max-height: 88vh; overflow-y: auto; }
.modal-box.modal-lg .form-label { width: 132px; white-space: nowrap; }
.modal-box.modal-lg .form-actions { padding-left: 144px; }
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.modal-box .form-item { margin-bottom: 14px; }
.modal-box .form-label { width: 90px; line-height: 34px; }
.modal-box .form-actions { padding-left: 102px; margin-top: 18px; }
.btn-block { width: 100%; height: 40px; margin-top: 6px; }
/* ---------- 表格 ---------- */
.table-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #666; }
.toolbar-tip { font-size: 12px; color: #999; }
.table { width: 100%; background: #fff; border-radius: 8px; border-collapse: collapse; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.table th { background: #fafafa; text-align: left; padding: 12px 14px; font-weight: 600; color: #555; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
.table td { padding: 11px 14px; border-bottom: 1px solid #f5f5f5; vertical-align: middle; }
.chk-all { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; color: #666; cursor: pointer; user-select: none; white-space: nowrap; }
.chk-all:hover { color: #c8161d; }
.table input[type=checkbox] { width: 14px; height: 14px; margin: 0; cursor: pointer; accent-color: #c8161d; vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #fafbfc; }
.empty { text-align: center; color: #999; padding: 40px 0 !important; }
.cell-user { display: flex; align-items: center; gap: 8px; }
.avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: #c8161d; color: #fff; font-size: 13px; }
.cell-title { max-width: 320px; }
.cell-sub { font-size: 12px; color: #999; margin-top: 2px; }

/* ---------- 商品列表（信息密度较高，参考精选联盟列表） ---------- */
.table-scroll { overflow-x: auto; }
.table-compact th { padding: 10px 12px; font-size: 13px; }
.table-compact td { padding: 9px 12px; font-size: 13px; }
.p-cell { display: flex; gap: 10px; align-items: flex-start; }
.p-thumb { flex: 0 0 58px; width: 58px; height: 58px; border: 1px solid #eee; border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; background: #f7f8fa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='%23d5dae2'%3E%3Cpath d='M21 19V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center/34px no-repeat; }
.p-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-thumb-none { position: absolute; bottom: 1px; left: 0; right: 0; text-align: center; font-size: 10px; line-height: 12px; color: #b8bec8; background: rgba(247,248,250,.82); }
.p-meta { min-width: 0; }
.p-meta .cell-title { max-width: 230px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-meta-sep { color: #e5e5e5; margin: 0 4px; }
.cell-title-wrap { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
/* 列表内可点击链接：与全局链接同色，避免蓝得不一致 */
.cell-link { color: #2d6cdf; text-decoration: none; }
.cell-link:hover { color: #1a56c4; text-decoration: underline; }
.mono { font-family: Consolas, Menlo, monospace; }
.copy-btn {
    border: 1px solid #d7dee8; background: #fff; color: #5a6b82;
    font-size: 12px; line-height: 1; padding: 3px 7px; border-radius: 4px;
    cursor: pointer; white-space: nowrap; vertical-align: middle;
    opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.cell-title-wrap .copy-btn { position: absolute; right: 0; top: 0; box-shadow: 0 0 0 3px #fff; }
/* 行内ID复制按钮：默认隐藏且不占位（absolute），鼠标悬停该行才浮现，避免挤压换行 */
.id-line { position: relative; }
.id-line .copy-btn { position: absolute; right: 0; top: 0; box-shadow: 0 0 0 3px #fff; }
.cell-title-wrap:hover .copy-btn,
.id-line:hover .copy-btn { opacity: 1; visibility: visible; }
.copy-btn:hover { background: #eef4ff; border-color: #a9c3f5; color: #1f6feb; }
.copy-btn:active { transform: translateY(1px); }
/* 佣金/服务费行：统一字重 400，重点只用红色标识 */
.cm-tag {
    display: inline-block; background: transparent; color: #c8161d;
    font-size: 12px; line-height: 1.6; padding: 0; margin-bottom: 2px; font-weight: 400;
}
.cm-row { font-size: 12px; color: #8a94a6; line-height: 1.75; white-space: nowrap; font-weight: 400; }
.cm-row b { color: #555; font-weight: 400; }
.cm-row .k { color: #9aa4b2; }
.cm-row .sep { color: #dcdfe6; margin: 0 4px; }
/* 数值比标签小一号（11px vs 12px），弱化突兀感 */
.cm-row .v { color: #555; font-weight: 400; font-size: 11px; font-variant-numeric: tabular-nums; }
.cm-row .v.hot { color: #c8161d; }
/* 付款/结算小表：标签灰 12px、数值深灰 11px，组间留白 */
.pay-tb { border-collapse: collapse; font-size: 12px; line-height: 1.9; color: #9aa4b2; font-weight: 400; }
.pay-tb td { padding: 0; border: none; white-space: nowrap; vertical-align: top; background: transparent; }
.pay-tb .k { color: #9aa4b2; padding-right: 6px; }
.pay-tb .v { color: #555; font-weight: 400; font-size: 11px; padding-right: 16px; font-variant-numeric: tabular-nums; }
.price-now { color: #c8161d; font-weight: 400; font-size: 13px; font-variant-numeric: tabular-nums; }
.price-old { text-decoration: line-through; color: #bbb; font-size: 12px; }
.rate-strong { color: #c8161d; font-weight: 400; }
/* 数值统一等宽数字，避免列宽跳动 */
.num { font-variant-numeric: tabular-nums; }
.inline-form { display: inline; }

/* ---------- 密集列表统一视觉（2026-10-26）：两档字号 + 三档中性色 ---------- */
.table-compact th { font-size: 13px; font-weight: 500; color: #666; background: #fafbfc; }
.table-compact td { font-size: 13px; color: #333; line-height: 1.6; }
.table-compact .cell-sub { font-size: 12px; color: #8a94a6; }
.table-compact .mono { font-size: 12px; color: #8a94a6; }
.table-compact .op-none { font-size: 12px; color: #c2c8d2; }
.table-compact .btn-link { font-size: 13px; }

/* ---------- 表头排序链接（点击切换升降序） ---------- */
.th-sort { color: #555; text-decoration: none; }
.th-sort:hover { color: #c8161d; }
.th-sort.on { color: #c8161d; }

/* ---------- 按钮用在 <a> 上：尺寸由上面的 .btn-primary/.btn-default 基础盒统一控制 ---------- */
a.btn-primary, a.btn-default { text-decoration: none; }

/* ---------- 标签 ---------- */
.tag { display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: 12px; background: #f0f0f0; color: #666; }
.tag-green { background: #e8f7ee; color: #1a9e54; }
.tag-gray { background: #f0f0f0; color: #999; }
.tag-orange { background: #fdf3e6; color: #e08a1e; }
.tag-blue { background: #e8f1ff; color: #2b7de9; }
/* 中性状态与警示状态（商品列表用，颜色收敛到红/灰） */
.tag-plain { background: #f2f3f5; color: #555; }
.tag-red { background: #fdecec; color: #c8161d; }

/* ---------- 分页 ---------- */
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 14px; width: 100%; text-align: right; }
.pager-info { color: #999; font-size: 12px; margin-right: 8px; }
.pager-btn { padding: 5px 12px; background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; color: #555; font-size: 13px; }
.pager-btn:hover { border-color: #c8161d; color: #c8161d; }
.pager-cur { padding: 5px 12px; background: #c8161d; color: #fff; border-radius: 4px; font-size: 13px; }

/* ---------- 登录页 ---------- */
.login-body { background: #f5f6f8; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-box { width: 360px; background: #fff; border-radius: 10px; padding: 36px 32px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.login-brand { font-size: 20px; font-weight: 700; color: #c8161d; text-align: center; margin-bottom: 28px; }
.login-row { margin-bottom: 16px; }
.login-row label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.login-row input { width: 100%; height: 38px; padding: 0 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
.login-row input:focus { outline: none; border-color: #c8161d; }
.login-error { background: #fdecec; color: #c8161d; font-size: 13px; padding: 9px 12px; border-radius: 4px; margin-bottom: 12px; }
.login-tip { text-align: center; font-size: 12px; color: #bbb; margin-top: 16px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) { .stat-cards { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 工作台 ---------- */
.wb-row { display: flex; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.wb-col-main { flex: 1.05; }
.wb-col-side { flex: 1.35; }
.mini-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 0; color: #999; font-size: 13px; }
.mini-empty-icon { font-size: 46px; color: #e3e3e3; margin-bottom: 12px; }
.sub-title { font-size: 13px; font-weight: 600; color: #666; margin: 4px 0 10px; padding-left: 8px; border-left: 3px solid #c8161d; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.metric-grid-3 { grid-template-columns: repeat(3, 1fr); }
.metric { background: #fafafa; border: 1px solid #f2f2f2; border-radius: 6px; padding: 12px 10px; text-align: center; }
.metric span { display: block; font-size: 12px; color: #888; margin-bottom: 6px; }
.metric b { display: block; font-size: 19px; color: #333; }
.metric i { display: block; font-style: normal; font-size: 11px; color: #bbb; margin-top: 4px; }
.lv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lv-card { border-radius: 6px; padding: 10px 8px; color: #fff; background: #5b8ff9; text-align: center; }
.lv-card:nth-child(2) { background: #5ad8a6; }
.lv-card:nth-child(3) { background: #5d7092; }
.lv-card:nth-child(4) { background: #f6bd16; }
.lv-card:nth-child(5) { background: #6f5ef9; }
.lv-name { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.lv-cnt { font-size: 11px; opacity: .92; line-height: 1.6; }
.range-tabs { display: flex; gap: 4px; }
.range-tab { padding: 5px 12px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 12px; color: #666; background: #fff; }
.range-tab.cur { background: #5b8ff9; border-color: #5b8ff9; color: #fff; }

/* 操作日志明细（保存内容 JSON） */
.oplog-data { background: #f7f7f7; border: 1px solid #eee; border-radius: 4px; padding: 8px 10px; font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; max-width: 520px; margin: 6px 0 0; color: #444; }

/* ---------- 统一上传控件（微信 WeUI 风格，2026-10-24） ---------- */
.upload-box { margin-top: 8px; }
.zs-up { display: flex; align-items: flex-start; gap: 14px; }
.zs-up-in { display: none !important; }
.zs-up-tile {
  position: relative; width: 96px; height: 96px; flex: 0 0 96px;
  border: 1px solid #d9d9d9; border-radius: 8px; background: #f7f7f9;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden; box-sizing: border-box;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.zs-up-tile:hover { border-color: #07c160; background: #fff; }
.zs-up-tile:focus { outline: none; border-color: #07c160; box-shadow: 0 0 0 2px rgba(7,193,96,.14); }
.zs-up-tile.is-busy { opacity: .65; cursor: default; }
.zs-up-plus { position: relative; width: 26px; height: 26px; }
.zs-up-plus::before, .zs-up-plus::after {
  content: ''; position: absolute; background: #b2b2b2; border-radius: 1px; transition: background .15s;
}
.zs-up-plus::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.zs-up-plus::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
.zs-up-tile:hover .zs-up-plus::before, .zs-up-tile:hover .zs-up-plus::after { background: #07c160; }
.zs-up-label { margin-top: 8px; font-size: 12px; color: #7a7e83; line-height: 1; }
.zs-up-thumb {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.zs-up-tile.is-filled { border-style: solid; background: #fff; }
.zs-up-tile.is-filled .zs-up-plus, .zs-up-tile.is-filled .zs-up-label { display: none; }
.zs-up-tile.is-filled .zs-up-thumb { display: block; }
.zs-up-del {
  position: absolute; right: 4px; top: 4px; z-index: 2;
  width: 18px; height: 18px; line-height: 16px; text-align: center;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  font-size: 13px; text-decoration: none; cursor: pointer; display: none;
}
.zs-up-tile.is-filled .zs-up-del { display: block; }
.zs-up-del:hover { background: #e64340; color: #fff; }
/* fill 模式：页面自带的槽位（竖向海报位）直接作为上传位 */
.zs-up-fill { cursor: pointer; transition: border-color .15s, background .15s; }
.zs-up-fill:hover { border-color: #07c160 !important; }
.zs-up-fill:empty::after { content: '＋'; font-size: 22px; color: #b2b2b2; }
.zs-up-fill:empty:hover::after { color: #07c160; }
.zs-up-meta { font-size: 12px; color: #999; line-height: 1.8; padding-top: 6px; min-width: 0; }
.zs-up-name { display: block; color: #8a8f99; word-break: break-all; }
.zs-up .upload-status { display: block; }
.upload-status { font-size: 12px; color: #999; }
.upload-hint { font-size: 12px; color: #999; margin-top: 6px; line-height: 1.6; }
.upload-preview {
  margin-top: 10px; max-width: 240px; max-height: 150px;
  border: 1px solid #eee; border-radius: 6px; object-fit: cover; display: block;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ---------- 运营工具箱（Banner / 弹窗 / 公告） ---------- */
.tool-table th { font-size: 12px; color: #8a94a6; font-weight: 600; letter-spacing: .3px; background: #fafbfc; }
.tool-table td { vertical-align: middle; }
.tool-title { font-weight: 600; color: #333; font-size: 13px; }
.tool-sub { font-size: 12px; color: #9aa4b2; margin-top: 3px; }
.tool-thumb { width: 76px; height: 42px; border-radius: 4px; object-fit: cover; border: 1px solid #eee; background: #f7f8fa; display: block; }
.thumb-link:hover .tool-thumb { border-color: #c8161d; }
.jump-tag {
  display: inline-block; font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 3px;
  background: #eef4ff; color: #2d5fb8; margin-right: 6px; vertical-align: middle;
}
.jump-tag.jump-none { background: #f5f6f8; color: #9aa4b2; }
.jump-url {
  display: inline-block; max-width: 210px; font-size: 12px; color: #9aa4b2;
  vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sort-num {
  display: inline-block; min-width: 28px; text-align: center; padding: 2px 8px; border-radius: 4px;
  background: #f5f6f8; color: #555; font-size: 12px; font-weight: 600;
}
.op-cell { white-space: nowrap; }
.op-cell .btn-link { font-size: 12px; }
.op-cell .op-sep { margin: 0 2px; }
.tool-empty { padding: 48px 0 !important; color: #9aa4b2; font-size: 13px; }

/* ---------- 日期时间范围选择器 ---------- */
.dr-wrap { position: relative; display: inline-block; }
.dr-input { height: 34px; padding: 0 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; background: #fff; cursor: pointer; width: 320px; color: #333; }
.dr-input:focus { outline: none; border-color: #c8161d; }
.filter-bar .dr-input { min-width: 320px; width: 320px; }
/* 条件较少的筛选栏（如任务领现金）收窄日期控件，保证「搜索/重置」同处一行 */
.filter-bar.taskcash-filter .dr-input { min-width: 240px; width: 240px; }
.dr-panel { display: none; position: absolute; top: 38px; left: 0; z-index: 2000; width: 680px; background: #fff; border: 1px solid #e4e7ed; border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.dr-wrap.open .dr-panel { display: flex; }
.dr-left { width: 100px; flex: 0 0 100px; border-right: 1px solid #f0f0f0; padding: 6px 0; }
.dr-left a { display: block; padding: 7px 12px; font-size: 13px; color: #606266; cursor: pointer; }
.dr-left a:hover { color: #c8161d; background: #fdf0f0; }
.dr-body { flex: 1; min-width: 0; }
.dr-top { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid #f0f0f0; }
.dr-top input, .filter-bar .dr-top input { min-width: 0; width: auto; height: 30px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 8px; font-size: 13px; color: #333; }
.dr-top input::placeholder { color: #c0c4cc; }
.dr-top input:focus { outline: none; border-color: #c8161d; }
.dr-top .dr-d { width: 112px; }
.dr-top .dr-t { width: 86px; }
.dr-sep { color: #c0c4cc; font-size: 13px; padding: 0 6px; }
.dr-cals { display: flex; padding: 2px 0 6px; }
.dr-cal { width: 50%; padding: 0 10px; }
.dr-cal + .dr-cal { border-left: 1px solid #f0f0f0; }
.dr-cal-h { display: flex; align-items: center; justify-content: space-between; height: 34px; font-size: 13px; font-weight: 600; color: #333; }
.dr-cal-h .dr-nav { color: #9aa4b2; cursor: pointer; padding: 0 8px; font-size: 15px; font-weight: 400; }
.dr-cal-h .dr-nav:hover { color: #c8161d; }
.dr-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dr-grid th { font-weight: 400; font-size: 12px; color: #9aa4b2; padding: 4px 0; }
.dr-grid td { text-align: center; padding: 0; height: 30px; }
.dr-cell { display: inline-block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 13px; color: #333; cursor: pointer; }
.dr-cell:hover { background: #f5f6f8; }
.dr-cell.other { color: #c8cdd6; }
.dr-cell.in-range { background: #fdeaea; border-radius: 0; }
.dr-cell.is-start, .dr-cell.is-end { background: #c8161d; color: #fff; border-radius: 50%; }
.dr-cell.is-today { color: #c8161d; font-weight: 700; }
.dr-cell.is-today.is-start, .dr-cell.is-today.is-end { color: #fff; }
.dr-foot { display: flex; justify-content: flex-end; align-items: center; gap: 18px; padding: 8px 14px; border-top: 1px solid #f0f0f0; }
.dr-foot a { font-size: 13px; cursor: pointer; }
.dr-clear { color: #6b7280; }
.dr-clear:hover { color: #333; }
.dr-ok { color: #c8161d; font-weight: 600; }
.dr-ok:hover { color: #a81319; }

/* ---------- 单日期选择器（比原生 input[type=date] 浮层更大） ---------- */
.dp-wrap { position: relative; display: block; width: 100%; }
.dp-wrap > input.dp-src { width: 100%; cursor: pointer; background: #fff; }
.dp-panel {
  display: none; position: absolute; top: 40px; left: 0; z-index: 3000;
  width: 320px; padding: 10px 12px 8px; background: #fff;
  border: 1px solid #e4e7ed; border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
}
.dp-wrap.open .dp-panel { display: block; }
.dp-head { display: flex; align-items: center; justify-content: space-between; height: 36px; }
.dp-title { font-size: 15px; font-weight: 700; color: #2b2f38; }
.dp-nav {
  width: 26px; height: 26px; line-height: 24px; text-align: center;
  font-size: 18px; color: #9aa4b2; cursor: pointer; border-radius: 4px; user-select: none;
}
.dp-nav:hover { color: #c8161d; background: #fdf0f0; }
.dp-grid { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 4px 0 2px; }
.dp-grid th { font-weight: 400; font-size: 12px; color: #9aa4b2; padding: 6px 0; }
.dp-grid td { text-align: center; padding: 0; height: 38px; }
.dp-cell {
  display: inline-block; width: 38px; height: 38px; line-height: 38px;
  border-radius: 8px; font-size: 14px; color: #333; cursor: pointer; user-select: none;
}
.dp-cell:hover { background: #f5f6f8; }
.dp-cell.other { color: #c8cdd6; }
.dp-cell.is-today { color: #c8161d; font-weight: 700; }
.dp-cell.is-sel, .dp-cell.is-sel:hover { background: #c8161d; color: #fff; font-weight: 600; }
.dp-foot { display: flex; justify-content: flex-end; align-items: center; gap: 20px; padding: 6px 2px 2px; border-top: 1px solid #f0f0f0; }
.dp-foot a { font-size: 13px; cursor: pointer; }
.dp-clear { color: #6b7280; }
.dp-clear:hover { color: #333; }
.dp-today { color: #c8161d; font-weight: 600; }
.dp-today:hover { color: #a81319; }

/* ---------- 错误页 ---------- */
.error-box { text-align: center; }
.error-code { font-size: 56px; font-weight: 800; color: #c8161d; line-height: 1.1; margin: 4px 0 12px; }
.error-title { font-size: 18px; font-weight: 700; color: #2b2f38; margin-bottom: 10px; }
.error-msg { font-size: 13px; color: #888; line-height: 1.7; margin-bottom: 14px; }
.error-path { font-size: 12px; color: #aaa; word-break: break-all; background: #fafafa; border: 1px solid #f0f0f0; border-radius: 4px; padding: 8px 10px; margin-bottom: 4px; }
.error-path span { color: #666; }
.error-actions { margin-top: 22px; }
.error-actions .btn-primary, .error-actions .btn-default { display: flex; width: 100%; height: 38px; text-align: center; padding: 0; margin-top: 10px; }
.error-actions .btn-primary { margin-top: 0; }

/* ---------- 统一弹窗（替代浏览器原生 confirm/alert，见 Content/dialog.js） ---------- */
.zsdlg-mask { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(17, 24, 39, .42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: zsdlgFade .16s ease-out; }
.zsdlg { width: 404px; max-width: 100%; background: #fff; border-radius: 12px; box-shadow: 0 20px 48px rgba(15, 23, 42, .24), 0 2px 6px rgba(15, 23, 42, .08); overflow: hidden; animation: zsdlgPop .18s cubic-bezier(.22, .9, .32, 1.2); }
.zsdlg-head { display: flex; align-items: flex-start; gap: 12px; padding: 22px 22px 6px; }
.zsdlg-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.zsdlg-icon.warn { background: #fdeced; color: #c8161d; }
.zsdlg-icon.info { background: #eef4ff; color: #2d6cdf; }
.zsdlg-texts { flex: 1; min-width: 0; padding-top: 1px; }
.zsdlg-title { font-size: 15px; font-weight: 600; color: #1f2329; line-height: 22px; margin-bottom: 6px; }
.zsdlg-msg { font-size: 13px; color: #5b6470; line-height: 21px; word-break: break-word; }
.zsdlg-input-wrap { padding: 6px 22px 0 72px; }
.zsdlg-input { width: 100%; height: 34px; line-height: 34px; padding: 0 10px; border: 1px solid #dcdfe6; border-radius: 6px; font-size: 13px; color: #1f2329; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.zsdlg-input:focus { border-color: #c8161d; box-shadow: 0 0 0 3px rgba(200, 22, 29, .1); }
.zsdlg-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 22px 20px; }
.zsdlg-btn { height: 34px; min-width: 76px; padding: 0 18px; border-radius: 6px; border: 1px solid #dcdfe6; background: #fff; color: #424a54; font-size: 13px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.zsdlg-btn:hover { background: #f6f7f9; border-color: #c9ced6; }
.zsdlg-btn:focus-visible { outline: 2px solid rgba(200, 22, 29, .35); outline-offset: 1px; }
.zsdlg-btn.primary { background: #c8161d; border-color: #c8161d; color: #fff; box-shadow: 0 1px 4px rgba(200, 22, 29, .28); }
.zsdlg-btn.primary:hover { background: #a81319; border-color: #a81319; }
.zsdlg-mask.zsdlg-leave { animation: zsdlgOut .15s ease-in forwards; }
.zsdlg-mask.zsdlg-leave .zsdlg { animation: zsdlgPopOut .15s ease-in forwards; }
@keyframes zsdlgFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes zsdlgOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes zsdlgPop { from { opacity: 0; transform: translateY(8px) scale(.96) } to { opacity: 1; transform: none } }
@keyframes zsdlgPopOut { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(4px) scale(.98) } }

/* ---------- 商品详情主图切换器（2026-10-26） ---------- */
.g-main {
  position: relative; width: 300px; height: 300px; margin: 0 auto;
  border: 1px solid #eee; border-radius: 8px; overflow: hidden; background: #f7f8fa;
}
.g-main img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }
.g-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 60px; border: none; border-radius: 4px;
  background: rgba(0, 0, 0, .32); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  user-select: none; transition: background .15s;
}
.g-nav:hover { background: rgba(0, 0, 0, .55); }
.g-prev { left: 8px; }
.g-next { right: 8px; }
.g-count {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px;
  padding: 2px 9px; border-radius: 10px; line-height: 18px;
}
.g-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; padding-bottom: 4px; }
.g-thumb {
  flex: 0 0 56px; width: 56px; height: 56px; object-fit: cover;
  border-radius: 6px; border: 2px solid transparent; cursor: pointer; opacity: .7;
}
.g-thumb.on { border-color: #c8161d; opacity: 1; }

/* ---------- 商品详情页头部：左图右卡（2026-10-26） ---------- */
.pd-head { display: flex; gap: 16px; align-items: stretch; flex-wrap: wrap; margin-bottom: 16px; }
.pd-left { flex: 0 0 380px; max-width: 380px; }
.pd-right { flex: 1; min-width: 480px; display: flex; flex-direction: column; }
.pd-titlerow { display: flex; align-items: flex-start; gap: 10px; }
.pd-title {
  font-size: 18px; font-weight: 600; color: #1f2329; line-height: 1.5;
  margin: 0 0 4px; flex: 1; min-width: 0; word-break: break-all;
}
.pd-countdown {
  flex-shrink: 0; background: #c8161d; color: #fff; font-size: 12px;
  padding: 4px 10px; border-radius: 4px; line-height: 18px; white-space: nowrap;
}
.pd-pricerow { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; flex-wrap: wrap; }
.pd-price-label { font-size: 13px; color: #8a94a6; }
.pd-price { font-size: 26px; font-weight: 700; color: #c8161d; font-variant-numeric: tabular-nums; }
.pd-price-old { color: #bbb; font-size: 13px; }
.pd-linkbtn {
  font-size: 12px; color: #fff; background: #ff5c5c; border: none;
  padding: 5px 12px; border-radius: 4px; text-decoration: none; line-height: 18px;
}
.pd-linkbtn:hover { background: #e64848; color: #fff; }
/* 没有团长归属参数的链接：灰态禁用，提示需重新同步，绝不给主播用无归属链接 */
.pd-linkbtn-off { background: #f2f3f5; color: #b0b6c0; cursor: not-allowed; }
.pd-type-tag {
  display: inline-block; border: 1px solid #4a8af4; color: #4a8af4; background: #fff;
  font-size: 12px; line-height: 20px; padding: 1px 10px; border-radius: 4px;
}
.pd-comm {
  background: #f7f8fa; border: 1px solid #f0f1f3; border-radius: 8px;
  padding: 14px 4px; display: flex; flex-wrap: wrap;
}
.pc-cell { flex: 1; min-width: 128px; padding: 0 16px; }
.pc-cell + .pc-cell { border-left: 1px solid #ececf0; }
.pc-name { font-size: 13px; color: #555; margin-bottom: 8px; }
.pc-line { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; white-space: nowrap; flex-wrap: wrap; }
.pc-rate { font-size: 20px; font-weight: 700; color: #c8161d; font-variant-numeric: tabular-nums; }
.pc-rate.pc-dark { color: #1f2329; }
.pc-rate.pc-none { color: #c2c8d2; }
.pc-earn { font-size: 12px; color: #8a94a6; }
.pc-sub { font-size: 12px; color: #9aa4b2; }
.pc-badge {
  display: inline-block; background: #c8161d; color: #fff; font-size: 11px;
  padding: 1px 6px; border-radius: 3px; margin-left: 4px; line-height: 16px; vertical-align: 2px;
}
.pd-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 10px 2px; font-size: 13px; color: #555; }
.pd-meta .k { color: #8a94a6; margin-right: 6px; }
.pd-stats {
  background: #fff; border: 1px solid #f0f1f3; border-radius: 8px;
  margin-top: 12px; overflow: hidden; flex: 1; display: flex; flex-direction: column;
}
.pd-stats-row {
  display: flex; align-items: center; flex-wrap: wrap; padding: 8px 16px;
  gap: 8px 26px; border-top: 1px solid #f5f6f8; flex: 1;
}
.pd-stats-row:first-child { border-top: none; }
.ps-lead { display: inline-flex; align-items: center; font-size: 13px; color: #555; min-width: 84px; }
.ps-item { font-size: 13px; color: #8a94a6; white-space: nowrap; }
.ps-item b { color: #1f2329; font-weight: 600; margin-left: 4px; font-variant-numeric: tabular-nums; }
.ps-item.ps-blue b { color: #2d6cdf; }

/* 详情页下方 tab（商品详情 / 文案素材） */
.pd-tabs { display: flex; gap: 26px; padding: 0 18px; border-bottom: 1px solid #f0f1f3; }
.pd-tab { position: relative; padding: 14px 2px; font-size: 14px; color: #555; cursor: pointer; user-select: none; }
.pd-tab:hover { color: #c8161d; }
.pd-tab.cur { color: #c8161d; font-weight: 600; }
.pd-tab.cur::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: #c8161d; border-radius: 2px;
}
.pd-tabpane { padding: 16px 18px 0; }

/* ---------- 图片全屏放大预览层（2026-10-26） ---------- */
.zs-lightbox {
  display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000;
  background: rgba(17, 24, 39, .82); cursor: zoom-out;
  align-items: center; justify-content: center; padding: 40px;
}
.zs-lightbox.show { display: flex; }
.zs-lightbox img {
  max-width: 92vw; max-height: 92vh; border-radius: 6px; background: #fff;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
}
.zs-lb-close {
  position: fixed; top: 14px; right: 26px; color: #fff;
  font-size: 36px; line-height: 1; cursor: pointer; user-select: none;
}
.pd-shopbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid #f0f1f3; border-radius: 8px;
  padding: 10px 14px; margin-top: 10px;
}
.pd-shopname {
  font-size: 13px; font-weight: 600; color: #1f2329;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.pd-shopscore { font-size: 12px; color: #8a94a6; margin-top: 0; }
/* 头部大白卡：内嵌左右两列 */
.pd-hero .pd-head { margin-bottom: 0; }
.pd-hero .pd-shopbar { background: #f7f8fa; border-color: #eef0f3; }
/* 详情页面板全部满屏（覆盖 form-panel 的 760px 限宽） */
.pd-full { max-width: none !important; }

/* ---------- 分段选项卡（付款明细 / 结算明细） ---------- */
.seg-tabs {
  display: inline-flex; background: #fff; border: 1px solid #eceef2;
  border-radius: 8px; padding: 4px; gap: 4px; margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.seg-tabs .seg {
  display: inline-block; padding: 7px 24px; border-radius: 6px;
  font-size: 13px; color: #555; text-decoration: none; cursor: pointer;
  line-height: 20px; transition: all .15s; user-select: none;
}
.seg-tabs .seg:hover { color: #c8161d; }
.seg-tabs .seg.active {
  background: #c8161d; color: #fff; font-weight: 600;
  box-shadow: 0 1px 4px rgba(200, 22, 29, .3);
}


/* ---------- 多条件栅格筛选栏（商品管理等条件较多的页面） ---------- */
.filter-grid { background: #fff; padding: 14px 16px; border-radius: 8px; margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; align-items: center; }
.filter-grid .f-item { display: flex; align-items: center; min-width: 0; }
.filter-grid .f-label { flex: 0 0 84px; font-size: 13px; color: #606266; text-align: right; padding-right: 8px; white-space: nowrap; }
.filter-grid .f-item input, .filter-grid .f-item select { flex: 1; min-width: 0; width: 100%; height: 34px; padding: 0 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.filter-grid .f-item input:focus, .filter-grid .f-item select:focus { outline: none; border-color: #c8161d; }
.filter-grid .f-pair { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.filter-grid .f-pair input { min-width: 0; padding: 0 6px; }
.filter-grid .f-sep { color: #c0c4cc; }
.filter-grid .dr-wrap { flex: 1; min-width: 0; }
.filter-grid .dr-input { width: 100% !important; min-width: 0 !important; }
.filter-grid .f-actions { grid-column: 3 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.filter-grid .f-actions .btn-primary, .filter-grid .f-actions .btn-default { height: 34px; padding: 0 20px; font-size: 13px; box-sizing: border-box; }

/* 工作台快捷入口 */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.quick { display: block; padding: 14px 16px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; transition: border-color .15s; }
.quick b { display: block; font-size: 14px; color: #333; margin-bottom: 4px; }
.quick span { font-size: 12px; color: #999; }
.quick:hover { border-color: #c8161d; text-decoration: none; }
.quick:hover b { color: #c8161d; }

/* 员工管理：左部门树 + 右员工列表 */
.emp-layout { display: flex; gap: 14px; align-items: flex-start; }
.emp-dept-panel { flex: 0 0 260px; }
.emp-main-panel { flex: 1; min-width: 0; }
.emp-tree-row { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 4px; color: #333; font-size: 13px; }
.emp-tree-row:hover { background: #f7f7f7; }
.emp-tree-row.on { background: #fdeaea; color: #c8161d; }
.emp-tree-row.on .emp-tree-name { color: #c8161d; font-weight: 600; }
.emp-tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333; }
.emp-tree-sub { padding-left: 14px; color: #666; }
.emp-tree-row em { font-style: normal; color: #999; font-size: 12px; }
.emp-tree-ops { display: none; gap: 6px; }
.emp-tree-row:hover .emp-tree-ops { display: inline-flex; }
.emp-tree-ops i { font-style: normal; cursor: pointer; color: #999; padding: 0 2px; }
.emp-tree-ops i:hover { color: #c8161d; }

/* 分页条：每页条数切换 */
.pager-size { height: 28px; padding: 0 8px; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; background: #fff; color: #555; cursor: pointer; }
.pager-size:focus { outline: none; }
.pager-size:hover { border-color: #c8161d; color: #c8161d; }