/* ============================================================================
   RobotERP · OZON 工作台视觉改版  |  ozon-ui.css
   ----------------------------------------------------------------------------
   作用范围：**只作用于 `.ozon-tab-panel` 内部**（商品上架/上架记录/商品管理/订单管理
   这四个面板没改结构，但会一起继承下面的表格与控件升级，属于预期效果）。
   面板之外的页面（首页、AIGC、管理后台等）完全不受影响。

   设计原则：
     1. 发丝线优先 —— 分组用 1px 分隔线 + 留白，不靠一层层描边盒子
     2. 卡片只留给真正需要浮起的地方（一页最多一两处）
     3. 数字用等宽表格数字（tabular-nums）右对齐；订单号/SKU 走等宽字体
     4. 形状只有三档：控件 10px / 面板 16px / 胶囊 999px
     5. 颜色一律取 style.css 里的主题变量，4 套主题直接套

   注意：本文件不改任何 id、不改任何 onclick、不碰 JS 逻辑，
        所有 <table><tbody id="xxx"> 结构原样保留，由既有渲染函数继续填充。
   ========================================================================== */

/* ------------------------------------------------------------ 局部令牌 */
.ozon-tab-panel {
  --oz-r-panel: 16px;
  --oz-r-ctl: 10px;
  --oz-r-pill: 999px;
  --oz-hair: color-mix(in srgb, var(--border-color) 58%, transparent);
  --oz-hair-soft: color-mix(in srgb, var(--border-color) 34%, transparent);
  --oz-sunken: color-mix(in srgb, var(--text-muted) 7%, transparent);
  --oz-elev-1: 0 1px 2px color-mix(in srgb, var(--text-primary) 6%, transparent);
  --oz-elev-2: 0 10px 30px -14px color-mix(in srgb, var(--text-primary) 26%, transparent);
  --oz-ease: cubic-bezier(.16, 1, .3, 1);
  --oz-display: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  --oz-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

/* 只给这次改写过结构的 5 个面板加统一内边距；
   另外 4 个面板（商品上架/上架记录/商品管理/订单管理）自带内层 padding，
   这里不动，免得叠成两层。 */
#ozon-panel-market, #ozon-panel-tools, #ozon-panel-finance,
#ozon-panel-returns, #ozon-panel-logistics { padding: 10px 16px 16px; }
#ozon-panel-market > div, #ozon-panel-tools > div, #ozon-panel-finance > div,
#ozon-panel-returns > div, #ozon-panel-logistics > div { min-width: 0; }

/* ---------------------------------------------------------------------------
   【关键】这 5 个面板必须走「块级 + 自己滚动」，不能是 flex 容器。
   ---------------------------------------------------------------------------
   原因：style.css 里 `.ozon-tab-panel.active{display:flex;flex-direction:column}`。
   一旦面板是列方向 flex，它的每个直接子元素（指标带、每一张面板卡）都成了
   flex 项，默认 flex-shrink:1 —— 内容总高超过面板高度时，浏览器**不会让面板
   滚动，而是把每张卡片按比例压扁**；卡片自身又带 overflow:hidden，
   于是里面的字被从下往上裁掉。真机表现（1392×776）：
     · 市场分析指标带被压到 46.6px（需要 96px）→ 数字只露一半
     · 仓库物流指标带被压到 2px → 整条消失
     · 物流面板 scrollHeight 838 / clientHeight 694 → 面板不滚动，内容被压

   块级容器 + overflow-y:auto（面板内联已给）才是预览版的行为：卡片保持自然
   高度，超出部分交给面板滚动。选择器带 .active，不影响收起时的 display:none。 */
#ozon-panel-market.active, #ozon-panel-tools.active, #ozon-panel-finance.active,
#ozon-panel-returns.active, #ozon-panel-logistics.active { display: block; }

/* -------------------------------------------------------------- 页头 */
/* 页头：标题已由顶部栏承担，这里只留徽标 + 说明，所以整体高度压到一行，
   底部间距也从 14px 收到 10px —— 右上角的按钮不再离顶部栏一大截。 */
.oz-head {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.oz-head-l { min-width: 0; }
.oz-head-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.oz-head-desc { font-size: 12px; color: var(--text-muted); }
.oz-head h2 {
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--text-primary); margin: 0;
  display: flex; align-items: center; gap: 9px;
}
.oz-head p { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }
.oz-head-r { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ 指标带 */
.oz-ribbon {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--oz-r-panel);
  overflow: hidden; box-shadow: var(--oz-elev-1);
  margin-bottom: 14px;
}
/* 固定高度：不管有没有迷你走势、有没有数据，每一格尺寸都一样。
   ── 2026-09-24 修正两处老毛病 ──
   ① 单元格内每一项都补 flex:none —— 否则列方向 flex 会把「迷你走势槽」
      从 30px 压成 8.3px（实测），走势线细到看不见；
   ② 原来走势槽与底部说明都用 margin-top:auto，两者平分剩余空间，
      导致「有走势的格子」与「没走势的格子」的底部文字不在同一水平线（实测差 8px）。
      改成全部顶对齐：标签 / 大数字 / 说明 三行在所有格子里严格对齐，
      迷你走势固定跟在大数字下方，剩余空间留在格子底部 —— 与预览版一致。 */
.oz-rb { padding: 13px 16px 12px; min-width: 0; min-height: 96px; display: flex; flex-direction: column; }
.oz-rb > * { flex: none; }
.oz-rb + .oz-rb { border-left: 1px solid var(--oz-hair-soft); }
.oz-rb-k {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
/* line-height 不能用 1：25px 的字形实际占 29px（含上下伸部），
   line-height:1 的行盒只有 25px。子元素一旦带 overflow:hidden（下面为长数字
   防溢出加的那条），上下各 2px 就会被削掉 —— 正是「数字被削一半」那类问题。
   1.2 让行盒包住字形（30px），既保留省略号又不裁字。 */
.oz-rb-v {
  font-family: var(--oz-display); font-weight: 700;
  font-size: 25px; line-height: 1.2; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 5px; color: var(--text-primary);
}
.oz-rb-v i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-muted); }
/* 长数字（如 ₽394,167）在窄格里要能缩，不能把格子顶宽、也不能顶出边框 */
.oz-rb-v > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oz-rb-f { padding-top: 6px; font-size: 11.5px; color: var(--text-muted); min-height: 16px; }
.oz-rb.ok .oz-rb-v { color: var(--success-ink); }
.oz-rb.warn .oz-rb-v { color: var(--warning-ink); }
.oz-rb.bad .oz-rb-v { color: var(--danger-ink); }
.oz-rb.accent .oz-rb-v { color: var(--primary-color); }

