/* 代理看板 · 设计系统（html-beautify 契约 + dataviz 角色变量） */
:root {
color-scheme: light;
--primary: #6366f1;
--primary-hover: #4f46e5;
--primary-soft: #eef2ff;
--neutral-50: #f9fafb;
--neutral-100: #f3f4f6;
--neutral-200: #e5e7eb;
--neutral-300: #d1d5db;
--neutral-500: #6b7280;
--neutral-700: #374151;
--neutral-900: #111827;
--success: #008300;
--success-soft: rgba(0, 131, 0, 0.1);
--warning: #eda100;
--warning-soft: rgba(237, 161, 0, 0.12);
--danger: #e34948;
--danger-soft: rgba(227, 73, 72, 0.1);
--up: #e34948; /* 环比涨=红↑（国内惯例，随箭头字形不单靠颜色） */
--down: #008300; /* 环比跌=绿↓ */
--bg-base: #f8fafc;
--bg-elevated: #ffffff;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
--radius: 12px;
--radius-sm: 8px;
--space-1: 4px; --space-2: 8px; --space-3: 12px;
--space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
/* dataviz 角色（图表实体色：消耗=蓝、转化=橙；深色另阶） */
--surface-1: #fcfcfb;
--series-cost: #2a78d6;
--series-conv: #eb6834;
--chart-grid: #e5e7eb;
--chart-text: #52514e;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--primary: #818cf8;
--primary-hover: #6366f1;
--primary-soft: #1e1b4b;
--neutral-50: #0f172a;
--neutral-100: #1e293b;
--neutral-200: #334155;
--neutral-300: #475569;
--neutral-500: #94a3b8;
--neutral-700: #cbd5e1;
--neutral-900: #f1f5f9;
--success: #34d399; --success-soft: rgba(52,211,153,0.12);
--warning: #fbbf24; --warning-soft: rgba(251,191,36,0.12);
--danger: #e66767; --danger-soft: rgba(230,103,103,0.12);
--up: #e66767; --down: #34d399;
--bg-base: #0b1120;
--bg-elevated: #1e293b;
--surface-1: #1a1a19;
--series-cost: #3987e5;
--series-conv: #d95926;
--chart-grid: #334155;
--chart-text: #c3c2b7;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[v-cloak] { display: none; }
body {
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", sans-serif;
font-size: 15px; line-height: 1.6;
color: var(--neutral-900); background: var(--bg-base);
min-height: 100vh; -webkit-font-smoothing: antialiased;
}
.container { max-width: 1440px; margin: 0 auto; padding: var(--space-5) var(--space-5); }
/* ---------- 顶栏 ---------- */
.topbar {
display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
padding: var(--space-4) var(--space-5);
background: var(--bg-elevated); border-bottom: 1px solid var(--neutral-200);
position: sticky; top: 0; z-index: 50;
}
.topbar .brand {
font-size: 18px; font-weight: 700; letter-spacing: 0.5px;
background: linear-gradient(135deg, var(--primary), #8b5cf6);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.topbar .fresh { font-size: 12px; color: var(--neutral-500); }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: var(--neutral-700); }
/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tab-btn {
padding: 8px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
border: 1px solid var(--neutral-200); background: transparent;
color: var(--neutral-700); cursor: pointer; transition: all 0.2s ease;
}
.tab-btn:hover { background: var(--primary-soft); border-color: var(--primary); transform: translateY(-1px); }
.tab-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.35); }
.subtabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; align-items: center; }
.subtab {
padding: 5px 14px; border-radius: var(--radius-sm); font-size: 13px;
border: 1px solid var(--neutral-200); background: var(--bg-elevated);
color: var(--neutral-700); cursor: pointer; transition: all 0.15s ease;
}
.subtab.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
/* ---------- 卡片 / KPI ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.card {
background: var(--bg-elevated); border-radius: var(--radius);
padding: var(--space-5); box-shadow: var(--shadow-sm);
border: 1px solid var(--neutral-200); transition: all 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.kpi { display: flex; flex-direction: column; gap: var(--space-2); }
.kpi-label { color: var(--neutral-500); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 30px; font-weight: 700; line-height: 1.2; color: var(--neutral-900); }
.kpi-value.accent { background: linear-gradient(135deg, var(--primary), #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.kpi-sub { font-size: 12px; color: var(--neutral-500); }
.section-title {
font-size: 18px; font-weight: 600; margin: var(--space-5) 0 var(--space-3);
color: var(--neutral-900); display: flex; align-items: center; gap: var(--space-3);
}
.section-title::before { content: ''; width: 4px; height: 18px; background: linear-gradient(180deg, var(--primary), #8b5cf6); border-radius: 2px; }
/* ---------- Tag ---------- */
.tag { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--primary-soft); color: var(--primary); white-space: nowrap; }
.tag.success { background: var(--success-soft); color: var(--success); }
.tag.warning { background: var(--warning-soft); color: var(--warning); }
.tag.danger { background: var(--danger-soft); color: var(--danger); }
.tag.muted { background: var(--neutral-100); color: var(--neutral-500); }
.chg-up { color: var(--up); font-weight: 600; }
.chg-down { color: var(--down); font-weight: 600; }
.chg-flat { color: var(--neutral-500); }
/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; background: var(--bg-elevated); border-radius: var(--radius); border: 1px solid var(--neutral-200); box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 10px 14px; text-align: left; white-space: nowrap; }
th { background: var(--neutral-50); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--neutral-500); border-bottom: 1px solid var(--neutral-200); position: sticky; top: 0; }
td { border-bottom: 1px solid var(--neutral-100); font-size: 13px; color: var(--neutral-700); }
tbody tr:hover td { background: var(--neutral-50); }
tbody tr.clickable { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.title-cell { white-space: normal; min-width: 280px; max-width: 480px; line-height: 1.4; } /* 商品名不截断（铁律） */
tr.total-row td { font-weight: 700; background: var(--neutral-50); border-top: 2px solid var(--neutral-200); }
/* 业务维度表：任务子行（默认折叠，点击业务行展开） */
.biz-arrow { display: inline-block; width: 18px; font-size: 10px; color: var(--neutral-500); }
tr.task-row td { background: var(--neutral-50); font-size: 12.5px; }
tr.task-row .task-cell { padding-left: 34px; color: var(--neutral-500); }
tr.task-row:hover td { background: var(--neutral-100); }
.rank { color: var(--neutral-500); font-variant-numeric: tabular-nums; }
.rank.top3 { color: var(--primary); font-weight: 700; }
/* ---------- 素材预览 ---------- */
.thumb {
width: 72px; height: 44px; border-radius: 6px; object-fit: cover;
background: var(--neutral-100); display: block;
}
.thumb-play {
width: 72px; height: 44px; border-radius: 6px; background: var(--neutral-100);
display: inline-flex; align-items: center; justify-content: center;
color: var(--primary); font-size: 16px; border: 1px solid var(--neutral-200);
}
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); }
.mat-card { background: var(--bg-elevated); border: 1px solid var(--neutral-200); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: all 0.2s ease; box-shadow: var(--shadow-sm); }
.mat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.mat-card .media { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--neutral-100); display: block; }
.mat-card .media-play { width: 100%; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--neutral-100), var(--neutral-200)); font-size: 32px; color: var(--primary); }
.mat-card .body { padding: var(--space-3) var(--space-4) var(--space-4); }
.mat-card .name { font-size: 12px; color: var(--neutral-700); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 34px; }
.mat-card .metrics { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--space-2); }
.mat-card .cost { font-size: 16px; font-weight: 700; color: var(--neutral-900); }
/* ---------- 抽屉 ---------- */
.drawer-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 100; backdrop-filter: blur(2px); }
.drawer {
position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw); z-index: 101;
background: var(--bg-elevated); box-shadow: var(--shadow-lg);
overflow-y: auto; padding: var(--space-5);
animation: slidein 0.22s ease;
}
@keyframes slidein { from { transform: translateX(40px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.drawer h3 { font-size: 16px; font-weight: 600; margin-bottom: var(--space-3); line-height: 1.4; word-break: break-all; }
.drawer .close { float: right; border: none; background: var(--neutral-100); color: var(--neutral-700); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.drawer .close:hover { background: var(--danger-soft); color: var(--danger); }
.drawer video, .drawer img.preview { width: 100%; border-radius: var(--radius-sm); background: #000; max-height: 320px; }
.drawer dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; margin-top: var(--space-4); font-size: 13px; }
.drawer dt { color: var(--neutral-500); }
.drawer dd { color: var(--neutral-900); word-break: break-all; }
/* ---------- 登录 ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.login-card { width: min(400px, 92vw); background: var(--bg-elevated); border: 1px solid var(--neutral-200); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-6); }
.login-card .hero-badge { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--primary), #8b5cf6); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 26px; font-weight: 700; margin-bottom: var(--space-4); box-shadow: 0 4px 14px rgba(99,102,241,0.4); }
.login-card h1 { font-size: 24px; font-weight: 700; margin-bottom: var(--space-2); }
.login-card p.sub { color: var(--neutral-500); font-size: 13px; margin-bottom: var(--space-5); }
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--neutral-700); margin-bottom: 6px; }
.field input, .field select {
width: 100%; padding: 10px 14px; border-radius: var(--radius-sm);
border: 1px solid var(--neutral-300); background: var(--bg-elevated);
color: var(--neutral-900); font-size: 14px; transition: all 0.15s ease;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 20px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.2s ease; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(99,102,241,0.3); }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.4); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-ghost { background: transparent; color: var(--primary); border: 1px solid var(--neutral-200); }
.btn-ghost:hover { background: var(--primary-soft); border-color: var(--primary); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-block { width: 100%; }
.error-msg { background: var(--danger-soft); color: var(--danger); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; margin-bottom: var(--space-4); }
.notice { background: var(--warning-soft); color: var(--neutral-700); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: var(--space-4); }
/* ---------- 图表 / 杂项 ---------- */
.chart-card { background: var(--bg-elevated); border: 1px solid var(--neutral-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-4) var(--space-2); margin-bottom: var(--space-4); }
.chart-card h3 { font-size: 14px; font-weight: 600; color: var(--neutral-700); margin-bottom: var(--space-2); padding-left: var(--space-2); }
.chart { width: 100%; height: 240px; }
.pager { display: flex; gap: var(--space-2); align-items: center; justify-content: flex-end; margin-top: var(--space-3); font-size: 13px; color: var(--neutral-500); }
.pager button { border: 1px solid var(--neutral-200); background: var(--bg-elevated); color: var(--neutral-700); border-radius: var(--radius-sm); padding: 4px 12px; cursor: pointer; }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }
.empty { text-align: center; color: var(--neutral-500); padding: var(--space-7) var(--space-4); font-size: 14px; }
.toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.toolbar .spacer { flex: 1; }
.hint { font-size: 12px; color: var(--neutral-500); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.loading-wrap { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--neutral-500); gap: var(--space-2); }
.spin { width: 18px; height: 18px; border: 2px solid var(--neutral-200); border-top-color: var(--primary); border-radius: 50%; animation: sp 0.8s linear infinite; display: inline-block; }
@keyframes sp { to { transform: rotate(360deg); } }
@media (max-width: 768px) {
.container { padding: var(--space-4) var(--space-3); }
.grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.kpi-value { font-size: 22px; }
.card { padding: var(--space-4); }
.chart { height: 200px; }
}
/* ---------- Admin 专用 ---------- */
.admin-search { padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--neutral-300); background: var(--bg-elevated); color: var(--neutral-900); font-size: 13px; min-width: 220px; }
.admin-search:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cell-input { width: 100%; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--neutral-200); background: var(--bg-elevated); color: var(--neutral-900); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.cell-input[type=text] { text-align: left; }
.cell-input:focus { outline: none; border-color: var(--primary); }
.savebar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-elevated); border: 1px solid var(--neutral-200); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.agent-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.agent-grid .field { margin-bottom: 0; }
.agent-grid .field input:disabled { opacity: 0.55; cursor: not-allowed; }
.logtail { margin-top: var(--space-3); padding: var(--space-3); background: var(--neutral-50); border: 1px solid var(--neutral-200); border-radius: var(--radius-sm); font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.5; color: var(--neutral-700); white-space: pre-wrap; word-break: break-all; max-height: 180px; overflow-y: auto; }