/* =========================================================
   AI Cockpit · 运营中心（#page-8）视觉重构
   用法：在 app.html 现有样式之后引入本文件（或粘到 <style> 末尾）。
   只覆盖样式，不改动 DOM / JS；所有选择器以 #page-8 限定。
   ========================================================= */

/* ---------- 0.0 字体（自托管） ----------
   原先是从 fonts.googleapis.com 引一个 <link>，但站点的内容安全策略是
   default-src 'self' / style-src 'self' 'unsafe-inline'，既没给 googleapis
   开口子、也没有 font-src（回落到 default-src 'self'），那个 link 从上线起
   就一直被浏览器拦掉，三种字体一次都没加载成功过，控制台每次报一条违规。

   改成自己托管，现有安全策略一个字都不用动。另一个理由更实际：这个产品面向
   国内，fonts.googleapis.com 本来就时连时不连，就算把策略放开，国内用户照样
   等一次超时后拿不到字体。

   只自托管拉丁字体（数字和英文，共 6 个文件 116KB）。中文的 Noto Sans SC 没有
   自托管——Google 把它切成 404 个分片、好几兆，而 font-family 里排在后面的
   PingFang SC / 微软雅黑 是系统自带的，效果一样，不值得为此让每个用户多下几兆。
   它仍然留在 font-family 列表里：谁本机装了就用得上。
   ---------------------------------------------------------------- */

@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/fonts/manrope-500.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/fonts/manrope-600.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/fonts/manrope-700.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/fonts/manrope-800.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 0. 设计令牌 ---------- */
#page-8{
  --oc-bg:#F5F4F7;          /* 页面底：带一点点粉紫偏向的灰 */
  --oc-surface:#FFFFFF;
  --oc-surface-2:#FAF9FB;
  --oc-ink:#17151C;
  --oc-ink-2:#4B4756;
  --oc-muted:#7C7788;
  --oc-line:#E6E3EB;
  --oc-line-2:#EFEDF2;
  /* 填充色跟全站品牌色对齐。原来这里是收敛过的 #E5335F，但页面其余部分
     （侧边栏当前项、升级专业版、+店铺绑定、连接 TikTok）全是 #FF2C55，
     同屏出现两个差一点点的红，看起来像没对齐而不是设计。
     换鲜色没有可读性代价：--oc-accent 只用于填充/边框/光圈，一处都没当过
     小号文字色；需要彩色文字的地方走下面的 --oc-accent-ink（对白底 5.8:1）。 */
  --oc-accent:#FF2C55;
  --oc-accent-ink:#C41F48;
  --oc-accent-soft:#FFF0F3;
  --oc-accent-soft-2:#FFDCE3;
  --oc-crit:#C22B45; --oc-crit-soft:#FBE9EC;   /* 高 */
  --oc-warn:#B7770B; --oc-warn-soft:#FBF1DC;   /* 中 */
  --oc-info:#2F5FD0; --oc-info-soft:#E8EEFB;   /* 低 */
  --oc-good:#1D8F63; --oc-good-soft:#E3F5EC;
  --oc-shadow-sm:0 1px 2px rgba(23,21,28,.05);
  --oc-shadow-md:0 6px 18px -8px rgba(23,21,28,.18),0 1px 2px rgba(23,21,28,.06);
  --oc-font:"Manrope","Noto Sans SC",-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --oc-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --oc-r-lg:14px; --oc-r-md:10px; --oc-r-sm:7px;
  background:var(--oc-bg);
  font-family:var(--oc-font);
  color:var(--oc-ink);
  font-size:13.5px;
}
#page-8 .num,#page-8 .oc-kpi-value,#page-8 .oc-product-metric b,#page-8 .oc-table td,#page-8 .oc-chip b,#page-8 .oc-ev b{
  font-variant-numeric:tabular-nums;
}

/* ---------- 1. 顶栏 & 店铺条 ---------- */
#page-8 .topbar{
  height:56px;padding:0 28px;display:flex;align-items:center;gap:14px;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--oc-line);
}
#page-8 .tb-back{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:var(--oc-muted);border:1px solid var(--oc-line);background:var(--oc-surface)}
#page-8 .tb-title{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--oc-ink)}
#page-8 .tb-badge.tbb-p{
  background:var(--oc-accent-soft);color:var(--oc-accent-ink);border:1px solid var(--oc-accent-soft-2);
  font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:99px;
}
#page-8 .tb-sub{color:var(--oc-muted);font-size:12.5px}
#page-8 .api-pill{border:1px solid var(--oc-line);background:var(--oc-surface);border-radius:99px;padding:3px 10px;font-size:11.5px;font-weight:700;color:var(--oc-ink-2)}

