/* ============================================================
   运营日报统计 - 全局样式（Element Plus 默认配色）
   依赖库已本地化：public/static/lib/，无需外网
   ============================================================ */

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  background: #f5f7fa;
}
[v-cloak] { display: none; }

/* ---------- 登录页 ---------- */
.login-body {
  height: 100vh; display: flex; flex-direction: column;
  /* 字体栈与参考站一致：拉丁字符用 Verdana/Segoe UI，中文回退雅黑 */
  --el-font-family: Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--el-font-family);
  background:
    url("../img/login_bg.png") no-repeat 50% 58% / 150% auto,
    linear-gradient(135deg, #e8eefb 0%, #f4f8fd 48%, #e9f0fb 100%);
  position: relative; overflow: hidden;
}
.login-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 22px 32px;
}
.login-logo-img { height: 26px; width: auto; display: block; }
.login-main { flex: 1; display: flex; align-items: center; justify-content: center; }
/* #app 中间层撑满并纵向分布，保证卡片垂直居中、底栏贴底 */
body.login-body > #app { flex: 1; display: flex; flex-direction: column; min-height: 0; width: 100%; }
.login-card {
  display: flex; width: 800px; min-height: 460px;
  border-radius: 0; overflow: hidden; background: #fff;
  box-shadow: 0 12px 40px rgba(59, 103, 245, .12), 0 4px 12px rgba(0, 0, 0, .04);
}
.login-banner {
  position: relative; width: 380px; flex-shrink: 0; padding: 40px 34px;
  background: linear-gradient(165deg, #3b67f5 0%, #3460ef 55%, #2e54d8 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
/* 左侧面板背景：粒子连线网络（canvas），线条按粒子实时位置绘制 */
.login-banner .deco-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.login-quote {
  position: relative; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; line-height: 0; padding-top: 22px;
  margin-bottom: 18px;
}
.login-banner-title { position: relative; margin: 0 0 16px; font-size: 24px; font-weight: 600; letter-spacing: normal; }
.login-banner-text { position: relative; margin: 0; font-size: 12px; line-height: 1.8; color: rgba(255, 255, 255, .85); }
.login-panel { flex: 1; padding: 44px 46px 36px; display: flex; flex-direction: column; justify-content: center; }
.login-tabs { display: flex; align-items: baseline; gap: 18px; margin-bottom: 30px; }
.login-tab-active { font-size: 19px; font-weight: 700; color: #3b67f5; position: relative; padding-bottom: 10px; }
.login-tab-active::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 26px; height: 3px; border-radius: 2px; background: #3b67f5;
}
.login-form .el-form-item { margin-bottom: 20px; }
.login-form .el-input__wrapper { border-radius: 0; }
.login-form .el-input__inner { font-family: inherit; }
.login-remember { margin-bottom: 12px !important; }
.login-remember-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.login-forgot { font-size: 13px; color: #3b67f5; cursor: pointer; }
.login-forgot:hover { text-decoration: underline; }
.login-pwd-eye { cursor: pointer; color: #909399; }
.login-pwd-eye:hover { color: #3b67f5; }
.login-btn {
  width: 100%; height: 44px; font-size: 14px; border-radius: 0;
  background: #3b67f5; border-color: #3b67f5;
}
.login-btn:hover, .login-btn:focus { background: #5b8cff; border-color: #5b8cff; }
.login-footer { padding: 18px; text-align: center; font-size: 12px; color: #a8abb2; }
@media (max-width: 860px) {
  .login-banner { display: none; }
  .login-card { width: auto; margin: 0 16px; min-height: 0; }
}

/* ---------- 主布局 ---------- */
.layout { height: 100vh; }
.aside { background: #fff; border-right: 1px solid #e4e7ed; transition: width .3s; overflow: hidden; display: flex; flex-direction: column; }
.logo {
  height: 56px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #e4e7ed; cursor: pointer; position: relative;
}
/* 大/小 Logo 叠放同一点，靠透明度交叉过渡切换，避免展开动画走完后瞬切跳变 */
.logo-img, .logo-img-mini {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; transition: opacity .25s;
}
.logo-img { height: 26px; width: auto; opacity: 1; }
.logo-img-mini { height: 24px; width: auto; opacity: 0; }
.aside.collapsed .logo-img { opacity: 0; }
.aside.collapsed .logo-img-mini { opacity: 1; }
/* hover 变淡只作用于当前可见的那张，避免把隐藏中的另一张透出来 */
.aside:not(.collapsed) .logo:hover .logo-img { opacity: .7; }
.aside.collapsed .logo:hover .logo-img-mini { opacity: .7; }
/* 纯文字品牌标识（替代原 logo 图片）：展开显示全称，收起只显示 AI */
.logo-brand, .logo-brand-mini {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: block; white-space: nowrap; transition: opacity .25s;
  font-size: 16px; font-weight: 600; color: #3b67f5; letter-spacing: .5px;
}
.logo-brand { opacity: 1; }
.logo-brand-mini { opacity: 0; }
.aside.collapsed .logo-brand { opacity: 0; }
.aside.collapsed .logo-brand-mini { opacity: 1; }
.aside:not(.collapsed) .logo:hover .logo-brand { opacity: .7; }
.aside.collapsed .logo:hover .logo-brand-mini { opacity: .7; }
.aside .el-menu { border-right: none; flex: 1; overflow-y: auto; overflow-x: hidden; }
.aside .el-menu-item:not(.is-active):hover { background: #f5f7fa; }
.aside-collapse {
  flex: none; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; color: #606266; font-size: 14px; border-top: 1px solid #e4e7ed; user-select: none;
  transition: background .2s, color .2s;
}
.aside-collapse:hover { color: var(--el-color-primary); background: #f5f7fa; }
.aside-collapse .el-icon { flex: none; }
/* 文字跟随侧边栏宽度连续展开/收起，不再等动画结束才出现 */
.aside-collapse span {
  max-width: 80px; opacity: 1; white-space: nowrap; overflow: hidden;
  transition: max-width .3s, opacity .25s;
}
.aside.collapsed .aside-collapse span { max-width: 0; opacity: 0; }
.header {
  background: #fff; border-bottom: 1px solid #e4e7ed;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 56px;
}
.header h2 { margin: 0; font-size: 16px; color: #303133; font-weight: 600; }
.user-chip { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: #606266; font-size: 14px; outline: none; }
.main { padding: 16px; overflow: auto; background: #f5f7fa; }

/* ---------- 通用组件 ---------- */
.panel {
  background: #fff; border: 1px solid #e4e7ed; border-radius: 8px;
  padding: 16px; margin-bottom: 16px;
}
.panel-title { font-size: 14px; font-weight: 600; color: #303133; margin: 0 0 12px; }

.stat-card {
  background: #fff; border: 1px solid #e4e7ed; border-radius: 8px;
  padding: 18px 20px;
}
.stat-card .label { font-size: 13px; color: #909399; margin-bottom: 8px; }
.stat-card .value { font-size: 24px; font-weight: 700; color: #303133; font-family: Consolas, "Courier New", monospace; }
.stat-card .value .rmb { font-size: 0.72em; margin-right: 1px; color: inherit; } /* ￥ 缩小贴近数字，颜色同数字 */
/* 仪表盘 4 列紧凑卡：min-height 统一高度（部分卡带占比副行） */
.stat-card.compact { padding: 12px 14px; min-height: 94px; }
.stat-card.compact .label { margin-bottom: 4px; }
.stat-card.compact .value { font-size: 20px; }
.stat-card .sub { font-size: 12px; color: #909399; margin-top: 4px; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: nowrap; overflow-x: auto; }
.toolbar .spacer { flex: 1; }
.t-label { font-size: 13px; color: #909399; white-space: nowrap; }
.muted { color: #909399; font-size: 13px; }
/* 仪表盘快速筛选：面板挂在「月」「自定义」按钮下方（span 包裹后内部按钮命中 :first-child:last-child 全圆角规则，按连体样式手动接管） */
.dash-month-wrap { display: inline-flex; }
.el-radio-group .dash-month-wrap .el-radio-button:first-child:last-child .el-radio-button__inner { border-left: 0; border-radius: 0; }
.el-radio-group .dash-month-wrap:last-child .el-radio-button:first-child:last-child .el-radio-button__inner { border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0; }
.dash-month-panel { width: 200px; }
.dash-month-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
.dash-month-head .y { font-weight: 600; font-size: 14px; color: #303133; }
.dash-month-head .nav { width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 4px; cursor: pointer; color: #606266; user-select: none; }
.dash-month-head .nav:hover { background: #f5f7fa; color: var(--el-color-primary); }
.dash-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; }
.dash-month-grid span { height: 30px; line-height: 30px; text-align: center; border-radius: 4px; cursor: pointer; font-size: 13px; color: #303133; user-select: none; }
.dash-month-grid span:hover { background: #f5f7fa; }
.dash-month-grid span.on { background: var(--el-color-primary); color: #fff; }
.dash-month-grid span.off { color: #a8abb2; cursor: not-allowed; background: none; }
.dash-month-grid span.off:hover { background: none; }
/* 仪表盘「自定义」筛选：点击按钮弹出日期面板（气泡外壳透明化只留面板本体，选择器输入框隐藏）（2026-10-13） */
.el-popover.dash-custom-popper { padding: 0 !important; background: transparent; border: 0; box-shadow: none; width: auto !important; min-width: 0 !important; }
.dash-custom-popper .el-popper__arrow { display: none; }
.dash-custom-popper .el-picker__popper { position: static !important; transform: none !important; background: transparent; border: 0; box-shadow: none; }
.dash-custom-popper .el-date-editor--daterange { display: none; } /* 面板已 static 布局，输入框仅剩占位作用，display:none 消除行盒空隙 */
.dash-custom-popper .el-picker-panel { box-shadow: var(--el-box-shadow-light); }
/* combo-items 类已随产品表"组成"列移除（2026-10-11） */
/* 填报页产品名：单行显示，超长省略号折叠（悬停 title 可看全名） */
.prod-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 填报页：空行产品格占位（点击弹窗选择产品） */
.prod-pick { color: #a8abb2; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-pick:hover { color: var(--el-color-primary); }
/* 已填产品的行：产品名可点击换产品，hover 变蓝提示 */
.prod-change { cursor: pointer; }
.prod-change:hover { color: var(--el-color-primary); }
/* 填报页：整页 flex 布局，表格撑满视口剩余高度——横竖滚动条均外置（多维表格风格）
   overflow:clip 兜底：内部绝对定位元素（新增行气泡等）溢出页面时不再撑出浏览器级滚动条 */
.fill-page { display: flex; flex-direction: column; height: calc(100vh - 88px); margin-bottom: 0; position: relative; overflow: clip; }
/* 填报页是全屏工作区，去掉外层 panel 盒子的边框圈（白底与内边距保留，表格自身边框不受影响） */
.fill-page.panel { border: none; border-radius: 0; }
.fill-page .toolbar { flex: none; }
/* 填报页顶部实时汇总条：随下方单元格编辑即时重算（computed 依赖 rows） */
.fill-summary { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 10px; padding: 8px 14px; background: #f7f8fa; border: 1px solid #ebeef5; border-radius: 6px; }
.fill-summary .fs-item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.fill-summary .fs-label { font-size: 12px; color: #909399; }
.fill-summary .fs-val { font-size: 12px; font-weight: 600; color: #303133; font-variant-numeric: tabular-nums; }
.fill-summary .fs-val .rmb { font-size: 12px; font-weight: 400; color: #909399; }
.fill-summary .fs-int { font-weight: 500; }
.fill-summary .fs-pos { color: var(--el-color-success); }
.fill-summary .fs-neg { color: var(--el-color-danger); }
.fill-summary .fs-live { margin-left: auto; font-size: 12px; color: #c0c4cc; white-space: nowrap; }
/* 缩放区改横向 flex：表格 + 右侧外置竖向滚动条并排 */
/* gap 6px：表格与右侧外置滚动条之间留出空隙——滚动条紧贴时滑块滑到最右会压住表格最右列的边框线 */
.fill-zoom { flex: 1; min-height: 0; display: flex; gap: 6px; transform-origin: top left; }
.fill-table { flex: 1 1 auto; min-width: 0; }
/* 填报页：表格内"新增"哨兵行（始终在最后一行下方；整行可点击） */
.fill-table .el-table__body tr.fill-add-tr { cursor: pointer; }
/* 数据行底色：把每种行状态（常态 / CSS :hover / EP 的 JS hover-row / hover-cell）的底色一次性写死，
   同一行的四种状态取值完全一致 ⇒ hover 前后视觉零变化，且不可能再出现"某格忽灰忽白"。
   （EP 的 hover 是双通道：CSS :hover 与 JS 挂的 hover-row / td.hover-cell 类，二者在 zoom 缩放容器里
     可能各自出错/残留；固定列又是 background:inherit，任一通道漏改就会让单元格露出下层底色变灰。
     同时这里也保证固定列（sticky）始终有不透明底色，遮挡横向滚动时的下层内容） */
.fill-table .el-table__body tr > td.el-table__cell,
.fill-table .el-table__body tr:hover > td.el-table__cell,
.fill-table .el-table__body tr.hover-row > td.el-table__cell,
.fill-table .el-table__body tr > td.hover-cell { background-color: #fff; }
.fill-table .el-table__body tr.row-ck > td.el-table__cell,
.fill-table .el-table__body tr.row-ck:hover > td.el-table__cell,
.fill-table .el-table__body tr.row-ck.hover-row > td.el-table__cell { background-color: var(--el-color-primary-light-9); }
.fill-table .el-table__body tr.fill-add-tr > td.el-table__cell,
.fill-table .el-table__body tr.fill-add-tr:hover > td.el-table__cell,
.fill-table .el-table__body tr.fill-add-tr.hover-row > td.el-table__cell { background-color: #fafafa; }
.prod-add { color: #909399; cursor: pointer; user-select: none; white-space: nowrap; }
.prod-add:hover { color: var(--el-color-primary); }
/* 填报页：商品ID列（单元格整体点击弹窗设置；未设置提示 hover 变蓝；
   右侧 ↗ 小图标 hover 才显示，点击直接新标签页打开链接，与"点击改弹窗"分工） */
.gid-hint, .gid-text { color: #a8abb2; cursor: pointer; user-select: none; display: inline-block; max-width: calc(100% - 26px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.gid-hint:hover, .gid-text.is-empty:hover { color: var(--el-color-primary); }
.gid-text { color: #303133; }
.gid-text.is-empty { color: #a8abb2; }
.gid-open { display: none; float: right; margin-left: 4px; color: var(--el-color-primary); text-decoration: none; font-size: 13px; line-height: 1; padding: 2px 1px; }
.fill-cell:hover .gid-open { display: inline-block; }
.gid-open:hover { text-decoration: underline; }
/* 产品选择弹窗（表格）与 商品ID/链接设置弹窗 共用样式 */
.lp-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.pick-table .el-table__row { cursor: pointer; }
/* 行高压低：缩单元格上下内边距 */
.pick-table .el-table__row .el-table__cell { padding: 3px 0; }
/* 图片块级显示：上下间距对称（内联基线会把图片顶出下边距），水平居中 */
.pick-table .el-image { display: block; margin: 0 auto; }
.lp-fields { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lp-field { display: flex; align-items: center; gap: 8px; }
.lp-label { flex: none; width: 56px; font-size: 13px; color: #606266; text-align: right; }
.lp-label .req { color: var(--el-color-danger); font-style: normal; margin-left: 2px; }
.lp-open { color: var(--el-color-primary); text-decoration: none; }
.lp-open:hover { text-decoration: underline; }
/* 仪表盘链接维度表：链接列可点击跳转（缩略文本，完整地址见 title） */
.dash-link { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--el-color-primary); text-decoration: none; vertical-align: middle; }
.dash-link:hover { text-decoration: underline; }
/* 填报页：序号列——默认显示序号，鼠标悬停该格或已勾选时变复选框；勾选行淡蓝底 */
.idx-col .cell { display: flex; align-items: center; justify-content: center; }
/* 表格操作列：按钮一行排开，禁止换行 */
.op-nowrap .cell { white-space: nowrap; }
.idx-col .fill-cell { display: flex; align-items: center; justify-content: center; }
.idx-col .el-checkbox { height: auto; } /* 复选框默认 32px 高会撑高行 */
.idx-ck { display: none; }
.fill-table .el-table__body td.idx-col:hover .idx-ck { display: inline-flex; }
.fill-table .el-table__body td.idx-col:hover .idx-num { display: none; }
.fill-table .el-table__body tr.row-ck td.idx-col .idx-ck { display: inline-flex; }
.fill-table .el-table__body tr.row-ck td.idx-col .idx-num { display: none; }
.fill-table .el-table__body tr.row-ck > td.el-table__cell { background: var(--el-color-primary-light-9); }
/* 行高亮（点击单元格锁定所在行）：写在行底色四状态规则之后，特异性+顺序双保证 */
.fill-table .el-table__body tr.x-row > td.el-table__cell { background-color: #f5f7fa; }
/* 填报页：右键自定义菜单（替代浏览器原生菜单） */
.ctx-menu { position: fixed; z-index: 3000; min-width: 150px; padding: 4px; background: #fff; border: 1px solid #e4e7ed; border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.ctx-item { padding: 7px 12px; font-size: 13px; color: var(--el-color-danger); border-radius: 4px; cursor: pointer; white-space: nowrap; user-select: none; }
.ctx-item:hover { background: #f5f7fa; }
/* 填报页：产品选择弹窗 */
.picker-list { max-height: 380px; overflow: auto; margin-top: 10px; }
.picker-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; cursor: pointer; }
.picker-item:hover { background: #f5f7fa; }
.picker-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-cost { color: #909399; font-size: 13px; }
/* 填报页：Ctrl+滚轮缩放时的悬浮比例提示（非交互，自动消失） */
.scale-tip {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 30; pointer-events: none;
  background: rgba(48, 49, 51, .78);
  color: #fff; font-size: 14px; letter-spacing: .5px;
  padding: 8px 18px; border-radius: 16px;
}
.chart { width: 100%; }
/* 仪表盘趋势图：高度改由 CSS 控制（ResizeObserver 观察该元素，高度变化自动触发 ECharts resize） */
.trend-chart { height: 300px; }
/* 仪表盘统计卡片行：窄屏下卡片在行内换行，el-row 的 gutter 只提供水平间距，
   用 row-gap 补上换行产生的垂直间距（仅作用于行内换行，不叠加行块之间的 12px 外边距） */
.dash-card-row { row-gap: 12px; }
/* 仪表盘工具栏：小屏允许换行，去掉横向拖动（仅仪表盘生效，不影响填报页工具栏） */
.toolbar.dash-toolbar { flex-wrap: wrap; overflow-x: visible; }
/* 仪表盘筛选下拉（平台/店铺）整体可点，悬停显示小手 */
.toolbar.dash-toolbar .el-select__wrapper { cursor: pointer; }
/* 筛选栏图钉按钮：无外框裸图标（倾斜 45°）；默认深灰、hover 加深、激活变蓝 */
.dash-pin {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: none; background: transparent; color: #606266;
  cursor: pointer; transition: color .2s;
}
.dash-pin svg { width: 18px; height: 18px; transform: rotate(45deg); }
.dash-pin:hover { color: #303133; }
.dash-pin.on { color: var(--el-color-primary); }
/* 图钉开启：仅吸顶定位，top:0 吸住位置=自然位置，一滚动立即锁定、零位移
   （纯绘制、不参与布局，点击图钉零跳动） */
.toolbar.dash-toolbar.pinned {
  position: sticky; top: 0; z-index: 20;
}
/* 同色覆盖底：图钉开启即常驻（::before 外扩，纯绘制不参与布局），绝不靠滚动事件再补——
   Chrome 合成器滚动先行，scroll 事件驱动的 .stuck 底色晚 1~2 帧才画上，
   从顶部一甩滚轮首帧内容就会从透明筛选栏底下透出（闪一下后正常）；
   底色改为常驻后任何时刻都已挡在内容之上，竞态从根上消失。
   外扩尺寸：上 16px=.main 顶内边距（吸顶过渡期上方露出的缝隙）、
   下 12px=工具栏 margin-bottom（内容顶边一到即被盖住，不露接近过程）、
   左右 16px=.main 侧内边距；顶部未滚动时与页面背景同色融为一体，无悬浮感 */
.toolbar.dash-toolbar.pinned::before {
  content: ""; position: absolute; z-index: -1;
  top: -16px; bottom: -12px; left: -16px; right: -16px;
  background: #f5f7fa;
}
/* 滚动后（离开顶部）浮现下缘投影与滚过内容分层，回顶自动消失；
   底色已由 ::before 常驻承担，这里只管投影（晚一两帧无感知） */
.toolbar.dash-toolbar.pinned.stuck {
  box-shadow: 0 24px 16px -12px rgba(0, 0, 0, .22);
}
@media (max-width: 992px) {
  .trend-chart { height: 220px; }
}
/* 仪表盘新增图表容器：高度由 CSS 控制（容器尺寸变化由 ResizeObserver 触发 ECharts resize） */
.pie-chart { height: 280px; }
.bar-chart { height: 320px; }
/* 桑基图与单品 TOP10 同行左右并排：同高保持两面板底部对齐 */
.sankey-chart, .top-chart { height: 420px; }
/* 桑基图行（dash-duo-row）：两面板纵向 flex 等高——头部行高差/条件提示行不再影响面板总高，
   图表撑满面板剩余空间（底部/顶部对齐），min-height 只兜底不低于设计高度 */
.dash-duo-row { align-items: stretch; }
.dash-duo-row .el-col { display: flex; }
.dash-duo-row .panel { flex: 1; }
.dash-duo-row .sankey-chart, .dash-duo-row .top-chart { height: auto; flex: 1; min-height: 420px; }
/* 面板标题行：标题与右侧排序切换按钮两端对齐 */
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-head .panel-title { margin: 0; }
/* 渠道列表（参考抖音电商罗盘）：全渠道行加粗；平台行整行可点展开，指针提示 */
.channel-name.is-all { font-weight: 600; }
.channel-table .el-table__row.expanded .channel-name { font-weight: 600; }
.channel-table .el-table__row.is-expandable { cursor: pointer; }
/* 渠道排序下拉是 small(12px)，其弹出层选项默认 14px/34px 反而比框内字大，同步缩小 */
.el-select__popper.opt-small .el-select-dropdown__item { font-size: 12px; height: 24px; line-height: 24px; }
/* 渠道列表头部：显示盈亏开关 + 排序下拉并排 */
/* 指标卡环比副行：涨红跌绿（中式习惯） */
.stat-card .delta.up { color: #f56c6c; }
.stat-card .delta.down { color: #67c23a; }
@media (max-width: 992px) {
  .pie-chart { height: 220px; }
  .bar-chart { height: 240px; }
  .sankey-chart, .top-chart { height: 300px; }
  .dash-duo-row .sankey-chart, .dash-duo-row .top-chart { min-height: 300px; }
  .area-chart { height: 210px; }
}
@media (max-width: 768px) {
  .toolbar.dash-toolbar { gap: 8px; }
  /* 换行后 spacer 占满整行会把日期/筛选按钮单独挤到行尾，窄屏直接隐藏 */
  .toolbar.dash-toolbar .spacer { display: none; }
}
.detail-meta { margin: 0 0 10px; color: #606266; font-size: 13px; }

/* ---------- 日报填报宽表 ---------- */
/* 表头只有两行，压缩行高把空间让给数据行 */
.fill-table th.el-table__cell { padding: 6px 0; }
/* 表头与数据行内容全部居中（覆盖 Element Plus 的 is-left/is-right 列对齐） */
.fill-table th.el-table__cell,
.fill-table td.el-table__cell { text-align: center !important; }
/* 表头白底黑字，与数据行一致——Element 默认叶子表头白底，灰色来自分组表头行 thead.is-group（--el-fill-color-light），需更高特异性覆盖；表头文字默认灰（--el-text-color-secondary）改为主黑色 */
/* 表格边框加深一档：--el-table-border-color 默认 #ebeef5 → #dcdfe6（内外边框共用此变量，一处改全部生效） */
/* row-hover 底色设为 transparent 是为了 hover 零视觉变化；但 sticky 固定列需不透明底色遮挡下层内容，
   由上方 tr:hover 规则恢复常态底色，两处需配套保留 */
.fill-table { --el-table-header-bg-color: #fff; --el-table-header-text-color: #303133; --el-table-border-color: #dcdfe6; --el-table-row-hover-bg-color: transparent; }
.fill-table thead.is-group th.el-table__cell,
.fill-table .el-table__header-wrapper th.el-table__cell { background: #fff; }
/* 数据行高度：紧凑行高，多维表格式单元格编辑 */
.fill-table { --el-component-size-small: 30px; }
.fill-table .el-table__body td.el-table__cell { padding: 4px 0; }
/* 多维表格式单元格：可编辑列(td.fill-col)内边距归零，fill-cell 自身撑满整格——不溢出，不被悬停背景覆盖 */
.fill-table .el-table__body td.el-table__cell.fill-col { padding: 0; }
.fill-table .el-table__body td.el-table__cell.fill-col > .cell { padding: 0; }
.fill-cell { box-sizing: border-box; padding: 4px 12px; height: 32px; line-height: 22px; border: 2px solid transparent; user-select: none; }
/* 活动格蓝框画在 td 上（inset box-shadow 铺满整格含边框线内侧）；fill-cell 内框与格线之间有缝，弃用 */
.fill-table .el-table__body td.el-table__cell.sel-cell { box-shadow: inset 0 0 0 2px var(--el-color-primary); }
.fill-editor { width: 100%; height: 22px; box-sizing: border-box; border: none; outline: none; background: transparent; text-align: center; font: inherit; padding: 0; }
/* 表格内部不再显示任何原生滚动条和 Element 悬浮条（表头/数据由表格内部同步滚动），滚动全部由外置条驱动
   overscroll-behavior:none 禁掉 mac 触控板惯性滚到边界时的橡皮筋回弹（内容被拉出边界造成表头/内容拉开、错位），同时禁止滚动链传给页面 */
.fill-table .el-scrollbar__wrap { scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior: none; }
.fill-table .el-scrollbar__wrap::-webkit-scrollbar { display: none; }
.fill-table .el-scrollbar__bar.is-horizontal,
.fill-table .el-scrollbar__bar.is-vertical { display: none; }
/* 外置横向滚动条：独立元素放在底部滚动条区域内（拖动驱动表格滚动）
   不写 scrollbar-width/color 标准属性——Chrome 121+ 二者存在会令 ::-webkit-scrollbar 整体失效，
   mac 上 thin 渲染为 overlay 条导致滚动条静止时"消失"；轨道透明，只显示滑块 */
.h-scroll { flex: 1; min-width: 0; height: 8px; overflow-x: auto; overflow-y: hidden; }
.h-scroll::-webkit-scrollbar { display: block; height: 8px; }
.h-scroll::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 4px; border: 2px solid transparent; }
.h-scroll::-webkit-scrollbar-track { background: transparent; }
.h-scroll-inner { height: 1px; }
/* 外置竖向滚动条：独立元素贴在表格右侧（拖动驱动表格滚动），行程与表格竖向滚动 1:1（同理不用标准 scrollbar 属性）；轨道透明，只显示滑块 */
.v-scroll { flex: none; width: 8px; overflow-y: auto; overflow-x: hidden; }
.v-scroll::-webkit-scrollbar { display: block; width: 8px; }
.v-scroll::-webkit-scrollbar-thumb { background: #c0c4cc; border-radius: 4px; border: 2px solid transparent; }
.v-scroll::-webkit-scrollbar-track { background: transparent; }
.v-scroll-inner { width: 1px; }
/* 滚动条两端不显示箭头按钮（Windows 自定义滚动条默认会渲染 button） */
.h-scroll::-webkit-scrollbar-button,
.v-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* 底部滚动条独立区域：上方行数统计、下方横向滚动条（对齐多维表格风格）
   margin-top:-1px + ::before 画线：线条只画表格宽度（右侧让开 外置竖滚条8px+间隙6px=14px），
   并整体上移1px盖住表格视口最后一像素——滚到最底部时不会与最后一行单元格的 border-bottom 叠成2px */
.h-scroll-area { flex: none; display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 5px 16px; margin-top: -1px; position: relative; z-index: 5; }
.h-scroll-area::before { content: ''; position: absolute; top: 0; left: 0; right: 14px; height: 1px; background: #dcdfe6; }
.row-count { font-size: 12px; line-height: 14px; color: #909399; white-space: nowrap; user-select: none; }

/* 填报页计算过程气泡（calc-pop 自定义 fixed 定位，兼容 zoom 缩放坐标系）：单行不折行、加大字号内边距、加深边框投影与页面区分
   left/top 为气泡左上角视口坐标，由 placeCalcPop 锚定触发单元格计算并钳制在视口内，保证完整可见 */
.calc-pop { position: fixed; z-index: 3000; pointer-events: none; max-width: none; white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 8px 14px 9px; color: #303133; background: #fff; border: 1px solid #c0c4cc; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); border-radius: 4px; }
/* 气泡两行网格：第一行名称（含括号、不带运算符）、第二行数字+运算符，名称严格对齐在对应数字正上方 */
.calc-item { display: inline-flex; flex-direction: column; align-items: center; }
.calc-label { font-size: 11px; line-height: 1.3; color: #909399; white-space: nowrap; }
.calc-val { font-size: 13px; line-height: 1.4; font-weight: 600; white-space: nowrap; }
.calc-op-val { font-size: 13px; color: #909399; align-self: flex-end; padding-bottom: 3px; }
/* 表头公式气泡的单行公式文本：比单元格数字网格略小一号 */
.calc-formula { font-size: 12px; }
/* 自动计算列表头文字：箭头光标 + 禁止选中（鼠标按住拖不选字，点击弹公式气泡） */
.calc-head { cursor: default; user-select: none; }
/* 填报页整个表头区域（含分组头、普通列头）：一律禁止选中文字 */
.fill-table .el-table__header-wrapper { user-select: none; }
/* 填报页顶部日期/店铺选择框：小手光标，提示可点选而非输入 */
/* 日期/店铺选择框：整框（含内部 input）一律小手，禁止 I-beam 与拖选文字 */
.pick-cursor, .pick-cursor * { cursor: pointer !important; user-select: none; }
/* 填报页：数据行之外的空白区不显示表格边框——干掉贯穿整个表格高度的 4 条外框伪元素（左/右竖线、顶/底横线），边框改由数据单元格自身补齐 */
.fill-table.el-table--border::before,
.fill-table.el-table--border::after,
.fill-table.el-table--border .el-table__inner-wrapper::before,
.fill-table.el-table--border .el-table__inner-wrapper::after { display: none; }
/* Element Plus 在固定列+border 模式下渲染的边框补丁元素（真实 DOM，同样贯穿整个表格高度）——一并隐藏，否则左侧竖线仍在 */
.fill-table .el-table__border-left-patch,
.fill-table .el-table__border-bottom-patch,
.fill-table .el-table__border-right-patch { display: none; }
/* 数据区边框补齐：第一列左线 + 表头顶线（右线、行底线由单元格自带的 border-right / border-bottom 构成）
   左外框只给数据区第一列和表头第一行第一列——不能裸用 :first-child，否则会命中分组表头第二行的第一格
   （销售组下的"订单数"），其 border-left 与左邻"单位成本"（rowspan=2）的 border-right 叠加成 2px 显厚 */
.fill-table.el-table--border .el-table__body-wrapper .el-table__cell:first-child,
.fill-table.el-table--border .el-table__header-wrapper tr:first-child .el-table__cell:first-child { border-left: 1px solid var(--el-table-border-color); }
/* 表头顶线画在内层 header 表格上（跟随列宽总和）：wrapper 会撑满容器宽度，缩放后列宽总和小于容器时线会多出一截 */
.fill-table.el-table--border .el-table__header-wrapper .el-table__header { border-top: 1px solid var(--el-table-border-color); }
/* 新增行悬浮提示：hover 哨兵行"＋ 新增"格时在该格正下方居中显示的深色气泡（位置锚定格、不跟随鼠标）——样式完全对齐 Element 原生 dark tooltip（纯色 #303133 不透明，三角与气泡同色无叠加加深），非交互不挡点击 */
.add-tip {
  position: absolute; z-index: 45; pointer-events: none;
  transform: translateX(-50%);
  background: #303133; color: #fff;               /* el-popper.is-dark：--el-text-color-primary */
  font-size: 12px; line-height: 20px; padding: 5px 11px;
  border-radius: 4px; white-space: nowrap;         /* 原生 4px 圆角 */
  box-shadow: 0 0 12px rgba(0, 0, 0, .12);         /* --el-box-shadow-light */
  animation: addTipIn .12s ease-out;
}
.add-tip::before {
  content: ""; position: absolute; top: -3px; left: 50%;
  width: 8px; height: 8px; background: #303133;    /* 与气泡同色不透明，重叠区不再显色重 */
  transform: translateX(-50%) rotate(45deg);
}
@keyframes addTipIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%); }
}
/* 拖拽框选：范围内格淡蓝底（活动格保留蓝色边框） */
.fill-cell.inrange { background: var(--el-color-primary-light-9); }
/* 框选统计浮窗：右下角悬浮胶囊条，非交互不挡点击 */
.range-stats {
  position: absolute; right: 24px; bottom: 24px; z-index: 40;
  display: flex; align-items: center; pointer-events: none;
  background: #fff; border: 1px solid #e4e7ed; border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .10);
  padding: 8px 18px; font-size: 13px; color: #303133; white-space: nowrap;
}
.range-stats span + span { border-left: 1px solid #ebeef5; margin-left: 18px; padding-left: 18px; }

/* ---------- 单品维度分析/渠道列表框选（与填报页同交互，只读无编辑） ---------- */
/* 可框选格禁用原生文字选中（拖拽时由 mousedown preventDefault 兜底） */
.singles-table .el-table__body td.el-table__cell,
.channel-table .el-table__body td.el-table__cell { user-select: none; }
/* 框选范围内格淡蓝底：用背景图叠加而非 background-color，避免覆盖盈亏开关写在 td 上的行内背景色 */
.singles-table .el-table__body td.el-table__cell.s-inrange,
.channel-table .el-table__body td.el-table__cell.s-inrange {
  background-image: linear-gradient(var(--el-color-primary-light-9), var(--el-color-primary-light-9));
}
/* 锚点格/单格选中：inset 蓝框铺满整格含格线内侧（同填报页 sel-cell） */
.singles-table .el-table__body td.el-table__cell.s-sel,
.channel-table .el-table__body td.el-table__cell.s-sel { box-shadow: inset 0 0 0 2px var(--el-color-primary); }
/* 可框选列表头：pointer 提示可点选整列 */
.singles-table th.el-table__cell.s-head-sel,
.channel-table th.el-table__cell.s-head-sel { cursor: pointer; }
/* 维度分析表：表头拉高一点，内容行压低一点 */
.singles-table th.el-table__cell { padding: 10px 0; }
.singles-table .el-table__body td.el-table__cell { padding: 2px 0; }
/* 平台销售列表：表头高度与维度分析表一致 */
.channel-table th.el-table__cell { padding: 10px 0; }

/* ---------- 生图工作台（左输入 右结果） ---------- */
.ai-notice {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 10px 16px;
  font-size: 14px; color: var(--el-color-warning-dark-2);
  background: var(--el-color-warning-light-9);
  border: 1px solid var(--el-color-warning-light-5);
  border-radius: 10px;
}
.ai-layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 992px) { .ai-layout { grid-template-columns: 1fr; } }
/* 宽屏下撑满视口剩余高度（header 56px + main 上下 padding 32px），消除底部留白 */
@media (min-width: 993px) {
  .ai-layout-wrap { display: flex; flex-direction: column; min-height: calc(100vh - 88px); }
  .ai-layout { flex: 1; }
}
.ai-left { padding: 20px; }
/* 开始生成标题行：标题居左，额度居右上角 */
.ai-left-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ai-left-head .ai-left-title { margin-bottom: 0; }
.ai-left-title { font-size: 18px; font-weight: 600; color: var(--el-text-color-primary); margin-bottom: 14px; }
.ai-label { margin-bottom: 6px; }
.ai-left .el-textarea__inner { border-radius: 10px; font-size: 14px; line-height: 1.6; padding: 12px 14px; }
.ai-refs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ai-ref { position: relative; width: 64px; height: 64px; border-radius: 8px; border: 1px solid var(--el-border-color); }
.ai-ref .el-image { width: 100%; height: 100%; display: block; cursor: zoom-in; border-radius: 8px; overflow: hidden; }
.ai-ref-del {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; background: var(--el-color-danger);
  border-radius: 50%; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
.ai-ref:hover .ai-ref-del { opacity: 1; visibility: visible; }
.ai-opts { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ai-submit { width: 100%; margin-top: 12px; }
.ai-quota { font-size: 13px; color: var(--el-text-color-secondary); white-space: nowrap; }
.ai-quota b { color: var(--el-color-primary); font-weight: 600; }
.ai-quota b.is-zero { color: var(--el-color-danger); }
.ai-result { padding: 16px 20px; display: flex; flex-direction: column; }
.ai-result-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex: none; min-height: 32px; }
/* 头部按钮统一用 el-button size="small"；头部固定 min-height，模式切换不产生高度跳动 */
.ai-result-head .el-button + .el-button { margin-left: 0; }
.ai-result-head .muted, .ai-result-head .ai-quota { line-height: 20px; }
.ai-result-head .spacer { flex: 1; }
.ai-result-title { font-size: 16px; font-weight: 600; color: var(--el-text-color-primary); }
.ai-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; min-height: 520px; flex: 1; align-content: start; }
/* 空状态：占满整行并在剩余空间垂直水平居中 */
.ai-list > .el-empty { grid-column: 1 / -1; }
.ai-list.is-empty { align-content: center; }
.ai-card { border: 1px solid var(--el-border-color-lighter); border-radius: 10px; overflow: hidden; background: var(--el-fill-color-blank); transition: box-shadow .2s; }
.ai-card:hover { box-shadow: var(--el-box-shadow-light); }
/* 图片区固定 1:1，不管生成比例是什么；卡片整体约 3:4（1:1 图 + 信息区） */
.ai-card-img { position: relative; aspect-ratio: 1 / 1; background: var(--el-fill-color-light); overflow: hidden; }
.ai-card-img .el-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
/* 生成中占位：光影扫过 + 呼吸，清淡克制 */
.ai-doing { position: absolute; inset: 0; overflow: hidden; }
.ai-doing::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, #f4f6f9 0%, #eef1f5 50%, #f4f6f9 100%);
  animation: ai-breathe 2s ease-in-out infinite;
}
.ai-doing::after {
  content: ''; position: absolute; top: -25%; bottom: -25%; width: 42%; left: -60%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .65) 50%, transparent 100%);
  transform: skewX(-16deg);
  animation: ai-sweep 1.6s ease-in-out infinite;
}
@keyframes ai-breathe { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes ai-sweep { 0% { left: -60%; } 70%, 100% { left: 130%; } }
/* 占位中心：简单单色图片 icon */
.ai-doing { display: flex; align-items: center; justify-content: center; }
.ai-doing-icon { position: relative; z-index: 1; font-size: 30px; color: #c6ccd6; }
.ai-detail-doing .ai-doing-icon { font-size: 46px; }
.ai-fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--el-color-danger); font-size: 26px; }
/* 批量选择模式：未选中的卡片淡化突出进度，光标一律小手（不是放大镜） */
.ai-select-mode .ai-card:not(.is-selected) { opacity: .5; }
.ai-select-mode .ai-card-img .el-image,
.ai-select-mode .ai-card-img .el-image__inner { cursor: pointer; }
.ai-select-mode .ai-card.is-unselectable { opacity: .35; }
.ai-card.is-selected { border-color: var(--el-color-primary); box-shadow: inset 0 0 0 1px var(--el-color-primary); }
.ai-card-check {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid #fff; background: rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 18px; cursor: pointer; transition: all .15s;
}
.ai-card-check:hover { background: rgba(0, 0, 0, .45); }
.ai-card-check.is-on { background: var(--el-color-primary); border-color: var(--el-color-primary); color: #fff; }
/* 批量进度文字 */
.ai-select-count b { color: var(--el-color-primary); font-variant-numeric: tabular-nums; }
.ai-select-count b.is-zero { color: var(--el-text-color-primary); }
/* 上传图片库弹窗：缩略图网格 + 勾选角标 */
.ai-reflib { min-height: 200px; }
.ai-reflib-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.ai-reflib-item { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; }
.ai-reflib-item .el-image { width: 100%; height: 100%; display: block; }
.ai-reflib-item.is-picked { border-color: var(--el-color-primary); }
.ai-reflib-check {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #fff; background: rgba(0, 0, 0, .25);
  display: flex; align-items: center; justify-content: center;
  color: transparent; font-size: 15px; transition: all .15s;
}
.ai-reflib-check.is-on { background: var(--el-color-primary); border-color: var(--el-color-primary); color: #fff; }
.ai-reflib-broken {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center;
  color: var(--el-text-color-secondary); font-size: 12px; background: var(--el-fill-color-light);
}
.ai-reflib-broken .el-icon { font-size: 22px; }
.ai-reflib-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.ai-reflib-count { float: left; margin-right: auto; font-size: 13px; color: var(--el-text-color-secondary); }
.ai-reflib-count b { color: var(--el-color-primary); font-variant-numeric: tabular-nums; }
.ai-reflib-count b.is-zero { color: var(--el-text-color-primary); }
/* 卡片信息区：点击弹详情 */
.ai-card-meta { padding: 7px 9px 8px; font-size: 12px; cursor: pointer; transition: background .15s; }
.ai-card-meta:hover { background: var(--el-fill-color-light); }
.ai-card-line { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.ai-card-line .spacer { flex: 1; min-width: 0; }
.ai-card-time { margin-top: 3px; font-size: 11px; color: var(--el-text-color-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-card-prompt { font-size: 12px; color: var(--el-text-color-primary); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all; }
.ai-error { padding: 0 9px 6px; font-size: 12px; color: var(--el-color-danger); word-break: break-all; }
/* 生成记录卡片删除键（伪删除，仅打标）：默认淡灰，悬停变危险红 */
.ai-card-del { color: var(--el-text-color-secondary); cursor: pointer; flex: none; }
.ai-card-del:hover { color: var(--el-color-danger); }
/* 生图记录无限滚动哨兵：预留高度保证接近底部即触发 */
.ai-load-sentinel { display: flex; align-items: center; justify-content: center; min-height: 40px; }

/* 全部生成记录-仪表盘页签：状态指标卡 + 两张图表 */
.ai-dash-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.ai-dash-cards .stat-card { padding: 14px 16px; }
.ai-dash-cards .stat-card .value { font-size: 20px; }
.ai-dash-cards .stat-card .value.is-success { color: var(--el-color-success); }
.ai-dash-cards .stat-card .value.is-warning { color: var(--el-color-warning); }
.ai-dash-cards .stat-card .value.is-danger { color: var(--el-color-danger); }
.ai-dash-charts { display: flex; gap: 12px; flex: 1; min-height: 0; }
.ai-dash-chart { flex: 1; min-width: 0; min-height: 200px; overflow: hidden; background: #fff; border: 1px solid #e4e7ed; border-radius: 8px; }
/* 用户条形图指标切换（按张数/按花费）：悬浮在图表右上角，不占布局高度 */
.ai-dash-chart-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.ai-dash-chart-wrap .ai-dash-chart { width: 100%; }
.ai-chart-switch { position: absolute; top: 8px; right: 10px; z-index: 2; }

/* 整页弹性布局：页签内容撑满视口剩余高度（去掉 panel 默认下边距，否则正好多出 16px 触发外层滚动条）。
   必须用固定 height 而非 min-height：min-height 会被看板内容(指标卡+图表 min-height)撑破，
   外层 .main 出竖向滚动条；横向则是竖向滚动条出现后容器变窄、ECharts 画布仍按旧宽度绘制导致 */
.ai-all-flex { display: flex; flex-direction: column; height: calc(100vh - 88px); margin-bottom: 0; }
.ai-all-flex .el-tabs { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ai-all-flex .el-tabs__content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ai-all-flex .el-tabs__content > .el-tab-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
@media (max-width: 1200px) {
  .ai-dash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-dash-charts { grid-template-columns: 1fr; }
}

/* 全部生成记录页：日期范围选择器收窄——flex 项默认 min-width:auto 会被内部两个日期输入框的最小内容宽度(≈336px)顶住，必须放开 */
.ai-all-panel .toolbar .el-date-editor { flex-grow: 0; min-width: 0; }
/* 用户管理页：登录日志日期范围选择器同款收窄（行内 min-width 不生效，走类选择器） */
.user-panel .toolbar .el-date-editor { flex-grow: 0; min-width: 0; }
/* 筛选控件（时间范围/生成人）悬停应为手型，不是文本输入 I 型光标 */
.ai-all-panel .toolbar .el-select__wrapper,
.ai-all-panel .toolbar .el-select__wrapper *,
.ai-all-panel .toolbar .el-date-editor,
.ai-all-panel .toolbar .el-date-editor * { cursor: pointer; }

/* 生成详情弹窗：左图右信息，整体圆角 */
.ai-detail-dialog { border-radius: 14px; }
/* 弹窗头：标题右侧跟「再次生成」小按钮 */
.ai-detail-head { display: flex; align-items: center; gap: 10px; }
.ai-detail-head .ai-detail-title { font-size: var(--el-dialog-title-font-size, var(--el-font-size-extra-large)); color: var(--el-text-color-primary); }
.ai-detail { display: flex; gap: 16px; align-items: stretch; }
.ai-detail-left { flex: 1.4; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
/* 图片按原比例自适应：宽不超左栏、高不超 420px，超出方向留白，不裁切 */
.ai-detail-left .el-image { display: flex; max-width: 100%; border-radius: 10px; cursor: zoom-in; }
.ai-detail-left .el-image img { width: auto; height: auto; max-width: 100%; max-height: 420px; }
.ai-detail-doing { position: relative; width: 100%; max-width: 320px; aspect-ratio: 1 / 1; border-radius: 10px; }
.ai-detail-fail { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; padding: 40px 0; color: var(--el-color-danger); font-size: 13px; }
.ai-detail-fail .el-icon { font-size: 30px; }
.ai-detail-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; background: var(--el-fill-color-light); border-radius: 12px; font-size: 13px; line-height: 1.6; }
.ai-detail-block { min-width: 0; }
.ai-detail-label { font-size: 12px; color: var(--el-text-color-secondary); margin-bottom: 4px; }
.ai-detail-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-detail-ref { width: 56px; height: 56px; border-radius: 8px; cursor: zoom-in; }
/* 参考图缩略图悬停出现「用作参考图」角标，点击把该图加入工作台参考图列表 */
.ai-detail-ref-item { position: relative; width: 56px; height: 56px; border-radius: 8px; }
.ai-detail-ref-use { position: absolute; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; height: 18px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; line-height: 18px; border-radius: 0 0 8px 8px; cursor: pointer; }
.ai-detail-ref-item:hover .ai-detail-ref-use { display: flex; }
/* 仪表盘数值表（渠道/单品/SKU/链接）：单元格一律不换行——税费/GMV/管理费等窄列遇大数
   在字体偏大或系统缩放时会折行；文字列均有 show-overflow-tooltip 自带省略，不受影响 */
.singles-table .cell, .channel-table .cell { white-space: nowrap; }

/* loading 转圈抗卡顿：EP 默认 SVG 转圈的两层动画里，stroke-dash 呼吸只能跑主线程（stroke 属性
   不可合成），主线程被图表初始化/表格渲染阻塞时"转一下停一下"；而给 SVG 加 will-change 提升合成
   在 Chromium 上又会直接把旋转搞死（SVG 合成动画的坑）。故整体换掉 SVG：纯 div 圆环 +
   transform 旋转动画，普通元素上合成器驱动最稳，主线程卡住也照转 */
.el-loading-spinner .circular { display: none; }
.el-loading-spinner::before {
  content: '';
  display: inline-block;
  width: 42px; height: 42px;
  box-sizing: border-box;
  border: 3px solid var(--el-color-primary);
  border-right-color: transparent;
  border-radius: 50%;
  animation: dash-spin .8s linear infinite;
  will-change: transform;
}
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* 详情弹窗提示词：1 行显示 1 行、3 行内完整展示，超过 3 行出现滚动条 */
.ai-detail-prompt { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.ai-detail-prompt span {
  flex: 1; min-width: 0; line-height: 1.6;
  max-height: 4.8em; overflow-y: auto;
  overflow-wrap: anywhere; word-break: break-word;
}
.ai-detail-time { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--el-border-color); }
.ai-detail-time + * { margin-top: 0; }

/* 产品图片上传：上传框与缩略图缩小到默认(148px) 1/4 面积 */
.prod-img-upload .el-upload--picture-card { width: 74px; height: 74px; }
.prod-img-upload .el-upload--picture-card .el-icon { font-size: 18px; }
.prod-img-upload .el-upload-list--picture-card .el-upload-list__item { width: 74px; height: 74px; }

/* 弹窗内自定义缩略图列表：拖拽排序 / hover 放大删除 / 首图标记 */
.prod-img-list { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.prod-img-item { position: relative; width: 74px; height: 74px; border: 1px solid var(--el-border-color); border-radius: 6px; overflow: hidden; cursor: grab; background: var(--el-fill-color-light); }
.prod-img-item.is-dragging { opacity: .45; border-style: dashed; }
.prod-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.prod-img-mask { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: rgba(0,0,0,.45); color: #fff; font-size: 16px; opacity: 0; transition: opacity .15s; }
.prod-img-item:hover .prod-img-mask { opacity: 1; }
.prod-img-mask .el-icon { cursor: pointer; }
.prod-img-mask .el-icon:hover { color: var(--el-color-primary-light-7); }
.prod-img-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.72); color: var(--el-color-primary); font-size: 20px; }
.prod-img-first { position: absolute; left: 0; top: 0; background: var(--el-color-primary); color: #fff; font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 0 0 4px 0; }

/* 下拉选择框 hover 显示小手 */
.el-select .el-input__inner,
.el-select .el-input__wrapper,
.el-select .el-select__wrapper { cursor: pointer; }

/* 产品列表图片列：缩略图在单元格内水平垂直居中 */
.col-prod-img .cell { display: flex; align-items: center; justify-content: center; }
.col-prod-img .cell .el-image { display: block; }


/* ================= 生图图片标签（TODO #14） ================= */
/* 详情弹窗标签区：已打标签芯片 + 「添加标签」胶囊按钮（点击弹窗选择/创建） */
.ai-detail-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ai-tag-chip { position: relative; display: inline-block; padding: 2px 10px; font-size: 12px; line-height: 20px; border-radius: 999px;
  background: var(--el-fill-color); color: var(--el-text-color-regular); border: 1px solid transparent; cursor: pointer; user-select: none; }
.ai-tag-chip:hover { color: var(--el-color-primary); }
.ai-tag-chip.is-on { background: var(--el-color-primary-light-9); color: var(--el-color-primary); border-color: var(--el-color-primary-light-7); font-weight: 600; }
/* 红叉默认隐藏，hover 时悬浮在胶囊右上角（红底小圆 ×，不占胶囊内部空间，仿参考图 hover 角标） */
.ai-tag-chip .ai-tag-x { position: absolute; right: -5px; top: -5px; display: none; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; background: var(--el-color-danger); color: #fff; font-size: 10px; cursor: pointer;
  box-shadow: 0 0 0 2px #fff; z-index: 1; }
.ai-tag-chip:hover .ai-tag-x { display: inline-flex; }
/* 「添加标签」胶囊按钮：虚线边框，hover 变主题色 */
.ai-tag-add-btn { display: inline-flex; align-items: center; gap: 3px; padding: 2px 12px; font-size: 12px; line-height: 20px;
  border: 1px dashed var(--el-border-color); border-radius: 999px; color: var(--el-text-color-secondary); cursor: pointer; user-select: none; }
.ai-tag-add-btn:hover { color: var(--el-color-primary); border-color: var(--el-color-primary); }
.ai-tag-add-btn .el-icon { font-size: 12px; }
/* 批量打标弹窗：多选搜索下拉通栏；提示行左右分布（文案 + 管理入口） */
.ai-tag-multi { width: 100%; }
.ai-tagpick-hint { margin-top: 10px; font-size: 12px; color: var(--el-text-color-secondary); display: flex; align-items: center; justify-content: space-between; }
/* 下拉里的「创建标签」选项：主题色加号，明显区别于已有标签 */
.ai-tag-create { display: inline-flex; align-items: center; gap: 4px; color: var(--el-color-primary); font-weight: 600; }
/* 标签管理弹窗：搜索 + 圆角卡片列表（胶囊预览 / 张数 / 行内操作） */
.ai-tag-manage-list { max-height: 380px; overflow-y: auto; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.ai-tag-manage-item { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 10px; background: var(--el-fill-color-light); transition: background .15s; }
.ai-tag-manage-item:hover { background: var(--el-fill-color); }
.ai-tag-manage-item .ai-tag-chip { cursor: default; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-tag-manage-cnt { margin-left: auto; font-size: 12px; color: var(--el-text-color-secondary); white-space: nowrap; }
.ai-tag-manage-ops { display: flex; gap: 2px; white-space: nowrap; }

/* ============================================================
   手机端适配（≤768px 生效，桌面端零影响）
   侧边栏抽屉化 + 仪表盘筛选/指标卡/弹窗窄屏适配
   ============================================================ */
/* 头部左侧容器：汉堡 + 标题（桌面端就是标题本身，视觉无变化） */
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-left h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 汉堡按钮：桌面隐藏，手机端显示 */
.m-hamburger { display: none; }
/* 抽屉遮罩：桌面隐藏，手机端由 .show 控制显隐 */
.aside-mask { display: none; }
@media (max-width: 768px) {
  /* ---------- 布局壳：侧边栏改抽屉浮层 ---------- */
  .m-hamburger {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; width: 34px; height: 34px; margin: 0 0 0 -7px; padding: 0;
    border: none; background: transparent; color: #303133; font-size: 20px; cursor: pointer;
  }
  .m-hamburger:hover { color: var(--el-color-primary); }
  /* 侧边栏脱离文档流改为左侧抽屉：默认推出屏幕外，.mobile-open 滑入 */
  .aside {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 2001;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  .aside.mobile-open { transform: translateX(0); box-shadow: 8px 0 24px rgba(0, 0, 0, .18); }
  .aside-mask.show { display: block; position: fixed; inset: 0; z-index: 2000; background: rgba(0, 0, 0, .4); }
  .aside-collapse { display: none; } /* 底部「收起菜单」与汉堡功能重复，手机端隐藏 */
  .header { padding: 0 12px; }
  .header h2 { font-size: 15px; }
  .user-chip { font-size: 13px; }
  .main { padding: 10px; }

  /* ---------- 通用：面板/弹窗 ---------- */
  .panel { padding: 12px; margin-bottom: 12px; }
  /* 面板标题行允许换行（标题 + 排序切换按钮挤不下时折行而不是溢出） */
  .panel-head { flex-wrap: wrap; gap: 8px; }
  /* 修改密码等弹窗不超屏 */
  .el-dialog { max-width: 92vw; }

  /* ---------- 仪表盘：筛选栏 ---------- */
  /* 店铺/负责人/产品筛选放开行内定宽，两两一行铺满（!important 覆盖模板行内 style） */
  .toolbar.dash-toolbar .el-cascader,
  .toolbar.dash-toolbar > .el-select { width: calc(50% - 4px) !important; }
  .toolbar.dash-toolbar .el-radio-group { max-width: 100%; }
  /* 吸顶筛选栏的同色底外扩跟随 .main 内边距（16px → 10px），否则吸顶时四周露缝隙 */
  .toolbar.dash-toolbar.pinned::before { top: -10px; bottom: -12px; left: -10px; right: -10px; }
  /* 自定义日期面板（双月日历约 646px 宽）超屏：外壳限制宽度内横向滚动，功能完整保留 */
  .el-popover.dash-custom-popper { max-width: calc(100vw - 20px) !important; overflow-x: auto; }

  /* ---------- 仪表盘：指标卡 ---------- */
  .stat-card.compact { padding: 10px 12px; min-height: 0; }
  .stat-card.compact .value { font-size: 16px; } /* 两列卡片宽度约 160px，20px 等宽字放不下完整金额 */
  /* 同一行两张卡等高：副行文字换行行数不同导致左右高低不齐，卡片撑满列高对齐。
     直接子元素统一 flex:1——该类名同时被饼图行复用，只让 .stat-card 撑满会把 .panel
     收缩成内容宽（图表面板只剩半屏），故全部直接子元素都撑满 */
  .dash-card-row .el-col { display: flex; }
  .dash-card-row .el-col > * { flex: 1; }

  /* ---------- 仪表盘：图表更矮一档（叠加在 992px 断点之上） ---------- */
  .trend-chart { height: 200px; }
  .pie-chart { height: 210px; }
  .bar-chart { height: 220px; }
  .sankey-chart { height: 280px; }
  /* 框选统计浮窗贴近边缘 */
  .range-stats { right: 12px; bottom: 12px; padding: 6px 12px; }
  .range-stats span + span { margin-left: 10px; padding-left: 10px; }
}