:root{
  /* ================= 配色方案：霓虹深空（参考 ECOM HELPER 2.1）=================
   * 设计原则：近黑基底 + 霓虹青/品红/紫三类强调色 + 强光晕。
   * 霓虹色只用于「强调 / 光晕 / 描边 / 数据高亮」，大面积填充仍用低亮度深色，
   * 保证数据密集型界面长时间可读（全部前景色已通过 WCAG AA 4.5:1 校验）。 */
  --bg:#07070E;
  --bg-grad:linear-gradient(180deg,#07070E 0%,#0B0B18 100%);
  --card:#12121D;
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.045);
  --text:#EDEDF7;
  --text-2:#A3A3C0;
  --text-3:#7C7C9C;
  /* 主色：霓虹青（交互 / 主按钮 / 链接） */
  --primary:#22D3EE;
  --primary-deep:#0E7490;
  --primary-soft:rgba(34,211,238,.14);
  --primary-txt:#67E8F9;
  /* 霓虹品红（品牌渐变终端 / 高亮） */
  --magenta:#EC4899;
  --magenta-bright:#FF4DA6;
  --magenta-soft:rgba(236,72,153,.16);
  /* 霓虹紫（次级强调 / 数据卡片） */
  --violet:#A855F7;
  --violet-bright:#C084FC;
  --violet-txt:#C4B5FD;
  --violet-soft:rgba(168,85,247,.16);
  /* 语义色（沿用原语义映射，仅调色相至霓虹家族） */
  --green:#34E5B0;                       /* 盈利 / 正向 */
  --green-soft:rgba(52,229,176,.14);
  --green-txt:#5EEAD4;
  --red:#FF5470;                         /* 亏损 / 负向 */
  --red-soft:rgba(255,84,112,.15);
  --red-txt:#FDA4AF;
  --amber:#FFB020;                       /* 提醒 */
  --amber-soft:rgba(255,176,32,.15);
  --amber-txt:#FCD34D;
  --radius:14px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 16px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.2);
  --shadow-lg:0 4px 10px rgba(0,0,0,.4),0 18px 40px rgba(0,0,0,.5);
  --glass:rgba(18,18,30,.72);
  --glass-strong:rgba(22,22,38,.86);
  --glass-brd:rgba(124,110,255,.18);
  --blur:blur(18px) saturate(1.4);
  /* 品牌渐变：青 → 紫 → 品红（白字全程 ≥4.7:1） */
  --primary-grad:linear-gradient(120deg,#0E7490 0%,#7C3AED 52%,#C026D3 100%);
  /* 次级强调渐变：紫 → 品红 → 玫红（去掉青色，与主按钮形成冷暖区分）
   * 白色文字对比度全程 ≥4.70:1，已逐档校验 */
  --accent-grad:linear-gradient(120deg,#7C3AED 0%,#C026D3 50%,#E11D48 100%);
  /* 品牌名渐变字（浅色档位，供 background-clip:text 使用） */
  --brand-txt-grad:linear-gradient(92deg,#67E8F9 0%,#A5B4FC 42%,#C084FC 66%,#F0ABFC 100%);
  --cyan-grad:linear-gradient(135deg,#0E7490,#22D3EE);
  --green-grad:linear-gradient(135deg,#0E9F6E,#34E5B0);
  --amber-grad:linear-gradient(135deg,#D97706,#FFB020);
  --violet-grad:linear-gradient(135deg,#7C3AED,#A855F7);
  --magenta-grad:linear-gradient(135deg,#BE185D,#EC4899);
  --ease:cubic-bezier(.2,.7,.3,1);
  --side:232px;
  /* 二级导航行距：行高 + gap 两个值共同决定。
   * 全屏侧栏与窄屏下拉浮层共用这两个令牌，只改这里即可全局同步；
   * 窄屏因为 .nav-item 被压到 32px，二级项需要显式写回 --nav-sub-h。 */
  --nav-sub-h:26px;
  --nav-sub-gap:2px;
  /* ---------- 动效系统（UI/UX Pro Max 规范）----------
   * 150–300ms 微交互 / ease-out 进入 / transform+opacity 优先（避免触发重排）
   * 统一时长阶梯：xs 快反馈 · sm 控件 · md 卡片 · lg 大面积 */
  --dur-xs:120ms;
  --dur-sm:170ms;
  --dur-md:230ms;
  --dur-lg:320ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.5,0,.75,0);
  --ease-spring:cubic-bezier(.34,1.32,.44,1);
  /* 分层阴影阶梯：越靠前的层越"浮"，交互时逐级抬升 */
  --shadow-1:0 1px 2px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.24);
  --shadow-2:0 2px 4px rgba(0,0,0,.3),0 8px 20px rgba(0,0,0,.36);
  --shadow-3:0 6px 14px rgba(0,0,0,.36),0 20px 46px rgba(0,0,0,.46);
  /* 霓虹光晕：主色 / 品红 / 紫，用于聚焦、激活与卡片强调 */
  --glow-primary:0 0 0 1px rgba(34,211,238,.30),0 6px 22px rgba(34,211,238,.28);
  --glow-magenta:0 0 0 1px rgba(236,72,153,.30),0 6px 22px rgba(236,72,153,.26);
  --glow-violet:0 0 0 1px rgba(168,85,247,.30),0 6px 22px rgba(168,85,247,.26);
  --ring:0 0 0 3px rgba(34,211,238,.24);
  /* 表格：全部使用不透明底色，避免 sticky 冻结列在横向滚动时透出下层内容产生"模糊重影" */
  --table-base:#0C0C17;
  --table-head:#14141F;
  --table-row:#101019;
  --table-hover:#191926;
  --table-group-a:#171730;
  --table-group-b:#121220;
  --table-group-hover-a:#1E1E3C;
  --table-group-hover-b:#161628;
  --table-edge:8px 0 12px -8px rgba(0,0,0,.6);
  /* 图表：双轴折线配色（青 / 薄荷） */
  --chart-spend:#22D3EE;
  --chart-roi:#FCD34D;   /* 与 ROI 指标卡数值同色（琥珀） */
  --chart-grid:rgba(124,124,156,.18);
  --chart-axis:#7C7C9C;
}
*{box-sizing:border-box}
/* 关键：类选择器（如 .mask{display:flex}）优先级高于 UA 的 [hidden]{display:none}，
   会导致带 hidden 属性的弹窗仍然显示并拦截全屏点击，必须强制覆盖 */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  /* 极光底：外圈霓虹 + 内容区背后的光斑。
   * 内容区的磨砂玻璃层会把这些光斑雾化，从而形成"高级模糊背景"的效果，
   * 所以这里特意在内容列（38% 26% / 76% 58% / 22% 74%）也铺了光。 */
  background:
    radial-gradient(880px 600px at 8% -10%,rgba(34,211,238,.20),transparent 60%),
    radial-gradient(760px 540px at 96% 4%,rgba(236,72,153,.18),transparent 58%),
    radial-gradient(900px 700px at 62% 112%,rgba(168,85,247,.20),transparent 62%),
    radial-gradient(760px 560px at 34% 22%,rgba(34,211,238,.20),transparent 63%),
    radial-gradient(720px 560px at 80% 56%,rgba(168,85,247,.20),transparent 63%),
    radial-gradient(600px 460px at 20% 76%,rgba(236,72,153,.15),transparent 61%),
    radial-gradient(560px 420px at 30% 88%,rgba(34,211,238,.08),transparent 60%),
    linear-gradient(180deg,#07070E 0%,#0B0B18 100%);
  background-attachment:fixed;
  color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p{margin:0}
button{font-family:inherit}
/* 键盘可达性：鼠标点击不显示焦点环，键盘 Tab 才显示 */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}
button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
/* 输入类控件：焦点环统一只用 box-shadow（= --ring），不叠加 outline。
 * 原因：这条规则原先写作 input:focus-visible（特异性 0,1,1），
 * 而各输入框"压掉 outline"的能力并不一致 ——
 *   · .field input 为 (0,1,1) 且位置更靠后 → 压得住 ✓
 *   · .sr-sku 只有 (0,1,0) → 压不住 ✗
 * 于是「SKU 名称」等输入框在聚焦时多出一圈 2px 亮青描边，
 * 看起来比其它输入框"大一圈"，与整体不协调。
 * 这里用 :where() 把自身特异性降到 0，只关掉 outline，
 * 不会反过来盖掉各输入框自己的 border-color / background 焦点规则。 */
:where(input,select,textarea):focus-visible{outline:none}
/* 兜底：没有自带焦点样式的输入控件（下拉、日期、复选等）
 * 也给出统一的柔和焦点环 —— 无障碍要求焦点必须可见。 */
:where(input,select,textarea):focus{box-shadow:var(--ring)}
/* 数字统一等宽，表格/卡片跳动时不再左右"抖" */
.num,td.num,kpiCard,.k-value,.hs-value,.lc-item .v,.cr-box .v,.sp-num,.sp-pnum,.tp-num,.rp-num b,.h-val,.sc-row b,.r-num{font-variant-numeric:tabular-nums}

/* ---------- 登入过渡：接续登录页的渐隐 ----------
 * 登录页淡出到黑场，工作台再从黑场淡入 —— 两端共用同一片黑，
 * 整段读起来是一次连续的淡化（原先用霓虹渐变做"光晕铺屏"，
 * 现已按反馈改成纯渐隐）。
 * 从 login.html 跳过来时 <html> 上已带 enter-in 类（见 index.html 头部的
 * 同步脚本，避免首帧闪一下再盖上去），这里先让遮罩实心显示、不参与过渡；
 * app.js 移除该类后才按 .6s 淡出，露出工作台。
 * 直接打开工作台（不经登录页）时不会带这个类，遮罩始终不可见。 */
.enter-veil{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:0;
  /* 与登录页的淡出同为「快」档 .16s：整段过渡是两半拼起来的，
   * 各占一半才能把「点登录 → 看见工作台」压到半秒级。改这里要同步看 login.css。 */
  transition:opacity .16s cubic-bezier(.4,0,.2,1);
  background:#000;
}
html.enter-in .enter-veil{opacity:1;transition:none}
/* 工作台与遮罩**同时**淡（不再给 .app 加延迟）：
 * 之前遮罩淡出 .6s、内容再延后 .1s 起步，两头加起来就是 700ms，
 * 是"进得太慢"的主要来源。同时淡既更快，观感上也是干净的一次交叉溶解。 */
html.enter-in .app{opacity:0}
.app{transition:opacity .16s cubic-bezier(.4,0,.2,1)}

/* ---------- 无障碍：削弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  .enter-veil{transition:opacity .08s linear}
  .app{transition:opacity .08s linear}
}

/* ---------- 质感基础：滚动条 / 选中态 ---------- */
::selection{background:rgba(34,211,238,.18);color:var(--text)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(124,124,156,.34);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(124,124,156,.55);background-clip:padding-box}
*{-webkit-tap-highlight-color:transparent}
input,select,button,textarea{transition:border-color var(--dur-sm) var(--ease),box-shadow var(--dur-sm) var(--ease),background var(--dur-sm) var(--ease),color var(--dur-sm) var(--ease)}

/* ================= 布局 ================= */
.app{display:flex;min-height:100vh}

/* ---------- 侧边栏 ---------- */
.sidebar{
  width:var(--side);flex:none;
  background:linear-gradient(180deg,rgba(18,18,30,.9),rgba(11,11,22,.92));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-right:1px solid var(--line-soft);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
/* 右缘霓虹光带：青 → 紫 → 品红，呼应参考图的发光轮廓 */
.sidebar::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.5) 18%,rgba(168,85,247,.45) 52%,rgba(236,72,153,.5) 82%,transparent);
  opacity:.55}
.side-brand{display:flex;align-items:center;gap:14px;padding:18px 18px 16px;border-bottom:1px solid var(--line-soft)}
.logo{
  width:38px;height:38px;border-radius:11px;flex:none;
  background:var(--primary-grad);color:#fff;
  border:1px solid rgba(255,255,255,.14);
  font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(34,211,238,.28),0 2px 8px rgba(168,85,247,.22);
  transition:box-shadow var(--dur-md) var(--ease),transform var(--dur-md) var(--ease-out);
}
.logo:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(34,211,238,.4),0 4px 14px rgba(236,72,153,.3)}
.side-brand-txt{display:flex;flex-direction:column;gap:4px;overflow:hidden}
/* 工作台名称：渐变字（青 → 紫 → 品红），呼应参考图的品牌字处理。
 * 字号 14 → 18px、字重 700、字距 +0.3px，让品牌名成为侧栏的视觉主锚点。
 * 各档位在近黑底上对比度 10.9~13.9:1，远超 AA。 */
.side-brand-txt b{
  font-size:18px;font-weight:700;letter-spacing:.3px;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--brand-txt-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(168,85,247,.4));
}
/* 版本行：颜色与侧栏导航文字保持一致（--text-2 / #A3A3C0），
 * 读作同一套文本层级的辅助信息，不再抢品牌名的视觉焦点。
 * 字号 11.5 → 10.5px，字重 600 → 500，与导航的常规字重统一。 */
.side-brand-txt span{
  font-size:10.5px;font-weight:500;letter-spacing:.4px;line-height:1.35;
  color:var(--text-2);
}

.nav{padding:10px;display:flex;flex-direction:column;gap:2px;flex:1;overflow:auto}
.nav-item{
  position:relative;
  display:flex;align-items:center;gap:10px;height:38px;padding:0 12px;
  border:none;background:transparent;border-radius:9px;cursor:pointer;overflow:hidden;
  font-size:13.5px;color:var(--text-2);text-align:left;
  transition:background var(--dur-sm) var(--ease),color var(--dur-sm) var(--ease),transform var(--dur-xs) var(--ease-out),box-shadow var(--dur-sm) var(--ease);
}
.nav-item:hover{background:rgba(255,255,255,.07);color:var(--text);transform:translateX(2px)}
.nav-item:active{transform:translateX(2px) scale(.985)}
.nav-item.active{background:var(--primary-soft);color:var(--primary-txt);font-weight:600;transform:none;
  box-shadow:inset 0 0 0 1px rgba(34,211,238,.24),0 2px 12px rgba(34,211,238,.14)}
.nav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--primary-grad);box-shadow:0 0 10px rgba(34,211,238,.6);
  animation:navAccent var(--dur-md) var(--ease-out)}