/* -------------------------------------------------------------- 面板 */
.oz-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--oz-r-panel);
  box-shadow: var(--oz-elev-1);
  display: flex; flex-direction: column;
  min-width: 0; overflow: hidden;
}
.oz-panel-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px; min-height: 48px;
  border-bottom: 1px solid var(--oz-hair-soft);
  flex: none; flex-wrap: wrap;
}
.oz-panel-ttl {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--text-primary);
}
.oz-panel-ttl .oz-cnt {
  font-size: 11px; font-weight: 700; padding: 1px 7px;
  border-radius: var(--oz-r-pill); background: var(--oz-sunken);
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.oz-panel-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.oz-panel-bd { padding: 0; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.oz-panel-bd > * { min-width: 0; }
.oz-panel-bd.oz-pad { padding: 13px 15px; }
.oz-panel-ft {
  border-top: 1px solid var(--oz-hair-soft); padding: 8px 15px;
  display: flex; align-items: center; gap: 10px; font-size: 12px;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--oz-sunken) 50%, transparent);
}
.oz-push { margin-left: auto; }
.oz-tiny { font-size: 11px; color: var(--text-muted); }
.oz-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.oz-panel-bd > .oz-scroll { flex: 1 1 auto; }

/* 面板内滚动区最高高度（与原来各卡片 max-height 对齐，避免布局跳变） */
.oz-h-200 { max-height: 200px; }
.oz-h-250 { max-height: 250px; }
.oz-h-330 { max-height: 330px; }
.oz-h-420 { max-height: 420px; }

/* -------------------------------------------------------------- 栅格 */
.oz-grid { display: grid; gap: 14px; }
.oz-g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oz-g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oz-g-main { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.oz-g-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.oz-g-split { grid-template-columns: minmax(0, 1fr) minmax(0, 392px); }
.oz-mb14 { margin-bottom: 14px; }
.oz-mb10 { margin-bottom: 10px; }
@media (max-width: 1280px) {
  .oz-g-main, .oz-g-side, .oz-g-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .oz-g-2, .oz-g-3 { grid-template-columns: minmax(0, 1fr); }
  #ozon-panel-market, #ozon-panel-tools, #ozon-panel-finance,
  #ozon-panel-returns, #ozon-panel-logistics { padding: 12px; }
}

/* 并排面板等高：网格默认 stretch，内部滚动区负责消化多出来的内容 */
.oz-grid > .oz-panel { min-height: 0; }

/* -------------------------------------------------------------- 表格
   这是本次改版最省事、收益最大的一处：
   所有渲染函数照旧往 <tbody id="xxx"> 里塞 <tr>，这里只改样式。
   发丝线、吸附表头、等宽数字、行悬停 —— 全部由 CSS 完成，JS 零改动。 */
.ozon-tab-panel .data-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 12.5px;
}
.ozon-tab-panel .data-table th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); padding: 9px 13px;
  background: color-mix(in srgb, var(--bg-tertiary) 85%, var(--bg-card));
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}
.ozon-tab-panel .data-table td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--oz-hair-soft);
  vertical-align: middle; color: var(--text-primary);
}
.ozon-tab-panel .data-table tbody tr { transition: background .16s var(--oz-ease); }
.ozon-tab-panel .data-table tbody tr:hover td {
  background: color-mix(in srgb, var(--primary-color) 6%, transparent);
}
.ozon-tab-panel .data-table tr:last-child td { border-bottom: none; }

