/* ============================================================================
vibedollar Design System — vibe.css (2026-09-04)
分层: ① 地基 tokens(与色无关) → ② 质感配方 → ③ 语义色(页面只用 var)
→ ④ 主题皮肤 html[data-theme=...] (配色可切换, 排版质感不动)
用法:
(由 js/theme.js 持久化, 默认 midnight)
========================================================================== */
/* ── ① 地基 tokens (与颜色无关) ─────────────────────────────── */
/* 全局 reset (设计系统统一 — 页面不再各自手抄, 2026-09-05) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* 自托管字体 (2026-09-05) — 替代 Google Fonts 远程加载:
fonts.googleapis.com 在中国大陆不可达且渲染阻塞 → 每页切页卡顿.
woff2 同域托管, 由 Cloudflare 缓存; font-display:swap 兜底. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400;
font-display: swap; src: url("/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500;
font-display: swap; src: url("/fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600;
font-display: swap; src: url("/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700;
font-display: swap; src: url("/fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800;
font-display: swap; src: url("/fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400;
font-display: swap; src: url("/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500;
font-display: swap; src: url("/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600;
font-display: swap; src: url("/fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700;
font-display: swap; src: url("/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }
:root {
/* 字体 (外部: Inter Variable + JetBrains Mono — display=swap) */
--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
"PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas,
"Liberation Mono", monospace;
/* 字号阶梯 (clamp 响应 — 小屏 ≥16 防 iOS 缩放 / 大屏放大) */
--fs-xs: 0.75rem; /* 12 标签/注释 */
--fs-sm: 0.8125rem; /* 13 */
--fs-md: 0.9375rem; /* 15 正文基准 */
--fs-lg: 1.125rem; /* 18 */
--fs-xl: 1.375rem; /* 22 */
--fs-2xl: clamp(1.625rem, 2.6vw + 1rem, 2.25rem); /* 26→36 区块标题 */
--fs-3xl: clamp(2.125rem, 4.2vw + 1rem, 3.5rem); /* 34→56 hero */
--leading-tight: 1.15;
--leading-ui: 1.6;
--tracking-tight: -0.025em;
--tracking-mono: 0;
/* 间距 4/8 节奏 */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
/* ── P1 令牌量表 (2026-09-12, docs/app-ui-ux-refactor-plan-20260912.md) ──
app 是密集数据界面: 字号只要整数档 (消灭 43 种/含 11.5px 半像素),
间距用 2px 节奏 (4px 为主), 行高 4 档。数字即像素值, 自解释。 */
--fs-10:10px; --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px;
--fs-15:15px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-22:22px;
--space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px; --space-10:10px;
--space-12:12px; --space-14:14px; --space-16:16px; --space-18:18px; --space-20:20px;
--space-24:24px; --space-32:32px; --space-40:40px; --space-48:48px; --space-64:64px;
--r-xs:4px; --r-card:8px;
--leading-head:1.3; --leading-body:1.5;
/* 圆角 / 描边 / 阴影 (质感档位) */
--r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
--line: 1px;
--shadow-sm: 0 1px 2px rgba(0,0,0,.18);
--shadow-md: 0 6px 16px -6px rgba(0,0,0,.35);
--shadow-lg: 0 18px 40px -18px rgba(0,0,0,.5);
/* 栅格宽度 */
--content-max: 1088px;
--content-narrow: 720px;
}
/* ── ③ 语义色默认 (midnight) — 页面只允许引用 --c-* ───────────── */
:root,
[data-theme="midnight"] {
color-scheme: dark;
--c-bg: #0d1117;
--c-bg-deep: #010409;
--c-surface: #161b22;
--c-surface-2: #1c2128;
--c-surface-3: #21262d;
--c-border: #30363d; /* 装饰分隔线 (无需 3:1) */
--c-border-strong: #3d444d;
/* 控件边界 (输入框/复选框/可聚焦控件) ≥3:1 — WCAG 2.2 SC 1.4.11
2026-09-12 P0: 原用 --c-border(#30363d) 实测仅 1.55 → #656d76 (bg 3.61 / surface 3.30) */
--c-border-control: #656d76;
--c-text: #e6edf3;
--c-text-strong: #ffffff; /* 仅标题/强调; 正文用 --c-text (纯白在深底会光晕) */
--c-muted: #8b949e;
--c-faint: #7d8590; /* 2026-09-12 P0: 原 #6e7681 仅 4.12 (<4.5) → 5.07 */
--c-accent: #58a6ff;
--c-accent-2: #79c0ff;
--c-on-accent: #0d1117;
--c-ok: #3fb950;
--c-ok-soft: rgba(63,185,80,.14);
--c-warn: #d29922;
--c-warn-soft: rgba(210,153,34,.14);
--c-err: #f85149;
--c-err-soft: rgba(248,81,73,.13);
--c-glass-line: rgba(255,255,255,.07);
--c-aurora-a: rgba(129,140,248,.34);
--c-aurora-b: rgba(88,166,255,.22);
--c-blue: #6ea8fe;
--c-teal: #3ec9c0;
}
/* ④ Aurora — 紫→蓝渐变光晕 */
[data-theme="aurora"] {
color-scheme: dark;
--c-bg: #0b0e17;
--c-bg-deep: #070912;
--c-surface: #12172a;
--c-surface-2: #191f38;
--c-surface-3: #212845;
--c-border: #2a3150;
--c-border-strong: #3a4370;
--c-border-control: #656d76; /* 2026-09-12 P0: 控件边界 ≥3:1 (bg 3.67 / surface 3.39) */
--c-text: #e7e9f5;
--c-text-strong: #ffffff;
--c-muted: #9aa3c7;
--c-faint: #7c84a8; /* 实测 5.25 (≥4.5, 保留) */
--c-accent: #818cf8;
--c-accent-2: #58a6ff;
--c-on-accent: #0b0e17;
--c-ok: #4ade80;
--c-ok-soft: rgba(74,222,128,.14);
--c-warn: #fbbf24;
--c-warn-soft: rgba(251,191,36,.13);
--c-err: #fb7185;
--c-err-soft: rgba(251,113,133,.12);
--c-glass-line: rgba(255,255,255,.08);
--c-aurora-a: rgba(129,140,248,.45);
--c-aurora-b: rgba(56,189,248,.28);
--c-blue: #7dd3fc;
--c-teal: #2dd4bf;
}
/* ④ Brand Violet — 现有品牌紫 (保守过渡皮) */
[data-theme="brand-violet"] {
color-scheme: dark;
--c-bg: #0f1117;
--c-bg-deep: #0a0c12;
--c-surface: #151827;
--c-surface-2: #1a1e30;
--c-surface-3: #232840;
--c-border: #23263a;
--c-border-strong: #34395a;
--c-border-control: #656d76; /* 2026-09-12 P0: 控件边界 ≥3:1 (bg 3.60 / surface 3.36) */
--c-text: #e6e8ee;
--c-text-strong: #ffffff;
--c-muted: #8b8a9e;
--c-faint: #7d8590; /* 2026-09-12 P0: 原 #6f6e82 仅 3.80 (<4.5) → 5.06 */
--c-accent: #7c6cf0;
--c-accent-2: #a59bfa;
--c-on-accent: #ffffff;
--c-ok: #2ecc71;
--c-ok-soft: rgba(46,204,113,.13);
--c-warn: #f5b942;
--c-warn-soft: rgba(245,185,66,.13);
--c-err: #ff6b6b;
--c-err-soft: rgba(255,107,107,.12);
--c-glass-line: rgba(255,255,255,.08);
--c-aurora-a: rgba(124,108,240,.32);
--c-aurora-b: rgba(165,155,250,.2);
--c-blue: #93b4ff;
--c-teal: #3ec9c0;
}
/* ④ Paper — 亮底明快 */
[data-theme="paper"] {
color-scheme: light;
--c-bg: #f7f7fb;
--c-bg-deep: #ffffff;
--c-surface: #ffffff;
--c-surface-2: #f0f0f6;
--c-surface-3: #e7e7f1;
--c-border: #e2e2ec;
--c-border-strong: #c9c9da;
--c-border-control: #656d76; /* 2026-09-12 P0: 控件边界 ≥3:1 (bg 4.91 / surface 5.25) */
--c-text: #1a1b25;
--c-text-strong: #0d0e16;
--c-muted: #5c5e72;
--c-faint: #6b6d84; /* 2026-09-12 P0: 原 #8688a0 仅 3.25 (<4.5) → 4.74 */
--c-accent: #5b4fd6;
--c-accent-2: #7c6cf0;
--c-on-accent: #ffffff;
--c-ok: #16a34a;
--c-ok-soft: rgba(22,163,74,.1);
--c-warn: #b45309;
--c-warn-soft: rgba(180,83,9,.1);
--c-err: #dc2626;
--c-err-soft: rgba(220,38,38,.08);
--c-glass-line: rgba(0,0,0,.06);
--c-aurora-a: rgba(124,108,240,.14);
--c-aurora-b: rgba(91,79,214,.1);
--c-blue: #2563eb;
--c-teal: #0d9488;
}
/* ── ② 质感与排版基底 (跟随主题但本身无色) ───────────────────── */
html { font-family: var(--font-ui); }
body {
background: var(--c-bg);
color: var(--c-text);
font-family: var(--font-ui);
font-size: var(--fs-md);
line-height: var(--leading-ui);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 键盘可见焦点环 (UI/UX 规则 A1) */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
/* 动效偏好 */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important;
animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
/* 排版辅助类 (可直接用) */
.t-display { font-weight: 700; letter-spacing: var(--tracking-tight);
line-height: var(--leading-tight); }
.t-mono { font-family: var(--font-mono); }
.t-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--c-muted); }
.t-faint { color: var(--c-faint); }
.t-xs { font-size: var(--fs-xs); }
.t-sm { font-size: var(--fs-sm); }
.t-lg { font-size: var(--fs-lg); }
.t-xl { font-size: var(--fs-xl); }
/* 质感配方 */
.surface { background: var(--c-surface); border: var(--line) solid var(--c-border);
border-radius: var(--r-lg); }
.surface-2 { background: var(--c-surface-2); border: var(--line) solid var(--c-border);
border-radius: var(--r-lg); }
.glass { background: color-mix(in srgb, var(--c-surface) 62%, transparent);
border: var(--line) solid var(--c-glass-line); border-radius: var(--r-lg);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.aurora-bg { position: relative; overflow: hidden; }
.aurora-bg::before { content: ""; position: absolute; inset: -30% -10% auto auto;
width: 620px; height: 620px; border-radius: 50%;
background: radial-gradient(closest-side, var(--c-aurora-a), transparent 70%);
pointer-events: none; }
.aurora-bg::after { content: ""; position: absolute; inset: auto auto -35% -8%;
width: 520px; height: 520px; border-radius: 50%;
background: radial-gradient(closest-side, var(--c-aurora-b), transparent 70%);
pointer-events: none; }
.aurora-bg > * { position: relative; z-index: 1; }
/* ── 全站统一导航栏 (2026-09-04) — 各页共用同一 .site-hdr ─────────── */
/* 2026-09-05: 头部固定深色壳 (不随页面主题变) — 保证五页导航视觉一致 */
.site-hdr { position: sticky; top: 0; z-index: 30;
background: rgba(9, 11, 17, 0.86);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: var(--line) solid rgba(255, 255, 255, 0.08); }
.site-hdr .hdr-in { max-width: var(--content-max); margin: 0 auto; padding: 0 20px;
height: 58px; display: flex; align-items: center; gap: 26px; }
.site-hdr .brand { display: inline-flex; align-items: center; gap: 8px;
font-weight: 800; font-size: 17px; letter-spacing: var(--tracking-tight);
color: #fff; text-decoration: none; }
.site-hdr .brand .dot { width: 9px; height: 9px; border-radius: 3px;
background: linear-gradient(135deg, #79c0ff, #58a6ff); }
.site-hdr nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-hdr nav a { color: #9aa3b5; text-decoration: none; font-size: 14px;
font-weight: 500; padding: 8px 12px; border-radius: 8px; }
.site-hdr nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-hdr nav a[aria-current="page"] { color: #fff; }
.site-hdr nav a[aria-current="page"]::after { content: ""; display: block;
height: 2px; border-radius: 2px; margin-top: 2px; background: #58a6ff; }
.site-hdr .theme-sw { margin-left: 4px; }
.site-hdr .lang-sw { margin-left: 6px; }
/* 头部胶囊 (固定深底适配 — 与内容主题无关) */
.site-hdr .vibe-theme-sw, .site-hdr .vibe-lang-sw { display: inline-flex;
border: var(--line) solid rgba(255, 255, 255, 0.16); border-radius: 999px;
overflow: hidden; background: rgba(255, 255, 255, 0.07); }
.site-hdr .vibe-theme-btn, .site-hdr .vibe-lang-btn { background: transparent;
border: 0; color: #9aa3b5; padding: 4px 10px; font-size: 11px; line-height: 1.6;
cursor: pointer; font-family: var(--font-mono); }
.site-hdr .vibe-theme-btn:hover, .site-hdr .vibe-lang-btn:hover { color: #fff; }
.site-hdr .vibe-theme-btn.on, .site-hdr .vibe-lang-btn.on { background: #58a6ff;
color: #06121f; }
/* app 遗留 .langsw → 统一成深底胶囊 */
.site-hdr .langsw { display: inline-flex; border: var(--line) solid rgba(255, 255, 255, 0.16);
border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.07); }
.site-hdr .langsw button { background: transparent; border: 0; color: #9aa3b5;
padding: 4px 10px; font-size: 11px; line-height: 1.6; cursor: pointer;
font-family: var(--font-mono); }
.site-hdr .langsw button:hover { color: #fff; }
.site-hdr .langsw button.on { background: #58a6ff; color: #06121f; }
@media (max-width: 720px) {
.site-hdr .hdr-in { height: auto; min-height: 52px; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px; }
.site-hdr nav { margin-left: 0; flex-wrap: wrap; }
.site-hdr nav a { padding: 6px 9px; font-size: 13px; }
}
/* ── 统一页脚 (2026-09-04) ───────────────────────────── */
.foot-comp { border-top: var(--line) solid var(--c-border); margin-top: 64px;
padding: 26px 20px 40px; }
.foot-comp .fc-in { max-width: var(--content-max); margin: 0 auto; display: flex;
flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between;
color: var(--c-muted); font-size: 13px; }
.foot-comp a { color: var(--c-muted); text-decoration: none; }
.foot-comp a:hover { color: var(--c-accent); }
.foot-comp .fc-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-comp .fc-right { font-family: var(--font-mono); font-size: 12px; color: var(--c-faint); }
/* ── 页内小注释块 (cancel 等) ─────────────────────────── */
.note { border: var(--line) solid var(--c-border); border-radius: var(--r-lg);
padding: 18px 20px; margin-top: 26px; background: var(--c-surface-2);
color: var(--c-muted); font-size: 13px; line-height: 1.7; }
.note h3 { font-size: 13px; font-weight: 700; color: var(--c-text);
text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.note p { margin: 0 0 6px; }
.note p:last-child { margin-bottom: 0; }
.note code { font-family: var(--font-mono); font-size: 12px;
background: var(--c-surface-3); padding: 1px 6px; border-radius: 5px;
color: var(--c-accent-2); }
/* ── 页面骨架: 两栏漏斗 (account.html 同款 — 全站统一版式) ─────── */
/* 用法: */
.wrap.page { max-width: var(--content-max); margin: 0 auto;
padding: clamp(24px, 5vw, 48px) 20px 64px;
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
gap: clamp(28px, 5vw, 76px); align-items: start; }
/* 左栏: 价值叙事 (sticky) */
.pitch { position: sticky; top: 82px; padding: 4px 0 0; }
.pitch .eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs);
letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent);
margin-bottom: 18px; }
.pitch-h { font-size: var(--fs-3xl); font-weight: 800;
letter-spacing: var(--tracking-tight); line-height: 1.08;
color: var(--c-text-strong); margin: 0; }
.pitch-h em { font-style: normal; color: var(--c-accent); }
.pitch-sub { font-size: var(--fs-lg); color: var(--c-muted);
margin: 18px 0 26px; max-width: 460px; line-height: 1.6; }
.pitch-points { list-style: none; margin: 0 0 30px; padding: 0;
display: grid; gap: 14px; }
.pitch-points li { display: flex; gap: 14px; align-items: baseline;
color: var(--c-text); font-size: var(--fs-md); }
.pitch-points li span { color: var(--c-accent); font-size: var(--fs-sm);
min-width: 22px; }
.faux-lead { border: var(--line) solid var(--c-border);
background: var(--c-surface); border-radius: var(--r-lg);
padding: 16px 18px; box-shadow: var(--shadow-md); position: relative;
overflow: hidden; }
.faux-lead::before { content: ""; position: absolute; inset: 0 0 auto;
height: 2px; background: linear-gradient(90deg, var(--c-accent), transparent 70%); }
.fl-top { display: flex; justify-content: space-between; gap: 12px;
margin-bottom: 10px; }
.fl-sub { color: var(--c-accent-2); font-size: var(--fs-xs); }
.fl-score { color: var(--c-ok); font-size: var(--fs-xs); }
.fl-body { color: var(--c-text); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }
.fl-body i { color: var(--c-muted); font-style: normal; }
.pitch-foot { color: var(--c-faint); margin: 16px 0 0; }
.pitch-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 0; }
/* 右栏: 内容区 */
.stage { min-width: 0; }
.stage > .card + .card { margin-top: 18px; }
.stage > .note { margin-top: 26px; }
.stage > .note + .card { margin-top: 18px; }
/* 通用主卡: 顶缘光 + 表面分层 (account 质感) */
.card { position: relative; overflow: hidden; max-width: none;
border: var(--line) solid var(--c-border); border-radius: var(--r-lg);
padding: clamp(20px, 3vw, 28px) clamp(18px, 3vw, 26px);
background: linear-gradient(180deg, var(--c-surface), var(--c-surface-2)); }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px;
background: linear-gradient(90deg, transparent, var(--c-glass-line) 30%,
var(--c-glass-line) 70%, transparent); }
.card h2 { font-size: var(--fs-xl); font-weight: 700;
letter-spacing: var(--tracking-tight); color: var(--c-text-strong);
margin: 0 0 6px; }
.card h3 { font-size: var(--fs-md); font-weight: 600;
color: var(--c-text-strong); margin: 0 0 6px; }
.card p { color: var(--c-text); margin: 0 0 10px; }
.card p:last-child { margin-bottom: 0; }
/* 卡内链接 — 排除按钮 (否则 .card a 会覆盖 .btn 文字色 → 同色不可见) */
.card a:not(.btn) { color: var(--c-accent); }
.card a.btn { color: var(--c-text-strong); }
.card a.btn.ghost, .card a.btn.secondary { color: var(--c-text); }
.card ul, .card ol { margin: 10px 0; padding-left: 22px; color: var(--c-text); }
.card li { margin: 8px 0; }
.card hr { border: 0; border-top: var(--line) solid var(--c-border); margin: 18px 0; }
/* 卡片内网格 (特性/计划等) */
.card-grid { display: grid; gap: 14px; margin-top: 16px; }
.card-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.tile { background: var(--c-surface); border: var(--line) solid var(--c-border);
border-radius: var(--r-md); padding: 16px; }
.tile h3 { font-size: var(--fs-md); font-weight: 600;
color: var(--c-text-strong); margin: 0 0 6px; }
.tile p { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: 1.65; }
.tile .tile-num { font-family: var(--font-mono); font-size: var(--fs-xs);
color: var(--c-accent); display: block; margin-bottom: 8px; }
/* 按钮 (account 同款) */
.btn { display: inline-block; padding: 11px 20px; min-height: 44px;
border-radius: 8px; border: var(--line) solid transparent; cursor: pointer;
font-weight: 600; font-size: 14px; font-family: var(--font-ui);
background: var(--c-accent); color: var(--c-text-strong);
text-decoration: none; line-height: 1.4;
/* 2026-09-12 P0: 统一交互态 — 过渡 150ms (颜色) / 120ms (位移) */
transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out,
color 150ms ease-in-out, filter 150ms ease-in-out, transform 120ms ease-out; }
.btn:hover { filter: brightness(1.1); } /* +10% (规范要求 ≥8%) */
.btn:not(:disabled):active { transform: translateY(1px); filter: brightness(.96); }
.btn:disabled { opacity: .4; cursor: not-allowed; } /* 2026-09-12 P0: .5 → .4 (MD3/Workday 口径) */
.btn.ghost, .btn.secondary { background: transparent;
border-color: var(--c-border-control); color: var(--c-text); } /* 2026-09-12 P0: 边框即唯一可见性 → ≥3:1 */
.btn.ghost:hover, .btn.secondary:hover { border-color: var(--c-accent);
color: var(--c-accent); filter: none; }
/* 语义变体 (2026-09-05 全站统一 — app 工作台并入) */
.btn.ok, .btn.green { background: var(--c-ok); color: var(--c-on-ok, #06230f); }
.btn.danger { background: var(--c-err); color: var(--c-on-err, #fff); }
.btn.danger:hover { filter: brightness(1.1); }
.btn.ghost.danger, .btn.outline-danger { background: transparent;
border-color: var(--c-err); color: var(--c-err); }
.btn.ghost.danger:hover, .btn.outline-danger:hover { background: var(--c-err);
color: var(--c-on-err, #fff); filter: none; }
.btn.warn { background: var(--c-warn); color: var(--c-on-warn, #1a1204); }
.btn.sm { padding: 5px 12px; min-height: 0; font-size: 12px; border-radius: 6px; }
.btn.sm .ico { font-size: 11px; }
.btn.block { display: block; width: 100%; text-align: center; }
/* ── 文章/阅读排版 (blog 等长文页共用) ─────────────────── */
.card h1 { font-size: var(--fs-2xl); font-weight: 800;
letter-spacing: var(--tracking-tight); line-height: 1.15;
color: var(--c-text-strong); margin: 0 0 10px; }
.card h1 + .post-meta { margin-top: -2px; }
.post-meta { color: var(--c-muted); font-size: var(--fs-xs);
font-family: var(--font-mono); margin: 0 0 16px; }
.post-meta a { color: var(--c-muted); text-decoration: none; }
.post-meta a:hover { color: var(--c-accent); }
.tag { display: inline-block; background: var(--c-surface-3);
color: var(--c-muted); border-radius: 999px; padding: 2px 10px;
font-size: var(--fs-xs); font-family: var(--font-mono); margin: 0 4px 4px 0; }
.card table { width: 100%; border-collapse: collapse; margin: 12px 0 16px;
font-size: var(--fs-sm); color: var(--c-text); }
.card table th, .card table td { text-align: left; padding: 8px 10px;
border-bottom: var(--line) solid var(--c-border); vertical-align: top; }
.card table th { color: var(--c-muted); font-size: 12px;
text-transform: uppercase; letter-spacing: .04em;
border-bottom-color: var(--c-border-strong); }
.card code { font-family: var(--font-mono); font-size: 12px;
background: var(--c-surface-3); padding: 1px 6px; border-radius: 5px;
color: var(--c-accent-2); }
.card strong { color: var(--c-text-strong); }
/* 文章内强调卡 (CTA) */
.card.cta { border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
background: linear-gradient(180deg,
color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)),
var(--c-surface-2)); }
.card.cta h2 { color: var(--c-text-strong); }
.card.cta .btn { margin-top: 6px; }
.article-link { display: block; text-decoration: none; }
.article-link:hover .tile { border-color: var(--c-accent); }
.article-link .tile h3 { margin-bottom: 4px; }
.article-link .tile .post-meta { margin-bottom: 6px; }
/* 响应: 折叠为单栏 */
@media (max-width: 920px) {
.wrap.page { grid-template-columns: 1fr; gap: 6px; }
.pitch { position: static; padding: 0 0 6px; }
.pitch-h { font-size: var(--fs-2xl); }
.faux-lead, .pitch-points, .pitch-sub { display: none; }
.pitch .eyebrow { margin-bottom: 12px; }
}
/* ── QR 渲染 (site/js/qrcode.min.js 的表格模式) ─────────────────────────────
2026-09-11 CSP 收紧 (style-src 'self'): 内联 style 属性会被拦截, 因此该库改为输出
class, 单元格尺寸与明暗颜色由**容器上的 CSS 变量**提供 —— 变量用 CSSOM
(setProperty) 注入, CSSOM 不受 CSP 限制。
注意: 这是对 vendored qrcodejs@1.0.0 的本地改动 (原 md5 校验已失效, 见
docs/security-headers-hsts-csp-20260911.md) */
.vibe-qr { border: 0; border-collapse: collapse; }
.vibe-qr td { border: 0; padding: 0; margin: 0; width: var(--qr-w); height: var(--qr-h); }
.vibe-qr td.d { background-color: var(--qr-dark); }
.vibe-qr td.l { background-color: var(--qr-light); }