@keyframes navAccent{from{height:4px;opacity:0}to{height:18px;opacity:1}}
.ni-ico{width:18px;text-align:center;font-size:13px;opacity:.85;transition:transform var(--dur-sm) var(--ease-spring)}
.nav-item:hover .ni-ico{transform:scale(1.12)}
.nav-item.active .ni-ico{opacity:1;filter:drop-shadow(0 0 6px rgba(34,211,238,.5))}
.ni-badge{
  margin-left:auto;min-width:20px;height:18px;padding:0 6px;border-radius:9px;
  background:rgba(255,255,255,.06);color:var(--text-3);font-size:11px;display:flex;align-items:center;justify-content:center;
}
.nav-item.active .ni-badge{background:rgba(34,211,238,.18);color:var(--primary-txt)}

/* ---------- 侧栏分级：一级栏目 + 二级列表 ---------- */
/* 外层容器：既是"按钮 + 二级列表"的布局盒，也是二级列表绝对定位的参照物
 * （窄屏下拉时 .nav-sub 要挂在按钮正下方，而它是按钮的兄弟节点） */
.nav-group-wrap{position:relative;display:flex;flex-direction:column;gap:2px}
/* 一级栏目（可展开）：右侧箭头随展开态旋转 */
.nav-group .ng-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ng-caret{
  margin-left:auto;flex:none;line-height:1;color:var(--text-3);
  /* 箭头现在是"展开 / 收起"的唯一入口，所以：
   *  · 字号 10 → 13px 并加 5px 内边距，把点击热区从 ~10px 撑到 ~23px；
   *  · margin-right 把放大后的箭头整体往左收一点，不贴住按钮右缘。 */
  font-size:13px;padding:5px;margin-right:3px;border-radius:7px;cursor:pointer;
  transition:transform var(--dur-md) var(--ease-out),color var(--dur-sm) var(--ease),
    background var(--dur-sm) var(--ease);
}
.nav-group:hover .ng-caret{color:var(--text-2)}
/* 箭头自身要给出独立的悬停反馈 —— 否则用户看不出"只有它能点"。
 * 选择器要写成 .nav-group .ng-caret:hover 才压得住上面那条 .nav-group:hover。 */