#page-8 .global-store-strip{padding:10px 28px 12px;display:flex;align-items:center;gap:8px;background:transparent;border-bottom:0}
#page-8 .gs-scroller{gap:8px}
#page-8 .gs-item{
  display:flex;align-items:center;gap:9px;padding:7px 12px 7px 8px;min-width:150px;
  border:1px solid var(--oc-line);border-radius:10px;background:var(--oc-surface);
  box-shadow:none;transition:border-color .15s,box-shadow .15s;
}
#page-8 .gs-item:hover{border-color:var(--oc-line);background:var(--oc-surface-2)}
#page-8 .gs-item.gs-active{border-color:var(--oc-accent);box-shadow:0 0 0 3px var(--oc-accent-soft)}
#page-8 .gs-av{width:24px;height:24px;border-radius:7px;font-size:11px;font-weight:800}
#page-8 .gs-name{font-size:12.5px;font-weight:700;color:var(--oc-ink);line-height:1.2}
#page-8 .gs-active .gs-name{color:var(--oc-accent-ink)}
#page-8 .gs-cat{font-size:11px;color:var(--oc-muted)}
#page-8 .gs-add{width:auto;height:auto;padding:8px 11px;border:1px dashed var(--oc-line);border-radius:10px;color:var(--oc-muted);background:transparent}
#page-8 .bind-store-btn{
  margin-left:auto;background:var(--oc-accent);color:#fff;border:1px solid var(--oc-accent);
  border-radius:9px;padding:6px 12px;font-size:12.5px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
#page-8 .bind-store-btn:hover{background:var(--oc-accent-ink)}

/* ---------- 2. 报告容器与标题 ---------- */
/* 内容列与页面其它部分左对齐。原来是 max-width:1040 + margin:0 auto 居中，
   但顶栏和店铺切换条都是左对齐（.main 起点 272 + 28 内边距 = 300）。在 2100
   宽的屏上居中会让内容从 x=666 才开始，比上面的店铺条缩进 366px，中间空出
   一大片——这就是「布局难受」的主因。
   另一个副作用：.oc-wrap 自己是滚动容器（基础样式里 overflow-y:auto），居中时
   滚动条会吊在屏幕中间 x≈1706，而不是窗口右边缘。撑满后自然归位。
   1900px 是给超宽屏留的闸，2100 宽的屏上够不着（那里 .main 只有 1828）。 */
#page-8 .oc-wrap{max-width:1900px;margin:0;padding:26px 28px 60px;display:flex;flex-direction:column;gap:22px}
/* app.html 基础样式第 2571 行有 `.oc-wrap > *{max-width:1080px;margin:0 auto}`，
   把每个直接子块都钉死在 1080 并居中。之前这里只覆盖了 margin，没覆盖
   max-width，所以上面放开的宽度传不到内容上。 */
#page-8 .oc-wrap > *{margin:0;max-width:none}
#page-8 .oc-head{display:flex;align-items:flex-end;gap:16px}
#page-8 .oc-store{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--oc-ink)}
#page-8 .oc-date{color:var(--oc-muted);font-size:12.5px;margin-top:4px}
#page-8 .oc-refresh{
  margin-left:auto;background:var(--oc-accent);color:#fff;border:1px solid var(--oc-accent);
  border-radius:9px;padding:7px 13px;font-size:12.5px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
#page-8 .oc-refresh:hover{background:var(--oc-accent-ink)}
#page-8 .oc-refresh:disabled{opacity:.6}

/* 卡片：默认改为"无壳区块"，只有需要成为对象的块才加壳 */
#page-8 .oc-card{background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;display:flex;flex-direction:column;gap:12px}
#page-8 .oc-card-title{
  display:flex;align-items:baseline;gap:10px;margin:0;padding:0;
  font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:var(--oc-ink);border:0;
}
#page-8 .oc-hint{margin-left:auto;font-size:12px;font-weight:500;color:var(--oc-muted)}
#page-8 .oc-count{font-size:11.5px;font-weight:700;color:var(--oc-accent-ink);background:var(--oc-accent-soft);padding:2px 8px;border-radius:99px}

