/* ============================================================================
灵枢智能 · 靛蓝渐变 Indigo SaaS 视觉系统（2026-08-19 Clay 拍板）
一套设计 token 驱动全站：靛蓝主视觉 + 靛蓝 CTA + 靛调中性面。
模板类名一律保留，仅重写视觉表现。支持浅色 / 深色（系统跟随 + 手动切换）。
纯 CSS，无外部字体 / 图片 / CDN，离线可用。
============================================================================ */
/* ---------------------------------------------------------- 设计 token（浅色） */
:root {
color-scheme: light;
/* 品牌靛蓝：主视觉（靛蓝渐变 Indigo） */
--brand-deep: #3730a3; /* 主视觉深靛 */
--brand: #4338ca; /* 品牌靛（中间调） */
--brand-ink: #1e1b4b; /* 深靛墨（标题） */
/* 靛蓝：强调 + CTA */
--accent: #4f46e5;
--accent-strong: #4338ca; /* CTA hover */
--accent-soft: #eeedfe; /* 浅色强调背景 */
--accent-ink: #3730a3; /* 强调文字（浅底） */
--accent-line: rgba(79, 70, 229, .22);
/* 中性靛调灰 */
--ink: #1e1b4b; /* 正文 */
--muted: #5d6090; /* 次要文字 */
--faint: #8a8db3; /* 更弱文字 */
--app-bg: #edeefb; /* 页面底色（靛调浅灰）：白卡分离度 1.152，与旧版 1.155 持平；
首选值 #f2f3fe 只有 1.104，实看卡片浮不起来 */
--glow-a: rgba(79, 70, 229, .07);
--glow-b: rgba(55, 48, 163, .06);
--surface: #ffffff; /* 卡片面 */
--surface-2: #f5f5fd; /* 次级面（内嵌块） */
--surface-3: #eeeef9; /* 输入 / 浅块 */
--line: #e2e3f4; /* 分隔线 */
--line-strong: #d1d2ec;
--chip-bg: #eaeafc;
--chip-ink: #3b3a9e;
/* CTA 实心面：深浅两主题共用同一组饱和靛蓝，保证白字恒 ≥4.5:1
（深色下 --accent / --brand-deep 会翻成浅靛，直接拿来做实心底会让白字掉到 3~4:1） */
--cta-from: #5f62ef;
--cta-to: #4f46e5;
--cta-hover-from: #4f46e5;
--cta-hover-to: #4338ca;
--on-brand: #ffffff; /* 落在 --brand-deep / --brand 实心底上的文字 */
/* 阴影（品牌靛蓝染色，专业柔和） */
--shadow-sm: 0 1px 2px rgba(30, 27, 75, .06);
--shadow: 0 6px 22px rgba(30, 27, 75, .08);
--shadow-lg: 0 20px 52px rgba(30, 27, 75, .16);
/* 圆角 */
--r-sm: 8px; --r: 12px; --r-lg: 16px; --r-pill: 999px;
/* 状态色 */
--ok-bg: #e2f6ee; --ok-ink: #0c7a54;
--warn-bg: #fff2d6; --warn-ink: #966a0a;
--avoid-bg: #fde7e7; --avoid-ink: #c0392b;
--heat-bg: #fff0e0; --heat-ink: #c2570a;
/* 靛蓝导航条渐变（浅/深色皆用，导航永远是深靛） */
--topbar: linear-gradient(120deg, #3730a3 0%, #4f46e5 55%, #2563eb 100%);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}
/* ---------------------------------------------------------- 设计 token（深色） */
/* ---- 登录方式切换（账号登录 / 绑定码登录） ----------------------------
两个入口平级并排，而不是把其中一个藏成正文里的小字链接：来自微信的老用户
占多数，他们要找的是「绑定码登录」。用 而非 JS tab —— 两边是不同路由，
可直接分享链接，禁用 JS 也能切。高度 44px 对齐全站触控标准。 */
.login-tabs {
display: flex;
gap: 6px;
margin: 0 auto 14px;
max-width: 500px;
padding: 5px;
background: var(--chip-bg);
border: 1px solid var(--line);
border-radius: var(--r-pill);
}
.login-tab {
flex: 1 1 0;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-pill);
font-size: 14px;
font-weight: 600;
color: var(--muted);
text-decoration: none;
transition: background .15s, color .15s;
}
.login-tab:hover { color: var(--accent-ink); }
.login-tab.on {
background: var(--surface);
color: var(--accent-ink);
box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--brand-deep: #818cf8;
--brand: #a5b4fc;
--brand-ink: #e2e1fc;
--accent: #7b74f6;
--accent-strong: #928cf9;
--accent-soft: rgba(123, 116, 246, .16);
--accent-ink: #b6b1fd;
--accent-line: rgba(146, 140, 249, .32);
--ink: #e7e6f9;
--muted: #a4a5ce;
--faint: #75769f;
--app-bg: #0e0c26;
--glow-a: rgba(129, 140, 248, .14);
--glow-b: rgba(67, 56, 202, .30);
--surface: #171538;
--surface-2: #121030;
--surface-3: #1e1b47;
--line: #2a2853;
--line-strong: #37336b;
--chip-bg: rgba(145, 140, 248, .16);
--chip-ink: #c2bff2;
/* CTA token（--cta-*）刻意不在深色下覆盖：实心靛蓝底 + 白字两主题通用 */
--on-brand: #1e1b4b; /* 深色下 --brand-deep 是浅靛，实心底上必须用深墨字 */
/* 深色专用顶栏：亮色 topbar 落在 #0e0c26 页面上，三个停点亮度是页底的
11.2/23.6/30.9 倍，成刺眼光带；压深后降到 8.4/16.7/21.5 倍，白字反而更清楚 */
--topbar: linear-gradient(120deg, #312e81 0%, #4338ca 55%, #1d4ed8 100%);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
--shadow: 0 8px 26px rgba(0, 0, 0, .45);
--shadow-lg: 0 22px 56px rgba(0, 0, 0, .6);
--ok-bg: rgba(28, 160, 110, .18); --ok-ink: #57d6a6;
--warn-bg: rgba(214, 158, 46, .18); --warn-ink: #f0c674;
--avoid-bg: rgba(224, 90, 90, .18); --avoid-ink: #ff9494;
--heat-bg: rgba(224, 120, 40, .18); --heat-ink: #ffab6b;
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--brand-deep: #818cf8;
--brand: #a5b4fc;
--brand-ink: #e2e1fc;
--accent: #7b74f6;
--accent-strong: #928cf9;
--accent-soft: rgba(123, 116, 246, .16);
--accent-ink: #b6b1fd;
--accent-line: rgba(146, 140, 249, .32);
--ink: #e7e6f9;
--muted: #a4a5ce;
--faint: #75769f;
--app-bg: #0e0c26;
--glow-a: rgba(129, 140, 248, .14);
--glow-b: rgba(67, 56, 202, .30);
--surface: #171538;
--surface-2: #121030;
--surface-3: #1e1b47;
--line: #2a2853;
--line-strong: #37336b;
--chip-bg: rgba(145, 140, 248, .16);
--chip-ink: #c2bff2;
/* CTA token（--cta-*）刻意不在深色下覆盖：实心靛蓝底 + 白字两主题通用 */
--on-brand: #1e1b4b; /* 深色下 --brand-deep 是浅靛，实心底上必须用深墨字 */
/* 深色专用顶栏：亮色 topbar 落在 #0e0c26 页面上，三个停点亮度是页底的
11.2/23.6/30.9 倍，成刺眼光带；压深后降到 8.4/16.7/21.5 倍，白字反而更清楚 */
--topbar: linear-gradient(120deg, #312e81 0%, #4338ca 55%, #1d4ed8 100%);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
--shadow: 0 8px 26px rgba(0, 0, 0, .45);
--shadow-lg: 0 22px 56px rgba(0, 0, 0, .6);
--ok-bg: rgba(28, 160, 110, .18); --ok-ink: #57d6a6;
--warn-bg: rgba(214, 158, 46, .18); --warn-ink: #f0c674;
--avoid-bg: rgba(224, 90, 90, .18); --avoid-ink: #ff9494;
--heat-bg: rgba(224, 120, 40, .18); --heat-ink: #ffab6b;
}
/* ------------------------------------------------------------------- 基础 */
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font);
color: var(--ink);
font-size: 15px;
line-height: 1.65;
background:
radial-gradient(1100px 560px at 100% -8%, var(--glow-a) 0%, transparent 55%),
radial-gradient(880px 480px at -8% 2%, var(--glow-b) 0%, transparent 52%),
var(--app-bg);
background-attachment: fixed;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
a { color: var(--accent-ink); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { color: var(--brand-ink); line-height: 1.3; }
code {
font-family: "SFMono-Regular", "Cascadia Code", Consolas, monospace;
background: var(--surface-3); color: var(--brand);
border-radius: 5px; padding: 1px 6px; font-size: .88em;
}
/* --------------------------------------------------------------- 顶栏导航 */
.topbar {
background: var(--topbar);
color: #fff;
display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 10px;
padding: 12px 26px;
border-bottom: 1px solid rgba(129, 140, 248, .28);
box-shadow: 0 6px 24px rgba(17, 14, 48, .28);
position: sticky; top: 0; z-index: 50;
}
.brand { flex: 1 1 220px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.brand-mark {
color: #fff; font-weight: 700; font-size: 19px; letter-spacing: 1px;
display: inline-flex; align-items: center; gap: 9px;
}
/* 纯 CSS 品牌标记：靛蓝渐变菱形，替代外部 logo 图片 */
.brand-mark::before {
content: ""; width: 20px; height: 20px; flex: none;
background: linear-gradient(135deg, #818cf8, #4f46e5 60%, #3730a3);
border-radius: 6px; transform: rotate(45deg);
box-shadow: 0 2px 8px rgba(79, 70, 229, .55);
}
.brand-sub { color: #d0cdec; font-size: 13px; }
.brand-sub em {
color: #e6e4f8; font-style: normal;
border: 1px solid rgba(165, 180, 252, .5); border-radius: var(--r-pill);
padding: 1px 9px; margin-left: 6px; font-size: 12px;
}
.nav {
display: flex; align-items: center; justify-content: center; gap: 3px;
flex-wrap: wrap; flex: 1 1 auto;
}
.nav a {
color: #e8e6fb; padding: 7px 13px; border-radius: var(--r-sm);
font-size: 14px; transition: background .15s ease, color .15s ease;
}
.nav a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.nav a.on {
background: rgba(129, 140, 248, .26); color: #fff;
box-shadow: inset 0 -2px 0 var(--accent);
}
.nav-user {
flex: 1 1 220px; display: flex; align-items: center;
justify-content: flex-end; gap: 8px;
}
.nav-user .who { color: #fff; margin-right: 2px; font-weight: 600; }
.nav-user a.ghost, .nav-user button.linklike {
color: #f2f0fe; padding: 6px 12px; border-radius: var(--r-sm);
font-size: 14px; border: 1px solid rgba(165, 180, 252, .32);
background: transparent; cursor: pointer; font-family: inherit;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.nav-user a.ghost:hover, .nav-user button.linklike:hover {
background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(165, 180, 252, .55);
}
.inline-form { display: inline; margin: 0; }
/* 主题切换按钮（纯 CSS 图标，太阳/月亮随主题互换） */
.theme-toggle {
width: 36px; height: 36px; flex: none; cursor: pointer;
border-radius: var(--r-sm); border: 1px solid rgba(165, 180, 252, .32);
background: rgba(255, 255, 255, .06); color: #ffffff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px; line-height: 1; transition: background .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: rgba(255, 255, 255, .14); border-color: rgba(165, 180, 252, .6); }
.theme-toggle .i-sun { display: none; }
.theme-toggle .i-moon { display: inline; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: inline; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .i-sun { display: inline; }
:root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
/* ------------------------------------------------------------ 页面骨架 */
.page { max-width: 1120px; margin: 26px auto 48px; padding: 0 20px; width: 100%; }
.foot {
max-width: 1120px; margin: 0 auto 30px; padding: 22px 20px 0;
color: var(--muted); font-size: 12px;
display: flex; flex-direction: column; gap: 4px;
border-top: 1px solid var(--line);
}
.foot b { color: var(--brand); }
.flash-wrap { max-width: 1120px; margin: 16px auto -6px; padding: 0 20px; }
.flash {
background: var(--accent-soft); color: var(--accent-ink);
border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
border-radius: var(--r); padding: 11px 16px; font-size: 14px; margin-bottom: 8px;
box-shadow: var(--shadow-sm);
}
/* --------------------------------------------------------- 卡片与布局 */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); padding: 20px 22px; margin-bottom: 18px;
box-shadow: var(--shadow-sm);
}
.card h2 {
font-size: 17px; color: var(--brand-ink); margin-bottom: 12px;
display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-weight: 700;
}
.card h2 + p, .card h2 + .muted { margin-top: -2px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
/* 工作台入口卡：玻璃感 + 悬浮抬升 + 右上柔光（数据感） */
.grid > .card {
position: relative; overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.grid > .card::after {
content: ""; position: absolute; top: -40px; right: -40px;
width: 150px; height: 150px; border-radius: 50%;
background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
opacity: .8; pointer-events: none;
}
.grid > .card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow); border-color: var(--accent-line);
}
.grid > .card p, .grid > .card ul { position: relative; z-index: 1; }
.grid > .card .btn, .grid > .card .btn.ghost { position: relative; z-index: 1; margin-top: 4px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.gap-top { margin-top: 24px; }
.right { margin-left: auto; }
/* ------------------------------------------------------------- 按钮 */
.btn {
background: linear-gradient(180deg, var(--cta-from), var(--cta-to));
color: #fff; border: 0; border-radius: 10px;
padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
display: inline-block; font-family: inherit; line-height: 1.3;
box-shadow: 0 4px 14px rgba(79, 70, 229, .28);
transition: transform .12s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.btn:hover { background: linear-gradient(180deg, var(--cta-hover-from), var(--cta-hover-to)); box-shadow: 0 6px 18px rgba(67, 56, 202, .36); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost {
background: transparent; color: var(--accent-ink);
border: 1px solid var(--accent-line); box-shadow: none; font-weight: 600;
}
.btn.ghost:hover { background: var(--accent-soft); border-color: var(--accent); transform: none; }
.btn.danger {
background: transparent; color: var(--avoid-ink);
border: 1px solid var(--avoid-ink); box-shadow: none;
}
.btn.danger:hover { background: var(--avoid-bg); transform: none; }
.btn.small { padding: 5px 13px; font-size: 13px; box-shadow: none; }
.btn.small:hover { box-shadow: 0 3px 10px rgba(79, 70, 229, .22); }
.btn-row { display: flex; gap: 9px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.btn-row form { display: inline; }
/* ------------------------------------------------------------- 标签 chip */
.chip {
background: var(--chip-bg); color: var(--chip-ink); border-radius: var(--r-pill);
padding: 2px 11px; font-size: 12px; font-weight: 600; white-space: nowrap;
display: inline-flex; align-items: center; gap: 4px; line-height: 1.7;
}
.chip.tint { background: var(--accent-soft); color: var(--accent-ink); }
.chip.ok { background: var(--ok-bg); color: var(--ok-ink); }
.chip.warn { background: var(--warn-bg); color: var(--warn-ink); }
.chip.avoid { background: var(--avoid-bg); color: var(--avoid-ink); }
.chip.kind { background: var(--brand-deep); color: var(--on-brand); }
.chip.state { margin-left: auto; }
.chip.fine { font-size: 11px; background: var(--surface-3); color: var(--muted); font-weight: 500; }
/* 生成引擎徽章：降级必须看得见 */
.chip.engine { font-weight: 700; border: 1px solid transparent; }
.chip.engine.ai { background: var(--ok-bg); color: var(--ok-ink); border-color: rgba(12, 122, 84, .3); }
.chip.engine.rules { background: var(--warn-bg); color: var(--warn-ink); border-color: rgba(150, 106, 10, .3); }
.chip.engine.manual { background: var(--surface-3); color: var(--muted); border-color: var(--line-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 7px 0; }
/* 可点击话题标签 */
.chip.tag-pick {
border: 1px dashed var(--line-strong); cursor: pointer; padding: 3px 11px;
font-family: inherit; background: var(--surface-2); color: var(--muted);
transition: all .15s ease;
}
.chip.tag-pick:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.chip.tiny { font-size: 11px; padding: 0 6px; }
/* 开关行 */
.switch-row {
display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 2px;
padding: 12px 14px; background: var(--surface-2);
border: 1px solid var(--line); border-radius: var(--r); border-left: 3px solid var(--accent);
}
.switch-row input { margin-top: 3px; width: auto; }
.switch-row label { font-size: 14px; font-weight: 600; color: var(--brand-ink); }
.muted { color: var(--muted); } .small { font-size: 13px; } .fine { font-size: 12px; }
.plain { list-style: none; padding: 0; } .plain li { margin: 4px 0; }
.nowrap { white-space: nowrap; }
/* ------------------------------------------------------- 表单 / 输入 */
input, textarea, select {
border: 1px solid var(--line-strong); border-radius: var(--r-sm);
padding: 9px 12px; font-size: 14px; font-family: inherit; width: 100%;
background: var(--surface); color: var(--ink);
transition: border-color .15s ease, box-shadow .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-line);
}
input.low { background: var(--warn-bg); border-color: rgba(150, 106, 10, .4); }
.auth-form label { display: block; margin: 14px 0; font-size: 14px; color: var(--muted); font-weight: 500; }
.auth-form label input { display: block; width: 100%; margin-top: 6px; font-size: 15px; }
.auth-form label small { display: block; margin-top: 5px; font-size: 12px; }
.kv { width: 100%; border-collapse: collapse; }
.kv th {
text-align: right; color: var(--muted); font-weight: 500; width: 92px;
padding: 6px 12px 6px 0; vertical-align: middle; font-size: 13.5px;
}
.kv td { padding: 5px 0; }
.state-row { margin-bottom: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hint {
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--r); padding: 12px 15px; font-size: 13px; color: var(--muted);
}
/* --------------------------------------------------------- 登录 / 门槛 */
.login-hero { max-width: 500px; margin: 60px auto; text-align: center; position: relative; }
.login-hero::before {
content: ""; position: absolute; inset: -80px -60px auto; height: 260px;
background: radial-gradient(closest-side, var(--glow-a), transparent 75%);
z-index: -1; pointer-events: none;
}
.login-hero h1 {
font-size: 30px; letter-spacing: .5px; font-weight: 800;
background: linear-gradient(100deg, var(--brand-deep), var(--accent));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.login-hero .lead { color: var(--muted); margin: 12px 0 24px; font-size: 15.5px; }
.login-card {
text-align: left; position: relative; overflow: hidden;
box-shadow: var(--shadow); border-radius: var(--r-lg);
}
/* 卡片顶部靛蓝渐变饰条 */
.login-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
background: linear-gradient(90deg, var(--brand-deep), var(--accent) 55%, #818cf8);
}
.sso-badge {
background: var(--accent-soft); color: var(--accent-ink);
border: 1px solid var(--accent-line);
border-radius: var(--r-sm); text-align: center; padding: 9px;
font-size: 13px; font-weight: 600; margin-bottom: 16px;
}
.identity {
display: flex; align-items: center; gap: 13px; width: 100%;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--r); padding: 12px 15px; margin: 9px 0;
cursor: pointer; font-size: 14px; text-align: left; color: var(--ink);
font-family: inherit; transition: all .15s ease;
}
.identity:hover {
border-color: var(--accent); background: var(--accent-soft);
transform: translateX(2px); box-shadow: var(--shadow-sm);
}
.avatar {
width: 40px; height: 40px; border-radius: 50%;
background: linear-gradient(135deg, var(--cta-from), var(--cta-to));
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 700; flex: none; box-shadow: 0 3px 10px rgba(79, 70, 229, .3);
}
.avatar.admin { background: linear-gradient(135deg, var(--brand), var(--brand-deep)); color: var(--on-brand); }
.id-meta { display: flex; flex-direction: column; }
.id-meta b { color: var(--brand-ink); }
.id-meta small { color: var(--muted); }
.go { margin-left: auto; color: var(--accent-ink); font-weight: 600; }
.fine.muted, p.fine { margin-top: 12px; }
/* ------------------------------------------------------------- 工作台 */
.push-banner {
background: var(--topbar); color: #fff;
border-radius: var(--r); border-left: 4px solid var(--accent);
padding: 14px 18px; display: flex; align-items: center;
justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
box-shadow: var(--shadow-sm); width: 100%; font-family: inherit; text-align: left;
border-top: 0; border-right: 0; border-bottom: 0; cursor: pointer;
}
.push-banner b { color: #fff; }
/* 暗色玻璃按钮：靛蓝渐变末端偏亮，白字需要压深底才够 AA（白底叠加会掉到 3.96:1） */
.push-banner .btn { background: rgba(23, 20, 70, .30); box-shadow: none; border: 1px solid rgba(255, 255, 255, .34); }
.push-banner .btn:hover { background: rgba(23, 20, 70, .45); }
.cust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 13px; }
.cust {
border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px;
background: var(--surface-2); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cust:hover { border-color: var(--accent-line); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.cust-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cust-head b { color: var(--brand-ink); }
.content-list { list-style: none; padding: 0; }
.content-list li { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.content-list li:last-child { border-bottom: 0; }
.content-list li b { color: var(--ink); }
/* ---------------------------------------------- 智能助手（旧版气泡 .chat/.msg） */
.chat-card { display: flex; flex-direction: column; }
.chat {
background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
padding: 14px; height: 340px; overflow-y: auto; margin-bottom: 12px;
}
.msg { max-width: 85%; padding: 9px 13px; border-radius: 13px; margin: 7px 0; font-size: 14px; line-height: 1.6; }
.msg.user {
background: linear-gradient(180deg, var(--cta-from), var(--cta-to)); color: #fff;
margin-left: auto; border-bottom-right-radius: 4px;
}
.msg.bot { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-input { display: flex; gap: 9px; }
.chat-input input { flex: 1; }
.draft-card .state-row { font-size: 14px; }
/* --------------------------------------------- 网页对话 /chat（.chatlog/.bubble） */
.chatlog {
border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2);
padding: 16px; height: 52vh; min-height: 320px; overflow-y: auto;
display: flex; flex-direction: column; gap: 12px;
}
.chat-empty { margin: auto; text-align: center; }
.bubble { display: flex; max-width: 80%; }
.bubble.me { align-self: flex-end; }
.bubble.bot { align-self: flex-start; }
.bubble-body {
padding: 11px 15px; border-radius: 15px; font-size: 14.5px; line-height: 1.62;
white-space: pre-wrap; word-break: break-word; box-shadow: var(--shadow-sm);
}
.bubble.me .bubble-body {
background: linear-gradient(180deg, var(--cta-from), var(--cta-to)); color: #fff;
border-bottom-right-radius: 5px;
}
.bubble.bot .bubble-body {
background: var(--surface); color: var(--ink);
border: 1px solid var(--line); border-bottom-left-radius: 5px;
}
.bubble.pending .bubble-body { color: var(--muted); font-style: italic; }
.chat-input { display: flex; gap: 9px; margin-top: 14px; align-items: flex-end; }
.chat-input textarea {
flex: 1 1 auto; resize: none; min-height: 46px; max-height: 160px;
padding: 11px 13px; font-size: 15px; line-height: 1.5; overflow-y: auto;
}
.chat-input .btn { flex: 0 0 auto; min-height: 46px; }
#chathint { margin-top: 10px; }
/* ------------------------------------------------------------- 产品库 */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.prod {
border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 17px;
background: var(--surface-2); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.prod:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.prod.starred {
border-color: var(--accent); background: var(--accent-soft);
box-shadow: 0 0 0 1px var(--accent-line);
}
.prod-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 5px; }
.prod-head b { color: var(--brand-ink); font-size: 15px; }
.mark-row { display: flex; gap: 8px; margin-top: 11px; }
details.fine summary { cursor: pointer; color: var(--muted); margin: 5px 0; }
/* ------------------------------------------------------------- 周报 */
.report-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.rec-head {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
border-bottom: 1px solid var(--line); padding-bottom: 11px; margin-bottom: 13px;
}
.alias { font-size: 16px; color: var(--brand-ink); font-weight: 700; }
.rec-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.rec-meta p { margin: 6px 0; font-size: 14px; }
.lbl {
display: inline-block; background: var(--surface-3); color: var(--muted);
border-radius: 6px; font-size: 12px; padding: 1px 8px; margin-right: 8px; font-weight: 600;
}
.copybox {
background: var(--accent-soft); border: 1px solid var(--accent-line);
border-radius: var(--r); padding: 14px 16px;
}
.copytext { font-size: 14.5px; color: var(--ink); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; border-bottom: 2px solid var(--line); padding: 7px 9px; }
.tbl td { border-bottom: 1px dashed var(--line); padding: 8px 9px; }
.tbl tr.hl td { background: var(--warn-bg); }
/* 双轨周报导航与轨道标题 */
.track-nav { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.track-btn {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
padding: 8px 18px; font-size: 14px; color: var(--brand-ink); font-weight: 600;
display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-sm);
transition: all .15s ease;
}
.track-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); transform: translateY(-1px); }
.track-title {
font-size: 16px; color: var(--brand-ink); margin: 0 0 13px; font-weight: 700;
padding-left: 13px; border-left: 4px solid var(--accent);
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; scroll-margin-top: 76px;
}
.track-title.pub { border-left-color: var(--brand-deep); margin-top: 30px; }
.chip.plat, .chip.src { background: var(--brand-deep); color: var(--on-brand); font-weight: 600; }
.chip.plat-xiaohongshu { background: #d43b52; color: #fff; }
.chip.plat-video { background: #1a1a2e; color: #fff; }
.post .alias { font-size: 15px; }
.post-box { background: var(--surface-2); border-color: var(--line); }
.post-title { font-size: 15.5px; font-weight: 700; color: var(--brand-ink); margin-bottom: 7px; }
.post-body { font-size: 14.5px; white-space: pre-line; color: var(--ink); }
.tag-row { margin-top: 10px; }
.script-tbl { margin-top: 5px; font-size: 13px; }
.script-tbl td { vertical-align: top; }
.visual-note { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.pub-hints { list-style: none; padding: 0; margin: 5px 0 0; }
.pub-hints li {
background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--r-sm);
padding: 4px 11px; margin-top: 5px; font-size: 12.5px;
}
.copy-src { display: none; }
/* ------------------------------------------------------- 复盘助手 rv-* */
.rv-form { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; margin-bottom: 11px; }
.rv-form label { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--muted); }
.rv-form select { width: auto; min-width: 210px; }
.rv-engine {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
margin-bottom: 12px; padding-bottom: 11px; border-bottom: 1px dashed var(--line);
}
.rv-sec { border-top: 1px dashed var(--line); padding-top: 13px; margin-top: 13px; }
.rv-sec:first-child, .rv-engine + .rv-sec { border-top: 0; padding-top: 0; margin-top: 0; }
.rv-sec h3 {
font-size: 15px; color: var(--brand-ink); margin-bottom: 8px; font-weight: 700;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rv-num {
background: linear-gradient(135deg, var(--cta-from), var(--cta-to)); color: #fff;
border-radius: 50%; flex: none; width: 23px; height: 23px;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-style: normal; font-weight: 700;
box-shadow: 0 2px 6px rgba(79, 70, 229, .35);
}
.rv-stat { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.rv-list { list-style: none; padding: 0; margin: 0; }
.rv-list li {
border-left: 3px solid var(--line-strong); background: var(--surface-2);
border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 8px 13px; margin: 7px 0; font-size: 14px;
}
.rv-list li.ok { border-left-color: var(--ok-ink); background: var(--ok-bg); }
.rv-list li.warn { border-left-color: var(--avoid-ink); background: var(--warn-bg); }
.rv-list li.info { border-left-color: var(--accent); background: var(--accent-soft); }
.rv-list li.sig-buy { border-left-color: var(--ok-ink); }
.rv-list li.sig-obj, .rv-list li.sig-con { border-left-color: var(--warn-ink); }
.rv-quote { color: var(--muted); font-size: 13px; margin-top: 3px; }
.rv-draft {
background: var(--accent-soft); border: 1px dashed var(--accent);
border-radius: var(--r); padding: 10px 14px; font-size: 14px;
display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
}
.rv-hist {
border: 1px solid var(--line); border-radius: var(--r); padding: 10px 14px;
margin-bottom: 10px; background: var(--surface-2);
}
.rv-hist summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rv-hist[open] summary { border-bottom: 1px solid var(--line); padding-bottom: 9px; margin-bottom: 5px; }
/* -------------------------------------------- 客户人设卡 6 维分组 + 直接编辑 */
.cust-foot { display: flex; justify-content: flex-end; margin-top: 8px; }
.edit-form .kv th { width: 82px; }
.edit-form .kv td input, .edit-form .kv td select { max-width: 440px; }
.style-edit, .ctx-import {
border: 1px dashed var(--line-strong); border-radius: var(--r);
background: var(--surface-2); padding: 11px 15px; margin-top: 15px;
}
.style-edit summary, .ctx-import summary { cursor: pointer; color: var(--accent-ink); font-size: 13.5px; font-weight: 600; }
.style-edit[open] summary, .ctx-import[open] summary {
border-bottom: 1px solid var(--line); padding-bottom: 9px; margin-bottom: 9px;
}
.style-edit textarea { margin-bottom: 7px; }
.tier-box {
border: 1px solid var(--line); border-left: 3px solid var(--accent);
border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2);
padding: 8px 14px; margin: 12px 0;
}
.tier-box .tier-head { margin: 2px 0 5px; font-size: 13.5px; }
.tier-box .notes-list li { margin: 5px 0; line-height: 1.55; }
.ctx-import { background: var(--surface); }
.ctx-note {
background: var(--accent-soft); border-left: 3px solid var(--accent);
border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 4px 11px; margin-bottom: 9px;
}
fieldset.dim {
border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px 6px;
margin: 0 0 16px; background: var(--surface-2);
}
fieldset.dim > legend {
font-weight: 700; font-size: 14px; padding: 2px 10px; color: var(--on-brand);
background: linear-gradient(135deg, var(--brand), var(--brand-deep));
border-radius: var(--r-sm); box-shadow: var(--shadow-sm);
}
fieldset.dim .kv th { width: 172px; vertical-align: top; padding-top: 11px; }
fieldset.dim .kv td { padding-bottom: 9px; }
fieldset.dim .kv td > .fine { margin: 4px 0 0; }
.warn-line { border-left: 3px solid var(--warn-ink); padding-left: 10px; }
.privacy { border-left: 3px solid var(--ok-ink); padding-left: 10px; }
/* ------------------------------------------------- 快速录入子卡 */
.card.sub { flex: 1 1 300px; margin: 0; background: var(--surface-2); }
.card.sub h3 { margin: 0 0 8px; font-size: 15px; color: var(--brand-ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card.sub input[type=file] { display: block; margin: 8px 0 10px; max-width: 100%; }
.card.sub textarea { width: 100%; font-family: inherit; font-size: 14px; margin-bottom: 10px; }
/* ---------------------------------------- 内容池全量页 / 表格 */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-sm); }
table.preview { font-size: 13px; }
table.preview th, table.preview td { white-space: nowrap; padding: 5px 9px; }
.see-all { margin-left: auto; font-size: 13px; white-space: nowrap; font-weight: 600; }
.pool-filter {
display: flex; flex-wrap: wrap; gap: 11px; align-items: center;
padding: 12px 14px; margin: 12px 0 4px; background: var(--surface-2);
border: 1px solid var(--line); border-radius: var(--r);
}
.pool-filter label { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.pool-filter select { width: auto; min-width: 150px; max-width: 260px; font-size: 13.5px; padding: 6px 10px; }
.pool-tbl { margin-top: 13px; }
.pool-tbl td { vertical-align: top; }
.pool-tbl .col-title { min-width: 220px; }
.heat-n { color: var(--heat-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.pool-list li .heat-n { color: var(--heat-ink); }
.chip.demo { background: var(--surface-3); color: var(--muted); border: 1px dashed var(--line-strong); font-weight: 600; }
.chip.heat { background: var(--heat-bg); color: var(--heat-ink); font-weight: 700; }
.chip.plat-wechat_channels { background: #1aad19; color: #fff; }
.chip.plat-tiktok { background: #111; color: #fff; }
.chip.plat-instagram { background: #c13584; color: #fff; }
.chip.plat-twitter { background: #14171a; color: #fff; }
.chip.plat-youtube { background: #cc0000; color: #fff; }
.chip.plat-pool { background: var(--brand-deep); color: var(--on-brand); }
.pool-stat { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.nolink { color: var(--faint); font-size: 12px; }
.pager {
display: flex; align-items: center; justify-content: center; gap: 14px;
margin-top: 16px; font-size: 13.5px; color: var(--muted);
}
.pager .off { opacity: .4; cursor: default; }
/* ------------------------------------------------ 周报后台生成进度 */
.gen-hint { margin-top: 7px; }
.gen-card { max-width: 780px; }
.gen-bar { height: 10px; background: var(--surface-3); border-radius: var(--r-pill); overflow: hidden; margin: 17px 0 10px; }
.gen-fill {
height: 100%; background: linear-gradient(90deg, var(--accent), #818cf8);
border-radius: var(--r-pill); transition: width .45s ease;
}
.gen-fill.failed { background: var(--avoid-ink); }
.gen-line { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.gen-line b { font-variant-numeric: tabular-nums; color: var(--brand-ink); }
.job-failed { border-left: 4px solid var(--avoid-ink); background: var(--avoid-bg); }
/* ------------------------------------------------ 管理后台 */
.audit td { font-size: 13px; }
/* ============================================================================
响应式断点（2026-08-20 手机端适配）
分层，从宽到窄逐级收敛：
≤ 980px 宽屏收敛：周报推荐卡由「正文 + 文案」双栏改单栏
≤ 860px 小平板横屏：.split 双栏改单栏
≤ 768px 平板竖屏 —— 同时是「触摸屏」总断点：
留白收紧、宽表格进横向滚动容器、触控区 ≥44×44、
输入字号 ≥16px（低于 16px 时 iOS Safari 一聚焦就自动放大整页）
≤ 480px 手机：顶栏导航改单行横滑条、栅格强制单列、k-v 表单上下堆叠
硬指标：375px 宽下**整页不得横向滚动**——宽内容一律在自己的
overflow-x 容器里滚，绝不让 滚。
本段只改布局与触控，配色 token（靛蓝渐变）一个都不动，深浅双主题共用。
============================================================================ */
@media (max-width: 980px) {
.rec-body { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.split { grid-template-columns: 1fr; }
}
/* ------------------------------------------------- ≤768px：平板 + 一切触摸屏 */
@media (max-width: 768px) {
.topbar {
padding: 10px 16px;
/* 横屏刘海机：左右各让出安全区（未开 viewport-fit=cover 时 env() 为 0，无副作用） */
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
.nav { order: 3; flex-basis: 100%; justify-content: flex-start; }
.page { margin: 18px auto 36px; padding: 0 14px; }
.card { padding: 16px 16px; border-radius: var(--r); }
.login-hero { margin: 36px auto; }
.login-hero h1 { font-size: 25px; }
/* 宽数据表在容器内横向滚动，页面本身不横向滚动 */
.pool-tbl, .audit, table.preview { display: block; width: 100%; overflow-x: auto; white-space: nowrap; }
.scroll-x { max-width: 100%; }
/* ---- 触控目标：可点元素一律 ≥44×44 CSS px（WCAG 2.5.5 / iOS HIG）
只放大命中区，不改字号与配色。行内正文里的链接（句子中间的 ）不在此列——
强行撑到 44px 会把行距顶开，WCAG 对「行内链接」本就有豁免。 */
.btn, .track-btn, .identity, .theme-toggle,
.nav a, .nav-user a.ghost, .nav-user button.linklike,
.see-all, .pager .btn, .pager .off {
min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
}
.btn { padding: 10px 18px; }
.btn.small { padding: 8px 14px; font-size: 13.5px; }
.theme-toggle { width: 44px; height: 44px; }
.nav a { padding: 7px 13px; }
.btn-row { gap: 10px; }
/* details 的三角标题（禁用表述 / 直接编辑风格卡 / 导入最近对话 / 最近复盘）
刻意用 min-height + padding 撑高，**不写 display:flex**：
summary 一旦不是 list-item，浏览器默认那个 ▸ 展开标记就没了，
手机上没有 hover 提示，丢了三角就等于丢了「这里能展开」的唯一信号。 */
details > summary { min-height: 44px; padding: 10px 0; }
/* .rv-hist summary 在基础样式里本来就是 flex（多个 chip 排一行），保持原样只补高度 */
.rv-hist summary { min-height: 44px; align-items: center; padding: 8px 0; }
/* 话题标签是真按钮，不是纯装饰 chip */
.chip.tag-pick { min-height: 44px; padding: 6px 14px; font-size: 13px; }
/* 开关行（我的风格页「事业向内容」是全站唯一一个复选框）：
原生 checkbox 撑不到 44px 又不能加 padding，所以把方块放到 24px，
再让它绑定的