.nav-group .ng-caret:hover{background:rgba(34,211,238,.18);color:var(--primary-txt)}
.nav-group[aria-expanded="false"] .ng-caret{transform:rotate(-90deg)}
/* 一级栏目选中态：与「首页」等普通导航项完全一致
 * （青色底 --primary-soft + 左侧 3px 渐变强调条 + 内描边 + 光晕，
 *  均直接复用 .nav-item.active 的既有规则，不另起一套）。
 * 由 syncNavGroup() 在「栏目展开中」或「其下有激活页」时挂上 .active。
 * 这里只补一处：箭头要跟随选中色，否则深灰箭头压在青底上会发闷。 */
.nav-group.active .ng-caret{color:var(--primary-txt)}
.nav-group.active:hover .ng-caret{color:var(--primary-txt)}

/* 二级列表：用 grid-template-rows 0fr↔1fr 做折叠，
 * 不必写死 max-height，展开高度自动适配条目数量 */
.nav-sub{
  display:grid;grid-template-rows:1fr;overflow:hidden;
  transition:grid-template-rows var(--dur-md) var(--ease-out),opacity var(--dur-md) var(--ease);
}
.nav-sub.collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none}
/* min-height:0 是关键：grid 子项默认 min-height:auto 会被内容撑住。
 * 这里也不能留 padding——min-height 只约束内容盒，内边距会残留高度，
 * 收起时会多出几像素。上下间距统一交给 .nav 与 .nav-sub-inner 的 gap。 */
/* 行距 = 条目行高 + gap（--nav-sub-h + --nav-sub-gap = 28px）。
 * 全屏侧栏与窄屏下拉浮层共用这两个令牌，避免两处各改各的又跑不一致。 */
.nav-sub-inner{overflow:hidden;min-height:0;display:flex;flex-direction:column;gap:var(--nav-sub-gap)}
/* 二级条目：字号比一级（13.5px）小一号 → 12.5px；
 * 行高由继承的 38px 收到 --nav-sub-h，行距 28px
 * —— 比原来 40px 紧凑，又不会像 20px 那样上下几乎贴住。 */
.nav-sub-item{padding-left:16px;font-size:12.5px;height:var(--nav-sub-h);line-height:1}
.nav-sub-item .ni-dot{
  width:13px;flex:none;text-align:center;line-height:1;
  font-size:13px;color:var(--text-3);
  transition:color var(--dur-sm) var(--ease),transform var(--dur-sm) var(--ease-out);
}
/* 徽章同步缩小，避免在 20px 的行里显得拥挤 */
.nav-sub-item .ni-badge{height:15px;min-width:17px;padding:0 4px;font-size:10px;border-radius:8px}
.nav-sub-item:hover .ni-dot{color:var(--text-2)}
.nav-sub-item.active .ni-dot{color:var(--primary);transform:scale(1.25)}
.nav-sub-item.active .ni-badge{background:rgba(34,211,238,.18);color:var(--primary-txt)}

.side-foot{padding:12px;border-top:1px solid var(--line-soft)}
.side-card{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.sc-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-3);padding:3px 0}
.sc-row b{color:var(--text);font-size:12.5px;font-variant-numeric:tabular-nums}
.side-btns{display:flex;gap:6px;justify-content:center}
.side-btns .btn{min-width:96px;padding:0 20px}

/* ---------- 主区域 ---------- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  background:linear-gradient(180deg,rgba(18,18,32,.86),rgba(12,12,24,.78));
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line-soft);
  padding:clamp(12px,1.2vw,20px) clamp(16px,1.6vw,28px);
  position:sticky;top:0;z-index:40;
}
/* 顶栏底缘霓虹光带：青 → 紫 → 品红 */
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.6) 12%,rgba(168,85,247,.5) 50%,rgba(236,72,153,.6) 88%,transparent);opacity:.6}
.topbar-inner{
  max-width:min(1480px,calc(100vw - 32px));
  margin:0 auto;width:100%;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* 标题渐变字：青 → 紫 → 品红（呼应参考图「快人一步」的渐变字处理）
 * 三段色在近黑底上对比度分别为 13.1 / 10.3 / 11.0 : 1，均通过 AA */
.topbar h1{
  font-size:clamp(16px,1.15vw,20px);font-weight:660;letter-spacing:-.2px;
  background:linear-gradient(100deg,#67E8F9 0%,#C4B5FD 50%,#F9A8D4 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.topbar p{font-size:clamp(11px,.85vw,13px);color:var(--text-3);margin-top:2px}
.topbar-actions{display:flex;gap:8px}
.content{
  padding:clamp(20px,1.8vw,30px) clamp(20px,1.8vw,30px) clamp(46px,4vw,78px);
  max-width:min(1480px,calc(100vw - 32px));
  margin:0 auto;width:100%;
  position:relative;
}
/* ---------- 内容区 · 高级模糊背景（磨砂玻璃层）----------
 * 两层叠加：
 *   ① backdrop-filter 把 body 极光底的霓虹光斑真实雾化（磨砂玻璃）
 *   ② 自身背景再铺三团柔和霓虹光斑（青/紫/品红，取自全局 token），
 *      保证色彩在不同内容高度下都稳定可见，不会因背景太暗而被冲淡。
 * 取色全部来自全局 token，因此与整体配色同源。
 * 注意层级：本层 z-index:0，内容 .view 提到 z-index:1 压在其上；
 * 不用负 z-index，避免磨砂层跑到 body 背景之后而失效。 */
.content::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  border-radius:26px;
  background:
    radial-gradient(780px 440px at 12% 2%,rgba(34,211,238,.17),transparent 62%),
    radial-gradient(700px 480px at 90% 24%,rgba(168,85,247,.17),transparent 62%),
    radial-gradient(640px 440px at 60% 98%,rgba(236,72,153,.12),transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012) 42%,rgba(255,255,255,.004));
  -webkit-backdrop-filter:blur(26px) saturate(1.5);
  backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 24px 64px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.10);
  pointer-events:none;
}
.content > .view{position:relative;z-index:1}

