/* Approved navigation preview, 2026-09-29. No business workspace styles. */
.app-shell { --nav-primary:#f1f4f9; --nav-secondary:#f8fafd; --nav-ink:#24334b; --nav-muted:#738098; --nav-line:#e2e7f0; --nav-accent:#4361ee; --nav-hover:#e8eef8; --nav-footer-height:72px; --nav-header-height:60px; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar { background:var(--nav-primary)!important; border-right:1px solid var(--nav-line)!important; box-shadow:none!important; overflow:hidden!important; }
.app-shell .app-sidebar .ant-layout-sider-children { display:flex; flex-direction:column; min-height:0; height:100%; }
.app-shell .app-sidebar nav { flex:1; min-height:0; overflow:auto; padding:8px 0; scrollbar-width:thin; scrollbar-color:transparent transparent; }
.app-shell .app-sidebar nav:hover { scrollbar-color:#c4cddc transparent; }
html[data-ui-template="service-v1"] .app-shell .app-brand { height:var(--nav-header-height); min-height:var(--nav-header-height); flex:0 0 var(--nav-header-height); padding:10px 16px; gap:10px; border-bottom:1px solid var(--nav-line); }
html[data-ui-template="service-v1"] .app-shell .app-brand-mark { width:34px; height:34px; flex-basis:34px; background:var(--nav-accent); border-radius:8px; box-shadow:none; font-size:19px; }
html[data-ui-template="service-v1"] .app-shell .app-brand-copy strong { color:var(--nav-ink); font-size:15px; font-weight:700; letter-spacing:0; }
html[data-ui-template="service-v1"] .app-shell .app-brand-copy small { color:var(--nav-muted); font-size:11px; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu { background:transparent!important; color:var(--nav-ink); margin-top:0!important; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar :is(.ant-menu-item,.ant-menu-submenu-title) { color:var(--nav-ink)!important; height:42px; line-height:42px; margin:2px 10px!important; width:calc(100% - 20px)!important; border-radius:8px!important; font-size:14px; font-weight:500; }
.app-shell .app-sidebar :is(.ant-menu-item-icon,.ant-menu-submenu-arrow) { color:inherit!important; }
.app-shell .app-sidebar .ant-menu-item-icon { font-size:17px!important; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu-item-selected { color:#fff!important; background:var(--nav-accent)!important; box-shadow:none!important; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar :is(.ant-menu-item:not(.ant-menu-item-selected),.ant-menu-submenu-title):hover { background:var(--nav-hover)!important; color:var(--nav-ink)!important; }
.app-shell .app-sidebar .ant-menu-inline-collapsed > :is(.ant-menu-item,.ant-menu-submenu) > .ant-menu-submenu-title { padding-inline:12px!important; }
html[data-ui-template="service-v1"] .app-shell .app-header { height:var(--nav-header-height)!important; flex:0 0 var(--nav-header-height); padding-inline:18px; background:var(--nav-secondary)!important; border-bottom:1px solid var(--nav-line)!important; box-shadow:none!important; }
.app-shell .app-page-title { color:var(--nav-ink)!important; font-size:16px; font-weight:700; }
.app-shell .app-menu-toggle { color:var(--nav-ink)!important; }
.app-sidebar-footer { display:flex; flex:0 0 var(--nav-footer-height); min-height:var(--nav-footer-height); height:var(--nav-footer-height); align-items:center; padding:10px 16px; border-top:1px solid var(--nav-line); background:var(--nav-primary); }
.app-sidebar-footer .app-account { width:100%; height:42px; gap:10px; padding:4px 0; color:var(--nav-ink); text-align:left; }
.app-sidebar-footer .app-account .ant-avatar { flex:0 0 32px; background:#dbe2ee!important; color:#fff!important; }
.app-sidebar-footer .app-account-label { flex:1; font-size:14px; font-weight:500; }
.app-sidebar-footer .app-account-gear { flex:0 0 19px; color:#425774; }
.app-sidebar-footer .app-account:hover { color:var(--nav-accent); }
.app-sidebar-footer .app-account:focus-visible { outline:2px solid var(--nav-accent); outline-offset:3px; border-radius:6px; }
.app-sidebar.ant-layout-sider-collapsed .app-sidebar-footer { justify-content:center; padding:8px; }
.app-sidebar.ant-layout-sider-collapsed .app-sidebar-footer .app-account { justify-content:center; }
.app-sidebar.ant-layout-sider-collapsed .app-account :is(.app-account-label,.app-account-gear) { display:none; }
html[data-opc-navigation-theme="dark"] .app-shell[data-page="opc"] { --nav-primary:#172238; --nav-secondary:#1d2a40; --nav-ink:#e5edf9; --nav-muted:#9caec9; --nav-line:#2c3b53; --nav-hover:#293954; }
@media(max-width:767px) { .app-shell { --nav-header-height:56px; } .app-shell .app-sidebar-footer .app-account-label { display:block; } html[data-ui-template="service-v1"] .app-shell .app-header { padding-inline:10px; } }
@media(prefers-reduced-motion:reduce) { .app-sidebar * { transition:none!important; } }

/* ===== 彩色换皮（2026-10-14 全系统 UI 改版第 0 步）。只改颜色、圆角、间距；不改布局，不改冻结 bundle。
   变量值与 web/src/design-system/tokens.css 的 --opc-* 一致（本文件单独复制到 assets，不能 @import 源码目录）。
   关掉方式：url 加 ?ui=legacy（外壳会把 data-ui-template 切成 legacy，本节全部失效）。 ===== */
html[data-ui-template="service-v1"] .app-shell { --nav-primary:#ffffff; --nav-secondary:#ffffff; --nav-ink:#14233d; --nav-muted:#55657f; --nav-line:#e2e7f0; --nav-accent:#2459f5; --nav-hover:#f3f4f6;
  --mod-boss:#2459f5; --mod-sales:#0f9d8a; --mod-content:#f08c2e; --mod-ads:#7c4dff; --mod-live:#e2457b; --mod-team:#22a05a;
  --mod-boss-soft:#e8f0ff; --mod-sales-soft:#d9f5f0; --mod-content-soft:#fff1e0; --mod-ads-soft:#ead9ff; --mod-live-soft:#ffe3ec; --mod-team-soft:#e3f5e9; }
/* 品牌块：蓝紫渐变（唯一允许的渐变） */
html[data-ui-template="service-v1"] .app-shell .app-brand-mark { background:linear-gradient(135deg,#2459f5,#7c4dff); border-radius:9px; }
/* 菜单项：每个一级模块一个识别色（图标着色）；选中态用该模块色做底 */
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu-item { --mod:var(--nav-accent); --mod-soft:var(--mod-boss-soft); }
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu-item:not(.ant-menu-item-selected) .ant-menu-item-icon { color:var(--mod)!important; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-item-icon { color:var(--mod)!important; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu-item-selected { background:var(--mod)!important; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu-item:not(.ant-menu-item-selected):hover { background:var(--mod-soft)!important; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar :is(.ant-menu-item,.ant-menu-submenu)[data-menu-id$="-boss-cockpit"] { --mod:var(--mod-boss); --mod-soft:var(--mod-boss-soft); }
html[data-ui-template="service-v1"] .app-shell .app-sidebar :is(.ant-menu-item,.ant-menu-submenu):is([data-menu-id$="-sales"],[data-menu-id$="-outbound"],[data-menu-id$="-crm"],[data-menu-id$="-followups"],[data-menu-id$="-grp-customer"],[data-menu-id$="-grp-sales"],[data-menu-id$="-grp-wecom-marketing"],[data-menu-id$="-grp-wecom-groups"],[data-menu-id$="-grp-wecom-risk"],[data-menu-id$="-grp-broadcast"],[data-menu-id$="-broadcast/sop-plan"],[data-menu-id$="-broadcast/moment-task"]) { --mod:var(--mod-sales); --mod-soft:var(--mod-sales-soft); }
html[data-ui-template="service-v1"] .app-shell .app-sidebar :is(.ant-menu-item,.ant-menu-submenu)[data-menu-id$="-channels"] { --mod:var(--mod-live); --mod-soft:var(--mod-live-soft); }
html[data-ui-template="service-v1"] .app-shell .app-sidebar :is(.ant-menu-item,.ant-menu-submenu):is([data-menu-id$="-opc"],[data-menu-id$="-grp-material"],[data-menu-id$="-materials"],[data-menu-id$="-material-studio"],[data-menu-id$="-material-analytics"],[data-menu-id$="-case-library"]) { --mod:var(--mod-content); --mod-soft:var(--mod-content-soft); }
html[data-ui-template="service-v1"] .app-shell .app-sidebar :is(.ant-menu-item,.ant-menu-submenu):is([data-menu-id$="-grp-ai"],[data-menu-id$="-ai-brain"],[data-menu-id$="-digital-staff"],[data-menu-id$="-token-usage"]) { --mod:var(--mod-ads); --mod-soft:var(--mod-ads-soft); }
html[data-ui-template="service-v1"] .app-shell .app-sidebar :is(.ant-menu-item,.ant-menu-submenu)[data-menu-id$="-team"] { --mod:var(--mod-team); --mod-soft:var(--mod-team-soft); }
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu-submenu > .ant-menu-submenu-title { color:var(--nav-muted)!important; font-size:12px; font-weight:600; letter-spacing:.02em; }
html[data-ui-template="service-v1"] .app-shell .app-sidebar .ant-menu-submenu-selected > .ant-menu-submenu-title { color:var(--mod)!important; }
/* 头部：白底，页面标题前一道模块色条 */
html[data-ui-template="service-v1"] .app-shell .app-header { background:#fff!important; }
html[data-ui-template="service-v1"] .app-shell .app-page-title { display:inline-flex; align-items:center; gap:10px; }
html[data-ui-template="service-v1"] .app-shell .app-page-title::before { content:""; width:4px; height:18px; border-radius:2px; background:var(--nav-accent); }
html[data-ui-template="service-v1"] .app-shell:is([data-page="sales"],[data-page="outbound"],[data-page="crm"],[data-page="followups"],[data-page="customer-health"],[data-page="sales-chain"],[data-page="sales-products"],[data-page="sales-payments"],[data-page="sales-targets"],[data-page="group-customers"],[data-page="group-overview"],[data-page="risk-words"],[data-page="marketing-welcome"],[data-page="broadcast/sop-plan"],[data-page="broadcast/moment-task"]) .app-page-title::before { background:var(--mod-sales); }
html[data-ui-template="service-v1"] .app-shell[data-page="channels"] .app-page-title::before { background:var(--mod-live); }
html[data-ui-template="service-v1"] .app-shell:is([data-page="opc"],[data-page="materials"],[data-page="material-studio"],[data-page="material-analytics"],[data-page="case-library"]) .app-page-title::before { background:var(--mod-content); }
html[data-ui-template="service-v1"] .app-shell:is([data-page="ai-brain"],[data-page="digital-staff"],[data-page="token-usage"]) .app-page-title::before { background:var(--mod-ads); }
html[data-ui-template="service-v1"] .app-shell:is([data-page="hr-employees"],[data-page="team-departments"],[data-page="team-tasks"],[data-page="system-start"],[data-page="system-health"]) .app-page-title::before { background:var(--mod-team); }
/* 账号块：头像用销售青 */
html[data-ui-template="service-v1"] .app-sidebar-footer .app-account .ant-avatar { background:var(--mod-sales-soft)!important; color:#0b7a6b!important; font-weight:600; }
/* 页面区域：统一底色、卡片圆角、主按钮、表头、页签；连带冻结页一起换皮。老板经营看板（data-page=boss-cockpit）按用户要求保持原样，排除在外 */
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content { background:#f6f7f9; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-btn-primary:not(.ant-btn-dangerous) { background:#2459f5!important; border-color:#2459f5!important; color:#fff!important; border-radius:6px; box-shadow:none; transition:background .15s ease,border-color .15s ease,transform .15s ease; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-btn:active { transform:translateY(1px); }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-btn-primary:not(.ant-btn-dangerous):not(:disabled):hover { background:#1d47c8!important; border-color:#1d47c8!important; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):not(.ant-btn-text) { border-radius:6px; border-color:#d9dce3; color:#1a1f2b; transition:background .15s ease,border-color .15s ease; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-btn:not(.ant-btn-primary):not(.ant-btn-link):not(.ant-btn-text):not(:disabled):hover { border-color:#b9bfc9; background:#fafafa; color:#1a1f2b; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-card { border-radius:8px; border-color:#e6e8ec; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-card-head { border-bottom-color:#eef0f3; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-table-thead > tr > th { background:#fff; color:#6b7280; font-weight:500; border-bottom-color:#e6e8ec; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-table-tbody > tr:hover > td { background:#fafafa; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-tabs .ant-tabs-ink-bar { background:#2459f5; height:2px; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-tabs .ant-tabs-tab-active .ant-tabs-tab-btn { color:#1a1f2b; font-weight:600; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-tag:not(.ant-tag-checkable) { border-radius:4px; background:transparent; border-color:transparent; padding-inline:0; font-weight:500; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-tag:not(.ant-tag-checkable)::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; margin-right:5px; vertical-align:1px; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-statistic-content { color:#14233d; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content :is(.ant-input,.ant-select-selector,.ant-input-affix-wrapper,.ant-picker) { border-radius:6px!important; border-color:#d9dce3; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-input-affix-wrapper > .ant-input { border-radius:0!important; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-pagination-item-active { border-color:#2459f5; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-pagination-item-active a { color:#2459f5; }
html[data-ui-template="service-v1"] .app-shell:not([data-page="boss-cockpit"]) .app-content .ant-progress-bg { background:#2459f5; }