/* ===== 主题变量 — sky.kx99.cc 风格，深色为默认 =====
通过 切换，未设置时走 :root 的深色默认。 */
:root, html[data-theme="dark"] {
/* 削层(审计 2026-08-02 UI 批1):本块原先重复定义了 25 个语义 token,
但 PROFESSIONAL_UI_CSS 在同等特异性((0,1,0)/(0,1,1))上、且排在
SHARED_CSS 更后面,逐个覆盖了它们 —— 浏览器实测 :root 与
body.has-sidebar 在浅/深色下解析到的全是 PROFESSIONAL 的值。
重复定义只会让人误以为改这里有用。仅保留本层独有的 --particle。 */
--particle: 'rgba(63,125,232,0.8)';
}
html[data-theme="light"] {
/* 削层(审计 2026-08-02 UI 批1):本块原先重复定义了 25 个语义 token,
但 PROFESSIONAL_UI_CSS 在同等特异性((0,1,0)/(0,1,1))上、且排在
SHARED_CSS 更后面,逐个覆盖了它们 —— 浏览器实测 :root 与
body.has-sidebar 在浅/深色下解析到的全是 PROFESSIONAL 的值。
重复定义只会让人误以为改这里有用。仅保留本层独有的 --particle。 */
--particle: 'rgba(37,99,235,0.55)';
}
* { box-sizing: border-box; }
html {
background: var(--bg);
background-image:
radial-gradient(900px 600px at 12% -10%, rgba(63,125,232,0.35), transparent 60%),
radial-gradient(800px 600px at 95% 10%, rgba(37,99,235,0.22), transparent 60%),
radial-gradient(700px 500px at 50% 120%, rgba(63,213,135,0.18), transparent 60%);
background-attachment: fixed;
}
html[data-theme="light"] {
/* 浅色模式：渐变光斑收敛得更柔，避免和白卡片打架 */
background-image:
radial-gradient(900px 600px at 12% -10%, rgba(37,99,235,0.10), transparent 60%),
radial-gradient(800px 600px at 95% 10%, rgba(29,78,216,0.07), transparent 60%),
radial-gradient(700px 500px at 50% 120%, rgba(37,99,235,0.05), transparent 60%);
}
/* 浅色下让粒子画布更淡（在 ui_css.py BG_CANVAS_HTML 默认 0.85 基础上再压一档） */
html[data-theme="light"] #sky-bg-canvas { opacity: 0.32 !important; }
body { background: transparent; } /* 让背景粒子画布透出 */
body {
font-family: "Noto Sans SC", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
"SF Pro Text", "PingFang SC", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "cv11", "ss01", "ss03";
max-width: 1600px; margin: 0 auto; padding: 0 20px 40px;
color: var(--text); line-height: 1.5;
}
/* ---------- typography ---------- */
h1 { font-size: 20px; line-height:1.25; margin: 0; letter-spacing:-0.01em; font-weight: 650; }
h2 { font-size: 16px; margin: 28px 0 10px; letter-spacing:-0.005em; font-weight: 600; color: var(--text); }
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }
h3 { font-size: 14px; margin: 18px 0 8px; font-weight: 600; color: var(--text); }
p { margin: 6px 0; }
code, pre, .mono, .tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: 13px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--border-2); margin: 14px 0 20px; }
/* ---------- topbar (sticky glass header, 贯通全屏) ---------- */
.topbar {
position: sticky; top: 0; z-index: 50;
display:flex; gap:18px; align-items:center; flex-wrap:wrap;
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
margin-top: 0; margin-bottom: 0;
padding: 12px max(20px, calc((100vw - 1600px) / 2 + 20px));
background: var(--topbar-bg);
backdrop-filter: saturate(200%) blur(22px);
-webkit-backdrop-filter: saturate(200%) blur(22px);
border-bottom: 1px solid var(--border);
}
/* 主题切换按钮 */
.theme-toggle {
display:inline-flex; align-items:center; justify-content:center;
width:32px; height:32px; border-radius:999px;
border:1px solid var(--border); background:var(--surface);
color:var(--text-2); cursor:pointer; font-size:14px;
transition: color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent);
transform: rotate(15deg); box-shadow: 0 0 10px rgba(63,125,232,0.35); }
.topbar h1 { font-size:18px; display:inline-flex; align-items:baseline; gap:10px;
letter-spacing:-0.01em;
font-family: "Orbitron", "Noto Sans SC", sans-serif; font-weight:700;
background: var(--brand-grad); -webkit-background-clip: text;
background-clip: text; color: transparent; }
.topbar h1 .sub, .topbar h1 .who {
font-size:12px; color:var(--muted); font-weight:400;
font-family: "Noto Sans SC", "Inter", sans-serif;
background: none; -webkit-background-clip: initial; background-clip: initial;
-webkit-text-fill-color: var(--muted);
}
.topbar h1 .who a { color: var(--accent); }
.topbar .nav { display:flex; gap:4px; align-items:center; border-bottom:0; padding:0; }
.topbar .nav a {
padding: 6px 12px; border-radius: 8px;
text-decoration:none; color: var(--text-2); font-size:13px; font-weight:500;
margin:0; transition: background .15s, color .15s;
}
.topbar .nav a:hover { background: var(--surface-2); color: var(--text); text-decoration:none; }
.topbar .nav a.active { background: var(--accent-soft); color: var(--accent); font-weight:600; }
.topbar .spacer { flex: 1; }
.topbar .lang { display:inline-flex; gap:2px; padding:2px; border:1px solid var(--border);
border-radius: 999px; background: var(--surface); }
.topbar .lang a {
font-size: 12px; padding: 3px 12px; border-radius: 999px;
color: var(--text-2); text-decoration:none; font-weight:500;
}
.topbar .lang a.on { background: var(--text); color:#fff; }
.topbar .logout { color:var(--muted); font-size:13px; }
.topbar .logout:hover { color: var(--err); }
/* ---------- frosted glass (Apple-like) for common surfaces ---------- */
.theme-toggle, .topbar .lang, button.secondary, .btn.secondary,
.mode label, .chip, .insnav a, .chart, .chart-head .seg,
.sm-cell, .kcard, .kpi-card, .stat-card {
backdrop-filter: saturate(200%) blur(32px);
-webkit-backdrop-filter: saturate(200%) blur(32px);
}
/* ---------- cards / panels (Apple liquid-glass 风) ----------
设计目标：内容区底色足够实，背景粒子被 blur 挡住不刺眼；同时保留毛玻璃质感。
加 ::before 模拟玻璃顶部的弧形高光（refraction specular），增强"水滴感"。 */
.card {
/* 扁平卡片：不再用 backdrop-filter（surface 已不透明），让背景粒子只在卡间留白显现 */
position: relative;
border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px 20px; margin-top: 12px;
background: var(--surface);
box-shadow: var(--shadow-1);
isolation: isolate;
}
/* 深色模式下保留极轻微的内描边高光，让卡片不至于"飘"在背景里 */
:root .card, html[data-theme="dark"] .card {
box-shadow:
var(--shadow-1),
inset 0 1px 0 rgba(255,255,255,0.06);
}
html[data-theme="light"] .card {
box-shadow: var(--shadow-2);
}
.card + .card { margin-top: 14px; }
/* ---------- forms ---------- */
label { display:block; margin: 6px 0 4px; font-size: 12px; color: var(--text-2);
font-weight: 500; letter-spacing: 0.01em; }
input[type=text], input[type=number], input[type=url], input[type=date],
input[type=password], select, textarea {
width: 100%; box-sizing: border-box; font-size: 13.5px;
padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); color: var(--text);
transition: border-color .15s, box-shadow .15s;
font-family: inherit; line-height: 1.45;
}
/* select 原生箭头收紧（部分浏览器箭头会偷高度） */
select { background-position: right 9px center; padding-right: 28px; }
input:hover, select:hover, textarea:hover { border-color: #c7cbd6; }
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
textarea { min-height: 72px; resize: vertical; }
button, .btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 9px 18px; font-size: 14px; font-weight: 500;
background: var(--accent); color: #fff;
border: 1px solid var(--accent); border-radius: var(--radius-pill);
cursor: pointer; transition: transform .05s ease, box-shadow .15s, background .15s, filter .15s;
box-shadow: var(--shadow-1);
font-family: inherit;
}
button:hover, .btn:hover { box-shadow: var(--shadow-2); }
button:active, .btn:active { transform: translateY(1px); }
button.primary, .btn.primary {
background: var(--brand-grad); border-color: transparent; color:#fff;
box-shadow: 0 6px 18px rgba(63,125,232,0.35);
}
button.primary:hover, .btn.primary:hover {
filter: brightness(1.05);
box-shadow: 0 8px 22px rgba(37,99,235,0.24);
}
button.secondary, .btn.secondary {
background: var(--surface); color: var(--text);
border: 1px solid var(--border);
}
button.secondary:hover, .btn.secondary:hover { background: var(--surface-2); border-color: var(--accent); }
button.danger, .btn.danger { background: var(--err); border-color: var(--err); }
/* ---------- form layouts (modern PM-tool style) ----------
用法：
说明：所有 input/select/textarea 已经是 width:100% + 圆角 + focus ring，
不需要再额外加 inline style。 */
.form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px 16px;
align-items: start;
}
.form-row {
display: grid; gap: 10px 14px; align-items: start;
grid-column: 1 / -1;
}
.form-row.cols-2 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.form-row.cols-3 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.form-row.cols-4 { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.field > span,
.field > .field-label {
font-size: 12px; font-weight: 500; color: var(--text-2);
letter-spacing: 0.01em; margin: 0;
}
.field.required > span::after,
.field.required > .field-label::after {
content: " *"; color: var(--err); font-weight: 600;
}
.field.full { grid-column: 1 / -1; }
.field-hint, small.field-hint {
font-size: 11.5px; color: var(--muted); margin: 2px 0 0;
line-height: 1.4;
}
.form-actions {
grid-column: 1 / -1;
display: flex; gap: 10px; justify-content: flex-end;
padding-top: 14px; margin-top: 4px;
border-top: 1px solid var(--border-2);
}
.form-actions.left { justify-content: flex-start; }
.form-actions .spacer { flex: 1; }
/* ---------- shared quiet page helpers (visual-only) ---------- */
.ui-page-stack {
display: flex; flex-direction: column;
gap: var(--ui-page-gap, 16px);
max-width: var(--ui-page-max, none);
}
.ui-card-panel {
max-width: var(--ui-card-max, none);
margin: var(--ui-card-margin, 0) !important;
padding: var(--ui-card-padding, 18px 22px) !important;
border: 1px solid var(--border) !important;
border-radius: 14px !important;
background: var(--surface) !important;
}
.ui-card-panel.soft {
background: var(--surface-2) !important;
}
.ui-card-panel + .ui-card-panel {
margin-top: 0 !important;
}
.ui-title {
display: flex; align-items: center; gap: 8px;
margin: 0 0 var(--ui-title-margin, 10px);
font-size: var(--ui-title-size, 17px); line-height: 1.3;
}
.ui-subtitle {
margin: 0 0 var(--ui-subtitle-margin, 14px);
}
.ui-actions {
display: flex; gap: var(--ui-actions-gap, 10px);
justify-content: flex-end;
margin-top: var(--ui-actions-margin-top, 16px);
padding-top: 14px;
border-top: 1px solid var(--border-2);
}
.ui-field {
display: block; margin: 0 0 14px;
}
.ui-field-label {
display: block; margin-bottom: 5px;
font-size: 12.5px; font-weight: 600; color: var(--text);
}
.ui-field input {
margin-top: 0;
}
.ui-field input[type=email] {
width: 100%; box-sizing: border-box; font-size: 13.5px;
padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); color: var(--text);
transition: border-color .15s, box-shadow .15s;
font-family: inherit; line-height: 1.45;
}
.ui-field input[type=email]:hover {
border-color: #c7cbd6;
}
.ui-field input[type=email]:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.ui-field-hint {
display: block; margin-top: 5px;
font-size: 11.5px; line-height: 1.45;
}
.ui-info-panel {
font-size: 12.5px; line-height: 1.75;
background: var(--surface-2);
padding: 11px 14px; border-radius: 10px;
border: 1px solid var(--border-2);
}
.ui-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.ui-table-wrap table {
margin-top: 0;
}
.ui-empty-cell {
padding: 20px;
text-align: center;
}
@media (max-width: 760px) {
.ui-page-stack { gap: var(--ui-page-gap-sm, 14px); }
.ui-card-panel { padding: var(--ui-card-padding-sm, 16px 14px) !important; }
.ui-actions { flex-direction: column-reverse; align-items: stretch; }
}
/* ---------- admin settings page (visual-only helpers) ---------- */
.settings-page {
--ui-page-gap: 18px;
--ui-page-gap-sm: 14px;
--ui-page-max: 1180px;
--ui-actions-gap: 12px;
}
.settings-workspace {
width: 100%; padding: 0 !important; overflow: visible;
}
.settings-sticky-header {
position: sticky; top: 0; z-index: 12;
border-radius: inherit inherit 0 0;
background: var(--surface);
transform: translateY(0);
transition: transform .18s cubic-bezier(.22, 1, .36, 1);
will-change: transform;
}
.settings-sticky-header.is-hidden {
transform: translateY(calc(-100% - 1px));
}
.settings-heading {
padding: 20px 22px 8px;
}
.settings-tabs-wrap {
max-width: 100%; overflow-x: auto; overflow-y: hidden;
border-bottom: 1px solid var(--border);
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.settings-tabs {
display: flex; flex-wrap: nowrap; gap: 2px;
width: max-content; min-width: 100%; padding: 0 12px;
}
.settings-page .settings-tab-btn {
flex: 0 0 auto; min-height: 42px; margin: 0 0 -1px;
padding: 10px 12px;
border: 0 !important; border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
background: transparent !important; box-shadow: none !important;
color: var(--text-2); font: 500 13px/1.2 inherit;
white-space: nowrap; cursor: pointer;
transition: color .15s ease, background .15s ease;
}
.settings-page .settings-tab-btn:hover {
background: var(--surface-2) !important; color: var(--text);
}
.settings-page .settings-tab-btn.active {
border-bottom-color: var(--accent) !important;
color: var(--accent); font-weight: 650;
}
.settings-page .settings-tab-btn:focus-visible {
position: relative; z-index: 1;
outline: 2px solid var(--accent); outline-offset: -4px;
}
.settings-tab-panel {
min-height: 220px; padding: 22px;
}
.settings-tab-panel[hidden] { display: none; }
.settings-config-note { margin: 0 0 14px; }
.settings-panel-tool {
margin-top: 20px; padding-top: 18px;
border-top: 1px solid var(--border);
}
.settings-tool-title {
margin: 0 0 4px; font-size: 14px; font-weight: 650;
}
.settings-billing-summary { margin: 0 0 14px; }
.settings-billing-danger { color: var(--err); font-weight: 650; }
.settings-billing-warning { color: var(--warn); font-weight: 650; }
.settings-domain-form .settings-input:first-child { min-width: 280px; }
.settings-domain-form .settings-domain-note { min-width: 180px; }
.settings-meta-table {
width: 100%; margin: 0; font-size: 13px;
}
.settings-meta-label {
width: 150px; padding: 4px 16px 4px 0;
color: var(--text-2); white-space: nowrap;
}
.settings-meta-value {
padding: 4px 0; color: var(--text);
}
.settings-field-table {
width: 100%; margin: 0; border-collapse: collapse;
}
.settings-field-key {
width: 220px; vertical-align: top;
padding: 10px 14px 10px 16px;
border-bottom: 1px solid var(--border-2);
}
.settings-field-key code {
background: transparent; padding: 0;
font-size: 11px;
}
.settings-field-label {
display: block; margin-top: 3px;
font-size: 12px; color: var(--text-2);
}
.settings-field-control {
padding: 8px 16px 8px 0;
border-bottom: 1px solid var(--border-2);
}
.settings-input {
width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.settings-hint {
font-size: 11px; color: var(--muted); margin-top: 3px;
}
.settings-inline-form {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
margin-top: 10px;
}
.settings-inline-form .settings-input {
width: auto; min-width: 260px;
}
.settings-subdomain-form {
max-width: 620px;
}
.settings-subdomain-form > .settings-field-label {
margin: 0 0 6px;
color: var(--text-2);
font-weight: 600;
}
.settings-domain-input {
display: flex; align-items: stretch;
max-width: 520px;
}
.settings-domain-input .settings-input {
min-width: 0;
border-radius: 8px 0 0 8px;
}
.settings-domain-suffix {
display: flex; align-items: center;
padding: 0 11px;
border: 1px solid var(--border); border-left: 0;
border-radius: 0 8px 8px 0;
background: var(--surface-2); color: var(--text-2);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
white-space: nowrap;
}
.settings-domain-warning {
max-width: 70ch; margin: 8px 0 14px;
}
.settings-owner {
font-size: 13px; margin-bottom: 6px;
}
.settings-ssh {
margin: 0;
}
.settings-page .btn-primary {
background: var(--brand-grad); border-color: transparent; color: rgba(255,255,255,0.96);
box-shadow: 0 6px 18px rgba(63,125,232,0.35);
}
.settings-page .btn-primary:hover {
filter: brightness(1.05);
box-shadow: 0 8px 22px rgba(37,99,235,0.24);
}
.settings-page .btn-danger {
background: var(--err); border-color: var(--err); color: rgba(255,255,255,0.96);
}
@media (max-width: 760px) {
.settings-sticky-header { top: 56px; }
.settings-heading { padding: 16px 14px 6px; }
.settings-tabs { padding: 0 6px; }
.settings-page .settings-tab-btn { min-height: 40px; padding: 9px 10px; }
.settings-tab-panel { min-height: 0; padding: 16px 14px; }
.settings-meta-table,
.settings-meta-table tbody,
.settings-meta-table tr,
.settings-meta-table td,
.settings-field-table,
.settings-field-table tbody,
.settings-field-table tr,
.settings-field-table td {
display: block; width: 100%;
}
.settings-meta-label,
.settings-meta-value,
.settings-field-key,
.settings-field-control {
width: 100%; padding: 5px 0; border-bottom: 0;
}
.settings-field-key { padding: 12px 14px 2px; }
.settings-field-control { padding: 4px 14px 12px; border-bottom: 1px solid var(--border-2); }
.settings-inline-form { align-items: stretch; }
.settings-inline-form .settings-input,
.settings-domain-form .settings-input:first-child,
.settings-domain-form .settings-domain-note { width: 100%; min-width: 0; }
.settings-inline-form select { width: 100%; }
.settings-domain-input { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.settings-sticky-header { transition: none; }
}
/* ---------- team profile page (visual-only helpers) ---------- */
.profile-page {
--ui-page-gap: 16px;
--ui-page-gap-sm: 14px;
--ui-card-max: 720px;
--ui-card-margin: 0 auto;
--ui-card-padding: 20px 22px;
--ui-card-padding-sm: 18px 14px;
--ui-title-margin: 4px;
--ui-title-size: 18px;
--ui-subtitle-margin: 18px;
--ui-actions-gap: 8px;
--ui-actions-margin-top: 18px;
}
.profile-main-grid {
display: grid; grid-template-columns: 160px minmax(0, 1fr);
gap: 24px; align-items: start;
}
.profile-avatar-column {
text-align: center;
}
.profile-avatar-fallback {
display: flex; align-items: center; justify-content: center;
font-size: 42px; font-weight: 700;
}
.profile-avatar-actions {
display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
}
.profile-tg-row {
display: block; margin-top: 8px;
}
.profile-avatar-note {
font-size: 11px; margin-top: 7px;
}
.profile-fields {
min-width: 0;
}
.profile-password-card {
margin-top: 0 !important;
}
.profile-password-form {
display: flex; flex-direction: column; gap: 10px;
}
.profile-password-label {
font-size: 12.5px;
}
.profile-password-label.ui-field {
margin: 0;
}
.profile-password-label input {
margin-top: 4px;
}
.profile-password-actions {
display: flex; justify-content: flex-end; margin-top: 6px;
}
.profile-password-note {
font-size: 11.5px; margin-top: 10px;
}
@media (max-width: 760px) {
.profile-page { --ui-card-max: none; }
.profile-main-grid { grid-template-columns: 1fr; gap: 18px; }
.profile-password-actions { flex-direction: column-reverse; align-items: stretch; }
}
/* ---------- team spend list page (visual-only helpers) ---------- */
.spend-page {
--ui-page-gap: 16px;
--ui-page-gap-sm: 14px;
--ui-card-padding: 20px 22px;
--ui-card-padding-sm: 16px 14px;
--ui-title-size: 18px;
--ui-actions-gap: 10px;
--ui-actions-margin-top: 14px;
}
.spend-summary-bar {
margin-top: 12px;
}
.spend-chart-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 10px;
margin-top: 10px;
}
.spend-table-actions {
align-items: center; flex-wrap: wrap;
}
.spend-table-actions .muted {
font-size: 12px;
}
/* ---------- team scripts list page (visual-only helpers) ---------- */
.scripts-page {
--ui-page-gap: 16px;
--ui-card-padding: 20px 22px;
--ui-card-padding-sm: 16px 14px;
--ui-title-size: 18px;
}
.scripts-list-head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 8px;
}
/* ---------- team report form page (visual-only helpers) ---------- */
.report-page {
--ui-page-gap: 16px;
--ui-card-padding: 20px 22px;
--ui-card-padding-sm: 16px 14px;
--ui-title-size: 18px;
--ui-actions-margin-top: 14px;
}
.report-card {
position: relative; z-index: 50; overflow: visible;
}
/* ---------- team memos list page (visual-only helpers) ---------- */
.memos-page {
--ui-page-gap: 16px;
--ui-card-padding: 18px 20px;
--ui-card-padding-sm: 16px 14px;
--ui-title-size: 18px;
--ui-subtitle-margin: 14px;
}
.memos-toolbar {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.memos-toolbar .spacer {
flex: 1;
}
/* ---------- team dashboard page (visual-only helpers) ---------- */
.dashboard-page {
--ui-page-gap: 16px;
--ui-page-gap-sm: 14px;
--ui-card-padding: 18px 22px;
--ui-card-padding-sm: 16px 14px;
--ui-title-size: 18px;
}
.dashboard-page .dash-grid {
margin-top: 0;
gap: 16px;
}
.dashboard-page .dash-kpis {
margin-top: 14px;
}
.dashboard-card-title {
margin: 0 0 8px;
}
.dashboard-title-note {
font-size: 12px;
font-weight: 400;
}
.dashboard-hero-subtitle {
margin: 4px 0 0;
}
.dashboard-table {
margin-top: 0;
}
.dashboard-card-link {
margin-left: auto;
}
.dashboard-card .dash-feed {
max-height: 340px;
}
.active-projects-panel {
padding: 0 !important;
overflow: hidden;
border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}
.active-projects-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 17px 20px 13px;
border-bottom: 1px solid var(--border);
}
.active-projects-head h2,
.active-projects-head p { margin: 0; }
.active-projects-head p { margin-top: 3px; font-size: 12px; }
.active-project-count {
flex: 0 0 auto;
padding: 4px 9px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--accent);
font-size: 11.5px;
font-weight: 650;
}
.active-project-featured {
margin: 14px 16px;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
border-radius: 12px;
background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}
.active-project-featured > .active-project-surface {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px 18px;
}
.active-project-featured-main,
.active-project-row-main {
display: flex;
align-items: center;
min-width: 0;
}
.active-project-icon,
.active-project-row-icon {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
}
.active-project-icon img,
.active-project-row-icon img { margin-right: 0 !important; }
.active-project-copy { min-width: 0; margin-left: 13px; }
.active-project-eyebrow {
color: var(--text-2);
font-size: 11.5px;
line-height: 1.35;
}
.active-project-name {
margin-top: 2px;
font-size: 20px;
font-weight: 720;
line-height: 1.25;
}
.active-project-description {
max-width: 78ch;
margin-top: 6px;
color: var(--text-2);
font-size: 13px;
line-height: 1.55;
white-space: pre-line;
overflow-wrap: anywhere;
}
.project-launch {
display: flex;
align-items: center;
gap: 7px;
width: max-content;
max-width: 100%;
margin-top: 10px;
color: var(--text-2);
font-size: 12px;
line-height: 1.4;
}
.project-launch-label { font-weight: 600; }
.project-launch-date {
color: var(--text);
font-variant-numeric: tabular-nums;
}
.project-countdown {
padding: 2px 7px;
border: 1px solid color-mix(in srgb, var(--warn) 28%, var(--border));
border-radius: 999px;
background: color-mix(in srgb, var(--warn) 8%, transparent);
color: var(--warn);
font-weight: 650;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.project-launch-unset { color: var(--text-2); }
.project-launch-compact {
gap: 5px;
margin-top: 3px;
font-size: 11px;
}
.project-launch-compact .project-countdown { padding: 1px 6px; }
.active-project-name-link {
color: inherit;
text-decoration: none;
}
.active-project-name-link:hover { color: var(--accent); }
.active-project-name-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 3px;
}
.active-project-actions {
display: flex;
flex: 0 0 auto;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.project-annotation-button {
min-height: 30px;
padding: 5px 9px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text-2);
font: inherit;
font-size: 11.5px;
font-weight: 650;
line-height: 1.35;
cursor: pointer;
}
.project-annotation-button:hover {
border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
background: var(--accent-soft);
color: var(--accent);
}
.project-annotation-button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.project-priority {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
padding: 3px 8px;
border: 1px solid var(--border);
border-radius: 999px;
font-size: 11.5px;
font-weight: 680;
line-height: 1.35;
white-space: nowrap;
}
.project-priority-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
}
.project-priority.priority-urgent {
color: var(--err);
background: color-mix(in srgb, var(--err) 9%, transparent);
}
.project-priority.priority-high {
color: var(--warn);
background: color-mix(in srgb, var(--warn) 10%, transparent);
}
.project-priority.priority-medium {
color: var(--accent);
background: var(--accent-soft);
}
.project-priority.priority-low {
color: var(--text-2);
background: var(--surface-2);
}
.active-project-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--border);
}
.active-project-row {
min-width: 0;
border-bottom: 1px solid var(--border);
}
.active-project-row:nth-child(odd) { border-right: 1px solid var(--border); }
.active-project-row > .active-project-surface {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 62px;
padding: 10px 16px;
}
.active-project-row-copy { min-width: 0; margin-left: 10px; }
.active-project-row-name {
overflow: hidden;
font-size: 13px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.active-project-row-meta {
overflow: hidden;
margin-top: 2px;
color: var(--text-2);
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-icon-fallback {
display: block;
width: 28px;
height: 28px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-2);
}
.active-project-icon .project-icon-fallback { width: 42px; height: 42px; }
.active-projects-empty h2,
.active-projects-empty p { margin: 0; }
.active-projects-empty p { margin-top: 6px; }
.project-annotation-dialog {
position: fixed;
inset: 0;
z-index: 1300;
display: grid;
place-items: center;
padding: 20px;
}
.project-annotation-dialog[hidden] { display: none; }
.project-annotation-backdrop {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--text) 42%, transparent);
}
.project-annotation-modal {
position: relative;
width: min(620px, 100%);
max-height: min(720px, calc(100vh - 40px));
overflow: auto;
border: 1px solid var(--border);
border-radius: 12px;
background: var(--surface);
box-shadow: var(--shadow-2);
color: var(--text);
}
.project-annotation-modal:focus { outline: none; }
.project-annotation-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--border);
}
.project-annotation-header h2 {
margin: 0;
font-size: 18px;
line-height: 1.35;
}
.project-annotation-header p {
margin: 3px 0 0;
color: var(--text-2);
font-size: 12px;
}
.project-annotation-close {
min-height: 32px;
padding: 6px 9px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface-2);
color: var(--text-2);
font: inherit;
font-size: 12px;
cursor: pointer;
}
.project-annotation-close:hover { color: var(--text); }
.project-annotation-close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.project-annotation-compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
padding: 14px 20px 0;
}
.project-annotation-pane { min-width: 0; }
.project-annotation-pane h3 {
margin: 0 0 7px;
color: var(--text-2);
font-size: 12px;
font-weight: 650;
letter-spacing: .02em;
}
.project-annotation-content {
min-height: 176px;
padding: 16px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-2);
font-size: 14px;
line-height: 1.7;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.project-annotation-status {
min-height: 20px;
margin: 8px 20px 16px;
font-size: 12px;
}
.project-annotation-error { color: var(--err); }
/* ---------- team insights page (visual-only helpers) ---------- */
.insights-page {
--ui-page-gap: 16px;
--ui-card-padding: 18px 22px;
--ui-card-padding-sm: 16px 14px;
--ui-title-size: 18px;
}
.insights-card {
min-width: 0;
}
.insights-card > .insnav {
margin-top: 0;
}
.insights-card > .chips {
margin-top: 0;
}
/* ---------- team newtask page (visual-only helpers) ---------- */
.newtask-page {
--ui-page-gap: 16px;
--ui-card-padding: 18px 22px;
--ui-card-padding-sm: 16px 14px;
--ui-title-size: 18px;
}
.newtask-page .wl-top {
margin-top: 0 !important;
}
.newtask-kpi-card {
background: linear-gradient(135deg, rgba(92,126,250,.08), rgba(63,213,135,.05)) !important;
}
.newtask-filterbar {
display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
}
.newtask-filterbar .seg-group {
margin: 0;
}
.newtask-list-card h3 {
margin: 0 0 10px;
font-size: var(--ui-title-size, 18px);
}
.newtask-table-wrap {
margin-top: 8px;
}
/* ---------- team materials page (visual-only helpers) ---------- */
.materials-page {
--ui-page-gap: 16px;
--ui-card-padding: 18px 22px;
--ui-card-padding-sm: 16px 14px;
--ui-title-size: 18px;
}
.materials-hero {
--ui-title-margin: 4px;
}
.materials-hero p {
margin: 4px 0 0 !important;
font-size: 13px;
}
.materials-tabs-card .mc-tabs {
margin-bottom: 14px;
}
.materials-table-wrap {
margin-top: 14px;
}
/* ---------- admin share page (visual-only helpers) ---------- */
.share-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
}
.share-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---------- admin users page (visual-only helpers) ---------- */
.users-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
--ui-title-margin: 0;
}
.users-head {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; flex-wrap: wrap;
}
.users-reg-link {
display: inline-flex; align-items: center;
padding: 6px 14px; border: 1px solid var(--border);
background: var(--surface); border-radius: 8px;
text-decoration: none; color: inherit;
font-size: 13px; font-weight: 600;
}
.users-reg-link.is-pending {
background: var(--warn-soft);
border-color: #fbbf24;
}
.users-reg-badge {
background: var(--err); color: rgba(255,255,255,0.96);
font-size: 11px; font-weight: 700;
padding: 1px 7px; border-radius: 999px;
margin-left: 6px; line-height: 16px;
}
.users-section-title {
margin: 4px 0 -4px;
}
.users-empty {
margin: 0;
}
.users-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.users-table-wrap table {
margin-top: 0;
}
.users-row-actions {
text-align: right;
white-space: nowrap;
}
/* ---------- shared page tabs (clean underline style, 全站统一) ---------- */
.ui-tabs {
display: flex; flex-wrap: wrap; gap: 2px;
border-bottom: 2px solid var(--border);
margin: 0 0 4px;
}
.ui-tab {
padding: 9px 18px; text-decoration: none;
color: var(--text-2, #8a93a6); font-weight: 500; font-size: 14px;
background: none; border: none; border-bottom: 2px solid transparent;
margin-bottom: -2px; cursor: pointer; line-height: 1.2; white-space: nowrap;
border-radius: 8px 8px 0 0;
transition: color .15s, background .15s;
}
.ui-tab:hover {
color: var(--text-1, var(--text));
background: var(--surface-hover, var(--accent-soft));
}
.ui-tab.active {
color: var(--accent, #2563EB);
border-bottom-color: var(--accent, #2563EB);
font-weight: 600;
}
/* ---------- admin reports page (visual-only helpers) ---------- */
.reports-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
--ui-title-margin: 0;
}
.reports-page form {
display: flex !important; flex-wrap: wrap;
gap: 10px 14px !important;
align-items: flex-end !important;
margin: 0 !important;
}
.reports-export {
margin-left: 0 !important;
font-size: 13px;
}
.reports-summary {
margin: 0;
}
.reports-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.reports-table {
width: 100%;
margin-top: 0;
}
.reports-empty {
padding: 20px;
text-align: center;
}
/* ---------- admin batch 1 pages (visual-only helpers) ---------- */
.events-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
--ui-title-margin: 0;
}
.events-subtitle {
margin: 0;
font-size: 13px;
}
.events-page form {
display: flex !important; flex-wrap: wrap;
gap: 10px 14px !important;
align-items: flex-end !important;
margin: 0 !important;
}
.events-page-nav {
display: flex; gap: 14px; flex-wrap: wrap;
margin-top: 12px;
}
.markets-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
--ui-title-margin: 0;
}
.markets-add {
display: flex; gap: 12px; align-items: center;
margin: 0; flex-wrap: wrap;
}
.markets-page table {
width: 100%;
}
.reminders-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
--ui-title-margin: 0;
--ui-card-padding: 18px 22px;
--ui-card-padding-sm: 16px 14px;
}
.reminders-subtitle {
margin: 0;
font-size: 13px;
}
.reminders-card-title {
margin: 0 0 8px;
}
.reminders-log-table {
margin-top: 8px;
}
.spend-import-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
--ui-title-margin: 0;
}
.spend-import-subtitle {
margin: 0;
font-size: 13px;
}
.spend-import-section-title {
margin: 2px 0 -4px;
}
.spend-import-actions {
display: flex; gap: 8px; flex-wrap: wrap;
margin-top: 18px;
}
.spend-import-page table {
width: 100%;
}
.admin-materials-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
--ui-title-margin: 0;
}
.admin-materials-page form {
display: flex !important; flex-wrap: wrap;
gap: 10px 14px !important;
align-items: flex-end !important;
margin: 0 !important;
}
.admin-materials-summary {
margin: 0;
}
.admin-materials-page table {
width: 100%;
}
/* ---------- admin workload page (visual-only helpers) ---------- */
.workload-page {
--ui-page-gap: 16px;
--ui-title-size: 18px;
--ui-title-margin: 0;
}
.workload-page .wl-top {
margin: 0;
}
.workload-page .dz-group {
margin-top: 0;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
}
.workload-page .dz-group h3 {
margin-bottom: 8px;
}
.workload-page table.card-m {
margin-top: 8px;
}
.workload-section-title {
margin: 2px 0 -4px;
}
.workload-empty {
margin: 0;
}
/* details() 折叠面板的标题样式：当前页面用 inline 写得很乱，
这里给个全局缺省，子页面就不必再写 inline。*/
details.card { padding: 14px 18px; }
details.card > summary {
cursor: pointer; font-weight: 600; font-size: 14px;
list-style: none; padding: 2px 0; color: var(--text);
display: flex; align-items: center; gap: 8px;
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::before {
content: "▸"; color: var(--muted); transition: transform .15s;
display: inline-block; width: 12px; text-align: center;
}
details.card[open] > summary::before { transform: rotate(90deg); }
details.card > summary + * { margin-top: 14px; }
/* ---------- entity grid (用于"卡片列表"替代裸 table，比如模板列表) ---------- */
.entity-grid {
display: grid; gap: 12px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
margin-top: 10px;
}
.entity-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px 16px;
box-shadow: var(--shadow-1);
display: flex; flex-direction: column; gap: 8px;
transition: border-color .15s, box-shadow .15s, transform .08s;
}
.entity-card:hover {
border-color: var(--accent);
box-shadow: var(--shadow-2);
}
.entity-card .ec-head {
display: flex; align-items: flex-start; gap: 8px;
justify-content: space-between;
}
.entity-card .ec-title { font-weight: 600; font-size: 14px; color: var(--text);
line-height: 1.35; flex: 1; min-width: 0; }
.entity-card .ec-meta {
display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-2);
}
.entity-card .ec-meta .meta-item {
display: inline-flex; align-items: center; gap: 4px;
background: var(--surface-2); border: 1px solid var(--border-2);
padding: 2px 8px; border-radius: 6px;
}
.entity-card .ec-meta .meta-item .ic { color: var(--muted); font-size: 11px; }
.entity-card .ec-stat {
font-size: 11px; color: var(--muted); display: flex; gap: 12px;
flex-wrap: wrap; padding-top: 4px; border-top: 1px dashed var(--border-2);
}
.entity-card .ec-actions {
display: flex; gap: 8px; margin-top: auto; padding-top: 4px;
}
.entity-card .ec-actions > * { flex: 0 0 auto; }
.entity-empty {
padding: 40px 20px; text-align: center; color: var(--muted);
border: 1px dashed var(--border); border-radius: var(--radius);
background: var(--surface-2);
}
/* page header 标题 + 操作行（标题左、按钮右）*/
.page-head {
display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
margin: 4px 0 4px;
}
.page-head h2 { margin: 0; }
.page-head .page-sub { color: var(--muted); font-size: 13px; flex: 1 1 100%; margin: 4px 0 0; }
.page-head .page-actions { margin-left: auto; display: flex; gap: 8px; }
/* ---------- rows / radio-chips ---------- */
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > div { flex: 1 1 200px; }
.row.compact { gap: 10px; }
.row.compact > div { min-width: 0; }
.mode { display:flex; gap:10px; margin:10px 0 16px; }
.mode label {
flex:1; display:flex; align-items:center; gap:8px;
padding:11px 14px; border:1px solid var(--border); border-radius:10px;
cursor:pointer; margin:0; font-size:14px; background:var(--surface);
transition: border-color .15s, background .15s;
}
.mode label:hover { border-color: #cfd4dc; background: var(--surface-2); }
.mode input[type=radio]:checked + span { color: var(--accent); font-weight:600; }
/* ---------- tables ---------- */
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
th, td { border-bottom: 1px solid var(--border-2); padding: 10px 8px;
text-align: left; vertical-align: middle; }
th { background: var(--surface-2); font-weight: 600; font-size: 12px;
color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--surface-2); }
tr.disabled td { opacity: 0.5; }
/* ---------- badges ---------- */
.badge {
display: inline-block; padding: 2px 8px; border-radius: 999px;
font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.badge-on, .b-done { background: var(--ok-soft); color: var(--ok); }
.badge-off { background: var(--err-soft); color: var(--err); }
.badge-role { background: var(--accent-soft); color: var(--accent); margin-left: 4px; }
.b-pending { background: var(--warn-soft); color: var(--warn); }
.b-aban { background: #eef0f4; color: var(--muted); }
.badge-status { display:inline-block; padding:2px 8px; border-radius:999px;
font-size:11px; font-weight:600; }
.status-pending { background: var(--warn-soft); color: var(--warn); }
.status-accepted { background: var(--info-soft); color: var(--info); }
.status-doing { background: var(--accent-soft); color: var(--accent); }
/* ---------- flash ---------- */
.flash {
padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px;
font-size: 13.5px; border: 1px solid transparent;
}
/* 审计 2026-08-02 UI 批2:底色/文字已是 token,唯独 border-color 写死浅色,
深色下会在暗色块外面描一圈亮边。一并 token 化。 */
.flash-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok); }
.flash-err { background: var(--err-soft); color: var(--err); border-color: var(--err); }
.warn-banner {
background: var(--warn-soft); color: var(--warn);
border: 1px solid #f0d58b; border-radius: var(--radius-sm);
padding: 9px 14px; margin: 8px 0; font-size: 13px;
}
/* ---------- insights / tabs ---------- */
.insnav { display:flex; gap:4px; border-bottom:1px solid var(--border); margin:4px 0 12px; flex-wrap:wrap; }
.insnav a {
padding:8px 14px; border-radius: 8px 8px 0 0;
text-decoration:none; color: var(--text-2); font-weight:500; font-size:13.5px;
border:1px solid transparent; border-bottom:0; margin-bottom:-1px;
transition: background .15s, color .15s;
}
.insnav a:hover { background: var(--surface-2); color: var(--text); }
.insnav a.active {
background: var(--surface); color: var(--text);
border-color: var(--border); border-bottom-color: var(--surface);
}
/* ---------- chips / pills ---------- */
.chips { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.chip {
padding:4px 11px; border-radius:999px; background: var(--surface-2);
color: var(--text-2); font-size:12px; text-decoration:none;
border:1px solid var(--border); font-weight: 500;
transition: background .15s, color .15s;
}
.chip:hover { background: var(--surface-2); color: var(--text); }
.chip.active { background: var(--accent); color:#fff; border-color: var(--accent); }
/* ---------- filter strip ---------- */
.insfilters .filt-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.insfilters .filt-row > div { flex:1 1 140px; min-width:0; }
/* action div（含「筛选 / 重置 / 按状态… 」）不被挤窄，按钮文字不竖排 */
.insfilters .filt-actions { flex:0 0 100%; display:flex; align-items:center;
gap:8px; flex-wrap:wrap; }
.insfilters .filt-actions > * { flex:0 0 auto; white-space:nowrap; }
.insfilters .filt-actions button,
.insfilters .filt-actions .btn-link { white-space:nowrap; }
.insfilters .filt-actions .seg { margin-left:auto; }
.insfilters .filt-actions .seg a { white-space:nowrap; }
.insfilters label { font-size:11px; color: var(--muted); margin:0 0 3px;
text-transform: uppercase; letter-spacing: 0.05em; font-weight:500; }
.insfilters select, .insfilters input[type=date] { width:100%; }
.insfilters .scope-row { display:flex; gap:10px; padding:7px 0; }
.insfilters .sc { font-weight:400; font-size:13px; margin:0; }
.insfilters .sc input { margin-right:4px; }
.insstat {
background: linear-gradient(135deg, var(--accent-soft), #fafbff);
padding: 10px 14px; border-radius: var(--radius-sm);
margin: 12px 0; font-size: 13px; color: var(--text-2);
border: 1px solid #e0e4f5;
}
/* ---------- charts ---------- */
.chart-box {
background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
padding: 14px 16px; margin: 12px 0; box-shadow: var(--shadow-1);
}
.chart { width:100%; height:auto; max-width:100%; display:block; }
.legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:12px; color: var(--text-2); }
.legend i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.chart-head { display:flex; align-items:center; gap:8px; margin:0 0 10px; flex-wrap:wrap; }
.chart-head .title { color: var(--text); font-weight:600; font-size:13.5px; }
.chart-head .spacer { flex:1; }
.chart-head .seg, .seg {
display:inline-flex; border:1px solid var(--border); border-radius:8px;
overflow:hidden; font-size:12px; background: var(--surface);
}
.chart-head .seg a, .seg a { padding:5px 12px; color:var(--text-2); text-decoration:none; }
.chart-head .seg a:hover, .seg a:hover { background: var(--surface-2); }
.chart-head .seg a.active, .seg a.active { background: var(--accent); color:#fff; }
/* ---------- market bars ---------- */
.mbars { display:flex; flex-direction:column; gap:6px; }
.mbar { display:flex; align-items:center; gap:10px; font-size:13px; }
.mbar-name { flex:0 0 120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text); }
.mbar-track { flex:1; display:flex; height:18px; background: #eef0f4; border-radius:4px; overflow:hidden; }
.mseg { height:100%; transition:width .2s ease; }
.mbar-tail { flex:0 0 70px; text-align:right; font-variant-numeric:tabular-nums; color: var(--text-2); }
.vbar { display:flex; height:22px; background: #eef0f4; border-radius:4px; overflow:hidden; }
.vseg { height:100%; }
/* ---------- small-multiples grid ---------- */
.sm-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.sm-cell {
background: var(--surface-2); border:1px solid var(--border-2);
border-radius: var(--radius-sm); padding:8px 10px 2px;
transition: border-color .15s, background .15s;
}
.sm-cell:hover { border-color: var(--border); background: var(--surface); }
.sm-head { display:flex; align-items:center; gap:6px; font-size:12px; margin-bottom:4px; }
.sm-dot { display:inline-block; width:8px; height:8px; border-radius:2px; }
.sm-name { color: var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; font-weight:500; }
.sm-total { color: var(--muted); font-variant-numeric:tabular-nums; }
.btn-link { display:inline-block; padding:6px 10px; color:var(--text-2); text-decoration:none; font-size:13px; }
.btn-link:hover { color: var(--accent); }
/* ---------- multi-select dropdown ---------- */
.chk-list {
max-height: 220px; overflow-y: auto; border:1px solid var(--border);
border-radius: var(--radius-sm); padding:6px 10px; background: var(--surface);
box-shadow: var(--shadow-1);
}
.chk-list .chk { display:flex; align-items:center; gap:6px; padding:4px 0; font-weight:400; cursor:pointer; }
.chk-list .chk input { width:auto; margin:0; }
.opt-btn {
display:flex; align-items:center; width:100%; padding:7px 11px; background: var(--surface);
border:1px solid var(--border); border-radius: 8px;
font-size:13.5px; cursor:pointer; color: var(--text);
text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; height:auto;
font-family: inherit; line-height: 1.45;
}
.opt-btn:hover { border-color: #cfd4dc; }
.opt-pop {
position:absolute; z-index:200; left:0; right:0; top:100%; margin-top:4px;
box-shadow: var(--shadow-3); min-width:220px;
background: #ffffff;
backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-theme="dark"] .opt-pop { background: #1e2329; }
#opt_summary { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ---------- admin-specific overrides ---------- */
.nav a { margin-right: 0; }
tr.disabled td { opacity: 0.45; }
.overdue-row td { background: var(--err-soft); }
.overdue-tag { color: var(--err); font-weight:600; }
.dz-group {
margin-top: 18px; padding: 12px 16px; background: var(--surface-2);
border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
}
.dz-group h3 { margin:0 0 6px; font-size:14px; color: var(--text); }
.dz-group.empty { border-left-color: var(--border); color: var(--muted); }
.cap-panel {
margin: 12px 0 8px; padding: 14px 18px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-1);
}
.cap-panel .cap-head { display:flex; flex-wrap:wrap; align-items:center;
gap:10px; padding: 2px 0 10px; }
.cap-title { font-size:14px; font-weight:600; color: var(--text); }
.cap-sum { font-size:12px; color: var(--text-2); display:inline-flex; flex-wrap:wrap; gap:4px; }
.cap-sum .chip {
display:inline-block; padding:2px 10px; border-radius:999px;
background: var(--surface-2); border:1px solid var(--border);
margin-right:6px; font-weight:600; font-size:11px;
}
.cap-sum .chip.over { background: var(--err-soft); border-color:#f1bdb8; color: var(--err); }
.cap-sum .chip.idle { background: var(--ok-soft); border-color:#b7ebcf; color: var(--ok); }
/* 旧横向容量条 .cap-row* 已删(2026-07-17)—— 全库无 HTML 引用,被竖向 .cap-cell 取代 */
form.inline { display: inline; }
td.actions form.inline + form.inline { margin-left: 6px; }
.small { font-size: 12px; color: var(--muted); }
.field-err { color: var(--err); font-size:12px; margin-top:4px; display:none; }
.invalid { border-color: var(--err) !important; box-shadow: 0 0 0 3px var(--err-soft) !important; }
.date-head { margin: 20px 0 6px; font-weight:600; color: var(--text); font-size: 13.5px; }
.hide { display:none; }
/* ---------- modal（任务详情等弹窗，复用 .card 液态玻璃质感） ---------- */
.modal-backdrop {
position: fixed; inset: 0; z-index: 1000;
background: rgba(6, 9, 16, 0.72);
backdrop-filter: saturate(140%) blur(20px);
-webkit-backdrop-filter: saturate(140%) blur(20px);
display: none; align-items: flex-start; justify-content: center;
overflow-y: auto; padding: 40px 20px;
animation: modal-fade-in .15s ease-out;
}
html[data-theme="light"] .modal-backdrop { background: rgba(20, 24, 36, 0.55); }
.modal-backdrop.open { display: flex; }
body.modal-open { overflow: hidden; }
.modal-shell {
position: relative; width: 100%; max-width: 760px;
border: 1px solid var(--border); border-radius: var(--radius-lg);
background: var(--surface-solid);
box-shadow:
var(--shadow-3),
inset 0 1px 0 rgba(255,255,255,0.08);
padding: 22px 26px 24px; margin: auto;
animation: modal-pop-in .18s ease-out;
isolation: isolate;
text-align: left;
}
html[data-theme="light"] .modal-shell { background: #ffffff; }
.modal-shell::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
pointer-events: none; z-index: -1;
background:
radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.06), rgba(255,255,255,0) 55%);
}
html[data-theme="light"] .modal-shell::before { background: none; }
.modal-close {
position: absolute; top: 12px; right: 12px;
width: 30px; height: 30px; border-radius: 999px;
border: 1px solid var(--border); background: var(--surface-2);
color: var(--text-2); cursor: pointer; font-size: 16px; line-height: 1;
display: inline-flex; align-items: center; justify-content: center;
z-index: 2; padding: 0; transition: color .15s, border-color .15s, transform .2s;
}
.modal-close:hover { color: var(--err); border-color: var(--err); transform: rotate(90deg); }
.modal-shell > .modal-loading { padding: 40px; text-align: center; color: var(--muted); }
/* 弹窗里的 .page-head 收紧、左对齐 */
.modal-shell .page-head { margin: 0 0 6px; padding-right: 36px; }
.modal-shell .page-head h2 { font-size: 17px; }
.modal-shell .page-head .page-sub { margin-top: 2px; }
/* 弹窗里的 .card 完全扁平化（已经在 modal 玻璃壳里了） */
.modal-shell .card { background: transparent; border: 0; box-shadow: none;
padding: 0; margin-top: 14px; backdrop-filter: none;
-webkit-backdrop-filter: none; }
.modal-shell .card::before { display: none; }
.modal-shell .card + .card { margin-top: 16px; padding-top: 14px;
border-top: 1px solid var(--border-2); }
.modal-shell .card h3 { margin: 0 0 10px; font-size: 15px; }
.modal-shell .form-grid { gap: 12px 18px; }
.modal-shell .form-grid > div { line-height: 1.35; }
.modal-shell .form-grid > div .muted,
.modal-shell .form-grid > div span.muted { font-size: 11px;
text-transform: uppercase; letter-spacing: 0.06em; display:block; margin-bottom: 3px;
font-weight: 600; opacity: 0.7; }
/* 表单值：加粗 + 用主文本色，确保对比度 */
.modal-shell .form-grid > div > div { color: var(--text); font-weight: 600; font-size: 14px; }
.modal-shell .form-grid > div > div code { background: transparent; padding: 0;
font-family: inherit; font-weight: 600; color: var(--text); }
@keyframes modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
.modal-backdrop, .modal-shell { animation: none; }
}
/* ---------- mobile (≤640px) ---------- */
@media (max-width: 640px) {
body { padding: 0 12px 32px; font-size: 14px; }
.topbar { margin: 0 -12px 16px; padding: 10px 12px; }
h1 { font-size: 17px; }
h2 { font-size: 15px; margin-top: 22px; }
button, .btn { font-size: 15px; padding: 10px 16px; min-height: 40px; width: 100%; }
button.compact, .btn.compact { width:auto; min-height:0; padding:6px 12px; font-size:13px; }
.mode label { font-size: 13px; padding: 10px 12px; }
table { display:block; overflow-x:auto; white-space: nowrap; }
/* admin .card-m 卡片化 */
table.card-m, table.card-m tbody, table.card-m tr, table.card-m td { display: block; width: 100%; }
table.card-m thead { display: none; }
table.card-m tr {
border: 1px solid var(--border); border-radius: var(--radius);
margin-bottom: 12px; padding: 10px 12px; background: var(--surface);
box-shadow: var(--shadow-1);
}
table.card-m td {
border: 0; padding: 4px 0;
display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
}
table.card-m td::before {
content: attr(data-label); color: var(--muted); font-size: 11px;
flex: 0 0 76px; padding-top: 2px; text-transform: uppercase; letter-spacing: 0.04em;
}
table.card-m td:first-child {
font-weight: 600; font-size: 15px; padding-bottom: 6px;
border-bottom: 1px dashed var(--border-2); margin-bottom: 4px;
}
table.card-m td:first-child::before { display: none; }
table.card-m td.actions { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 6px; }
table.card-m td.actions::before { flex: 0 0 auto; margin-bottom: 2px; }
table:not(.card-m) { display: block; overflow-x: auto; white-space: nowrap; }
.cap-panel { padding: 10px 14px; }
.cap-sum .chip { margin-bottom: 4px; }
form.inline { display: block; margin: 0 0 6px 0; }
form.inline select { max-width: none !important; margin-bottom: 6px; }
td.actions form.inline + form.inline { margin-top: 2px; }
/* insights / KPI 筛选 + 标签栏 移动端 */
.insnav { gap:2px; margin:2px 0 8px; }
.insnav a { padding:6px 10px; font-size:13px; }
.chips { gap:4px; margin:6px 0; }
.chip { padding:4px 9px; font-size:11px; }
.insfilters .filt-row { gap:8px; }
.insfilters .filt-row > div { flex:1 1 100%; }
.insfilters .filt-row > div.half { flex:1 1 calc(50% - 8px); }
.insfilters .scope-row { flex-wrap:wrap; padding:4px 0; }
.insfilters label { font-size:10px; }
.insstat { padding:8px 12px; font-size:12.5px; }
.chart-box { padding:10px 12px; margin:10px 0; }
}
/* ---------- mobile app shell refinements (≤640px, visual-only) ---------- */
@media (max-width: 640px) {
html { -webkit-text-size-adjust: 100%; }
body.has-sidebar {
min-width: 0;
overflow-x: hidden;
}
body.has-sidebar h1 { font-size: 20px; line-height: 1.25; }
body.has-sidebar h2 { font-size: 17px; line-height: 1.3; }
body.has-sidebar h3 { font-size: 15px; line-height: 1.35; }
body.has-sidebar button,
body.has-sidebar .btn {
width: auto;
}
body.has-sidebar .btn-sm,
body.has-sidebar button.btn-sm,
body.has-sidebar .chip,
body.has-sidebar .seg-btn,
body.has-sidebar .xmp-btn {
width: auto;
min-height: 0;
}
body.has-sidebar .ui-actions {
gap: 8px;
padding-top: 12px;
}
body.has-sidebar .ui-actions button,
body.has-sidebar .ui-actions .btn,
body.has-sidebar .form-actions button,
body.has-sidebar .form-actions .btn {
width: 100%;
justify-content: center;
}
body.has-sidebar .ui-card-panel {
border-radius: 12px !important;
box-shadow: none !important;
}
body.has-sidebar .ui-title {
flex-wrap: wrap;
gap: 6px;
font-size: 17px;
}
body.has-sidebar .ui-table-wrap {
margin-left: -2px;
margin-right: -2px;
padding-bottom: 2px;
overscroll-behavior-x: contain;
scrollbar-width: thin;
}
body.has-sidebar .ui-table-wrap::after {
content: "";
position: sticky;
right: 0;
display: block;
width: 18px;
height: 1px;
margin-top: -1px;
margin-left: auto;
pointer-events: none;
box-shadow: -14px 0 18px rgba(10, 15, 26, 0.08);
}
body.has-sidebar input,
body.has-sidebar select,
body.has-sidebar textarea {
max-width: 100%;
}
body.has-sidebar textarea {
min-height: 96px;
}
}
/* ---------- print ---------- */
@media print {
.topbar, .insnav, .insfilters, .chart-head .seg, button, .btn { display: none !important; }
body { max-width: none; padding: 0; background: #fff; }
.card, .chart-box { box-shadow: none; border-color: #ccc; }
}
/* status pill */
.s-pill { display:inline-flex; align-items:center; gap:5px;
padding:2px 9px; border-radius:999px;
font-size:11.5px; font-weight:600; line-height:1.7;
white-space:nowrap; }
.s-pill .dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.s-pending { background:#FEF3C7; color:#92400E; }
.s-pending .dot { background:#D97706; }
.s-accepted { background:#DBEAFE; color:#1E40AF; }
.s-accepted .dot { background:#2563EB; }
.s-doing { background:#CFFAFE; color:#155E75; }
.s-doing .dot { background:var(--accent); }
.s-done { background:#DCFCE7; color:#166534; }
.s-done .dot { background:#16A34A; }
.s-canceled { background:#F1F5F9; color:#475569; }
.s-canceled .dot { background:#94A3B8; }
.s-rejected { background:#FEE2E2; color:#991B1B; }
.s-rejected .dot { background:#DC2626; }
.s-aban { background:#F1F5F9; color:#64748B; }
.s-aban .dot { background:#94A3B8; }
.s-unknown { background:#F1F5F9; color:#64748B; }
.s-unknown .dot { background:#CBD5E1; }
/* 深色覆盖 —— 审计 2026-08-02 UI 批2。
上面 8 个状态 pill 全是「浅底 + 深字」写死的 hex,而本族**没有任何深色
覆盖**(隔壁 .m-pill 有,见下)。结果:深色主题下整排状态标签是浅粉/浅蓝/
浅绿的色块浮在深色表面上,与周围完全脱节。
这里只加 dark 分支、**不动浅色的任何一行**(浅色零风险);且用语义 token
而非再写死一套 hex —— token 在深色下已由 PROFESSIONAL 层定义好,配色自动
跟随主题,以后调主题不用再改这里。
特异性 (0,2,0) > 基础规则 (0,1,0),与层顺序无关,必定生效。 */
[data-theme="dark"] .s-pending { background: var(--warn-soft); color: var(--warn); }
[data-theme="dark"] .s-accepted { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .s-doing { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .s-done { background: var(--ok-soft); color: var(--ok); }
[data-theme="dark"] .s-rejected { background: var(--err-soft); color: var(--err); }
[data-theme="dark"] .s-canceled,
[data-theme="dark"] .s-aban,
[data-theme="dark"] .s-unknown { background: var(--surface-2); color: var(--muted); }
/* market pill */
.m-pill { display:inline-flex; align-items:center; gap:5px;
padding:2px 9px; border-radius:999px;
background:#F1F5F9; color:#334155;
font-size:11.5px; font-weight:600; line-height:1.7;
white-space:nowrap; }
.m-pill .flag { font-size:13px; line-height:1; }
[data-theme="dark"] .m-pill { background:#1F2937; color:#CBD5E1; }
/* user avatar */
.uavatar { display:inline-flex; align-items:center; gap:6px;
vertical-align:middle; }
.uavatar .ic {
width:22px; height:22px; border-radius:50%;
display:inline-flex; align-items:center; justify-content:center;
color:#fff; font-size:11px; font-weight:700;
flex-shrink:0; letter-spacing:0;
background-size: cover; background-position: center;
}
.uavatar .ic.has-img { color: transparent; }
.uavatar .nm { font-size:13px; color: var(--text); }
.uavatar.muted .nm { color: var(--text-2); }
/* 头像可点击 + hover「动起来」：小头像悬停轻轻放大 + 投影 */
.uavatar-link .ic { transition: transform .15s ease, box-shadow .15s ease; }
.uavatar-link:hover .ic {
transform: scale(1.18);
box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.uavatar-link:hover .nm { text-decoration: underline; }
/* 用户首页大头像：常态「呼吸」效果（缓慢缩放循环） */
.upage-avatar {
width:120px; height:120px; border-radius:60px;
background-size:cover; background-position:center;
display:inline-flex; align-items:center; justify-content:center;
color:#fff; font-size:48px; font-weight:700;
animation: avatarBreathe 3.6s ease-in-out infinite;
box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
@keyframes avatarBreathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* 隐藏旧 topbar（保留 CSS 仅作 fallback；新 layout 不再 emit .topbar） */
body.has-sidebar .topbar { display: none !important; }
/* body 让位 210px sidebar */
body.has-sidebar {
max-width: none !important;
padding: 0 0 40px 210px !important;
margin: 0 !important;
}
/* shell 通版：sidebar 旁主区撑满，不做 max-width 居中 */
body.has-sidebar .team-shell,
body.has-sidebar .admin-shell {
max-width: none;
margin: 0;
padding: 24px 28px 40px;
}
/* 通版：主区给一片纯白底（深色模式下用 surface），把粒子背景藏在 sidebar 后面 */
body.has-sidebar { background: var(--surface) !important; }
body.has-sidebar #sky-bg-canvas { display: none !important; }
body.has-sidebar .wm { display: none; }
/* 通版：拍平所有卡片 —— 取消边框 / 阴影 / 圆角 / 不透明底，只保留 padding 给气口 */
body.has-sidebar .card {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
border-radius: 0 !important;
padding: 0;
margin: 0;
}
body.has-sidebar .card::before { display: none !important; }
body.has-sidebar .card + .card {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--border-2) !important;
}
body.has-sidebar .ui-card-panel {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
box-shadow: var(--shadow-1) !important;
border-radius: 14px !important;
padding: var(--ui-card-padding, 18px 22px) !important;
margin: 0 !important;
}
body.has-sidebar .ui-card-panel.soft {
background: var(--surface-2) !important;
}
body.has-sidebar .ui-card-panel + .ui-card-panel {
margin-top: 0 !important;
padding-top: var(--ui-card-padding-top, 18px) !important;
border-top: 1px solid var(--border) !important;
}
body.has-sidebar .profile-page {
--ui-card-padding-top: 20px;
}
/* sidebar 主体 */
.sidebar {
position: fixed; top: 0; left: 0; bottom: 0; width: 210px;
z-index: 60;
background: #2563EB;
color: #fff;
display: flex; flex-direction: column;
padding: 18px 0 14px;
box-shadow: 2px 0 12px rgba(40, 30, 120, 0.18);
}
.sidebar .sb-brand {
display: flex; align-items: center; gap: 8px;
padding: 0 20px 16px;
font-family: "Orbitron", "Noto Sans SC", sans-serif;
font-size: 18px; font-weight: 700; letter-spacing: 0.02em;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar .sb-brand .logo {
width: 32px; height: 32px; border-radius: 9px;
background: rgba(255,255,255,0.16);
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.sidebar .sb-brand .name { line-height: 1.2; }
.sidebar .sb-brand .sub {
display: block; font-size: 10.5px; font-weight: 400;
color: rgba(255,255,255,0.6); font-family: "Noto Sans SC", "Inter", sans-serif;
letter-spacing: 0; margin-top: 2px;
}
.sidebar .sb-nav {
flex: 1; overflow-y: auto;
display: flex; flex-direction: column; gap: 2px;
padding: 14px 10px;
}
.sidebar .sb-nav a {
display: flex; align-items: center; gap: 11px;
padding: 9px 14px; border-radius: 10px;
color: rgba(255,255,255,0.78); font-size: 13.5px; font-weight: 500;
text-decoration: none;
transition: background .15s, color .15s;
}
.sidebar .sb-nav a:hover {
background: rgba(255,255,255,0.10);
color: #fff; text-decoration: none;
}
.sidebar .sb-nav a.active {
background: rgba(255,255,255,0.18);
color: #fff; font-weight: 600;
box-shadow: inset 3px 0 0 #fff;
}
.sidebar .sb-nav a .ic {
width: 18px; text-align: center; font-size: 14px; flex-shrink: 0;
}
.sidebar .sb-nav .sb-section {
padding: 12px 14px 4px;
font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em;
color: rgba(255,255,255,0.45); text-transform: uppercase;
}
.sidebar .sb-foot {
border-top: 1px solid rgba(255,255,255,0.12);
padding: 12px 14px 0;
display: flex; flex-direction: column; gap: 9px;
}
/* portal link (admin↔team 切换 / 工作台入口) — 比 nav 项更不抢戏 */
.sidebar .sb-portal {
display: flex; align-items: center; gap: 9px;
padding: 8px 11px; border-radius: 9px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.10);
color: rgba(255,255,255,0.85); text-decoration: none;
font-size: 12.5px; font-weight: 500;
transition: background .15s, border-color .15s;
}
.sidebar .sb-portal:hover {
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.22);
color: #fff; text-decoration: none;
}
.sidebar .sb-portal .ic { width: 16px; text-align: center; font-size: 13px; }
.sidebar .sb-user-link {
flex: 1; min-width: 0;
display: flex; align-items: center; gap: 9px;
color: inherit; text-decoration: none;
padding: 4px 6px; margin: -4px 0 -4px -6px;
border-radius: 8px; transition: background .15s;
}
.sidebar .sb-user-link:hover {
background: rgba(255,255,255,0.10);
text-decoration: none;
}
.sidebar .sb-user-link .nm {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
flex: 1; min-width: 0;
}
.sidebar .sb-user .ic.has-img {
background-size: cover; background-position: center; color: transparent;
}
.sidebar .sb-user {
display: flex; align-items: center; gap: 9px; min-height: 30px;
color: rgba(255,255,255,0.92); font-size: 12.5px;
}
.sidebar .sb-user .ic {
width: 26px; height: 26px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.18); color: #fff;
font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.sidebar .sb-user .nm {
flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar .sb-user a.logout {
color: rgba(255,255,255,0.55); font-size: 11.5px; flex-shrink: 0;
}
.sidebar .sb-user a.logout:hover { color: #fff; text-decoration: none; }
.sidebar .sb-controls {
display: flex; gap: 8px; align-items: center; justify-content: space-between;
padding-top: 4px;
}
.sidebar .sb-controls .lang {
display: inline-flex; gap: 0; padding: 2px;
border-radius: 999px; background: rgba(255,255,255,0.12);
}
.sidebar .sb-controls .lang a {
font-size: 11px; padding: 3px 11px; border-radius: 999px;
color: rgba(255,255,255,0.65); text-decoration: none; font-weight: 600;
}
.sidebar .sb-controls .lang a.on {
background: #fff; color: #2563EB;
}
.sidebar .sb-controls .help-link {
color: rgba(255,255,255,0.6); font-size: 11.5px;
}
.sidebar .sb-controls .help-link:hover { color: #fff; text-decoration: none; }
/* 侧边栏内主题切换：覆盖默认浅色按钮样式 */
.sidebar .theme-toggle {
width: 28px; height: 28px; font-size: 13px;
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.18);
color: #fff;
}
.sidebar .theme-toggle:hover {
background: rgba(255,255,255,0.20);
color: #fff; border-color: rgba(255,255,255,0.28);
box-shadow: 0 0 8px rgba(255,255,255,0.18);
}
/* 移动端：抽屉 */
.sb-toggle {
display: none;
position: fixed; top: 12px; left: 12px; z-index: 65;
width: 38px; height: 38px; border-radius: 10px;
background: var(--surface); border: 1px solid var(--border);
color: var(--text); font-size: 18px; cursor: pointer;
box-shadow: var(--shadow-1);
align-items: center; justify-content: center;
}
.sb-overlay {
display: none;
position: fixed; inset: 0; z-index: 55;
background: rgba(15, 15, 30, 0.45);
backdrop-filter: blur(2px);
}
@media (max-width: 900px) {
body.has-sidebar { padding-left: 0 !important; }
.sb-toggle {
display: inline-flex;
top: max(12px, env(safe-area-inset-top));
left: max(12px, env(safe-area-inset-left));
}
.sidebar {
transform: translateX(-100%);
transition: transform .28s cubic-bezier(.4,0,.2,1);
padding-top: max(18px, calc(env(safe-area-inset-top) + 12px));
padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 12px));
}
body.sb-open .sidebar { transform: translateX(0); }
body.sb-open .sb-overlay { display: block; }
body.has-sidebar .team-shell,
body.has-sidebar .admin-shell {
margin: calc(56px + env(safe-area-inset-top)) 0 24px;
padding: 0 max(12px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
}
@media (max-width: 640px) {
.sb-toggle {
width: 42px;
height: 42px;
border-radius: 12px;
}
.sidebar {
width: min(82vw, 286px);
box-shadow: 8px 0 28px rgba(15, 15, 30, 0.24);
}
.sidebar .sb-nav a {
min-height: 42px;
padding: 10px 14px;
}
body.has-sidebar .team-shell,
body.has-sidebar .admin-shell {
padding-left: max(10px, env(safe-area-inset-left));
padding-right: max(10px, env(safe-area-inset-right));
}
}
/* 打印：隐藏侧边栏 */
@media print {
.sidebar, .sb-toggle, .sb-overlay { display: none !important; }
body.has-sidebar { padding-left: 0 !important; }
}
/* 削层(审计 2026-08-02 UI 批1):原先这里为 body.has-sidebar 重复定义了
一整套 token(--radius 16px、--accent #2563EB 等),全部被后面的
PROFESSIONAL_UI_CSS 以同等特异性 (0,2,2) 覆盖 —— 实测生效值是
PROFESSIONAL 的 8px / oklch(52% .15 260)。整块删除,零视觉变化。 */
/* 主区底色 —— 亮色纯中性灰;暗色保持纯净近黑。 */
body.has-sidebar { background: var(--bg) !important; }
html[data-theme="dark"] body.has-sidebar {
background: #08080c !important;
background-attachment: fixed;
}
/* ===== 中性侧栏(取代整块靛蓝渐变)===== */
body.has-sidebar .sidebar {
background: var(--surface) !important;
border-right: 1px solid var(--border);
box-shadow: none;
backdrop-filter: saturate(180%) blur(16px);
-webkit-backdrop-filter: saturate(180%) blur(16px);
}
body.has-sidebar .sidebar .sb-brand {
color: var(--text);
border-bottom: 1px solid var(--border);
}
body.has-sidebar .sidebar .sb-brand .logo {
background: var(--brand-grad);
box-shadow: 0 5px 14px -3px rgba(37,99,235,.35);
}
body.has-sidebar .sidebar .sb-brand .sub { color: var(--muted); }
body.has-sidebar .sidebar .sb-nav a { color: var(--text-2); }
body.has-sidebar .sidebar .sb-nav a:hover {
background: var(--surface-2); color: var(--text);
}
body.has-sidebar .sidebar .sb-nav a.active {
background: var(--accent-soft); color: var(--accent);
box-shadow: inset 3px 0 0 var(--accent);
}
body.has-sidebar .sidebar .sb-nav .sb-section { color: var(--muted); }
body.has-sidebar .sidebar .sb-foot { border-top: 1px solid var(--border); }
/* portal:回到团队端/工作台使用中性色。 */
body.has-sidebar .sidebar .sb-portal {
background: var(--surface-2); border: 1px solid var(--border);
color: var(--text-2);
}
body.has-sidebar .sidebar .sb-portal:hover {
background: var(--accent-soft); border-color: transparent; color: var(--accent);
}
body.has-sidebar .sidebar .sb-user { color: var(--text-2); }
body.has-sidebar .sidebar .sb-user .ic { background: var(--brand-grad); color:#fff; }
body.has-sidebar .sidebar .sb-user .nm { color: var(--text); }
body.has-sidebar .sidebar .sb-user a.logout { color: var(--muted); }
body.has-sidebar .sidebar .sb-user-link:hover { background: var(--surface-2); }
body.has-sidebar .sidebar .lang { border-color: var(--border); }
body.has-sidebar .sidebar .lang a { color: var(--text-2); }
body.has-sidebar .sidebar .lang a.on { background: var(--text); color: var(--bg); }
/* ===== bento 面板:更大圆角 + 柔和阴影 ===== */
body.has-sidebar .ui-card-panel {
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-1) !important;
}
/* ===== 表格:实底 + 柔边 + 大写表头 + 行悬停 ===== */
body.has-sidebar table {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-1);
backdrop-filter: none; -webkit-backdrop-filter: none;
overflow: hidden;
}
body.has-sidebar table thead th {
background: var(--surface-2);
color: var(--muted);
font-size: 11.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
border-bottom: 1px solid var(--border);
}
body.has-sidebar table tbody td { border-top: 1px solid var(--border-2); }
body.has-sidebar table tbody tr { transition: background .18s; }
body.has-sidebar table tbody tr:hover { background: var(--surface-2); }
/* KPI 卡(任务负载 .wl-kpis .kpi):贴合 bento */
body.has-sidebar .kpi { background: var(--surface-2); }
/* ===== 统一按钮 =====
历史坑:基础 button/.btn 默认实心 accent 药丸;.btn-primary/.btn-danger
只在 .settings-page 里有样式(别处裸奔);danger 有两套(button.danger 红 /
.btn-danger 没定义→显 accent)。→ 统一几何 + 语义配色,rect 圆角贴 bento。
选择器精确到按钮语境,避开同名非按钮(.kpi.danger / .fill.danger / .row-menu .danger)。 */
body.has-sidebar .btn,
body.has-sidebar a.btn,
body.has-sidebar button.primary, body.has-sidebar a.primary,
body.has-sidebar button.secondary, body.has-sidebar a.secondary,
body.has-sidebar button.danger, body.has-sidebar a.danger,
body.has-sidebar .btn-primary, body.has-sidebar .btn-secondary,
body.has-sidebar .btn-danger {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 38px; padding: 9px 16px;
font-size: 13px; font-weight: 600; line-height: 1; font-family: inherit;
border-radius: 10px; border: 1px solid var(--border);
box-shadow: none; cursor: pointer; text-decoration: none;
transition: background .15s, border-color .15s, box-shadow .15s, filter .15s;
}
/* 默认 / 次级:中性(修 取消 之前显 accent 实心的坑) */
body.has-sidebar .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger),
body.has-sidebar a.btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger),
body.has-sidebar button.secondary, body.has-sidebar a.secondary,
body.has-sidebar .btn-secondary {
background: var(--surface); color: var(--text); border-color: var(--border);
}
body.has-sidebar .btn:not(.primary):not(.btn-primary):not(.danger):not(.btn-danger):hover,
body.has-sidebar button.secondary:hover, body.has-sidebar .btn-secondary:hover {
border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
/* 主操作 */
body.has-sidebar button.primary, body.has-sidebar a.primary,
body.has-sidebar .btn.primary, body.has-sidebar .btn-primary {
background: var(--accent); border-color: var(--accent); color: #fff;
}
body.has-sidebar button.primary:hover, body.has-sidebar a.primary:hover,
body.has-sidebar .btn.primary:hover, body.has-sidebar .btn-primary:hover {
background: var(--accent-2); border-color: var(--accent-2);
box-shadow: 0 8px 20px -6px rgba(37,99,235,.35);
}
/* 危险操作:统一成红(修 .btn-danger 之前显 accent 的坑) */
body.has-sidebar button.danger, body.has-sidebar a.danger,
body.has-sidebar .btn.danger, body.has-sidebar .btn-danger {
background: var(--err); border-color: var(--err); color: #fff;
}
body.has-sidebar button.danger:hover, body.has-sidebar a.danger:hover,
body.has-sidebar .btn.danger:hover, body.has-sidebar .btn-danger:hover {
filter: brightness(1.06); box-shadow: 0 8px 20px -6px rgba(232,97,75,.5);
}
/* 文字链按钮保持轻量(不套上面几何) */
body.has-sidebar .btn-link {
min-height: 0; padding: 6px 10px; border: 0; background: none;
box-shadow: none; border-radius: 8px; font-weight: 500; color: var(--text-2);
}
body.has-sidebar .btn-link:hover { color: var(--accent); background: var(--accent-soft); }
/* 嵌套子面板(卡片内的分区) */
.ui-subcard { border:1px solid var(--border); border-radius:var(--radius-sm);
padding:14px 16px; background:var(--surface-2); }
/* 工具栏 / 筛选栏(承载搜索框 + 下拉 + chip) */
.ui-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 14px; }
.ui-toolbar .spacer { flex:1; }
/* 药丸 chip(筛选/标签/链接统一走这个,取代各页私有 pill) */
.ui-chip { display:inline-flex; align-items:center; gap:5px;
padding:4px 11px; border-radius:999px; font-size:12.5px; font-weight:500;
background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
text-decoration:none; white-space:nowrap; cursor:pointer; transition:.15s; }
.ui-chip:hover { border-color:var(--accent); color:var(--accent); }
.ui-chip.on, .ui-chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#fff; }
.ui-chip--link { background:var(--accent-soft); border-color:transparent; color:var(--accent);
max-width:200px; overflow:hidden; text-overflow:ellipsis; }
.ui-chip--link:hover { background:var(--accent-soft); filter:brightness(.97); text-decoration:none; }
/* 分段开关(segmented) */
.ui-seg { display:inline-flex; gap:2px; padding:3px; border-radius:12px;
background:var(--surface-2); border:1px solid var(--border); }
.ui-seg-btn { border:0; background:none; cursor:pointer; font:inherit; font-size:13px; font-weight:600;
color:var(--text-2); padding:7px 14px; border-radius:8px; transition:.15s; }
.ui-seg-btn:hover { color:var(--text); }
.ui-seg-btn.on, .ui-seg-btn[aria-pressed="true"] { background:var(--surface); color:var(--text);
box-shadow:0 1px 3px rgba(0,0,0,.12); }
/* 列表(分隔线行 / 盒子行两种) */
.ui-list { list-style:none; margin:0; padding:0; }
.ui-list-row { display:flex; align-items:center; gap:12px; padding:10px 14px;
border-bottom:1px solid var(--border-2); transition:background .15s; }
.ui-list-row:last-child { border-bottom:0; }
.ui-list-row:hover { background:var(--surface-2); }
.ui-list--boxed { display:flex; flex-direction:column; gap:8px; }
.ui-list--boxed .ui-list-row { border:1px solid var(--border); border-radius:var(--radius-sm);
background:var(--surface-2); }
.ui-list--boxed .ui-list-row:hover { border-color:var(--accent); }
/* 统计 / KPI 块 */
.ui-stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.ui-stat { position:relative; overflow:hidden; border:1px solid var(--border);
border-radius:var(--radius-sm); padding:16px 18px; background:var(--surface); box-shadow:var(--shadow-1); }
.ui-stat .num { font-size:28px; font-weight:800; letter-spacing:-.02em; line-height:1.1;
color:var(--text); font-variant-numeric:tabular-nums; }
.ui-stat .lbl { font-size:12.5px; color:var(--text-2); margin-top:4px; font-weight:500; }
.ui-stat .sub { font-size:11px; color:var(--muted); margin-top:2px; }
.ui-stat--accent::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
background:var(--stat-accent, var(--accent)); border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
/* 小按钮(表格行内 / 分页 / 迷你操作,压掉全局按钮几何) */
.ui-btn-sm { display:inline-flex; align-items:center; justify-content:center; gap:4px;
min-height:0; padding:4px 9px; font-size:12px; font-weight:500; line-height:1.5;
border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text-2);
cursor:pointer; text-decoration:none; transition:.15s; }
.ui-btn-sm:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.ui-btn-sm--danger { color:var(--err); border-color:color-mix(in srgb,var(--err) 40%,transparent); background:var(--surface); }
.ui-btn-sm--danger:hover { background:var(--err-soft); border-color:var(--err); color:var(--err); }
/* 空状态 */
.ui-empty { padding:40px 20px; text-align:center; color:var(--text-2); font-size:13.5px; }
/* 掉落上传区 */
.ui-dropzone { border:2px dashed var(--border); border-radius:var(--radius-sm);
padding:40px 20px; text-align:center; color:var(--text-2); transition:.15s; }
.ui-dropzone:hover, .ui-dropzone.dragover { border-color:var(--accent); background:var(--accent-soft); }
/* 统一弹窗:遮罩 + 卡片 + 头/身/脚 */
.ui-modal { position:fixed; inset:0; z-index:1000; display:none;
background:rgba(15,20,40,.55); backdrop-filter:blur(3px);
align-items:center; justify-content:center; padding:24px; }
.ui-modal.open { display:flex; }
.ui-modal-card { background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius-lg); box-shadow:var(--shadow-3); overflow:hidden;
max-width:640px; width:100%; max-height:88vh; display:flex; flex-direction:column; }
.ui-modal-head { padding:14px 18px; border-bottom:1px solid var(--border);
display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:700; }
.ui-modal-body { padding:18px 22px; overflow:auto; }
.ui-modal-foot { padding:12px 18px; border-top:1px solid var(--border);
display:flex; gap:10px; justify-content:flex-end; }
:root,
html[data-theme="light"],
html[data-theme="light"] body.has-sidebar {
color-scheme: light;
--bg: oklch(97% 0.012 88);
--surface: oklch(99% 0.008 88);
--surface-2: oklch(95.5% 0.012 88);
--surface-solid: oklch(99% 0.008 88);
--border: oklch(87% 0.018 88);
--border-2: oklch(92% 0.014 88);
--text: oklch(21% 0.024 255);
--text-2: oklch(39% 0.025 255);
--muted: oklch(55% 0.024 255);
--accent: oklch(48% 0.16 256);
--accent-2: oklch(43% 0.155 256);
--accent-soft: oklch(92% 0.045 256);
--creative: oklch(59% 0.19 42);
--creative-soft: oklch(94% 0.052 48);
--brand-grad: var(--accent);
--ok: oklch(51% 0.13 154);
--ok-soft: oklch(95% 0.035 155);
--warn: oklch(58% 0.13 78);
--warn-soft: oklch(96% 0.04 85);
--err: oklch(51% 0.17 28);
--err-soft: oklch(95.5% 0.035 28);
--info: var(--accent);
--info-soft: var(--accent-soft);
--topbar-bg: var(--surface);
--shadow-1: none;
--shadow-2: 0 8px 24px rgb(15 23 42 / 10%);
--shadow-3: 0 20px 48px rgb(15 23 42 / 16%);
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
/* 别名 —— 审计 2026-08-02 UI 批0。
`--text-1`(21 处,materials/scripts)与 `--surface-hover`(5 处,materials)
全仓从未定义过、又没写 fallback,浏览器直接丢弃整条声明:文字颜色和
hover 底色**静默失效**,深浅色都受影响。
定义成别名而不是去改 26 处用法:改动最小、可回退,而且因为 var() 是
使用时求值,别名会自动跟随 data-theme="dark" 下 --text/--surface-2 的
覆盖值,不需要在深色块里再写一遍。
后续把这 26 处用法并到标准 token 后,这两行即可删除。 */
--text-1: var(--text);
--surface-hover: var(--surface-2);
}
html[data-theme="dark"],
html[data-theme="dark"] body.has-sidebar {
color-scheme: dark;
--bg: oklch(18% 0.012 255);
--surface: oklch(22% 0.014 255);
--surface-2: oklch(25.5% 0.014 255);
--surface-solid: oklch(22% 0.014 255);
--border: oklch(34% 0.014 255);
--border-2: oklch(29% 0.012 255);
--text: oklch(94% 0.008 255);
--text-2: oklch(75% 0.012 255);
--muted: oklch(65% 0.012 255);
--accent: oklch(70% 0.13 260);
--accent-2: oklch(76% 0.11 260);
--accent-soft: oklch(31% 0.045 260);
--creative: oklch(72% 0.16 48);
--creative-soft: oklch(30% 0.06 42);
--brand-grad: var(--accent);
--ok: oklch(72% 0.12 155);
--ok-soft: oklch(29% 0.045 155);
--warn: oklch(78% 0.11 80);
--warn-soft: oklch(31% 0.05 80);
--err: oklch(72% 0.15 28);
--err-soft: oklch(30% 0.055 28);
--info: var(--accent);
--info-soft: var(--accent-soft);
--topbar-bg: var(--surface);
--shadow-1: none;
--shadow-2: 0 10px 28px rgb(0 0 0 / 28%);
--shadow-3: 0 24px 54px rgb(0 0 0 / 42%);
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
}
html,
html[data-theme="light"],
html[data-theme="dark"] {
background: var(--bg);
background-image: none;
}
body,
body.has-sidebar,
html[data-theme="dark"] body.has-sidebar {
background: var(--bg) !important;
background-image: none !important;
color: var(--text);
font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
font-feature-settings: "tnum" 1;
}
#sky-bg-canvas { display: none !important; }
* { scrollbar-color: var(--border) transparent; }
::selection { background: var(--accent-soft); color: var(--text); }
h1, h2, h3, h4, h5, h6,
.topbar h1,
.sidebar .sb-brand {
font-family: inherit;
color: var(--text);
background: none;
-webkit-background-clip: initial;
background-clip: initial;
letter-spacing: -0.015em;
}
h1 { font-size: 20px; font-weight: 650; }
h2 { font-size: 16px; font-weight: 650; }
h3 { font-size: 14px; font-weight: 650; }
.muted, .page-sub, .field-hint { color: var(--muted); }
a { color: var(--accent); }
/* Named page widths keep layout intent explicit across product and public shells. */
.page { width: 100%; min-width: 0; margin-inline: auto; }
.page--wide { max-width: 1360px; }
.page--standard { max-width: 1140px; }
.page--narrow { max-width: 640px; }
/* Task description is explicit, independent of unrelated inline styles. */
.task-description {
white-space: pre-wrap;
padding: 10px 14px;
border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--border));
border-radius: var(--radius);
background: var(--accent-soft);
color: var(--text);
font-size: 13.5px;
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.theme-toggle,
.topbar .lang,
button.secondary,
.btn.secondary,
.mode label,
.chip,
.insnav a,
.chart,
.chart-head .seg,
.sm-cell,
.kcard,
.kpi-card,
.stat-card,
body.has-sidebar .sidebar {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.has-sidebar { padding-left: 224px !important; }
body.has-sidebar .team-shell,
body.has-sidebar .admin-shell {
width: 100%;
padding: 24px clamp(18px, 2.4vw, 32px) 40px;
max-width: 1360px;
min-width: 0;
}
body.has-sidebar .ui-page-stack,
body.has-sidebar .report-page,
body.has-sidebar .report-card,
body.has-sidebar .row { min-width: 0; max-width: 100%; }
body.has-sidebar .team-shell > :first-child,
body.has-sidebar .admin-shell > :first-child { margin-top: 0; }
body.has-sidebar .sidebar {
width: 224px;
padding: 16px 0 12px;
background: color-mix(in oklch, var(--surface) 88%, var(--bg)) !important;
border-right: 1px solid var(--border);
box-shadow: none;
}
body.has-sidebar .sidebar .sb-brand {
min-height: 48px;
padding: 0 18px 14px;
border-bottom: 1px solid var(--border);
font-size: 16px;
font-weight: 720;
}
body.has-sidebar .sidebar .sb-brand .logo {
width: 30px;
height: 30px;
border-radius: 7px;
background: var(--text);
color: white;
box-shadow: none;
font-size: 11px;
letter-spacing: -.02em;
}
body.has-sidebar .sidebar .sb-brand .sub {
color: var(--muted);
font-family: inherit;
font-size: 10px;
}
body.has-sidebar .sidebar .sb-nav {
gap: 2px;
padding: 12px 10px;
}
body.has-sidebar .sidebar .sb-nav a {
min-height: 36px;
gap: 8px;
padding: 8px 10px;
border-radius: 6px;
color: var(--text-2);
font-size: 13px;
font-weight: 500;
}
body.has-sidebar .sidebar .sb-nav a .ic:empty { display: none; }
body.has-sidebar .sidebar .sb-nav a:hover {
background: var(--surface-2);
color: var(--text);
}
body.has-sidebar .sidebar .sb-nav a.active {
background: var(--accent-soft);
color: var(--accent);
box-shadow: none;
font-weight: 600;
}
.nav-count {
min-width: 20px;
margin-left: auto;
padding: 1px 6px;
border-radius: 5px;
background: var(--err-soft);
color: var(--err);
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
}
.badge-role {
padding: 2px 5px;
border: 1px solid var(--border);
border-radius: 4px;
background: var(--surface-2);
color: var(--text-2);
font-size: 9px;
font-weight: 600;
}
body.has-sidebar .sidebar .sb-nav .sb-section {
padding: 14px 10px 5px;
color: var(--muted);
font-size: 10px;
letter-spacing: .06em;
}
body.has-sidebar .sidebar .sb-foot {
gap: 8px;
padding: 11px 12px 0;
border-color: var(--border);
}
body.has-sidebar .sidebar .sb-portal {
min-height: 34px;
padding: 7px 9px;
border-radius: 6px;
border-color: var(--border) !important;
background: transparent !important;
color: var(--text-2) !important;
box-shadow: none !important;
}
body.has-sidebar .sidebar .sb-portal:hover {
background: var(--surface-2) !important;
color: var(--text) !important;
}
body.has-sidebar .sidebar .sb-user .ic {
background: var(--accent);
box-shadow: none;
}
body.has-sidebar .sidebar .sb-user a.logout,
body.has-sidebar .sidebar .help-link { color: var(--muted); }
body.has-sidebar .sidebar .lang {
border: 1px solid var(--border);
border-radius: 6px;
background: transparent;
}
body.has-sidebar .sidebar .lang a {
border-radius: 4px;
padding: 3px 9px;
}
body.has-sidebar .sidebar .lang a.on {
background: var(--surface-2);
color: var(--text);
}
.sidebar .theme-toggle,
.theme-toggle {
width: 30px;
height: 30px;
padding: 0;
border: 1px solid var(--border);
border-radius: 6px;
background: transparent;
color: var(--text-2);
box-shadow: none;
}
.sidebar .theme-toggle:hover,
.theme-toggle:hover {
transform: none;
border-color: var(--border);
background: var(--surface-2);
color: var(--text);
box-shadow: none;
}
body.has-sidebar .card,
body.has-sidebar .ui-card-panel,
.ui-subcard,
.ui-stat,
.chart-box,
.kcard,
.kpi-card,
.stat-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.has-sidebar .card {
padding: 16px 18px;
margin-top: 0;
}
body.has-sidebar .card + .card {
margin-top: 0;
}
body.has-sidebar .ui-card-panel {
padding: var(--ui-card-padding, 16px 18px) !important;
}
body.has-sidebar .ui-card-panel.soft,
.ui-subcard { background: var(--surface-2) !important; }
.ui-stat--accent::before { display: none; }
label {
margin: 0 0 6px;
color: var(--text-2);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
}
input[type=text], input[type=number], input[type=url], input[type=date],
input[type=password], input[type=email], input[type=search], input[type=time],
select, textarea {
min-height: 36px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
font: inherit;
box-shadow: none;
}
input[type=text], input[type=number], input[type=url], input[type=date],
input[type=password], input[type=email], input[type=search], input[type=time],
select {
box-sizing: border-box;
height: 36px;
}
textarea { min-height: 88px; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
.field-hint, label small, .form-help {
display: block;
margin-top: 5px;
color: var(--muted);
font-size: 11.5px;
line-height: 1.45;
}
.form-grid { gap: 16px 18px; }
.form-actions {
margin-top: 4px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
button, .btn,
body.has-sidebar .btn,
body.has-sidebar a.btn,
body.has-sidebar button.primary,
body.has-sidebar a.primary,
body.has-sidebar button.secondary,
body.has-sidebar a.secondary,
body.has-sidebar button.danger,
body.has-sidebar a.danger,
body.has-sidebar .btn-primary,
body.has-sidebar .btn-secondary,
body.has-sidebar .btn-danger {
min-height: 36px;
padding: 8px 13px;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
line-height: 1;
box-shadow: none;
transform: none;
transition: background-color .14s, border-color .14s, color .14s;
}
button:hover, .btn:hover,
body.has-sidebar button.primary:hover,
body.has-sidebar a.primary:hover,
body.has-sidebar .btn.primary:hover,
body.has-sidebar .btn-primary:hover,
body.has-sidebar button.danger:hover,
body.has-sidebar a.danger:hover,
body.has-sidebar .btn.danger:hover,
body.has-sidebar .btn-danger:hover {
transform: none;
filter: none;
box-shadow: none;
}
button.primary, .btn.primary,
body.has-sidebar button.primary,
body.has-sidebar a.primary,
body.has-sidebar .btn.primary,
body.has-sidebar .btn-primary {
background: var(--accent);
border-color: var(--accent);
color: white;
}
button.primary:hover, .btn.primary:hover,
body.has-sidebar button.primary:hover,
body.has-sidebar a.primary:hover,
body.has-sidebar .btn.primary:hover,
body.has-sidebar .btn-primary:hover {
background: var(--accent-2);
border-color: var(--accent-2);
}
.btn.compact, button.compact, .ui-btn-sm {
min-height: 30px;
padding: 6px 9px;
border-radius: 6px;
}
button:disabled, .btn:disabled, [aria-disabled="true"] {
cursor: not-allowed;
opacity: .55;
}
.chip, .pill, .badge, .status, .ui-chip {
border-radius: 5px;
box-shadow: none;
}
body.has-sidebar table {
width: 100%;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: none;
overflow: visible;
}
body.has-sidebar table thead th {
padding: 10px 12px;
background: var(--surface-2);
color: var(--text-2);
font-size: 11.5px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
body.has-sidebar table tbody td { padding: 11px 12px; }
body.has-sidebar table tbody tr { transition: background-color .12s; }
body.has-sidebar table tbody tr:hover { background: var(--surface-2); }
.ui-table-wrap { overflow-x: auto; border-radius: var(--radius); }
.modal-backdrop, .ui-modal {
background: rgb(15 23 42 / 48%);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.modal-shell, .ui-modal-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-3);
}
.modal-shell:focus-visible,
.ui-modal-card:focus-visible,
.sc-modal-card:focus-visible,
#scLinkModal:focus-visible { outline: none; }
.modal-shell::before { display: none; }
.modal-close {
width: 30px;
height: 30px;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--muted);
font-size: 20px;
box-shadow: none;
}
.modal-close:hover {
transform: none;
border-color: var(--border);
background: var(--surface-2);
color: var(--text);
}
.ui-modal-head, .ui-modal-foot { border-color: var(--border); }
.ui-modal-head { padding: 15px 18px; }
.ui-modal-body { padding: 18px; }
.ui-modal-foot { padding: 12px 18px; }
.ui-empty {
padding: 32px 20px;
color: var(--muted);
}
.ui-dropzone {
border-width: 1px;
border-radius: var(--radius);
background: var(--surface-2);
}
.ui-dropzone:hover, .ui-dropzone.dragover {
background: var(--accent-soft);
}
.dash-kpi,
.newtask-kpi-card {
border-radius: var(--radius) !important;
box-shadow: none !important;
}
.dash-kpi::before { display: none !important; }
.dash-trend .bar { background: var(--accent) !important; }
/* Authenticated product density: one rhythm for dashboards, forms and tables. */
body.has-sidebar .ui-page-stack {
gap: 12px;
--ui-page-gap: 12px;
--ui-page-gap-sm: 12px;
--ui-card-padding: 16px 18px;
--ui-card-padding-sm: 16px;
--ui-title-size: 16px;
}
body.has-sidebar .ui-page-stack > * {
margin-top: 0;
}
body.has-sidebar .ui-page-stack > .ui-card-panel:first-child > .ui-title:first-child,
body.has-sidebar .ui-page-stack > .card:first-child > .ui-title:first-child,
body.has-sidebar .team-shell.ui-page-stack > .ui-card-panel:first-child > .ui-title:first-child,
body.has-sidebar .team-shell.ui-page-stack > .card:first-child > .ui-title:first-child {
font-size: 20px;
}
/* Daily report follows the same page grid as its supporting sections. */
body.has-sidebar .report-page {
width: 100%;
max-width: none;
margin-inline: 0;
}
body.has-sidebar .report-card {
padding: 18px 20px !important;
}
.report-heading {
display: flex;
align-items: center;
min-height: 28px;
}
.report-title { margin: 0; font-size: 20px; }
.report-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 12px 0 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.report-date-switch,
.report-date-form,
.report-mode-switch,
.report-upload,
.report-actions {
display: flex;
align-items: center;
}
.report-date-switch { gap: 6px; flex-wrap: wrap; }
.report-date-form { gap: 6px; margin-left: 2px; }
.report-date-form input[type=date] {
width: 142px;
min-height: 32px;
padding: 5px 8px;
font-size: 12px;
}
.report-date-switch > .chip {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 5px 10px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-2);
font-size: 12px;
font-weight: 500;
text-decoration: none;
}
.report-date-switch > .chip:hover { background: var(--surface-2); }
.report-date-switch > .chip.active {
border-color: var(--accent);
background: var(--accent);
color: #fff;
}
.report-form-error { margin-bottom: 10px; }
.report-manual-input { margin-top: 6px; }
.report-check-option {
display: inline-flex;
align-items: center;
gap: 5px;
margin: 0;
color: var(--text-2);
font-size: 12px;
font-weight: 400;
white-space: nowrap;
cursor: pointer;
}
.report-check-option.is-all {
color: var(--text);
font-weight: 600;
}
.report-field-status { min-height: 18px; margin-top: 3px; font-size: 12px; }
.report-field-hint { margin: 4px 0 0; font-size: 12px; }
.report-metric.ok { color: var(--ok); }
.report-metric.warn { color: var(--warn); }
.report-metric.err { color: var(--err); }
.report-metric.info { color: var(--info); }
.report-row-actions { justify-content: flex-end; gap: 6px; }
.report-more-button { padding: 0 8px; font-size: 18px; line-height: 1; }
.report-row-menu { right: 0; left: auto; }
.report-table-title { margin: 18px 0 6px; }
.report-summary-card { margin-bottom: 10px !important; }
.report-summary-title { margin: 0 0 8px; }
.report-summary-metrics {
display: flex;
align-items: baseline;
gap: 18px;
flex-wrap: wrap;
}
.report-summary-detail { margin-top: 6px; }
.report-mode-switch {
flex: 0 0 auto;
gap: 2px;
padding: 2px;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--surface-2);
}
.report-mode-switch-edit { width: max-content; margin: 0 0 14px; }
.report-mode-option {
position: relative;
display: inline-flex;
align-items: center;
min-height: 28px;
margin: 0;
padding: 4px 10px;
border-radius: 5px;
color: var(--text-2);
font-size: 12px;
font-weight: 500;
line-height: 1;
cursor: pointer;
}
.report-mode-option input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.report-mode-option:has(input:checked) {
background: var(--surface);
color: var(--accent);
box-shadow: 0 1px 2px rgb(15 23 42 / 8%);
}
.report-mode-option:has(input:focus-visible) {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.report-mode-option:has(input:disabled) {
cursor: not-allowed;
opacity: .5;
}
.report-task-grid,
.report-free-grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 12px;
align-items: start;
}
.report-field { min-width: 0; }
.report-field > label,
.report-optimizer > legend { display: block; }
.report-task-name { grid-column: span 5; }
.report-task-material { grid-column: span 4; }
.report-task-progress { grid-column: span 3; }
.report-market { grid-column: span 3; }
.report-project { grid-column: span 3; }
.report-material { grid-column: span 4; }
.report-type { grid-column: span 2; }
.report-quantity { grid-column: span 2; }
.report-progress { grid-column: span 3; }
.report-optimizer {
min-width: 0;
margin: 12px 0 0;
padding: 0;
border: 0;
}
.report-optimizer > legend {
width: 100%;
margin: 0 0 6px;
padding: 0;
}
.report-check-grid {
display: flex;
flex-wrap: wrap;
gap: 6px 16px;
min-height: 36px;
padding: 7px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
}
.report-check-grid label { margin: 0 !important; font-size: 12px; }
.report-check-grid input[type=checkbox] { accent-color: var(--accent); }
.report-locked { margin-top: 8px; font-size: 12px; }
.report-link-field { margin-top: 12px; }
.report-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid var(--border);
}
.report-upload { gap: 10px; min-width: 0; }
.report-warning { color: var(--err); font-size: 12px; }
.report-actions { gap: 12px; margin: 0; }
.report-view-link,
.report-cancel { font-size: 12.5px; white-space: nowrap; }
/* Dashboard: a warm operations desk, not a marketing hero. */
.dashboard-page { gap: 16px !important; }
body.has-sidebar .dashboard-hero {
padding: 4px 2px 0 !important;
border: 0 !important;
background: transparent !important;
}
.dashboard-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
.dashboard-heading-copy { min-width: 0; }
.dashboard-eyebrow {
margin: 0 0 4px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
letter-spacing: .035em;
}
.dashboard-heading h1 { margin: 0; font-size: 28px; line-height: 1.2; }
.dashboard-greeting { margin: 6px 0 0; color: var(--text-2); font-size: 13px; }
.dashboard-heading-actions {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 12px;
margin-right: 84px;
}
.dashboard-heading-actions .btn { text-decoration: none; white-space: nowrap; }
.dashboard-page .dash-kpis {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
margin-top: 20px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
}
.dashboard-page .dash-kpi {
min-width: 0;
padding: 14px 18px 15px;
border: 0 !important;
border-right: 1px solid var(--border) !important;
border-radius: 0 !important;
background: transparent !important;
}
.dashboard-page .dash-kpi:last-child { border-right: 0 !important; }
.dashboard-page .dash-kpi .kpi-lbl {
margin: 0 0 4px;
color: var(--text-2);
font-size: 12px;
}
.dashboard-page .dash-kpi .kpi-num {
color: var(--kpi-accent, var(--text));
font-size: 28px;
font-weight: 730;
line-height: 1.05;
}
.dashboard-page .dash-kpi .kpi-sub { margin-top: 4px; }
.dashboard-page .dash-grid {
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
gap: 16px;
}
.dashboard-page .dash-col { min-width: 0; gap: 16px; }
body.has-sidebar .dashboard-card,
body.has-sidebar .active-projects-panel {
border-color: color-mix(in oklch, var(--border) 88%, var(--text)) !important;
border-radius: var(--radius-lg) !important;
}
.dashboard-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.dashboard-card-head .dashboard-card-title { margin: 0; }
.dashboard-card-link { color: var(--text-2); text-decoration: none; }
.dashboard-card-link:hover { color: var(--accent); }
.dashboard-table-wrap { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; }
.dashboard-card { min-width: 0; }
.dashboard-table { border: 0 !important; border-radius: 0 !important; }
.dashboard-table thead th { border-top: 1px solid var(--border); }
.dashboard-table th:first-child,
.dashboard-table td:first-child { padding-left: 0; }
.dashboard-table th:last-child,
.dashboard-table td:last-child { padding-right: 0; }
.dashboard-page .dash-trend .trend-bars { height: 92px; }
.dashboard-page .dash-feed li { border-bottom-style: solid; }
/* Requirement center summary and filters follow the same compact hierarchy. */
.newtask-page .newtask-kpi-card { margin: 0 !important; padding: 14px 16px !important; }
.newtask-page .newtask-list-card h3,
.newtask-page .workload-section-title { font-size: 16px; }
.workbench-head {
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.workbench-head h1 { margin: 0; font-size: 20px; }
.workbench-range { font-size: 12px; }
.workbench-action { margin-left: auto; }
.workbench-new-task { text-decoration: none; white-space: nowrap; }
.workbench-summary {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin-top: 8px;
color: var(--text-2);
font-size: 13px;
}
.workbench-metric {
color: var(--text);
font-size: 16px;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.workbench-links { margin-top: 7px; font-size: 12px; }
/* Page-specific structure belongs to the shared layer so local templates cannot
silently create a second control scale or theme palette. */
.spend-page .spend-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.spend-page .spend-scroll table { min-width: 1400px; }
.spend-page .spend-scroll td,
.spend-page .spend-scroll th { white-space: nowrap; }
.spend-page .spend-scroll td.mat-col { max-width: 280px; white-space: normal; }
.spend-page .spend-grp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 12px;
margin-top: 14px;
}
.spend-page .spend-grp-head {
margin-bottom: 8px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
letter-spacing: .03em;
}
.spend-page .ui-subcard .mrow { margin: 3px 0; }
.spend-page .spend-time-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.spend-page .spend-time-scroll > svg { display: block; }
.spend-page .spend-charts-row > .ui-subcard { min-width: 0; }
.spend-date-chips { align-items: center; margin: 6px 0 12px; }
.spend-date-form { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; }
.spend-date-form input[type=date] { width: 144px; }
.spend-date-form .chip { cursor: pointer; white-space: nowrap; }
.memo-tbl { width: 100%; border-collapse: collapse; }
.memo-tbl th,
.memo-tbl td { border-bottom: 1px solid var(--border); vertical-align: top; }
.memo-cd {
color: var(--ok);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
}
.memo-cd.over { color: var(--err); }
.profile-rangebar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 12px 0 4px;
font-size: 12px;
}
.profile-rangebar .chips {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
margin: 0;
}
.profile-range-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.profile-range-form input[type=date] { width: 136px; }
.profile-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.profile-summary-copy { flex: 1 1 280px; min-width: 0; }
.profile-summary-copy h2 { margin: 0 0 3px; }
.profile-summary-handle { margin-bottom: 8px; font-size: 12px; }
.profile-summary-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-summary-kpis {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
margin-top: 12px;
color: var(--text-2);
font-size: 12px;
}
.profile-summary-value {
color: var(--text);
font-size: 16px;
font-weight: 650;
font-variant-numeric: tabular-nums;
}
.profile-summary-window { margin-top: 5px; font-size: 11px; }
.profile-avatar-frame {
width: 120px;
height: 120px;
margin-bottom: 8px;
overflow: hidden;
border: 1px solid var(--border);
border-radius: 50%;
}
.profile-avatar-preview { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.profile-tg-sync { padding: 6px 12px; font-size: 12px; }
.report-upload-path {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
word-break: break-all;
}
.report-upload-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.report-upload-browser {
max-height: 240px;
margin-top: 10px;
padding: 10px;
overflow: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
font-size: 13px;
}
.report-upload-crumbs { margin-bottom: 8px; color: var(--muted); font-size: 12px; }
.report-upload-create { display: flex; gap: 6px; margin-top: 10px; }
.report-upload-create input { flex: 1; min-width: 0; }
.report-upload-dropzone { margin-top: 14px; padding: 18px; }
.report-upload-file { font-size: 13px; }
.report-upload-hint { margin-top: 6px; font-size: 12px; }
.report-upload-picked { margin-top: 4px; font-size: 12px; }
.report-upload-status { margin-top: 8px; font-size: 12px; }
.report-upload-pick-row { margin-bottom: 6px; }
.report-upload-pick { cursor: pointer; font-size: 12px; }
.report-upload-empty { font-size: 12px; }
.report-upload-browser a { text-decoration: none; }
.report-upload-browser-list.report-upload-error { color: var(--err); }
.users-xmp-form,
.users-team-rename-form,
.users-xmp-bind-form { display: flex; align-items: center; gap: 6px; margin: 0; }
.users-xmp-form { display: inline-flex; gap: 4px; }
.users-xmp-input { width: 74px; min-height: 32px; height: 32px; font-size: 12px; }
.users-compact-button { min-height: 32px; height: 32px; padding: 0 9px; font-size: 12px; }
.users-team-rename-form { gap: 8px; }
.users-team-rename-name { flex: 1; min-width: 0; }
.users-team-rename-input { width: 140px; }
.users-xmp-bind-select { flex: 1; min-width: 0; }
@media (max-width: 1200px) {
.spend-page .spend-charts-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.spend-page .spend-charts-row { grid-template-columns: 1fr; }
.profile-range-form { width: 100%; flex-wrap: wrap; }
}
@media (max-width: 1100px) {
.dashboard-page .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.dashboard-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
.dashboard-heading h1 { font-size: 24px; }
.dashboard-heading-actions { width: 100%; justify-content: space-between; }
.dashboard-heading-actions { margin-right: 0; }
.dashboard-heading-actions .btn { min-height: 40px; }
.dashboard-page .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-page .dash-kpi:nth-child(2) { border-right: 0 !important; }
.dashboard-page .dash-kpi:nth-child(-n+2) { border-bottom: 1px solid var(--border) !important; }
.active-project-list { grid-template-columns: 1fr; }
.active-project-row:nth-child(odd) { border-right: 0; }
.active-project-featured > .active-project-surface {
align-items: flex-start;
padding: 14px;
}
.active-project-name { font-size: 18px; }
.active-projects-head { padding: 15px 16px 12px; }
.project-launch { flex-wrap: wrap; row-gap: 4px; }
.active-project-actions { gap: 6px; }
.project-annotation-dialog { align-items: end; padding: 12px; }
.project-annotation-modal { max-height: calc(100vh - 24px); }
.project-annotation-header { padding: 16px 16px 12px; }
.project-annotation-compare { grid-template-columns: 1fr; padding: 12px 16px 0; }
.project-annotation-content { min-height: 112px; padding: 14px; }
.project-annotation-status { margin: 8px 16px 14px; }
}
@media (max-width: 820px) {
.report-toolbar,
.report-footer { align-items: stretch; flex-direction: column; }
.report-mode-switch { width: max-content; }
.report-actions { align-self: flex-end; }
.report-task-name,
.report-task-material,
.report-task-progress,
.report-market,
.report-project,
.report-material,
.report-type,
.report-quantity,
.report-progress { grid-column: span 6; }
}
.sb-toggle {
border-radius: 6px;
background: var(--surface);
box-shadow: var(--shadow-2);
}
.sb-overlay { background: rgb(15 23 42 / 44%); backdrop-filter: none; }
@media (max-width: 900px) {
body.has-sidebar { padding-left: 0 !important; }
body.has-sidebar.sb-open { overflow: hidden; }
body.has-sidebar .team-shell,
body.has-sidebar .admin-shell {
margin-top: calc(58px + env(safe-area-inset-top));
padding: 0 max(14px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
body.has-sidebar .sidebar { width: min(84vw, 280px); }
}
@media (max-width: 640px) {
h1 { font-size: 19px; }
body.has-sidebar .card,
body.has-sidebar .ui-card-panel { padding: 16px !important; }
body.has-sidebar .dashboard-hero { padding: 2px 0 0 !important; }
.dashboard-page { gap: 14px !important; }
.dashboard-heading-actions .btn { flex: 1; justify-content: center; }
.dashboard-page .dash-kpi { padding: 13px 14px 14px !important; }
.dashboard-page .dash-kpi .kpi-num { font-size: 25px; }
.dashboard-table { min-width: 620px; }
.form-grid, .form-row, .cols-2, .cols-3 { grid-template-columns: 1fr !important; }
.form-actions { align-items: stretch; }
.form-actions button, .form-actions .btn { width: 100%; justify-content: center; }
.modal-backdrop, .ui-modal { padding: 12px; align-items: flex-end; }
.modal-shell, .ui-modal-card { width: 100%; max-height: 92dvh; border-radius: 12px 12px 8px 8px; }
body.has-sidebar .report-card { padding: 16px !important; }
.report-date-switch { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.report-date-switch > .chip { justify-content: center; }
.report-date-form { grid-column: 1 / -1; margin: 0; }
.report-date-form input[type=date] { width: 100%; }
.report-mode-switch { width: 100%; }
.report-mode-option { flex: 1; justify-content: center; }
.report-task-name,
.report-task-material,
.report-task-progress,
.report-market,
.report-project,
.report-material,
.report-type,
.report-quantity,
.report-progress { grid-column: 1 / -1; }
.report-upload { align-items: flex-start; flex-direction: column; }
.report-actions { width: 100%; align-self: stretch; justify-content: flex-end; flex-wrap: wrap; }
.spend-page .spend-scroll { overflow: visible; }
.spend-page .spend-scroll table.card-m { min-width: 0; }
.spend-page .spend-scroll table.card-m td { white-space: normal; }
/* 移动端裁切修复(审计 P1-20):未包在 .ui-table-wrap 里的裸表格在窄屏会把
右侧列顶出视口,而 body.has-sidebar 又 overflow-x:hidden → 右侧列不可达。
让裸表格自身成为横向滚动容器(.card-m 卡片化表格除外),页面不再横向溢出。 */
body.has-sidebar table:not(.card-m) {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior: auto !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}
/* WCAG 2.2 AA 修复:深色主题下用于「链接/焦点环/文字」的亮 --accent
(oklch 70%)填到实心按钮上配白字只有 2.7:1(需 4.5:1)。这里只把深色
主题的实心「主操作 / 危险操作」按钮底色压深到达标,不动 --accent 本身
(链接/焦点环仍用亮色,在深底上对比度本就很高)。浅色主题不受影响。 */
html[data-theme="dark"] button.primary,
html[data-theme="dark"] a.primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] body.has-sidebar button.primary,
html[data-theme="dark"] body.has-sidebar a.primary,
html[data-theme="dark"] body.has-sidebar .btn.primary,
html[data-theme="dark"] body.has-sidebar .btn-primary {
background: oklch(54% 0.16 260);
border-color: oklch(54% 0.16 260);
color: #fff;
}
html[data-theme="dark"] button.primary:hover,
html[data-theme="dark"] a.primary:hover,
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] body.has-sidebar button.primary:hover,
html[data-theme="dark"] body.has-sidebar a.primary:hover,
html[data-theme="dark"] body.has-sidebar .btn.primary:hover,
html[data-theme="dark"] body.has-sidebar .btn-primary:hover {
background: oklch(48% 0.16 260);
border-color: oklch(48% 0.16 260);
}
html[data-theme="dark"] button.danger,
html[data-theme="dark"] a.danger,
html[data-theme="dark"] .btn.danger,
html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] body.has-sidebar button.danger,
html[data-theme="dark"] body.has-sidebar a.danger,
html[data-theme="dark"] body.has-sidebar .btn.danger,
html[data-theme="dark"] body.has-sidebar .btn-danger {
background: oklch(55% 0.19 28);
border-color: oklch(55% 0.19 28);
color: #fff;
}
/* 🔴 回归修复(2026-07-23):.ui-table-wrap 的 overflow-x:auto(以及窄屏裸表格
的 overflow-x:auto)会连带把 overflow-y 变成 auto,从而**裁掉绝对定位的行内
⋯ 下拉菜单 .row-menu**——菜单打开却看不见,导致「账号共享等列表页添加后无法
编辑/删除」(短表格/末行尤其明显)。菜单打开时(:has(.row-menu.open))临时
解除该容器裁剪,让下拉溢出显示;闭合后恢复横向滚动。 */
.ui-table-wrap:has(.row-menu.open) { overflow: visible; }
body.has-sidebar table:not(.card-m):has(.row-menu.open) { overflow: visible; }