/* ============================================================
考勤统计系统 — 视觉设计系统 v4
风格：蓝色主色 + 冷调中性色 + 琥珀强调 + 统一字体 + 规范间距
============================================================ */
:root {
/* 冷调中性灰（文字/边框，轻微蓝灰更显专业） */
--ink-50: #f7f8fa;
--ink-100: #f1f2f5;
--ink-150: #e3e5ea;
--ink-200: #cfd2d9;
--ink-300: #9fa4ad;
--ink-400: #6f7681;
--ink-500: #525a66;
--ink-600: #3d444f;
--ink-700: #2a303a;
--ink-800: #1a1f27;
--ink-900: #0d1117;
/* 蓝色主色（主题蓝 rgb(0, 113, 227)，Apple 蓝） */
--accent-50: #eaf4ff;
--accent-100: #d5e9ff;
--accent-300: #7ab8f5;
--accent-500: #0071e3;
--accent-600: #0066cc;
--accent-700: #005bb8;
--accent-glow: 0, 113, 227;
/* 琥珀强调色（比旧亮黄更柔和专业） */
--yellow-50: #fffbeb;
--yellow-100: #fef0c9;
--yellow-200: #fce3a1;
--yellow-300: #f6cd6e;
--yellow-400: #eeb92f;
--yellow-500: #d99316;
--yellow-glow: 238, 185, 47;
/* 旧 peach 别名 → 黄色（兼容旧引用） */
--peach-300: var(--yellow-300);
--peach-400: var(--yellow-400);
--peach-500: var(--yellow-500);
--peach-glow: var(--yellow-glow);
/* 状态色 */
--success: #16a34a;
--success-glow: 22, 163, 74;
--warning: #d97706;
--warning-glow: 245, 166, 35;
--danger: #dc2626;
--danger-glow: 220, 38, 38;
--info: #0071e3;
--info-glow: 0, 113, 227;
/* 表面（浅灰底 + 白色卡片/表单） */
--bg-canvas: #eef1f6;
--bg-paper: #ffffff;
--bg-paper-2: #f5f6f9;
--bg-tinted: #f8f9fc;
/* 边框 */
--border-subtle: rgba(100, 116, 139, 0.12);
--border-default: rgba(100, 116, 139, 0.22);
--border-strong: rgba(71, 85, 105, 0.34);
/* 考勤数据表格边框（用户要求统一为 #aaaaaa） */
--border-table: #aaaaaa;
/* 阴影 */
--shadow-xs: 0 1px 2px rgba(15,15,15,0.05);
--shadow-sm: 0 2px 4px rgba(15,15,15,0.05), 0 1px 2px rgba(15,15,15,0.05);
--shadow-md: 0 4px 12px rgba(15,15,15,0.08), 0 1px 3px rgba(15,15,15,0.05);
--shadow-lg: 0 12px 32px rgba(15,15,15,0.10), 0 4px 8px rgba(15,15,15,0.06);
/* 圆角 */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 14px;
--radius-xl: 20px;
/* 间距（4px 基准，规范统一） */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
/* 字体（苹果中国官网字体栈；数字等宽对齐） */
--font-sans: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-serif: var(--font-sans);
--font-mono: "SF Mono", "Cascadia Code", Consolas, monospace;
--ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
/* 兼容旧组件别名（内部仍在使用） */
--brand: var(--accent-500);
--brand-soft: var(--accent-50);
--brand-hover: var(--accent-600);
--brand-softer: #f7faff;
--brand-line: var(--accent-100);
--text-1: var(--ink-700);
--text-2: var(--ink-500);
--text-3: var(--ink-400);
--text-4: var(--ink-300);
--bg-page: var(--bg-canvas);
--bg-card: var(--bg-paper);
--bg-soft: var(--ink-100);
--border-soft: var(--border-subtle);
--border: var(--border-default);
--border-dark: var(--border-strong);
--success-soft: #e9f7ef;
--warning-soft: #fdf6e3;
--danger-soft: #fdecec;
--info-soft: #eaf1fe;
/* 表格（蓝灰底 + 黄色合计/节假日强调） */
--row-a: #ffffff;
--row-b: #f8f9fc;
--col-name-bg: #eef1f6;
--col-dept-bg: #f3f5f9;
--col-metric-bg: #f1f3f8;
--col-total-bg: #fbf5e3;
--col-rest-bg: #eaf1fe;
--col-holiday-bg: #fdf3d4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--font-sans);
color: var(--ink-700);
background: var(--bg-canvas);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent-600); text-decoration: none; }
a:hover { color: var(--accent-700); }
/* ============================================================
布局骨架
============================================================ */
.app-shell {
display: flex; flex-direction: column;
height: 100vh; width: 100vw;
overflow: hidden;
}
/* 顶栏 */
.navbar {
background: rgba(255, 255, 255, 0.86);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--border-default);
padding: 0 24px;
display: flex; align-items: center; height: 56px; gap: 14px;
flex-shrink: 0;
}
.navbar .spacer { flex: 1; }
.navbar a {
color: var(--ink-500); font-size: 15px; padding: 6px 10px; border-radius: 7px;
display: inline-flex; align-items: center; gap: 5px;
}
.navbar a:hover { background: var(--bg-paper-2); color: var(--ink-800); text-decoration: none; }
.sub-info-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px; font-size: 14px;
background: var(--success-soft); color: var(--success);
border: 1px solid rgba(var(--success-glow), 0.20);
}
.sub-info-pill.expired { background: var(--danger-soft); color: var(--danger); border-color: rgba(var(--danger-glow), 0.20); }
.sub-info-pill.none { background: var(--bg-paper-2); color: var(--ink-400); border-color: var(--border-default); }
/* 主体 */
.main-layout {
flex: 1; min-height: 0;
display: flex; flex-direction: row;
}
/* ============================================================
侧栏
============================================================ */
.sidebar {
width: 216px; flex-shrink: 0;
background: var(--bg-tinted);
border-right: 1px solid var(--border-default);
display: flex; flex-direction: column;
overflow: hidden;
}
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
padding: 20px 20px 16px; flex-shrink: 0;
}
.sidebar-brand .logo {
width: 32px; height: 32px; border-radius: 9px;
background: linear-gradient(135deg, var(--ink-700), var(--ink-900));
display: flex; align-items: center; justify-content: center;
color: var(--accent-300);
}
.sidebar-brand .title {
font-size: 19px; font-weight: 700; color: var(--ink-700);
letter-spacing: 0.01em;
}
.sidebar-brand .sub { font-size: 12px; color: var(--ink-400); letter-spacing: 0.06em; margin-top: 1px; }
.sidebar-nav { flex: 1; padding: 4px 14px; overflow-y: auto; }
.sidebar-nav .group-label {
font-size: 12.5px; letter-spacing: 0.10em; text-transform: uppercase;
color: var(--ink-400); font-weight: 600;
padding: 14px 10px 6px;
}
.side-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: 8px;
cursor: pointer; font-size: 15px; font-weight: 500;
color: var(--ink-500); margin-bottom: 2px;
user-select: none; transition: all .18s var(--ease-out-quart);
position: relative;
}
.side-item:hover { background: var(--bg-paper-2); color: var(--ink-800); }
.side-item.active { background: var(--accent-500); color: #fff; font-weight: 600; }
.side-item.active:hover { background: var(--accent-600); color: #fff; }
.side-item .icon { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-400); transition: color .18s; }
.side-item.active .icon { color: #fff; }
.side-item .badge { margin-left: auto; }
.sidebar-bottom { border-top: 1px solid var(--border-subtle); padding: 12px 14px; flex-shrink: 0; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sidebar-user:hover { background: var(--bg-paper-2); }
.sidebar-user .avatar {
width: 30px; height: 30px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
color: #fff; display: flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 14px;
}
.sidebar-user .u-info { flex: 1; min-width: 0; }
.sidebar-user .u-name { font-size: 14.5px; font-weight: 600; color: var(--ink-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .u-role { font-size: 13px; color: var(--ink-400); }
/* ============================================================
内容区
============================================================ */
.content {
flex: 1; min-width: 0; min-height: 0;
display: flex; flex-direction: column;
padding: 28px 36px;
overflow: hidden;
}
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; min-width: 0; }
.page-header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-shrink: 0; }
.page-title { font-size: 15px; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; }
.page-sub { font-size: 15px; color: var(--ink-400); margin-top: 2px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; }
.page-header .grow { flex: 1; }
/* ============================================================
卡片
============================================================ */
.card {
background: var(--bg-paper);
border: none;
border-radius: var(--radius-lg);
padding: 24px;
margin-bottom: 16px;
box-shadow: 0 1px 3px rgba(15, 15, 15, 0.06), 0 6px 20px rgba(15, 15, 15, 0.05);
}
.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.card-title { font-size: 17px; font-weight: 600; color: var(--ink-800); }
.card-sub { font-size: 14px; color: var(--ink-400); margin-left: 8px; }
.card-actions { margin-left: auto; display: flex; gap: 8px; }
/* 工作台/历史数据：这些容器需填满页面并内部滚动（高度链） */
.app-shell #view-projects,
.app-shell #view-project {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
overflow: hidden;
}
.app-shell #view-projects .card,
.app-shell #view-project .card,
.app-shell #page-history .card,
.app-shell #page-history-detail .card {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
overflow: hidden;
margin-bottom: 0;
}
/* ============================================================
统计看板
============================================================ */
.stat-grid {
display: grid; gap: 12px;
grid-template-columns: repeat(4, 1fr);
margin-bottom: 16px; flex-shrink: 0;
}
.stat-card {
background: var(--bg-paper);
border: none;
border-radius: var(--radius-md);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 5px;
position: relative; overflow: hidden;
}
.stat-card .stat-label { font-size: 14px; color: var(--ink-500); }
.stat-card .stat-value { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--ink-800); line-height: 1.15; }
.stat-card .stat-extra { font-size: 13px; color: var(--ink-400); }
.stat-card .stat-icon {
position: absolute; top: 16px; right: 16px;
width: 30px; height: 30px; border-radius: 8px;
background: var(--yellow-100); color: var(--yellow-500);
display: flex; align-items: center; justify-content: center;
}
.stat-card.green .stat-icon { background: var(--success-soft); color: var(--success); }
.stat-card.blue .stat-icon { background: var(--info-soft); color: var(--info); }
.stat-card.yellow .stat-icon { background: var(--yellow-100); color: var(--yellow-500); }
/* ============================================================
按钮
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
border: 1px solid var(--accent-100); background: var(--accent-50);
color: var(--accent-700);
padding: 8px 14px; border-radius: var(--radius-md); cursor: pointer;
font-size: 15px; font-family: inherit; line-height: 1.2;
transition: all .18s var(--ease-out-quart);
white-space: nowrap;
}
/* 用户要求（20260910o，口径最终纠正）：按钮上保留手指光标；
user-select:none 禁止选中按钮文字，消除按钮内出现的文字竖线光标（I-beam） */
.btn, button { cursor: pointer; user-select: none; -webkit-user-select: none; }
/* 全局兜底（20260910o-2）：所有按钮/可点击元素一律禁止文字竖线光标——
[onclick] 覆盖 div/span/a/label 充当按钮的元素（chip、模板卡片、年月数值、
面包屑链接、下载示例、整行勾选等），类名逐个兜住已知按钮样式 */
.btn, button, [onclick], .chip, .tpl-card, .tpl-dl, .page-num,
.crumb-link, .crumb-cur, .ym-year-val, .ym-nav, .fmt-remember,
.modal-close, .tpl-preview-btn, a.btn, .emp-row-btn, .row-btn {
user-select: none; -webkit-user-select: none;
}
/* 默认按钮即浅蓝风格（与请假管理按钮统一）；白底按钮样式已全局废弃 */
.btn:not(:disabled):hover { background: var(--accent-100); border-color: var(--accent-300); color: var(--accent-700); }
.btn-primary { background: var(--accent-600); border-color: var(--accent-700); color: #fff; }
.btn-primary:not(:disabled):hover { background: var(--accent-700); border-color: var(--accent-700); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--accent-glow), 0.42); }
/* 例外：计算考勤右上角归档/导出按钮保留默认阴影 */
#btn-archive { box-shadow: none; }
/* 绿色描边按钮：白底绿字（考勤统计右上角「预览」「归档」），hover 浅绿底 */
.btn-greenline { background: #fff; border-color: var(--ink-200); color: #16a34a; }
.btn-greenline:not(:disabled):hover {
background: #bbf7d0; border-color: #4ade80; color: #15803d;
}
.btn-greenline:active { transform: translateY(0); box-shadow: none; }
/* 蓝色描边按钮：白底蓝边蓝字 */
.btn-outline { background: var(--bg-paper); border: 1px solid var(--accent-500); color: var(--accent-600); }
.btn-outline:not(:disabled):hover { background: var(--accent-50); border-color: var(--accent-600); color: var(--accent-700); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:not(:disabled):hover { background: #15803d; border-color: #15803d; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:not(:disabled):hover { background: #b91c1c; border-color: #b91c1c; }
.btn-accent { background: var(--accent-500); border-color: var(--accent-600); color: #fff; }
.btn-accent:not(:disabled):hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--accent-glow), 0.30); }
.btn-yellow { background: var(--yellow-400); border-color: var(--yellow-400); color: #3d2e00; }
.btn-yellow:not(:disabled):hover { background: var(--yellow-300); border-color: var(--yellow-300); color: #3d2e00; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--yellow-glow), 0.35); }
/* 中性幽灵按钮：跟随浅蓝基调和（弹窗 ✕ 关闭、清空输入等） */
.btn-ghost { background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700); }
.btn-ghost:not(:disabled):hover { background: var(--accent-100); border-color: var(--accent-300); color: var(--accent-700); }
.btn-sm { padding: 5px 10px; font-size: 14px; border-radius: 6px; }
.btn-lg { padding: 11px 20px; font-size: 16px; border-radius: 10px; }
.btn-xl { padding: 13px 44px; font-size: 17px; border-radius: 10px; font-weight: 600; }
/* 规则设置底部固定保存栏（位于滚动区之外，卡片底部固定行，绝无透底） */
.cfg-save-bar {
flex-shrink: 0;
display: flex; justify-content: center;
margin-top: 12px; padding: 14px 0 2px;
border-top: 1px solid var(--border-subtle);
}
.cfg-save-bar .btn { min-width: 220px; }
/* 绿色保存按钮（#16a34a）+ 同色投影增强立体感 */
.btn-green { background: #16a34a; border-color: #15803d; color: #fff; }
.btn-green:not(:disabled):hover { background: #15803d; border-color: #166534; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(22, 163, 74, 0.45); }
.btn-green:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35); }
/* 例外：规则设置「保存规则」（btn-xl 绿色）保留默认阴影 */
.btn-green.btn-xl { box-shadow: 0 6px 18px rgba(22, 163, 74, 0.38); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* 浅蓝色按钮（20260914l）：规则设置-显示与导出标题右侧的表格配置入口 */
.btn-blue { background: #e8f2ff; border-color: #b9d7fa; color: #1667d9; }
.btn-blue:not(:disabled):hover { background: #d7e9ff; border-color: #9cc6f8; color: #0f5cc4; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(22, 103, 217, 0.22); }
.btn-blue:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(22, 103, 217, 0.18); }
/* 全局兜底：任何禁用按钮（含未挂 .btn 类的原生按钮）一律显示禁止光标 */
button:disabled, .btn:disabled { cursor: not-allowed !important; }
/* 项目页头操作按钮：预览/归档已改用 .btn-greenline 白底绿字；导出=主蓝 */
#btn-export {
background: var(--accent-600); border-color: var(--accent-700); color: #fff;
box-shadow: var(--shadow-sm);
}
#btn-export:not(:disabled):hover {
background: var(--accent-700); border-color: var(--accent-700); color: #fff;
transform: translateY(-1px); box-shadow: 0 6px 18px rgba(var(--accent-glow), 0.35);
}
input, select, textarea {
border: 1px solid var(--border-default); border-radius: var(--radius-md);
padding: 8px 11px; font-size: 15.5px; font-family: inherit;
background: var(--bg-paper); color: var(--ink-800); outline: none;
transition: border-color .18s, box-shadow .18s;
}
input:focus, select:focus, textarea:focus {
border-color: var(--accent-500);
box-shadow: 0 0 0 4px rgba(var(--accent-glow), 0.10);
}
/* ============================================================
标签 / 徽章 / 横幅
============================================================ */
.badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 4px; font-size: 14px; }
.badge-ok { background: var(--success-soft); color: var(--success); }
.badge-off { background: var(--danger-soft); color: var(--danger); }
.badge-warn { background: var(--warning-soft); color: var(--warning); }
.badge-gray { background: var(--bg-paper-2); color: var(--ink-400); }
.badge-brand { background: var(--accent-50); color: var(--accent-700); }
.banner {
padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 15px;
display: flex; align-items: center; gap: 8px;
}
.banner-warn { background: var(--warning-soft); color: #92590a; border: 1px solid #ebd4a3; }
.banner-err { background: var(--danger-soft); color: #b02a2a; border: 1px solid #f0c8c8; }
.banner-ok { background: var(--success-soft); color: #2f6b44; border: 1px solid #c4e2cc; }
.banner-info { background: var(--info-soft); color: #1e5690; border: 1px solid #c2d8ee; }
/* 顶部提醒浮层：固定定位不占文档流（显示/隐藏不再顶动页面内容，杜绝抖动）；
成功=绿色系、失败/报错=红色系，毛玻璃质感，带浮入动画
z-index 2000：必须高于 .de-overlay(1000) / .de-pop-mask(1090) / .de-pop(1100)，
否则在「配置考勤明细表格格式 / 配置考勤汇总表格格式」这类全屏子页面上提示会被盖住看不见（20260914u） */
#msg.banner {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
z-index: 2000; margin: 0;
width: max-content; max-width: min(560px, calc(100vw - 32px));
box-shadow: 0 10px 28px rgba(15, 15, 15, 0.14);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: 10px;
padding: 10px 16px; font-size: 14px; line-height: 1.5;
animation: msg-in .18s ease-out;
}
#msg.banner::before {
content: ''; width: 8px; height: 8px; border-radius: 50%;
flex-shrink: 0;
}
#msg.msg-success {
background: rgba(22, 163, 74, 0.08);
border: 1px solid rgba(22, 163, 74, 0.55);
color: #15803d;
box-shadow: 0 10px 28px rgba(15, 15, 15, 0.14), 0 2px 6px rgba(22, 163, 74, 0.10);
}
#msg.msg-success::before { background: #16a34a; }
#msg.msg-error {
background: rgba(220, 38, 38, 0.08);
border: 1px solid rgba(220, 38, 38, 0.55);
color: #b91c1c;
box-shadow: 0 10px 28px rgba(15, 15, 15, 0.14), 0 2px 6px rgba(220, 38, 38, 0.10);
}
#msg.msg-error::before { background: #dc2626; }
@keyframes msg-in {
from { opacity: 0; transform: translate(-50%, -8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ============================================================
工具栏 / 列表卡片
============================================================ */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; flex-shrink: 0; position: relative; z-index: 20; }
.toolbar .grow { flex: 1; }
.toolbar select { min-width: 96px; }
.muted { color: var(--ink-400); font-size: 14.5px; }
.list-card {
background: var(--bg-paper);
border: none;
border-radius: var(--radius-lg);
padding: 6px;
margin-bottom: 12px; flex-shrink: 0;
}
.list-item {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px;
background: var(--bg-paper-2);
border-radius: 12px;
margin-bottom: 8px;
cursor: pointer; transition: background .15s, box-shadow .15s;
}
.list-item:last-child { margin-bottom: 0; }
.list-item:hover { background: var(--bg-canvas); }
.list-icon {
width: 44px; height: 44px; border-radius: 10px;
background: var(--accent-50); color: var(--accent-600);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.list-icon.green { background: var(--success-soft); color: var(--success); }
.list-icon.blue { background: var(--info-soft); color: var(--info); }
.list-body { flex: 1; min-width: 0; }
.list-title { font-size: 17px; font-weight: 600; color: var(--ink-800); display: flex; align-items: center; gap: 8px; }
/* 项目列表：标题右侧统计年月徽章（醒目，沿用主色） */
.proj-period {
display: inline-flex; align-items: center; flex-shrink: 0;
font-size: 13px; font-weight: 700; letter-spacing: 0.01em;
color: var(--accent-700); background: var(--accent-50);
border: 1px solid rgba(var(--accent-glow), 0.28);
border-radius: 999px; padding: 2px 10px;
}
.list-meta { font-size: 14px; color: var(--ink-400); margin-top: 4px; display: flex; gap: 12px; flex-wrap: wrap; }
.list-actions { display: flex; gap: 8px; flex-shrink: 0; }
.empty-state {
text-align: center; padding: 60px 20px; color: var(--ink-400);
border: 1px dashed var(--border-default); border-radius: var(--radius-md);
}
.empty-state .empty-icon { font-size: 50px; opacity: 0.4; margin-bottom: 8px; }
/* ============================================================
个人信息
============================================================ */
.profile-hero {
background: linear-gradient(160deg, #005bb8 0%, #0071e3 100%);
border-radius: var(--radius-lg);
padding: 28px 32px;
display: flex; align-items: center; gap: 20px;
color: #fff; margin-bottom: 16px;
position: relative; overflow: hidden;
}
.profile-hero::before {
content: ''; position: absolute; top: -30%; right: -15%;
width: 220px; height: 220px;
background: radial-gradient(circle, rgba(238, 185, 47, 0.26), transparent 70%);
}
.profile-hero .avatar-lg {
width: 72px; height: 72px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
display: flex; align-items: center; justify-content: center;
font-size: 32px; font-weight: 700; flex-shrink: 0;
border: 3px solid rgba(255,255,255,0.15);
}
.profile-hero .p-name { font-size: 24px; font-weight: 600; position: relative; }
.profile-hero .p-role { font-size: 15px; opacity: 0.85; margin-top: 4px; position: relative; }
.profile-hero .p-id { font-family: var(--font-mono); font-size: 14px; opacity: 0.7; margin-top: 2px; position: relative; }
.info-list { display: flex; flex-direction: column; }
.info-row {
display: flex; align-items: center; padding: 14px 0;
border-bottom: 1px solid var(--border-subtle); font-size: 16px;
}
.info-row:last-child { border-bottom: none; }
.info-row .k { width: 110px; color: var(--ink-400); flex-shrink: 0; }
.info-row .v { flex: 1; color: var(--ink-800); font-weight: 500; }
/* ============================================================
全员总览大表
============================================================ */
.grid-wrap {
flex: 1 1 0; min-height: 0; height: 0;
overflow: auto;
border: 1px solid var(--border-table);
border-radius: 8px;
background: var(--bg-paper);
}
/* 考勤结果：表格可滚动区 + 分页（分页在表格外、固定在底部，不随表格滚动） */
.summary-wrap {
flex: 1 1 0; min-height: 0; height: 0;
display: flex; flex-direction: column; overflow: hidden;
}
.summary-wrap > .grid-wrap { flex: 1 1 0; }
table.grid-full {
border-collapse: separate; border-spacing: 0;
width: max-content; min-width: 100%;
table-layout: fixed; font-size: 15px;
}
table.grid-full th, table.grid-full td {
border-right: 1px solid var(--border-table);
border-bottom: 1px solid var(--border-table);
padding: 4px 6px; text-align: center; white-space: nowrap; height: 28px;
color: #000; font-weight: 400;
}
table.grid-full thead th {
background: var(--bg-paper-2); font-weight: 700; color: #000;
position: sticky; top: 0; z-index: 3; border-bottom: 1px solid #aaaaaa;
}
table.grid-full thead .sub { font-weight: 400; font-size: 13px; color: #000; }
table.grid-full th.col-seq, table.grid-full td.col-seq {
width: 44px; min-width: 44px;
position: sticky; left: 0; z-index: 2; font-weight: 400; color: #000;
background: var(--col-name-bg);
}
table.grid-full th.col-name, table.grid-full td.col-name {
width: 86px; min-width: 86px;
position: sticky; left: 44px; z-index: 2; background: var(--col-name-bg);
white-space: normal; word-break: break-all; line-height: 1.35;
}
table.grid-full th.col-dept, table.grid-full td.col-dept {
width: 86px; min-width: 86px;
position: sticky; left: 130px; z-index: 2; background: var(--col-dept-bg);
white-space: normal; word-break: break-all; line-height: 1.35;
}
table.grid-full th.col-metric, table.grid-full td.col-metric {
width: 86px; min-width: 86px;
position: sticky; left: 216px; z-index: 2; background: var(--col-metric-bg);
}
table.grid-full.view-detail th.col-metric, table.grid-full.view-detail td.col-metric { left: 0 !important; }
table.grid-full thead th.col-seq, table.grid-full thead th.col-name, table.grid-full thead th.col-dept, table.grid-full thead th.col-metric { z-index: 4; }
table.grid-full th.col-day, table.grid-full td.col-day { width: 52px; min-width: 52px; }
table.grid-full th.col-total, table.grid-full td.col-total {
width: 78px; min-width: 78px; background: var(--col-total-bg);
position: sticky; right: 0; z-index: 2;
}
table.grid-full thead th.col-total { z-index: 4; }
/* 汇总列（20260914v）：字段与顺序来自「配置考勤明细表格格式」，非固定列；
每名员工纵向合并居中。20260914w：列宽收窄（86→60px），标题文字折行。
20260916a：不再填充黄色 —— 与整行底色一致（白底黑字），表头与其它列表头同色 */
table.grid-full th.col-summary, table.grid-full td.col-summary {
width: 60px; min-width: 60px; white-space: normal; line-height: 1.35;
color: var(--ink-900);
}
table.grid-full tr.block-a td { background-color: var(--row-a); }
table.grid-full tr.block-b td { background-color: var(--row-b); }
table.grid-full td.rest { background-color: var(--col-rest-bg) !important; }
table.grid-full td.holiday { background-color: var(--col-holiday-bg) !important; }
table.grid-full thead th.rest { background: var(--col-rest-bg); }
table.grid-full thead th.holiday { background: var(--col-holiday-bg); }
table.grid-full td.editable { cursor: pointer; color: var(--ink-800); }
table.grid-full td.editable:hover { outline: 2px solid var(--accent-500); outline-offset: -2px; background: var(--accent-50) !important; }
table.grid-full td.editable input { width: 64px; padding: 2px 4px; text-align: center; font-size: 14px; }
/* 人工修改过的单元格：右上角蓝色角标（悬停显示原值/新值） */
table.grid-full td.edited { position: relative; }
table.grid-full td.edited::after {
content: ''; position: absolute; top: 0; right: 0;
width: 0; height: 0; border-style: solid;
border-width: 0 8px 8px 0; border-color: transparent #0071e3 transparent transparent;
}
/* 状态配色：迟到(黄)/早退(蓝)/缺卡缺勤(红) — 迟到标记在「上班」卡、早退标记在「下班」卡 */
table.grid-full td.c-late { background: #fdf3d0 !important; color: #8a5c0a; }
table.grid-full td.c-early { background: #e5f1ff !important; color: #0066cc; }
table.grid-full td.c-missing { background: #ffdada !important; color: #a01a1a; font-weight: 600; }
/* 表格右上角颜色图例 */
.table-legend {
display: flex; gap: 14px; justify-content: flex-end;
margin-bottom: 0; font-size: 13px; color: var(--ink-500);
flex-wrap: wrap; flex-shrink: 0;
}
.lg-item { display: inline-flex; align-items: center; gap: 5px; }
.lg-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(71,85,105,0.25); }
.lg-dot.c-late { background: #fdf3d0; }
.lg-dot.c-early { background: #e5f1ff; }
.lg-dot.c-missing { background: #ffdada; }
/* 请假导入：模板格式选择弹窗 */
.tpl-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.tpl-card {
border: 1.5px solid var(--line, #e2e8f0); border-radius: 10px;
padding: 12px 12px 14px; text-align: center; cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 10px;
transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tpl-card:hover {
border-color: var(--accent-500, #2563eb);
box-shadow: 0 4px 14px rgba(37, 99, 235, .12);
transform: translateY(-2px);
}
.tpl-thumb {
position: relative; width: 100%; height: 190px; border-radius: 6px; overflow: hidden;
background: #f8fafc; border: 1px solid var(--line, #e2e8f0);
display: flex; align-items: center; justify-content: center;
}
.tpl-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 鼠标经过缩略图出现「预览大图」按钮 */
.tpl-preview-btn {
position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 12px; border-radius: 6px; border: none; cursor: pointer;
font-size: 12.5px; color: #fff; background: rgba(15, 23, 42, .68);
opacity: 0; pointer-events: none; transition: opacity .15s;
white-space: nowrap;
}
.tpl-card:hover .tpl-preview-btn { opacity: 1; pointer-events: auto; }
.tpl-preview-btn:hover { background: rgba(15, 23, 42, .88); }
/* 标题固定两行高度，下载按钮贴底对齐 */
.tpl-name {
font-size: 13.5px; font-weight: 600; color: var(--ink-900, #0f172a);
min-height: 20px; line-height: 20px;
}
/* 格式要求备注：左对齐浅底说明块（20260910h）；文字允许复制（20260910s 放行 user-select） */
.tpl-req {
width: 100%; text-align: left;
font-size: 12px; line-height: 1.65; color: #64748b;
background: var(--bg-soft, #f8fafc);
border: 1px solid var(--line, #e2e8f0); border-radius: 7px;
padding: 8px 10px;
user-select: text !important; -webkit-user-select: text !important;
}
.tpl-dl {
font-size: 12.5px; color: var(--accent-600, #2563eb);
text-decoration: none; padding: 2px 8px; border-radius: 5px;
margin-top: auto;
}
.tpl-dl:hover { background: var(--accent-50, #eff6ff); }
/* 缩略图大图预览（点击遮罩关闭） */
.img-preview-mask {
position: fixed; inset: 0; z-index: 1000;
background: rgba(15, 23, 42, .78);
display: flex; align-items: center; justify-content: center;
cursor: zoom-out;
}
.img-preview-mask img {
max-width: 92vw; max-height: 92vh; border-radius: 8px;
box-shadow: 0 12px 48px rgba(0, 0, 0, .5);
background: #fff;
}
.tpl-note { font-size: 12.5px; margin-top: 14px; line-height: 1.7; }
.tpl-note a { color: var(--accent-600, #2563eb); margin-left: 4px; }
/* 考勤格式弹窗（20260910k）：备注块内文字黑色 14px，下载示例内联在文字末尾 */
#att-import-format-modal .tpl-req {
font-size: 14px; line-height: 1.7; color: var(--ink-900, #0f172a);
}
#att-import-format-modal .tpl-req .tpl-dl {
font-size: 14px; font-weight: 600; margin-top: 0; white-space: nowrap;
transition: background .15s, color .15s;
}
#att-import-format-modal .tpl-req .tpl-dl:hover {
background: var(--accent-100, #dbeafe); color: var(--accent-700, #1d4ed8);
}
#att-import-format-modal .tpl-name { font-size: 14px; text-align: center; min-height: auto; }
/* 考勤格式卡片一行三列（20260913a；请假导入弹窗仍用 .tpl-grid 两列不受影响） */
#att-import-format-modal #att-tpl-grid {
grid-template-columns: repeat(3, 1fr); gap: 14px;
}
/* 扣款阶梯行（20260913b）：一格 = 标签 + 输入 + 单位；标签用深色（20260913d 设置内容黑字，备注仍灰）
20260913e：阶梯区域内文字统一 14px（输入框文字与「迟到≤」等标签一致） */
.ladder-cell { display: inline-flex; align-items: center; gap: 4px; }
.ladder-lbl { font-size: 14px; color: var(--ink-700); white-space: nowrap; }
.ladder-row .interval-input,
.ladder-cap-line .input { width: 76px; font-size: 14px; padding: 6px 8px; }
.ladder-cap-line .input { width: 96px; }
.ladder-row .interval-unit { font-size: 14px; }
.ladder-grace-lbl { font-size: 14px; }
/* 单日封顶 / 减去宽限独立设置行（20260913c/d）：阶梯下方统一一行；窄列时允许换行 */
.ladder-cap-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ladder-cap-line .muted { font-size: 12px; }
/* 字段标题右侧蓝色文字按钮（20260913c）：无背景填充 */
.link-btn {
background: none; border: none; padding: 0; margin-left: 8px;
color: var(--accent-600, #2563eb); font-size: 15px; font-weight: 500;
cursor: pointer; vertical-align: middle;
}
.link-btn:hover { text-decoration: underline; }
/* 卡片选中态：仅蓝色描边 2px，不填充 */
#att-tpl-grid .tpl-card.selected {
border: 2px solid var(--accent-500, #2563eb);
padding: 11.5px 11.5px 13.5px;
}
/* 卡片过多时弹框不超出屏幕（20260912g）：弹框限高 + 内部纵向布局，
卡片区域（modal-body）竖向滚动，标题与底部按钮始终可见可点 */
#att-import-format-modal .modal-box.fmt-wide {
max-height: calc(100vh - 40px);
display: flex; flex-direction: column;
overflow: hidden;
}
#att-import-format-modal .modal-title { flex-shrink: 0; }
#att-import-format-modal .modal-body {
flex: 1 1 auto; min-height: 0;
overflow-y: auto;
padding-right: 6px; /* 给滚动条留位，避免卡片贴条 */
overscroll-behavior: contain; /* 滚到边界不带动页面 */
}
#att-import-format-modal .modal-body::-webkit-scrollbar { width: 8px; }
#att-import-format-modal .modal-body::-webkit-scrollbar-thumb {
background: rgba(100, 116, 139, .35); border-radius: 4px;
}
#att-import-format-modal .modal-body::-webkit-scrollbar-thumb:hover {
background: rgba(100, 116, 139, .55);
}
#att-import-format-modal .modal-actions { flex-shrink: 0; margin-top: 14px; }
/* 底部「记住我的选择」：带底色块的明显样式，贴最左 */
.fmt-remember {
margin-right: auto; display: inline-flex; align-items: center; gap: 7px;
font-size: 14.5px; font-weight: 500; color: var(--ink-900, #0f172a);
background: var(--bg-soft, #f8fafc);
border: 1px solid var(--line, #e2e8f0); border-radius: 7px;
padding: 7px 12px; cursor: pointer; user-select: none;
transition: border-color .15s, background .15s;
}
.fmt-remember:hover { border-color: var(--accent-500, #2563eb); }
.fmt-remember:has(input:checked) {
border-color: var(--accent-500, #2563eb);
background: var(--accent-50, #eff6ff);
}
.fmt-remember input {
width: 16px; height: 16px; margin: 0;
accent-color: var(--accent-500, #2563eb); cursor: pointer;
}
table.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
table.grid th, table.grid td { border: 1px solid var(--border-table); padding: 5px 8px; text-align: center; white-space: nowrap; color: #000; font-weight: 400; }
table.grid thead th { background: var(--bg-paper-2); font-weight: 700; color: #000; }
table.grid tbody tr:hover { background: var(--bg-tinted); }
/* ============================================================
Tabs
============================================================ */
.tabs {
display: flex; gap: 4px; padding: 5px;
background: var(--bg-paper-2); border-radius: 11px;
margin-bottom: 14px; flex-shrink: 0; width: fit-content;
}
.tabs button {
border: none; background: transparent; padding: 7px 14px;
font-size: 15px; font-weight: 500; cursor: pointer;
color: var(--ink-500); border-radius: 8px; font-family: inherit;
transition: all .18s;
}
.tabs button:hover { color: var(--ink-800); }
.tabs button.active {
background: var(--bg-paper); color: var(--ink-900);
box-shadow: var(--shadow-sm); font-weight: 600;
}
/* 二级导航行：左侧 tabs + 右侧颜色图例水平对齐 */
.tabs-row {
display: flex; align-items: center; gap: 12px;
flex-shrink: 0; margin-bottom: 14px;
}
.tabs-row .tabs { margin-bottom: 0; }
.tabs-row .table-legend { margin-left: auto; margin-bottom: 0; }
/* 全局规则设置视图：card 与滚动区撑满可用高度，避免内容被裁切 */
#view-config { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#view-config > .card { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
#view-config #global-config-body { flex: 1 1 0; min-height: 0; overflow: auto; }
/* 考勤结果：姓名/部门多选筛选 + 分页 */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.filter-dd { position: relative; }
.filter-btn {
display: inline-flex; align-items: center; gap: 4px;
background: var(--bg-paper); border: 1px solid var(--border-default);
border-radius: 8px; padding: 6px 12px; font-size: 14px;
color: var(--ink-800); cursor: pointer; font-family: inherit;
min-width: 96px;
}
.filter-btn:hover { border-color: var(--accent-500); }
.filter-btn .muted { color: var(--ink-400); font-size: 12.5px; }
.filter-panel {
position: fixed; left: 0; top: 0; z-index: 200;
background: var(--bg-paper); border: 1px solid var(--border-default);
border-radius: 10px; box-shadow: var(--shadow-lg);
min-width: 240px; max-width: 320px; min-height: 300px; max-height: 640px;
display: flex; flex-direction: column; overflow: hidden;
}
.filter-panel-head {
display: flex; gap: 6px; padding: 8px 10px;
border-bottom: 1px solid var(--border-default);
background: var(--bg-paper-2);
}
.filter-list { overflow: auto; padding: 4px 4px 8px; flex: 1 1 auto; min-height: 0; }
.filter-search-wrap { padding: 8px 10px 4px; border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.filter-search {
width: 100%; box-sizing: border-box; padding: 7px 10px; font-size: 14px;
border: 1px solid var(--border-default); border-radius: 7px;
background: var(--bg-paper); color: var(--ink-800); outline: none;
transition: border-color .18s, box-shadow .18s;
}
.filter-search:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(var(--accent-glow), 0.10); }
.filter-item {
display: flex; align-items: center; gap: 8px;
padding: 7px 12px; min-height: 36px; box-sizing: border-box;
border-radius: 6px; cursor: pointer;
font-size: 14px; color: var(--ink-800);
}
.filter-item:hover { background: var(--bg-tinted); }
.filter-item input[type="checkbox"] { margin: 0; width: 15px; height: 15px; flex-shrink: 0; cursor: pointer; }
/* 考勤结果分页 */
.summary-pagination {
display: flex; align-items: center; gap: 8px; justify-content: flex-end;
padding-top: 10px; flex-shrink: 0; font-size: 14px;
}
.summary-pagination .page-info { color: var(--ink-500); margin-right: 8px; }
.summary-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
/* 归档详情页二级 tab（20260915d：mac 卡片切换 / 分段控件风格，与标题行齐平居中）
20260916a：容器背景改白色，选中段 = 蓝色背景 + 白色字体 */
.page-header.hist-head { position: relative; }
.hist-head .seg-tabs {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
}
.seg-tabs {
display: inline-flex; align-items: center; gap: 2px;
padding: 3px; flex-shrink: 0;
background: var(--bg-paper);
border: 1px solid var(--border-default);
border-radius: 10px;
}
.seg-btn {
appearance: none; -webkit-appearance: none;
border: none; background: transparent; font-family: inherit;
font-size: 13.5px; color: var(--ink-600); cursor: pointer;
padding: 5px 16px; border-radius: 7px; white-space: nowrap;
transition: background .16s, color .16s, box-shadow .16s;
}
.seg-btn:hover { color: var(--ink-900); }
.seg-btn.active {
background: var(--accent-500); color: #fff; font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 113, 227, 0.28);
}
.seg-btn.active:hover { color: #fff; }
/* 窄屏：分段控件回落为常规流并居中，避免与标题/返回按钮重叠 */
@media (max-width: 1080px) {
.page-header.hist-head { flex-wrap: wrap; }
.hist-head .seg-tabs { position: static; transform: none; margin: 0 auto; }
}
.hist-empty {
padding: 64px 0; display: flex; flex-direction: column;
align-items: center; gap: 8px; color: var(--ink-400); font-size: 14px;
}
/* ---------- 自定义列录入（20260916a；20260916d 按钮左置 + 边框统一 #dddddd + 分页） ---------- */
.cc-head {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap; margin-bottom: 10px; flex-shrink: 0;
}
.cc-actions { display: flex; align-items: center; gap: 10px; }
.cc-actions .cc-dirty-tip { margin-left: 6px; }
.cc-dirty-tip { color: var(--warning); font-size: 13px; }
.cc-wrap {
overflow: auto; max-height: calc(100vh - 350px);
border: 1px solid #dddddd; border-radius: 8px; background: var(--bg-paper);
}
table.cc-table { border-collapse: collapse; width: 100%; }
table.cc-table th, table.cc-table td {
border: 1px solid #dddddd; padding: 4px 8px;
font-size: 14px; color: #000; text-align: center; height: 34px;
}
table.cc-table thead th {
background: var(--bg-paper-2); font-weight: 700; white-space: nowrap;
position: sticky; top: 0; z-index: 2;
}
table.cc-table td.cc-seq { width: 52px; }
table.cc-table td.cc-name { width: 100px; font-weight: 600; }
table.cc-table td.cc-dept { width: 110px; }
table.cc-table thead th.cc-col { min-width: 110px; }
table.cc-table td.cc-cell { padding: 2px 4px; }
table.cc-table td.cc-dirty { background: var(--accent-50); }
/* 输入框：无描边、无 hover 高亮（20260916d）；聚焦只给浅蓝底便于定位 */
.cc-input {
width: 100%; min-width: 90px; height: 28px; text-align: center;
border: none; border-radius: 6px;
background: transparent; font-family: inherit; font-size: 14px; color: #000;
outline: none; box-shadow: none;
}
.cc-input:hover { background: transparent; }
.cc-input:focus { background: var(--accent-50); }
/* 分页（20260916d）：与请假管理一致 */
#cc-pagination { flex-shrink: 0; padding-top: 10px; }
/* ============================================================
归档详情 · 统计分析（20260916f）：KPI 概览 + TOP10 排名 + 拓展分析
数据全部来自归档快照（冻结口径），页面只读
20260916f2：整页铺满视口（不出现页面级滚动，模块内部各自竖向滚动）；
字号统一 ≥14px（数字可用 mono 字体）；本页去掉 .grid-wrap 描边
============================================================ */
/* 仅统计页去掉 #hist-detail-body(.grid-wrap) 描边，不影响其他页面 */
#hist-detail-body.astat-no-frame { border: none; }
/* 整页 = KPI 行（固定高）+ main（吃满剩余高度）；容器本身由 flexbox 撑满。
窗口高度过小时（下面两行有 min-height 兜底）整页可竖向滚动，不会把图表压扁/裁切 */
.astat-wrap { height: 100%; display: flex; flex-direction: column; overflow: auto; padding: 2px 4px 12px 0; }
/* KPI 概览：2 行 × 每行 4 卡（20260916h） */
.astat-kpis { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.astat-kpi {
border: 1px solid #dddddd; border-radius: 10px; padding: 10px 12px;
background: var(--bg-paper); border-left-width: 4px; min-width: 0;
}
.astat-kpi.blue { border-left-color: var(--accent-500); }
.astat-kpi.green { border-left-color: var(--success); }
.astat-kpi.yellow { border-left-color: var(--yellow-500, #d97706); }
.astat-kpi-label { font-size: 14px; color: var(--ink-500); white-space: nowrap; }
.astat-kpi-val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--ink-800); margin: 2px 0; white-space: nowrap; }
.astat-kpi-extra { font-size: 14px; color: var(--ink-400); }
/* 主体两行：上 = TOP10 + 部门对比；下 = 三张分布卡 */
.astat-main { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.astat-row1 { flex: 1.15 1 0; min-height: 210px; display: grid; grid-template-columns: 5fr 7fr; gap: 12px; }
.astat-row2 { flex: 1 1 0; min-height: 190px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
/* 卡片：占满分配高度，内容超出时在卡片内竖向滚动 */
.astat-card {
border: 1px solid #dddddd; border-radius: 10px; background: var(--bg-paper); padding: 12px 14px;
display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
}
.astat-card-head { flex: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.astat-title { font-size: 15px; font-weight: 700; color: var(--ink-800); }
.astat-sub { font-size: 14px; color: var(--ink-400); }
/* 卡头统计行（20260916k / 20260916l 改版）：合计放标题下方、图表上方；
灰底圆角块 + 大号数字 —— 与下方图表形成明显区分 */
.astat-head-stat {
flex: none; display: flex; align-items: baseline; gap: 6px;
margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
background: #f1f3f5; border: 1px solid #e5e7eb;
font-size: 14px; color: var(--ink-500);
}
.astat-head-stat-num {
font-family: var(--font-mono); font-size: 22px; font-weight: 700;
color: var(--ink-800); line-height: 1;
}
.astat-head-stat-unit { font-size: 14px; color: var(--ink-500); }
.astat-head-stat-sub { margin-left: auto; font-size: 14px; color: var(--ink-400); }
.astat-card-body { flex: 1 1 0; min-height: 0; overflow: auto; }
/* TOP10 类型切换（chip 横向） */
.astat-chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.astat-chip {
border: 1px solid #dddddd; background: var(--bg-paper); border-radius: 999px;
padding: 4px 14px; font-size: 14px; color: var(--ink-500); cursor: pointer;
}
.astat-chip:hover { border-color: var(--ink-200); color: var(--ink-800); }
.astat-chip.active { background: var(--accent-500); border-color: var(--accent-500); color: #fff; }
.astat-unit-seg { display: inline-flex; border: 1px solid #dddddd; border-radius: 8px; overflow: hidden; }
.astat-unit-seg .seg-btn { border-radius: 0; border: none; box-shadow: none; }
/* TOP10 排名行 */
.astat-rank-list { display: flex; flex-direction: column; gap: 6px; }
.astat-rank-row { display: flex; align-items: center; gap: 10px; }
.astat-rank-no {
width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; background: var(--bg-paper-2); color: var(--ink-500);
}
.astat-rank-no.top1 { background: #fbbf24; color: #7c2d12; }
.astat-rank-no.top2 { background: #d1d5db; color: #374151; }
.astat-rank-no.top3 { background: #fcd9b8; color: #92400e; }
.astat-rank-name { width: 165px; flex-shrink: 0; font-size: 14px; color: var(--ink-800); display: flex; align-items: center; gap: 8px; overflow: hidden; }
.astat-rank-dept { font-size: 14px; color: var(--ink-400); white-space: nowrap; }
.astat-rank-bar { flex: 1; height: 14px; border-radius: 4px; background: var(--bg-paper-2); overflow: hidden; }
.astat-rank-bar-in { height: 100%; border-radius: 4px; background: var(--accent-500); opacity: .85; }
.astat-rank-val { width: 120px; flex-shrink: 0; text-align: right; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink-800); }
.astat-empty { padding: 18px 0; text-align: center; font-size: 14px; color: var(--ink-400); }
/* 分布横条 */
.astat-dist { display: flex; flex-direction: column; gap: 8px; }
.astat-dist-row { display: flex; align-items: center; gap: 10px; }
.astat-dist-name { width: 130px; flex-shrink: 0; font-size: 14px; color: var(--ink-600, #374151); }
.astat-dist-bar { flex: 1; height: 14px; border-radius: 4px; background: var(--bg-paper-2); overflow: hidden; }
.astat-dist-bar-in { height: 100%; border-radius: 4px; background: var(--accent-300, #7cb3f0); }
.astat-dist-val { flex: none; text-align: right; font-family: var(--font-mono); font-size: 14px; color: var(--ink-500); white-space: nowrap; }
/* 三分布卡三种图表（20260916h/l）：环形图 / 半圆仪表盘 / 胶囊柱状图 */
/* 卡片变矮时用 safe center（溢出时不向上裁切，改为向下可滚动） */
.astat-donut-flex { display: flex; align-items: safe center; gap: 16px; height: 100%; min-height: 0; }
.astat-donut { width: 172px; height: 172px; flex: none; max-width: 100%; max-height: 100%; }
.astat-donut-num { font-family: var(--font-mono); font-size: 26px; font-weight: 700; fill: var(--ink-800, #111827); }
.astat-donut-unit { font-size: 14px; fill: var(--ink-400, #9ca3af); }
.astat-legend { display: flex; flex-direction: column; gap: 9px; min-width: 0; flex: 1; }
.astat-legend-row { display: flex; align-items: center; gap: 8px; font-size: 14px; min-width: 0; }
.astat-legend-dot { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.astat-legend-name { color: var(--ink-600, #374151); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.astat-legend-val { margin-left: auto; font-family: var(--font-mono); font-size: 14px; color: var(--ink-500); white-space: nowrap; }
/* 半圆仪表盘（20260916l，加班构成）：三类并排铺满卡片宽度、垂直居中；
环身按可用高度缩放（min-height:0 + flex），卡片变矮时不会被裁掉 */
.astat-gauges { display: flex; align-items: stretch; gap: 10px; height: 100%; min-height: 0; }
.astat-gauge {
flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column;
align-items: center; justify-content: safe center; gap: 4px;
}
.astat-gauge-box {
position: relative; flex: 1 1 0; min-height: 0; width: 100%; max-width: 168px;
display: flex; align-items: flex-end; justify-content: center;
}
.astat-gauge-svg { display: block; height: 100%; width: auto; max-width: 100%; }
.astat-gauge-pct {
position: absolute; left: 0; right: 0; bottom: 1px; text-align: center;
font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink-800);
line-height: 1;
}
.astat-gauge-pctu { font-size: 14px; font-weight: 600; color: var(--ink-400); margin-left: 1px; }
.astat-gauge-name { flex: none; font-size: 14px; color: var(--ink-600, #374151); white-space: nowrap; }
.astat-gauge-val { flex: none; font-family: var(--font-mono); font-size: 14px; color: var(--ink-500); white-space: nowrap; }
/* 柱状图（出勤率分布）：柱高按可用高度自适应（轨道百分比），柱身胶囊形（四角圆角取最大 = 半圆） */
.astat-cols { display: flex; gap: 12px; align-items: stretch; height: 100%; min-height: 0; padding-top: 4px; }
.astat-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 0; }
.astat-col-val { flex: none; font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink-600, #374151); white-space: nowrap; }
.astat-col-track { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.astat-col-bar { width: 34%; max-width: 30px; min-width: 14px; border-radius: 999px; background: var(--accent-300, #7cb3f0); }
.astat-col-bar.empty { background: var(--bg-paper-2); }
.astat-col-name { flex: none; font-size: 14px; color: var(--ink-500); white-space: nowrap; }
/* 部门对比表 */
.astat-table { border-collapse: collapse; width: 100%; }
.astat-table th, .astat-table td { border-bottom: 1px solid #dddddd; padding: 7px 10px; font-size: 14px; text-align: center; color: var(--ink-800); white-space: nowrap; }
.astat-table thead th { color: var(--ink-500); font-weight: 600; background: var(--bg-paper-2); white-space: nowrap; }
.astat-table .astat-td-name { text-align: left; font-weight: 600; }
/* ============================================================
规则配置（分类卡片布局）
============================================================ */
.config-pane { flex: 1 1 0; min-height: 0; align-self: stretch; overflow: auto; padding: 2px 4px 16px 0; }
/* 规则设置：左侧快速切换菜单 + 右侧内容 */
.config-wrap { flex: 1; min-height: 0; display: flex; gap: 18px; align-items: stretch; }
.config-sidenav { width: 168px; flex: none; display: flex; flex-direction: column; gap: 4px; overflow: auto; padding: 2px 4px 16px 0; }
.config-nav-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid transparent; background: transparent; border-radius: 8px; color: var(--ink-600); font-size: 13.5px; cursor: pointer; text-align: left; font-family: inherit; line-height: 1.4; transition: background .15s, color .15s; }
.config-nav-item:hover { background: var(--bg-paper-2); color: var(--ink-900); }
.config-nav-item.active { background: var(--bg-paper-2); border-color: var(--border-default); color: var(--ink-900); font-weight: 600; }
.config-nav-num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-400); flex: none; }
.config-nav-item.active .config-nav-num { color: var(--accent); }
#global-config-body { scroll-margin-top: 12px; }
.cfg-card { scroll-margin-top: 12px; }
/* 多班次+多类型：由考勤组设置的字段锁定 */
.cfg-locked { opacity: .6; }
.cfg-locked input, .cfg-locked select { cursor: not-allowed; }
.cfg-lock-badge { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; font-size: 11px; font-weight: 500; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 999px; padding: 1px 8px; vertical-align: middle; line-height: 1.6; }
.chip-locked { opacity: .55; cursor: not-allowed; }
.cfg-group-mode-tip { margin-bottom: 16px; }
.cfg-hero {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; margin-bottom: 20px;
}
.cfg-hero .eyebrow {
font-size: 13.5px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--ink-400); font-weight: 600; margin-bottom: 8px;
display: flex; align-items: center; gap: 8px;
}
.cfg-hero .eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--ink-300); }
.cfg-hero .title {
font-size: 28px; line-height: 1.25;
letter-spacing: -0.01em; color: var(--ink-900); font-weight: 700;
}
.cfg-hero .title .num { font-family: var(--font-mono); font-size: 0.85em; }
.cfg-hero .title .punct { color: var(--ink-300); margin: 0 6px; }
.cfg-hero .sub { color: var(--ink-500); font-size: 15px; max-width: 520px; margin-top: 8px; line-height: 1.6; }
/* 配置卡片 */
.cfg-card {
background: var(--bg-paper);
border: none;
border-radius: var(--radius-lg);
margin-bottom: 16px;
overflow: hidden;
}
.cfg-card-head {
padding: 20px 24px 16px;
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
border-bottom: 1px solid var(--border-subtle);
}
.cfg-card-head-left { display: flex; gap: 14px; align-items: flex-start; flex: 1; min-width: 0; }
.cfg-card-num {
width: 32px; height: 32px; border-radius: 8px;
background: var(--accent-50); border: 1px solid var(--accent-100);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 17px;
color: var(--accent-600); font-weight: 600; flex-shrink: 0;
}
.cfg-card-title { font-size: 17.5px; font-weight: 600; color: var(--ink-800); }
.cfg-card-sub { font-size: 14.5px; color: var(--ink-400); margin-top: 3px; }
.cfg-card-status {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 999px; font-size: 13.5px; font-weight: 500;
background: var(--success-soft); color: var(--success); white-space: nowrap;
}
.cfg-card-status.pending { background: var(--warning-soft); color: var(--warning); }
.cfg-card-status .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.cfg-card-body { padding: 20px 24px 22px; }
.cfg-card-foot {
padding: 12px 24px; border-top: 1px solid var(--border-subtle);
background: var(--bg-tinted); display: flex; align-items: center; justify-content: space-between;
font-size: 14.5px; color: var(--ink-500);
}
/* 分区标题 */
.section-divider {
display: flex; align-items: center; gap: 12px;
margin: 16px 0 12px; color: var(--ink-500);
font-size: 14px; letter-spacing: 0.06em; font-weight: 600;
}
.section-divider::before, .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-default); }
.section-divider:first-child { margin-top: 0; }
/* 字段网格 */
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 22px; }
.field-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.field-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* 五栏（20260914i：全勤规则「开关+奖金」+ 规则1~4 同一行） */
.field-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
/* 六栏（20260914b：补贴规则「夜宵三栏 + 夜班三栏」同一行） */
.field-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
/* 分行配置（sec.rows）：相邻配置行之间保留纵向间距（20260913d 收紧到 20px，
隐藏字段所在空行由 collapseEmptyCfgGrids 整行收起，不再留白） */
.cfg-card-body .field-grid + .field-grid { margin-top: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.col-span-2 { grid-column: span 2; }
/* 跨 3 栏（20260914c：补贴规则「午餐补贴金额」占左半，右半放晚餐三栏） */
.field.col-span-3 { grid-column: span 3; }
/* 组合字段：同列内上下排列多个子字段（输入区与上下行等宽） */
.field-group-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* 纵向内容居中（如开关列对齐左侧多字段组高度） */
.field-center { justify-content: center; }
.field-label { font-size: 15px; font-weight: 500; color: var(--ink-900); display: flex; align-items: center; gap: 6px; }
.field-label .req { color: var(--peach-500); font-weight: 700; }
.field-help { font-size: 13.5px; color: var(--ink-400); line-height: 1.5; }
/* 提示不折行（20260915a）：请假类型区下方两行的说明文字单行显示（文字已精简） */
.field.help-nowrap .field-help,
.field.help-nowrap .lt-days-hint,
.field.help-nowrap .switch-row .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 输入包装 */
.input-wrap {
position: relative; display: flex; align-items: center;
background: var(--bg-paper); border: 1px solid var(--border-default);
border-radius: var(--radius-md); transition: all .18s;
}
.input-wrap:hover { border-color: var(--ink-200); }
.input-wrap:focus-within { border-color: var(--accent-500); box-shadow: 0 0 0 4px rgba(var(--accent-glow), 0.10); }
.input-wrap .input {
flex: 1; border: none; background: transparent; padding: 9px 13px;
font-size: 16px; font-family: inherit; color: var(--ink-800); outline: none; width: 100%;
}
.input-wrap .input.mono { font-family: var(--font-mono); }
.input-suffix {
padding-right: 13px; color: var(--ink-400); font-size: 14px;
font-family: var(--font-mono); user-select: none;
}
/* 下拉 */
.select-wrap { position: relative; }
.select-wrap select {
appearance: none; width: 100%;
border: 1px solid var(--border-default); border-radius: var(--radius-md);
padding: 9px 26px 9px 13px; font-size: 16px; font-family: inherit;
color: var(--ink-800); background-color: var(--bg-paper); cursor: pointer;
}
.select-wrap select:hover { border-color: var(--ink-200); }
.select-wrap select:focus { border-color: var(--accent-500); box-shadow: 0 0 0 4px rgba(var(--accent-glow), 0.10); }
/* 开关 */
.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
position: absolute; inset: 0; background: var(--ink-200);
border-radius: 999px; cursor: pointer; transition: background .2s;
}
.switch .slider::before {
content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
background: #fff; top: 3px; left: 3px; transition: transform .2s;
box-shadow: var(--shadow-xs);
}
.switch input:checked + .slider { background: var(--accent-500); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; flex-wrap: wrap; row-gap: 4px; }
/* 取整区间编辑器：两个区间编辑器左右并排（横向布局），区间内 7 元素一行横排 */
.interval-field { grid-column: span 1; }
.interval-list { display: flex; flex-direction: column; gap: 10px; }
.interval-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap;
align-items: center;
gap: 6px;
padding: 4px 0;
}
.interval-input {
width: 72px !important;
min-width: 72px;
max-width: 72px;
flex: 0 0 72px !important;
padding: 7px 4px;
text-align: center;
font-size: 15px;
box-sizing: border-box;
}
.interval-sep, .interval-arrow, .interval-unit {
color: var(--ink-400);
font-size: 14px;
white-space: nowrap;
user-select: none;
flex-shrink: 0;
}
.interval-unit { font-size: 13px; }
.interval-add { align-self: flex-start; margin-top: 4px; }
.interval-del {
width: 26px !important;
min-width: 26px;
height: 26px;
padding: 0;
border-radius: 6px;
font-size: 15px;
line-height: 1;
flex: 0 0 26px;
}
/* 分类筛选 chips（tab 样式） */
.cat-tabs {
display: flex; gap: 4px; padding: 4px;
background: var(--bg-paper-2); border-radius: 9px; margin-bottom: 14px;
width: fit-content; flex-wrap: wrap;
}
.cat-tab {
padding: 6px 12px; font-size: 14.5px; font-weight: 500;
border-radius: 6px; color: var(--ink-500); cursor: pointer;
border: none; background: transparent; font-family: inherit;
transition: all .18s; display: inline-flex; align-items: center; gap: 6px;
}
.cat-tab:hover { color: var(--ink-800); }
.cat-tab.active { background: var(--bg-paper); color: var(--ink-900); box-shadow: var(--shadow-xs); }
.cat-tab .count {
font-family: var(--font-mono); font-size: 12px; padding: 1px 6px;
border-radius: 3px; background: var(--bg-paper-2); color: var(--ink-500);
}
.cat-tab.active .count { background: var(--accent-50); color: var(--accent-700); }
/* 多选 chip */
.chip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.chip-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.chip-grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
.chip {
display: flex; align-items: center; gap: 10px;
padding: 11px 13px; border: 1px solid var(--border-default);
border-radius: var(--radius-md); background: var(--bg-paper);
cursor: pointer; transition: all .18s var(--ease-out-quart);
user-select: none; position: relative;
}
.chip:hover { border-color: var(--ink-200); }
.chip.checked {
background: linear-gradient(180deg, var(--accent-50) 0%, #fff 100%);
border-color: var(--accent-500);
box-shadow: 0 0 0 1px var(--accent-500), 0 3px 8px rgba(var(--accent-glow), 0.10);
}
.chip-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; background: var(--accent-500); }
.chip-label {
flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--ink-700);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip.checked .chip-label { color: var(--ink-900); }
.chip-check {
width: 16px; height: 16px; border-radius: 4px;
border: 1.5px solid var(--ink-200); display: flex; align-items: center; justify-content: center;
flex-shrink: 0; background: var(--bg-paper); color: #fff; transition: all .18s;
}
.chip-check svg { opacity: 0; transition: opacity .12s; }
.chip.checked .chip-check { background: var(--accent-500); border-color: var(--accent-500); }
.chip.checked .chip-check svg { opacity: 1; }
/* 小 stat tile（卡片内） */
.tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.tile {
padding: 14px 16px; background: var(--bg-paper-2);
border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.tile.accent { background: var(--accent-50); border-color: rgba(var(--accent-glow), 0.20); }
.tile-label { font-size: 13px; color: var(--ink-500); margin-bottom: 5px; font-weight: 600; }
.tile-value { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--ink-800); line-height: 1; }
.tile-value .unit { font-size: 13px; color: var(--ink-400); margin-left: 2px; font-weight: 400; }
.tile-foot { font-size: 13px; color: var(--ink-400); margin-top: 4px; }
/* 信息提示条 */
.tip-box {
margin-top: 16px; padding: 12px 16px; border-radius: var(--radius-md);
background: var(--accent-50); border: 1px solid rgba(var(--accent-glow), 0.18);
display: flex; gap: 10px; align-items: flex-start;
}
.tip-box .tip-icon { color: var(--accent-600); margin-top: 1px; flex-shrink: 0; display: flex; }
.tip-box .tip-title { font-size: 15px; font-weight: 500; color: var(--ink-800); margin-bottom: 2px; }
.tip-box .tip-text { font-size: 14px; color: var(--ink-500); line-height: 1.5; }
/* 底部操作条（配置页） */
.cfg-actions {
position: sticky; bottom: 0;
margin: 4px -4px 0;
padding: 14px 0 6px;
background: linear-gradient(180deg, rgba(238,241,246,0) 0%, var(--bg-canvas) 30%);
display: flex; align-items: center; gap: 10px;
}
.cfg-actions .grow { flex: 1; }
/* ============================================================
占位页 / 其它
============================================================ */
.placeholder-page {
display: flex; flex-direction: column; align-items: center; justify-content: center;
flex: 1; color: var(--ink-400); font-size: 17px; gap: 10px;
background: var(--bg-paper); border-radius: var(--radius-lg);
border: 1px dashed var(--border-default);
}
.placeholder-page .big { font-size: 30px; font-weight: 700; color: var(--ink-300); letter-spacing: 3px; }
.placeholder-page .sub { font-size: 15px; }
.perms-box { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.perms-box label { display: flex; align-items: center; gap: 5px; font-size: 15px; }
.scroll-x { overflow-x: auto; }
#proj-list, #hist-list { flex: 1; min-height: 0; overflow: auto; }
.hidden { display: none !important; }
/* ============================================================
响应式
============================================================ */
@media (max-width: 1100px) {
.field-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
.field-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
.field-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
.field-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
.chip-grid, .chip-grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
.tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.sidebar { width: 64px; }
.sidebar-brand .title, .sidebar-brand .sub,
.side-item span:not(.icon):not(.badge),
.sidebar-user .u-info { display: none; }
/* 窄屏侧栏（64px）只留图标：当前用户版本由顶栏 pill 展示 */
.sub-user-row { display: none; }
.side-item { justify-content: center; padding: 12px; }
.field-grid, .field-grid.cols-3, .field-grid.cols-4,
.field-grid.cols-5, .field-grid.cols-6 { grid-template-columns: 1fr; }
/* 单列时取消跨列，避免 span 撑出隐式列导致溢出 */
.field.col-span-2, .field.col-span-3 { grid-column: span 1; }
.group-form-2col { grid-template-columns: 1fr; }
.chip-grid, .chip-grid.cols-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.stat-grid { grid-template-columns: 1fr 1fr; }
.navbar { padding: 0 12px; }
.content { padding: 14px; }
.tile-grid { grid-template-columns: 1fr 1fr; }
}
/* 自定义滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-150); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-200); }
/* ============================================================
员工管理
============================================================ */
.emp-table { width: 100%; border-collapse: collapse; }
.emp-table thead th {
text-align: left; font-size: 15px; font-weight: 700; color: #000;
padding: 10px 12px; border-bottom: 1px solid var(--border-default);
background: var(--bg-paper-2);
position: sticky; top: 0; z-index: 2; /* 竖向滚动时表头固定不动 */
}
.emp-table tbody td {
padding: 10px 12px; font-size: 15px; border-bottom: 1px solid var(--border-subtle);
color: #000; font-weight: 400;
}
.emp-table tbody tr { cursor: pointer; }
.emp-table tbody tr.row-sel td { background: var(--bg-tinted); }
.emp-table tbody tr.row-sel:hover td { background: var(--bg-tinted); }
.emp-table tbody tr:hover td { background: var(--bg-tinted); }
.emp-table tbody tr:last-child td { border-bottom: none; }
.emp-table .chk { width: 40px; }
.emp-table .chk input[type="checkbox"],
.emp-table .emp-chk {
width: 17px; height: 17px; cursor: pointer;
accent-color: var(--accent-500);
}
.emp-table .seq { width: 60px; color: #000; } /* 序号与正文统一字体，不再用等宽体 */
.emp-table .ops { width: 250px; text-align: right; white-space: nowrap; }
.emp-table .ops .btn { margin-left: 4px; }
.group-times { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.group-time { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }
.group-times .group-time + .group-time::before { content: '|'; margin-right: 12px; color: var(--ink-200); }
/* 考勤组列表：班次设置列回显（多班次逐行：班次名 + 时间摘要 + 标签；单班次一行） */
.gshift-list { display: flex; flex-direction: column; gap: 7px; min-width: 300px; padding: 2px 0; }
.gshift-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gshift-name { font-size: 14px; font-weight: 600; color: #000; white-space: nowrap; }
.gshift-time { font-size: 12.5px; color: var(--ink-600); font-family: var(--font-mono); white-space: nowrap; }
.gshift-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.gshift-tags .shift-tag { font-size: 11px; padding: 3px 7px; }
/* 员工管理：卡片占满剩余高度，列表内部滚动，分页固定在底部可见 */
#page-employees .card {
flex: 1; min-height: 0;
display: flex; flex-direction: column;
overflow: hidden;
margin-bottom: 0;
}
#emp-list { flex: 1; min-height: 0; overflow: auto; }
#emp-pagination { flex-shrink: 0; }
/* 弹窗 */
.modal-mask {
position: fixed; inset: 0; z-index: 100;
background: rgba(15, 15, 15, 0.45);
display: flex; align-items: center; justify-content: center;
padding: 20px;
}
.modal-box {
background: var(--bg-paper); border-radius: var(--radius-lg);
box-shadow: 0 20px 50px rgba(0,0,0,0.25);
width: 100%; max-width: 480px; padding: 24px;
}
.modal-title { font-size: 18px; font-weight: 600; color: var(--ink-900); margin-bottom: 14px; }
.modal-body { font-size: 15.5px; color: var(--ink-700); line-height: 1.7; }
.modal-list { margin: 0; padding-left: 20px; }
.modal-list li { margin-bottom: 8px; }
.modal-list li.warn { color: #b02a2a; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
/* 考勤记录格式说明：缩略图卡片（4:3 占位，悬停出现预览按钮） */
.modal-box.wide.fmt-wide { max-width: 1080px; }
/* 排班表模板弹窗：仅一个卡片 → 弹窗收窄为单卡片宽，提示语与卡片同宽、超行自动换行 */
.modal-box.wide.fmt-sched { max-width: 580px; }
#schedule-tpl-grid { grid-template-columns: 1fr; }
.tpl-sched-note { width: 100%; word-break: break-all; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-close { font-size: 15px; line-height: 1; padding: 6px 10px; }
.fmt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fmt-card { border: none; border-radius: 10px; overflow: hidden; background: var(--bg-paper); box-shadow: 0 1px 3px rgba(15,15,15,0.06); }
.fmt-thumb {
position: relative; aspect-ratio: 4 / 3; width: 100%;
background: linear-gradient(135deg, var(--accent-50), #d5e9ff);
display: flex; align-items: center; justify-content: center;
color: var(--accent-700); border-bottom: 1px solid var(--border-subtle);
overflow: hidden;
}
.fmt-thumb-label { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; position: relative; z-index: 1; }
.fmt-thumb::after {
content: ''; position: absolute; inset: 0; background: rgba(15, 15, 15, 0.35);
opacity: 0; transition: opacity .18s; z-index: 2;
}
.fmt-preview-btn {
position: absolute; inset: 0; margin: auto;
width: max-content; height: max-content;
opacity: 0; transition: opacity .18s; z-index: 3;
}
.fmt-preview-btn:hover { transform: none; }
.fmt-thumb:hover::after { opacity: 1; }
.fmt-thumb:hover .fmt-preview-btn { opacity: 1; }
.fmt-card:nth-child(2) .fmt-thumb { background: linear-gradient(135deg, #eef4ff, #d5e9d5); color: #2f6b44; }
.fmt-card:nth-child(3) .fmt-thumb { background: linear-gradient(135deg, #fff8e6, #ffe7c2); color: #a85a0a; }
.fmt-card:nth-child(4) .fmt-thumb { background: linear-gradient(135deg, #fdf3f3, #ffdada); color: #a01a1a; }
.fmt-actions { display: flex; align-items: center; gap: 8px; padding: 10px; }
.fmt-actions .btn { flex: 1; margin: 0; }
/* 格式预览大图（占位） */
.fmt-preview-img {
width: 100%; aspect-ratio: 4 / 3; border-radius: 10px;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
font-size: 24px; font-weight: 700; border: 1px solid var(--border-default);
}
.fmt-preview-sub { font-size: 14px; font-weight: 400; opacity: 0.7; }
/* 导入考勤文件：确认统计年月（醒目大样式） */
.ym-pick { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 6px; }
.ym-year { display: flex; align-items: center; gap: 8px; }
.ym-nav {
width: 46px; height: 54px; font-size: 26px; font-weight: 700; line-height: 1;
border: 1.5px solid var(--border-strong); border-radius: 12px;
background: var(--bg-paper); color: var(--ink-700); cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.ym-nav:hover { border-color: var(--accent-500); color: var(--accent-600); background: var(--accent-50); }
.ym-year-val {
min-width: 132px; font-size: 30px; font-weight: 700; color: var(--ink-900);
text-align: center; padding: 8px 12px; cursor: pointer; border-radius: 12px;
border: 1.5px solid transparent; font-family: var(--font-mono);
}
.ym-year-val:hover { border-color: var(--border-strong); background: var(--bg-paper-2); }
.ym-select {
font-size: 22px; font-weight: 600; color: var(--ink-900);
padding: 12px 16px; border: 1.5px solid var(--border-strong);
border-radius: 12px; background-color: var(--bg-paper);
min-width: 130px; text-align: center; cursor: pointer;
font-family: inherit;
}
.ym-select:hover { border-color: var(--accent-500); }
.ym-select:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 4px rgba(var(--accent-glow), 0.12); }
.ym-sep { font-size: 20px; font-weight: 600; color: var(--ink-400); }
/* 考勤单元格编辑弹窗 */
.cell-edit-hint { margin-bottom: 14px; font-size: 14px; line-height: 1.6; }.cell-edit-grid { display: flex; gap: 12px; }
.cell-field {
display: flex; flex-direction: column; gap: 7px; min-width: 0; flex: 1;
}
.cell-edit-grid .cell-field { max-width: 180px; }
.cell-field input {
width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 15.5px;
}
.cell-field input[type="number"] { font-family: var(--font-mono); }
.cell-edit-limit {
margin-top: 10px; padding: 7px 11px; font-size: 13px; line-height: 1.5;
background: var(--warning-soft, rgba(251,191,36,.12)); color: var(--warning, #b7791f);
border-radius: 8px;
}
.modal-box .modal-actions .btn-ghost { margin-right: auto; }
/* 考勤统计页顶部：考勤组未设置上下班时间常驻提示（红色系） */
.group-time-warn {
margin: 0 0 12px; padding: 10px 14px;
background: #fdeceb; border: 1px solid #f5b5b0; border-radius: 10px;
color: #c0392b; font-size: 14px; line-height: 1.6;
}
.group-time-warn .gtw-inner { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; }
.group-time-warn .gtw-item { cursor: pointer; }
.group-time-warn .gtw-item:hover u { text-decoration-thickness: 2px; }
.group-time-warn u { color: #b3261e; }
/* 同步员工数据：项目选择列表 */
.emp-sync-list {
display: flex; flex-direction: column; gap: 8px;
max-height: 320px; overflow-y: auto; padding: 4px;
}
.emp-sync-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border: 1px solid var(--border-default);
border-radius: 8px; cursor: pointer; font-size: 14.5px; transition: all .15s;
}
.emp-sync-item:hover { border-color: var(--accent-500); background: rgba(var(--accent-glow), .05); }
.emp-sync-item:has(input:checked) { border-color: var(--accent-500); background: rgba(var(--accent-glow), .08); }
.emp-sync-item input { accent-color: var(--accent-500); }
/* 节假日设置 */
.holiday-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.holiday-toolbar .muted { flex: 1; }
.holiday-group-title {
margin: 14px 0 8px; font-size: 14px; font-weight: 600; color: var(--ink-700);
padding-bottom: 4px; border-bottom: 1px solid var(--border-default);
}
.holiday-days { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
/* 补班日期：5 个格子、每格更宽（20260916i） */
.holiday-days.makeup { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.holiday-cell { display: flex; flex-direction: column; gap: 4px; }
.holiday-cell span {
font-size: 12.5px; color: var(--ink-500); font-family: var(--font-mono);
text-align: center;
}
.holiday-cell select {
width: 100%; box-sizing: border-box; padding: 5px 18px 5px 6px; font-size: 14px;
border: 1px solid var(--border-default); border-radius: var(--radius-md);
background-color: var(--bg-paper); color: var(--ink-800); cursor: pointer;
appearance: none; text-align: center;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 4px center;
}
.holiday-cell select:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(var(--accent-glow), 0.10); }
/* 全屏预览（复刻导出 Excel 效果） */
.preview-overlay {
position: fixed; inset: 0; z-index: 300;
background: var(--bg-canvas);
display: flex; flex-direction: column;
}
.preview-head {
display: flex; align-items: center; gap: 14px;
padding: 12px 20px; flex-shrink: 0;
background: var(--bg-paper); border-bottom: 1px solid var(--border-default);
}
.preview-title { font-size: 16px; font-weight: 700; color: var(--ink-800); }
.preview-count { margin-left: auto; font-size: 14px; color: var(--ink-500); }
.preview-body {
flex: 1 1 0; min-height: 0; display: flex; flex-direction: column;
padding: 16px 20px 12px; overflow: hidden;
}
.preview-table-wrap {
flex: 1 1 0; min-height: 0; overflow: auto;
border: 1px solid var(--border-table); border-radius: 8px;
background: var(--bg-paper);
}
.preview-pagination {
flex-shrink: 0; padding-top: 10px;
display: flex; align-items: center; justify-content: flex-end; gap: 8px;
font-size: 14px; color: var(--ink-500);
}
/* 复刻导出配色：周末/2倍=浅红、3倍节假日=浅橙（20260916a：汇总列不再填充黄色，与导出 Excel 一致） */
table.grid-full.preview-grid th.rest,
table.grid-full.preview-grid td.rest { background: #FCE4D6 !important; }
table.grid-full.preview-grid th.holiday,
table.grid-full.preview-grid td.holiday { background: #F8CBAD !important; }
table.grid-full.preview-grid td.c-missing { background: #FFC7CE !important; color: #9C0006 !important; font-weight: 600; }
table.grid-full.preview-grid td.pv-late { color: #DC2626; }
table.grid-full.preview-grid td.pv-early { color: #2563EB; }
/* 员工表单 */
.form-field { margin-bottom: 14px; }
.form-field .field-label { display: block; margin-bottom: 6px; }
.form-field input,
.form-field select { width: 100%; box-sizing: border-box; }
.form-field input,
.form-field select {
padding: 10px 26px 10px 12px; font-size: 14.5px; border-radius: var(--radius-md);
}
/* 弹窗选项行（单选/复选）：横排对齐 */
.opt-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: 14.5px; color: var(--ink-700); }
.opt-row input[type="radio"], .opt-row input[type="checkbox"] { width: auto; margin: 0; accent-color: var(--accent-600); cursor: pointer; }
.form-field .field-help { margin: 2px 0 6px 22px; }
/* 考勤类型设置：两栏/三栏布局，chip 宽度随字段自适应，备注放每个选项下方 */
.cfg-att-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.cfg-att-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; }
.cfg-att-item { display: flex; flex-direction: column; gap: 3px; }
.cfg-att-item .chip { width: 100%; }
.cfg-att-item .field-help { margin: 0; font-size: 12.5px; line-height: 1.45; }
.form-field input:focus,
.form-field select:focus {
border-color: var(--accent-500);
box-shadow: 0 0 0 4px rgba(var(--accent-glow), 0.10);
}
/* 分页 */
.pagination { display: flex; align-items: center; gap: 6px; justify-content: flex-end; padding-top: 14px; flex-wrap: wrap; }
.pagination .page-info { margin-right: auto; color: var(--ink-400); font-size: 14px; }
/* 翻页按钮：默认白底灰边，当前页浅蓝底蓝字（全局统一） */
.pagination .btn { background: #fff; border-color: var(--ink-200); color: var(--ink-600); }
.pagination .btn:not(:disabled):hover { background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900); }
.pagination .page-num { min-width: 32px; padding: 4px 8px; }
.pagination .page-num.active { background: var(--accent-100); border-color: var(--accent-300); color: var(--accent-700); }
.pagination .page-ellipsis { color: var(--ink-400); padding: 0 2px; user-select: none; }
/* 员工管理页：#page-employees .btn ID 规则会盖掉上面的当前页浅蓝，同级覆盖恢复 */
#page-employees .pagination .btn.page-num.active {
background: var(--accent-100); border-color: var(--accent-300); color: var(--accent-700);
}
/* ============================================================
请假管理（独立子页面，类似规则设置）
============================================================ */
/* 页面容器：填满卡片剩余高度，内部滚动 */
.leave-pane {
flex: 1 1 0; min-height: 0; height: 0;
display: flex; flex-direction: column;
overflow: hidden;
}
/* 页头：返回 + 醒目的导入按钮在左，标题居中偏左，导出在右 */
.leave-page-head {
display: flex; align-items: center; gap: 12px;
padding-bottom: 14px; flex-shrink: 0;
flex-wrap: nowrap;
}
.leave-back-btn { flex-shrink: 0; }
.leave-page-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.leave-page-tip {
margin-left: auto;
font-size: 14.5px; color: var(--ink-500);
display: flex; align-items: center;
white-space: nowrap;
min-width: 0;
}
.leave-page-tip b { color: var(--accent-700); font-weight: 700; margin: 0 2px; }
/* 姓名列在请假表格中贴左侧固定，不要有 44px 的空隙 */
table.grid-full.leave-grid th.col-name,
table.grid-full.leave-grid td.col-name { left: 0; }
#leave-pagination { flex-shrink: 0; padding-top: 8px; }
/* 表格区域：提示文字在表格右上角，仅表格区域横向滚动（页面不动） */
.leave-table-area {
flex: 1 1 0; min-height: 0;
display: flex; flex-direction: column;
overflow: hidden;
}
.leave-table-tip {
text-align: right; font-size: 13.5px; color: var(--ink-400);
padding: 0 2px 8px; flex-shrink: 0;
}
.leave-table-wrap {
flex: 1 1 0; min-height: 0;
overflow: auto;
border: 1px solid var(--border-table);
border-radius: 8px;
background: var(--bg-paper);
}
.leave-table-wrap .empty-state { border: none; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
table.grid-full.leave-grid td.leave-cell {
cursor: pointer; position: relative; max-width: 48px; min-width: 42px;
white-space: normal; line-height: 1.5; font-size: 13.5px; padding: 4px 3px;
}
/* 请假表格日期列收窄，全屏时尽量不出现横向滚动条 */
table.grid-full.leave-grid th.col-day { width: 44px; min-width: 44px; }
table.grid-full.leave-grid td.leave-cell:hover {
outline: 2px solid var(--accent-500); outline-offset: -2px;
background: var(--accent-50) !important; z-index: 1;
}
table.grid-full.leave-grid td.leave-cell.empty { color: var(--ink-400); }
table.grid-full.leave-grid td.leave-total { min-width: 64px; }
.leave-type-tag { display: inline-block; background: var(--accent-50); color: var(--accent-600);
border-radius: 5px; padding: 1px 5px; margin: 1px 2px 1px 0; font-size: 12.5px; }
.leave-emp-name { cursor: default; }
/* 请假修改弹窗 */
.modal-box.wide { max-width: 560px; }
/* 考勤组表单弹窗：加宽 + 3 个时间段占一行 */
.modal-box.wide.group-wide { max-width: 880px; }
/* 午间连班（考勤组弹窗 + 规则设置 04 加班规则共用） */
.noon-box, .group-noon-box {
border: 1px solid var(--border-default); border-radius: 10px;
background: var(--bg-paper-2); padding: 13px 15px;
display: flex; flex-direction: column; gap: 12px;
}
.noon-switch-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.noon-switch-text { font-size: 14.5px; font-weight: 500; color: var(--ink-800); }
.noon-detail { display: flex; flex-direction: column; gap: 11px;
border-top: 1px dashed var(--border-default); padding-top: 11px; }
.noon-block-title { font-size: 12.5px; font-weight: 600; color: var(--ink-500); }
.noon-detail .cfg-att-grid { margin-top: 0; }
.noon-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.noon-row-label { flex: none; font-size: 14px; font-weight: 600; color: var(--ink-700); }
.noon-start-line { margin-top: 2px; }
.noon-note { font-size: 13px; line-height: 1.6; }
/* 规则设置 04 加班规则（20260914d）：午间/晚间连班改为左右各占一栏（半宽），
box 内的规则 chip 改为纵向单列并允许换行，避免标题被省略号截断 */
#global-config-body .field[data-cfg-field="noon"] .cfg-att-grid,
#global-config-body .field[data-cfg-field="dinner"] .cfg-att-grid {
grid-template-columns: 1fr;
}
#global-config-body .field[data-cfg-field="noon"] .chip,
#global-config-body .field[data-cfg-field="dinner"] .chip { align-items: flex-start; }
#global-config-body .field[data-cfg-field="noon"] .chip-label,
#global-config-body .field[data-cfg-field="dinner"] .chip-label {
white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5;
}
#global-config-body .field[data-cfg-field="noon"] .noon-start-line .input-wrap,
#global-config-body .field[data-cfg-field="dinner"] .noon-start-line .input-wrap { width: 180px !important; }
/* 考勤组弹窗内规则 chips：纵向两行全宽可换行 */
.group-noon-rules { display: flex; flex-direction: column; gap: 8px; }
.group-noon-rules .chip { width: 100%; justify-content: flex-start; padding: 10px 12px; }
.group-noon-rules .chip .chip-label { white-space: normal; line-height: 1.5; font-size: 14px; }
#group-noon-wrap .field-label, #group-dinner-wrap .field-label { display: block; margin-bottom: 6px; }
#group-noon-wrap .noon-switch-line, #group-dinner-wrap .noon-switch-line { gap: 14px; }
/* 考勤组弹窗两栏行：名称+打卡次数、午间连班+晚间连班 */
.group-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; align-items: start; }
/* 开关行（是否自由打卡/是否存在倒班/错位）行距收紧统一，列表块与上下字段留出舒适间距 */
#group-form-modal .form-field-row { margin-bottom: 12px; }
#group-shift-wrap, #group-time-wrap { margin: 2px 0 14px; }
/* 弹性打卡：下拉（是/否）+ 条件输入框同宽各占一半，风格与普通字段一致（无底色） */
.flex-inline-row { display: flex; align-items: center; gap: 12px; }
.flex-inline-row .select-wrap { flex: 1; min-width: 0; }
.flex-inline-row input[type="number"] { flex: 1; min-width: 0; width: auto; }
/* 规则设置 02 工作时间与班次（20260914f）：弹性打卡「是/否」下拉**默认与下班时间框同宽**（占满本栏），
选「是」后下拉收窄（flex-max-on），右侧留出空间显示「最大弹性时长」（分钟）输入框 */
#global-config-body .field[data-cfg-field="flex"] .flex-inline-row { gap: 10px; }
#global-config-body .field[data-cfg-field="flex"] .flex-inline-row .select-wrap { flex: 1 1 auto; }
#global-config-body .field[data-cfg-field="flex"] .flex-inline-row.flex-max-on .select-wrap { flex: 0 0 84px; }
#global-config-body .field[data-cfg-field="flex"] .flex-inline-row.flex-max-on input[type="number"] { flex: 1 1 auto; }
/* 规则设置 08 全勤规则（20260914g/h）：规则1 为固定规则，输入框只读（禁止输入状态）；
外观沿用普通字段的正常描边线框（外包 .input-wrap 的 1px 实线），
内层 input 不再自带边框，避免出现黑色虚线框 */
.input.is-locked, #global-config-body .input.is-locked {
background: transparent; color: var(--ink-700);
cursor: not-allowed; opacity: 1; border: none;
}
.input-wrap:has(.input.is-locked),
#global-config-body .input-wrap:has(.input.is-locked) {
background: var(--bg-paper-2); cursor: not-allowed;
}
.input-wrap:has(.input.is-locked):hover { border-color: var(--border-default); }
/* 规则设置 08 全勤规则（20260914i）：启用开关与全勤奖金额整合为同一字段、五项并排一行；
「是/否」下拉默认满宽，选「是」后收窄（flex-max-on）并露出金额输入框（交互同弹性打卡） */
#global-config-body .field[data-cfg-field="full_attendance"] .flex-inline-row { gap: 8px; }
#global-config-body .field[data-cfg-field="full_attendance"] .flex-inline-row .select-wrap { flex: 1 1 auto; min-width: 0; }
#global-config-body .field[data-cfg-field="full_attendance"] .flex-inline-row .input-wrap { flex: 1 1 auto; min-width: 0; }
#global-config-body .field[data-cfg-field="full_attendance"] .flex-inline-row.flex-max-on .select-wrap { flex: 0 0 62px; }
#global-config-body .field[data-cfg-field="full_attendance"] .flex-inline-row .input-suffix { padding-right: 9px; padding-left: 4px; }
/* 1/5 窄栏：只读规则1 的字号收到 14px，过长时省略显示（完整规则见下方提示文字） */
#global-config-body .field[data-cfg-field="full_attendance_rule1"] .input.is-locked {
font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 大小周设置弹窗：组行 + 逗号分隔日期输入框 */
.bsw-row { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
.bsw-group-name { flex: none; min-width: 110px; max-width: 220px; font-weight: 600; font-size: 14px; color: var(--ink-800); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsw-input { min-width: 0; }
.group-time-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
.group-time-row.group-ot-row { grid-template-columns: repeat(3, 1fr); }
.group-time-row.group-ot-row .group-time-col:last-child { grid-column: span 1; }
.group-time-col { background: var(--bg-paper-2); border: 1px solid var(--border-default); border-radius: 10px; padding: 12px 14px; }
/* 倒班/自由打卡统一班次列表（横向一行一个班次，节省高度） */
.shift-list {
background: var(--bg-paper-2); border: 1px solid var(--border-default);
border-radius: 10px; padding: 12px 14px;
}
.shift-grid, .shift-grid-row {
display: grid; grid-template-columns: 86px repeat(8, minmax(0, 1fr)) 30px;
gap: 6px; align-items: center;
}
.shift-grid-head {
font-size: 12px; font-weight: 600; color: var(--ink-500);
padding: 0 0 6px; text-align: center; white-space: nowrap;
}
.shift-grid-head .head-sub { font-size: 11px; font-weight: 400; color: var(--ink-400); }
.shift-grid-row { margin-bottom: 6px; }
.shift-grid-row:last-of-type { margin-bottom: 0; }
.shift-row-name {
font-size: 12.5px; font-weight: 600; color: var(--ink-700);
text-align: center; white-space: nowrap;
}
.shift-cell {
width: 100%; box-sizing: border-box; padding: 5px 4px !important;
font-size: 13px !important; text-align: center; border-radius: 6px !important;
}
.shift-del-btn {
width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border-strong);
background: var(--bg-paper); color: var(--ink-500); cursor: pointer;
font-size: 15px; line-height: 1; padding: 0; flex-shrink: 0;
}
.shift-del-btn:hover { border-color: var(--danger); color: var(--danger); background: #fef2f2; }
.shift-add-btn { margin-top: 8px; }
.group-time-col-title { font-size: 13px; font-weight: 600; color: var(--ink-700); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-default); text-align: center; }
.group-time-col .cell-field { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.group-time-col .cell-field:last-child { margin-bottom: 0; }
.group-time-col .cell-field .field-label { flex: none; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink-800); }
.group-time-col .cell-field input { flex: 1; min-width: 0; }
/* 开关字段：文字 + 开关同一行（间距 20px，不贴最右） */
#group-form-modal .form-field-row { display: flex; align-items: center; gap: 20px; }
#group-form-modal .form-field-row .field-label { display: inline; margin: 0; font-weight: 600; color: var(--ink-800); }
/* 不固定休息：标题占一行，下方两栏（左选择休息类型、右月休输入框） */
.rest-type-row { display: flex; align-items: center; gap: 14px; }
.rest-type-row .select-wrap { flex: 1; min-width: 0; }
.rest-type-row .group-rest-days-input { width: 150px; flex: none; }
/* 跨凌晨班次开关行：与上方模块保持合适间距 */
#shift-form-modal .shift-crossdawn-row { margin-top: 14px; }
/* 跨凌晨打卡记录是否错位：单选框行 + 下方独立备注行（不与选项重叠） */
.crossdawn-radio-row { display: flex; align-items: center; gap: 22px; }
.crossdawn-radio-row .radio-inline { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14.5px; color: var(--ink-800); }
.crossdawn-radio-row .radio-inline input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent-600); cursor: pointer; }
.crossdawn-note { font-size: 12.5px; margin-top: 8px; line-height: 1.5; }
/* 考勤组弹窗：班次卡片列表（每个班次独立配置，点击编辑在二级弹窗中设置） */
.shift-cards { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.shift-card {
display: flex; align-items: center; gap: 16px;
background: var(--bg-paper-2); border-radius: 10px; padding: 12px 16px;
}
.shift-card-main { flex: 1; min-width: 0; }
.shift-card-name { font-size: 15px; font-weight: 600; color: var(--ink-900); margin-bottom: 2px; }
.shift-card-time { font-size: 13px; color: var(--ink-600); font-family: var(--font-mono); margin-bottom: 6px; }
.shift-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.shift-tag {
font-size: 11.5px; line-height: 1; padding: 4px 8px; border-radius: 6px;
background: var(--accent-50); color: var(--accent-600); white-space: nowrap;
}
.shift-card-ops { display: flex; gap: 8px; flex-shrink: 0; }
.shift-cards-foot { display: flex; align-items: center; gap: 12px; }
/* 班次弹窗：时间设置网格（4 列，标签在上输入在下） */
.shift-time-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.st-field { display: flex; flex-direction: column; gap: 5px; }
.st-field .field-label { font-size: 12.5px; }
.st-field .head-sub { font-size: 10.5px; font-weight: 400; color: var(--ink-400); }
.st-field input { padding: 8px 10px; font-size: 14px; border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-paper); color: var(--ink-900); font-family: var(--font-mono); width: 100%; box-sizing: border-box; }
.st-field input:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(var(--accent-glow), 0.12); }
.group-rest-days-input { padding: 9px 12px; font-size: 14.5px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-paper); color: var(--ink-800); font-family: var(--font-mono); box-sizing: border-box; }
/* 排班表管理：列表（表格样式与员工管理 emp-table 一致，无外层边框包裹） */
.sched-list-area { flex: 1 1 0; min-height: 0; overflow: auto; }
.sched-list-table tbody tr { cursor: default; }
.sched-list-table .ops { width: 130px; }
/* 排班页与请假管理同布局：去掉 card 双层包裹后压缩页头下方间距 */
#tab-schedule .leave-page-head { padding-bottom: 10px; }
/* 排班表管理页：提示文字紧跟「更新排班数据至考勤」按钮右侧 10px（不推到最右） */
#tab-schedule .leave-page-tip { margin-left: 10px; }
/* 排班表详情页：提示文字推到最右侧（与列表页 10px 规则区分） */
#tab-schedule .sched-tip-end { margin-left: auto; }
/* 浅蓝操作按钮（与请假管理按钮同风格）：导入/导出类 */
.btn-lightblue {
background: var(--accent-50); border-color: var(--accent-100); color: var(--accent-700);
}
.btn-lightblue:not(:disabled):hover {
background: var(--accent-100); border-color: var(--accent-300); color: var(--accent-700);
}
/* 浅红危险操作按钮：清空数据 */
.btn-lightred {
background: #fef2f2; border-color: #fecaca; color: #b91c1c;
}
.btn-lightred:not(:disabled):hover {
background: #fee2e2; border-color: #fca5a5; color: #991b1b;
}
.sched-group-name { font-weight: 600; color: #000; white-space: nowrap; }
.sched-shift-lines { display: flex; flex-direction: column; gap: 4px; }
.sched-shift-line { display: flex; align-items: baseline; gap: 10px; }
.sched-shift-name { font-size: 14px; font-weight: 600; color: #000; }
.sched-shift-time { font-size: 12.5px; color: var(--ink-500); font-family: var(--font-mono); }
.sched-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.sched-badge.ok { background: rgba(22, 163, 74, 0.12); color: #16a34a; }
.sched-badge.none { background: var(--bg-paper-2); color: var(--ink-500); }
.sched-badge.pending { background: rgba(234, 88, 12, 0.12); color: #ea580c; }
.leave-page-tip .tip-warn { color: #dc2626; font-weight: 600; }
/* 排班表详情：表格样式与请假管理 leave-grid 一致（姓名列固定，日期列收窄） */
table.grid-full.sched-detail td.col-day { min-width: 46px; padding: 3px 2px; }
table.grid-full.sched-detail th.sched-day-th { font-family: var(--font-mono); }
table.grid-full.sched-detail th.sched-day-th.sched-we { color: #dc2626; }
table.grid-full.sched-detail td.sched-cell-txt { font-size: 13px; text-align: center; }
.sched-member-name { font-weight: 600; }
.sched-sel { width: 100%; min-width: 0; padding: 3px 15px 3px 2px; font-size: 12.5px; border: 1px solid var(--border-default); border-radius: 6px; background-color: var(--bg-paper); color: var(--ink-900); box-sizing: border-box; text-align: center; text-align-last: center; }
.sched-sel:focus { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(var(--accent-glow), 0.12); }
/* 导入时班次不一致被清空的单元格：1px 红色边框 + 右上角红色角标，悬停提示 */
td.sched-cell-invalid { position: relative; border: 1px solid #dc2626 !important; box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.18); cursor: help; }
td.sched-cell-invalid::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-top: 9px solid #dc2626;
border-left: 9px solid transparent;
border-top-right-radius: 4px;
z-index: 1;
pointer-events: none;
}
/* 弹窗内警示文字（排班表格式选择） */
.tpl-warn-text { color: #dc2626; font-weight: 600; }
.leave-edit-hint { margin-bottom: 10px; font-size: 14px; }
.leave-edit-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.leave-edit-row { display: flex; align-items: center; gap: 8px; }
.leave-edit-row select { border: 1px solid var(--border-default);
border-radius: 8px; background-color: var(--bg-paper); color: var(--ink-800); font-size: 14px; font-family: inherit; padding-right: 24px; }
.leave-edit-row .leave-type-select { flex: 1; min-width: 0; padding: 6px 8px; }
.leave-edit-row input[type="number"] { width: 84px; padding: 6px 8px; border: 1px solid var(--border-default);
border-radius: 8px; background: var(--bg-paper); color: var(--ink-800); font-size: 14px; font-family: inherit; }
.leave-edit-row .leave-am-pm-select { width: 76px; padding: 6px 4px; flex-shrink: 0; }
.leave-edit-row .leave-unit-select { width: 72px; padding: 6px 4px; flex-shrink: 0; }
.leave-edit-empty { color: var(--ink-400); font-size: 14px; padding: 8px 0; }
/* 规则设置：请假类型出勤天数配置列表 */
.lt-days-list { display: flex; flex-direction: column; gap: 6px; }
.lt-days-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--bg-tinted);
border: 1px solid var(--border-default);
border-radius: 8px;
padding: 7px 12px;
}
.lt-days-row .lt-days-name { font-weight: 600; color: var(--ink-800); min-width: 64px; }
.lt-days-row .lt-days-short { width: 72px; padding: 4px 8px; font-size: 14px; }
.lt-days-row .muted { font-size: 13.5px; }
.lt-days-row .switch { flex-shrink: 0; }
.lt-days-row .lt-days-sep { width: 1px; align-self: stretch; background: var(--border-default); margin: 2px 2px; flex-shrink: 0; }
.lt-days-row .lt-days-unit-label { font-size: 13.5px; color: var(--ink-500); white-space: nowrap; }
.lt-days-row .lt-days-unit {
padding: 4px 24px 4px 8px; font-size: 14px; min-width: 116px;
border: 1px solid var(--border-default); border-radius: var(--radius-md);
background-color: var(--bg-paper); color: var(--ink-800); cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 8px center;
}
.lt-days-row .lt-days-unit:focus { border-color: var(--accent-500); box-shadow: 0 0 0 3px rgba(var(--accent-glow), 0.10); }
/* 结尾提示（20260915c）：两段编号说明各占一行，行内不折行（避免半句换行） */
.lt-days-hint { font-size: 13px; color: var(--ink-400); margin-top: 6px; line-height: 1.7; }
.lt-days-hint > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ============================================================
登录页
============================================================ */
.login-wrap {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background:
radial-gradient(720px 360px at 15% -10%, rgba(var(--accent-glow), 0.10), transparent 70%),
linear-gradient(180deg, #eaf1fe 0%, var(--bg-canvas) 46%, var(--bg-canvas) 100%);
}
.login-box {
width: 100%; max-width: 400px;
background: var(--bg-paper);
border: none;
border-radius: 16px;
box-shadow: var(--shadow-lg);
padding: 34px 32px 30px;
}
.login-box h2 {
font-size: 21px; font-weight: 700; color: var(--ink-800);
margin-bottom: 6px; letter-spacing: 0.01em;
}
.login-box .sub {
font-size: 14px; color: var(--ink-400);
margin-bottom: 22px; line-height: 1.5;
}
.login-box .field {
display: flex; flex-direction: column; gap: 7px;
margin-bottom: 16px;
}
.login-box .lb {
font-size: 14px; font-weight: 500; color: var(--ink-600);
}
.login-box input {
width: 100%; box-sizing: border-box;
padding: 10px 12px; font-size: 15px;
}
.login-box .btn { width: 100%; padding: 10px 14px; margin-top: 4px; }
/* ============================================================
员工管理页 · 按钮配色方案（UI 分析 After 方案落地）
层级：同步员工数据=唯一实心主按钮(btn-accent) > 次级白底描边
> 行内文字按钮(ghost) > 删除红色仅在 hover/已勾选时出现
============================================================ */
/* 次级按钮：白底灰描边（分析 a-secondary），不与主按钮争夺视线 */
#page-employees .btn:not(.btn-accent):not(:disabled) {
background: #fff; border-color: var(--ink-200); color: var(--ink-600);
}
#page-employees .btn:not(.btn-accent):not(:disabled):hover {
background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900);
}
/* 未激活（未勾选）：灰色禁用态，不回落到浅蓝基础样式 */
#page-employees .btn:disabled {
background: var(--ink-100); border-color: var(--ink-200); color: var(--ink-400);
cursor: not-allowed;
}
/* 批量删除：未勾选=灰色禁用；勾选后=白底红字红边，hover 浅红底 */
#page-employees .emp-batch-del:not(:disabled) {
background: #fff; border-color: #fca5a5; color: #b91c1c;
}
#page-employees .emp-batch-del:not(:disabled):hover {
background: #fee2e2; border-color: var(--danger); color: #991b1b;
}
/* 行内操作（全站列表通用）：默认灰底 + 黑字，hover 变浅蓝 */
.emp-row-btn, .row-btn {
background: var(--ink-100); border: none; color: #000;
font-size: 15px; padding: 4px 8px; border-radius: 6px; cursor: pointer;
transition: all .15s; white-space: nowrap;
}
.emp-row-btn:hover, .row-btn:hover { background: var(--accent-50); color: var(--accent-700); }
/* 行内删除：默认黑字，hover 变红 + 浅红底 */
.emp-row-btn.emp-row-del, .row-btn.row-btn-del { color: #000; }
.emp-row-btn.emp-row-del:hover, .row-btn.row-btn-del:hover { background: #fee2e2; color: var(--danger); }
/* 列表正文字号 +2px（仅员工列表正文，表头保持） */
#emp-list table.grid-full { font-size: 16px; }
/* 蓝字按钮（白底蓝字，hover 浅蓝底）：员工页部门/考勤组管理、考勤统计页大小周/节假日/排班/请假入口 */
.btn.btn-linkblue:not(:disabled) {
background: #fff; border-color: var(--ink-200); color: var(--accent-700);
}
.btn.btn-linkblue:not(:disabled):hover {
background: var(--accent-50); border-color: var(--accent-300); color: var(--accent-700);
}
/* 员工管理页：ID 级次级按钮规则(#page-employees .btn)优先级高于上面的全局类，需同级覆盖恢复蓝字 */
#page-employees .btn.btn-linkblue:not(:disabled) {
background: #fff; border-color: var(--ink-200); color: var(--accent-700);
}
#page-employees .btn.btn-linkblue:not(:disabled):hover {
background: var(--accent-50); border-color: var(--accent-300); color: var(--accent-700);
}
/* 返回按钮：白底灰字（区别于浅蓝动作按钮） */
.btn.btn-white:not(:disabled) {
background: #fff; border-color: var(--ink-200); color: var(--ink-600);
}
.btn.btn-white:not(:disabled):hover {
background: var(--ink-50); border-color: var(--ink-300); color: var(--ink-900);
}
/* 考勤统计结果页字号保持 14px 不变（本轮统一 15px 的例外） */
#summary-grid table.grid-full { font-size: 14px; }
/* 绿色按钮禁用态（请假页「更新请假数据至考勤」无数据时） */
.btn-green:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-green:disabled:hover { background: #16a34a; border-color: #15803d; transform: none; }
/* 面包屑页面标题（请假管理/排班表管理）：不加粗，上一级可点击，当前页浅色 */
.proj-crumb { display: flex; align-items: center; gap: 8px; }
.proj-crumb .crumb-link {
cursor: pointer; color: var(--ink-700); border-radius: 6px; padding: 2px 4px;
transition: all .15s;
}
.proj-crumb .crumb-link:hover { color: var(--accent-600); background: var(--accent-50); }
.proj-crumb .crumb-sep { color: var(--ink-300); }
.proj-crumb .crumb-cur { color: var(--ink-400); }
/* 缺勤（整天无打卡文字标记）：浅橙底橙字，与缺卡浅红区分 */
table.grid-full td.c-absent { background: #ffedd5 !important; color: #c2410c; font-weight: 600; }
.lg-dot.c-absent { background: #ffedd5; }
/* 分页容器统一：考勤统计/预览的外层为 flex，内层 .pagination 需占满宽度使「共 N 人」靠左 */
.summary-pagination > .pagination, .preview-pagination > .pagination { width: 100%; }
/* ============================================================
全站下拉选择框箭头统一：黑色实心小三角（与考勤统计页
姓名/部门筛选按钮的 ▾ 一致）；各 select 规则的 background
已改为 background-color，避免简写清掉本箭头
============================================================ */
select {
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 26px;
}
/* ---------- 配置考勤明细表格格式（20260914k） ---------- */
/* 表格配置入口按钮：20260916c 从「模块标题右侧」移到「模块内容区顶部」，
故用 .cfg-card-actions（挂在 .cfg-card-body 内，明细在前、汇总在后）。
.cfg-head-actions 为 20260914k~20260916b 的旧位置样式，已不再使用。 */
.cfg-card-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cfg-card-actions + .field-grid,
.cfg-card-actions + .cfg-actions-note { margin-top: 18px; }
/* 全屏子页面 */
.de-overlay { position: fixed; inset: 0; z-index: 1000; background: #f2f4f8; display: flex; flex-direction: column;
--de-hot: #e8f2ff; /* 鼠标经过的高亮底色（20260914q：浅红 → 浅蓝） */
--de-hot-line: #b9d7fa; }
.de-overlay.hidden { display: none; }
.de-topbar { display: flex; align-items: center; gap: 14px; padding: 12px 20px; background: #fff;
border-bottom: 1px solid var(--border-default); flex-shrink: 0; }
.de-title { font-size: 16.5px; font-weight: 600; color: var(--ink-800); }
.de-topbar-actions { margin-left: auto; display: flex; gap: 8px; flex-shrink: 0; }
/* 表格区高度自适应（20260914q：内容不足时贴合内容高度，避免表格与温馨提示之间出现空白；
内容超高时收缩为可用高度，表内滚动 + 表头吸顶），下方紧跟「温馨提示」区域 */
.de-body { flex: 1 1 0; display: flex; flex-direction: column; gap: 12px;
overflow: hidden; padding: 14px 20px 16px; }
.de-table-wrap { flex: 0 1 auto; min-height: 0; max-height: 100%; background: #fff;
border: 1px solid var(--border-default); border-radius: 8px; overflow: auto; }
/* 温馨提示（表格下方，每条独立一行，14px 黑色） */
.de-tips { flex: 0 0 auto; background: #fff; border: 1px solid var(--border-default);
border-radius: 8px; padding: 12px 18px 13px; }
.de-tips-title { font-size: 14px; font-weight: 600; color: #000; margin-bottom: 5px; }
.de-tips-list { margin: 0; padding: 0; list-style: none; counter-reset: de-tip; }
.de-tips-list li { counter-increment: de-tip; position: relative; padding-left: 22px;
font-size: 14px; color: #000; line-height: 1.95; }
.de-tips-list li::before { content: counter(de-tip) '、'; position: absolute; left: 0; top: 0;
font-size: 14px; color: #000; }
/* 预览表：单元格内容统一 14px、水平垂直居中；表格宽度铺满容器，列窄时撑开滚动 */
.de-table { border-collapse: separate; border-spacing: 0; font-size: 14px; color: var(--ink-800);
min-width: 100%; }
.de-table th, .de-table td { border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default);
padding: 9px 6px; text-align: center; vertical-align: middle; white-space: nowrap; background: #fff; }
.de-table thead th { position: sticky; top: 0; z-index: 30; background: var(--bg-paper-2);
font-weight: 600; color: var(--ink-800); white-space: normal; word-break: break-all; }
.de-table thead tr:first-child th { height: 34px; }
.de-table .de-sticky { position: sticky; z-index: 20; }
.de-table thead .de-sticky { z-index: 40; }
.de-sum-head { min-width: 52px; padding-left: 4px; padding-right: 4px; }
.de-sum-head[draggable="true"] { cursor: grab; }
.de-sum-head .de-sum-label { white-space: normal; display: inline-block; line-height: 1.3; vertical-align: middle; }
.de-add-head { min-width: 84px; }
.de-add-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px dashed var(--brand);
color: var(--brand); background: var(--brand-softer); border-radius: 6px; padding: 4px 10px;
font-size: 12.5px; cursor: pointer; }
.de-add-btn:hover { background: var(--brand-soft); }
/* 指标行：经过行内「指标项 / 日期格」→ 该行高亮，并显示移除按钮（20260914r：改用
.de-row-hot 类，由表级 mouseover 维护 —— 汇总列的合并单元格落在首行，
CSS :hover 会让鼠标经过汇总列时连带点亮「上午上班」行） */
.de-row .de-name { cursor: grab; user-select: none; }
.de-name .de-name-text { display: inline-block; max-width: 96px; white-space: normal; vertical-align: middle; line-height: 1.3; }
.de-table .de-row.de-row-hot .de-name,
.de-table .de-row.de-row-hot .de-daycell { background: var(--de-hot, #e8f2ff); }
.de-name:active { cursor: grabbing; }
.de-dragging { opacity: .4; }
.de-drop-before { box-shadow: inset 0 2px 0 var(--brand); }
.de-drop-after { box-shadow: inset 0 -2px 0 var(--brand); }
/* 每日明细区域整块高亮（经过任一日期表头） */
.de-table.de-days-hot .de-daycell,
.de-table.de-days-hot .de-day-head { background: var(--de-hot, #e8f2ff); }
/* 汇总列整列高亮 */
.de-table .de-col-hot { background: var(--de-hot, #e8f2ff); }
/* 移除按钮：绝对定位居中悬浮在所属区域中心（不占布局 → 无抖动），黑色半透明底 + 白字。
显隐由区域 hover 控制：横向=指标行经过任意位置；纵向=汇总列经过表头或内容格；
每日明细=经过任一日期表头或日格（20260914p） */
.de-del { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; justify-content: center; z-index: 25;
border: none; border-radius: 5px; padding: 2px 9px; font-size: 12px; line-height: 1.6;
font-family: inherit; white-space: nowrap;
cursor: pointer;
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .12s, background .12s; }
/* 20260914q：背景/文字用 .de-table .de-del 提特异性，保证被列/行高亮（.de-col-hot 等）命中时
仍然是黑色半透明底 + 白字（历史问题：纵列经过时按钮底被浅红高亮覆盖 → 白字看不清） */
.de-table .de-del { background: rgba(0, 0, 0, .62); color: #fff; }
.de-table .de-del:hover { background: rgba(0, 0, 0, .88); }
.de-table .de-row.de-row-hot .de-del-row,
.de-table .de-col-hot .de-del-sum,
.de-table.de-days-hot .de-del-days { opacity: 1; visibility: visible; pointer-events: auto; }
/* 被移除按钮覆盖的单元格：hover 区域内容变暗，突出按钮 */
.de-table .de-daycell.de-col-hot, .de-table .de-day-head.de-col-hot { background: var(--de-hot, #e8f2ff); }
/* 单元格内容 */
.de-punch { font-family: var(--font-mono); font-size: 14px; min-width: 52px; }
.de-empty { color: var(--ink-400); }
.de-bad { color: var(--danger); font-weight: 600; }
.de-rest-mark { color: var(--ink-400); }
.de-emp { font-weight: 600; }
.de-sumcell { position: relative; z-index: 1; min-width: 48px; padding-left: 4px; padding-right: 4px;
font-family: var(--font-mono); }
/* 每日一列（20260914m）：列头「9/1 + 周几」、周末列淡红底、中间省略列、汇总列纵向合并 */
.de-day-head { min-width: 52px; padding: 3px 5px; line-height: 1.25; }
.de-day-head .de-wd { font-weight: 400; color: var(--ink-400); }
.de-table .de-day-rest { background: #fdf0ef; }
.de-table .de-days-hot .de-day-rest { background: var(--de-hot, #e8f2ff); }
.de-ellipsis-head, .de-ellipsis-cell { min-width: 24px; padding: 3px 2px; color: var(--ink-400); }
/* 省略列表头承载「移除」按钮 → 留出按钮宽度；hover 时隐藏「…」避免透出 */
.de-ellipsis-head { min-width: 58px; }
.de-table.de-days-hot .de-ellipsis-txt { visibility: hidden; }
/* 汇总列整列合并为一个单元格：值垂直居中加粗 */
.de-table .de-sumcell { vertical-align: middle; font-weight: 600; font-size: 14px; }
.de-sum-val { display: inline-block; }
.de-blank { border-right: 1px solid var(--border-default); }
.de-add-cell { text-align: center; }
/* 添加弹框（20260914o：页面居中模态 + 遮罩；标题/底部固定，中间列表滚动） */
.de-pop-mask { position: fixed; inset: 0; z-index: 1090; background: rgba(15, 23, 42, .32); }
.de-pop-mask.hidden { display: none; }
.de-pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1100;
background: #fff; border: 1px solid var(--border-default); border-radius: 10px;
box-shadow: 0 14px 40px rgba(15, 23, 42, .22); padding: 12px 16px;
width: 600px; max-width: calc(100vw - 48px); height: 580px; max-height: calc(100vh - 80px);
display: flex; flex-direction: column; }
.de-pop.hidden { display: none; }
.de-pop-head { flex: 0 0 auto; padding: 2px 4px 10px; border-bottom: 1px solid var(--border-default); }
.de-pop-title { font-size: 16px; font-weight: 600; color: #111; }
.de-pop-sub { font-size: 14px; color: var(--ink-400); margin-top: 3px; line-height: 1.4; }
.de-pop-list { flex: 1 1 0; overflow-y: auto; padding: 6px 4px; }
.de-pop-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 9px; border-radius: 8px;
cursor: pointer; }
.de-pop-item:hover { background: var(--brand-softer); }
.de-pop-item.disabled { opacity: .55; cursor: not-allowed; }
.de-pop-item.disabled:hover { background: transparent; }
/* 勾选框 */
.de-check { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; border: 1.5px solid var(--ink-400);
border-radius: 4px; background: #fff; position: relative; }
.de-pop-item.selected .de-check { background: var(--brand); border-color: var(--brand); }
.de-pop-item.selected .de-check::after { content: '✓'; position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
/* 条目内容：标题（16px 加粗黑色）+ 描述（14px 灰色）换行显示 */
.de-it-body { display: flex; flex-direction: column; min-width: 0; }
.de-it-title { font-size: 16px; font-weight: 600; color: #111; line-height: 1.35; }
.de-it-desc { font-size: 14px; color: var(--ink-400); line-height: 1.4; margin-top: 2px; }
.de-pop-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 10px 4px 2px;
border-top: 1px solid var(--border-default); }
/* 归档页面：弹框顶部「添加自定义列」（20260914r） */
.de-pop-custom { margin-top: 10px; padding: 10px 12px 11px; border-radius: 8px;
background: var(--brand-softer); border: 1px dashed var(--brand-line); }
.de-pop-custom-title { font-size: 14px; font-weight: 600; color: #111; margin-bottom: 7px; }
.de-pop-custom-row { display: flex; gap: 8px; align-items: center; }
.de-pop-custom-row .input { flex: 1 1 auto; min-width: 0; }
.de-pop-custom-row .btn { flex: 0 0 auto; padding: 7px 16px; font-size: 14px; }
.de-pop-custom-hint { margin-top: 7px; font-size: 12.5px; color: var(--ink-400); line-height: 1.5; }
.de-pop-custom-hint.de-pop-custom-warn { color: var(--danger); }
.de-pop-empty { padding: 26px 10px; text-align: center; font-size: 14px; color: var(--ink-400); }
/* ============================================================
订阅（20260916m）
左下角「当前用户版本」+ 订阅弹框（功能权益 / 按月 15 元 · 按年 156 元 / 积分输入 / 微信·支付宝扫码）
============================================================ */
/* ---------- 左下角当前用户版本 ---------- */
.sub-user-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 7px 10px 9px; border-radius: 8px; cursor: pointer; }
.sub-user-row:hover { background: var(--bg-paper-2); }
.sub-user-row.sub-row-admin { cursor: default; }
.sub-user-row.sub-row-admin:hover { background: transparent; }
.sub-user-row .btn.btn-xs { margin-left: auto; }
.sub-ver { flex: none; font-size: 14px; font-weight: 600; line-height: 1.45; padding: 1px 9px; border-radius: 999px;
background: var(--bg-paper-2); color: var(--ink-500); border: 1px solid var(--border-subtle); }
.sub-ver.trial, .sub-ver.admin { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-100); }
.sub-ver.paid { background: var(--success-soft); color: var(--success); border-color: rgba(var(--success-glow), 0.22); }
.sub-ver.none { background: var(--danger-soft); color: var(--danger); border-color: rgba(var(--danger-glow), 0.20); }
/* 到期日独占一行；侧栏窄时允许换行（20260916n：原 nowrap + 省略号会把「剩 N 天」截掉） */
.sub-ver-date { flex: 1 1 100%; font-size: 14px; color: var(--ink-400); line-height: 1.5; }
.btn.btn-xs { padding: 3px 10px; font-size: 14px; line-height: 1.5; border-radius: 6px; }
#expired-banner .btn { margin-left: 8px; vertical-align: middle; }
/* ---------- 订阅弹框 ---------- */
.modal-box.sub-modal-box { max-width: 820px; max-height: 92vh; display: flex; flex-direction: column; padding: 20px 24px 20px; }
.sub-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 4px; }
.sub-loading, .sub-empty { padding: 30px 6px; text-align: center; font-size: 14px; color: var(--ink-400); }
.sub-step { display: flex; flex-direction: column; gap: 16px; }
/* 当前版本条 */
.sub-cur { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
background: var(--brand-softer); border: 1px solid var(--accent-100); font-size: 14px; }
.sub-cur-label { flex: none; color: var(--ink-500); }
.sub-cur-val { font-weight: 600; color: var(--accent-700); }
/* 区块 */
.sub-sec { display: flex; flex-direction: column; gap: 9px; }
.sub-sec-title { font-size: 14px; font-weight: 600; color: var(--ink-800); }
/* 功能权益 */
.sub-benefits { list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.sub-benefit { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px;
border-radius: 8px; background: var(--bg-paper-2); border: 1px solid var(--border-subtle); }
.sub-benefit-ck { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--success-soft);
color: var(--success); font-size: 14px; font-weight: 700; line-height: 18px; text-align: center; }
.sub-benefit-tx { min-width: 0; }
.sub-benefit-tx b { display: block; font-size: 14px; font-weight: 600; color: var(--ink-800); }
.sub-benefit-tx i { display: block; font-style: normal; font-size: 14px; color: var(--ink-400); line-height: 1.5; margin-top: 2px; }
/* 方案（价格醒目） */
.sub-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 4px; }
.sub-plan { position: relative; padding: 16px 18px; border-radius: 12px; border: 2px solid var(--border-default);
background: var(--bg-paper); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.sub-plan:hover { border-color: var(--accent-300); transform: translateY(-1px); }
.sub-plan.selected { border-color: var(--accent-500); box-shadow: 0 8px 24px rgba(var(--accent-glow), 0.18); }
.sub-plan-tag { position: absolute; top: -11px; right: 14px; padding: 1px 10px; border-radius: 999px;
background: var(--accent-500); color: #fff; font-size: 14px; font-weight: 600; }
.sub-plan-name { font-size: 15px; font-weight: 600; color: var(--ink-700); }
.sub-plan-price { display: flex; align-items: baseline; gap: 2px; margin: 6px 0 4px; color: var(--accent-600); }
.sub-plan-cur { font-size: 22px; font-weight: 700; }
.sub-plan-num { font-family: var(--font-mono); font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -1px; }
.sub-plan-unit { font-size: 16px; font-weight: 600; color: var(--ink-500); margin-left: 3px; }
.sub-plan-note { font-size: 14px; color: var(--ink-400); }
.sub-plan-save { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 6px;
background: var(--yellow-50); border: 1px solid var(--yellow-200); color: #8a5a00; font-size: 14px; }
/* 积分输入（抵扣规则未启用，预留） */
.sub-points-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sub-points-input { display: flex; align-items: center; gap: 8px; padding: 5px 12px;
border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-paper); }
.sub-points-field { width: 130px; border: none; background: transparent; font-family: var(--font-mono);
font-size: 15px; color: var(--ink-800); padding: 3px 0; margin: 0; outline: none; }
.sub-points-unit { font-size: 14px; color: var(--ink-400); }
.sub-points-hint { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--ink-400); line-height: 1.5; }
/* 支付方式 */
.sub-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sub-method { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px;
border: 2px solid var(--border-default); background: var(--bg-paper); cursor: pointer; text-align: left; }
.sub-method:hover { border-color: var(--accent-300); }
.sub-method.active { border-color: var(--accent-500); background: var(--brand-softer); }
/* 渠道未开通（20260917b）：置灰不可选，避免用户选到不可用渠道后点确认支付才报错 */
.sub-method.sub-method-off { opacity: .55; cursor: not-allowed; }
.sub-method.sub-method-off:hover { border-color: var(--line-200); }
.sub-method.sub-method-off .sub-method-tx i { color: var(--ink-300); }
.sub-method-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: flex;
align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; }
.sub-method-ic-wechat { background: #22ac38; }
.sub-method-ic-alipay { background: #1677ff; }
.sub-method-tx { display: flex; flex-direction: column; min-width: 0; }
.sub-method-tx b { font-size: 14.5px; font-weight: 600; color: var(--ink-800); }
.sub-method-tx i { font-style: normal; font-size: 14px; color: var(--ink-400); }
.sub-methods-hint { font-size: 14px; color: var(--ink-400); }
/* 应付金额条 */
.sub-pay-bar { display: flex; align-items: center; gap: 16px; padding: 13px 16px;
border-radius: 12px; background: var(--bg-paper-2); border: 1px solid var(--border-subtle); }
.sub-pay-amt { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sub-pay-amt-label { font-size: 14px; color: var(--ink-500); }
.sub-pay-amt-val { font-family: var(--font-mono); font-size: 30px; font-weight: 700; color: var(--accent-600); line-height: 1; }
.sub-pay-amt-sub { flex-basis: 100%; font-size: 14px; color: var(--ink-400); }
.sub-pay-btn { flex: none; padding: 10px 26px; font-size: 15px; }
/* 第 2 步：扫码支付 */
.sub-order-head { display: flex; align-items: center; gap: 16px; padding: 12px 16px;
border-radius: 10px; background: var(--brand-softer); border: 1px solid var(--accent-100); }
.sub-order-amt { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--accent-600); line-height: 1; }
.sub-order-meta { font-size: 14px; color: var(--ink-500); line-height: 1.6; }
.sub-qr-wrap { display: flex; gap: 20px; align-items: stretch; }
.sub-qr { flex: none; width: 224px; padding: 12px; border-radius: 12px; background: #fff;
border: 1px solid var(--border-default); display: flex; align-items: center; justify-content: center; }
.sub-qr svg { display: block; width: 100%; height: auto; }
.sub-qr-text { font-size: 14px; color: var(--ink-600); line-height: 1.7; word-break: break-all; }
.sub-qr-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.sub-qr-title { font-size: 15px; font-weight: 600; color: var(--ink-800); }
.sub-qr-steps { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-600); line-height: 1.9; }
.sub-qr-warn { padding: 9px 12px; border-radius: 8px; background: var(--yellow-50);
border: 1px solid var(--yellow-200); color: #8a5a00; font-size: 14px; line-height: 1.6; }
.sub-qr-note { margin-top: auto; font-size: 14px; color: var(--ink-400); line-height: 1.6; }
/* 20260917c：链接型支付（沙箱 wap 收银台）—— 渠道给的是长签名 URL，不画二维码 */
.sub-qr.sub-qr-link { flex-direction: column; align-items: stretch; justify-content: flex-start;
width: 300px; gap: 10px; padding: 18px 16px; text-align: center; }
.sub-link-badge { align-self: center; padding: 3px 10px; border-radius: 999px; font-size: 13px;
font-weight: 600; color: #1677ff; background: #eff6ff; border: 1px solid #bfdbfe; }
.sub-link-title { font-size: 15px; font-weight: 600; color: var(--ink-800); }
.sub-link-amt { font-size: 30px; font-weight: 700; color: #1677ff; line-height: 1.15; }
.sub-link-btn { display: block; width: 100%; text-align: center; box-sizing: border-box; }
.sub-link-tip { font-size: 13px; color: var(--ink-400); line-height: 1.6; }
.sub-link-url { width: 100%; height: 62px; resize: none; box-sizing: border-box;
font: 12px/1.5 ui-monospace, Consolas, monospace; color: var(--ink-500);
background: #f8f9fb; border: 1px solid var(--border-default); border-radius: 8px;
padding: 6px 8px; word-break: break-all; }
/* 20260917d：沙箱测试提示 —— 沙箱收银台只能用「买家账号」登录，
用卖家账号（= 开沙箱应用的真实账号）会被支付宝拦下报「买家和卖家支付宝账号不能重合」。
正式环境下 pay.sandbox.on=false，本块不渲染。 */
.sub-sbx { padding: 10px 12px; border-radius: 8px; background: var(--yellow-50);
border: 1px solid var(--yellow-200); display: flex; flex-direction: column; gap: 5px; }
.sub-sbx-h { font-size: 14px; font-weight: 600; color: #8a5a00; }
.sub-sbx-b { font-size: 13px; color: #8a5a00; line-height: 1.65; }
.sub-sbx-b b { color: #6b4700; }
.sub-sbx-kv { font-size: 13px; color: #6b4700; background: #fff; border-radius: 6px;
padding: 6px 9px; font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.sub-sbx-kv b { color: #8a5a00; }
/* 第 3 步：订阅成功 */
.sub-step.sub-ok { align-items: center; text-align: center; padding: 14px 0 4px; }
.sub-ok-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--success-soft);
color: var(--success); font-size: 30px; font-weight: 700; line-height: 56px; }
.sub-ok-title { font-size: 20px; font-weight: 700; color: var(--ink-900); }
.sub-ok-desc { font-size: 15px; color: var(--ink-600); }
.sub-ok-desc b { color: var(--accent-700); }
.sub-ok-list { width: 100%; max-width: 460px; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; }
.sub-ok-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 14px; background: var(--bg-paper); }
.sub-ok-row + .sub-ok-row { border-top: 1px solid var(--border-subtle); }
.sub-ok-row span { color: var(--ink-400); }
.sub-ok-row b { font-weight: 600; color: var(--ink-800); }
.sub-ok-tip { font-size: 14px; color: var(--ink-400); }
.sub-ok .sub-pay-btn { min-width: 180px; }
@media (max-width: 760px) {
.sub-benefits, .sub-plans, .sub-methods { grid-template-columns: 1fr; }
.sub-qr-wrap { flex-direction: column; }
.sub-qr { width: 100%; max-width: 260px; margin: 0 auto; }
.sub-plan-num { font-size: 38px; }
.sub-pay-bar { flex-wrap: wrap; }
}
/* ============================================================
订阅弹框（20260918e）：截图风格 — 蓝色头部 + 卡片式方案 + 扫码支付区
============================================================ */
/* 弹框整体：去上 padding，让蓝色头部顶到最上方 */
.modal-box.sub-modal-box {
max-width: 520px; max-height: 92vh; display: flex; flex-direction: column;
padding: 0; overflow: hidden; background: #f7f8fa;
}
.sub-modal-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
padding: 18px 22px 22px;
}
/* 蓝色头部 */
.sub-modal-head {
position: relative; flex: none;
background: linear-gradient(135deg, #2b8cfa 0%, #1767d9 100%);
color: #fff; text-align: center; padding: 28px 20px 22px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sub-modal-icon {
width: 52px; height: 52px; margin: 0 auto 10px;
background: rgba(255,255,255,0.22); border-radius: 50%;
display: flex; align-items: center; justify-content: center;
backdrop-filter: blur(2px);
}
.sub-modal-icon svg { width: 28px; height: 28px; color: #fff; }
.sub-modal-title { font-size: 24px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }
.sub-modal-subtitle { font-size: 14px; color: rgba(255,255,255,0.82); margin-top: 4px; }
.sub-modal-close {
position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
border: none; border-radius: 50%; background: rgba(255,255,255,0.18);
color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.sub-modal-close:hover { background: rgba(255,255,255,0.30); }
/* 步骤容器 */
.sub-step { display: flex; flex-direction: column; gap: 16px; }
/* 套餐卡片 */
.sub-plans-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sub-plan-card {
position: relative; display: flex; align-items: center; gap: 12px;
padding: 16px 14px; border-radius: 14px;
border: 1.5px solid var(--border-default); background: #fff;
cursor: pointer; transition: all .15s;
}
.sub-plan-card:hover { border-color: var(--accent-300); }
.sub-plan-card.selected {
border-color: #2b8cfa;
box-shadow: 0 4px 16px rgba(43,140,250,0.14);
}
.sub-plan-card-readonly { cursor: default; }
.sub-plan-card-readonly:hover { border-color: var(--border-default); }
.sub-plan-radio {
flex: none; width: 20px; height: 20px; border-radius: 50%;
border: 2px solid #cbd5e1; display: flex; align-items: center; justify-content: center;
}
.sub-plan-card.selected .sub-plan-radio { border-color: #2b8cfa; }
.sub-plan-radio-dot {
width: 10px; height: 10px; border-radius: 50%; background: #2b8cfa;
}
.sub-plan-card-body { flex: 1 1 auto; min-width: 0; }
.sub-plan-card-name { font-size: 15px; font-weight: 700; color: var(--ink-800); }
.sub-plan-card-hint,
.sub-plan-card-save { font-size: 13px; line-height: 1.45; margin-top: 3px; }
.sub-plan-card-hint { color: var(--ink-400); }
.sub-plan-card-save { color: #10b981; font-weight: 600; }
.sub-plan-card-price {
flex: none; display: flex; align-items: baseline; gap: 1px;
color: #2b8cfa; font-weight: 700;
}
.sub-plan-card-cur { font-size: 16px; }
.sub-plan-card-num { font-size: 28px; letter-spacing: -1px; }
.sub-plan-card-unit { font-size: 13px; color: var(--ink-500); font-weight: 600; }
/* 扫码支付卡片 */
.sub-pay-card {
background: #fff; border-radius: 16px; border: 1px solid var(--border-default);
overflow: hidden;
}
.sub-pay-card-head {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 18px; border-bottom: 1px solid #eef1f5;
}
.sub-pay-card-title { font-size: 15px; font-weight: 700; color: var(--ink-800); }
.sub-pay-card-channel {
font-size: 14px; font-weight: 600; color: #2b8cfa; padding: 3px 10px;
background: #eef6ff; border-radius: 999px;
}
.sub-pay-card-body {
display: flex; gap: 18px; padding: 20px;
}
.sub-pay-card-left {
flex: none; width: 170px; display: flex; align-items: center; justify-content: center;
}
.sub-pay-card-qr {
width: 170px; height: 170px; padding: 10px; border-radius: 12px;
border: 1px solid var(--border-default); background: #fff;
display: flex; align-items: center; justify-content: center;
box-sizing: border-box;
}
.sub-pay-card-qr svg { width: 100%; height: 100%; }
.sub-pay-card-qr-ph {
width: 170px; height: 170px; border-radius: 12px;
border: 1px dashed #cbd5e1; background: #f8fafc;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; color: #94a3b8; font-size: 13px; text-align: center;
}
.sub-pay-card-qr-ph svg { width: 48px; height: 48px; }
/* 链接型二维码位 */
.sub-pay-card-qr-link {
flex-direction: column; align-items: stretch; justify-content: flex-start;
width: 170px; height: auto; gap: 10px; padding: 14px 12px; text-align: center;
}
.sub-pay-card-qr-badge {
align-self: center; padding: 2px 9px; border-radius: 999px; font-size: 12px;
font-weight: 600; color: #1677ff; background: #eff6ff; border: 1px solid #bfdbfe;
}
.sub-pay-card-qr-amt { font-size: 22px; font-weight: 700; color: #1677ff; }
.sub-pay-card-qr-btn { font-size: 12px; padding: 7px 8px; }
.sub-pay-card-qr-url {
width: 100%; height: 46px; resize: none; box-sizing: border-box;
font: 10px/1.4 ui-monospace, Consolas, monospace; color: var(--ink-500);
background: #f8f9fb; border: 1px solid var(--border-default); border-radius: 6px;
padding: 4px 5px; word-break: break-all;
}
/* 支付区右侧 */
.sub-pay-card-right {
flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px;
}
.sub-pay-card-method {
display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink-800);
}
.sub-pay-card-method .sub-method-ic { width: 24px; height: 24px; }
.sub-pay-card-amount {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
padding: 8px 0 4px;
}
.sub-pay-card-amount-label { font-size: 14px; color: var(--ink-500); }
.sub-pay-card-amount-val { font-size: 28px; font-weight: 700; color: #2b8cfa; }
.sub-pay-card-desc { font-size: 13px; color: var(--ink-400); line-height: 1.5; }
.sub-pay-card-steps {
margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink-500); line-height: 1.8;
}
.sub-pay-card-warn {
padding: 8px 10px; border-radius: 8px; background: var(--yellow-50);
border: 1px solid var(--yellow-200); color: #8a5a00; font-size: 12px; line-height: 1.55;
}
.sub-pay-card-note { font-size: 12px; color: var(--ink-400); line-height: 1.55; }
.sub-pay-card-note:empty { display: none; }
/* 支付方式 pill 切换按钮 */
.sub-pay-card-methods { display: flex; gap: 10px; margin-top: 4px; }
.sub-method-pill {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 11px 8px; border-radius: 10px; border: 1px solid var(--border-default);
background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-700);
cursor: pointer; transition: all .12s;
}
.sub-method-pill:hover { border-color: var(--accent-300); }
.sub-method-pill.active {
border-color: #2b8cfa; background: #f0f7ff; color: #2b8cfa;
}
.sub-method-pill:disabled, .sub-method-pill.sub-method-pill-off {
opacity: .55; cursor: not-allowed;
}
.sub-method-pill-ic { flex: none; width: 22px; height: 22px; }
.sub-method-pill-ic svg { display: block; width: 100%; height: 100%; }
/* 名称 + 未开通小字纵向排布，避免窄栏里被挤成两行 */
.sub-method-pill-tx { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.sub-method-pill-tx b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.sub-method-pill-tx i { font-style: normal; font-size: 11px; color: var(--ink-400); white-space: nowrap; }
/* 底部按钮行 + 提示 */
.sub-pay-card-bar {
display: flex; gap: 12px; padding: 0 2px;
}
.sub-pay-card-bar .btn { flex: 1; padding: 11px 18px; font-size: 15px; }
.sub-pay-footer {
display: flex; align-items: flex-start; gap: 7px;
font-size: 13px; color: var(--ink-400); line-height: 1.55; padding: 0 2px;
}
.sub-pay-footer-ic {
flex: none; width: 18px; height: 18px; border-radius: 50%;
border: 1px solid currentColor; display: flex; align-items: center; justify-content: center;
font-size: 11px; line-height: 1; margin-top: 1px;
}
/* 沙箱提示：放到支付卡片里时用更紧凑的样式 */
.sub-sbx {
padding: 8px 10px; border-radius: 8px; background: var(--yellow-50);
border: 1px solid var(--yellow-200); display: flex; flex-direction: column; gap: 4px;
}
.sub-sbx-h { font-size: 13px; font-weight: 600; color: #8a5a00; }
.sub-sbx-b { font-size: 12px; color: #8a5a00; line-height: 1.6; }
.sub-sbx-b b { color: #6b4700; }
.sub-sbx-kv { font-size: 12px; color: #6b4700; background: #fff; border-radius: 6px;
padding: 5px 7px; font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
/* ============================================================
订阅弹框（20260918f）：单页下单
—— 去掉「确认支付 → 二级页面」；打开即出二维码，套餐/渠道随时切、码可刷新。
本节整体加宽弹框、放大字号与留白，并覆盖 20260918e 的旧支付卡样式。
============================================================ */
/* —— 弹框尺寸与留白 —— */
.modal-box.sub-modal-box { max-width: 668px; }
.sub-modal-body { padding: 20px 26px 24px; }
.sub-step { gap: 14px; }
.sub-sec-title { font-size: 13px; font-weight: 700; color: var(--ink-500);
letter-spacing: 0.04em; padding-left: 2px; margin-bottom: -6px; }
/* 蓝色头部：留白放大，标题更突出 */
.sub-modal-head { padding: 30px 24px 24px; }
.sub-modal-icon { width: 54px; height: 54px; margin-bottom: 12px; }
.sub-modal-title { font-size: 25px; }
.sub-modal-subtitle { font-size: 14.5px; margin-top: 6px; }
/* —— 套餐卡 —— */
/* 选中圆点恒存在，切套餐只切 class（不重建 DOM，避免闪烁） */
.sub-plan-card:not(.selected) .sub-plan-radio-dot { display: none; }
.sub-plans-cards { gap: 16px; }
.sub-plan-card { padding: 18px 16px; border-radius: 15px; gap: 13px; }
.sub-plan-card-name { font-size: 15.5px; }
.sub-plan-card-save { font-size: 13px; }
.sub-plan-card-num { font-size: 30px; }
/* —— 扫码支付卡片 —— */
.sub-pay-card-head { padding: 16px 20px; }
.sub-pay-card-title { font-size: 16px; }
.sub-pay-card-body { gap: 22px; padding: 20px; align-items: flex-start; }
.sub-pay-card-left { width: 196px; flex-direction: column; gap: 12px; }
/* 支付方式选择条：卡片内、二维码上方通栏 */
.sub-methods {
display: flex; gap: 12px; padding: 14px 20px;
border-bottom: 1px solid #eef1f5; background: #fbfcfe;
}
.sub-method.sub-method-pill {
flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
padding: 11px 12px; border-radius: 11px; border: 1.5px solid var(--border-default);
background: #fff; font-size: 14.5px; font-weight: 600; color: var(--ink-700);
cursor: pointer; transition: all .13s;
}
.sub-method.sub-method-pill:hover { border-color: var(--accent-300); }
.sub-method.sub-method-pill.active {
border-color: #2b8cfa; background: #f0f7ff; color: #2b8cfa;
box-shadow: 0 2px 10px rgba(43,140,250,0.16);
}
.sub-method.sub-method-pill:disabled,
.sub-method.sub-method-pill.sub-method-pill-off { opacity: .55; cursor: not-allowed; }
.sub-method-pill-ic { flex: none; width: 24px; height: 24px; border-radius: 6px; background: transparent; }
.sub-method-pill-tx { display: flex; flex-direction: row; align-items: center; gap: 6px; min-width: 0; }
.sub-method-pill-tx b { font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.sub-method-pill-tx i { font-style: normal; font-size: 11px; font-weight: 500;
color: var(--ink-400); background: #eef1f5; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
/* 二维码（框内留出底部一行给「刷新」按钮，避免按钮压住码） */
.sub-qr-box { position: relative; width: 100%; }
.sub-pay-card-qr {
width: 196px; height: auto; padding: 14px 14px 50px; border-radius: 14px;
display: block; margin: 0 auto; box-sizing: border-box;
}
.sub-pay-card-qr svg { width: 168px; height: 168px; display: block; }
.sub-qr-refresh {
position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px;
display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
padding: 5px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--border-default); background: #fff;
font-size: 12.5px; font-weight: 600; color: var(--ink-500);
transition: all .13s;
}
.sub-qr-refresh:hover { color: #2b8cfa; border-color: #2b8cfa; background: #f5faff; }
.sub-qr-refresh:disabled, .sub-qr-refresh.busy { opacity: .6; cursor: wait; }
.sub-qr-refresh svg { width: 14px; height: 14px; }
.sub-qr-refresh.busy svg { animation: sub-spin .8s linear infinite; }
.sub-qr-loading {
width: 196px; min-height: 232px; margin: 0 auto; border-radius: 14px;
border: 1px dashed #cbd5e1; background: #f8fafc; box-sizing: border-box;
display: flex; flex-direction: column; gap: 14px;
align-items: center; justify-content: center; color: #94a3b8; font-size: 13.5px;
}
.sub-qr-err { color: #dc2626; }
@keyframes sub-spin { to { transform: rotate(360deg); } }
.sub-spin { width: 22px; height: 22px; border-radius: 50%;
border: 2.5px solid #e2e8f0; border-top-color: #2b8cfa; animation: sub-spin .8s linear infinite; }
/* 链接型（沙箱收银台）：左侧换成入口按钮，同样留出刷新位 */
.sub-pay-card-qr-link {
width: 196px; min-height: 232px; height: auto; box-sizing: border-box;
flex-direction: column; align-items: stretch; justify-content: center;
gap: 11px; padding: 16px 13px 50px; text-align: center;
}
.sub-pay-card-qr-amt { font-size: 24px; }
.sub-pay-card-qr-btn { font-size: 13px; padding: 9px 10px; }
.sub-pay-card-qr-url { height: 52px; font-size: 10.5px; }
/* 右栏：金额 / 套餐 / 有效期 三行信息 + 扫码说明 */
.sub-pay-card-right { gap: 12px; }
.sub-pay-info { display: flex; flex-direction: column; gap: 9px; }
.sub-pay-info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sub-pay-info-k { flex: none; font-size: 14px; color: var(--ink-500); }
.sub-pay-info-v { font-size: 14.5px; font-weight: 600; color: var(--ink-800); text-align: right; }
.sub-pay-info-wait { font-size: 13px; font-weight: 500; color: var(--ink-300); }
.sub-pay-info-amt { font-size: 30px; font-weight: 700; color: #2b8cfa; letter-spacing: -0.5px; line-height: 1.1; }
.sub-pay-card-desc { font-size: 14px; color: var(--ink-500); line-height: 1.6; }
.sub-pay-card-note { font-size: 12.5px; }
/* 未配置渠道的提醒：通栏放在卡片底部，不再挤在 196px 的左侧栏里 */
.sub-pay-card > .sub-pay-card-warn { margin: 0 20px 18px; }
/* 沙箱提示同样通栏（右栏太窄，长文案会把弹框撑高） */
.sub-pay-card > .sub-sbx { margin: 0 20px 18px; gap: 6px; }
.sub-sbx-kv { display: inline-block; margin-left: 2px; }
/* —— 底部按钮 + 居中提示 —— */
.sub-pay-card-bar { padding: 0; margin-top: 2px; }
.sub-pay-card-bar .btn { padding: 13px 20px; font-size: 16px; font-weight: 600; border-radius: 12px; }
.sub-pay-footer {
justify-content: center; align-items: center; gap: 8px;
font-size: 13.5px; color: var(--ink-400); padding: 2px 0 0;
}
.sub-pay-footer-ic {
flex: none; width: 17px; height: 17px; border: none; color: var(--ink-400);
}
.sub-pay-footer-ic svg { display: block; width: 100%; height: 100%; }
/* 第 3 步：订阅成功 */
.sub-step.sub-ok { align-items: center; text-align: center; padding: 14px 0 4px; }
.sub-ok-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--success-soft);
color: var(--success); font-size: 30px; font-weight: 700; line-height: 56px; }
.sub-ok-title { font-size: 20px; font-weight: 700; color: var(--ink-900); }
.sub-ok-desc { font-size: 15px; color: var(--ink-600); }
.sub-ok-desc b { color: var(--accent-700); }
.sub-ok-list { width: 100%; max-width: 460px; border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; }
.sub-ok-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; font-size: 14px; background: var(--bg-paper); }
.sub-ok-row + .sub-ok-row { border-top: 1px solid var(--border-subtle); }
.sub-ok-row span { color: var(--ink-400); }
.sub-ok-row b { font-weight: 600; color: var(--ink-800); }
.sub-ok-tip { font-size: 14px; color: var(--ink-400); }
.sub-ok .sub-pay-btn { min-width: 180px; }
/* 旧兼容样式：保留以防其他位置引用 */
.sub-method-ic { width: 30px; height: 30px; border-radius: 8px; background: transparent; font-size: 0; }
.sub-method-ic svg { display: block; width: 100%; height: 100%; }
.sub-ver-left { white-space: nowrap; }
.sub-reason { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14px; line-height: 1.6;
background: var(--yellow-50); border: 1px solid var(--yellow-200); color: #8a5a00; }
.sub-pay-amt-sub:empty { display: none; }
@media (max-width: 560px) {
.sub-plans-cards { grid-template-columns: 1fr; }
.sub-pay-card-body { flex-direction: column; align-items: center; }
.sub-pay-card-left { width: 100%; }
.sub-pay-card-right { width: 100%; }
}