/* ============================================================
   九派 AI · Linear-Inspired UI
   设计参考：Linear / Vercel / Cursor / Stripe Dashboard
   关键词：极简 · 紧凑 · 智能 · 国际化
   2026-05-02 / v6 (Linear-style)
   ============================================================ */

:root {
  /* —— Canvas & Surface —— */
  --bg:             #fbfbfb;
  --bg-elevated:    #ffffff;
  --bg-hover:       #f4f4f5;
  --surface:        #ffffff;
  --surface-soft:   #fafafa;
  --surface-alt:    #f5f5f5;
  --surface-hover:  #f4f4f5;

  /* —— Sidebar —— */
  --rail:           #f8f8f9;
  --rail-hover:     #ededee;
  --rail-text:      #4d4d56;
  --rail-text-active: #0a0a0a;

  /* —— Borders —— */
  --line:           #e8e8ea;
  --line-strong:    #d8d8db;
  --line-soft:      #efeff1;

  /* —— Text —— */
  --text:           #0a0a0a;
  --text-soft:      #1f1f23;
  --muted:          #6e6e76;
  --faint:          #a1a1a8;
  --whisper:        #c4c4c9;

  /* —— Accent (Linear-style indigo) —— */
  --accent:         #5e6ad2;
  --accent-hover:   #4f5ac8;
  --accent-deep:    #424dab;
  --accent-soft:    #eeeffd;
  --accent-faint:   #f6f7fe;
  --accent-line:    #d3d6f4;

  /* —— Semantic colors (Apple HIG palette) —— */
  --success:        #1f9d54;
  --success-soft:   #e8f5ee;
  --success-line:   #b9dec8;
  --warning:        #d97706;
  --warning-soft:   #fef3e2;
  --warning-line:   #f5d4a8;
  --danger:         #dc2626;
  --danger-soft:    #fdecec;
  --danger-line:    #f5c6c6;

  /* —— Shadows (very subtle, Linear style) —— */
  --shadow-xs:      0 0 0 1px rgba(15, 15, 15, 0.03);
  --shadow-sm:      0 1px 2px rgba(15, 15, 15, 0.04), 0 0 0 1px rgba(15, 15, 15, 0.04);
  --shadow-md:      0 2px 4px rgba(15, 15, 15, 0.06), 0 8px 24px rgba(15, 15, 15, 0.06);
  --shadow-lg:      0 6px 14px rgba(15, 15, 15, 0.08), 0 24px 48px rgba(15, 15, 15, 0.10);

  /* —— Radii (modest, Linear-precise) —— */
  --radius-sm:      4px;
  --radius:         6px;
  --radius-lg:      8px;
  --radius-xl:      12px;

  /* —— Backwards compat for old token consumers —— */
  --panel:          var(--surface);
  --panel-alt:      var(--surface-soft);
  --primary:        var(--accent);
  --primary-deep:   var(--accent-hover);
  --primary-soft:   var(--accent-soft);
  --shadow:         var(--shadow-xs);
  --muted-strong:   var(--text-soft);
}

/* ===========================================================
   Body / 全局排版
   =========================================================== */