/* 表格外的滚动容器（原代码用内联 max-height，这里补齐圆角收口） */
.ozon-tab-panel .oz-scroll { overflow: auto; }

/* 数字列右对齐 + 等宽（由 JS 加 class 或用 :nth 兜底） */
.oz-tnum { font-variant-numeric: tabular-nums; }
.oz-mono { font-family: var(--oz-mono); font-size: .94em; letter-spacing: -.01em; }
.oz-r { text-align: right; }
.oz-pos { color: var(--success-ink); font-variant-numeric: tabular-nums; }
.oz-neg { color: var(--danger-ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 状态标签 */
.oz-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 9px; border-radius: var(--oz-r-pill);
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--oz-sunken); color: var(--text-secondary);
}
.oz-tag::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .85;
}
.oz-tag.oz-no-dot::before { display: none; }
.oz-tag.ok { background: color-mix(in srgb, var(--success-color) 22%, transparent); color: var(--success-ink); }
.oz-tag.warn { background: color-mix(in srgb, var(--warning-color) 26%, transparent); color: var(--warning-ink); }
.oz-tag.bad { background: color-mix(in srgb, var(--danger-color) 20%, transparent); color: var(--danger-ink); }
.oz-tag.info { background: color-mix(in srgb, var(--info-color) 20%, transparent); color: var(--info-ink); }



/* ------------------------------------------------------------ 细条占比 */
.oz-thin { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.oz-thin > i { display: block; height: 100%; }

/* 时效区间条（配送方式：min ~ max 天） */
.oz-range { position: relative; width: 58px; height: 4px; border-radius: 2px; flex: none; background: color-mix(in srgb, var(--text-muted) 16%, transparent); }
.oz-range > i {
  position: absolute; top: 0; bottom: 0; border-radius: 2px;
  left: calc(var(--a, 0) * 1%); width: calc((var(--b, 30) - var(--a, 0)) * 1%);
  background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 40%, transparent));
}

/* ------------------------------------------------------------ 键值表 */
.oz-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; padding: 12px 15px; font-size: 12.5px; }
.oz-kv dt { color: var(--text-muted); white-space: nowrap; }
.oz-kv dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.oz-kv dd.oz-mono { font-weight: 500; }

/* ------------------------------------------------------------ 时间轴 */
.oz-tl { padding: 4px 15px 14px; display: flex; flex-direction: column; }
.oz-tl-i { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; padding-bottom: 13px; position: relative; }
.oz-tl-i:last-child { padding-bottom: 0; }
.oz-tl-i:not(:last-child)::before {
  content: ""; position: absolute; left: 8.5px; top: 16px; bottom: 0;
  width: 1px; background: var(--oz-hair);
}
.oz-tl-i.done:not(:last-child)::before { background: color-mix(in srgb, var(--success-color) 45%, var(--oz-hair)); }
.oz-tl-d {
  width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; justify-self: center;
  background: var(--bg-card); border: 2px solid var(--border-color); position: relative; z-index: 1;
}
.oz-tl-i.done .oz-tl-d { border-color: var(--success-color); background: var(--success-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success-color) 24%, transparent); }
.oz-tl-i.now .oz-tl-d { border-color: var(--primary-color); background: var(--bg-card); box-shadow: 0 0 0 3px var(--primary-light); }
.oz-tl-t { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.oz-tl-t span { font-family: var(--oz-mono); font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.oz-tl-s { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }

/* ------------------------------------------------------------ 结果块 */
.oz-res-ok {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: var(--oz-r-ctl);
  background: color-mix(in srgb, var(--success-color) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--success-color) 40%, transparent);
  color: var(--success-ink); font-weight: 600; font-size: 13px;
  margin: 12px 15px;
}
.oz-res-err { border-radius: var(--oz-r-ctl); overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-card); margin-bottom: 10px; }
.oz-res-err-hd { display: flex; align-items: center; gap: 9px; padding: 9px 12px; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid var(--oz-hair-soft); }
.oz-res-err.warn .oz-res-err-hd { background: color-mix(in srgb, var(--warning-color) 24%, transparent); color: var(--warning-ink); }
.oz-res-err.bad  .oz-res-err-hd { background: color-mix(in srgb, var(--danger-color) 20%, transparent); color: var(--danger-ink); }
.oz-res-err-hd code { margin-left: auto; font-family: var(--oz-mono); font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.oz-res-err-bd { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.oz-res-err-bd .msg { font-size: 12.5px; line-height: 1.6; color: var(--text-primary); }
.oz-res-err-bd .hint {
  display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px;
  color: var(--text-secondary); padding: 8px 10px; border-radius: 8px;
  background: var(--oz-sunken);
}

/* ------------------------------------------------------------ 分段控件 */
.oz-seg {
  position: relative; display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border-radius: var(--oz-r-pill); background: var(--oz-sunken);
}
.oz-seg > button {
  position: relative; z-index: 1; height: 26px; padding: 0 12px;
  border-radius: var(--oz-r-pill); border: none; background: none;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; white-space: nowrap;
  transition: color .2s var(--oz-ease);
}
.oz-seg > button:hover { color: var(--text-secondary); }
.oz-seg > button.on { color: #fff; }
.oz-seg .oz-seg-thumb {
  position: absolute; z-index: 0; top: 3px; left: 3px; height: calc(100% - 6px);
  border-radius: var(--oz-r-pill); background: var(--primary-gradient);
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--primary-color) 80%, transparent);
  transition: transform .3s var(--oz-ease), width .3s var(--oz-ease);
  pointer-events: none;
}

/* -------------------------------------------------------- 工具页顶部导航 */
.oz-nav {
  position: sticky; top: -16px; z-index: 12;
  margin: -16px -16px 14px; padding: 22px 16px 10px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
  backdrop-filter: blur(16px) saturate(170%);
  border-bottom: 1px solid var(--oz-hair-soft);
}
.oz-nav-i {
  display: inline-flex; align-items: center;
  height: 32px; padding: 0 13px; border-radius: var(--oz-r-pill);
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border-color);
  cursor: pointer; white-space: nowrap; transition: all .18s var(--oz-ease);
}
.oz-nav-i:hover { border-color: var(--primary-color); color: var(--primary-color); transform: translateY(-1px); }
.oz-nav-i.on {
  background: var(--primary-gradient); border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--primary-color) 95%, transparent);
}
.oz-nav .oz-hint { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 760px) { .oz-nav .oz-hint { display: none; } }