/* ---------- 3. A · 经营结果：指标带 ---------- */
#page-8 #ocKpiContent{display:flex;flex-direction:column}
#page-8 .oc-kpi-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  background:var(--oc-surface);border:1px solid var(--oc-line);border-radius:var(--oc-r-lg) var(--oc-r-lg) 0 0;
  box-shadow:var(--oc-shadow-sm);overflow:hidden;
}
#page-8 .oc-kpi{padding:16px 18px 14px;border:0;border-radius:0;background:transparent;display:flex;flex-direction:column;gap:6px}
#page-8 .oc-kpi + .oc-kpi{border-left:1px solid var(--oc-line-2)}
#page-8 .oc-kpi-label{font-size:12px;font-weight:600;color:var(--oc-muted)}
#page-8 .oc-kpi-value{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--oc-ink)}
#page-8 .oc-kpi-sub{font-size:12px;color:var(--oc-muted)}
#page-8 .oc-goal{
  display:flex;align-items:center;gap:14px;padding:11px 18px;font-size:12.5px;
  background:var(--oc-surface-2);border:1px solid var(--oc-line);border-top:0;border-radius:0 0 var(--oc-r-lg) var(--oc-r-lg);
}
#page-8 .oc-goal-head{display:flex;align-items:center;gap:12px;width:100%;margin:0}
#page-8 .oc-goal-head b{font-weight:700;color:var(--oc-ink)}
#page-8 .oc-goal-head span{color:var(--oc-muted)}
#page-8 .oc-goal-edit{
  margin-left:auto;background:var(--oc-accent-soft);color:var(--oc-accent-ink);border:0;
  border-radius:8px;padding:5px 10px;font-size:12px;font-weight:700;
}
#page-8 .oc-goal-track{height:6px;border-radius:99px;background:var(--oc-line);flex:1}
#page-8 .oc-goal-fill{height:100%;border-radius:99px;background:var(--oc-accent)}
#page-8 .oc-goal-note{color:var(--oc-muted)}

/* ---------- 4. 今日简报：AI 提示条 ---------- */
#page-8 #ocSummary{
  margin:0;padding:16px 18px 12px 60px;position:relative;
  background:linear-gradient(90deg,var(--oc-accent-soft),var(--oc-surface) 60%);
  border:1px solid var(--oc-accent-soft-2);border-radius:var(--oc-r-lg) var(--oc-r-lg) 0 0;
  font-size:14px;font-weight:600;line-height:1.55;color:var(--oc-ink);
}
#page-8 #ocSummary::before{
  content:"AI";position:absolute;left:18px;top:16px;width:30px;height:30px;border-radius:9px;
  background:var(--oc-accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;
  box-shadow:var(--oc-shadow-sm);font-family:var(--oc-font);
}
#page-8 #ocChips{
  display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;padding:0 18px 16px 60px;
  background:linear-gradient(90deg,var(--oc-accent-soft),var(--oc-surface) 60%);
  border:1px solid var(--oc-accent-soft-2);border-top:0;border-radius:0 0 var(--oc-r-lg) var(--oc-r-lg);
}
#page-8 #ocChips{margin-top:-12px} /* 与上方简报块拼成一个整体 */
#page-8 .oc-chip{display:inline-flex;align-items:baseline;gap:5px;padding:0;border:0;background:transparent;font-size:12.5px;color:var(--oc-muted)}
#page-8 .oc-chip b{font-size:14px;font-weight:800;color:var(--oc-ink)}

/* ---------- 5. B · 发现与建议 ---------- */
#page-8 .oc-findings{display:flex;flex-direction:column;gap:12px}
/* 宽屏把建议卡排成两列。卡内本来就是「现状 | 解决方式」左右分栏，单列时这两栏
   在 1768px 下各占 880，而正文有 max-width:56ch 的行长上限（约 420px），右边会
   空掉一半。排成两列后每张卡 878、栏内 440，正好接住 56ch，6 张卡也从 6 行压到
   3 行，少滚一屏。
   写死两列而不用 auto-fill：auto-fill 在超宽屏上会挤出第三列，那时卡内分栏只剩
   290 宽就太窄了。1500px 以下维持单列，笔记本不受影响。 */
@media (min-width:1500px){
  #page-8 .oc-findings{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}
#page-8 .oc-finding{
  background:var(--oc-surface);border:1px solid var(--oc-line);border-left-width:1px;border-radius:var(--oc-r-lg);
  box-shadow:var(--oc-shadow-sm);padding:0;overflow:hidden;transition:box-shadow .2s;
}
#page-8 .oc-finding:hover{box-shadow:var(--oc-shadow-md)}
#page-8 .oc-finding.sev-high,#page-8 .oc-finding.sev-medium,#page-8 .oc-finding.sev-low{border-left:1px solid var(--oc-line)}