.view{display:none}
.view.active{display:block;animation:fadeIn var(--dur-md) var(--ease-out)}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 卡片入场：同屏仅一批轻微错位，不做逐元素动画（避免"动画一切"） */
.view.active .kpi,.view.active .hstat{animation:riseIn var(--dur-lg) var(--ease-out) backwards}
.view.active .kpi:nth-child(1),.view.active .hstat:nth-child(1){animation-delay:0ms}
.view.active .kpi:nth-child(2),.view.active .hstat:nth-child(2){animation-delay:40ms}
.view.active .kpi:nth-child(3),.view.active .hstat:nth-child(3){animation-delay:80ms}
.view.active .kpi:nth-child(4),.view.active .hstat:nth-child(4){animation-delay:120ms}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ================= 通用组件 ================= */
.btn{
  height:34px;padding:0 14px;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,255,255,.08);color:var(--text);font-size:13px;cursor:pointer;
  transition:background var(--dur-sm) var(--ease),border-color var(--dur-sm) var(--ease),
    box-shadow var(--dur-sm) var(--ease),transform var(--dur-xs) var(--ease-out),color var(--dur-sm) var(--ease);
  white-space:nowrap;position:relative;overflow:hidden;
}
.btn:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.13);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:var(--shadow-1);transition-duration:var(--dur-xs)}
.btn-sm{height:30px;padding:0 11px;font-size:12.5px}
.btn-primary{background:var(--primary-grad);border-color:transparent;color:#fff;font-weight:550;box-shadow:0 4px 12px rgba(34,211,238,.28)}
/* 悬停不改变渐变底色（改色会击穿白字对比度，实测 #8B5CF6 仅 4.23:1），
 * 只加强光晕与位移来给反馈 */
.btn-primary:hover{background:var(--primary-grad);border-color:transparent;box-shadow:var(--glow-primary);transform:translateY(-1px);filter:saturate(1.08)}
.btn-primary:active{transform:translateY(0) scale(.985)}
/* 次级强调按钮：紫→品红→玫红，与主按钮的「青→紫→品红」形成冷暖区分 */
.btn-accent{background:var(--accent-grad);border-color:transparent;color:#fff;font-weight:550;box-shadow:0 4px 12px rgba(168,85,247,.30)}
.btn-accent:hover{background:var(--accent-grad);border-color:transparent;box-shadow:var(--glow-magenta);transform:translateY(-1px);filter:saturate(1.08)}
.btn-accent:active{transform:translateY(0) scale(.985)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:transparent;color:var(--text);transform:none;box-shadow:none}
.btn-danger-ghost{background:transparent;border-color:transparent;color:var(--red)}
.btn-danger-ghost:hover{background:var(--red-soft);transform:none;box-shadow:none}
.icon-btn{width:28px;height:28px;border:none;background:transparent;border-radius:6px;cursor:pointer;color:var(--text-3);font-size:15px;
  transition:background var(--dur-xs) var(--ease),color var(--dur-xs) var(--ease),transform var(--dur-xs) var(--ease-out)}
.icon-btn:hover{background:rgba(255,255,255,.1);color:var(--text);transform:scale(1.08)}
.icon-btn:active{transform:scale(.94)}
.link-btn{border:none;background:none;color:var(--primary);cursor:pointer;padding:2px 6px;font-size:13px;border-radius:6px;font-family:inherit;
  transition:background var(--dur-xs) var(--ease),color var(--dur-xs) var(--ease)}
.link-btn:hover{background:var(--primary-soft)}
.link-btn.danger{color:var(--red)}
.link-btn.danger:hover{background:var(--red-soft)}

.panel{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);margin-bottom:14px;
  transition:box-shadow var(--dur-md) var(--ease),border-color var(--dur-md) var(--ease),transform var(--dur-md) var(--ease-out);
}
.panel:hover{box-shadow:var(--shadow-2);border-color:rgba(34,211,238,.34);transform:translateY(-1px)}
/* 表格面板不参与位移：横向滚动时位移会造成冻结列抖动 */
.panel.table-panel:hover{transform:none;box-shadow:var(--shadow-1);border-color:var(--glass-brd)}
.panel-head{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-head h3{font-size:13.5px;font-weight:650;letter-spacing:.1px}
.panel-body{padding:14px 16px}
.divider{height:1px;background:var(--line-soft);margin:16px 0}
.hint{font-size:11.5px;color:var(--text-3);margin-top:10px}
.muted{color:var(--text-3);font-size:12px}

/* ---------- 批量 SKU 录入 ---------- */
.prod-grid{margin-bottom:4px}
.sku-head{display:flex;align-items:center;gap:10px;margin:18px 0 10px;flex-wrap:wrap}
.sku-head b{font-size:13px}
.sku-head .btn{margin-left:auto}
.sku-row{
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;
  background:rgba(255,255,255,.04);
}
/* ---------- 产品级费率（平台费率/税率/退货率，产品统一） ---------- */
.prod-rates{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px;
  border:1px solid rgba(34,211,238,.28);border-radius:12px;
  padding:12px 14px 10px;margin-bottom:12px;
  background:rgba(34,211,238,.07);
}
.prod-rates .field{margin:0}
.prod-rates .pr-note{grid-column:1 / -1;font-size:11.5px;color:var(--text-3);line-height:1.5}
.prod-rates .pr-note b{color:var(--primary);font-weight:600}
.sr-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sr-no{
  flex:none;font-size:11px;font-weight:650;color:var(--primary);
  background:var(--primary-soft);border-radius:5px;padding:2px 7px;
}
.sr-sku{
  flex:1;min-width:180px;height:32px;padding:0 10px;border:1px solid var(--line);
  border-radius:8px;font-size:13px;outline:none;background:var(--card);font-family:inherit;
  color:var(--text);  /* 1.1 修复：深底色上保证文本可读（WCAG AA）*/
}
.sr-sku::placeholder{color:var(--text-3)}
.sr-sku:focus{border-color:var(--primary);box-shadow:var(--ring)}
.sr-w-wrap{position:relative;flex:none}
.sr-w{
  width:84px;height:32px;padding:0 22px 0 10px;border:1px solid var(--line);
  border-radius:8px;font-size:13px;outline:none;background:var(--card);font-family:inherit;
  color:var(--text);  /* 1.1 修复：占比数值可读 */
}
.sr-w::placeholder{color:var(--text-3)}
.sr-w:focus{border-color:var(--primary);box-shadow:var(--ring)}
.sr-w-wrap i{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-style:normal;font-size:12px;color:var(--text-3)}
.sr-del{flex:none}
.sr-del[disabled]{opacity:.35;cursor:not-allowed}
.sr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 12px}
.sr-calc{
  margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);
  display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--text-2);
}
.sr-calc b{font-variant-numeric:tabular-nums}
@media (min-width:860px){.sr-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:640px){.sr-grid{grid-template-columns:repeat(2,1fr)}}

/* ================= KPI ================= */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.kpi-grid-3{grid-template-columns:repeat(3,1fr)}
.kpi-grid-4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
@media (max-width:900px){.kpi-grid-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kpi-grid-3{grid-template-columns:1fr}}
.kpi{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:var(--radius-lg);padding:14px 16px;box-shadow:var(--shadow-1);
  transition:transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease),border-color var(--dur-md) var(--ease);
  position:relative;overflow:hidden;
}
/* 顶部一道细高光，让卡片有"玻璃受光"感 */
.kpi::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);pointer-events:none}
.kpi:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:rgba(34,211,238,.55)}
.kpi .k-label{font-size:12px;color:var(--text-3);transition:color var(--dur-md) var(--ease)}
.kpi:hover .k-label{color:var(--text-2)}
.kpi .k-value{font-size:24px;font-weight:650;margin-top:6px;letter-spacing:-.3px;font-variant-numeric:tabular-nums;transition:color var(--dur-md) var(--ease)}
.kpi .k-sub{font-size:11px;color:var(--text-3);margin-top:3px}
.kpi.t-blue{background:linear-gradient(150deg,rgba(34,211,238,.20),rgba(34,211,238,.09));border-color:rgba(34,211,238,.34)}
.kpi.t-blue .k-value{color:#67E8F9}
.kpi.t-green{background:linear-gradient(150deg,rgba(52,229,176,.16),rgba(52,229,176,.07));border-color:rgba(52,229,176,.28)}
.kpi.t-green .k-value{color:#5EEAD4}
.kpi.t-amber{background:linear-gradient(150deg,rgba(255,176,32,.16),rgba(255,176,32,.07));border-color:rgba(255,176,32,.28)}
.kpi.t-amber .k-value{color:#FCD34D}
.kpi.t-teal{background:linear-gradient(150deg,rgba(168,85,247,.17),rgba(168,85,247,.07));border-color:rgba(168,85,247,.30)}
.kpi.t-teal .k-value{color:#C4B5FD}
/* 霓虹光晕：每类卡片悬停时以自身色相发光（呼应参考图的发光图标块） */
.kpi.t-blue:hover{border-color:rgba(34,211,238,.55);box-shadow:var(--glow-primary)}
.kpi.t-green:hover{border-color:rgba(52,229,176,.5);box-shadow:0 0 0 1px rgba(52,229,176,.3),0 6px 22px rgba(52,229,176,.24)}
.kpi.t-amber:hover{border-color:rgba(255,176,32,.5);box-shadow:0 0 0 1px rgba(255,176,32,.3),0 6px 22px rgba(255,176,32,.24)}
.kpi.t-teal:hover{border-color:rgba(168,85,247,.55);box-shadow:var(--glow-violet)}
/* 数值刷新时的轻微"呼吸"提示（由 JS 添加 .bump 触发） */
.kpi.bump .k-value,.hstat.bump .hs-value{animation:valueBump var(--dur-lg) var(--ease-out)}
@keyframes valueBump{0%{opacity:.45;transform:translateY(3px)}100%{opacity:1;transform:none}}
.pos{color:var(--green)}
.neg{color:var(--red)}

/* ================= 首页 ================= */
.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1vw,16px);margin-bottom:clamp(12px,1.2vw,18px)}
@media (max-width:1000px){.home-stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.home-stats{grid-template-columns:1fr}}
.hstat{
  border-radius:var(--radius-lg);padding:clamp(16px,1.4vw,22px) clamp(18px,1.6vw,24px);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow-1);
  transition:transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease),border-color var(--dur-md) var(--ease);
  position:relative;overflow:hidden;
}
.hstat::after{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);pointer-events:none}
.hstat:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:rgba(34,211,238,.55)}
.hstat .hs-label{display:flex;align-items:center;gap:9px;font-size:clamp(12px,.95vw,13.5px);color:var(--text-2)}
.hstat .hs-ico{width:clamp(26px,1.9vw,32px);height:clamp(26px,1.9vw,32px);border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-size:clamp(12px,.95vw,14px);font-style:normal;background:rgba(255,255,255,.08);color:var(--text-2);flex:none;
  transition:transform var(--dur-md) var(--ease-spring),box-shadow var(--dur-md) var(--ease)}