body.erp-body {
  background: var(--bg) !important;
  color: var(--text);
  font-family:
    "Inter", "InterVariable",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "Segoe UI", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  --erp-rail-width: 96px;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

/* ===========================================================
   主布局
   =========================================================== */
.app-shell-erp,
body.erp-body .app-shell-erp {
  background: var(--bg) !important;
  grid-template-columns: var(--erp-rail-width) minmax(0, 1fr) !important;
}

/* ===========================================================
   侧边栏：浅灰、文字+图标、紧凑
   =========================================================== */
.side-rail {
  background: var(--rail) !important;
  border-right: 1px solid var(--line) !important;
  padding: 8px 6px 12px !important;
  gap: 10px !important;
}

/* 品牌区：单 logo（按 3:1 自然比例展示） */
.rail-brand {
  width: 100% !important;
  height: 32px !important;
  margin: 2px 0 16px !important;       /* 顶部小、底部留白让菜单远离 */
  padding: 0 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  border-radius: var(--radius);
  transition: opacity 120ms ease;
}

.rail-brand:hover { opacity: 0.78; }

.rail-brand-logo {
  width: 100% !important;
  max-width: 64px !important;          /* logo 缩小 */
  height: auto !important;
  max-height: 22px !important;
  object-fit: contain !important;
  filter: none;
  opacity: 1;
}

.rail-brand::after,
.rail-brand-mark {
  display: none !important;
}

/* 文字字标 LOGO (透明底白字「九派AI」logo-wide.png), 三端统一 (2026-07-11) */
.rail-brand { gap: 0 !important; justify-content: center !important; }
.rail-brand-mark-img {
  width: auto !important;
  max-width: 100% !important;
  height: 28px !important;
  border-radius: 0 !important;
  display: block !important;
  flex: none !important;
  object-fit: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}

.rail-brand-text {
  display: none !important;
}

/* 菜单 */
.side-menu {
  gap: 10px !important;
  padding: 0 !important;
}

.side-link {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-radius: var(--radius) !important;
  color: var(--rail-text) !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  letter-spacing: 0.01em;
  text-align: left !important;
  position: relative;
  transition: background 100ms ease, color 100ms ease !important;
}

.side-link:hover {
  background: var(--rail-hover) !important;
  color: var(--rail-text-active) !important;
}

.side-link.active {
  background: var(--rail-hover) !important;
  color: var(--rail-text-active) !important;
  font-weight: 500 !important;
}

.side-link.active::before {
  display: none !important;
}

.side-icon {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  opacity: 0.92 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.side-link.active .side-icon { opacity: 1; }

.side-icon::before,
.side-icon::after {
  display: none !important;
}

.side-icon svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.side-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* ===========================================================
   顶栏（极简）
   =========================================================== */
.workspace-bar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  min-height: 44px !important;
  padding: 0 12px 0 0 !important;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: none;
}

.workspace-tabbar {
  padding: 0 8px 0 12px !important;
  align-items: center !important;
  align-self: stretch !important;
  min-height: 44px !important;
  gap: 2px;
}

.workspace-history-tab {
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: var(--radius) !important;
  color: var(--muted) !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  border-bottom: none !important;
  transition: color 100ms ease, background 100ms ease !important;
}

.workspace-history-tab:not(.active):hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

.workspace-history-tab.active {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.workspace-history-tab.active::after {
  display: none !important;
}

.workspace-history-close {
  color: var(--faint) !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
}

.workspace-history-close:hover {
  background: var(--surface-alt) !important;
  color: var(--text) !important;
}

.workspace-tabbar-add {
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  width: 28px !important;
  color: var(--muted) !important;
  font-size: 14px !important;
  border-radius: var(--radius) !important;
  transition: background 100ms ease, color 100ms ease !important;
}

.workspace-tabbar-add::before {
  display: none !important;
}

.workspace-tabbar-add:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

/* 用户区 */
.workspace-user { gap: 10px !important; }

.workspace-mini-link {
  color: var(--muted) !important;
  font-size: 12.5px !important;
  font-weight: 450 !important;
  padding: 0 10px !important;
  height: 28px !important;
  min-height: 28px !important;
  border-radius: var(--radius) !important;
  transition: background 100ms ease, color 100ms ease;
}

.workspace-mini-link:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

.workspace-mini-link.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.workspace-user-avatar {
  width: 26px !important;
  height: 26px !important;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(94, 106, 210, 0.18);
}

.workspace-user-copy strong,
.workspace-user-copy small,
.workspace-user-copy strong a {
  color: var(--text) !important;
  font-size: 12.5px !important;
  font-weight: 500;
}

.workspace-user-copy small {
  color: var(--muted) !important;
  font-size: 11.5px !important;
  font-weight: 400;
}

.workspace-user-link:hover,
.workspace-user-copy strong a:hover {
  color: var(--accent) !important;
}

.toolbar-logout {
  background: transparent !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--muted) !important;
  font-weight: 450 !important;
  border-radius: var(--radius) !important;
  height: 26px !important;
  min-height: 26px !important;
  font-size: 11.5px !important;
  padding: 0 10px !important;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
}

.toolbar-logout:hover {
  background: var(--bg-hover) !important;
  border-color: var(--text) !important;
  color: var(--text) !important;
}

/* ===========================================================
   二级菜单（修复 z-index + 位置）
   =========================================================== */
.secondary-rail-overlay,
body.erp-body .secondary-rail-overlay {
  inset: 44px auto 0 var(--erp-rail-width) !important;
  width: 144px !important;
  z-index: 60 !important;
}

.secondary-rail,
body.erp-body .secondary-rail {
  width: 136px !important;
  height: calc(100vh - 44px) !important;
  max-height: calc(100vh - 44px) !important;
  top: 0 !important;
  background: var(--surface) !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: 0 0 0 1px var(--line), 4px 0 14px rgba(15, 15, 15, 0.04) !important;
}

.secondary-rail-scroll,
body.erp-body .secondary-rail-scroll {
  padding: 10px 6px 16px !important;
}

.secondary-group + .secondary-group {
  margin-top: 16px !important;
}

.secondary-group h3 {
  color: var(--faint) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0 12px !important;
  margin: 0 0 6px !important;
}

.secondary-link {
  color: var(--text-soft) !important;
  border-radius: var(--radius) !important;
  font-weight: 450 !important;
  font-size: 12.5px !important;
  padding: 0 10px !important;
  min-height: 28px !important;
  transition: background 100ms ease, color 100ms ease;
}

.secondary-link:hover {
  background: var(--bg-hover) !important;
  color: var(--text) !important;
}

.secondary-link.active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
}

/* ===========================================================
   主内容
   =========================================================== */
.content-shell,
body.erp-body .content-shell {
  background: var(--bg) !important;
  padding: 14px !important;
}

.page-content {
  background: transparent !important;
  color: var(--text);
}

/* ===========================================================
   面板 / 卡片（极简）
   =========================================================== */
.panel,
body.erp-body .panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  color: var(--text);
  transition: border-color 140ms ease;
}

.panel:hover {
  box-shadow: none !important;
}

.page-toolbar {
  border-radius: var(--radius-lg) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}

.page-toolbar-copy strong {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.011em;
  color: var(--text) !important;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.011em;
}

strong, b { color: var(--text); }

/* ===========================================================
   按钮（Linear 极简）
   =========================================================== */
.primary-btn,
.btn-primary {
  background: var(--text) !important;
  border: 1px solid var(--text) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04) !important;
  transition: background 120ms ease, transform 120ms ease;
}

.primary-btn:hover,
.btn-primary:hover {
  background: #1c1c1f !important;
  border-color: #1c1c1f !important;
}

.primary-btn:active,
.btn-primary:active {
  transform: translateY(0.5px);
}

.ghost-btn,
.btn-ghost,
.secondary-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  border-radius: var(--radius) !important;
  transition: background 120ms ease, border-color 120ms ease;
}

.ghost-btn:hover,
.btn-ghost:hover,
.secondary-btn:hover {
  background: var(--bg-hover) !important;
  border-color: var(--text) !important;
}

/* ===========================================================
   输入控件
   =========================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  border-radius: var(--radius) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-family: inherit;
  font-size: 13px !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--faint) !important;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
select:hover,
textarea:hover {
  border-color: var(--muted) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}

/* ===========================================================
   chip / tag
   =========================================================== */
.eyebrow,
.section-tag,
.tag {
  background: var(--surface-alt) !important;
  color: var(--text-soft) !important;
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 11px;
  letter-spacing: 0;
  padding: 0 8px !important;
}