/* 头部：商品名 + 严重度 */
#page-8 .oc-finding-head{display:flex;align-items:flex-start;gap:12px;padding:14px 16px 0;margin:0}
#page-8 .oc-finding-title{
  font-size:12px;font-weight:500;color:var(--oc-muted);line-height:1.4;order:2;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#page-8 .oc-finding-head > .oc-sev{order:1;margin-top:1px}
#page-8 .oc-finding-obj{padding:2px 16px 0;margin:0;font-family:var(--oc-mono);font-size:11px;color:var(--oc-muted)}
#page-8 .oc-finding-issues{margin:0;padding:0;display:flex;flex-direction:column}
#page-8 .oc-finding-issue{padding:0;border:0;margin:0}
#page-8 .oc-finding-issue + .oc-finding-issue{border-top:1px solid var(--oc-line-2)}

/* 结论句作为主标题 */
#page-8 .oc-issue-title{
  display:flex;align-items:flex-start;gap:10px;padding:8px 16px 12px;margin:0;
  font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.35;color:var(--oc-ink);text-wrap:balance;
}
#page-8 .oc-issue-title > .oc-sev{display:none} /* 头部已有严重度徽章，这里不重复 */

#page-8 .oc-sev{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:6px;
  font-size:11px;font-weight:800;letter-spacing:.04em;white-space:nowrap;border:0;
}
#page-8 .oc-sev::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#page-8 .oc-sev.high{color:var(--oc-crit);background:var(--oc-crit-soft)}
#page-8 .oc-sev.medium{color:var(--oc-warn);background:var(--oc-warn-soft)}
#page-8 .oc-sev.low{color:var(--oc-info);background:var(--oc-info-soft)}

/* 现状 / 解决方式 双栏 */
#page-8 .oc-section-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--oc-line-2);margin:0}
#page-8 .oc-section{padding:14px 16px;border:0;border-radius:0;background:transparent;display:flex;flex-direction:column;gap:10px;min-width:0}
#page-8 .oc-section + .oc-section{border-left:1px solid var(--oc-line-2)}
#page-8 .oc-section.oc-solution{background:var(--oc-surface-2);border-color:var(--oc-line-2)}
#page-8 .oc-section-label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--oc-muted);margin:0}
#page-8 .oc-solution .oc-section-label{color:var(--oc-accent-ink)}
#page-8 .oc-section-text{font-size:13px;line-height:1.6;color:var(--oc-ink-2);margin:0;max-width:56ch}
#page-8 .oc-section-text strong{font-weight:700;color:var(--oc-ink);font-size:13.5px}
#page-8 .oc-action-badge{
  display:inline-flex;align-self:flex-start;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;
  background:var(--oc-good-soft);color:var(--oc-good);border:0;
}

/* 证据小块 */
#page-8 .oc-evidence{display:flex;flex-wrap:wrap;gap:6px;margin:0}
#page-8 .oc-ev{
  display:inline-flex;gap:5px;align-items:baseline;padding:4px 9px;border-radius:var(--oc-r-sm);
  background:var(--oc-surface);border:1px solid var(--oc-line);font-size:12px;color:var(--oc-muted);
}
#page-8 .oc-ev b{color:var(--oc-ink);font-weight:700}

/* 操作行 */
#page-8 .oc-action-row{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 0 0;border-top:1px dashed var(--oc-line)}
#page-8 .oc-action-desc{flex:1;min-width:180px;font-size:12px;color:var(--oc-muted);margin:0}
#page-8 .oc-action-desc .oc-expected{color:var(--oc-ink-2)}
#page-8 .oc-btn-exec,#page-8 .oc-btn-dismiss,#page-8 .oc-mini-btn{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  font-size:12px;font-weight:700;border:1px solid var(--oc-line);background:var(--oc-surface);color:var(--oc-ink-2);
  transition:background .15s,transform .1s;
}
#page-8 .oc-btn-dismiss:hover,#page-8 .oc-mini-btn:hover{background:var(--oc-surface-2)}
#page-8 .oc-btn-exec{background:var(--oc-accent);border-color:var(--oc-accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#page-8 .oc-btn-exec:hover{background:var(--oc-accent-ink)}
#page-8 .oc-btn-exec:active,#page-8 .oc-btn-dismiss:active{transform:translateY(1px)}
#page-8 .oc-btn-exec:disabled{opacity:.55}
#page-8 .oc-finding-done{font-size:12.5px;font-weight:700;color:var(--oc-muted)}
#page-8 .oc-finding-done.ok{color:var(--oc-good)}
#page-8 .oc-more-findings{padding:4px 0 0}
#page-8 .oc-more-findings button{
  width:100%;padding:9px;border-radius:var(--oc-r-md);border:1px dashed var(--oc-line);background:transparent;
  color:var(--oc-muted);font-size:12.5px;font-weight:600;
}