.oz-sec { margin-bottom: 22px; scroll-margin-top: 58px; }
.oz-sec:last-child { margin-bottom: 0; }
.oz-sec-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.oz-sec-hd h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--text-primary); }
.oz-sec-hd .oz-desc { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }

/* ------------------------------------------------------- 汇率大输入 */
.oz-fx { display: grid; grid-template-columns: minmax(0, 1fr) 288px; }
@media (max-width: 960px) { .oz-fx { grid-template-columns: minmax(0, 1fr); } }
.oz-fx-main { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 14px; min-width: 0; }
.oz-fx-side {
  border-left: 1px solid var(--oz-hair-soft); padding: 18px 20px;
  display: flex; flex-direction: column; gap: 12px;
  background: color-mix(in srgb, var(--oz-sunken) 55%, transparent);
}
@media (max-width: 960px) { .oz-fx-side { border-left: none; border-top: 1px solid var(--oz-hair-soft); } }
.oz-fx-inputs { display: flex; align-items: flex-end; gap: 12px; }
@media (max-width: 640px) { .oz-fx-inputs { flex-direction: column; align-items: stretch; } }
.oz-fx-cell { flex: 1; min-width: 0; }
.oz-fx-cell .oz-cur { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin-bottom: 7px; }
.oz-fx-in {
  width: 100%; height: 60px; padding: 0 16px;
  border-radius: 14px; border: 1px solid var(--border-color);
  background: var(--bg-input); color: var(--text-primary);
  font-family: var(--oz-display); font-weight: 700; font-size: 27px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; outline: none;
  transition: border-color .18s var(--oz-ease), box-shadow .18s var(--oz-ease);
}
.oz-fx-in:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); }
.oz-fx-btn { height: 38px; border-radius: 12px; padding: 0 16px; flex: none; margin-bottom: 22px; }
.oz-fx-rate {
  border-radius: 13px; padding: 12px 13px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary-color) 15%, transparent), color-mix(in srgb, var(--primary-color) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary-color) 26%, transparent);
}
.oz-fx-rate .k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.oz-fx-rate .v {
  font-family: var(--oz-display); font-weight: 700; font-size: 21px;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin: 3px 0 2px; color: var(--text-primary);
}
.oz-fx-rate .v small { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.oz-fx-rate .t { font-size: 11px; color: var(--text-muted); }
.oz-fx-tbl { display: flex; flex-direction: column; }
.oz-fx-tr { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 12.5px; border-bottom: 1px dashed var(--oz-hair-soft); }
.oz-fx-tr:last-child { border-bottom: none; }
.oz-fx-tr span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.oz-fx-tr b { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); }
.oz-fx-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.oz-quick-i {
  height: 27px; padding: 0 11px; border-radius: var(--oz-r-pill);
  border: 1px solid var(--border-color); background: var(--bg-card);
  color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .18s var(--oz-ease);
}
.oz-quick-i:hover { border-color: var(--primary-color); color: var(--primary-color); }
.oz-quick-i.on { background: var(--primary-gradient); border-color: transparent; color: #fff; }

/* --------------------------------------------------------- 算价器排版
   只调排版与间距，不动任何 id（tp_/tpf_ 那 40 个输入框全部原样保留） */
.oz-calc { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 14px; align-items: start; }
@media (max-width: 1180px) { .oz-calc { grid-template-columns: minmax(0, 1fr); } }
.oz-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 1500px) { .oz-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .oz-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oz-fgrid > .oz-span2 { grid-column: span 2; }
.oz-fgroup { padding: 13px 15px 15px; }
.oz-fgroup + .oz-fgroup { border-top: 1px solid var(--oz-hair-soft); }
.oz-fgroup-hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.oz-fgroup-hd h4 { font-size: 12.5px; font-weight: 700; margin: 0; color: var(--text-primary); }
.oz-fgroup-hd span { font-size: 11px; color: var(--text-muted); }

/* 面板内的小号表单控件（原代码大量内联 height:26px，这里统一收敛） */
.ozon-tab-panel .oz-fgrid .form-input,
.ozon-tab-panel .oz-fgrid .form-select,
.ozon-tab-panel .oz-fgrid .tool-cat-btn {
  height: 30px !important; font-size: 12px !important; padding: 0 8px !important;
  border-radius: 8px;
}
.ozon-tab-panel .oz-fgrid .form-label { font-size: 11px !important; margin-bottom: 3px; color: var(--text-secondary); }

/* 结算单：像一张小票 */
.oz-receipt { position: sticky; top: 8px; }
.oz-rc-body { padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.oz-rc-big {
  padding: 13px 14px; border-radius: 13px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary-color) 14%, transparent), color-mix(in srgb, var(--primary-color) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--primary-color) 24%, transparent);
}
.oz-rc-big .k { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.oz-rc-big .v {
  font-family: var(--oz-display); font-weight: 700; font-size: 27px; line-height: 1.2;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--text-primary);
}
.oz-rc-big .v small { font-size: 12px; font-weight: 600; color: var(--text-muted); }