/* ===========================================================
   表格
   =========================================================== */
.data-table,
.report-table {
  color: var(--text-soft);
  font-size: 12.5px;
}

.data-table thead th,
.report-table thead th {
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-transform: none !important;
  border-bottom: 1px solid var(--line) !important;
  padding: 8px 12px !important;
}

.data-table tbody td,
.report-table tbody td {
  border-bottom: 1px solid var(--line-soft) !important;
  color: var(--text-soft) !important;
  padding: 10px 12px !important;
}

.data-table tbody tr:hover td,
.report-table tbody tr:hover td {
  background: var(--surface-soft) !important;
}

/* ===========================================================
   消息盒
   =========================================================== */
.message-box {
  background: var(--surface-soft) !important;
  border: 1px solid var(--line) !important;
  color: var(--muted) !important;
  border-radius: var(--radius) !important;
  font-size: 12px;
}

.message-box.success {
  background: var(--success-soft) !important;
  border-color: var(--success-line) !important;
  color: var(--success) !important;
}

.message-box.warning,
.message-box.warn {
  background: var(--warning-soft) !important;
  border-color: var(--warning-line) !important;
  color: var(--warning) !important;
}

.message-box.error,
.message-box.danger {
  background: var(--danger-soft) !important;
  border-color: var(--danger-line) !important;
  color: var(--danger) !important;
}

/* ===========================================================
   首页 V3 协调
   =========================================================== */
.home-stage-v3 .panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.home-toolbar-v3 {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}

.home-toolbar-title strong { color: var(--text) !important; }
.home-toolbar-ico {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep)) !important;
  color: #ffffff !important;
}

.home-scope-chip {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.home-store-pill {
  background: var(--surface-alt) !important;
  color: var(--text-soft) !important;
  border: 1px solid var(--line);
}

.home-mini-select {
  border: 1px solid var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
}

.home-btn-primary {
  background: var(--text) !important;
  border-color: var(--text) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.home-btn-primary:hover {
  background: #1c1c1f !important;
  border-color: #1c1c1f !important;
}

.home-btn-ghost {
  background: var(--surface) !important;
  border-color: var(--line-strong) !important;
  color: var(--text) !important;
}

.home-kpi-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}
.home-kpi-label { color: var(--muted) !important; font-weight: 450; }
.home-kpi-value { color: var(--text) !important; font-feature-settings: "tnum" 1; }
.home-kpi-note  { color: var(--faint) !important; }

.home-insight-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}
.home-insight-label { color: var(--muted) !important; }
.home-insight-value strong { color: var(--text) !important; font-feature-settings: "tnum" 1; }
.home-insight-note { color: var(--faint) !important; }
.home-insight-bar { background: var(--surface-alt) !important; }
.home-insight-card.good   .home-insight-bar-fill { background: var(--success) !important; }
.home-insight-card.warn   .home-insight-bar-fill { background: var(--warning) !important; }
.home-insight-card.danger .home-insight-bar-fill { background: var(--danger) !important; }

.home-card-head .home-card-title strong { color: var(--text) !important; }
.home-card-sub { color: var(--muted) !important; }

.home-decision-headline {
  background: var(--accent-faint) !important;
  border: 1px solid var(--accent-line);
}
.home-decision-title { color: var(--accent) !important; }
.home-decision-meta  { color: var(--muted) !important; }

.home-decision-item { background: var(--surface-soft) !important; border-left-width: 2px !important; }
.home-decision-item.danger { background: var(--danger-soft) !important; border-left-color: var(--danger) !important; }
.home-decision-item.warn   { background: var(--warning-soft) !important; border-left-color: var(--warning) !important; }
.home-decision-item.good   { background: var(--success-soft) !important; border-left-color: var(--success) !important; }
.home-decision-copy strong { color: var(--text) !important; }
.home-decision-copy p      { color: var(--muted) !important; }

.home-trend-stat { background: var(--surface-soft) !important; border: 1px solid var(--line); }
.home-trend-stat-label   { color: var(--muted) !important; }
.home-trend-stat-value   { color: var(--text) !important; font-feature-settings: "tnum" 1; }
.home-trend-stat-caption { color: var(--faint) !important; }

.home-dim-block { background: var(--surface-soft) !important; border: 1px solid var(--line); }
.home-dim-row   { background: var(--surface) !important; border: 1px solid var(--line); }
.home-dim-row-name  { color: var(--text) !important; }
.home-dim-row-sales { color: var(--text) !important; font-feature-settings: "tnum" 1; }
.home-dim-row-meta > span:first-child { color: var(--muted) !important; }
.home-dim-rank { background: var(--bg-hover) !important; color: var(--text-soft) !important; }
.home-dim-bar { background: var(--surface-alt) !important; }
.home-dim-bar-fill { background: var(--accent) !important; }