/* ---------- 6. C · 商品象限 & 商品行 ---------- */
#page-8 .oc-quadrant-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#page-8 .oc-quadrant{
  background:var(--oc-surface);border:1px solid var(--oc-line);border-radius:var(--oc-r-md);padding:12px 14px;
  text-align:left;box-shadow:var(--oc-shadow-sm);transition:border-color .15s,box-shadow .15s;
}
#page-8 .oc-quadrant:hover{border-color:var(--oc-line);box-shadow:var(--oc-shadow-md)}
#page-8 .oc-quadrant[aria-expanded="true"]{border-color:var(--oc-accent);box-shadow:0 0 0 3px var(--oc-accent-soft)}
#page-8 .oc-quadrant-name{font-size:12px;font-weight:700;color:var(--oc-muted)}
#page-8 .oc-quadrant-count{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--oc-ink);margin:4px 0 2px}
#page-8 .oc-quadrant-count small{font-size:12px;color:var(--oc-muted);font-weight:600;margin-left:3px}
#page-8 .oc-quadrant-meta{font-size:12px;color:var(--oc-muted)}
#page-8 .oc-quadrant-detail{margin-top:2px}
#page-8 .oc-product-list{background:var(--oc-surface);border:1px solid var(--oc-line);border-radius:var(--oc-r-lg);box-shadow:var(--oc-shadow-sm);overflow:hidden;display:flex;flex-direction:column;gap:0}
#page-8 .oc-product-row{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 16px;
  border:0;border-radius:0;background:transparent;box-shadow:none;margin:0;
}
#page-8 .oc-product-row + .oc-product-row{border-top:1px solid var(--oc-line-2)}
#page-8 .oc-product-title{
  font-size:13px;font-weight:700;line-height:1.35;color:var(--oc-ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
#page-8 .oc-product-code{font-family:var(--oc-mono);font-size:11px;color:var(--oc-muted);margin-top:3px}
#page-8 .oc-product-metrics{display:flex;gap:0}
#page-8 .oc-product-metric{
  display:flex;flex-direction:column;gap:2px;min-width:84px;padding:0 12px;
  border:0;border-left:1px solid var(--oc-line-2);background:transparent;border-radius:0;
}
#page-8 .oc-product-metric span{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--oc-muted);font-weight:600}
#page-8 .oc-product-metric b{font-size:13.5px;font-weight:700;color:var(--oc-ink)}
#page-8 .oc-product-metric:first-child b{color:var(--oc-accent-ink)}
#page-8 .oc-quadrant-actions{display:flex;flex-direction:row;gap:6px}

/* ---------- 7. D · 动作追踪表 ---------- */
#page-8 #ocActions{background:var(--oc-surface);border:1px solid var(--oc-line);border-radius:var(--oc-r-lg);box-shadow:var(--oc-shadow-sm);overflow:hidden}
#page-8 .oc-table{width:100%;border-collapse:collapse;font-size:13px}
#page-8 .oc-table th{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--oc-muted);font-weight:700;text-align:left;
  padding:10px 16px;background:var(--oc-surface-2);border-bottom:1px solid var(--oc-line-2);
}
#page-8 .oc-table td{padding:12px 16px;border-bottom:1px solid var(--oc-line-2);vertical-align:top;color:var(--oc-ink)}
#page-8 .oc-table tr:last-child td{border-bottom:0}
#page-8 .oc-table td:first-child{font-family:var(--oc-mono);font-size:12px;color:var(--oc-muted);white-space:nowrap}
#page-8 .oc-st{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:99px;border:0}
#page-8 .oc-st.executed{color:var(--oc-good);background:var(--oc-good-soft)}
#page-8 .oc-st.suggested{color:var(--oc-warn);background:var(--oc-warn-soft)}
#page-8 .oc-st.dismissed{color:var(--oc-muted);background:var(--oc-surface-2)}
#page-8 .oc-st.failed{color:var(--oc-crit);background:var(--oc-crit-soft)}
#page-8 .oc-effect.pending{color:var(--oc-muted);font-style:italic}
#page-8 .oc-empty{padding:18px 16px;color:var(--oc-muted);font-size:12.5px;text-align:center}

