/* ============================================================
 * 角色化界面：七套形态（统一墨金体系，不同权重）
 * importer 货源作业 | warehouse 仓储执行 | trader 交易优先
 * factory 收货极简 | bank 资金监管 | regulator 穿透监管 | platform 治理控制台
 * ============================================================ */

/* ---------- 角色状态条（顶栏下方，登录即掌握数据动态） ---------- */
.tb-strip {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 7px 26px; font-size: 12px; letter-spacing: .02em;
  border-bottom: 1px solid var(--line-soft);
  animation: tsIn .4s ease;
}
@keyframes tsIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ts-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-500); padding: 2px 10px 2px 0; margin-right: 8px; border-right: 1px solid var(--line-soft); white-space: nowrap; }
.ts-item:last-child { border-right: none; }
.ts-item b { color: var(--ink-900); font-variant-numeric: tabular-nums; }
.ts-item .ts-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--jade-500); box-shadow: 0 0 0 3px rgba(42,154,104,.15); }
.ts-item.ts-warn b { color: #8a6d35; }
.ts-item.ts-ok b { color: var(--brand-700); }
.ts-item .ts-hot { color: #8a6d35; font-size: 12.5px; }

/* 仓储执行条：冷墨绿底（作业现场感） */
.tb-strip-wh { background: linear-gradient(90deg, #eef3f0, #f5f4f1 60%); }
/* 银行资金条：藏青深底金字（金融监控感） */
.tb-strip-bank { background: linear-gradient(90deg, #16222e, #1d2c3a 55%, #16222e); border-bottom: none; }
.tb-strip-bank .ts-item { color: rgba(207,216,224,.6); border-right-color: rgba(255,255,255,.08); }
.tb-strip-bank .ts-item b { color: #ecdfc0; }
.tb-strip-bank .ts-item.ts-warn b, .tb-strip-bank .ts-item .ts-hot { color: var(--gold-400); }
.tb-strip-bank .ts-item.ts-ok b { color: #7ec9a5; }
.tb-strip-bank .ts-item .ts-dot { background: var(--gold-400); box-shadow: 0 0 0 3px rgba(201,169,97,.18); }
/* 治理控制台条：玉青底（系统治理感） */
.tb-strip-pf { background: linear-gradient(90deg, var(--brand-50), #f5f4f1 55%); }
/* 商城购物条：暖米金底（线上选购氛围） */
.tb-strip-mall { background: linear-gradient(90deg, #f6f1e6, #f5f4f1 55%); }

/* ---------- 侧栏角色状态卡（仓储库况 / 银行资金） ---------- */
.side-stat { margin: 0 14px 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); }
.side-stat .ss-t { font: 700 10.5px/1 var(--font); letter-spacing: .14em; color: var(--gold-400); margin-bottom: 8px; }
.side-stat .ss-row { display: flex; justify-content: space-between; align-items: center; padding: 4.5px 0; font-size: 12px; color: rgba(207,216,210,.6); }
.side-stat .ss-row b { color: #f0f2ef; font-variant-numeric: tabular-nums; font-size: 13px; }
.side-stat .ss-row .ss-warn { color: var(--gold-400); }

/* ============================================================
 * ① importer 货源作业：现行经典基准（墨绿侧栏 + 白顶栏）
 * ============================================================ */
[data-role="importer"] .sidebar { background: linear-gradient(165deg, #1e2c24, #131a17); }

/* ============================================================
 * ② warehouse 仓储执行：更宽侧栏 + 冷墨绿 + 高密度导航
 * ============================================================ */
[data-role="warehouse"] .sidebar { background: linear-gradient(165deg, #1a2a26, #10201c); }
[data-role="warehouse"] .nav-item { padding: 8px 12px; font-size: 13.5px; }
[data-role="warehouse"] .brand { padding: 18px 20px 14px; }
[data-role="warehouse"] .nav-group { margin-top: 13px; }

/* ============================================================
 * ③ trader 交易优先：深墨侧栏 + 香槟金顶栏（交易所质感）+ 超宽内容
 * ============================================================ */
[data-role="trader"] .sidebar { background: linear-gradient(168deg, #171d24, #0f1216); }
[data-role="trader"] .nav-group-title .bar { background: var(--gold-500); width: 4px; }
[data-role="trader"] .nav-item.active { background: linear-gradient(90deg, rgba(201,169,97,.22), rgba(201,169,97,.06)); }
[data-role="trader"] .topbar {
  background: linear-gradient(90deg, #16202b, #1c2937 55%, #16202b);
  border-bottom: 1px solid rgba(201,169,97,.28);
}
[data-role="trader"] .topbar-title { color: #f5f3ec; }
[data-role="trader"] .topbar-sub { color: rgba(236,223,192,.55); }
/* .menu-btn 主题色已暂时封存（2026-10-29）：原文见 mobile-sealed/mobile-nav.sealed.css【C5】 */
[data-role="trader"] .role-chip { background: linear-gradient(120deg, #a1813f, #c9a961); color: #131a17; box-shadow: none; }
[data-role="trader"] .role-chip .rc-dot { background: #fff; box-shadow: none; }
[data-role="trader"] .chip-online { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: rgba(236,223,192,.75); }
[data-role="trader"] .content { max-width: none; }

/* ============================================================
 * ④ factory 收货极简：紧凑窄侧栏 + 大字导航（操作直给）
 * ============================================================ */
[data-role="factory"] .sidebar { background: linear-gradient(168deg, #232a1f, #141a12); }
[data-role="factory"] .nav-item { font-size: 14.5px; padding: 11px 13px; gap: 12px; }
[data-role="factory"] .nav-item .ni-icon { width: 21px; height: 21px; }
[data-role="factory"] .nav-group-title { font-size: 11.5px; letter-spacing: .16em; }
[data-role="factory"] .brand-name { font-size: 19px; }
[data-role="factory"] .topbar { height: 58px; }

/* ============================================================
 * ⑤ bank 资金监管：藏青侧栏 + 金融监控双结构
 * ============================================================ */
[data-role="bank"] .sidebar { background: linear-gradient(168deg, #16222e, #0e1620); }
[data-role="bank"] .nav-group-title .bar { background: #5a86b8; }
[data-role="bank"] .nav-item.active { background: linear-gradient(90deg, rgba(90,134,184,.2), rgba(90,134,184,.05)); border-color: rgba(90,134,184,.25); }
[data-role="bank"] .nav-item.active .ni-icon { color: #8fb6dd; }
[data-role="bank"] .brand-logo { border-color: rgba(90,134,184,.32); }
[data-role="bank"] .brand-logo svg { color: #8fb6dd; }
[data-role="bank"] .side-user .su-role { color: #8fb6dd; border-color: rgba(90,134,184,.35); }

/* ============================================================
 * ⑥ regulator 穿透监管：纯黑墨侧栏 + 超宽全屏内容
 * ============================================================ */
[data-role="regulator"] .sidebar { background: linear-gradient(175deg, #12141a, #0a0c10); }
[data-role="regulator"] .nav-group-title .bar { background: var(--jade-500); }
[data-role="regulator"] .nav-item.active { background: linear-gradient(90deg, rgba(58,162,115,.18), rgba(58,162,115,.04)); border-color: rgba(58,162,115,.24); }
[data-role="regulator"] .content { max-width: none; padding: 26px 30px; }

/* ============================================================
 * ⑦ platform 治理控制台：深玉侧栏 + 玉青顶栏配重
 * ============================================================ */
[data-role="platform"] .sidebar { background: linear-gradient(168deg, #14261e, #0c1512); }
[data-role="platform"] .nav-group { margin-top: 14px; }
[data-role="platform"] .nav-group-title .bar { background: var(--jade-600); }
[data-role="platform"] .nav-item.active { background: linear-gradient(90deg, rgba(42,154,104,.18), rgba(42,154,104,.05)); border-color: rgba(42,154,104,.24); }
[data-role="platform"] .nav-item.active .ni-icon { color: var(--jade-500); }

/* ============================================================
 * ⑧ mall 商城购物：暖墨棕侧栏 + 香槟金点缀（线上商城质感）+ 宽内容
 * ============================================================ */
[data-role="mall"] .sidebar { background: linear-gradient(168deg, #241d16, #141009); }
[data-role="mall"] .nav-group-title .bar { background: var(--gold-500); width: 4px; }
[data-role="mall"] .nav-item.active { background: linear-gradient(90deg, rgba(201,169,97,.24), rgba(201,169,97,.07)); border-color: rgba(201,169,97,.3); }
[data-role="mall"] .nav-item.active .ni-icon { color: var(--gold-500); }
[data-role="mall"] .brand-logo { border-color: rgba(201,169,97,.35); }
[data-role="mall"] .brand-logo svg { color: var(--gold-500); }
[data-role="mall"] .side-user .su-role { color: var(--gold-500); border-color: rgba(201,169,97,.35); }
[data-role="mall"] .content { max-width: none; }

/* ---------- 移动端适配（角色差异降级为配色，布局统一抽屉） ---------- */
@media (max-width: 1023px) {
  .tb-strip { padding: 6px 14px; gap: 2px; }
  .ts-item { font-size: 12px; padding-right: 8px; margin-right: 6px; }
  [data-role="trader"] .content { max-width: 1500px; }
  [data-role="regulator"] .content { padding: 16px; }
}

/* ============ HUD 深空覆写（角色主题统一深色化） ============ */
[data-role] .topbar { background: rgba(8,16,32,.88); border-bottom: 1px solid rgba(255,143,77,.12); }
[data-role] .content { background: transparent; }
[data-role="trader"] .topbar-title, [data-role="mall"] .topbar-title { color: var(--ink-50); }
/* .menu-btn 霓虹主题已暂时封存（2026-10-29）：原文见 mobile-sealed/mobile-nav.sealed.css【C6】 */
[data-role="trader"] .role-chip .rc-dot { background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.tb-strip-bank .ts-item b { color: var(--neon) !important; font-family: var(--mono); }
.tb-strip-wh .ts-item b { color: var(--ok); font-family: var(--mono); }
.tb-strip-pf .ts-item b { color: var(--gold-500) !important; font-family: var(--mono); }
.tb-strip-mall .ts-item b { color: var(--purple) !important; font-family: var(--mono); }
.side-stat { background: rgba(255,143,77,.05) !important; border: 1px solid rgba(255,143,77,.15) !important; }
.side-stat .ss-row b { color: var(--neon) !important; font-family: var(--mono); }