/* 全站视觉基底 —— htools 风格：纯白底、近黑文字、8px 圆角、无毛玻璃、无阴影。 共用 token + 组件：app-shell 侧栏布局、按钮、auth-card、面板、徽标、表格、 对话框、toast。四页（提交页 /admin /login /register）共用本文件，页面专属样式各自 css。 严格 CSP：仅类名切换，无内联 style/script。 深色模式：主题只经 token 层实现 —— :root 是浅色基线，下方 :root[data-theme="dark"] 覆盖同名 token，属性由 /theme.js 在首绘前写到 。 **所以规则体里不许再出现颜色字面量**（#hex / rgb / rgba）：写死的颜色不会跟着 token 翻转，深色下就在那一处破相。需要新颜色时先加 token，两个块都给值。 tests/frontend-layout.test.js 有一条扫描把这条钉死。 */ :root { color-scheme: light; --bg: #fff; --surface: #fff; --surface-2: #f4f4f5; /* 比 --surface-2 更淡的一层：表格 hover、登录页背景、平台卡片 hover 都用它。 原先散在四个文件里写死 #fafafa，深色下会变成刺眼的近白块。 */ --surface-subtle: #fafafa; --text: #09090b; --muted: #52525b; --faint: #71717a; --border: #e4e4e7; --border-soft: #ededed; --button: #09090b; --button-hover: #27272a; --button-text: #fff; --danger: #b4232f; --danger-soft: #fdf2f3; /* 语义色的描边：--*-soft 背景早已 token 化，描边却一直是字面量， 两者迟早不同步。成对定义，改一个就会想起另一个。 */ --danger-border: #f5c6cb; --danger-hover: #8f1d27; --danger-text: #fff; --success: #15803d; --success-soft: #f0fdf4; --success-border: #bbf7d0; --warning: #b45309; --warning-soft: #fffbeb; --warning-border: #fde68a; --info: #1d4ed8; --info-soft: #eff6ff; --toast-border: #3f3f46; --focus-ring: rgba(9, 9, 11, 0.35); /* 遮罩与焦点影：从 --text 派生。深色下近黑遮罩盖在深色界面上等于看不见， 所以必须是 token 而不是字面量。 */ --scrim: rgba(9, 9, 11, 0.35); --scrim-strong: rgba(9, 9, 11, 0.45); --focus-shadow: rgba(9, 9, 11, 0.12); --radius: 8px; --radius-sm: 6px; /* 全站唯一控件高度：按钮、输入框、下拉、状态开关都用它 */ --control-height: 38px; --sidebar-width: 220px; --topbar-height: 64px; --shell-max: 1440px; --font: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", Arial, sans-serif; /* admin.css 的 .config-url / .invite-code 引用它，但此前全仓库从未声明， 一直静默回退到继承字体。 */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; } /* 深色主题：只覆盖颜色，尺寸与字体 token 沿用上面那份。 属性由 /theme.js 写入（system / light / dark 三档，system 解析成实际的一档）。 刻意不写 @media (prefers-color-scheme: dark)：theme.js 已经把系统偏好解析成属性， 再写一份媒体查询等于同样的值维护两遍，且两份必然漂移。 代价：JS 被禁时停在浅色 —— 与改动前的现状一致。 */ :root[data-theme="dark"] { color-scheme: dark; --bg: #09090b; --surface: #131316; --surface-2: #1f1f23; --surface-subtle: #17171a; --text: #f4f4f5; --muted: #a1a1aa; --faint: #8b8b94; --border: #2e2e35; --border-soft: #26262c; /* 浅色下主按钮是近黑底白字；深色下反过来 —— 近白底深字仍是最高对比的那一档。 */ --button: #f4f4f5; --button-hover: #d4d4d8; --button-text: #09090b; /* 语义色整体提亮：浅色那组是给白底调的，放到深底上对比度不够。 */ --danger: #f87171; --danger-soft: #2a1416; --danger-border: #5b2226; --danger-hover: #fca5a5; --danger-text: #1a0c0d; --success: #4ade80; --success-soft: #10231a; --success-border: #1f5133; --warning: #fbbf24; --warning-soft: #241a08; --warning-border: #59431a; --info: #7dabff; --info-soft: #111a2b; --toast-border: #3f3f46; --focus-ring: rgba(244, 244, 245, 0.45); /* 遮罩仍是压暗而非提亮：深色界面上盖一层更黑的才有层次，加深不透明度补足。 */ --scrim: rgba(0, 0, 0, 0.6); --scrim-strong: rgba(0, 0, 0, 0.7); --focus-shadow: rgba(244, 244, 245, 0.16); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, p { margin: 0; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; opacity: 0.5; } [hidden] { display: none !important; } a { color: var(--info); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-radius: var(--radius-sm); } .icon { width: 16px; height: 16px; flex: none; } /* ---------- 布局：侧栏 + 顶栏 + 内容（dashboard 外壳） ---------- */ .app-shell { min-height: 100vh; /* dvh 跟随手机地址栏收放；vh 留作旧浏览器回退。与 .auth-body 同一写法。 */ min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); background: var(--bg); } .sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 12px 16px; } .sidebar-head { padding: 0 10px 18px; } /* 品牌行：徽标 + 主标题/副标题两行文字。徽标高度对齐两行文字的总高， 所以主副标题的行高写死，改字号时同步调整徽标尺寸即可。 */ .brand-row { display: flex; align-items: center; gap: 10px; } .brand-mark { flex: none; border-radius: var(--radius-sm); } .brand-text { display: flex; flex-direction: column; min-width: 0; } /* 侧栏品牌：鹅栏只有 220px，产品名必须一行放得下，所以字号压到 13px 且不换行。 主标题 18px + 副标题 14px = 32px，徽标同高。 */ .sidebar-head .brand-row { gap: 8px; } .sidebar-head .brand-mark { width: 32px; height: 32px; } .sidebar-head .product-name { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 18px; white-space: nowrap; color: var(--text); } .sidebar-head .sidebar-sub { font-size: 11px; font-weight: 500; line-height: 14px; white-space: nowrap; color: var(--faint); } .sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; } /* 侧栏导航项也是按钮，高度并入全站唯一控件高度（原来靠 padding+行高凑出 37.7px） */ .sidebar-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: var(--control-height); padding: 8px 10px; background: transparent; border: 0; border-radius: var(--radius); color: var(--muted); text-align: left; font-size: 14px; } .sidebar-nav-item:hover { background: var(--surface-2); color: var(--text); } .sidebar-nav-item.is-active { background: var(--surface-2); color: var(--text); font-weight: 600; } .sidebar-bottom { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border-soft); padding-top: 12px; margin-top: 8px; } .sidebar-user { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 13px; color: var(--muted); } .sidebar-user .user-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); } .sidebar-user-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 退出等侧栏工具按钮与导航项同高 */ .sidebar-utility { display: flex; align-items: center; gap: 10px; min-height: var(--control-height); padding: 8px 10px; background: transparent; border: 0; border-radius: var(--radius); color: var(--muted); text-align: left; font-size: 14px; } .sidebar-utility:hover { background: var(--surface-2); color: var(--text); } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--topbar-height); padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; } .topbar-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; } .topbar-actions { display: flex; align-items: center; gap: 8px; } .app-content { width: 100%; max-width: var(--shell-max); margin: 0 auto; padding: 28px; } /* ---------- 按钮 ---------- 全站只有一种按钮尺寸：高 --control-height、左右 16px、字号 14px、宽度由文字自适应。 颜色变体（danger / danger-outline）也列在这里，所以单独使用也有完整尺寸。 .status-toggle 同样走这套——它是可点击的开关，不是只读徽标。 */ .primary-button, .button, .ghost-button, .button-secondary, .button-danger, .status-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-height: var(--control-height); padding: 0 16px; border-radius: var(--radius); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; } .primary-button:disabled, .button:disabled, .ghost-button:disabled, .button-secondary:disabled, .button-danger:disabled, .status-toggle:disabled { cursor: default; } /* 主操作：实底近黑 */ .primary-button, .button { background: var(--button); border: 1px solid var(--button); color: var(--button-text); } .primary-button:hover:not(:disabled), .button:hover:not(:disabled) { background: var(--button-hover); border-color: var(--button-hover); } /* 次操作：白底灰边 */ .ghost-button, .button-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--text); } .ghost-button:hover:not(:disabled), .button-secondary:hover:not(:disabled) { background: var(--surface-2); } /* 危险操作：实底红。禁用时统一变浅（见全局 button:disabled 的 opacity）， 所以「深红 = 可点、浅红 = 不可点」在全站是同一套视觉规则。 */ .button-danger { background: var(--danger); border: 1px solid var(--danger); color: var(--danger-text); } .button-danger:hover:not(:disabled) { background: var(--danger-hover); border-color: var(--danger-hover); } .icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--control-height); height: var(--control-height); background: transparent; border: 0; border-radius: var(--radius); color: var(--muted); cursor: pointer; } .icon-button:hover:not(:disabled) { background: var(--surface-2); color: var(--text); } /* ---------- 表单 ---------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 600; color: var(--muted); } /* 非