/* ============================================================================
* admin_v8_theme_light.css —— 资源平台后台「简约现代 · 浅色」主题
* ----------------------------------------------------------------------------
* 客户 2026-10-03 决定: 后台【每天要用】-> 用浅色 ✓ (长时间看表格/表单更舒服)
* (深色"盯数据"舒服, 但长时间看表格累 ✗ —— 这就是当时的权衡, 客户自己想通了)
*
* ★ 设计目标(客户点名的三件事):
* ① 字体最舒服: 中文栈 + tabular-nums 数字对齐 + 行高 1.55 + 不用细体
* ② 布局简约现代: 近白底 + 白卡片 + 极细边框 + 克制圆角 + 大留白但【信息密度够】
* ③ 操作便捷: 行内操作 / 一键完成 / 键盘 / 筛选记忆 / 首屏关键数字
*
* ★★ 本文件的【安全边界】(照抄本项目教训: 只加增量, 不重写容器基础布局 ✗)
* §1 Token (含【重映射 legacy 变量名】-> 旧后台配色自动跟随, 零布局风险 ✓✓)
* §2 旧后台harmonization —— ★ 只改【颜色/字体/数字对齐】, 绝不动 display/position/
* width/height/margin/padding/grid ✗ (旧页面几何由 _adm_probe.py 前后对比证明不变 ✓)
* §3 侧栏(浅色化) —— 只改颜色/背景 ✓
* §4 新组件 (.v8-* 命名空间, 只用于新页面, 不会碰到旧页面 ✓)
* §5 侧栏两个微变体 + 主色两选 (给客户挑 ✓)
*
* ★ 依赖: 无。纯 CSS, 无框架/无构建/无外部字体请求 ✓
* ★ 加载顺序: 必须在本页 inline 之后 link) ✓
* 生成日期: 2026-10-03
* ==========================================================================*/
/* ==========================================================================
* §1 设计 Token
* ========================================================================*/
:root{
/* ---- 1.1 字体栈 (客户点名"最舒服") ----------------------------------
* Windows: -apple-system/BlinkMacSystemFont/PingFang SC 都不存在 -> 落到
* "Microsoft YaHei UI" 再 "Microsoft YaHei" ✓ (黑体, 不会是宋体 ✓)
* macOS: -apple-system 命中 -> SF Pro + 系统中文(PingFang) ✓
* ★ 中文字重放最前, 让【中英文同一个字体】, 视觉更统一 (混排不跳字号)
* ------------------------------------------------------------------- */
--v8-font: -apple-system, BlinkMacSystemFont, "PingFang SC",
"Microsoft YaHei UI", "Microsoft YaHei",
"Source Han Sans SC", "Noto Sans SC", "Hiragino Sans GB",
"Segoe UI", Roboto, Arial, sans-serif;
/* 订单号/编码/ID: 等宽更易核对 */
--v8-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas,
"Liberation Mono", Menlo, monospace;
/* ---- 1.2 字号 (★ 最小 12px, 不要更小; 中文行高要比英文大) ---- */
--v8-fs-xs: 12px; /* 表头 / 辅助说明 */
--v8-fs-sm: 12.5px; /* 次级 / 时间 / 标签 */
--v8-fs-md: 14px; /* 正文基准 */
--v8-fs-td: 13.5px; /* 表格内容 (比正文略小, 提升密度) */
--v8-fs-lg: 16px; /* 卡片标题 */
--v8-fs-h1: 20px; /* 页面标题 */
--v8-fs-kpi: 28px; /* KPI 数字 */
--v8-lh: 1.55; /* 中文正文行高 */
--v8-lh-tight:1.35;
/* ---- 1.3 字重 (★ 不用 300 以下的细体 ✗) ---- */
--v8-fw: 400;
--v8-fw-med: 500;
--v8-fw-semi: 600;
--v8-fw-bold: 700;
/* ---- 1.4 底色层次 (近白, 靠极浅灰分层而不是靠阴影) ---- */
--v8-bg: #f6f8fa; /* 应用底 */
--v8-panel: #ffffff; /* 卡片 */
--v8-panel-2: #f6f8fa; /* 卡内分区 / 表头 */
--v8-panel-3: #eef1f4; /* 控件底 / 标签底 */
--v8-side: #ffffff; /* 侧栏(变体1: 纯白) */
--v8-side-gray: #f6f8fa; /* 侧栏(变体2: 极浅灰) */
/* ---- 1.5 边框 (极细 1px, 少阴影) ---- */
--v8-line: #eaeef2;
--v8-line-2: #d0d7de;
/* ---- 1.6 文字三级 ---- */
--v8-text: #1f2328; /* 主 */
--v8-text-2: #59636e; /* 次 (正文/表格) */
--v8-text-3: #818b98; /* 三 (说明/占位) */
/* ---- 1.7 主色 (★ 变体在 §5: 橙 / 蓝) ---- */
--v8-accent: #e8590c; /* 默认: 沿用桌面 APP 的橙 -> 品牌一致 ✓ */
--v8-accent-hover:#d94f08;
--v8-accent-soft: rgba(232,89,12,.08);
--v8-accent-line: rgba(232,89,12,.32);
--v8-accent-2: #f08c00; /* 主色第二档(渐变/图标用), 随变体走 ✓ 不要硬编码 ✗ */
--v8-on-accent: #ffffff;
/* ---- 1.8 状态色 (浅色底用饱和一点的, 保证对比度) ---- */
--v8-ok: #1a7f37; --v8-ok-soft: rgba(26,127,55,.09); --v8-ok-line: rgba(26,127,55,.28);
--v8-warn: #9a6700; --v8-warn-soft: rgba(154,103,0,.10); --v8-warn-line: rgba(154,103,0,.30);
--v8-danger: #cf222e; --v8-danger-soft: rgba(207,34,46,.08); --v8-danger-line: rgba(207,34,46,.28);
--v8-gray: #59636e; --v8-gray-soft: rgba(89,99,110,.10); --v8-gray-line: rgba(89,99,110,.26);
--v8-info: #8250df; --v8-info-soft: rgba(130,80,223,.09); --v8-info-line: rgba(130,80,223,.28);
/* ---- 1.9 图表系列色 ---- */
--v8-data-1:#0969da; --v8-data-2:#1a7f37; --v8-data-3:#bf8700; --v8-data-4:#8250df;
/* ---- 1.10 圆角 (克制 6~8px) ---- */
--v8-r-sm: 5px; --v8-r-md: 6px; --v8-r-lg: 8px; --v8-r-pill: 999px;
/* ---- 1.11 阴影 (极轻, 靠边框分层) ---- */
--v8-sh-card: 0 1px 0 rgba(31,35,40,.02);
--v8-sh-pop: 0 8px 24px rgba(31,35,40,.12);
--v8-sh-focus:0 0 0 3px var(--v8-accent-soft);
/* ---- 1.12 间距 (4px 基准, 只用这几档) ---- */
--v8-sp-1:4px; --v8-sp-2:6px; --v8-sp-3:8px; --v8-sp-4:10px;
--v8-sp-5:12px; --v8-sp-6:16px; --v8-sp-7:20px; --v8-sp-8:26px;
/* ---- 1.13 布局尺寸 ---- */
--v8-w-side: 232px;
--v8-h-top: 56px;
/* ======================================================================
* 1.14 ★★ 重映射【旧后台的变量名】 -> 旧后台一整套配色自动跟随本主题 ✓✓
* 这是本次"零布局风险"改配色的关键: 旧后台全部颜色都走这几个变量,
* 我只覆盖变量值, 不碰任何旧规则 ✗ => 布局不可能变 ✓
* ==================================================================== */
--bg: var(--v8-bg);
--card: var(--v8-panel);
--border: var(--v8-line);
--text: var(--v8-text);
--text-muted: var(--v8-text-2);
--text-tertiary: var(--v8-text-3);
--primary: var(--v8-accent);
--primary-hover: var(--v8-accent-hover);
--success: var(--v8-ok);
--warning: #bf8700;
--danger: var(--v8-danger);
--info: var(--v8-info);
--win: #0969da;
--mac: #e8590c;
--linux: #8250df;
--price-low: var(--v8-text-2);
--price-mid: #bf8700;
--price-high: var(--v8-danger);
--radius: var(--v8-r-md);
--radius-lg: var(--v8-r-lg);
/* 旧 v7 增强脚本用的键 */
--c-bg:var(--v8-bg); --c-panel:var(--v8-panel); --c-panel-2:var(--v8-panel-2);
--c-panel-3:var(--v8-panel-3); --c-border:var(--v8-line); --c-border-strong:var(--v8-line-2);
--c-text:var(--v8-text); --c-text-2:var(--v8-text-2); --c-text-3:var(--v8-text-3);
--c-text-4:var(--v8-text-3); --c-accent:var(--v8-accent); --c-accent-hover:var(--v8-accent-hover);
--c-accent-soft:var(--v8-accent-soft); --c-on-accent:var(--v8-on-accent);
--c-ok:var(--v8-ok); --c-ok-soft:var(--v8-ok-soft); --c-ok-line:var(--v8-ok-line);
--c-warn:var(--v8-warn); --c-warn-soft:var(--v8-warn-soft); --c-warn-line:var(--v8-warn-line);
--c-danger:var(--v8-danger); --c-danger-soft:var(--v8-danger-soft); --c-danger-line:var(--v8-danger-line);
--c-gray:var(--v8-gray); --c-gray-soft:var(--v8-gray-soft); --c-gray-line:var(--v8-gray-line);
--c-info:var(--v8-info); --c-info-soft:var(--v8-info-soft); --c-info-line:var(--v8-info-line);
--c-zebra:rgba(31,35,40,.022);
--r-sm:var(--v8-r-sm); --r-md:var(--v8-r-md); --r-lg:var(--v8-r-lg); --r-pill:var(--v8-r-pill);
--sh-card:var(--v8-sh-card); --sh-pop:var(--v8-sh-pop); --sh-focus:var(--v8-sh-focus);
--f-sans:var(--v8-font); --f-mono:var(--v8-mono);
--fs-xs:var(--v8-fs-xs); --fs-sm:var(--v8-fs-sm); --fs-md:var(--v8-fs-md);
--fs-lg:var(--v8-fs-h1); --fs-kpi:var(--v8-fs-kpi);
--fw-normal:var(--v8-fw); --fw-medium:var(--v8-fw-med); --fw-semi:var(--v8-fw-semi); --fw-bold:var(--v8-fw-bold);
--sp-1:var(--v8-sp-1); --sp-2:var(--v8-sp-2); --sp-3:var(--v8-sp-3); --sp-4:var(--v8-sp-4);
--sp-5:var(--v8-sp-5); --sp-6:var(--v8-sp-6); --sp-7:var(--v8-sp-7); --sp-8:var(--v8-sp-8);
--w-sidebar:var(--v8-w-side); --h-topbar:var(--v8-h-top);
--lh-base:var(--v8-lh); --lh-loose:1.7; --lh-tight:var(--v8-lh-tight);
color-scheme: light;
}
/* ==========================================================================
* §2 旧后台 harmonization —— ★★ 只改【颜色 / 字体 / 数字对齐】✗ 不动任何布局属性
* (display/position/width/height/margin/padding/grid 一律不出现 ✗)
* ========================================================================*/
/* 2.1 字体统一 (旧后台是 15px + 自带字体栈; 换成更舒服的一套) */
body{
font-family: var(--v8-font) !important;
font-size: var(--v8-fs-md) !important;
line-height: var(--v8-lh) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
button,input,select,textarea{font-family:var(--v8-font) !important}
/* ========================================================================
* ★★ STV3u：全站字体栈统一（客户："字体样式、粗细改成和你这个界面一样"）
* ★ 实测查出的真 bug：同一个页面上【并存两套字体栈】✗
* · body / .v8-btn 走 --v8-font（**中文优先**：PingFang SC -> Microsoft YaHei UI -> … -> Segoe UI ✓）
* · 而 h1 / 卡片名 / KPI 数字 / th / td / 标签 等走另一套（**英文优先**：
* -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", … ✗）
* —— 来自基础样式（admin_v7.css，✗ 本任务禁止改它 ✗）-> 所以在这里用【最后加载 + !important】覆盖 ✓
* => 后果：同一行里**中文和数字来自不同字体** ✗ 中英混排会"跳"、粗细观感不一致 ✗
* （这正是客户说"字体样式/粗细"的根因 ✓，不是"看着不像"那种模糊感受 ✓）
* ★ 范围：**全站 12 页**（✗ 不只站点页 —— 客户看的是整个后台 ✓ 只统一一页反而更不一致 ✗）
* ★✗ 等宽例外【必须保留】：订单号 / 域名 / ID / code 用 --v8-mono 更好核对 ✓
* （本项目的图标全是内联 SVG ✓ 没有图标字体 ✓ 所以统一字体栈不会把图标搞坏 ✓）
* ====================================================================== */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body span, html body b, html body strong, html body i, html body em,
html body td, html body th, html body label, html body button, html body input,
html body select, html body textarea, html body div, html body a, html body small,
html body li, html body legend, html body option{
font-family: var(--v8-font) !important;
}
/* ★ 等宽例外（写在后面 -> 同优先级下覆盖上面那条 ✓） */
html body .mono, html body .mono *, html body .ono, html body .order-no, html body code,
html body pre, html body kbd, html body samp, html body [class*="mono"], html body [class*="mono"] *{
font-family: var(--v8-mono) !important;
}
/* ★★ STV3u ②：中文粗细策略（照顾 Windows 上"微软雅黑只有 Regular/Bold"这个现实 ✗）
* 实测：字重 400/500/600/700 浏览器都"接受" ✓，但**微软雅黑没有中间档** ✗
* -> 中文的 500 / 600 会被渲染成同一个样子（合成或落 Bold）✗ => 设计【不能依赖 500 与 600 的差别】✓
* 策略：① 标题/卡片名 = 600（中文 Semibold，比 Bold 轻 ✓）
* ② ★ 表格【正文】600 -> 500（中文实际落 Regular，观感更清爽 ✓；数字单元格自己有 600 不受影响 ✓）
* ③ 数字 / KPI = 600~700 + tabular-nums（数字字体有真 Semibold ✓ 不虚 ✗）
* ★ 这里只兜"基础样式把表格正文设成 600"这一处 ✗；
* 本项目自己写的类（.v8-*）各有明确字重，不动 ✓ */
html body table td, html body table th, html body .table td, html body .table th,
html body .v8-tbl td, html body .v8-tbl th{
font-weight: var(--v8-fw-med) !important;
}
/* ★ 例外：数值/统计/KPI/标题类仍用 600 ✓（在表格里更醒目，且数字有真 Semibold ✓） */
html body .v8-tbl td.num, html body .v8-tbl th.num, html body .v8-tbl .mono,
html body .v8-stv-stat .st .v, html body .v8-stv-stat .st .k, html body .v8-stv-kpi-v,
html body .v8-tbl .strong, html body .v8-tbl.v8-stv-tbl .dom, html body .v8-tbl.v8-stv-tbl .sid{
font-weight: var(--v8-fw-semi) !important;
}
/* 2.2 表格: 字号/字重/行高统一 + ★数字等宽对齐(金额/订单数纵向对得齐 ✓)
* ✗ 不设 padding / white-space / border-collapse (那是布局属性) */
.table td,.table th{font-family:var(--v8-font) !important}
.table tbody td{font-size:var(--v8-fs-td) !important;color:var(--v8-text-2) !important}
.table thead th{font-size:var(--v8-fs-xs) !important;color:var(--v8-text-3) !important;
letter-spacing:.02em !important}
/* 数字类单元格 + 订单号: 等宽数字/等宽字体, 便于纵向核对 */
.table td.num,.table td[data-num],.ver-price,.kpi-value,.kpi-val,
.order-no,.ono,[class*="amount"],[class*="price"],[class*="count"]{
font-variant-numeric: tabular-nums;font-feature-settings:"tnum" 1;
}
.ono,.order-no{font-family:var(--v8-mono) !important}
/* 2.3 页面标题字重/字距 (只是字重与字距, 不是字号尺寸语义) */
.page-title{font-weight:var(--v8-fw-semi) !important;letter-spacing:-.2px !important}
.card-title{font-weight:var(--v8-fw-semi) !important}
/* 2.4 数字统一等宽 (KPI / 统计) */
.kpi-value,.kpi-val,.dc-revenue,.dc-cost,.dc-profit,.dc-rate{
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
/* 2.5 主色相关: 边框/阴影跟随主色 (旧后台写死了 rgba(22,119,255,...) 的蓝色光晕 ✗) */
input:focus,select:focus,textarea:focus{
border-color:var(--v8-accent) !important;
box-shadow:var(--v8-sh-focus) !important;
}
/* 2.6 滚动条: 浅色细滚动条 (Windows 默认滚动条在浅色后台里很突兀) */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:#d0d7de;border-radius:6px;border:2px solid transparent;
background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#b1b8c0;background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}
/* ==========================================================================
* §3 侧栏浅色化 —— ★★ 只改【背景与前景颜色】✗ 不动 width/position/display
* 旧后台侧栏是深蓝渐变 + 白字 ✗ 改成浅色后必须同时把白字改深, 否则看不见 ✗✗
* ========================================================================*/
.sidebar{
background: var(--v8-side) !important;
border-right: 1px solid var(--v8-line) !important;
color: var(--v8-text) !important;
}
.sidebar h1{
color: var(--v8-text) !important;
font-size: var(--v8-fs-md) !important;
font-weight: var(--v8-fw-semi) !important;
letter-spacing: 0 !important;
border-bottom: 1px solid var(--v8-line) !important;
}
.sidebar h2{color:var(--v8-text-3) !important;font-size:var(--v8-fs-xs) !important;
font-weight:var(--v8-fw-med) !important;letter-spacing:.06em !important}
/* 应用级菜单项 */
.nav-top .nav-item{
color: var(--v8-text-2) !important;
font-size: var(--v8-fs-md) !important;
font-weight: var(--v8-fw);
border-left: 3px solid transparent !important;
}
.nav-top .nav-item:hover{background:var(--v8-panel-2) !important;color:var(--v8-text) !important}
.nav-top .nav-item.active{
background: var(--v8-accent-soft) !important;
color: var(--v8-accent) !important;
border-left-color: var(--v8-accent) !important;
font-weight: var(--v8-fw-semi) !important;
}
/* 软件列表项 */
.product-nav-item{color:var(--v8-text-2) !important;font-size:var(--v8-fs-sm) !important}
.product-nav-item:hover{background:var(--v8-panel-2) !important;color:var(--v8-text) !important}
.product-nav-item.active{background:var(--v8-accent-soft) !important;color:var(--v8-accent) !important;
border-left-color:var(--v8-accent) !important}
.product-nav-item .icon{background:var(--v8-panel-3) !important;color:var(--v8-text-3) !important}
.product-nav-item .dot{background:var(--v8-ok) !important}
/* 搜索框 */
.product-nav-search input{
background:var(--v8-panel-2) !important;border-color:var(--v8-line) !important;
color:var(--v8-text) !important;font-size:var(--v8-fs-sm) !important
}
.product-nav-search input::placeholder{color:var(--v8-text-3) !important}
.product-nav-search input:focus{background:#fff !important;border-color:var(--v8-accent) !important}
.sidebar .empty{color:var(--v8-text-3) !important}
/* 顶栏: 白底 + 细线 (旧的是白底但阴影偏重) */
.topbar{background:var(--v8-panel) !important;border-bottom:1px solid var(--v8-line) !important;
box-shadow:none !important}
.topbar .logo{color:var(--v8-text) !important;font-weight:var(--v8-fw-semi) !important}
.topbar .breadcrumb{color:var(--v8-text-3) !important;font-size:var(--v8-fs-sm) !important}
.topbar .breadcrumb .current{color:var(--v8-text) !important;font-weight:var(--v8-fw-med) !important}
.topbar .user{background:var(--v8-panel-2) !important;border:1px solid var(--v8-line) !important;
color:var(--v8-text-2) !important;font-size:var(--v8-fs-sm) !important}
.avatar{background:linear-gradient(135deg,var(--v8-accent),var(--v8-accent-2)) !important;color:#fff !important}
.btn-icon{background:var(--v8-panel-2) !important;border:1px solid var(--v8-line) !important;
color:var(--v8-text-2) !important}
.btn-icon:hover{background:var(--v8-panel-3) !important;color:var(--v8-text) !important}
/* 内容区底色 (旧的是 #f5f7fa, 换成更中性的 #f6f8fa) */
html,body{background:var(--v8-bg) !important}
.main{background:transparent !important}
/* ==========================================================================
* §4 新组件 (.v8-* 命名空间) —— ★ 只用于新页面, 旧页面完全没有这些 class ✓
* ========================================================================*/
/* ---- 4.1 布局容器 ---- */
.v8-wrap{display:flex;flex-direction:column;gap:var(--v8-sp-6)}
.v8-grid{display:grid;gap:var(--v8-sp-6)}
.v8-grid.c2{grid-template-columns:1fr 1fr}
.v8-grid.c3{grid-template-columns:repeat(3,1fr)}
.v8-grid.main-side{grid-template-columns:1.35fr 1fr;align-items:start}
.v8-col{display:flex;flex-direction:column;gap:var(--v8-sp-6);min-width:0}
/* ---- 4.2 页面头 ---- */
.v8-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--v8-sp-6);
padding-bottom:2px}
.v8-head h1{font-size:var(--v8-fs-h1);font-weight:var(--v8-fw-semi);letter-spacing:-.3px;
color:var(--v8-text);line-height:1.25}
.v8-head p{font-size:var(--v8-fs-sm);color:var(--v8-text-3);margin-top:3px}
.v8-head-r{display:flex;gap:var(--v8-sp-3);align-items:center;flex:0 0 auto}
/* ---- 4.3 卡片 ---- */
.v8-card{background:var(--v8-panel);border:1px solid var(--v8-line);border-radius:var(--v8-r-lg);
box-shadow:var(--v8-sh-card)}
.v8-card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--v8-sp-5);
padding:var(--v8-sp-5) var(--v8-sp-6);border-bottom:1px solid var(--v8-line)}
.v8-card-h.no-b{border-bottom:none}
.v8-card-t{font-size:var(--v8-fs-lg);font-weight:var(--v8-fw-semi);color:var(--v8-text);
display:flex;align-items:baseline;gap:var(--v8-sp-3)}
.v8-card-t small{font-size:var(--v8-fs-xs);font-weight:var(--v8-fw);color:var(--v8-text-3)}
.v8-card-b{padding:var(--v8-sp-6)}
.v8-card-b.flush{padding:0}
/* ---- 4.4 KPI 卡 (★首屏可见, 不用滚动 ✓) ---- */
.v8-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--v8-sp-6)}
.v8-kpi{background:var(--v8-panel);border:1px solid var(--v8-line);border-radius:var(--v8-r-lg);
padding:var(--v8-sp-6);box-shadow:var(--v8-sh-card);display:flex;flex-direction:column;gap:2px}
.v8-kpi-t{display:flex;align-items:center;justify-content:space-between;gap:var(--v8-sp-3)}
.v8-kpi-l{font-size:var(--v8-fs-sm);color:var(--v8-text-2);font-weight:var(--v8-fw-med)}
.v8-kpi-v{font-size:var(--v8-fs-kpi);font-weight:var(--v8-fw-bold);color:var(--v8-text);
line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.v8-kpi-s{font-size:var(--v8-fs-xs);color:var(--v8-text-3)}
.v8-delta{font-size:12px;font-weight:var(--v8-fw-semi);padding:1.5px 7px;border-radius:var(--v8-r-sm);
white-space:nowrap}
.v8-delta.up{color:var(--v8-ok);background:var(--v8-ok-soft)}
.v8-delta.down{color:var(--v8-danger);background:var(--v8-danger-soft)}
.v8-delta.flat{color:var(--v8-gray);background:var(--v8-gray-soft)}
/* ---- 4.5 累计指标条 ---- */
.v8-cum{display:grid;grid-template-columns:repeat(6,1fr);background:var(--v8-panel);
border:1px solid var(--v8-line);border-radius:var(--v8-r-lg);box-shadow:var(--v8-sh-card);
padding:var(--v8-sp-5) var(--v8-sp-3)}
.v8-cum-i{display:flex;flex-direction:column;gap:2px;padding:0 var(--v8-sp-6);
border-right:1px solid var(--v8-line);min-width:0}
.v8-cum-i:last-child{border-right:none}
.v8-cum-i span{font-size:var(--v8-fs-xs);color:var(--v8-text-3)}
.v8-cum-i b{font-size:16px;font-weight:var(--v8-fw-semi);color:var(--v8-text);
font-variant-numeric:tabular-nums}
/* ---- 4.6 按钮 ---- */
.v8-btn{display:inline-flex;align-items:center;gap:var(--v8-sp-2);padding:6px 13px;
border-radius:var(--v8-r-md);font-size:var(--v8-fs-sm);font-weight:var(--v8-fw-med);
border:1px solid var(--v8-line-2);background:var(--v8-panel);color:var(--v8-text);
cursor:pointer;transition:background .12s,border-color .12s,color .12s;white-space:nowrap;
line-height:1.5}
.v8-btn:hover{background:var(--v8-panel-2)}
.v8-btn:active{background:var(--v8-panel-3)}
.v8-btn-pri{background:var(--v8-accent);border-color:var(--v8-accent);color:var(--v8-on-accent);
font-weight:var(--v8-fw-semi)}
.v8-btn-pri:hover{background:var(--v8-accent-hover);border-color:var(--v8-accent-hover)}
.v8-btn-danger{background:transparent;border-color:var(--v8-danger-line);color:var(--v8-danger)}
.v8-btn-danger:hover{background:var(--v8-danger-soft)}
.v8-btn.sm{padding:4px 9px;font-size:var(--v8-fs-xs)}
.v8-btn:disabled{opacity:.5;cursor:not-allowed}
.v8-btn-setdefault{background:var(--v8-accent);border-color:var(--v8-accent);
color:var(--v8-on-accent);font-weight:var(--v8-fw-semi);padding:5px 14px}
.v8-link{color:var(--v8-accent);font-size:var(--v8-fs-sm);font-weight:var(--v8-fw-med);
cursor:pointer;background:none;border:none;padding:0}
.v8-link:hover{text-decoration:underline}
.v8-link.danger{color:var(--v8-danger)}
/* ---- 4.7 状态标签 ---- */
.v8-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:var(--v8-r-pill);
font-size:var(--v8-fs-xs);font-weight:var(--v8-fw-semi);border:1px solid transparent;white-space:nowrap}
.v8-chip-ok{background:var(--v8-ok-soft);color:var(--v8-ok);border-color:var(--v8-ok-line)}
.v8-chip-warn{background:var(--v8-warn-soft);color:var(--v8-warn);border-color:var(--v8-warn-line)}
.v8-chip-danger{background:var(--v8-danger-soft);color:var(--v8-danger);border-color:var(--v8-danger-line)}
.v8-chip-gray{background:var(--v8-gray-soft);color:var(--v8-gray);border-color:var(--v8-gray-line)}
.v8-chip-info{background:var(--v8-info-soft);color:var(--v8-info);border-color:var(--v8-info-line)}
.v8-chip-accent{background:var(--v8-accent-soft);color:var(--v8-accent);border-color:var(--v8-accent-line)}
.v8-tag{font-size:var(--v8-fs-xs);font-weight:var(--v8-fw-semi);background:var(--v8-panel-3);
color:var(--v8-text-2);border-radius:var(--v8-r-sm);padding:1px 7px;white-space:nowrap}
/* ---- 4.8 表格 ---- */
.v8-tbl{width:100%;border-collapse:collapse}
.v8-tbl th{background:var(--v8-panel-2);color:var(--v8-text-3);font-size:var(--v8-fs-xs);
font-weight:var(--v8-fw-semi);text-align:left;padding:9px 14px;border-bottom:1px solid var(--v8-line-2);
white-space:nowrap;letter-spacing:.02em}
.v8-tbl td{padding:9px 14px;border-bottom:1px solid var(--v8-line);font-size:var(--v8-fs-td);
color:var(--v8-text-2);vertical-align:middle}
.v8-tbl tbody tr:nth-child(even){background:rgba(31,35,40,.016)} /* 极淡斑马纹 ✓ */
.v8-tbl tbody tr:hover{background:var(--v8-panel-2)}
.v8-tbl tbody tr:last-child td{border-bottom:none}
.v8-tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.v8-tbl .mono{font-family:var(--v8-mono);font-size:12.5px}
.v8-tbl .strong{color:var(--v8-text);font-weight:var(--v8-fw-semi)}
.v8-tbl .nowrap{white-space:nowrap}
/* ★ 行内操作: 平时淡, 悬浮整行时变清晰 (客户要"表格行内操作" ✓ 不用点进详情 ✓) */
.v8-tbl .rowacts{display:flex;gap:10px;align-items:center;opacity:.45;transition:opacity .12s}
.v8-tbl tbody tr:hover .rowacts{opacity:1}
.v8-tbl .empty-row td{text-align:center;color:var(--v8-text-3);padding:34px 14px;font-size:var(--v8-fs-sm)}
/* ---- 4.9 筛选区 (★筛选条件会记住, 见 features.js) ---- */
.v8-filters{display:grid;gap:11px;align-items:end;background:var(--v8-panel);
border:1px solid var(--v8-line);border-radius:var(--v8-r-lg);padding:13px 16px;
box-shadow:var(--v8-sh-card)}
.v8-f{display:flex;flex-direction:column;gap:var(--v8-sp-1);min-width:0}
.v8-f>label{font-size:var(--v8-fs-xs);color:var(--v8-text-3);font-weight:var(--v8-fw-semi)}
.v8-f input,.v8-f select{width:100%;font-size:var(--v8-fs-sm);padding:6px 10px;
border:1px solid var(--v8-line-2);border-radius:var(--v8-r-md);background:#fff;color:var(--v8-text)}
.v8-f input:focus,.v8-f select:focus{border-color:var(--v8-accent);outline:none;
box-shadow:var(--v8-sh-focus)}
.v8-facts{display:flex;gap:var(--v8-sp-3)}
/* ---- 4.10 分段控件 / Tabs ---- */
.v8-seg{display:inline-flex;gap:2px;padding:2.5px;background:var(--v8-panel-2);
border:1px solid var(--v8-line);border-radius:var(--v8-r-md)}
.v8-seg-b{padding:4px 11px;border-radius:4px;font-size:var(--v8-fs-sm);color:var(--v8-text-2);
cursor:pointer;border:none;background:none}
.v8-seg-b.on{background:#fff;color:var(--v8-text);font-weight:var(--v8-fw-semi);
box-shadow:0 1px 2px rgba(31,35,40,.08)}
.v8-tabs{display:flex;gap:2px;border-bottom:1px solid var(--v8-line);padding:0 var(--v8-sp-6)}
.v8-tab{padding:9px 14px;font-size:var(--v8-fs-sm);color:var(--v8-text-3);cursor:pointer;
border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px}
.v8-tab.on{color:var(--v8-text);font-weight:var(--v8-fw-semi);border-bottom-color:var(--v8-accent)}
/* ---- 4.11 迷你占比条 ---- */
.v8-bar{display:flex;align-items:center;gap:9px;width:100%}
.v8-bar-t{flex:1;height:5px;border-radius:3px;overflow:hidden;background:var(--v8-panel-3);min-width:40px}
.v8-bar-t i{display:block;height:100%;border-radius:3px;background:var(--v8-accent)}
.v8-bar-p{width:42px;text-align:right;font-size:var(--v8-fs-xs);color:var(--v8-text-3);
font-variant-numeric:tabular-nums}
/* ---- 4.12 提示条 (★把"不确定性"露在界面上 ✓ 见架构文档 §16.2) ---- */
.v8-warn{display:flex;align-items:flex-start;gap:var(--v8-sp-3);background:var(--v8-warn-soft);
border:1px solid var(--v8-warn-line);border-radius:var(--v8-r-lg);padding:9px 14px;
font-size:var(--v8-fs-sm);color:var(--v8-text-2);line-height:1.6}
.v8-warn b{color:var(--v8-text)}
.v8-note{background:var(--v8-panel-2);border:1px solid var(--v8-line);border-radius:var(--v8-r-lg);
padding:9px 14px;font-size:var(--v8-fs-sm);color:var(--v8-text-2);line-height:1.65}
.v8-caliber{font-size:var(--v8-fs-xs);color:var(--v8-text-3);line-height:1.75;padding:0 2px}
.v8-caliber b{color:var(--v8-text-2)}
/* ---- 4.13 空状态 ---- */
.v8-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:var(--v8-sp-3);padding:44px 20px;color:var(--v8-text-3);text-align:center}
.v8-empty-ico{font-size:30px;opacity:.4;line-height:1}
.v8-empty-t{font-size:var(--v8-fs-md);color:var(--v8-text-2);font-weight:var(--v8-fw-med)}
.v8-empty-s{font-size:var(--v8-fs-sm);line-height:1.7;max-width:520px}
/* ---- 4.14 漏斗 ---- */
.v8-funnel{display:flex;flex-direction:column;gap:var(--v8-sp-3);padding:var(--v8-sp-6)}
.v8-fn-row{display:flex;align-items:center;gap:var(--v8-sp-5)}
.v8-fn-lab{width:104px;flex:0 0 104px;font-size:var(--v8-fs-sm);color:var(--v8-text-2)}
.v8-fn-track{flex:1;height:26px;background:var(--v8-panel-2);border-radius:var(--v8-r-md);
overflow:hidden;border:1px solid var(--v8-line)}
.v8-fn-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--v8-accent),var(--v8-accent-2));
min-width:2px;transition:width .3s}
.v8-fn-val{width:112px;flex:0 0 112px;text-align:right;font-size:var(--v8-fs-td);
font-weight:var(--v8-fw-semi);color:var(--v8-text);font-variant-numeric:tabular-nums}
.v8-fn-rate{width:56px;flex:0 0 56px;text-align:right;font-size:var(--v8-fs-xs);color:var(--v8-text-3);
font-variant-numeric:tabular-nums}
/* ---- 4.15 趋势柱图 (纯 CSS/SVG, 无图表库 ✓) ---- */
.v8-chart{padding:var(--v8-sp-6)}
.v8-chart svg{display:block;width:100%;height:172px;overflow:visible}
.v8-bar-rect{fill:var(--v8-accent);opacity:.85}
.v8-bar-rect:hover{opacity:1}
.v8-axis{font-size:11px;fill:var(--v8-text-3)}
.v8-gridline{stroke:var(--v8-line);stroke-width:1}
/* ---- 4.16 访客/来源图例 ---- */
.v8-lg{display:flex;flex-direction:column;gap:8px}
.v8-lg-r{display:flex;align-items:center;gap:var(--v8-sp-3);font-size:var(--v8-fs-sm)}
.v8-lg-r i{width:8px;height:8px;border-radius:2.5px;flex:0 0 8px}
.v8-lg-n{flex:1;color:var(--v8-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v8-lg-v{font-weight:var(--v8-fw-semi);color:var(--v8-text);font-variant-numeric:tabular-nums}
.v8-lg-p{width:46px;text-align:right;color:var(--v8-text-3);font-variant-numeric:tabular-nums}
/* ---- 4.17 分页 ---- */
.v8-pager{display:flex;align-items:center;justify-content:space-between;padding:var(--v8-sp-5) var(--v8-sp-6)}
.v8-pager-i{font-size:var(--v8-fs-sm);color:var(--v8-text-3)}
.v8-pager-i b{color:var(--v8-text)}
.v8-pager-b{display:flex;gap:5px}
/* ---- 4.18 Toast (新页面用, 与旧 showMsg 并存) ---- */
.v8-toast{position:fixed;top:70px;right:26px;z-index:9999;display:flex;align-items:center;
gap:var(--v8-sp-3);background:var(--v8-panel);border:1px solid var(--v8-line-2);
border-radius:var(--v8-r-lg);box-shadow:var(--v8-sh-pop);padding:10px 15px;
font-size:var(--v8-fs-md);color:var(--v8-text);max-width:420px}
.v8-toast.ok{border-color:var(--v8-ok-line)} .v8-toast.ok .i{color:var(--v8-ok)}
.v8-toast.err{border-color:var(--v8-danger-line)} .v8-toast.err .i{color:var(--v8-danger)}
.v8-toast.warn{border-color:var(--v8-warn-line)} .v8-toast.warn .i{color:var(--v8-warn)}
/* ---- 4.19 侧栏分组标题 + 应用切换器 (多应用平台入口 ✓) ---- */
.v8-side-t{padding:11px 18px 5px;font-size:var(--v8-fs-xs);font-weight:var(--v8-fw-semi);
color:var(--v8-text-3);letter-spacing:.06em;display:flex;align-items:center;gap:6px}
.v8-side-t .soon{margin-left:auto;font-size:11px;font-weight:var(--v8-fw);background:var(--v8-panel-3);
color:var(--v8-text-3);border-radius:4px;padding:1px 6px}
.v8-side-sep{height:1px;background:var(--v8-line);margin:var(--v8-sp-3) 14px}
.v8-side-ghost{padding:8px 18px;font-size:var(--v8-fs-sm);color:var(--v8-text-3);display:flex;
align-items:center;gap:var(--v8-sp-4);opacity:.72;cursor:not-allowed;border-left:3px solid transparent}
.v8-side-ghost .soon{margin-left:auto;font-size:11px;background:var(--v8-panel-3);border-radius:4px;
padding:1px 6px}
.v8-switcher{padding:var(--v8-sp-4) 14px var(--v8-sp-1)}
.v8-sw-hint{font-size:11px;color:var(--v8-text-3);letter-spacing:.06em;margin:0 2px 5px;
font-weight:var(--v8-fw-semi)}
.v8-sw-btn{display:flex;align-items:center;gap:var(--v8-sp-4);padding:7px 9px;
border-radius:var(--v8-r-md);background:var(--v8-panel-2);border:1px solid var(--v8-line);
cursor:pointer}
.v8-sw-btn:hover{background:var(--v8-panel-3)}
.v8-sw-ico{width:22px;height:22px;flex:0 0 22px;border-radius:var(--v8-r-sm);font-size:11px;
font-weight:var(--v8-fw-bold);color:#fff;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--v8-accent),var(--v8-accent-2))}
.v8-sw-n{flex:1;color:var(--v8-text);font-size:var(--v8-fs-sm);font-weight:var(--v8-fw-med)}
.v8-sw-c{color:var(--v8-text-3);font-size:11px}
.v8-side-foot{margin-top:auto;padding:var(--v8-sp-5) 18px 14px;border-top:1px solid var(--v8-line);
display:flex;flex-direction:column;gap:5px}
.v8-side-foot .r{display:flex;justify-content:space-between;font-size:11.5px;color:var(--v8-text-3)}
.v8-side-foot .r b{color:var(--v8-text-2);font-weight:var(--v8-fw-med)}
.v8-dot-ok{color:var(--v8-ok)}
.v8-dot-ok::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--v8-ok);margin-right:5px;vertical-align:1px}
/* ==========================================================================
* §5 两个微变体 (让客户挑 ✓)
* 变体1 white: 纯白侧栏 (最简约)
* 变体2 gray : 极浅灰侧栏 + 白色内容区 (层次感更好)
* 主色 orange (默认, 品牌一致) / blue (工具感)
* ★ 只改颜色变量, 不改任何布局 ✗
* ========================================================================*/
html[data-v8-side="white"] .sidebar{background:#ffffff !important}
html[data-v8-side="gray"] .sidebar{background:var(--v8-side-gray) !important}
html[data-v8-side="gray"] .v8-sw-btn{background:#ffffff}
html[data-v8-side="gray"] .product-nav-search input{background:#ffffff !important}
html[data-v8-side="gray"] .nav-top .nav-item:hover,
html[data-v8-side="gray"] .product-nav-item:hover{background:#eceff2 !important}
html[data-v8-side="gray"] .nav-top .nav-item.active{background:#fff !important}
html[data-v8-accent="blue"]{
--v8-accent:#0969da; --v8-accent-hover:#0757ba;
--v8-accent-2:#3b82f6;
--v8-accent-soft:rgba(9,105,218,.08); --v8-accent-line:rgba(9,105,218,.30);
--v8-sh-focus:0 0 0 3px rgba(9,105,218,.10);
}
/* 打印兜底 (低优先) */
@media print{
.sidebar,.topbar,.v8-toast{display:none !important}
.main{margin-left:0 !important;padding-top:0 !important}
body{background:#fff !important}
}
/* ============================================================================
* ★ V8_FIX_ROWACTS —— 行内操作列不许折行
* 实测问题(Step2 截图): 「站点与账户」的域名绑定表里，操作列同时放了
*