/* --------------------------------------------------------------- 提示 */
.oz-tip {
  display: flex; gap: 7px; align-items: center;
  margin-top: 10px; padding: 8px 11px; border-radius: 9px;
  font-size: 11.5px; line-height: 1.5;
  background: var(--oz-sunken); color: var(--text-secondary);
}
.oz-tip.hot { background: color-mix(in srgb, var(--warning-color) 24%, transparent); color: var(--warning-ink); }

/* --------------------------------------------------------- 翻译左右对照
   textarea 仍然是 textarea（JS 写的是 .value，换成 div 会直接坏掉），
   只是把它摆进「左原文 / 中按钮 / 右译文」的三栏栅格里，视觉与预览版一致。 */
.oz-trans {
  display: grid; grid-template-columns: minmax(0, 1fr) 46px minmax(0, 1fr);
  gap: 12px; align-items: stretch; padding: 14px 15px;
}
@media (max-width: 860px) {
  .oz-trans { grid-template-columns: minmax(0, 1fr); }
  .oz-trans-mid { flex-direction: row; }
}
.oz-trans-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.oz-trans-label { font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; }
.oz-trans-ta { font-size: 12.5px; line-height: 1.7; resize: vertical; min-height: 132px; }
.oz-trans-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* ============================================================================
   仓库物流：库存查询 / 库存报告 / 条形码查询 —— 三合一卡片
   ----------------------------------------------------------------------------
   一张卡片里三列并排，列与列之间只用两条**浅色竖线**分隔（不给每列单独描边，
   也不做成三张卡）。窄屏自动塌成一列，竖线改横向。
   ========================================================================== */
.oz-split3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.oz-split3-col { min-width: 0; padding: 12px 15px 14px; display: flex; flex-direction: column; }
.oz-split3-col + .oz-split3-col {
  border-left: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
}
.oz-split3-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.oz-split3-ttl { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-right: auto; }
.oz-split3-bd { min-width: 0; flex: 1 1 auto; }
@media (max-width: 1100px) {
  .oz-split3 { grid-template-columns: minmax(0, 1fr); }
  .oz-split3-col + .oz-split3-col {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
  }
}

/* ============================================================================
   仓库物流：物流追踪 + 库存概览 —— 两列合并卡
   ----------------------------------------------------------------------------
   和上面的三合一同一套语言：一张卡片、一条浅色竖线、窄屏塌成一列。
   ========================================================================== */
.oz-split2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); }
.oz-split2-col { min-width: 0; padding: 12px 15px 14px; display: flex; flex-direction: column; }
.oz-split2-col + .oz-split2-col {
  border-left: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
}
.oz-split2-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.oz-split2-ttl { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-right: auto; }
.oz-split2-bd { min-width: 0; flex: 1 1 auto; }
.oz-split2-ft {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--oz-hair-soft);
}
@media (max-width: 1100px) {
  .oz-split2 { grid-template-columns: minmax(0, 1fr); }
  .oz-split2-col + .oz-split2-col {
    border-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
  }
}

/* ============================================================================
   订单管理：卡片高度 = 页面可用高度
   ----------------------------------------------------------------------------
   面板本身是列方向 flex；把唯一那张卡片设成 flex:1 撑满，并把表格外层也设成
   flex:1 + min-height:0，表格区自己滚。这样"没有数据"时卡片仍然占满整页高度，
   不会缩成一小条。注意只作用于 #ozon-panel-orders，其它面板不受影响。
   ========================================================================== */