.hstat:hover .hs-ico{transform:scale(1.1) rotate(-3deg)}
.hstat .hs-value{font-size:clamp(24px,2vw,32px);font-weight:650;margin-top:10px;letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.hstat .hs-value small{font-size:clamp(11px,.85vw,13px);font-weight:400;color:var(--text-3);margin-left:4px}
.hstat .hs-sub{font-size:clamp(11px,.85vw,12.5px);color:var(--text-3);margin-top:5px}
.hstat.t-blue{background:linear-gradient(150deg,rgba(34,211,238,.18),rgba(34,211,238,.07));border-color:rgba(34,211,238,.34)}
.hstat.t-blue .hs-value{color:#67E8F9}
.hstat.t-blue .hs-ico{background:var(--primary-grad);color:#fff;box-shadow:0 4px 10px rgba(34,211,238,.28)}
.hstat.t-green{background:linear-gradient(150deg,rgba(52,229,176,.15),rgba(52,229,176,.06));border-color:rgba(52,229,176,.28)}
.hstat.t-green .hs-value{color:#5EEAD4}
.hstat.t-green .hs-ico{background:var(--green-grad);color:#fff;box-shadow:0 4px 10px rgba(14,159,110,.26)}
.hstat.t-amber{background:linear-gradient(150deg,rgba(255,176,32,.15),rgba(255,176,32,.06));border-color:rgba(255,176,32,.28)}
.hstat.t-amber .hs-value{color:#FCD34D}
.hstat.t-amber .hs-ico{background:var(--amber-grad);color:#fff;box-shadow:0 4px 10px rgba(217,119,6,.26)}
.hstat.t-teal{background:linear-gradient(150deg,rgba(168,85,247,.17),rgba(168,85,247,.07));border-color:rgba(168,85,247,.30)}
.hstat.t-teal .hs-value{color:#C4B5FD}
.hstat.t-teal .hs-ico{background:var(--violet-grad);color:#fff;box-shadow:0 4px 10px rgba(168,85,247,.26)}
/* 霓虹光晕：统计卡悬停按自身色相发光 */
.hstat.t-blue:hover{border-color:rgba(34,211,238,.55);box-shadow:var(--glow-primary)}
.hstat.t-green:hover{border-color:rgba(52,229,176,.5);box-shadow:0 0 0 1px rgba(52,229,176,.3),0 6px 22px rgba(52,229,176,.24)}
.hstat.t-amber:hover{border-color:rgba(255,176,32,.5);box-shadow:0 0 0 1px rgba(255,176,32,.3),0 6px 22px rgba(255,176,32,.24)}
.hstat.t-teal:hover{border-color:rgba(168,85,247,.55);box-shadow:var(--glow-violet)}
.home-bottom{display:grid;grid-template-columns:1.35fr 1fr;gap:0 14px;align-items:stretch}
@media (max-width:1000px){.home-bottom{grid-template-columns:1fr}}
.home-trend .panel-head select{max-width:220px}

.rp-item{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-soft)}
.rp-item:last-child{border-bottom:none}
.rp-date{flex:none;font-size:11.5px;color:var(--text-3);background:rgba(255,255,255,.06);border-radius:6px;padding:3px 8px;font-variant-numeric:tabular-nums}
.rp-main{flex:1;min-width:0}
.rp-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-sub{font-size:11px;color:var(--text-3);margin-top:2px}
.rp-num{flex:none;text-align:right;min-width:88px}
.rp-num b{font-size:13.5px;font-variant-numeric:tabular-nums}
.rp-num small{display:block;font-size:11px;color:var(--text-3);margin-top:1px}

/* ---------- 关注商品板块：滚动容器 + 星标 ---------- */
.watch-body{max-height:420px;overflow-y:auto;padding-right:4px}
.watch-star{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;line-height:1;cursor:pointer;user-select:none;
  font-size:18px;color:#8A8AA8;transition:color var(--dur-sm) var(--ease),transform var(--dur-sm) var(--ease-spring);
}
.watch-star:hover{transform:scale(1.22);color:#FFB020}
.watch-star:active{transform:scale(.9)}
.watch-star.watched{color:#FFB020;filter:drop-shadow(0 0 6px rgba(255,176,32,.45))}
.watch-star.ws-group{width:24px;height:24px;border-radius:7px;background:rgba(34,211,238,.14);font-size:15px}
.watch-star.ws-inline{font-size:16px;width:18px;height:18px;vertical-align:-2px}
.watch-star.ws-home{font-size:20px;width:24px;height:24px}

.health{display:flex;flex-direction:column;gap:11px}
.h-item{display:grid;grid-template-columns:150px 1fr 62px;align-items:center;gap:10px}
@media (max-width:520px){.h-item{grid-template-columns:110px 1fr 58px}}
.h-name{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.h-name span{display:block;font-size:11px;color:var(--text-3)}
.h-bar{height:8px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden}
.h-bar i{display:block;height:100%;border-radius:5px;transition:width var(--dur-lg) var(--ease-out)}
.h-val{text-align:right;font-size:12.5px;font-weight:650;font-variant-numeric:tabular-nums}

.recent{display:flex;flex-direction:column;gap:2px}
.r-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft)}
.r-item:last-child{border-bottom:none}
.r-date{font-size:11.5px;color:var(--text-3);width:46px;flex:none}
.r-name{flex:1;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-name span{display:block;font-size:11px;color:var(--text-3)}
.r-num{text-align:right;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.r-num small{display:block;font-weight:400;font-size:11px;color:var(--text-3)}

.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.quick{grid-template-columns:1fr}}
.quick-btn{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  padding:14px;border:1px solid var(--glass-brd);border-radius:10px;background:rgba(255,255,255,.05);cursor:pointer;
  transition:transform var(--dur-md) var(--ease-out),box-shadow var(--dur-md) var(--ease),border-color var(--dur-md) var(--ease),background var(--dur-md) var(--ease);
  font-family:inherit;position:relative;overflow:hidden;
}
.quick-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--primary-grad);opacity:0;transform:scaleY(.4);transform-origin:center;
  transition:opacity var(--dur-md) var(--ease),transform var(--dur-md) var(--ease-out)}
.quick-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:rgba(34,211,238,.45);background:var(--primary-soft)}
.quick-btn:hover::before{opacity:1;transform:scaleY(1)}
.quick-btn:active{transform:translateY(-1px) scale(.99)}
.quick-btn b{font-size:13.5px;font-weight:600;color:var(--text)}
.quick-btn span{font-size:11.5px;color:var(--text-3)}

/* ================= 工具条 ================= */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;flex-wrap:wrap}
.tool-left,.tool-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.search{position:relative}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-3);font-size:15px}
.search input{height:32px;width:260px;padding:0 10px 0 28px;border:1px solid var(--line);border-radius:9px;font-size:13px;outline:none;background:rgba(255,255,255,.08);font-family:inherit;color:var(--text)}
.search input::placeholder{color:var(--text-3)}
.search input:focus{border-color:var(--primary);background:var(--card);box-shadow:var(--ring)}
.search-icon{transition:color var(--dur-sm) var(--ease)}
.search:focus-within .search-icon{color:var(--primary)}
select{height:32px;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.06);font-size:13px;color:var(--text);outline:none;cursor:pointer;max-width:230px}
select:focus{border-color:var(--primary)}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);cursor:pointer;user-select:none}
.chk input{accent-color:var(--primary);cursor:pointer}

/* ================= 表格 =================
 * 结构说明：表格容器为不透明底色（去掉 backdrop-filter），
 * 行/表头/冻结列一律使用不透明实色，保证横向滚动时冻结列不会
 * 透出下层滚动内容（此前半透明背景会产生"模糊重影"）。 */
.table-panel{overflow:hidden;background:var(--table-base);-webkit-backdrop-filter:none;backdrop-filter:none}
.table-scroll{overflow:auto;max-height:calc(100vh - 300px)}
table.grid{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;white-space:nowrap}
table.grid th,table.grid td{padding:8px 12px;border-bottom:1px solid var(--line-soft);text-align:left}
table.grid thead th{position:sticky;top:0;z-index:20;background:var(--table-head);font-weight:600;font-size:12px;color:var(--text-2);border-bottom:1px solid var(--line)}
table.grid tbody tr:not(.group-row) td{background:var(--table-row)}
table.grid tbody tr:not(.group-row):hover td{background:var(--table-hover)}
table.grid .num{text-align:right;font-variant-numeric:tabular-nums}
table.grid .center{text-align:center}
.sep-l{border-left:1px solid var(--line-soft)!important}
.hl-col{background:rgba(34,211,238,.10)}
thead .hl-col{background:rgba(34,211,238,.16);color:var(--primary)}
td.hl-col{font-weight:650}
/* 冻结列：保留 sticky 定位，但不覆写背景——沿用所在行/表头的实色底 */
.col-sticky-1,.col-sticky-2{position:sticky;z-index:10}
.col-sticky-1{left:0;min-width:170px;font-weight:550}
table.grid thead th.col-sticky-1{text-indent:50px}
table.grid tbody td.col-sticky-1.cell-weight-col{padding-left:72px;font-weight:400}
/* SKU 行的「销售占比」数值：单击就地改。
 * 悬停给一层青色底 + 内描边，明确"这里可以点一下改"；
 * 与产品版头的费率胶囊保持同一种可编辑观感。 */
table.grid tbody td.cell-weight-col .w-val{
  display:inline-block;cursor:pointer;padding:0 6px;border-radius:6px;
  font-variant-numeric:tabular-nums;
  transition:background var(--dur-sm) var(--ease),color var(--dur-sm) var(--ease),
    box-shadow var(--dur-sm) var(--ease);
}
table.grid tbody td.cell-weight-col .w-val:hover{
  background:rgba(34,211,238,.15);
  color:var(--primary-txt);
  box-shadow:inset 0 0 0 1px rgba(34,211,238,.45);
}
/* 就地编辑时的输入框：尺寸贴合单元格，避免撑高行 */
table.grid tbody td.cell-weight-col .w-val input{
  width:58px;height:19px;padding:0 4px;
  border:1px solid var(--primary);border-radius:6px;
  background:var(--card);color:var(--text);
  font:inherit;font-size:12.5px;font-weight:600;text-align:center;outline:none;
  font-variant-numeric:tabular-nums;
}
.metric-red{color:var(--red)!important}
/* left 由 JS 按第一列实测宽度注入（--sticky-1-w），避免与内容驱动的列宽错位重叠 */
.col-sticky-2{left:var(--sticky-1-w,170px);min-width:150px}
/* 表头冻结列需要更高 z-index，否则横向滚动时会被后面的表头单元格盖住 */
table.grid thead th.col-sticky-1,table.grid thead th.col-sticky-2{background:var(--table-head);z-index:31}
/* 冻结列右缘投影：只加在最右侧冻结列上，提示右侧还有可滚动内容 */
table.grid tbody tr td.col-sticky-2,table.grid thead th.col-sticky-2{box-shadow:var(--table-edge)}
table.grid:not(:has(.col-sticky-2)) tbody tr td.col-sticky-1,table.grid:not(:has(.col-sticky-2)) thead th.col-sticky-1{box-shadow:var(--table-edge)}
.cell-name{font-weight:550;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.cell-sku{color:var(--text-2);max-width:300px;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:11px;color:var(--text-3);font-weight:400;display:block;margin-top:1px}

.badge{display:inline-block;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.b-good{background:var(--green-soft);color:var(--green)}
.b-warn{background:var(--amber-soft);color:var(--amber)}
.b-bad{background:var(--red-soft);color:var(--red)}
.b-plain{background:rgba(255,255,255,.06);color:var(--text-2)}

table.grid tr.group-row td{background:linear-gradient(180deg,var(--table-group-a),var(--table-group-b));border-bottom:1px solid rgba(34,211,238,.18);box-shadow:inset 0 0 0 1px rgba(34,211,238,.06);cursor:pointer;transition:background .18s var(--ease)}
table.grid tr.group-row:hover td{background:linear-gradient(180deg,var(--table-group-hover-a),var(--table-group-hover-b))}
.group-toggle{display:flex;align-items:center;gap:10px;font-weight:650;width:100%;padding:4px 0}
.group-toggle .arrow{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(34,211,238,.18);color:var(--primary);font-size:10px;flex:none;
  transition:transform var(--dur-md) var(--ease-out),background var(--dur-sm) var(--ease)}
tr.group-row:hover .arrow{background:rgba(34,211,238,.34)}
.group-toggle .group-meta{color:var(--text-2);font-weight:400;font-size:12px;margin-left:auto}
.group-toggle .group-left{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.group-toggle .group-left{flex:0 0 170px;min-width:170px;display:inline-flex;align-items:center;gap:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr.group-row.collapsed .arrow{transform:rotate(-90deg)}
.rate-chip{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin-right:8px;padding:4px 12px;border:1px solid var(--glass-brd);border-radius:9px;background:rgba(255,255,255,.05);cursor:pointer;user-select:none;white-space:nowrap;
  transition:border-color var(--dur-sm) var(--ease),background var(--dur-sm) var(--ease),transform var(--dur-sm) var(--ease-out),box-shadow var(--dur-sm) var(--ease)}
.rate-chip i{font-style:normal;font-size:10.5px;color:var(--text-3);line-height:1.2;transition:color var(--dur-sm) var(--ease)}
.rate-chip b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600;font-size:12.5px;line-height:1.3}
.rate-chip:hover{border-color:var(--primary);background:rgba(34,211,238,.14);transform:translateY(-1px);box-shadow:var(--shadow-1)}
.rate-chip:hover i{color:var(--primary)}
.rate-chip:active{transform:translateY(0) scale(.98)}
.grp-date{margin:3px 0 0 60px;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.grp-chips{white-space:nowrap}
.rate-chip input{width:42px;height:16px;padding:0;border:1px solid var(--primary);border-radius:5px;background:var(--card);color:var(--text);font-size:12.5px;font-weight:600;text-align:center;outline:none;font-family:inherit;appearance:textfield;-moz-appearance:textfield;line-height:1.3}
.rate-chip input::-webkit-outer-spin-button,.rate-chip input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* 全局：数字输入框统一取消增减按钮（Spinner），直接键入数值 */
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
tfoot td{background:var(--table-head);font-weight:600;border-top:1px solid var(--line);position:sticky;bottom:0;z-index:12;font-variant-numeric:tabular-nums}

.empty{padding:48px 20px;text-align:center;color:var(--text-3);background:rgba(255,255,255,.04);border:1px dashed var(--line);border-radius:var(--radius-lg);margin:6px 0}
.empty-ico{font-size:40px;margin-bottom:10px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.32))}
.empty p{margin-bottom:14px}
.empty .btn{margin:0 4px}

.formula-tip{
  margin-top:4px;font-size:12px;color:var(--text-3);line-height:1.8;
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:12px;padding:12px 14px;
}
.formula-tip b{color:var(--text-2)}
.ft-note{display:block;margin-top:4px;color:var(--primary)}

/* ================= 测算页 ================= */
.calc-layout{display:grid;grid-template-columns:340px 1fr;gap:14px;align-items:stretch}
@media (max-width:1080px){.calc-layout{grid-template-columns:1fr}}
#view-calc .calc-layout>.panel{display:flex;flex-direction:column}
#view-calc .calc-layout>.panel .panel-body{flex:1;min-height:0;display:flex;flex-direction:column}
#view-calc .calc-layout>.panel:first-child .panel-body>.divider{margin-top:auto}
#view-calc .calc-layout>.panel:nth-child(2) .panel-body>#k_note{margin-top:auto}
.calc-base{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:0;background:transparent;border:0;margin-bottom:10px}
.calc-base .lc-item{border:1px solid var(--line);border-radius:10px;padding:12px;background:rgba(255,255,255,.06);text-align:center}
.calc-base .lc-item .l{font-size:11px;color:var(--text-3)}
.calc-base .lc-item .v{font-size:18px;font-weight:650;margin-top:4px;font-variant-numeric:tabular-nums}
.calc-base .lc-item.hl{background:var(--primary-soft);border-color:rgba(34,211,238,.34)}
.calc-base .lc-item.hl .v{color:var(--primary)}
.calc-result{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cr-box{border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center;background:rgba(255,255,255,.06)}
.cr-box .l{font-size:11px;color:var(--text-3)}
.cr-box .v{font-size:18px;font-weight:650;margin-top:4px;font-variant-numeric:tabular-nums}
.cr-box.ok{background:var(--green-soft);border-color:rgba(52,229,176,.3)}
.cr-box.ok .v{color:var(--green)}
.cr-box.no{background:var(--red-soft);border-color:rgba(255,84,112,.3)}
.cr-box.no .v{color:var(--red)}
.cr-box.blue{background:var(--primary-soft);border-color:rgba(34,211,238,.34)}
.cr-box.blue .v{color:var(--primary)}
/* 盈亏口径（中式配色）：正值=红，负值=绿 */
.cr-box.pos{background:var(--red-soft);border-color:rgba(255,84,112,.3)}
.cr-box.pos .v{color:var(--red)}
.cr-box.neg{background:var(--green-soft);border-color:rgba(52,229,176,.3)}
.cr-box.neg .v{color:var(--green)}
/* 第三行占位（隐藏的空格子，不带边框与底色） */
.cr-box.ghost{visibility:hidden;pointer-events:none}
.cr-note{margin-top:14px;padding:11px 13px;border-radius:8px;font-size:12.5px;line-height:1.7;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text-2)}
.cr-note b{color:var(--text)}

/* ================= 弹窗 ================= */
.mask{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(6,10,20,.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  animation:fade var(--dur-sm) var(--ease-out);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:rgba(18,18,30,.96);
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid var(--glass-brd);
  border-radius:16px;width:560px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);
  animation:pop var(--dur-md) var(--ease-out);
}
.modal-lg{width:760px}
@keyframes pop{from{transform:translateY(14px) scale(.975);opacity:0}to{transform:none;opacity:1}}
@keyframes popIn{from{transform:translateY(-6px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.modal-head h2{font-size:15px;font-weight:650}
.modal-body{padding:18px 20px;overflow:auto}
.modal-foot{padding:12px 20px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-foot>div{display:flex;gap:8px}

.form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 12px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field.span-2{grid-column:span 2}
.field label{font-size:12px;color:var(--text-2);font-weight:500}
.field label i{color:var(--red);font-style:normal;margin-left:2px}
.field input,.field select{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;font-size:13px;outline:none;background:rgba(255,255,255,.08);width:100%;font-family:inherit;color:var(--text)}
.field input:focus,.field select:focus{border-color:var(--primary);background:var(--card);box-shadow:var(--ring)}
.field small{font-size:11px;color:var(--text-3)}

/* 深色下拉选项：覆盖浏览器默认白底 */
select option{background:#12121D;color:var(--text);padding:8px 12px}
select option:hover{background:rgba(34,211,238,.28);color:#fff}
select option:checked{background:rgba(34,211,238,.5);color:#fff;font-weight:600}
select{color-scheme:dark}

/* 深色日期选择器：覆盖浏览器默认白底 */
input[type="date"],input[type="time"],input[type="datetime-local"]{background:rgba(255,255,255,.08);color:var(--text);color-scheme:dark}
input[type="date"]::-webkit-calendar-picker-indicator,input[type="time"]::-webkit-calendar-picker-indicator,input[type="datetime-local"]::-webkit-calendar-picker-indicator{filter:invert(.8) brightness(1.2);cursor:pointer}

.live-calc{margin-top:16px;padding:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:12px}
.lc-item{text-align:center}
.lc-item .l{font-size:11px;color:var(--text-3)}
.lc-item .v{font-size:16px;font-weight:650;margin-top:3px;font-variant-numeric:tabular-nums}
.lc-item.hl .v{color:var(--primary)}

.danger-zone{margin-top:4px;padding:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.danger-zone b{font-size:13px;color:var(--text)}
.danger-zone p{margin-top:3px;font-size:12px;color:var(--text-3)}
.dz-btns{display:flex;gap:8px;flex-wrap:wrap}

.toast{
  position:fixed;left:50%;bottom:36px;transform:translateX(-50%);
  background:rgba(18,18,30,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;padding:9px 18px;border-radius:9px;font-size:13px;z-index:200;
  box-shadow:var(--shadow-3);border:1px solid rgba(255,255,255,.08);
  animation:toastIn var(--dur-md) var(--ease-out);
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* ---------- 动效降级：尊重系统「减少动态效果」设置 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .kpi:hover,.hstat:hover,.quick-btn:hover,.btn:hover{transform:none!important}
  .view.active .kpi,.view.active .hstat{animation:none!important}
}

@media (max-width:1000px){
  .app{flex-direction:column}
  /* 横向导航条：允许换行并放开裁剪 ——
   * 二级列表在这套布局里是"下拉浮层"，必须能溢出侧栏边界显示；
   * 而 overflow-x:auto 会连带把 overflow-y 变成 auto 从而裁掉它，
   * 所以这里改用 flex-wrap 换行 + overflow:visible。
   *
   * z-index:50 是必须的（这个坑很隐蔽）：
   * .sidebar 自身带 backdrop-filter，而 backdrop-filter 会创建**层叠上下文**；
   * 侧栏原本是 position:static / z-index:auto，整个上下文落在普通流层，
   * 于是浮层的 z-index:60 被"困"在侧栏内部、仍然画在顶栏（z-index:40）下面。
   * 给侧栏自己一个 50，才能让内部浮层真正浮到顶栏之上。
   * 50 介于顶栏 40 与弹窗 100 之间，不会盖住弹窗 / Toast。 */
  .sidebar{width:100%;height:auto;position:relative;z-index:50;flex-direction:row;align-items:center;gap:10px;padding:8px 12px;border-right:none;border-bottom:1px solid var(--line);overflow:visible;flex-wrap:wrap}
  .side-brand{border:none;padding:0}
  .nav{flex-direction:row;padding:0;gap:4px;overflow:visible;flex-wrap:wrap}
  .nav-item{height:32px;white-space:nowrap;padding:0 10px}
  .ni-badge{margin-left:4px}
  /* 二级列表 → 挂在一级栏目正下方的下拉浮层 */
  .nav-sub{
    position:absolute;top:calc(100% + 6px);left:0;
    display:block;grid-template-rows:none;
    min-width:150px;padding:6px;
    border-radius:12px;
    background:linear-gradient(180deg,rgba(20,20,34,.97),rgba(13,13,24,.97));
    -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
    border:1px solid var(--glass-brd);
    box-shadow:var(--shadow-3);
    opacity:1;pointer-events:auto;transition:none;
    z-index:60;
  }
  /* 收起 = 直接不渲染，避免 grid 0fr 那套在小浮层里留下残影 */
  .nav-sub.collapsed{display:none;opacity:1;pointer-events:auto}
  /* 二级项：行高写回共用令牌 --nav-sub-h
   * —— 上面的 .nav-item{height:32px} 会连带压到二级项，
   * 这里显式写回才能保证下拉与全屏侧栏的行距一致。
   * 左缩进收窄，让下拉更居中。 */
  .nav-sub-item{padding-left:8px;height:var(--nav-sub-h)}
  .side-foot{display:none}
  .content{padding:16px}
  .topbar{padding:12px 16px}
  .form-grid{grid-template-columns:repeat(2,1fr)}
  .search input{width:180px}
}
@media (max-width:640px){
  .form-grid{grid-template-columns:1fr}
  .field.span-2{grid-column:span 1}
}

/* ---------- 台账时间范围选择器 ---------- */
.range-pick{position:relative}
.range-btn{height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.08);font-size:12.5px;color:var(--text);cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:border-color var(--dur-sm) var(--ease),color var(--dur-sm) var(--ease),background var(--dur-sm) var(--ease),box-shadow var(--dur-sm) var(--ease)}
.range-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft)}
.range-btn .rb-arrow{font-size:10px;color:var(--text-3);transition:transform var(--dur-sm) var(--ease-out)}
.range-btn:hover .rb-arrow{color:var(--primary)}
.range-pop{
  position:fixed;z-index:9999;
  background:rgba(18,18,30,.98);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);border-radius:12px;
  box-shadow:var(--shadow-3);padding:14px;width:300px;
  animation:popIn var(--dur-md) var(--ease-out);
}
.range-quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:12px}
.range-quick button{height:30px;border:1px solid var(--line);border-radius:7px;background:var(--card);font-size:12.5px;color:var(--text-2);cursor:pointer;
  transition:border-color var(--dur-xs) var(--ease),color var(--dur-xs) var(--ease),background var(--dur-xs) var(--ease),transform var(--dur-xs) var(--ease-out)}
.range-quick button:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-soft);transform:translateY(-1px)}
.range-quick button:active{transform:translateY(0) scale(.97)}
.range-quick button.active{background:var(--primary-grad);border-color:transparent;color:#fff;font-weight:550;box-shadow:0 3px 10px rgba(34,211,238,.3)}
.range-custom{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line-soft);padding-top:12px}
.range-custom label{font-size:12px;color:var(--text-3);flex:none}
.range-custom input{flex:1;min-width:0;height:30px;border:1px solid var(--line);border-radius:7px;padding:0 8px;font-size:12.5px;color:var(--text)}
.range-custom input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.range-custom span{color:var(--text-3)}
.range-tip{margin:8px 0 0;font-size:11px;color:var(--text-3)}

/* ---------- 店铺趋势图表 ---------- */
@media (max-width:1000px){.charts-grid{grid-template-columns:1fr}}
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:6px}
/* 店铺每日趋势：彩色店铺选项卡（首页与广告投放页共用） */
.shop-tabs{display:flex;gap:8px;flex-wrap:wrap}
.shop-tab{border:none;cursor:pointer;font-family:inherit;font-size:12px;font-weight:600;line-height:1;color:#fff;padding:6px 12px;border-radius:7px;opacity:.42;
  transition:opacity var(--dur-sm) var(--ease),transform var(--dur-sm) var(--ease-out),box-shadow var(--dur-sm) var(--ease),filter var(--dur-sm) var(--ease)}
.shop-tab:hover{opacity:.8;transform:translateY(-1px);filter:brightness(1.14) saturate(1.1)}
.shop-tab:active{transform:translateY(0) scale(.97)}
/* 激活态：霓虹描边 + 外发光，模拟参考图中"点亮"的图标块 */
.shop-tab.active{opacity:1;transform:translateY(-1px);filter:brightness(1.1) saturate(1.12);
  box-shadow:0 0 0 1px rgba(255,255,255,.24),0 4px 16px rgba(0,0,0,.45),0 0 18px rgba(255,255,255,.12)}
.panel-head .shop-tabs{margin-left:auto}
.lg-item{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2)}
.lg-item i{width:10px;height:10px;border-radius:3px;display:inline-block}
/* 趋势图霓虹发光：两条折线各自以自身色相散光（呼应参考图的发光线条/图标） */
.ch-spend{filter:drop-shadow(0 0 5px rgba(34,211,238,.45))}
.ch-roi{filter:drop-shadow(0 0 5px rgba(252,211,77,.45))}

/* ---------- 主页 TOP5 投放 ---------- */
.tp-head,.tp-row{display:grid;grid-template-columns:34px minmax(180px,1fr) 110px 120px 90px 110px 70px;gap:10px;align-items:center}
.tp-head{font-size:11.5px;color:var(--text-3);padding:2px 6px 10px;border-bottom:1px solid var(--line-soft)}
.tp-head span{text-align:right}
.tp-head .tp-hmain{text-align:left}
.tp-row{padding:11px 6px;border-bottom:1px solid var(--line-soft)}
.tp-row:last-child{border-bottom:none}
.tp-rank{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.06);color:var(--text-2);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.tp-row:first-of-type .tp-rank{background:var(--primary-soft);color:var(--primary)}
.tp-main{min-width:0}
.tp-name{font-weight:550;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-name span{display:block;font-size:11px;color:var(--text-3);font-weight:400;margin-top:1px}
.tp-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.06);margin-top:6px;overflow:hidden}
.tp-bar i{display:block;height:100%;border-radius:2px;background:var(--primary);opacity:.55}
.tp-num{text-align:right;font-size:13px}
.tp-st{text-align:right}
/* ---------- 侧栏自定义图标 / 设置预览 ---------- */
.logo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.logo-row{display:flex;align-items:center;gap:10px}
.logo-prev{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;font-weight:650;font-size:17px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.logo-prev img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- 分段控件（记录类型） ---------- */
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:fit-content}
.seg button{height:32px;padding:0 14px;border:none;background:var(--card);font-size:12.5px;color:var(--text-2);cursor:pointer;
  transition:background var(--dur-sm) var(--ease),color var(--dur-sm) var(--ease)}
.seg button + button{border-left:1px solid var(--line)}
.seg button:hover{background:rgba(255,255,255,.08);color:var(--text)}
.seg button.active{background:var(--primary-grad);border-color:transparent;color:#fff;font-weight:550}

/* ---------- 主页 店铺消耗 TOP3 ---------- */
.sp-item{border:1px solid var(--line-soft);border-radius:12px;padding:4px 14px 8px;margin-bottom:10px;background:rgba(255,255,255,.02)}
.sp-item:last-child{margin-bottom:0}
.sp-head{display:grid;grid-template-columns:28px 1fr 110px 120px 110px;gap:10px;align-items:center;padding:10px 0 8px}
.sp-rank{width:24px;height:24px;border-radius:7px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center}
.sp-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-name span{display:block;font-size:11px;color:var(--text-3);font-weight:400;margin-top:1px}
.sp-num{text-align:right;font-size:14px;font-weight:650}
.sp-num small,.sp-pnum small{display:block;font-size:10.5px;color:var(--text-3);font-weight:400}
.sp-num.pos,.sp-pnum.pos{color:var(--green)}
.sp-num.neg,.sp-pnum.neg{color:#FF5470}
.sp-prod{display:grid;grid-template-columns:28px minmax(160px,1fr) 110px 120px 110px;gap:10px;align-items:center;padding:7px 0;border-top:1px dashed var(--line-soft);font-size:12.5px}
.sp-pname{grid-column:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-2)}
.sp-pnum{text-align:right;font-weight:600}
.sp-noprod{padding:8px 0 6px 38px;font-size:12px;color:var(--text-3)}

/* ---------- 批量粘贴面板 ---------- */
.paste-panel{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:12px;padding:12px;margin-bottom:12px}
.paste-tip{font-size:12px;color:var(--text-3);line-height:1.7;margin-bottom:8px}
.paste-tip code{display:inline-block;background:rgba(34,211,238,.12);color:var(--primary);border-radius:6px;padding:2px 8px;font-size:11.5px;margin-top:4px}
.paste-panel textarea{width:100%;min-height:96px;resize:vertical;background:rgba(7,7,15,.7);border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:12.5px;line-height:1.6;padding:10px 12px;font-family:ui-monospace,Menlo,Consolas,monospace}
.paste-panel textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.paste-actions{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.paste-actions .muted{font-size:12px;margin-right:auto;color:var(--amber)}

/* ---------- 回收站 / 变更历史 ---------- */
.trash-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:var(--amber-soft);color:var(--amber);font-size:11px;font-weight:600;text-align:center}
.tr-tabs{display:flex;gap:4px;padding:0 18px;border-bottom:1px solid var(--line)}
.tr-tab{height:38px;padding:0 14px;border:none;background:transparent;color:var(--text-3);font-size:13px;cursor:pointer;border-bottom:2px solid transparent;transition:.12s}
.tr-tab:hover{color:var(--text-2)}
.tr-tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.tr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.02)}
.tr-main{font-size:13.5px;min-width:0}
.tr-main b{font-weight:600}
.tr-main .muted{font-size:11.5px;margin-top:2px}
.tr-btns{display:flex;gap:6px;flex:none}
.empty-hint{padding:28px 12px;text-align:center;color:var(--text-3);font-size:13px;line-height:1.7}