:root {
/* 对齐 wuxinyang.cn：纯白底 + 中性灰 + 蓝色强调 + 12px 圆角 + 极轻阴影 */
--bg: #ffffff;
--canvas: #f2f3f5; /* 页面画布：侧栏+顶栏连成一片的灰色底，内容卡片浮在其上（对齐腾讯文档企业版） */
--surface: #ffffff;
--surface-2: #fafafa;
--surface-3: #f4f5f7;
--border: #e5e7eb;
--border-strong: #d1d5db;
--text: #0a0a0a;
--text-2: #374151;
--text-3: #6b7280;
--accent: #3C83F6;
--accent-hover: #2E6BE0;
--accent-soft: #EDF4FE;
--shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 3px rgba(0,0,0,.04);
--shadow-m: 0 4px 10px rgba(0,0,0,.04), 0 2px 4px rgba(0,0,0,.03);
--shadow-lg: 0 10px 24px rgba(0,0,0,.05), 0 4px 6px rgba(0,0,0,.03);
--radius: 12px;
--radius-sm: 8px;
--radius-l: 16px;
/* 全站公告条高度让位（2026-10-23）：body.has-notice 时为 44px，否则 0 */
--notice-h: 0px;
}
[data-theme="dark"] {
--bg: #0a0a0a;
--canvas: #0d0d0d;
--surface: #171717;
--surface-2: #1f1f1f;
--surface-3: #262626;
--border: #2a2a2a;
--border-strong: #3a3a3a;
--text: #fafafa;
--text-2: #d4d4d4;
--text-3: #9ca3af;
--accent: #3C83F6;
--accent-hover: #3C83F6;
--accent-soft: #15233b;
--shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.4);
--shadow-m: 0 4px 10px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3);
--shadow-lg: 0 10px 24px rgba(0,0,0,.6);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
background: var(--bg);
color: var(--text);
font-size: 14px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 14px; }
/* 让 [hidden] 真正生效：作者样式（.app-shell / .login-screen 用 display:grid）
与 UA 的 [hidden]{display:none} 同优先级时会胜出，导致 hidden 属性无效 → 全屏错位 */
[hidden] { display: none !important; }
/* ---------- Login ---------- */
.login-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background:
radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 60%), var(--bg); padding: 40px 20px 80px; position: relative; }
/* 品牌脚注：钉在登录容器（整页）底部——卡片矮时即视口底部；卡片高时在页面最底，padding-bottom 80px 保证不与卡片重叠 */
.login-screen .login-foot { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; }
.login-card {
width: 380px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 40px 34px; box-shadow: var(--shadow-lg);
}
.login-card .sub { color: var(--text-3); margin: 6px 0 24px; font-size: 13px; line-height: 1.55; }
.login-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 26px; }
.login-brand .brand-mark { width: 34px; height: 34px; border-radius: var(--radius-sm); background: #000 url(/img/logo-mark.png) center/cover no-repeat; color: transparent; display: grid; place-items: center; font-weight: 700; }
.login-brand .brand-name { font-weight: 600; font-size: 17px; letter-spacing: -.3px; }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12px; margin: 22px 0 16px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.login-hint { color: var(--danger, #dc2626); font-size: 12px; margin: 4px 0 0; min-height: 0; }
.btn.feishu { background: #3C83F6; color: #fff; border-color: #3C83F6; }
.btn.feishu:hover { background: #2E6BE0; border-color: #2E6BE0; }
.btn.feishu .fs-logo { display: inline-block; width: 22px; height: 22px; vertical-align: -4px; border-radius: 5px; }
/* 飞书主入口（登录页顶部最大按钮） */
.btn.feishu.feishu-primary { width: 100%; justify-content: center; padding: 13px 16px; font-size: 15px; font-weight: 600; border-radius: 10px; box-shadow: 0 4px 14px rgba(60,131,246,.22); margin-top: 12px; }
.btn.feishu.feishu-primary:hover { box-shadow: 0 6px 18px rgba(60,131,246,.28); transform: translateY(-1px); transition: all .15s ease; }
/* 设计师登录主入口（与 .feishu-primary 同尺寸，浅色对比） */
.btn.email-primary { width: 100%; justify-content: center; padding: 13px 16px; font-size: 15px; font-weight: 600; border-radius: 10px; background: var(--surface); color: var(--text); border-color: var(--border); margin-top: 8px; box-shadow: var(--shadow); }
.btn.email-primary:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); transition: all .15s ease; }
/* 密码登录视图的"返回飞书登录"链接 */
.login-back { display: block; width: 100%; text-align: center; margin-top: 16px; background: none; border: none; color: var(--text-3); font-size: 13px; cursor: pointer; padding: 6px 0; }
.login-back:hover { color: var(--accent); }
/* 邀请码注册入口（主入口分割线下方） */
.btn.login-reg-btn { width: 100%; justify-content: center; padding: 11px 16px; border-radius: 10px; font-size: 14px; font-weight: 500; }
.btn.login-reg-btn .ic-svg { width: 16px; height: 16px; }
/* 魔法链接已发送态 */
.login-sent { text-align: center; padding: 8px 0 0; }
.login-sent-ic { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.login-sent-ic .ic-svg { width: 26px; height: 26px; }
.login-sent-title { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.login-sent-to { color: var(--text-3); font-size: 13px; margin-bottom: 20px; word-break: break-all; }
.login-sent .btn { width: 100%; justify-content: center; margin-top: 8px; }
a.btn.login-dev-link { text-decoration: none; }
/* 邀请码预校验状态徽章 */
.invite-state { min-height: 0; margin-top: 6px; }
.invite-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--bg-2, #f4f4f5); color: var(--text-3); }
.invite-badge .ic-svg { width: 13px; height: 13px; }
.invite-badge.ok { background: #ecfdf5; color: #059669; }
.invite-badge.bad { background: #fef2f2; color: #dc2626; }
[data-theme="dark"] .invite-badge.ok { background: rgba(5,150,105,.16); }
[data-theme="dark"] .invite-badge.bad { background: rgba(220,38,38,.16); }
.login-card input[readonly] { background: var(--bg-2, #f4f4f5); color: var(--text-2); cursor: default; }
/* ---------- 飞书配置开关 ---------- */
.switch-field { display: flex; align-items: center; gap: 4px; }
.switch-field label { margin-bottom: 0; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: #d0d3d9; border-radius: 24px; transition: .2s; }
.switch .slider::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.fs-steps { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 13px; line-height: 1.9; }
.fs-steps li { margin-bottom: 2px; }
.ml8 { margin-left: 8px; }
/* ---------- 侧栏头像（飞书头像图）---------- */
.avatar .avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* ---------- App shell ---------- */
/* 布局对齐腾讯文档企业版：侧栏与顶栏共用同一灰色画布（无分隔线），主内容为白色圆角卡片浮于其上 */
.app-shell { display: grid; grid-template-columns: 188px 1fr; height: calc(100vh - var(--notice-h)); overflow: hidden; background: var(--canvas); }
/* 有公告时：body 用 padding-top 让位（margin 会与 body 发生折叠导致页面多出 44px 可滚动白底，2026-10-23 修复） */
body.has-notice { --notice-h: 44px; padding-top: var(--notice-h); }
/* ---------- 全站公告条（2026-10-23）：主站最顶部蓝色提示条，多条公告上下轮播，可点 × 关闭 ---------- */
#notice-bar {
position: fixed; top: 0; left: 0; right: 0; height: 44px;
z-index: 50; /* 低于 modal(70)/scrim(55)，高于常规内容 */
background: linear-gradient(90deg, #2E6BE0, #3C83F6);
color: #fff; display: flex; align-items: center; overflow: hidden;
font-size: 13px; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
#notice-bar[hidden] { display: none; }
#notice-bar .nb-track-wrap { flex: 1; height: 100%; overflow: hidden; }
#notice-bar .nb-track { height: 100%; transition: transform .4s ease; }
#notice-bar .nb-item {
height: 44px; display: flex; align-items: center; justify-content: center;
padding: 0 44px 0 16px; /* 右侧留出关闭按钮位置 */
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#notice-bar .nb-text { overflow: hidden; text-overflow: ellipsis; }
#notice-bar a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
#notice-bar a:hover { opacity: .88; }
#notice-bar .nb-close {
position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
width: 26px; height: 26px; border: none; border-radius: 6px; cursor: pointer;
background: transparent; color: #fff; padding: 0;
display: flex; align-items: center; justify-content: center; flex: none;
}
#notice-bar .nb-close svg { width: 14px; height: 14px; display: block; }
#notice-bar .nb-close:hover { background: rgba(255,255,255,.18); }
.sidebar {
background: transparent; border-right: none;
display: flex; flex-direction: column; padding: 20px 14px 0; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 18px; }
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: #000 url(/img/logo-mark.png) center/cover no-repeat; color: transparent; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.brand-name { font-weight: 700; font-size: 14.5px; letter-spacing: -.2px; white-space: nowrap; }
/* 账号弹窗（头像触发：切换/查看设计师视角） */
.acct-body { padding: 18px 22px; }
.acct-card { display: flex; align-items: center; gap: 12px; }
.acct-card .avatar { width: 48px; height: 48px; font-size: 18px; flex: none; }
.acct-info { min-width: 0; }
.acct-name { font-weight: 600; font-size: 15px; color: var(--text); }
.acct-role { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }
.acct-tip { margin: 14px 0 0; font-size: 12.5px; color: var(--text-3); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1.5; }
.acct-list { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; overflow: auto; padding: 2px; }
.acct-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; font-family: inherit; color: var(--text); transition: .15s; }
.acct-item:hover { border-color: var(--accent); background: var(--surface-2); }
.acct-item .avatar { width: 34px; height: 34px; font-size: 14px; flex: none; }
.acct-item-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.acct-item-name { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.acct-item-sub { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.acct-cur { font-size: 11px; color: var(--accent); flex: none; }
.acct-empty { color: var(--text-3); font-size: 13px; text-align: center; padding: 22px; }
.nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.nav-item {
display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); min-height: 44px;
color: var(--text-3); font-weight: 500; font-size: 14px; border: none; background: none; width: 100%; text-align: left; transition: .15s;
}
.nav-item:hover { background: var(--accent-soft); color: var(--accent); }
.nav-item.active { background: var(--accent); color: #fff; font-weight: 600; box-shadow: var(--shadow-m); }
.ic-svg { width: 19px; height: 19px; display: inline-block; vertical-align: -0.2em; flex: none; }
.nav-item .ic { width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; opacity: .9; }
/* ---------- 顶栏：右上角用户区（对齐 052b 子站样式） ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.topbar {
display: flex; align-items: center; justify-content: flex-end; gap: 10px;
height: 56px; flex: none; padding: 0 20px;
background: transparent; border-bottom: none;
}
.topbar .hamburger { margin: 0; align-self: center; }
.topbar-user { position: relative; margin-left: auto; display: flex; align-items: center; }
/* ---------- 全局搜索（对齐腾讯文档：范围标签 + 下拉分类结果） ---------- */
.gsearch {
position: relative; flex: 1; max-width: 720px; margin-right: 24px; min-width: 0;
display: flex; align-items: center; gap: 8px;
height: 38px; padding: 0 12px;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
transition: border-color .15s, box-shadow .15s;
}
.gsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
/* 范围标签：灰色常规体（2026-10-08 改，不加粗） */
.gs-scope { font-size: 12.5px; font-weight: 400; color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: 4px 12px; white-space: nowrap; cursor: pointer; position: relative; }
.gs-scope:hover { color: var(--text-2); }
.gs-scope-menu {
position: absolute; top: calc(100% + 10px); left: -8px; z-index: 90;
min-width: 128px; padding: 5px;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
box-shadow: var(--shadow-lg);
}
.gs-scope-item {
display: block; width: 100%; padding: 8px 12px; border: none; background: none;
border-radius: 7px; font-family: inherit; font-size: 13px; color: var(--text);
text-align: left; cursor: pointer;
}
.gs-scope-item:hover { background: var(--surface-2); }
.gs-scope-item.active { color: var(--accent); font-weight: 600; }
.gs-sep { width: 1px; height: 16px; background: var(--border); flex: none; }
.gs-ic { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.gsearch input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: 13.5px; color: var(--text); }
.gsearch input::placeholder { color: var(--text-3); }
.gs-panel {
position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80;
max-height: 68vh; overflow-y: auto; padding: 6px;
background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
box-shadow: var(--shadow-lg);
max-width: calc(100vw - 32px); /* 防窗口溢出 */
}
/* 空态面板：搜索指定内容（标签）+ 搜索历史（2026-10-08 对齐腾讯文档） */
.gs-sect-t { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px; font-size: 12px; color: var(--text-3); }
.gs-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 12px 12px; border-bottom: 1px solid var(--border); }
.gs-tag {
padding: 5px 12px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px;
font-family: inherit; font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: .15s;
}
.gs-tag:hover { border-color: var(--accent); color: var(--accent); }
.gs-tag.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.gs-hist-acts { display: flex; gap: 14px; }
.gs-hist-more, .gs-hist-clear { border: none; background: none; font-family: inherit; font-size: 12px; color: var(--text-3); cursor: pointer; padding: 0; }
.gs-hist-more:hover, .gs-hist-clear:hover { color: var(--accent); }
.gs-hist-ic { width: 15px; height: 15px; color: var(--text-3); flex: none; display: inline-flex; }
.gs-hist-ic svg { width: 100%; height: 100%; }
.gs-hist-item .gs-item-name { color: var(--text-2); }
.gs-group-t { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 4px; font-size: 12px; color: var(--text-3); }
.gs-item {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px;
border: none; background: none; border-radius: 8px; cursor: pointer; text-align: left; font-family: inherit;
}
.gs-item:hover, .gs-item.hl { background: var(--surface-2); }
.gs-item-ic { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: #fff; }
.gs-item-main { min-width: 0; flex: 1; }
.gs-item-name { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item-name mark, .gs-item-sub mark { background: none; color: var(--accent); font-weight: 600; padding: 0; }
.gs-item-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-empty { padding: 28px 12px; text-align: center; font-size: 13px; color: var(--text-3); }
.gs-foot { padding: 8px 12px 6px; border-top: 1px solid var(--border); margin-top: 4px; font-size: 11.5px; color: var(--text-3); display: flex; justify-content: space-between; }
@media (max-width: 768px) {
.gsearch { margin-right: 8px; }
.gs-scope { display: none; }
.gs-sep { display: none; }
}
.topbar-avatar {
display: inline-flex; align-items: center; gap: 8px; padding: 4px 8px;
background: none; border: none; border-radius: 10px; cursor: pointer; font-family: inherit;
transition: .15s;
}
.topbar-avatar:hover { background: var(--surface-2); }
/* 尺寸严格对齐 052b 子站 .userbox：头像 26×26 圆形、名字 13.5px/600 */
.topbar-avatar .avatar { width: 26px; height: 26px; font-size: 12px; }
.topbar-avatar-name { font-weight: 600; font-size: 13.5px; color: var(--text); max-width: 9em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 顶栏「管理后台」按钮（头像左侧，仅管理员可见；管理后台视图中显示「返回主站」） */
.topbar-admin {
display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; padding: 5px 6px;
background: none; border: none; cursor: pointer; line-height: 1;
font-family: inherit; font-size: 13px; font-weight: 500; color: var(--text-2); transition: .15s;
}
.topbar-admin .ic-svg { width: 15px; height: 15px; flex: none; display: block; vertical-align: baseline; }
.topbar-admin:hover { background: var(--surface-2); color: var(--text); border-radius: 8px; }
.user-menu {
position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
min-width: 216px; padding: 6px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; box-shadow: var(--shadow-lg);
}
.um-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.um-head .avatar { width: 38px; height: 38px; font-size: 15px; flex: none; }
.um-head-main { display: flex; flex-direction: column; min-width: 0; }
.um-name { font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-role { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.um-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 9px 12px; border: none; background: none; border-radius: 8px;
font-family: inherit; font-size: 13.5px; color: var(--text); text-align: left; cursor: pointer; transition: .15s;
}
.um-item:hover { background: var(--surface-2); }
.um-item .ic-svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.um-item.danger { color: var(--danger, #d92d20); }
.um-item.danger .ic-svg { color: var(--danger, #d92d20); }
.um-value { margin-left: auto; font-size: 12px; color: var(--text-3); }
.um-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
/* 头像图加载失败时的首字 fallback（feishu 存储 URL 在外站拿不到图，监听器替换为 span） */
.avatar .av-fb, .dsr-av .av-fb, .cm-av .av-fb, .pend-avatar .av-fb { color: inherit; line-height: 1; font-weight: inherit; }
.view {
padding: 28px; overflow: auto; flex: 1; min-height: 0;
background: var(--surface); border: 1px solid var(--border); border-bottom: none;
/* 底部不收边：白区直通视口底部（无限延伸观感），仅上侧保留圆角与灰边（对齐腾讯文档） */
border-radius: var(--radius-l) var(--radius-l) 0 0;
margin: 0 16px 0; box-shadow: var(--shadow);
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm);
border: 1px solid var(--border); background: var(--surface); color: var(--text);
font-weight: 500; font-size: 13px; transition: .12s; min-height: 40px;
white-space: nowrap; /* 防止按钮文字在窄宽下断行破坏样式（特别是带 (N) 或较长中文文本时） */
}
.btn:hover { border-color: var(--border-strong); background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:active { transform: scale(.98); }
/* 统一所有 .btn 内的 SVG icon 大小（避免不同 SVG viewBox 自然显示导致尺寸差异） */
.btn .ic-svg { width: 14px; height: 14px; flex: none; }
.btn.sm { padding: 0 12px; font-size: 12px; line-height: 1; border-radius: 7px; height: 28px; min-height: 28px; box-sizing: border-box; }
.btn.sm .ic-svg { width: 14px; height: 14px; }
.btn.danger { color: #dc2626; border-color: #fca5a5; }
.btn.danger:hover { background: #fef2f2; }
.btn.ghost { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-2); }
.btn.ghost:hover { background: var(--surface); color: var(--text); }
.ghost-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--text-3); font-size: 12.5px; padding: 6px 8px; border-radius: var(--radius-sm); line-height: 1; }
.ghost-btn:hover { background: var(--surface-2); color: var(--text); }
.ghost-btn.icon-only { padding: 6px; border-radius: 8px; }
.ghost-btn.icon-only .ic-svg { width: 18px; height: 18px; }
/* ---------- Cards & grids ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.page-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -.4px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
/* ---------- Filter bar (物料清单页) ---------- */
.filter-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chip {
appearance: none; border: 1px solid var(--border); background: var(--surface);
color: var(--text-2); font-size: 13px; font-weight: 500;
padding: 7px 16px; border-radius: 999px; cursor: pointer;
transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
line-height: 1.4; white-space: nowrap;
}
.filter-chip:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-2, var(--surface)); }
.filter-chip.active {
background: var(--accent); color: #fff; border-color: var(--accent);
box-shadow: 0 1px 3px rgba(60,131,246, 0.18);
}
.filter-divider { width: 1px; height: 22px; background: var(--border); flex: none; }
.filter-dropdown { position: relative; }
.filter-trigger {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 14px; border-radius: 10px; cursor: pointer;
background: var(--surface); border: 1.5px solid var(--accent); color: var(--accent);
font-size: 13px; font-weight: 500; line-height: 1.4; white-space: nowrap;
transition: background .15s, color .15s;
}
.filter-trigger:hover { background: var(--accent-soft); }
.filter-trigger .ic-svg { width: 16px; height: 16px; flex: none; }
.filter-trigger .ic-svg:last-child { width: 14px; height: 14px; opacity: .8; }
.filter-menu {
position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
background: var(--surface); border: 1px solid var(--border);
border-radius: 10px; padding: 5px; min-width: 140px;
box-shadow: var(--shadow-m, var(--shadow-lg, 0 4px 24px rgba(15,23,42,.12)));
display: none;
}
.filter-menu.open { display: block; }
.filter-menu-item {
appearance: none; border: none; background: transparent; cursor: pointer;
width: 100%; text-align: left;
padding: 8px 12px; border-radius: 6px; font-size: 13px; color: var(--text-2);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
transition: background .12s, color .12s;
}
.filter-menu-item:hover { background: var(--accent-soft); color: var(--text); }
.filter-menu-item.selected { color: var(--accent); font-weight: 600; }
.filter-menu-item.selected::after { content: '✓'; color: var(--accent); font-weight: 700; }
/* 空状态（无匹配筛选时） */
.grid.empty-grid { display: block; padding: 60px 0; }
.empty-state { text-align: center; color: var(--text-3); }
.empty-state .big { width: 48px; height: 48px; opacity: .55; margin: 0 auto 14px; }
.empty-state .big .ic-svg { width: 48px; height: 48px; }
/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
/* 状态 chip 行内化（与 .code-chip 同款少圆角；定义在 .badge 之后以覆盖其默认） */
.status-badge { border-radius: 6px; padding: 3px 10px; }
.status-badge.sc-active { color: #059669; background: #ecfdf5; }
.status-badge.sc-archived { color: #a1a1aa; background: #f4f4f5; }
/* 状态列行内编辑下拉：点击徽章展开菜单，参考 image 2 的小下拉风格 */
.status-dd { position: relative; display: inline-block; }
.status-badge-editable { cursor: pointer; border: 1px solid transparent; transition: border-color .12s, box-shadow .12s; }
.status-badge-editable:hover { border-color: var(--border); }
.status-badge-editable[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.status-dd-menu {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
min-width: 112px; padding: 3px; background: var(--surface);
border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
}
/* 清单详情页 head 的下拉：portal 到 body、fixed 定位，避免被 .view 的 overflow:auto 裁剪 */
.inline-status-dd .status-dd-menu, .inline-code-menu { position: fixed; z-index: 9999; }
/* portal 后 menu 不再是 .inline-status-dd 后代，上面的选择器失效；这里用独立类再写一次兜底（JS 也会 inline 设 z-index，双保险） */
.inline-status-menu, .inline-code-menu { position: fixed; z-index: 9999; }
.status-dd-item {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px;
border: none; background: none; cursor: pointer; font-size: 12.5px;
color: var(--text); border-radius: 7px; text-align: left;
}
.status-dd-item:hover { background: var(--surface-2); }
.status-dd-item.selected { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.status-dd-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
/* ===== 优先级列：白字彩色圆形徽章 + 下拉（高=红 中=橙 低=绿） ===== */
.prio-dd { position: relative; display: inline-block; }
.prio-badge {
cursor: pointer; border: none; padding: 0; border-radius: 50%;
width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center;
font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
transition: filter .12s, box-shadow .12s;
}
.prio-badge:hover { filter: brightness(.94); }
.prio-badge[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-soft); }
.prio-dd-menu {
position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
min-width: 96px; padding: 3px; background: var(--surface);
border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
}
.prio-dd-item {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px;
border: none; background: none; cursor: pointer; font-size: 12.5px;
color: var(--text); border-radius: 7px; text-align: left;
}
.prio-dd-item:hover { background: var(--surface-2); }
.prio-dd-item.selected { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.prio-dd-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
/* 导出下拉菜单（白色系按钮 + 右侧展开面板） */
.export-dd { position: relative; display: inline-block; }
.export-trigger { display: inline-flex; align-items: center; gap: 4px; }
.export-trigger .ic-svg { width: 15px; height: 15px; }
.export-trigger .caret { width: 13px; height: 13px; opacity: .65; margin-left: -2px; }
.export-dd-menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 80;
min-width: 210px; padding: 4px; background: var(--surface);
border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 10px 30px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06);
}
.export-item {
display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px;
border: none; background: none; cursor: pointer; font-size: 13px;
color: var(--text); border-radius: 7px; text-align: left;
}
.export-item:hover { background: var(--surface-2); }
.export-item .ic-svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 16px; }
.card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 18px; box-shadow: var(--shadow); transition: .14s;
}
.card.hover:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-m); }
.project-card { cursor: pointer; position: relative; }
.project-card .pc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.project-card .pc-top > div:first-child { flex: 1 1 auto; min-width: 0; }
.project-card h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.project-card .client { color: var(--text-3); font-size: 12.5px; margin-top: 3px; }
.project-card .meta { display: flex; gap: 14px; margin-top: 16px; color: var(--text-2); font-size: 12.5px; }
.project-card .meta b { color: var(--text); font-weight: 600; }
.project-card .pc-date { display: flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 12px; }
.project-card .pc-date .ic-svg { width: 13px; height: 13px; flex: none; color: var(--text-3); }
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
/* 分类列：单选，彩色胶囊（线上=蓝，线下=红） */
.cat-cell { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; }
.cat-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.7; white-space: nowrap; }
.cat-pill.online { color: #3C83F6; background: #EDF4FE; }
.cat-pill.offline { color: #dc2626; background: #fef2f2; }
/* 分类单选编辑浮窗的切换芯片 */
.inline-edit-popover.cat-edit-popover { padding: 6px; min-width: 0; max-width: 96px; width: 96px; }
.cat-chip-list { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.cat-chip { display: flex; align-items: center; justify-content: center; padding: 6px 8px; min-width: 0; width: 100%; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .12s; }
.cat-chip:hover { border-color: var(--accent); }
.cat-chip.on.online { color: #3C83F6; background: #EDF4FE; border-color: #3C83F6; }
.cat-chip.on.offline { color: #dc2626; background: #fef2f2; border-color: #dc2626; }
.cat-chip.on.cat-clear { color: var(--text-2); background: var(--surface-2); border-color: var(--border); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.7; white-space: nowrap; }
.tag + .tag { margin-left: 5px; }
.tag-spread { color: var(--accent); background: var(--accent-soft); }
.tag-activity { color: #d97706; background: #fffbeb; }
.code-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 7px; font-size: 11.5px; font-weight: 600; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.code-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.code-chip-wrap { display: flex; gap: 8px; align-items: center; }
/* 清单详情页 head 行内编辑（owner 可点即编辑：名称 / 关联项目 / 状态） */
/* 统一规范：hover → 灰色下划线；focus（进入编辑）→ 蓝色下划线 + 蓝色光标； */
/* caret 不超过下划线：通过 line-height 紧凑 + offset 2px 让光标基线紧贴 underline */
.page-head .inline-edit-text {
cursor: text;
outline: none;
background: transparent !important;
box-shadow: none !important;
border-radius: 0;
padding: 0;
margin: 0;
text-decoration: underline;
text-decoration-color: transparent;
text-decoration-thickness: 1.5px;
text-underline-offset: 2px;
transition: text-decoration-color .12s;
}
.page-head .inline-edit-text:hover {
text-decoration-color: var(--text-3); /* 灰色 hover，提示可编辑 */
}
.page-head .inline-edit-text:focus {
text-decoration-color: var(--accent); /* 蓝色 focus，正式进入编辑 */
caret-color: var(--accent);
}
.page-head .inline-edit-text:empty::before {
content: attr(data-placeholder); color: var(--text-3); pointer-events: none;
}
.page-head h2.inline-edit-text:empty::before { content: '点击命名清单…'; }
.page-head .code-chip-editable {
cursor: pointer; border: 1px solid transparent; transition: border-color .12s, box-shadow .12s;
}
.page-head .code-chip-editable:hover { border-color: var(--accent); }
.page-head .code-chip-editable[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.page-head .code-chip-empty { background: transparent; color: var(--text-3); border: 1px dashed var(--border); }
/* ⚠️ 2026-09-10 移除 .code-chip-sync-btn 与 dh-spin keyframes：关联项目改为实时拉取上游，去掉手动同步按钮。 */
.page-head .inline-status-dd { position: relative; display: inline-block; }
.inline-code-menu {
min-width: 320px; max-width: 400px; padding: 4px; background: var(--surface);
border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
display: flex; flex-direction: column; max-height: 360px; overflow: hidden;
}
.inline-code-search { padding: 2px 4px 6px; border-bottom: 1px solid var(--border); flex: 0 0 auto; }
.inline-code-search-input {
width: 100%; padding: 6px 10px; font-size: 12.5px; color: var(--text);
background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
outline: none; font-family: inherit;
}
.inline-code-search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.inline-code-list { overflow-y: auto; overflow-x: hidden; padding: 2px; flex: 1 1 auto; min-height: 0; }
.inline-code-item {
display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 9px;
border: none; background: none; cursor: pointer; font-size: 12.5px;
color: var(--text); border-radius: 7px; text-align: left;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inline-code-item:hover { background: var(--surface-2); }
.inline-code-item.selected { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.inline-code-item.muted { color: var(--text-3); }
.inline-code-empty { padding: 14px 12px; text-align: center; color: var(--text-3); font-size: 12px; }
/* ---------- Tables / item list ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; overflow-y: hidden; padding-bottom: 1px; }
/* 细线滚动条（原 10px 粗灰条）：轨道透明 + 4px 细滑块，hover 加深 */
.panel { scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .20) transparent; }
.panel::-webkit-scrollbar { height: 4px; width: 4px; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); border-radius: 2px; }
.panel::-webkit-scrollbar-thumb:hover { background: rgba(15, 23, 42, .34); }
.row .source-cell { display: flex; align-items: center; gap: 3px; justify-content: center; min-width: 0; }
.row .source-cell.muted { color: var(--text-3); font-size: 13px; }
.row .src-link { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); text-decoration: none; font-size: 12px; max-width: 100%; }
.row .src-link:hover { text-decoration: underline; }
.row .src-link .ic-svg { width: 14px; height: 14px; flex: none; }
.row .src-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 74px; }
.row .src-x { border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.row .src-x:hover { color: #dc2626; }
.row .ref-btn .src-add { font-size: 12px; font-weight: 600; line-height: 1.5; margin-left: 0; }
/* 源文件缩略图（参考交付物列）：首文件格式色块+格式 / 图片缩略图 + 右下角张数角标（显示总张数 N，去掉 + 号）。1:1 正方形与交付物列对齐 */
.row .src-thumb-cell { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.row .src-thumb-box {
position: relative; width: 52px; height: 52px; flex: none; cursor: pointer; border-radius: 8px; overflow: hidden;
}
.row .src-thumb-box .thumb {
width: 52px; height: 52px; border-radius: 8px; background-size: cover; background-position: center;
background-color: var(--border); border: 1px solid var(--border); transition: transform .15s ease, filter .15s ease;
}
.row .src-thumb-box .thumb.src-img-thumb { background-color: var(--border); }
.row .src-thumb-box .thumb.doc-thumb { display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .2px; color: #fff; border-color: transparent; border-radius: 8px; }
.row .src-thumb-box .thumb.src-doc-pdf { background: #DC2626; }
.row .src-thumb-box .thumb.src-doc-ppt { background: #D97706; }
.row .src-thumb-box .thumb.src-doc-doc { background: #3C83F6; }
.row .src-thumb-box .thumb.src-doc-xls { background: #16a34a; }
.row .src-thumb-box .thumb.src-doc-zip { background: #6b7280; }
.row .src-thumb-box .thumb.src-doc-design { background: #7c3aed; }
.row .src-thumb-box .thumb.src-doc-other { background: #64748b; }
.row .src-thumb-box .thumb-extra {
position: absolute; right: 3px; bottom: 3px; min-width: 18px; height: 18px; padding: 0 5px;
border-radius: 9px; background: rgba(15, 23, 42, .78); color: #fff; font-size: 10.5px; font-weight: 600;
line-height: 18px; text-align: center; letter-spacing: 0; pointer-events: none;
}
/* 源文件列空态：与交付物列 .preview-empty-inner 完全对齐的 52×52 缩略图框（icon-only，老板要求）
复用 .src-thumb-box 的 52×52 / border-radius:8 / overflow 基础样式，只覆盖「没有 .thumb 子元素」时的
flex 居中布局（默认 .src-thumb-box 没设 display，靠 .thumb 的位置占位 → 空态需显式 display:grid 居中 icon） */
.row .src-thumb-box.src-empty-inner {
display: grid; place-items: center;
border: 1px dashed var(--border-strong);
background: var(--surface);
color: var(--text-3);
cursor: pointer;
transition: border-color .12s, background .12s, color .12s;
}
.row .src-thumb-box.src-empty-inner .ic-svg { width: 16px; height: 16px; display: block; }
.row .src-thumb-box.src-empty-inner:hover { border-color: var(--accent); border-style: solid; background: var(--accent-soft); color: var(--accent); }
.row .src-thumb-box:hover .thumb { transform: scale(1.05); filter: brightness(.92); }
/* 多源文件下载弹窗：勾选列表 */
.sd-list { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.sd-row { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; border-bottom: 1px solid var(--border); }
.sd-row:last-child { border-bottom: 0; }
.sd-check { display: inline-flex; flex: 0 0 auto; cursor: pointer; }
.sd-check input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
.sd-ic { flex: 0 0 auto; width: 34px; height: 24px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .2px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.sd-ic:hover { transform: scale(1.12); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.sd-ic:active { transform: scale(1.04); }
.sd-ic.sd-img { background-size: cover; background-position: center; color: transparent; }
.sd-ic.src-doc-pdf { background: #DC2626; }
.sd-ic.src-doc-ppt { background: #D97706; }
.sd-ic.src-doc-doc { background: #3C83F6; }
.sd-ic.src-doc-xls { background: #16a34a; }
.sd-ic.src-doc-zip { background: #6b7280; }
.sd-ic.src-doc-design { background: #7c3aed; }
.sd-ic.src-doc-other { background: #64748b; }
.sd-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.sd-del { flex: 0 0 auto; border: none; background: transparent; color: var(--text-3); cursor: pointer; font-size: 16px; line-height: 1; width: 24px; height: 24px; border-radius: 6px; }
.sd-del:hover { color: #dc2626; background: rgba(220,38,38,.12); }
/* ---------- 源文件上传弹窗：拖拽 / 点击 / 粘贴 ---------- */
.dropzone {
border: 1.5px dashed var(--border-strong, var(--border));
border-radius: var(--radius);
background: var(--bg);
padding: 26px 18px;
text-align: center;
cursor: pointer;
outline: none;
transition: border-color .15s, background .15s, box-shadow .15s;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.drag { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
.dz-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.dz-icon { color: var(--accent); }
.dz-icon .ic-svg { width: 34px; height: 34px; }
.dz-title { font-size: 14px; font-weight: 600; color: var(--text-2); }
.dz-sub { color: var(--text-3); }
.src-preview { margin-top: 14px; }
.src-preview.hidden { display: none; }
.src-file-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.src-thumb { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; flex: none; display: grid; place-items: center; background: var(--bg); color: var(--accent); }
.src-thumb.file .ic-svg { width: 20px; height: 20px; }
.src-meta { flex: 1; min-width: 0; }
.src-fname { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-remove { flex: none; border: none; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; width: 28px; height: 28px; border-radius: 6px; cursor: pointer; }
.src-remove:hover { color: #dc2626; background: rgba(220,38,38,.12); }
.btn.primary:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary:disabled:hover { background: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:disabled:hover { background: var(--surface); border-color: var(--border); color: var(--text); }
.row {
display: grid; grid-template-columns: 52px 92px minmax(140px, 0.5fr) minmax(170px, 1fr) 80px 60px 56px 88px 100px 124px 108px 72px 64px 104px auto; gap: 14px; align-items: center; justify-items: stretch;
padding: 7px 18px; border-bottom: 1px solid #d1d5db;
/* 主表格：固定 min-width（≥ 面板宽度 且 ≥ grid 模板自然宽度 1700px），保证表头与数据行等宽对齐，
避免 max-content 因列内图片/按钮/数字不同导致 head 窄 / data 宽、fr 列漂移。超出时 panel 横向滚动。 */
min-width: max(100%, 1800px);
}
.row > * { min-width: 0; }
.row > .who,
.row > .ref-cell,
.row > .thumb-wrap,
.row > .source-cell,
.row > [data-edit="status"] { justify-self: stretch; min-width: 0; }
/* 末尾行保留 border-bottom：让表格末尾分割线完整延伸到 panel 边界；
panel padding-bottom: 1px 防止最后一行 border 与 panel border 重叠造成的视觉断点 */
.row:last-child { border-bottom: 1px solid #d1d5db; }
.row.head { background-color: var(--surface-2) !important; background-clip: padding-box; box-shadow: inset 0 0 0 999px var(--surface-2); color: var(--text-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.row.head > div { white-space: nowrap; background-color: var(--surface-2) !important; background-clip: padding-box; }
/* 非 sticky 表头 cell 显式声明 bg(覆盖可能的 transparent 继承)，保证 head 行整条都有 head 底色，包括最右一列「最近更新」 */
.row.head > div:not(.sticky-col) { background-color: var(--surface-2) !important; }
/* head 行底边加深，与数据行的边框视觉分开 */
.row.head { border-bottom: 1px solid #d1d5db; }
.row:hover:not(.head) { background: #f5f6f8; }
/* 前 3 列固定锁定（水平滚动时不跟随移动）—— 序号 / 物料 / 规格
- background 必须 opaque（白色 / hover 浅灰），右缘 box-shadow 制造清晰边界
- 防止非 sticky 列（如 内容 / 数量）横滑时透出来 */
/* ⚠️ 2026-09-10 彻底修复「表头灰色断点 / 白色没充满行高 / 灰线不连续 / drawer 白色色块」根因：
.row { align-items: center } 让 sticky col 垂直居中，cell 高度=内容高度(19~24px) << 行高(head 33 / 数据行 67px)，
sticky col 的不透明背景 + ::after veil 都只覆盖自身短高度 → 上下留白 + veil 上下断点 + drawer 行浅蓝上叠白色短块。
修复：sticky col 改 align-self: stretch 填满整行 content 高度（背景与 veil 同步覆盖全高），
内部用 flex column + justify-content:center 让内容仍垂直居中；横向对齐按列特性区分。 */
.row .sticky-col {
position: sticky; background: var(--surface); z-index: 3;
align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: stretch;
overflow: visible;
}
/* category / area：chip 与文本横向居中（不撑满宽度）；title/ctrl 用默认 stretch（文本左对齐 / ctrl-cell 内部自居中） */
.row .sticky-col.cat-cell,
.row .sticky-col.area-cell { align-items: center; }
/* area 是 sticky col：不要继承 .it-unit 的圆角胶囊 + 120ms bg 过渡
否则行 hover 时单元会形成一块浅灰 pill，叠加到行灰底上快速 hover 出现闪烁
⚠️ 2026-09-10 修复：不要写 background:inherit —— 会继承 .row 的透明背景，
把 .row .sticky-col 的不透明白底和 ::after veil 一起变透明 → 横滚时下方内容从区域列透出。
背景交给 .row .sticky-col（surface）/ .row:hover .sticky-col（#f5f6f8）控制即可。 */
.row .sticky-col.area-cell,
.row .sticky-col.area-cell:hover {
border-radius: 0;
padding: 0;
transition: none;
}
/* head 行 control 列（checkbox）横向居中 */
.row.head .sticky-col.ctrl-head { align-items: center; flex-direction: row; }
/* ⚠️ 2026-09-10 修复 ctrl-cell 图标垂直堆叠：sticky col 通用规则把 flex-direction 改成 column 覆盖了 ctrl-cell 原本的 row 方向，
导致 drag-handle / row-num / sel-cb / pin-btn 在 hover 时纵向排列。ctrl-cell 需要显式恢复 row + 居中（它本身就是 sticky col 元素）。 */
.row .sticky-col.ctrl-cell { flex-direction: row; align-items: center; justify-content: center; gap: 6px; min-height: 22px; }
/* title 列 .it-title 不能 flex-grow（line 2404 的 flex:1 1 auto 会让它撑满高度、文本顶对齐）→ 0 1 auto 保持自然高度由父居中，并随 align-items:stretch 撑满宽度保证 ellipsis 生效 */
.row .sticky-col.sticky-col-4 .it-title { flex: 0 1 auto; }
/* drawer 打开行高亮浅蓝：sticky col 同步浅蓝，避免白色色块（Bug D） */
.row.active-drawer .sticky-col { background: #EDF4FE; }
/* ⚠️ sticky 列右缘追加 ::after veil：当后续滚动 cell 滑入 sticky 区域时（如已滚动让 priority cell 重叠进 sticky-5），
用 sticky col 自身 stacking context 的伪元素向右延伸一段 hard-cap（在 width 内）做兜底，确保背景填到 sticky col 的真实右缘
之外约 4px 的范围，避免视觉透出。注意 ::after width 较小（4px），不能盖住下一列的内容。 */
.row .sticky-col::after { content: ''; position: absolute; top: 0; right: -4px; bottom: 0; width: 4px; background: inherit; pointer-events: none; }
/* ⚠️ 2026-09-10 修复 Bug1：sticky 列间隙透出（彻底排查）
现象：横滚时 sticky-2/3/4 左侧 14px gap（来自 grid gap: 14px）暴露，scrolled 列内容直接透出。
原因：之前的 ::after veil 只盖右缘 4px，sticky col 之间的 gap（每个 14px）完全没有遮罩。
把 ::after 从右缘延伸到「右缘 + gap 宽 = 14px」即可（z-index inherit 自 sticky col 本身，仍能压住 scrolled 内容）。
⚠️ 2026-09-10 进一步修复：用户要求「冻结到物料名称即可」，规格列（曾 sticky-5）取消 sticky：
- 原本 sticky-5 的 head 行 z-index:4 + background:surface-2 会盖住滚到该位置的「备注/最近更新」head cell，
导致备注/最近更新看起来"只有部分灰色"且行分割线断掉。
- 取消 sticky-5 后规格列跟其他滚动列一起滚，head 行整条灰色（surface-2）从分类一直延伸到最近更新，
行分割线也连续不断。 */
.row:hover:not(.head) .sticky-col { background: #f5f6f8; }
.row.head .sticky-col { background: var(--surface-2); z-index: 4; }
.row > .sticky-col-1 { left: 0; }
.row > .sticky-col-1::after { right: -14px; width: 14px; } /* 序号右缘覆盖 → 分类左 gap */
.row > .sticky-col-2 { left: 82px; } /* 68(序号) + 14(gap) */
.row > .sticky-col-2::after { right: -14px; width: 14px; } /* 分类右缘覆盖 → 区域左 gap */
.row > .sticky-col-3 { left: 176px; } /* 82 + 80(分类) + 14 */
.row > .sticky-col-3::after { right: -14px; width: 14px; } /* 区域右缘覆盖 → 物料左 gap */
.row > .sticky-col-4 { left: 264px; } /* 176 + 74(区域) + 14 */
.row > .sticky-col-4::after { right: -14px; width: 14px; } /* 物料右缘覆盖 → 规格左 gap（规格已非 sticky，此 14px veil 仅在 panel scrollLeft=0 时不影响规格列内容显示，因为规格列 grid 起点 424+14=438 在 veil 右缘之外） */
/* ⚠️ 不再有 .row > .sticky-col-5 { position: sticky } / left / ::after / box-shadow。
规格列是普通列，跟其他列一起滚。head 行的 sticky col 只剩 1~4，sticky col 不再盖住备注/最近更新。 */
/* head 行的 sticky col 的 ::after 同步提到 z-index 4（z-index 才会让 sticky 区域压在 scrolled cell 之上） */
.row.head > .sticky-col::after { z-index: 4; }
/* ⚠️ 不要在 .sticky-col 上加 overflow: hidden！会把 ::after veil（right: -14px，向外延伸）一并裁掉，
导致 14px gap 完全暴露。内容溢出（it-title 长名）由 ::after veil 本身遮住（veil 是 opaque white），
再加 text-overflow: ellipsis 兜底。 */
.row .sticky-col { overflow: visible; }
.row .sticky-col .it-title,
.row .sticky-col .it-spec { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* ⚠️ 2026-09-10 物料名称截断加固：sticky col 在 flex column + align-items:stretch 下子元素默认按内容收缩，
需显式 max-width:100% + display:block + min-width:0 才能让 overflow:hidden 真正在 160px 列内截断+省略号。
（不改其他列；只针对物料名称 sticky col-4） */
.row .sticky-col.sticky-col-4 .it-title { display: block; max-width: 100%; min-width: 0; }
/* ---------- 首列：默认显示序号，悬浮显示拖把手 + 多选框（owner 行）---------- */
.row .ctrl-cell {
display: flex; align-items: center; justify-content: center;
gap: 6px; min-height: 22px;
}
.row .ctrl-cell .row-num {
font-size: 12.5px; color: var(--text-3); font-weight: 500;
font-variant-numeric: tabular-nums;
user-select: none;
}
.row .ctrl-cell .drag-handle {
display: none;
width: 18px; height: 22px;
align-items: center; justify-content: center;
color: var(--text-3); cursor: grab;
border-radius: 5px;
flex: none;
}
.row .ctrl-cell .drag-handle:active { cursor: grabbing; }
.row .ctrl-cell .drag-handle:hover { background: var(--accent-soft); color: var(--accent); }
.row .ctrl-cell .drag-handle .grip-ic { width: 14px; height: 14px; }
.row .ctrl-cell .sel-cb {
display: none;
width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); flex: none;
}
/* owner 行：悬浮把拖把手 + 多选框亮起，序号退场 */
.row:hover:not(.head) .ctrl-cell:not(.static) .row-num { display: none; }
.row:hover:not(.head) .ctrl-cell:not(.static) .drag-handle { display: inline-flex; }
.row:hover:not(.head) .ctrl-cell:not(.static) .sel-cb { display: inline-block; }
/* 选中后多选框常驻可见，序号退场（保持视觉清晰） */
.row .ctrl-cell:not(.static) .sel-cb:checked { display: inline-block; }
.row .ctrl-cell:not(.static):has(.sel-cb:checked) .row-num { display: none; }
/* 拖拽进行中：原行半透明 */
.row.dragging { opacity: .35; }
.row.dragging .ctrl-cell .drag-handle { cursor: grabbing; background: var(--accent-soft); color: var(--accent); }
/* 投落指示线 */
.drop-line {
grid-column: 1 / -1; height: 2px; background: var(--accent); border-radius: 1px;
margin: 0 -18px; pointer-events: none;
box-shadow: 0 0 0 1px var(--accent-soft);
}
.row.head .ctrl-head { display: flex; align-items: center; justify-content: center; }
.row.head #sel-all { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
/* 字段就地编辑：可编辑单元格统一视觉 —— hover 灰色细下划线、编辑态蓝色细下划线（参考 wuxinyang.cn 待办侧边栏） */
/* 字段就地编辑：可编辑单元格统一视觉 —— hover 灰色细下划线、编辑态蓝色细下划线（参考 wuxinyang.cn 待办侧边栏）。
⚠️ :not(.sticky-col) 是必须的：sticky 列本身需要 opaque 背景遮住横滑时的滚动内容，
一旦被 [data-edit] 的 background:transparent !important 覆盖，就会出现「表格内容重叠」的视觉 bug。
普通 data-edit 列（数量/单位/设计师/状态/...）继续保持透明，与灰色下划线提示融合。 */
.row [data-edit]:not(.sticky-col) { cursor: text; transition: text-decoration-color .12s; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 3px; background: transparent !important; }
.row [data-edit]:not([data-edit="status"]):not([data-edit="unit"]):not([data-edit="category"]):not([data-edit="assignees_csv"]):not(.inline-editing):hover { text-decoration-color: var(--border-strong); }
.row [data-edit].inline-editing { text-decoration-color: var(--accent); }
/* 输入控件（行内 input / textarea / select）—— 高度自适应 cell（让 pop 完全覆盖 cell）；textarea 单独保留最小高度 */
.inline-edit-input, .inline-edit-select {
width: 100%; font: inherit; color: var(--text);
background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
padding: 4px 8px; outline: none; box-shadow: none; transition: border-color .12s, box-shadow .12s;
min-height: 0; height: 100%;
}
.inline-edit-input:focus, .inline-edit-select:focus {
border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
/* 数字输入框（如数量/单价/总价）：去掉浏览器自带的上下箭头，避免与单行 cell 抢视觉焦点 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
textarea.inline-edit-input { resize: vertical; min-height: 36px; line-height: 1.5; max-height: none; }
.inline-edit-select {
appearance: none; -webkit-appearance: none; -moz-appearance: none;
padding-right: 28px; cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
}
/* 弹层卡片（负责设计师 / 应用场景 多选） */
.inline-edit-popover {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: var(--shadow-lg); padding: 12px 14px; min-width: 220px; max-width: 320px;
}
.inline-edit-popover .iep-head { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 10px; }
.inline-edit-popover .iep-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
/* 文本 / 数字 行内编辑浮层（az 段：浮在 cell 上方，不撑高行，溢出可视）
编辑态强调框只保留一份：去掉 popover 容器的灰色边框（避免与 input focus inset 蓝色双层叠加），
让 input 的 inset 阴影成为唯一的强调框，颜色用 --accent 提升对比度。 */
.inline-edit-popover.text-edit-popover { padding: 0; min-width: 0; max-width: none; border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); background: var(--surface); }
.inline-edit-popover.text-edit-popover .inline-edit-input { border: 0; box-shadow: none; border-radius: 0; border-bottom: 1.5px solid var(--accent); background: transparent; padding: 4px 6px; }
.inline-edit-popover.text-edit-popover .inline-edit-input:focus { box-shadow: none; border-bottom-color: var(--accent); }
/* 字段配置弹层（az 段：左侧拖把手 + 字段名 + 右侧眼睛） */
.tool-panel.field-config-panel { padding: 6px; min-width: 220px; max-width: 320px; }
.tool-panel .fc-row {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border: 0; border-radius: var(--radius-sm); cursor: pointer;
background: transparent; font: inherit; color: inherit; text-align: left;
transition: background .12s; user-select: none; box-sizing: border-box;
position: relative;
}
.tool-panel .fc-row:hover { background: var(--surface-2); }
.tool-panel .fc-row .fc-name { flex: 1; font-size: 13px; color: var(--text); }
.tool-panel .fc-row .fc-eye { width: 18px; height: 18px; flex: none; color: var(--text-3); transition: color .12s; }
.tool-panel .fc-row.visible .fc-eye { color: var(--accent); }
.tool-panel .fc-row.locked { cursor: not-allowed; opacity: .65; }
.tool-panel .fc-row.locked .fc-eye { color: var(--accent); opacity: .7; }
.tool-panel .fc-row .fc-drag { color: var(--text-3); display: inline-flex; }
.tool-panel .fc-row .fc-drag svg { width: 14px; height: 14px; }
.tool-panel .fc-row.dragging { opacity: .35; }
.tool-panel .fc-row.drop-above::before, .tool-panel .fc-row.drop-below::after { content: ''; position: absolute; left: 6px; right: 6px; height: 2px; background: var(--accent); border-radius: 1px; pointer-events: none; }
.tool-panel .fc-row.drop-above::before { top: -1px; }
.tool-panel .fc-row.drop-below::after { bottom: -1px; }
.tool-panel .fc-row.locked .fc-drag { opacity: .35; }
/* 状态下拉（参考 wuxinyang.cn 标签下拉风格） */
.inline-edit-popover.status-dropdown { padding: 6px; min-width: 120px; }
.inline-edit-popover.status-dropdown .status-opt {
display: block; width: 100%; padding: 9px 12px; border: 0; background: transparent;
border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: inherit;
text-align: left; transition: background .12s;
}
.inline-edit-popover.status-dropdown .status-opt:hover { background: var(--surface-2); }
.inline-edit-popover.status-dropdown .status-opt.sel { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.row.share-row { grid-template-columns: minmax(180px, 1.2fr) minmax(170px, 1fr) minmax(200px, 1.2fr) 110px 110px 80px; min-width: max(100%, 920px); }
/* 分享页容器：固定 1100px 宽（移动端自动收缩到 100%），避免筛选/空态切换时整页表格左右抖动 */
.share-page-wrap { width: 1100px; max-width: 100%; margin: 0 auto; padding: 40px 24px; box-sizing: border-box; }
.share-page-wrap .panel { width: 100%; }
/* 防止 share-row 单元格内容撑大列宽：单元格默认 min-width:auto，长文本/图片会推宽整列；显式置 0 让 fr 列按模板分配 */
.row.share-row > * { min-width: 0; }
/* 设计预览页搜索 + 筛选工具条 */
.share-toolbar { display: flex; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.share-search { position: relative; flex: 1; min-width: 220px; }
.share-search .ic-svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.share-search input { width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; transition: border-color .12s, box-shadow .12s; }
.share-search input::placeholder { color: var(--text-3); }
.share-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.share-status { padding: 10px 30px 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 14px; cursor: pointer; transition: border-color .12s, box-shadow .12s; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 9px center; background-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.share-status:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.share-count { color: var(--text-3); font-size: 13px; margin-left: auto; white-space: nowrap; }
@media (max-width: 560px) { .share-count { margin-left: 0; width: 100%; } }
/* 分享页 tabs + 计数：flex 行布局，让计数贴右、tabs 占满剩余空间 */
.share-tabs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.share-tabs-row .tabs { flex: 1 1 auto; min-width: 0; margin-bottom: 18px; }
.share-tabs-row .share-count { margin-left: 0; }
@media (max-width: 560px) {
.share-tabs-row { flex-wrap: wrap; }
.share-tabs-row .share-count { width: auto; margin-left: auto; }
}
.row .thumb { width: 40px; height: 52px; border-radius: 6px; object-fit: cover; background: var(--border); border: 1px solid var(--border); }
/* 设计预览页缩略图/画廊图：明确可点击放大，禁用移动端双击缩放整页的手势 */
.share-thumb { touch-action: manipulation; cursor: zoom-in; }
.share-thumb .thumb { cursor: zoom-in; }
.share-pane-gallery .card img { touch-action: manipulation; cursor: zoom-in; }
.row .thumb.ph { display: grid; place-items: center; color: var(--text-3); }
.row .thumb.ph::before {
content: "";
width: 24px;
height: 24px;
background-color: var(--text-3);
opacity: .65;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
}
/* 行文本统一：单行截断 + 省略号，避免任一单元格内容过长把整行撑高导致错位 */
.row .it-title, .row .it-spec, .row .it-cell-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: normal;
}
.row .it-title { font-weight: 600; font-size: 14px; line-height: 1.35; }
.row .it-spec { color: var(--text-2); font-size: 12.5px; line-height: 1.4; }
.row .it-cell-text { font-size: 12.5px; line-height: 1.45; color: var(--text); }
.row .it-cell-text.muted { color: var(--text-3); }
/* 备注列：左对齐、单行截断、可点击编辑 */
.row .it-note {
display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal;
font-size: 12.5px; line-height: 1.45; color: var(--text-2); cursor: pointer;
border-radius: 6px; padding: 2px 6px; user-select: none; text-align: left;
}
.row .it-note:hover { background: var(--accent-soft); }
.row .it-note .muted { color: var(--text-3); }
/* 长名称（设计师、原图源文件名）也在同一行截断，避免撑高整行 */
.row .who, .src-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .it-cell-text.muted { color: var(--text-3); }
.row .it-num { font-size: 12.5px; line-height: 1.45; text-align: center; font-variant-numeric: tabular-nums; color: var(--text); }
.row .it-num.money { text-align: right; font-weight: 600; }
.row .it-num.updated { color: var(--text-3); font-size: 12px; }
.row .it-num[data-edit] { cursor: text; transition: text-decoration-color .12s; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 3px; background: transparent !important; }
.row .it-num[data-edit]:not(.inline-editing):hover { text-decoration-color: var(--border-strong); background: transparent; }
.row .it-num[data-edit].inline-editing { text-decoration-color: var(--accent); background: transparent; }
/* 点位列（量词下拉：张/套/个/页） */
.row .it-unit { font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--text); cursor: pointer; border-radius: 6px; padding: 2px 6px; transition: background .12s; user-select: none; }
.row .it-unit:hover { background: var(--accent-soft); }
.row .it-unit.inline-editing { background: var(--surface); }
.inline-edit-popover.unit-dropdown {
background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg);
padding: 4px 2px; display: flex; flex-direction: column; gap: 2px; min-width: 48px; max-width: 60px;
}
.inline-edit-popover.unit-dropdown .unit-opt {
border: none; background: transparent; padding: 4px 2px; border-radius: 6px; text-align: center;
font-size: 12px; color: var(--text); cursor: pointer; transition: background .1s;
}
.inline-edit-popover.unit-dropdown .unit-opt:hover { background: var(--accent-soft); color: var(--accent); }
.inline-edit-popover.unit-dropdown .unit-opt.sel { background: var(--accent); color: #fff; }
/* 自定义值（不在枚举内）时显示的「当前: XX（自定义）」提示行 */
.inline-edit-popover.unit-dropdown .unit-custom-hint-row {
font-size: 10px; color: var(--text-3); padding: 3px 4px;
border-bottom: 1px dashed var(--border); margin-bottom: 4px;
display: flex; align-items: center; justify-content: center; gap: 0;
white-space: normal; line-height: 1.3; text-align: center;
}
.inline-edit-popover.unit-dropdown .unit-custom-hint-row b { color: var(--accent); font-weight: 600; }
/* 点位·自定义 popover（双击触发） */
.inline-edit-popover.unit-custom-edit {
background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
box-shadow: var(--shadow-lg); padding: 8px 10px; min-width: 80px; max-width: 96px;
display: flex; flex-direction: column; gap: 6px;
}
.inline-edit-popover.unit-custom-edit .uce-title {
font-size: 11px; font-weight: 600; color: var(--text-2);
display: flex; align-items: center; justify-content: center; gap: 4px;
}
.inline-edit-popover.unit-custom-edit .uce-input {
border: 1px solid var(--border); background: var(--bg);
border-radius: 6px; padding: 4px 6px; font-size: 12px; font-weight: 600;
color: var(--text); outline: none; box-sizing: border-box; width: 100%;
text-align: center; letter-spacing: 1px;
}
.inline-edit-popover.unit-custom-edit .uce-input:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.inline-edit-popover.unit-custom-edit .uce-hint {
font-size: 10px; color: var(--text-3); line-height: 1.4;
}
/* 区域下拉（复用 unit-dropdown 结构，放宽宽度；未分类时两组合并 + 分组标签） */
.inline-edit-popover.unit-dropdown.area-dropdown { min-width: 96px; max-width: 132px; padding: 4px 4px; }
.inline-edit-popover.unit-dropdown.area-dropdown .unit-opt { padding: 4px 6px; text-align: left; }
.inline-edit-popover.unit-dropdown.area-dropdown .area-group-label {
font-size: 10px; color: var(--text-3); padding: 4px 6px 2px;
border-bottom: 1px dashed var(--border); margin-top: 2px; white-space: nowrap;
}
.inline-edit-popover.unit-dropdown.area-dropdown .area-group-label:first-child { margin-top: 0; }
.inline-edit-popover.unit-dropdown.area-dropdown .unit-custom-hint-row { justify-content: flex-start; }
.inline-edit-popover.unit-dropdown.area-dropdown .area-custom-cta {
border-top: 1px dashed var(--border); margin-top: 3px; padding-top: 6px;
color: var(--text-3); font-size: 11px;
}
.inline-edit-popover.unit-dropdown.area-dropdown .area-custom-cta:hover { color: var(--accent); }
/* 区域下拉：隐藏滚动条（保留滚动交互），仅视觉去除滑块/轨道 */
.inline-edit-popover.unit-dropdown.area-dropdown { scrollbar-width: none; -ms-overflow-style: none; }
.inline-edit-popover.unit-dropdown.area-dropdown::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* 区域·自定义 popover（双击触发，比单位宽） */
.inline-edit-popover.unit-custom-edit.area-custom-edit { min-width: 148px; max-width: 176px; }
.inline-edit-popover.unit-custom-edit.area-custom-edit .uce-input { letter-spacing: 0; }
/* 抽屉区域编辑：分组标签 + 自定义输入行 */
.drawer-edit-opts .area-group-label {
font-size: 10px; color: var(--text-3); padding: 4px 6px 2px; white-space: nowrap;
}
.drawer-edit-opts .unit-custom-hint-row {
font-size: 10px; color: var(--text-3); padding: 3px 6px;
border-bottom: 1px dashed var(--border); margin-bottom: 4px;
}
.drawer-edit-opts .drawer-area-custom { padding: 6px 4px 2px; border-top: 1px dashed var(--border); margin-top: 4px; }
.drawer-edit-opts .drawer-area-custom .uce-input {
border: 1px solid var(--border); background: var(--bg); border-radius: 6px;
padding: 5px 8px; font-size: 12px; color: var(--text); outline: none;
box-sizing: border-box; width: 100%;
}
.drawer-edit-opts .drawer-area-custom .uce-input:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.row .actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; position: relative; }
/* 居中列：设计 / 状态 / 参考 / 预览 / 源文件 / 操作（表头与内容同步） */
.row [data-label="操作"] { text-align: right; justify-self: end; }
.row [data-label="操作"].actions { justify-content: flex-end; }
/* ---------- 行内操作菜单 ---------- */
.row-menu-btn {
position: relative; /* anchor for hover tooltip */
background: transparent; border: 1px solid transparent; padding: 4px 9px; border-radius: 8px;
color: var(--text-2); cursor: pointer; transition: .12s;
display: inline-flex; align-items: center; justify-content: center;
}
.row-menu-btn:hover, .row-menu-btn.open { background: var(--surface-2); color: var(--text); border-color: var(--border); }
/* 悬浮即出「更多操作」自定义提示（瞬时、无系统 title 延迟）*/
.row-menu-btn::after {
content: "更多操作";
position: absolute;
top: calc(100% + 8px); left: 50%;
transform: translateX(-50%);
background: #1f2937; color: #fff;
padding: 5px 10px; border-radius: 6px;
font-size: 12px; line-height: 1; white-space: nowrap;
pointer-events: none;
opacity: 0; transition: opacity .12s ease;
z-index: 20;
}
.row-menu-btn:hover::after { opacity: 1; }
.row-menu-btn.open::after { opacity: 0; } /* 菜单已展开：不再叠提示 */
.menu-pop {
position: absolute; right: 0; top: calc(100% + 4px); min-width: 150px; z-index: 50;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg); padding: 6px; display: none;
}
.menu-pop.open { display: block; }
.menu-item {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 8px 10px; background: transparent; border: 0; border-radius: 6px;
font-size: 13px; color: var(--text); cursor: pointer; transition: background .1s;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item.primary { color: var(--accent); font-weight: 600; }
.menu-item.primary:hover { background: var(--accent-soft); }
.menu-item .mi-ic { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row .who { font-size: 13px; color: var(--text-2); }
.row [data-col="owner"], .row [data-col="status"], .row [data-col="manager"] { text-align: center; }
.row .sel-cb, #sel-all { width: 15px; height: 15px; cursor: pointer; accent-color: var(--accent); }
/* ---------- Selection bar (export) ---------- */
.selbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; background: var(--accent-soft); border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0; }
[data-theme="dark"] .selbar { background: #15233b; }
.selbar .sel-info { font-size: 13px; font-weight: 600; color: var(--text); }
/* 选中信息内联到 page-head 右侧（编辑清单左侧），避免选择切换时页面抖动 */
.page-head-right { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
/* 注意：元素只有 id="sel-inline" 没有 class，需用 id 选择器 */
#sel-inline { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--accent-soft); border-radius: 999px; color: var(--text); font-size: 13px; white-space: nowrap; flex-shrink: 0; }
[data-theme="dark"] #sel-inline { background: #15233b; }
#sel-inline .sel-info { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
#sel-inline .sel-info b { color: var(--accent); }
#sel-inline:empty { padding: 0; background: transparent; }
.panel.tight { border-top-left-radius: 0; border-top-right-radius: 0; }
/* 结算表：仅展示与计费、对账相关的 6 列（项目/数量/单价/总价/设计/原图） */
.row.settle, .panel .row.settle { grid-template-columns: minmax(220px, 1.6fr) 80px 70px 100px 110px minmax(140px, 1fr) 80px; gap: 14px; justify-items: stretch; min-width: max(100%, 900px); }
.row.settle.settle-total { background: var(--surface-2); font-weight: 600; color: var(--text); border-bottom: none; }
.row.settle.settle-total > div { white-space: nowrap; }
.row.settle .total-amount { color: var(--accent); font-weight: 700; text-align: right; }
/* ---------- 结算方式切换（分段控件，极简互联网风） ---------- */
/* ⚠️ 已去掉「结算方式」文字标签（直接显示 逐项价 / 一口价 + 提交结算按钮） */
.settle-mode { display: flex; align-items: center; gap: 6px; margin: 2px 0 12px; }
.settle-mode .sm-chip { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 600; }
.seg { display: inline-flex; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.seg-btn { appearance: none; border: none; background: transparent; cursor: pointer; padding: 6px 18px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: all .18s ease; white-space: nowrap; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
/* ---------- 一口价合计卡 ---------- */
.settle-lump { margin-top: 4px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.settle-lump .sl-label { font-size: 13px; color: var(--text-2); font-weight: 500; letter-spacing: .04em; }
.settle-lump .sl-amount { font-size: 44px; line-height: 1.15; font-weight: 800; color: var(--text); margin: 10px 0 6px; letter-spacing: -.01em; cursor: default; }
.settle-lump .sl-amount[data-action="settle-lump-edit"] { cursor: pointer; border-radius: 10px; padding: 0 8px; transition: background .15s ease; }
.settle-lump .sl-amount[data-action="settle-lump-edit"]:hover { background: var(--accent-soft); color: var(--accent); }
.settle-lump .sl-amount[data-action="settle-lump-edit"]::after { content: '✎'; font-size: 18px; font-weight: 400; color: var(--text-3); margin-left: 10px; vertical-align: middle; }
.settle-lump .sl-sub { font-size: 12px; color: var(--text-3); }
.settle-lump .sl-toggle { margin-top: 18px; appearance: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: all .15s ease; }
.settle-lump .sl-toggle:hover { color: var(--accent); border-color: var(--accent); }
.settle-lump .sl-toggle svg { width: 14px; height: 14px; transition: transform .2s ease; }
.settle-lump .sl-toggle.open svg { transform: rotate(180deg); }
.settle-lump .sl-detail { width: 100%; max-width: 520px; margin-top: 14px; border-top: 1px dashed var(--border); padding-top: 12px; }
.settle-lump .sl-d-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 6px; font-size: 13px; }
.settle-lump .sl-d-row + .sl-d-row { border-top: 1px solid var(--border); }
.settle-lump .sl-d-name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; text-align: left; }
.settle-lump .sl-d-amt { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
/* 结算表 sticky：项目（220+ 范围）、数量、点位 3 列固定 */
.row.settle > .sticky-col { position: sticky; background: var(--surface); z-index: 2; }
.row.settle.head.settle > .sticky-col, .row.settle.settle.head > .sticky-col { background: var(--surface-2); z-index: 3; }
.row.settle > .sticky-col-1 { left: 0; }
.row.settle > .sticky-col-2 { left: 220px; }
.row.settle > .sticky-col-3 { left: 300px; } /* 220 + 80 */
.row.settle > .sticky-col-3 { box-shadow: 4px 0 8px -6px rgba(0,0,0,.08); }
.panel.no-sel .row { grid-template-columns: 52px 92px minmax(140px, 0.5fr) minmax(170px, 1fr) 80px 60px 56px 88px 100px 124px 108px 72px 64px 104px auto; justify-items: stretch; }
/* ---------- Date picker (wuxinyang.cn 风格) ---------- */
.dp-mask { position: fixed; inset: 0; z-index: 85; display: none; }
.dp-mask.show { display: block; }
.dp-panel {
position: fixed; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
padding: 14px; width: 296px; z-index: 86; font-size: 13px;
animation: dpPopIn .16s ease;
}
@keyframes dpPopIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dp-head .dp-ym { font-weight: 700; font-size: 14px; color: var(--text); cursor: pointer; padding: 4px 10px; border-radius: 6px; transition: .1s; }
.dp-head .dp-ym:hover { background: var(--surface-2); }
.dp-nav { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: .12s; cursor: pointer; }
.dp-nav:hover { background: var(--surface-2); color: var(--accent); }
.dp-nav svg { width: 16px; height: 16px; }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font-size: 11px; color: var(--text-3); padding: 4px 0; font-weight: 600; }
.dp-day {
text-align: center; padding: 7px 0; border-radius: 7px; cursor: pointer; font-size: 13px;
color: var(--text); transition: .1s; min-height: 32px;
display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1px;
}
.dp-day:hover { background: var(--accent-soft); }
.dp-grid > :nth-child(7n+6):not(.sel):not(.other),
.dp-grid > :nth-child(7n+7):not(.sel):not(.other) { color: var(--accent); }
.dp-day.other { color: var(--text-3); opacity: .55; }
.dp-grid > :nth-child(7n+6).other,
.dp-grid > :nth-child(7n+7).other { color: rgba(60,131,246, .42); }
.dp-day.today { color: var(--accent); font-weight: 700; }
.dp-day.today::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.dp-day.sel { background: var(--accent); color: #fff; font-weight: 700; }
.dp-day.sel.today::after { background: #fff; }
.dp-day.disabled { cursor: default; opacity: .3; }
.dp-day.disabled:hover { background: none; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.dp-foot button { font-size: 12px; padding: 6px 12px; border-radius: 6px; color: var(--text-3); min-height: 32px; font-weight: 500; background: none; border: none; cursor: pointer; transition: .1s; }
.dp-foot button:hover { background: var(--surface-2); color: var(--accent); }
.dp-foot .dp-clear { color: #dc2626; }
.dp-foot .dp-clear:hover { background: #fef2f2; color: #dc2626; }
.dp-input {
width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--border);
border-radius: var(--radius-sm); background: var(--surface); cursor: pointer;
color: var(--text); font-size: 14px; transition: border-color .12s, box-shadow .12s;
display: flex; align-items: center;
}
.dp-input:hover { border-color: var(--border-strong); }
.dp-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dp-input.empty { color: var(--text-3); }
.dp-quick { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.dp-quick button {
padding: 5px 10px; border-radius: 6px; background: var(--surface-2); font-size: 11.5px;
color: var(--text-3); min-height: 28px; border: none; cursor: pointer; transition: .1s; font-weight: 500;
}
.dp-quick button:hover { background: var(--accent-soft); color: var(--accent); }
.dp-years, .dp-months { display: grid; gap: 8px; margin-bottom: 8px; }
.dp-years { grid-template-columns: repeat(4, 1fr); }
.dp-months { grid-template-columns: repeat(3, 1fr); }
.dp-year, .dp-month {
text-align: center; padding: 10px 0; border-radius: 8px; cursor: pointer; font-size: 14px;
color: var(--text); transition: .1s;
}
.dp-year:hover, .dp-month:hover { background: var(--accent-soft); }
.dp-year.cur, .dp-month.cur { background: var(--accent); color: #fff; font-weight: 600; }
.dp-expire-row { display: flex; gap: 8px; align-items: stretch; }
.dp-expire-row .dp-input { flex: 1; }
.dp-expire-row .btn { white-space: nowrap; }
/* ---------- Modal ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(10,10,12,.45); display: grid; place-items: center; z-index: 70; padding: 20px; }
.modal { width: 520px; max-width: 96vw; max-height: 88vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 16px; font-weight: 600; }
.modal-body { padding: 22px; }
.modal-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.x-btn { background: none; border: none; color: var(--text-3); font-size: 20px; line-height: 1; }
/* 确认弹窗（替代原生 confirm），独立根节点，z-index 高于普通 modal */
.confirm-mask { position: fixed; inset: 0; background: rgba(10,10,12,.45); display: grid; place-items: center; z-index: 80; padding: 20px; }
.confirm-modal, .modal.dd-link-modal { width: 420px; max-width: 96vw; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.confirm-modal .modal-head, .modal.dd-link-modal .modal-head { border-bottom: none; padding-bottom: 0; }
.confirm-msg { color: var(--text-2); line-height: 1.7; font-size: 14px; }
.btn.danger-solid { background: #dc2626; border-color: #dc2626; color: #fff; }
.btn.danger-solid:hover { background: #b91c1c; border-color: #b91c1c; }
/* ---------- Form ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.field input, .field textarea, .field select {
width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text); outline: none; transition: .12s; min-height: 42px;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* 表单内的勾选框/单选框不按文本输入框拉伸（2026-10-11 修复「页面可见权限」勾选框过大） */
.field input[type="checkbox"], .field input[type="radio"] {
width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; flex: none;
accent-color: var(--accent); cursor: pointer;
}
.field input[type="checkbox"]:focus, .field input[type="radio"]:focus { box-shadow: none; }
.field textarea { resize: vertical; min-height: 72px; }
/* 表单 select：替换浏览器默认箭头 + 控蓝色 ✓，保持跟 .dd 视觉一致 */
.field select {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
padding-right: 36px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px 8px;
accent-color: var(--accent);
}
.field select:disabled { background-image: none; padding-right: 12px; }
/* 打开后的 option 列表：贴合 wuxinyang 卡片风格（Chromium / Safari 生效；Win Firefox 部分属性会忽略） */
.field select option {
padding: 10px 14px;
font-size: 14px;
color: var(--text);
background: var(--surface);
}
.field select option:checked { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
/* 父级 :focus 时让当前选中项呈主蓝白字（macOS Safari 行为对齐 .dd-item.selected） */
.field select:focus option:checked { background: var(--accent); color: #fff; }
.inline-form { display: flex; gap: 8px; align-items: center; }
.inline-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); outline: none; transition: .12s; min-height: 42px; }
.inline-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hint { color: var(--text-3); font-size: 12px; margin-top: 5px; }
/* ---------- Custom Dropdown（替代浏览器默认