#ozon-panel-orders.active { display: flex; flex-direction: column; }
#ozonOrderCard { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#ozonOrderTableWrap { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ============================================================================
   财务管理：交易记录卡片撑到页面底部
   ----------------------------------------------------------------------------
   同样不能回到"允许子元素收缩"的坑里：先给所有直接子元素 flex:0 0 auto
   （保持自然高度、绝不压扁），只把最后一张卡片放到 flex:1 去吃掉剩余高度。
   ========================================================================== */
#ozon-panel-finance.active { display: flex; flex-direction: column; }
#ozon-panel-finance.active > * { flex: 0 0 auto; }
#ozon-panel-finance.active > .oz-panel:last-child { flex: 1 1 auto; min-height: 0; }
#ozon-panel-finance.active > .oz-panel:last-child > .oz-panel-bd { flex: 1 1 auto; min-height: 0; }
/* 撑满用的滚动区：取消 max-height 限制，交给 flex 决定高度 */
.oz-fill-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }

/* --------------------------------------------------------- 操作台（仓库物流）
   分段控件切换的三块内容：.oz-deck-pane 本身是 flex 行，
   切换时由 JS 改内联 display（'' 恢复成 flex / 'none' 隐藏）。 */
.oz-deck-pane { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --------------------------------------------------------- 空状态收口 */
.ozon-tab-panel td[colspan] { text-align: center; color: var(--text-muted); padding: 18px !important; }

/* ============================================================================
   行式列表（对齐预览版的 .rows / .row）
   ----------------------------------------------------------------------------
   这 5 个页面的列表原来是 <table>，跟预览版差得远。这里补齐行式布局：
   容器换成 <div class="oz-rows" id="...">，渲染函数输出 <div class="oz-row">。
   ========================================================================== */
.oz-rows { display: flex; flex-direction: column; }
.oz-rows > * + * { border-top: 1px solid var(--oz-hair-soft); }

.oz-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; min-height: 52px;
  transition: background .18s var(--oz-ease);
  position: relative;
}
.oz-row:hover { background: color-mix(in srgb, var(--primary-color) 5%, transparent); }
.oz-row-rail {
  position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary-color);
  opacity: 0; transform: scaleY(.4); transform-origin: center;
  transition: opacity .22s var(--oz-ease), transform .3s var(--oz-ease);
}
.oz-row:hover .oz-row-rail { opacity: 1; transform: scaleY(1); }
.oz-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oz-row-t {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  display: flex; align-items: center; gap: 7px; min-width: 0;
}
.oz-row-t > .oz-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oz-row-s {
  font-size: 11.5px; color: var(--text-muted);
  display: flex; align-items: center; gap: 7px; min-width: 0; flex-wrap: wrap;
}
.oz-row-end { display: flex; align-items: center; gap: 8px; flex: none; }
/* 右侧键值列：等宽数字 + 右对齐，一列数字扫一眼就能比大小 */
.oz-row-kv { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.35; }
.oz-row-kv b { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.oz-row-kv span { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; }
/* 悬停才出现的操作：预留宽度，出现/消失时右边数字不跳 */
.oz-row-act {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  min-width: 112px;
  opacity: 0; transform: translateX(6px);
  transition: opacity .2s var(--oz-ease), transform .26s var(--oz-ease);
}
.oz-row:hover .oz-row-act, .oz-row:focus-within .oz-row-act { opacity: 1; transform: none; }
@media (hover: none) { .oz-row-act { opacity: 1; transform: none; } }

/* 行数比旁边那栏少时把行均摊撑满，两块面板任何时候都等高 */
.oz-rows.oz-fill { flex: 1 1 auto; min-height: 0; }
.oz-rows.oz-fill > * { flex: 1 1 auto; min-height: 52px; max-height: 112px; }

.oz-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 34px 20px; text-align: center; color: var(--text-muted); font-size: 12.5px;
}

/* ---------------------------------------------------- 交易流水（按日分组） */
.oz-tx-date {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 15px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary);
  background: color-mix(in srgb, var(--bg-tertiary) 88%, var(--bg-card));
  border-top: 1px solid var(--oz-hair-soft);
  border-bottom: 1px solid var(--oz-hair-soft);
}
.oz-tx-date .n { font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.oz-tx-date .sum { margin-left: auto; font-variant-numeric: tabular-nums; }

.oz-tx {
  display: grid; grid-template-columns: 56px 92px minmax(0, 1fr) 132px 128px;
  gap: 12px; align-items: center;
  padding: 9px 15px; min-height: 46px;
  border-bottom: 1px solid var(--oz-hair-soft);
  transition: background .16s var(--oz-ease);
}
.oz-tx:hover { background: color-mix(in srgb, var(--primary-color) 5%, transparent); }
.oz-tx-time { font-family: var(--oz-mono); font-size: 11.5px; color: var(--text-muted); }
.oz-tx-type { display: flex; }
.oz-tx-desc { min-width: 0; }
.oz-tx-desc b { font-size: 12.5px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.oz-tx-desc span { font-size: 11px; color: var(--text-muted); font-family: var(--oz-mono); }
.oz-tx-ord { font-family: var(--oz-mono); font-size: 11.5px; color: var(--text-secondary); }
.oz-tx-amt { text-align: right; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1100px) {
  .oz-tx { grid-template-columns: 56px minmax(0, 1fr) 118px; }
  .oz-tx-type, .oz-tx-ord { display: none; }
}

/* --------------------------------------------------- 退货：左列表 + 右详情 */
.oz-ret-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; align-items: center;
  padding: 11px 15px; min-height: 62px; cursor: pointer; position: relative;
  border-bottom: 1px solid var(--oz-hair-soft);
  transition: background .18s var(--oz-ease);
}
.oz-ret-row:last-child { border-bottom: none; }
.oz-ret-row:hover { background: color-mix(in srgb, var(--primary-color) 5%, transparent); }
.oz-ret-row.on { background: var(--primary-light); }
.oz-ret-row.on::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary-color);
}