.home-rank-table thead th { background: var(--surface-soft) !important; color: var(--muted) !important; border-bottom: 1px solid var(--line) !important; }
.home-rank-table tbody td { border-bottom: 1px solid var(--line-soft) !important; color: var(--text-soft) !important; }
.home-rank-table tbody tr:hover td { background: var(--surface-soft) !important; }
.home-rank-name  { color: var(--text) !important; }
.home-rank-asin  { color: var(--faint) !important; font-feature-settings: "tnum" 1; }
.home-rank-site  { color: var(--muted) !important; }
.home-rank-val   { color: var(--text) !important; font-feature-settings: "tnum" 1; }
.home-rank-units { color: var(--text-soft) !important; font-feature-settings: "tnum" 1; }
.home-rank-bar   { background: var(--surface-alt) !important; }
.home-rank-bar-fill.blue  { background: var(--accent) !important; }
.home-rank-bar-fill.green { background: var(--success) !important; }
.home-rank-badge { background: var(--bg-hover) !important; color: var(--text-soft) !important; }
.home-rank-badge.gold   { background: linear-gradient(135deg, #ffd562, #d97706) !important; color: #ffffff !important; box-shadow: none !important; }
.home-rank-badge.silver { background: linear-gradient(135deg, #d6dde8, #9aa0a6) !important; color: #ffffff !important; }
.home-rank-badge.bronze { background: linear-gradient(135deg, #e8b389, #b67340) !important; color: #ffffff !important; }

.home-pill {
  font-feature-settings: "tnum" 1;
  font-weight: 600 !important;
}
.home-pill.good   { background: var(--success-soft) !important; color: var(--success) !important; }
.home-pill.warn   { background: var(--warning-soft) !important; color: var(--warning) !important; }
.home-pill.danger { background: var(--danger-soft) !important; color: var(--danger) !important; }

.home-dim-pill.good   { background: var(--success-soft) !important; color: var(--success) !important; }
.home-dim-pill.warn   { background: var(--warning-soft) !important; color: var(--warning) !important; }
.home-dim-pill.danger { background: var(--danger-soft) !important; color: var(--danger) !important; }

.home-risk-card { background: var(--surface-soft) !important; border: 1px solid var(--line); border-left-width: 2px !important; }
.home-risk-card.danger { background: var(--danger-soft) !important; border-color: var(--danger-line); border-left-color: var(--danger) !important; }
.home-risk-card.warn   { background: var(--warning-soft) !important; border-color: var(--warning-line); border-left-color: var(--warning) !important; }
.home-risk-card.good   { background: var(--success-soft) !important; border-color: var(--success-line); border-left-color: var(--success) !important; }
.home-risk-line strong { color: var(--text) !important; }
.home-risk-line b      { color: var(--text) !important; font-feature-settings: "tnum" 1; }
.home-risk-body p      { color: var(--muted) !important; }
.home-risk-card.danger .home-risk-line b { color: var(--danger) !important; }
.home-risk-card.warn   .home-risk-line b { color: var(--warning) !important; }
.home-risk-card.good   .home-risk-line b { color: var(--success) !important; }

.home-action-item { background: var(--surface-soft) !important; border: 1px solid var(--line); }
.home-action-text { color: var(--text-soft) !important; }
.home-action-num  {
  background: var(--text) !important;
  color: #ffffff !important;
}
.home-action-icon { background: var(--success-soft) !important; color: var(--success) !important; }

.home-ranked-item { background: var(--surface-soft) !important; border: 1px solid var(--line); border-left-width: 2px !important; }
.home-ranked-item.opp  { border-left-color: var(--success) !important; }
.home-ranked-item.leak { border-left-color: var(--danger) !important; }
.home-ranked-copy strong { color: var(--text) !important; }
.home-ranked-copy p      { color: var(--faint) !important; }
.home-ranked-metric { background: var(--surface) !important; border-color: var(--line) !important; }
.home-ranked-metric i { color: var(--muted) !important; }
.home-ranked-metric b { color: var(--text) !important; font-feature-settings: "tnum" 1; }
.home-ranked-index { background: var(--bg-hover) !important; color: var(--text-soft) !important; }
.home-ranked-item.opp  .home-ranked-index { background: var(--success-soft) !important; color: var(--success) !important; }
.home-ranked-item.leak .home-ranked-index { background: var(--danger-soft) !important; color: var(--danger) !important; }
.home-empty-block  { color: var(--muted) !important; }

.home-card-ico { background: var(--accent-soft) !important; color: var(--accent) !important; }
.home-card-ico.decision { background: var(--accent-soft) !important; color: var(--accent) !important; }
.home-card-ico.danger   { background: var(--danger-soft) !important; color: var(--danger) !important; }
.home-card-ico.warn     { background: var(--warning-soft) !important; color: var(--warning) !important; }
.home-card-ico.ok       { background: var(--success-soft) !important; color: var(--success) !important; }

/* ===========================================================
   滚动条
   =========================================================== */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
  background-clip: padding-box;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* 选中文字 */
::selection {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ===========================================================
   响应式
   =========================================================== */
@media (max-width: 1100px) {
  body.erp-body { --erp-rail-width: 110px; }
}

@media (max-width: 900px) {
  body.erp-body { --erp-rail-width: 52px; }
  .rail-brand { height: 32px !important; padding: 0 4px !important; margin: 4px 0 12px !important; }
  .rail-brand-logo { width: 100% !important; max-width: 36px !important; max-height: 18px !important; }
  /* 窄栏下长方形 LOGO 按宽度缩 (3:1 → 44px 宽约 15px 高) */
  .rail-brand-mark-img { width: 100% !important; max-width: 44px !important; height: auto !important; }
  /* 手机抽屉展开时品牌区放大, 不吃上面窄栏的压缩 (2026-07-11) */
  body.erp-body.is-mobile-drawer-open .rail-brand {
    height: 52px !important;
    padding: 0 !important;
    margin: 4px 6px 14px !important;
    justify-content: flex-start !important;
  }
  body.erp-body.is-mobile-drawer-open .rail-brand-mark-img {
    height: 36px !important;
    width: auto !important;
    max-width: 170px !important;
  }
  .side-link {
    flex-direction: column !important;
    gap: 3px !important;
    padding: 6px 4px !important;
    min-height: 46px !important;
    text-align: center !important;
  }
  .side-link .side-label { font-size: 10.5px !important; text-align: center !important; }
  .secondary-rail-overlay { left: var(--erp-rail-width) !important; width: 144px !important; }
  .secondary-rail { width: 136px !important; }
}

/* ============================================================
   20260502 紫色毛玻璃 Chrome 改造
   把侧边栏 + 顶部标签栏换成与登录页同色系的深紫渐变 + 紫色光晕
   (其余内容区保持 Linear 浅色基底不变)
   ============================================================ */

/* ---------- 侧边栏 (一级栏目) ---------- */
/* 20260502 平铺深紫 — 减弱渐变,避免上下明显亮度差 */
.side-rail {
  background:
    radial-gradient(600px 800px at 50% 50%, rgba(94, 106, 210, 0.10), transparent 75%),
    #15152a !important;
  border-right: 1px solid rgba(140, 130, 240, 0.08) !important;
  position: sticky;
  overflow: hidden;
}

.side-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 0%, transparent 80%);
  z-index: 0;
}

/* 顶部圆形发光已移除 — 之前导致"上亮下暗"对比过强 */
.side-rail::after {
  content: none;
}

.side-rail > * {
  position: relative;
  z-index: 1;
}

/* 品牌文字白色 */
.rail-brand-text,
.rail-brand-text * {
  color: rgba(255, 255, 255, 0.92) !important;
}

/* 一级菜单文字反白 */
.side-link {
  color: rgba(220, 224, 240, 0.72) !important;
}

.side-link:hover {
  background: rgba(140, 130, 240, 0.12) !important;
  color: #f3f1ff !important;
}

.side-link.active {
  background: rgba(94, 106, 210, 0.22) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(140, 130, 240, 0.32) !important;
  font-weight: 500 !important;
}

/* 重新启用左侧指示条 (modern.css 之前用 display:none 隐藏了) */
.side-link.active::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: -6px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 0 999px 999px 0 !important;
  background: linear-gradient(180deg, #8c82f0 0%, #5e6ad2 100%) !important;
  box-shadow: 0 0 10px rgba(140, 130, 240, 0.6) !important;
}

.side-icon {
  color: currentColor !important;
}

/* ---------- 顶部标签栏 (方案一: 完全复刻登录页,不透明深紫渐变) ---------- */
.workspace-bar {
  background:
    radial-gradient(600px 280px at 92% -50%, rgba(140, 130, 240, 0.32), transparent 70%),
    radial-gradient(500px 280px at 5% 150%, rgba(94, 106, 210, 0.34), transparent 70%),
    linear-gradient(160deg, #0a0a14 0%, #1a1a2e 50%, #0a0a14 100%) !important;
  border-bottom: 1px solid rgba(140, 130, 240, 0.18) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  overflow: hidden;
}

.workspace-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 100%);
  z-index: 0;
}

.workspace-bar > * {
  position: relative;
  z-index: 1;
}

/* 历史标签:文字白化 */
.workspace-history-tab {
  color: rgba(255, 255, 255, 0.70) !important;
  background: transparent !important;
}

.workspace-history-tab:not(.active):hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
}

.workspace-history-tab.active {
  background: rgba(255, 255, 255, 0.96) !important;
  color: #1f2937 !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.workspace-history-close {
  color: rgba(255, 255, 255, 0.55) !important;
}

.workspace-history-close:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

.workspace-history-tab.active .workspace-history-close {
  color: #6b7280 !important;
}

.workspace-history-tab.active .workspace-history-close:hover {
  background: rgba(0, 0, 0, 0.06) !important;
  color: #1f2937 !important;
}

.workspace-tabbar-add {
  color: rgba(255, 255, 255, 0.78) !important;
}

.workspace-tabbar-add:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

/* 顶部右侧用户区 */
.workspace-mini-link {
  color: rgba(255, 255, 255, 0.78) !important;
}

.workspace-mini-link:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

.workspace-mini-link.active {
  background: rgba(140, 130, 240, 0.22) !important;
  color: #ffffff !important;
}

.workspace-user-copy strong,
.workspace-user-copy strong a,
.workspace-user-link {
  color: rgba(255, 255, 255, 0.92) !important;
}

.workspace-user-copy small {
  color: rgba(255, 255, 255, 0.55) !important;
}

.workspace-user-copy strong a:hover,
.workspace-user-link:hover {
  color: #c4b9ff !important;
}

.toolbar-logout {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

.toolbar-logout:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  color: #ffffff !important;
}

/* ---------- 移动端顶栏同步紫化 (方案一: 不透明深紫渐变) ---------- */
@media (max-width: 768px) {
  .mobile-topbar {
    background:
      radial-gradient(360px 220px at 95% -30%, rgba(140, 130, 240, 0.32), transparent 70%),
      linear-gradient(160deg, #0a0a14 0%, #1a1a2e 60%, #0a0a14 100%) !important;
    border-bottom: 1px solid rgba(140, 130, 240, 0.18) !important;
  }

  body.erp-body.is-mobile-drawer-open .side-link.active {
    background: rgba(94, 106, 210, 0.24) !important;
    color: #ffffff !important;
    box-shadow: inset 0 0 0 1px rgba(140, 130, 240, 0.32) !important;
  }
}

/* ============================================================
   2026-06-03 移动端二级导航 (secondary-rail) 修复
   现象: 手机浏览器打开二级页面, 二级导航被压成一条 ~136px 宽、贯穿整屏
         高度的竖白条, 分组标题「产品中心」+「产品①…」chip 被裁在里面 (见截图)。
   真因: business_erp.css 在 @media(≤768) 把二级导航做成「水平滚动 chip 条」
         (width:100%; height:auto; flex-direction:row)。但本文件上方
         `.secondary-rail` 桌面尺寸规则 (≈L402 width:136px; height:calc(100vh-44px)
         以及 @media(≤900) L900 width:136px) 没有下限媒体门控, 会一路命中到手机;
         且本文件在 business_erp.css 之后加载、选择器同特异度
         (body.erp-body .secondary-rail), 按源码顺序压过了 chip 规则 →
         row 弹性 + 固定 136px 宽 + 满屏高 = 那条竖白条。
   修法: 在最后一个样式表的末尾、用同特异度 + !important 把 ≤768 的尺寸/定位
         重新拉回水平 chip; chip 的 display/flex-direction/overflow 仍由
         business_erp.css 提供, 这里只负责覆盖被 modern 压回去的 宽/高/定位。
         附带把分组标题 <h3> 在 chip 条里隐藏 —— 原 business_erp.css 想隐藏却把
         选择器写成 .secondary-group-title, 实际标记是 <section.secondary-group><h3>,
         没命中, 所以「产品中心」一直露出来挤在 chip 前。
   ============================================================ */
@media (max-width: 768px) {
  /* ============================================================
     2026-06-06 手机端二级导航 = 抽屉内手风琴 (accordion, 替换底部 sheet 方案)
     背景: sheet 从底部弹、遮罩压暗虽抢眼, 但"响应发生在手指点击处的另一头"
           (抽屉里点、屏幕底部出), 视线要跳。改成在被点的一级图标"正下方"
           就地展开二级子项 —— 手指正下方出结果, 同位响应, 几乎不可能没察觉,
           也是绝大多数 App 侧边导航的标准做法。
     交互: 点一级图标 (erp_shell.js: 插入 .side-accordion 到该 .side-link 之后,
           给图标加 .is-menu-open) → 子项就地下拉 (grid 0fr→1fr 高度动画);
           再点同项收起; 点二级项 = <a> 整页跳转, 抽屉随刷新复位。
     #secondaryRail 浮层在手机端完全不参与 (始终 [hidden] → display:none)。
     ============================================================ */

  /* 兜底: 二级浮层在手机端任何情况下都不出现 (只走抽屉手风琴) */
  body.erp-body .secondary-rail-overlay { display: none !important; }

  /* 一级图标右侧 caret: 标识"可展开", 展开时旋转向上 */
  body.erp-body.is-mobile-drawer-open .side-link.has-submenu::after {
    content: "";
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    flex: 0 0 auto;
    transition: transform 200ms ease;
  }
  body.erp-body.is-mobile-drawer-open .side-link.has-submenu.is-menu-open::after {
    transform: rotate(-135deg);
    opacity: 0.9;
  }
  /* 展开中的一级图标高亮 (即时反馈, 一眼看到点中了谁) */
  body.erp-body.is-mobile-drawer-open .side-link.is-menu-open {
    background: rgba(94, 106, 210, 0.22) !important;
    color: #ffffff !important;
  }

  /* 手风琴容器: grid-template-rows 0fr→1fr 做高度自适应展开动画 */
  .side-accordion {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .side-accordion.open { grid-template-rows: 1fr; }
  .side-accordion > .side-accordion-inner {
    overflow: hidden;
    min-height: 0;
    /* 引导线钉在一级图标"中心"(左内距14 + 半个18图标 = 23px), 二级文字再往右
       落到一级文字同一起点(46px), 消除"二级挂在图标下、比一级文字靠左"的锯齿。 */
    margin: 4px 0 8px 23px;
    padding-left: 14px;
    border-left: 1px solid rgba(255, 255, 255, 0.12); /* 层级引导线 */
  }

  /* 二级分组 / 子项: 深色抽屉配色。
     注意: 必须用更高特异度 (body.erp-body .side-accordion ...) + !important 强压，
     否则 business_erp.css 里残留的旧"白色 chip / ≤720 两列 grid / 静态白面板"规则
     (如 L11737 `.secondary-links{grid-template-columns:repeat(2,…)}`、L1999 `.secondary-link`
     白底圆角) 会把手风琴子项又变回"白色药丸两列排版被裁切"的样子 (见用户反馈截图)。
     这里把布局/配色全部钉死: 竖排单列、透明深色、文字可换行不裁切。 */
  body.erp-body .side-accordion .secondary-group { display: block !important; margin: 0; }
  /* 组间只用间距分隔, 去掉 border-top 横线 —— 单项组(如 AI调研/API管理)顶着
     标题又叠横线, 一屏 4 标题 3 横线太碎. 首组不额外留白, 其余组上方留 10px. */
  body.erp-body .side-accordion .secondary-group + .secondary-group {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
  }
  /* 分组小标题 (如「知识产权」「库存(V2)」): 做成一眼可辨的"分区标签", 与可点的
     栏目项拉开差距 —— 更淡更小、字距拉宽、前置一段小横线当分隔符, 上方额外留白,
     不再"傻傻分不清"哪个是标题哪个是入口 (2026-07-04)。 */
  body.erp-body .side-accordion .secondary-group h3 {
    display: flex !important;
    align-items: center;
    gap: 7px;
    color: rgba(197, 204, 228, 0.42) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    padding: 3px 9px 5px !important;
    margin: 9px 0 0 !important;   /* 与上一组的栏目项拉开距离 */
    text-transform: none !important;
  }
  /* 标题前的短横线分隔符, 强化"这是分区不是入口" */
  body.erp-body .side-accordion .secondary-group h3::before {
    content: "";
    width: 12px;
    height: 1px;
    flex: none;
    background: rgba(255, 255, 255, 0.20);
  }
  body.erp-body .side-accordion .secondary-links {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;   /* 干掉 ≤720 的两列 grid */
    gap: 2px !important;
  }
  body.erp-body .side-accordion .secondary-link {
    display: flex !important;
    align-items: center;
    width: auto !important;
    min-height: 38px;
    padding: 8px 9px !important;
    font-size: 13.5px;
    line-height: 1.3;
    color: rgba(216, 224, 238, 0.82) !important;
    background: transparent !important;   /* 干掉旧白色药丸底 */
    border: 0 !important;
    border-radius: 8px !important;
    white-space: normal !important;       /* 文字换行, 不再被裁成"补货建" */
    overflow: visible !important;
    text-overflow: clip !important;
    text-decoration: none;
  }
  /* 旧 .secondary-link::before 左侧竖条在深色抽屉里多余, 关掉 */
  body.erp-body .side-accordion .secondary-link::before { display: none !important; }
  body.erp-body .side-accordion .secondary-link span { padding-left: 0 !important; }
  body.erp-body .side-accordion .secondary-link:hover,
  body.erp-body .side-accordion .secondary-link:active {
    background: rgba(140, 130, 240, 0.12) !important;
    color: #f3f1ff !important;
  }
  body.erp-body .side-accordion .secondary-link.active {
    background: rgba(94, 106, 210, 0.26) !important;
    color: #ffffff !important;
    font-weight: 500;
  }

  /* ============================================================
     2026-06-03 #撑开 修复: 二级页打开后整页内容横向溢出 ("全撑开了")
     现象: 二级导航修好成水平 chip 后, 点进二级数据页 (SC经营报表等),
           日期/筛选/KPI 卡/表格 全部超出屏幕右侧, 底部出现整页横向滚动条。
     真因 (playwright 实测复现 viewport=390 → docScrollWidth=658):
           erp_mobile_nav.js 在手机端把 #secondaryRail 注入到 .content-shell
           里、page-content 之前。.content-shell / .page-content / .report-stage
           都是 display:grid 且没有显式列 → 单条 `auto` 轨道。auto 轨道按子项
           max-content 定宽; 被注入的 .secondary-rail 因 width:100% 让 chip 的
           内容宽 (~619px) 参与测算, 把这条 auto 列撑到 644px, page-content / KPI
           / 表格 全部继承 644px 宽 → 整页横向溢出。
           (对照: .report-table-wrap 用 max-width:100%+overflow:auto, 1079px 的宽表
            被夹到 ~332px 列内横向滚动, 不撑页 —— 这就是 width vs max-width 的差别。)
     修法: ≤768 把这几个容器的列显式钉成 minmax(0,1fr) (fr 轨道按容器宽定, 忽略
           max-content), 配合上面 .secondary-rail 改 width:auto。改完实测
           docScrollWidth=390=视口, KPI 回到 2 列, 宽表/chip 各自内部横向滚动。
     ============================================================ */
  body.erp-body .content-shell,
  body.erp-body .page-content,
  body.erp-body .report-stage,
  body.erp-body .data-page-stage {
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* ===========================================================
   二级菜单"点了像没反应"修复 (2026-06-06)
   现象: 点左侧一级图标 → 弹出的二级面板是白底(#fff)落在近白内容区(#fbfbfb)上,
         阴影只有 0.04 透明度 + 纯 hidden 切换无任何动效, 用户根本看不出"打开了"。
   修法 3 件套:
     1) 被点开的一级图标加 .is-menu-open 高亮 (即时反馈, 一眼看到点中了谁);
     2) 二级面板滑入 + 淡入动画 (.secondary-rail-animate, JS 每次重放);
     3) 面板加重投影 + 左侧品牌色细边, 让它明确"浮"在内容之上。
   仅作用桌面/外壳档 (≥769px); ≤768 走水平 chip 版面, 不动。
   =========================================================== */
.side-link.is-menu-open {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 500 !important;
}
.side-link.is-menu-open .side-icon { opacity: 1 !important; }
.side-link.is-menu-open::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 3px !important;
  height: 18px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--accent) !important;
}

@media (min-width: 769px) {
  /* 面板更"浮": 加重投影 + 左侧品牌色 2px 细边, 与近白内容区拉开层次 */
  body.erp-body .secondary-rail {
    border-left: 2px solid var(--accent) !important;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.14),
                1px 0 0 var(--line) !important;
  }

  /* 滑入 + 淡入: 每次打开/切菜单由 JS 重加 class 触发, 给出明确的"出现"动效 */
  @keyframes secondaryRailSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  body.erp-body .secondary-rail.secondary-rail-animate {
    animation: secondaryRailSlideIn 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

/* ===========================================================
   一级栏目内容居中 + 二级面板可滚动 (2026-07-11)
   1) 一级栏目 (桌面/平板/外壳档 ≥769px): .side-link 是 row+flex-start,
      .side-label flex:1 (本文件 L232) 撑满整行, 文字全部靠左挤在图标后、
      右侧留大片空白, 视觉上"不居中" (用户截图: 首页/计划…)。改成每项
      内容水平居中: label 必须收回 flex:1, justify-content 才有东西可分。
      ≤768 手机抽屉是另一套 (row+左对齐 46px, business_erp.css), 不受影响;
      769-900 窄栏是 column, center 落在纵轴上, 无副作用。
   2) 二级面板: DOM 里从来没有 .secondary-rail-scroll 这层 (erp_shell.js
      把分组直接写进 .secondary-rail), 面板自身又没有 overflow →「设置」
      菜单变长后 (基础资料迁入) 底部分组够不着、拖也拖不动。且 height:100vh
      在 zoom:1.5 档 (769-1279 外壳) 被放大 1.5 倍, 面板底部伸出屏幕外。
      改 height:100%: 外层 .secondary-rail-overlay 是 fixed top/bottom 钉满
      可视区、不吃 zoom 放大, 100% 恰好等于可视高; 再加 overflow-y:auto。
   =========================================================== */
@media (min-width: 769px) {
  body.erp-body .side-link { justify-content: center !important; }
  body.erp-body .side-link .side-label { flex: 0 1 auto !important; }
}
/* 标签宽度不一 (多数2字 / 工作台3字 / AI字母) 时整体居中会让图标列
   参差: label 固定成最长项的宽度 (3字+letter-spacing, 3em 恰好装不下
   会出省略号, 放到 3.5em) 且框内左对齐 → 图标一条竖线、文字左缘一条
   竖线、图标-文字间距恒定, 整块再居中。901+ 才是 row 布局;
   ≤900 窄栏是 column 另一套, 不进这条。 */
@media (min-width: 901px) {
  body.erp-body .side-link .side-label {
    flex: 0 0 auto !important;
    width: 3.5em;
    text-align: left !important;
  }
}
body.erp-body .secondary-rail {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c7d2fe transparent;
}
body.erp-body .secondary-rail::-webkit-scrollbar { width: 4px; }
body.erp-body .secondary-rail::-webkit-scrollbar-track { background: transparent; }
body.erp-body .secondary-rail::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 2px; }

/* ============================================================
   2026-08-08 全站移动端内容溢出兜底 (mobile content-overflow net)
   -----------------------------------------------------------------
   目的: 不逐页改, 在共享层消化最常见的横向溢出源, 让 ≤768 真机不再
        "整页横滑 / 内容被挤出屏幕外". 只作用于 .page-content 内容区,
        完全不碰导航壳 (侧栏/抽屉/二级导航/底部 tab)。
   这一层是"兜底": 结构性写死桌面宽的页面仍需各自 @media 收窄,
        但绝大多数页面靠这层即可在手机上不溢出。
   ============================================================ */
@media (max-width: 768px) {
  /* 0) 根因修复 (关键): .page-content 是 .content-shell 的 grid item,
        grid/flex item 默认 min-width:auto 会被最宽子元素撑开 —— 定制页
        (smm-/lx-/hbc-/hbp- 等) 的写死宽工具条/表格因此把整壳顶到 800~950px。
        补 min-width:0 让内容列能收缩, 子元素回到"能换行就换行 / 能内部滚就
        内部滚"的正常重排, 而不是靠下面的 clip 硬裁掉。二者配合才是真适配。*/
  body.erp-body .content-shell,
  body.erp-body .page-content { min-width: 0; }
  /* 关键: 撑宽的定制壳 (.smm-shell/.lx-runner-stage/.settings-detail 等) 往往
     嵌在 page-content 好几层深, 只压直接子不够。给内部所有"结构性容器"
     (div/section/header/... 这些 flex/grid item) 统一 min-width:0, 让每一层
     都能收缩到视口内。刻意不含 table/input/button/img/select 等叶子元素 ——
     它们身上的 min-width (如表格 720px 供内部横滑, 输入框固定宽) 是有意的,
     不能被这条清掉, 否则内部横滑表会塌成挤字。*/
  body.erp-body .page-content div,
  body.erp-body .page-content section,
  body.erp-body .page-content article,
  body.erp-body .page-content header,
  body.erp-body .page-content footer,
  body.erp-body .page-content main,
  body.erp-body .page-content aside,
  body.erp-body .page-content nav,
  body.erp-body .page-content form,
  body.erp-body .page-content ul,
  body.erp-body .page-content ol,
  body.erp-body .page-content dl { min-width: 0; max-width: 100%; }
  /* max-width:100% 配合 min-width:0 才完整: page-content 是 grid, 未被 stretch
     的 grid item (如 .hbc-stage) 会按 max-content 排布并溢出轨道, min-width:0
     压不住, 必须用 max-width 把它钉回容器宽。叶子表格自带 min-width(供内部
     横滑)优先级更高, 不受这条影响, 仍在 overflow:auto 容器里横滚。*/

  /* 1) 横向 tab 条 / 分段导航: 保持一行但自身可横滑, 而不是顶破容器。
        (min-width:0 已让容器收缩; nowrap 的 tab 靠这条在内部滑到看得见) */
  body.erp-body .page-content [class*="tab-nav"],
  body.erp-body .page-content [class*="tab-bar"],
  body.erp-body .page-content [class*="tabbar"],
  body.erp-body .page-content [class*="seg-nav"],
  body.erp-body .page-content [role="tablist"] {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  /* 每个 tab 保持一行、不被 min-width:0 挤成竖排单字; 整条靠上面横滑 */
  body.erp-body .page-content [class*="tab-nav"] > *,
  body.erp-body .page-content [class*="tab-bar"] > *,
  body.erp-body .page-content [class*="tabbar"] > *,
  body.erp-body .page-content [class*="seg-nav"] > *,
  body.erp-body .page-content [role="tablist"] > * {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* 2) 页面级兜底: 上面都兜不住的残余横向溢出 (个别 flex-nowrap 的非交互
        装饰条) 裁掉, 不产生贯穿全页的横滚动条。交互工具条已可换行/内部横滑,
        不会被这层藏掉按钮。*/
  body.erp-body .page-content { overflow-x: clip; }

  /* 2) 图片/视频/画布不超过容器宽 */
  body.erp-body .page-content img,
  body.erp-body .page-content video,
  body.erp-body .page-content canvas { max-width: 100% !important; height: auto; }

  /* 3) 代码 / 预格式化 / 长英文串 / 长 URL 不撑破容器 */
  body.erp-body .page-content pre,
  body.erp-body .page-content code,
  body.erp-body .page-content kbd,
  body.erp-body .page-content samp {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  body.erp-body .page-content textarea { max-width: 100%; }

  /* 4) 裸表格 (未套横滑容器的) 自身变成可横滑块 —— 宽表在自己内部横滚,
        而不是把整页顶宽。已套 .*scroll* / .*table-wrap* 滚动容器的表格
        保持正常 table 布局, 由外层容器负责横滑, 不改动它们。*/
  body.erp-body .page-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.erp-body .page-content [class*="scroll"] > table,
  body.erp-body .page-content [class*="table-wrap"] > table,
  body.erp-body .page-content [class*="table-scroll"] > table {
    /* 关键: 已套横滑容器的表格, 不但恢复 display:table, 还要释放上面 3) 的
       width/max-width:100% 约束 —— 否则表格会被压回容器宽、长文本单元格
       (如调研报告 TOP100 的"标题"列) 逐字竖排, 整行拔到上千 px 高 ("超级长")。
       改回按内容自然宽 (窄表仍靠 min-width:100% 撑满), 溢出交给外层容器横滑,
       与「内部分享」独立页 (.pbr-table-scroll table{width:max-content}) 表现一致。 */
    display: table;
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
}