/* ---------- 8. 次级任务 / 管理员诊断：轻量行 ---------- */
#page-8 .oc-secondary-card{background:var(--oc-surface);border:1px solid var(--oc-line);border-radius:12px;box-shadow:none;padding:0}
#page-8 .oc-secondary-card.oc-admin-diagnostics{background:transparent;border-style:dashed}
#page-8 .oc-secondary-summary{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;cursor:pointer}
#page-8 .oc-secondary-summary:hover{background:var(--oc-surface-2)}
#page-8 .oc-secondary-icon{
  width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;
  background:var(--oc-surface-2);color:var(--oc-muted);border:1px solid var(--oc-line);
}
#page-8 .oc-secondary-copy b{display:block;font-size:13px;color:var(--oc-ink)}
#page-8 .oc-secondary-copy small{color:var(--oc-muted);font-size:12px}
#page-8 .oc-secondary-count{
  margin-left:auto;font-size:11.5px;font-weight:700;color:var(--oc-ink-2);
  border:1px solid var(--oc-line);background:var(--oc-surface);padding:3px 9px;border-radius:99px;
}
#page-8 .oc-secondary-toggle{
  font-size:12px;font-weight:700;color:var(--oc-accent-ink);background:var(--oc-accent-soft);
  padding:5px 10px;border-radius:8px;
}

/* ---------- 9. E · 追问 Agent ---------- */
#page-8 .oc-ask-row{
  display:flex;gap:8px;align-items:center;padding:8px 8px 8px 14px;
  background:var(--oc-surface);border:1px solid var(--oc-line);border-radius:var(--oc-r-lg);box-shadow:var(--oc-shadow-sm);
  transition:border-color .2s,box-shadow .2s;
}
#page-8 .oc-ask-row:focus-within{border-color:var(--oc-accent);box-shadow:0 0 0 3px var(--oc-accent-soft)}
#page-8 .oc-ask-row input{flex:1;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--oc-ink);outline:none;padding:6px 0;box-shadow:none}
#page-8 .oc-ask-row input:focus{border:0;box-shadow:none}
#page-8 .oc-ask-row input::placeholder{color:var(--oc-muted)}
#page-8 .oc-ask-row button{
  background:var(--oc-accent);color:#fff;border:1px solid var(--oc-accent);border-radius:9px;
  padding:7px 13px;font-size:12.5px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
#page-8 .oc-ask-row button:hover{background:var(--oc-accent-ink)}
#page-8 .oc-ask-log{display:flex;flex-direction:column;gap:8px}
#page-8 .oc-ask-log:empty{display:none} /* 没有问答记录时不占位 */
#page-8 .oc-ask-q{font-weight:700;color:var(--oc-ink)}
#page-8 .oc-ask-a{color:var(--oc-ink-2);background:var(--oc-surface-2);border:1px solid var(--oc-line);border-radius:var(--oc-r-md);padding:10px 12px;line-height:1.6}

/* ---------- 10. 键盘焦点 & 响应式 ---------- */
#page-8 button:focus-visible,#page-8 input:focus-visible{outline:2px solid var(--oc-accent);outline-offset:2px}
@media (max-width:980px){
  #page-8 .oc-kpi-grid{grid-template-columns:1fr 1fr}
  #page-8 .oc-kpi:nth-child(3){border-left:0}
  #page-8 .oc-kpi:nth-child(n+3){border-top:1px solid var(--oc-line-2)}
  #page-8 .oc-section-grid{grid-template-columns:1fr}
  #page-8 .oc-section + .oc-section{border-left:0;border-top:1px solid var(--oc-line-2)}
  #page-8 .oc-quadrant-grid{grid-template-columns:1fr 1fr}
  #page-8 .oc-product-row{grid-template-columns:1fr}
  #page-8 .oc-product-metrics{flex-wrap:wrap;gap:8px}
  #page-8 .oc-product-metric{border-left:0;padding:0;min-width:70px}
}
@media (prefers-reduced-motion:reduce){#page-8 *{transition:none!important}}