/* ---------------------------------------------------- 排行（热搜词 / 库存） */
.oz-rank-i {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.05fr) 62px;
  gap: 12px; align-items: center;
  padding: 9px 15px; min-height: 42px;
  border-bottom: 1px solid var(--oz-hair-soft);
  transition: background .16s var(--oz-ease);
}
.oz-rank-i:last-child { border-bottom: none; }
.oz-rank-i:hover { background: color-mix(in srgb, var(--primary-color) 5%, transparent); }
.oz-rank-n {
  font-family: var(--oz-display); font-weight: 700; font-size: 15px;
  color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: center;
}
.oz-rank-i.top .oz-rank-n { color: var(--rc, var(--primary-color)); }
.oz-rank-q { font-size: 12.5px; font-weight: 600; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oz-rank-bar { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text-muted) 9%, transparent); overflow: hidden; }
.oz-rank-bar > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc, var(--primary-color)) 40%, transparent), var(--rc, var(--primary-color))); }
.oz-rank-c { text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* ------------------------------------------- 运输批次：横向滚动吸附轨 */
.oz-hrail {
  display: flex; gap: 12px; padding: 13px 15px 15px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
}
.oz-hcard {
  flex: 0 0 258px; scroll-snap-align: start;
  border: 1px solid var(--border-color); border-radius: 14px;
  padding: 12px 13px 11px; background: var(--bg-card);
  display: flex; flex-direction: column; gap: 9px;
  transition: transform .28s var(--oz-ease), box-shadow .28s var(--oz-ease), border-color .2s var(--oz-ease);
}
.oz-hcard:hover { transform: translateY(-3px); box-shadow: var(--oz-elev-2); border-color: color-mix(in srgb, var(--primary-color) 38%, var(--border-color)); }
.oz-hcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oz-hcard-id { font-family: var(--oz-mono); font-size: 11.5px; font-weight: 600; color: var(--text-secondary); }
.oz-hcard-line { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oz-hcard-n { display: flex; align-items: baseline; gap: 6px; }
.oz-hcard-n b { font-family: var(--oz-display); font-weight: 700; font-size: 23px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.oz-hcard-n span { font-size: 11.5px; color: var(--text-muted); }
.oz-hcard-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: 1px dashed var(--oz-hair); }


/* ============================================================================
   财务管理：大字余额主视觉 + 资金流向条 + 走势图（对齐预览版）
   ========================================================================== */
.oz-fin-hero { display: grid; grid-template-columns: minmax(0, 336px) minmax(0, 1fr); }
@media (max-width: 1100px) { .oz-fin-hero { grid-template-columns: minmax(0, 1fr); } }

.oz-fin-bal {
  padding: 18px 20px 16px; border-right: 1px solid var(--oz-hair-soft);
  display: flex; flex-direction: column; gap: 13px;
  position: relative; overflow: hidden;
}
@media (max-width: 1100px) { .oz-fin-bal { border-right: none; border-bottom: 1px solid var(--oz-hair-soft); } }
.oz-fin-bal::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(320px circle at 8% 0%, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent 62%),
    radial-gradient(260px circle at 92% 108%, color-mix(in srgb, var(--info-color) 10%, transparent), transparent 60%);
}
.oz-fin-bal > * { position: relative; }

.oz-fin-big {
  font-family: var(--oz-display); font-weight: 700;
  font-size: clamp(30px, 3vw, 42px); line-height: 1.04; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
}
.oz-fin-big .cur { font-size: 19px; font-weight: 700; color: var(--text-muted); }

.oz-fin-sub { display: flex; gap: 20px; flex-wrap: wrap; }
.oz-fin-sub > div { min-width: 0; }
.oz-fin-sub .k { font-size: 11px; color: var(--text-muted); margin-bottom: 3px; }
.oz-fin-sub .v { font-size: 15.5px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* 资金流向条：销售额 vs 退款 占比 */
.oz-flow { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.oz-flow-bar {
  display: flex; height: 8px; border-radius: 5px; overflow: hidden;
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}
.oz-flow-bar > i { height: 100%; transition: width .9s var(--oz-ease); }
.oz-flow-bar > i.sales { background: linear-gradient(90deg, color-mix(in srgb, var(--success-color) 72%, #fff), var(--success-color)); }
.oz-flow-bar > i.refund { background: linear-gradient(90deg, var(--danger-color), color-mix(in srgb, var(--danger-color) 72%, #fff)); }
.oz-flow-lg { display: flex; gap: 15px; font-size: 11.5px; color: var(--text-muted); flex-wrap: wrap; }
.oz-flow-lg span { display: flex; align-items: center; gap: 6px; }
.oz-flow-lg b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.oz-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.oz-dot.ok { background: var(--success-color); }
.oz-dot.bad { background: var(--danger-color); }
.oz-dot.warn { background: var(--warning-color); }
.oz-dot.info { background: var(--info-color); }

/* 固定高度：没有数据时图表区也占住位置，卡片不会缩水 */
.oz-fin-chart { display: flex; flex-direction: column; min-width: 0; min-height: 302px; }
.oz-fin-bal { min-height: 302px; }
.oz-fin-chart-hd { display: flex; align-items: flex-end; gap: 14px; padding: 15px 18px 4px; flex-wrap: wrap; }
.oz-fin-chart-hd .ttl { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.oz-chart-box { position: relative; width: 100%; height: 236px; padding: 6px 14px 14px; }
.oz-chart-box canvas { width: 100% !important; height: 100% !important; }

/* 图表右上角的汇总小条 */
.oz-chips { display: flex; align-items: center; gap: 14px; }
.oz-chips > div { display: flex; flex-direction: column; line-height: 1.25; }
.oz-chips .k { font-size: 10.5px; color: var(--text-muted); }
.oz-chips .v { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.oz-chips-sep { width: 1px; height: 22px; background: var(--border-color); }
/* 卡头里的汇总小条在窄屏要能换行，不能把左侧标题挤没 */
.oz-panel-hd .oz-chips { flex-wrap: wrap; row-gap: 4px; }
/* 走势图容器：市场分析走 262px 档。高度写死 —— 没数据时图表区照样占住，
   卡片不会缩水，也不会出现"一块空白大框"。 */
.oz-chart-h-260 { height: 262px; }

/* --------------------------------------------------------- 环形图 + 图例
   对齐预览版：左边环形图（中心显示本周总数），右边图例逐行列出各状态的
   数量与占比。面板被同一行的排行列表拉高时，整块在剩余空间里垂直居中。 */
.oz-donut-wrap {
  display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 10px; align-items: center; padding: 10px 15px 16px; margin: auto 0;
}
@media (max-width: 520px) { .oz-donut-wrap { grid-template-columns: minmax(0, 1fr); } }
.oz-donut-canvas { position: relative; height: 186px; }
.oz-legend { display: flex; flex-direction: column; gap: 2px; }
.oz-legend-i {
  display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto;
  gap: 9px; align-items: center; padding: 7px 8px; border-radius: 9px;
  font-size: 12px; transition: background .16s var(--oz-ease);
}
.oz-legend-i:hover { background: var(--oz-sunken); }
.oz-legend-sq { width: 9px; height: 9px; border-radius: 3px; }
.oz-legend-n { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--text-primary); }
.oz-legend-p { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 11.5px; min-width: 42px; text-align: right; }

/* ============================================================================
   状态筛选胶囊（退货管理）
   ========================================================================== */
.oz-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.oz-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; border-radius: var(--oz-r-pill);
  border: 1px solid var(--border-color); background: var(--bg-card);
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  cursor: pointer; transition: all .18s var(--oz-ease);
}
.oz-pill:hover { border-color: var(--primary-color); color: var(--primary-color); }
.oz-pill.on { background: var(--primary-gradient); border-color: transparent; color: #fff; }
.oz-pill .n { font-variant-numeric: tabular-nums; opacity: .72; font-weight: 500; }
.oz-pills .oz-hint { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }

/* 指标带里的迷你走势 */
.oz-spark { width: 100%; height: 26px; margin-top: 8px; display: block; }
.oz-spark .line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oz-spark .area { stroke: none; opacity: .18; }

/* 指标带在窄屏下的收口 */
@media (max-width: 900px) {
  .oz-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oz-rb + .oz-rb { border-left: none; border-top: 1px solid var(--oz-hair-soft); }
}


/* 结算单：右栏小票（定价 / 利润计算共用） */
.oz-rc-sub {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; color: var(--text-secondary);
}
.oz-rc-sub b { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 15px; color: var(--text-primary); }
.oz-rc-detail { font-size: 12px; color: var(--text-primary); }
.oz-rc-detail table { width: 100%; border-collapse: collapse; }

/* 指标带里的迷你走势槽（无数据时也占住 30px，卡片高度不变）
   高度写死 + flex:none，避免被列方向 flex 压成几个像素。
   位置紧跟底部说明之后（不再 margin-top:auto），这样所有格子的
   标签/大数字/说明三行都在同一水平线上，与预览版一致。 */
.oz-spark-slot { flex: none; margin-top: 0; padding-top: 6px; height: 30px; }
.oz-spark-slot svg { width: 100%; height: 24px; display: block; }
.oz-spark-slot .line { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.oz-spark-slot .area { stroke: none; opacity: .18; }