/* Zibll 工时工资计算器 - 前台样式
   Version: 3.18.8
   优先复用主题 main.css 类，这里只补充少量专用样式
*/

.zs-salary-wrap .input-block {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ff54733b;
    background: #fb6bea05;
    color: #ff5473;
    outline: none;
    transition: border-color .2s;
}

.zs-salary-wrap textarea.input-block {
    height: auto;
    line-height: 1.6;
    padding-top: 8px;
    padding-bottom: 8px;
    resize: vertical;
}
/* 备注 placeholder 渐变文字：粉→珊瑚→浅粉（对齐图1"全能型主题"风格） */
.zs-note-gradient-placeholder::placeholder {
    background: linear-gradient(135deg, #ff7eb3 0%, #ff5e8a 45%, #ffb6c8 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
            color: transparent;
    opacity: 1;
}
/* Firefox 兼容性：Firefox 不支持 background-clip:text + ::placeholder 直接叠加，
   用 color 作为兜底，取渐变中间主色 */
@-moz-document url-prefix() {
    .zs-note-gradient-placeholder::placeholder {
        color: #ff5e8a;
        opacity: 0.85;
    }
}

.zs-salary-wrap .input-block:focus {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 3px var(--focus-shadow-color);
}

.zs-salary-wrap .zib-widget-title {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--muted-border-color);
}
/* 工资记录 widget 标题：「工资记录」+「共X条」左对齐 baseline 显示，间隔 5px（需求） */
.zs-record-title-wrap {
    align-items: baseline !important;  /* 两文字 baseline 对齐（而不是垂直居中） */
    justify-content: flex-start !important; /* 整体左对齐（不再两端分开） */
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
}
.zs-record-title-wrap > h4 {
    margin: 0 !important;           /* 去掉主题 h4 默认外边距，避免错位 */
    line-height: inherit;
    white-space: nowrap;
}
.zs-record-title-wrap > #zs_records_count {
    line-height: inherit !important;
    vertical-align: baseline !important;
    /* 与前面的标题文字保持 5px 间距（需求硬值） */
    margin-left: 5px !important;
    white-space: nowrap;
}

/* 标题 + 月份选择器布局（移动端自动换行） */
.zs-title-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.zs-page-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.125em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zs-month-select {
    flex: 0 0 auto;
    height: 34px;
    width: auto;
    min-width: 0;
    padding: 0 10px;
    border-radius: 8px;
    border: 1px solid var(--muted-border-color, #eee);
    background: var(--muted-bg-color, #f7f7f7);
    color: var(--main-color, #333);
    font-size: 13px;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 28px;
}

/* 公司筛选按钮文字溢出省略 */
#zs_filter_company_btn .zs-filter-company-text,
#zs_month_filter_btn .zs-month-filter-text,
#zs_admin_month_btn .zs-admin-month-text {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 视图切换 tab 按钮样式 */
.zs-view-tab {
    border: 1px solid transparent;
    transition: all .15s;
}
.zs-view-tab.active {
    border-color: transparent;
    opacity: 1;
}
.zs-view-tab:not(.active) {
    opacity: 0.6;
}
.zs-view-tab:not(.active):hover {
    opacity: 0.85;
}

/* 统计报表的标题行：统一使用布局规则 */
#zs_stats_widget .zib-widget-title {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    min-width: 0;
}
#zs_stats_widget .zib-widget-title > h4,
#zs_stats_widget .zib-widget-title > *:first-child {
    flex: 1 1 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
}
#zs_stats_widget #zs_stats_year {
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0 !important;
    max-width: 45% !important;
}

.zs-month-select:focus {
    border-color: var(--focus-color, #409eff);
}

@media (max-width: 480px) {
    .zs-page-title {
        flex: 1 1 100%;
    }
    .zs-month-select {
        flex: 1 1 100%;
        width: 100%;
        height: 38px;
        font-size: 14px;
    }
}

/* 统计卡片 */
.zs-salary-wrap .zs-stats > div {
    text-align: center;
    min-height: 70px;
}

/* ============================================================
   统计面板 · 用户问候卡（布局对齐图2 Zibll 作者卡片）
   结构：
   左：头像（主题圆形，desktop 56px / mobile 44px）
   右：三行 —
     行1：[VIP钻石图标] 昵称（主题 c-pink 粉红加粗）[认证勾✔] [LV等级徽章]
     行2：📅 2026年X月X日 星期日  ·  ⏱ X秒前 更新     —— 灰小字
     行3：🌆 晚上好！下班/放学愉快，记得记录今天的工资呀～ 💰 —— 灰小字 允许两行
   ============================================================ */
.zs-user-greeting {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    background: var(--muted-bg-color, #f7f8fa);
    border: 1px solid var(--muted-border-color, #eef0f3);
}
.zs-user-greeting .zs-user-avatar {
    flex: 0 0 auto;
    line-height: 0;
    /* 头像顶对齐下，略微留 1px 视觉缓冲，避免贴边 */
    margin-top: 1px;
}
.zs-user-greeting .zs-user-avatar img,
.zs-user-greeting .zs-user-avatar .avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover;
    display: inline-block;
}
.zs-user-meta {
    display: flex;
    flex-direction: column;
    gap: 4px; /* 截图行间距比之前 2px 略大，视觉上更舒适 */
    min-width: 0;
    padding-top: 1px;
}

/* ---------- 行1：VIP + 昵称(c-pink加粗) + 认证勾 + LV 徽章 ---------- */
.zs-user-row1 {
    justify-content: flex-start;
    gap: 0; /* 徽章自己带 ml3/mr3 间距，不用外层再 gap */
    line-height: 1.4;
}
/* 昵称行 em12 的整行容器：让里面 img 徽章与文字严格垂直居中 */
.zs-user-name-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    font-size: 17px; /* em12 ≈ 17px，与 Zibll 用户中心 .em12 一致 */
}
/* 主题三个徽章 img.icon / img.img-icon 强制统一高度，否则 LV 徽章略高一点点会不齐 */
.zs-user-name-row .img-icon,
.zs-user-name-row img.img-icon {
    width: auto !important;
    height: 1.05em !important;   /* 跟字体高度走 */
    max-height: 1.05em !important;
    display: inline-block;
    vertical-align: middle;
}
/* 认证勾：<icon.user-auth-icon> 里是 svg，跟字体高对齐 */
.zs-user-name-row .user-auth-icon {
    display: inline-flex;
    align-items: center;
    height: 1.1em;
}
.zs-user-name-row .user-auth-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}
/* 昵称颜色：直接复用主题 c-pink 变量（粉色=VIP色系，和图2 LoebB_ 一致） */
.zs-user-nick {
    color: var(--theme-pink-color, #ec4899);
}

/* ---------- 统一前缀占位符：
   行2的📅fa图标、行3的🎉方块emoji 都套这个类 → 固定占宽 1em + 右距6px
   保证两行首图标左起点像素级完全一致（不管是fa还是emoji，宽度基准统一） ---------- */
.zs-aligned-prefix {
    display: inline-block !important;
    vertical-align: baseline;
    text-align: left;
    /* 固定占宽：让fa图标与emoji占同样的逻辑宽度 → 后续文字列起点一致 */
    width: 1em;
    min-width: 1em;
    height: 1.6em;
    line-height: 1.6em;
    font-size: inherit;
    font-weight: normal;
    /* 右间距固定 6px（等价于 mr6），不随主题变 */
    margin-right: 6px;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: content-box !important;
}

/* ---------- 行2：📅 日期星期 🌙 农历xx（截图里没有「·」点，图标+文字串连） ---------- */
.zs-user-row2 {
    color: var(--muted-color, #8b95a1);
    line-height: 1.6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    margin: 0;
    padding: 0;
    text-indent: 0;
}
.zs-user-row2 .zs-icon {
    color: var(--muted-color, #8b95a1);
    opacity: .85;
}
.zs-user-row2 .zs-calendar-icon {
    /* 日历图标走统一基准类，这里只覆盖色值不碰占宽 */
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
/* 行2里中间那个🌙弯月emoji（分割日期和农历用的），与行2文字垂直居中 */
.zs-user-row2 [aria-hidden="true"].ml8 {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    transform: translateY(-1px);
}

/* ---------- 行3：问候语 —— 独立全宽行，左起点与头像对齐 ---------- */
.zs-user-row3 {
    flex: 1 1 100%;
    color: var(--muted-color, #8b95a1);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    padding-top: 4px;
    border-top: 1px dashed var(--muted-border-color, #eef0f3);
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: hidden;
    white-space: normal;
    text-align: left;
    text-indent: 0 !important;
}
.zs-user-row3 > i {
    flex: 0 0 auto;
    line-height: inherit;
    display: inline-flex;
    align-items: baseline;
    align-self: center;
    font-size: 0.9em;
    position: relative;
    top: 1px;
}
/* 问候语文字：允许换行 */
.zs-user-row3 .zs-greet-text {
    flex: 1;
    min-width: 0;
    line-height: 1.6;
}
/* 行3后缀💰单一个 */
.zs-user-row3 .zs-greet-suffix {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    transform: translateY(-1px);
    margin-right: 0;
    margin-left: 5px;
}

/* ---------- 桌面中等分辨率下如果徽章太多，允许自动换行 ---------- */
@media (min-width: 980px) and (max-width: 1180px) {
    .zs-user-name-row { font-size: 15px; }
}

/* ---------- 移动端：头像44px + 徽章和昵称自动下排 ---------- */
@media (max-width: 640px) {
    .zs-user-greeting {
        padding: 10px 12px;
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    .zs-user-greeting .zs-user-avatar {
        flex: 0 0 44px;
        margin-right: 0;
    }
    .zs-user-greeting .zs-user-avatar img,
    .zs-user-greeting .zs-user-avatar .avatar {
        width: 44px !important;
        height: 44px !important;
    }
    .zs-user-meta {
        gap: 3px;
        flex: 1;
        min-width: 0;
        padding-top: 0;
    }
    .zs-user-name-row {
        font-size: 14px;
        flex-wrap: wrap;
        gap: 2px;
        line-height: 1.5;
    }
    .zs-user-row1 .zs-user-nick {
        font-size: 14px;
    }
    .zs-user-row1 {
        line-height: 1.5;
    }
    .zs-user-row2 {
        font-size: 11px;
        line-height: 1.5;
        white-space: normal;
        align-items: center;
        flex-wrap: wrap;
    }
    .zs-user-row2 .zs-aligned-prefix {
        height: 1.5em;
        line-height: 1.5em;
        margin-right: 4px;
    }
    .zs-user-row3 {
        font-size: 12px;
        line-height: 1.5;
        flex: 1 1 100%;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 4px;
    }
    .zs-user-row3 .zs-aligned-prefix {
        height: 1.5em;
        line-height: 1.5em;
        margin-right: 4px;
    }
}

/* 暗模式兼容 */
@media (prefers-color-scheme: dark) {
    .zs-user-greeting {
        background: var(--muted-bg-color, #1c1f26);
        border-color: var(--muted-border-color, #2a2e36);
    }
}

/* 工资记录网格容器：桌面端 2 列（文章卡片式），移动端 1 列 */
#zs_records_list,
#zs_admin_records_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
/* 空状态/加载态跨全宽 */
#zs_records_list > .zs-empty,
#zs_records_list > .placeholder,
#zs_admin_records_list > .zs-empty,
#zs_admin_records_list > .placeholder {
    grid-column: 1 / -1;
}

/* 记录卡片（网格模式） */
.zs-record-item {
    padding: 12px 14px;
    border: 1px solid var(--main-border-color, #eee);
    border-radius: 10px;
    background: var(--main-bg-color, #fff);
    transition: transform .2s, box-shadow .2s, background .2s;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.zs-record-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    background: var(--muted-bg-color, #f7f7f7);
}

/* 网格模式下不需要 last-child 底边框清理 */
.zs-record-item:last-child {
    border-bottom: 1px solid var(--main-border-color, #eee);
}

/* 卡片内头部：两行结构 — 第一行日期，第二行徽标 + 金额 */
.zs-record-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 6px;
    gap: 4px;
}

.zs-record-header-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
}

.zs-record-header-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    flex-wrap: nowrap;
}

.zs-record-date {
    font-weight: 600;
    color: var(--key-color);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
}
.zs-record-date .zs-date-icon {
    margin-right: 8px;
    flex-shrink: 0;
}

.zs-record-weekday {
    font-size: 12px;
    color: var(--muted-color, #999);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.zs-record-total {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--theme-color, #f56c6c);
    flex-shrink: 0;
    white-space: nowrap;
}

/* 计时徽标：蓝色系（区别于计件绿色、夜班深紫） */
.zs-hourly-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 0.72em;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 6px rgba(59, 130, 246, .2);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 元信息：2 列网格让 4 列卡片下信息排列更整齐 */
.zs-record-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 10px;
    font-size: 0.8em;
    color: var(--muted-2-color);
}

.zs-record-meta span::before {
    content: attr(data-label);
    color: var(--muted-3-color);
    margin-right: 3px;
}

.zs-record-actions {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 8px;
    flex-shrink: 0;
}

.zs-record-actions button {
    padding: 3px 10px;
    font-size: 0.78em;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: opacity .2s;
    white-space: nowrap;
}

.zs-record-actions button:hover {
    opacity: 0.85;
}

.zs-btn-edit {
    background: linear-gradient(135deg, var(--theme-color, var(--key-color, #667eea)) 0%, #fb6bea 100%);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.zs-btn-delete {
    background: #ffd1dc;
    color: #d63384;
    border: 1px solid #ffb6c1;
    font-weight: normal;
}

/* ====== 移动端单行卡片：度量行（桌面端隐藏，仅移动端显示） ======
   把工时/时薪/件数/加班/奖金/扣款/公司压缩为一行紧凑文本，
   配合 nowrap+ellipsis 自动截断，保证卡片单行整齐规整 */
.zs-record-metric {
    display: none;
    font-size: 12px;
    line-height: 1.5;
    color: var(--muted-2-color);
    min-width: 0;
}
.zs-record-metric .zs-mh { color: var(--key-color); font-weight: 600; }
.zs-record-metric .zs-mrate { color: var(--muted-color); }
.zs-record-metric .zs-mot { color: #5d4bff; font-weight: 500; }
.zs-record-metric .zs-mdeduct { color: var(--warning-color, #e6a23c); }
.zs-record-metric .zs-mbonus { color: var(--success-color, #67c23a); font-weight: 500; }
.zs-record-metric .zs-mdeduction { color: var(--danger-color, #f56c6c); font-weight: 500; }
.zs-record-metric .zs-mcompany { color: var(--muted-3-color); }
.zs-record-metric .zs-msep { color: var(--muted-3-color); margin: 0 2px; }
/* 按钮文字标签：桌面端正常显示，移动端隐藏以做纯图标按钮 */
.zs-btn-label { display: inline; }

/* ============================================================
   Zibll 文章卡片样式：横向布局（左缩略图 + 右内容区）
   对齐 Zibll 主题文章列表卡片视觉风格
   ============================================================ */
.zs-record-item.zs-article-card {
    display: flex;
    flex-direction: row;
    padding: 0;
    border: 1px solid var(--main-border-color, #eee);
    border-radius: 12px;
    background: var(--main-bg-color, #fff);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: transform .2s, box-shadow .2s;
    overflow: hidden;
    min-width: 0;
}
.zs-record-item.zs-article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    background: var(--main-bg-color, #fff);
}

/* 左：日期缩略图块 */
.zs-card-thumb {
    flex: 0 0 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border-right: 1px solid var(--main-border-color, #eee);
    position: relative;
    text-align: center;
}
.zs-article-card[data-type="piece"] .zs-card-thumb {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
}
.zs-article-card[data-type="cumulative"] .zs-card-thumb {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}
.zs-article-card[data-type="hourly"] .zs-card-thumb {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}
.zs-thumb-icon {
    font-size: 15px;
    color: var(--muted-color, #999);
    margin-bottom: 2px;
    opacity: 0.7;
}
.zs-thumb-day {
    font-size: 30px;
    font-weight: 700;
    color: var(--main-color, #1a1a1a);
    line-height: 1.1;
}
.zs-thumb-day.zs-thumb-range {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    word-break: break-all;
}
.zs-thumb-month {
    font-size: 13px;
    color: var(--muted-color, #666);
    margin-top: 2px;
}
.zs-thumb-weekday {
    font-size: 11px;
    color: var(--muted-2-color, #999);
    margin-top: 4px;
    padding: 1px 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 999px;
}

/* 右：内容区 */
.zs-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 第一行：标题 + 操作 */
.zs-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}
.zs-card-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--theme-color, #f56c6c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}

/* 第二行：徽章 */
.zs-card-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zs-card-company {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: var(--muted-color, #888);
    background: var(--muted-bg-color, #f5f5f7);
    padding: 3px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.zs-article-card .zs-piece-badge,
.zs-article-card .zs-cumulative-badge,
.zs-article-card .zs-night-badge,
.zs-article-card .zs-hourly-badge {
    font-size: 12px;
    padding: 3px 10px;
}

/* 第三行：度量摘要（始终显示） */
.zs-card-metrics {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted-2-color);
    word-break: break-all;
}
.zs-card-metrics .zs-mh { color: var(--key-color); font-weight: 600; }
.zs-card-metrics .zs-mrate { color: var(--muted-color); }
.zs-card-metrics .zs-mot { color: #5d4bff; font-weight: 500; }
.zs-card-metrics .zs-mdeduct { color: var(--warning-color, #e6a23c); }
.zs-card-metrics .zs-mbonus { color: var(--success-color, #67c23a); font-weight: 500; }
.zs-card-metrics .zs-mdeduction { color: var(--danger-color, #f56c6c); font-weight: 500; }
.zs-card-metrics .zs-mcompany { color: var(--muted-3-color); }
.zs-card-metrics .zs-msep { color: var(--muted-3-color); margin: 0 2px; }

/* 第四行：详细信息（flex-wrap 代替 grid） */
.zs-article-card .zs-record-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    color: var(--muted-2-color);
}
.zs-article-card .zs-record-meta > * {
    flex: 0 0 auto;
    white-space: nowrap;
}
.zs-article-card .zs-record-meta .zs-piece-items-box {
    flex: 1 0 100%;
}

/* 操作按钮：移至标题行右侧 */
.zs-article-card .zs-record-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0;
}
.zs-article-card .zs-record-actions button {
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: opacity .2s;
    white-space: nowrap;
    line-height: 1.4;
}

/* 备注 */
.zs-record-note {
    font-size: 12px;
    color: var(--muted-2-color);
    line-height: 1.5;
}

/* ============================================================
   年度汇总：累计工时记录列表
   ============================================================ */
.zs-cumulative-section {
    margin-top: 20px;
    padding: 16px;
    background: var(--muted-bg-color, #f5f5f7);
    border-radius: 12px;
}
.zs-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--main-color, #1a1a1a);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
}
.zs-cumulative-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.zs-cumulative-item {
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #eee);
    border-radius: 10px;
    padding: 12px 14px;
    transition: box-shadow .2s;
}
.zs-cumulative-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.zs-cum-range {
    font-size: 14px;
    font-weight: 600;
    color: var(--main-color, #1a1a1a);
    margin-bottom: 6px;
}
.zs-cum-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--muted-2-color);
}
.zs-cum-stats span {
    display: inline-flex;
    align-items: center;
}
.zs-cum-salary {
    color: var(--theme-color, #f56c6c);
    font-weight: 600;
}
.zs-cum-perday {
    margin-left: auto;
    font-size: 12px;
}

/* 暗模式兼容 */
body.dark-theme .zs-card-thumb {
    background: linear-gradient(135deg, #1e293b 0%, #1a2332 100%) !important;
    border-right-color: var(--main-border-color, #2a2e36);
}
body.dark-theme .zs-article-card[data-type="piece"] .zs-card-thumb {
    background: linear-gradient(135deg, #1a2e25 0%, #15281f 100%) !important;
}
body.dark-theme .zs-article-card[data-type="cumulative"] .zs-card-thumb {
    background: linear-gradient(135deg, #1e1a2e 0%, #1a1528 100%) !important;
}
body.dark-theme .zs-thumb-day {
    color: var(--main-color, #e5e7eb);
}
body.dark-theme .zs-thumb-weekday {
    background: rgba(255, 255, 255, 0.08);
}
body.dark-theme .zs-card-company {
    background: var(--muted-bg-color, #2a2e36);
}
body.dark-theme .zs-cumulative-section {
    background: var(--muted-bg-color, #1a1d24);
}
body.dark-theme .zs-cumulative-item {
    background: var(--card-bg-color, #1f2430);
    border-color: var(--main-border-color, #2a2e36);
}

/* 空状态 */
.zs-empty {
    padding: 40px 15px;
    text-align: center;
    color: var(--muted-2-color);
}

.zs-empty i {
    font-size: 3em;
    opacity: 0.5;
}

/* ============================================================
   悬浮保存栏：表单有有效输入时才在底部悬浮显示
   ============================================================ */
.zs-floating-save {
    display: none;
}
@media (max-width: 800px) {
    /* 悬浮栏默认隐藏，JS 检测到原按钮不可见时添加 .zs-floating-show */
    .zs-floating-save.zs-floating-show {
        display: flex;
        gap: 10px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 99999;
        padding: 8px 12px env(safe-area-inset-bottom, 8px);
        background: #ffffff;
        border-top: 1px solid rgba(255, 84, 115, 0.15);
        box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
    }
    .zs-floating-save .but {
        height: 42px;
        line-height: 42px;
        font-size: 14px;
        border-radius: 8px;
    }
    .zs-floating-save #zs_float_submit_btn {
        flex: 1;
    }
    .zs-floating-save .zs-float-reset-btn {
        flex: 0 0 auto;
        min-width: 72px;
        padding-left: 14px;
        padding-right: 14px;
    }
    /* 原表单按钮保持显示，只有悬浮栏出现时才需要底部留白 */
    .zs-salary-wrap.zs-float-active {
        padding-bottom: 70px;
    }
}
body.dark-theme .zs-floating-save {
    background: #1c1c1e !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 响应式：小屏统计改成2列 */
@media (max-width: 640px) {
    .zs-salary-wrap .zs-stats > div,
    .zs-admin-stats > div {
        flex: 0 0 calc(50% - 5px);
        min-width: calc(50% - 5px);
    }
    /* 移动端表单：每行显示两项（需求），按 2 列网格排列；
       含 3 列的行会自动变成 2+1 两行（如：扣除小时/分钟/合计扣除 → 2+1） */
    .zs-salary-wrap .zs-form > .flex.hh > .flex1,
    .zs-salary-wrap .zs-form .zs-pane > .flex.hh > .flex1 {
        flex: 0 0 calc(50% - 5px);
        min-width: calc(50% - 5px);
    }
    /* 小屏：工具栏按钮自适应缩小 */
    .zs-salary-wrap .zs-toolbar .but {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }
    /* 工资记录：移动端改为单列单行卡片（具体单行布局见 800px 断点） */
    #zs_records_list,
    #zs_admin_records_list {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ====================================================
   删除/提示弹窗：复用子比主题 modal-mask / modal-box
   - 定位强制 fixed 到视口（避免主题.modal-mask 限定选择器导致 static 出现在页脚）
   - 外观/圆角/阴影继承主题类变量，只补兜底
   ==================================================== */
.zs-modal-mask {
    /* 强制定位到 viewport，完全不依赖主题 .modal-mask 的选择器 */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important;
    /* 开启 flex 居中 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* 动画：背景 + 自身可见性 */
    background: rgba(0, 0, 0, 0) !important;
    transition: background .2s ease !important;
    /* 初始不拦截点击 */
    pointer-events: none;
    /* 兼容老 iOS */
    -webkit-overflow-scrolling: touch;
}
.zs-modal-mask.in {
    background: rgba(0, 0, 0, .55) !important;
    pointer-events: auto;
}
.zs-modal-mask .modal-box {
    /* 继承主题 .modal-box 的圆角/阴影/背景/宽度，只补默认兜底和缩放动画 */
    transform: scale(.88) translateY(10px);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .22s ease;
    background: var(--main-bg-color, #fff);
    color: var(--main-color, #333);
    border-radius: var(--bs-modal-border-radius, 12px);
    box-shadow: 0 14px 60px rgba(0, 0, 0, .22), 0 2px 6px rgba(0, 0, 0, .06);
    width: 90% !important;
    max-width: 360px !important;
    overflow: hidden;
    /* 避免内容区滚动条被遮挡 */
    max-height: 86vh;
    display: flex;
    flex-direction: column;
}
.zs-modal-mask.in .modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}
/* 主题modal header/footer 细节：若主题没设边框就给兜底 */
.zs-modal-mask .modal-header {
    position: relative;
    padding: 14px 18px;
    border-bottom: 1px solid var(--muted-border-color, #eee);
    background: var(--main-bg-color, #fff);
    z-index: 1;
}
.zs-modal-mask .modal-header .modal-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-2-color, #999);
    padding: 4px 8px;
    border-radius: 6px;
    transition: color .15s, background .15s;
}
.zs-modal-mask .modal-header .modal-close:hover,
.zs-modal-mask .modal-header .modal-close:active {
    color: var(--main-color, #333);
    background: var(--muted-bg-color, #f2f3f5);
}
.zs-modal-mask .modal-header .modal-title {
    margin: 0 !important;
    font-size: 15px;
    font-weight: 600;
    color: var(--main-color, #333);
    padding-right: 30px;
    line-height: 1.4;
}
.zs-modal-mask .modal-body {
    padding: 18px;
    color: var(--main-color, #333);
    flex: 1 1 auto;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.7;
}
.zs-modal-mask .modal-body p {
    margin: 0 0 8px;
}
.zs-modal-mask .modal-body p:last-child {
    margin-bottom: 0;
}
.zs-modal-mask .modal-footer {
    padding: 12px 18px 16px;
    border-top: 1px solid var(--muted-border-color, #eee);
    background: var(--main-bg-color, #fff);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.zs-modal-mask .modal-footer .but {
    min-width: 84px;
    text-align: center;
}

/* ====================================================
   删除验证：算术题（复用 zibll 主题变量与视觉风格）
   ==================================================== */
.zs-math-verify-wrap {
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--muted-bg-color, #f7f8fa);
    border-radius: var(--main-radius, 8px);
    border: 1px dashed var(--muted-border-color, #eef0f3);
}
.zs-math-label {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: var(--muted-color, #8b95a1);
}
.zs-math-label > i {
    margin-right: 5px;
    color: var(--focus-color, #fb6bea);
}
.zs-math-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.zs-math-question {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--key-color, #333);
    background: var(--main-bg-color, #fff);
    border-radius: var(--main-radius, 8px);
    border: 1px solid var(--muted-border-color, #eef0f3);
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.zs-math-input {
    flex: 1;
    min-width: 0;
    max-width: 100px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    height: 38px;
    padding: 0 8px;
    background: var(--main-bg-color, #fff);
    color: var(--main-color, #333);
    border: 2px solid var(--muted-border-color, #ddd);
    border-radius: var(--main-radius, 8px);
    transition: border-color .25s, box-shadow .25s;
    box-sizing: border-box;
}
.zs-math-input:focus {
    border-color: var(--focus-color, #fb6bea);
    box-shadow: 0 0 0 3px var(--focus-shadow-color, rgba(251,107,234,0.12));
    outline: none;
}
.zs-math-input.zs-math-correct {
    border-color: #28c76f !important;
    box-shadow: 0 0 0 3px rgba(40,199,111,0.12) !important;
}
.zs-math-input.zs-math-wrong {
    border-color: #ea5455 !important;
    box-shadow: 0 0 0 3px rgba(234,85,85,0.12) !important;
    animation: zs-math-shake .3s ease;
}
@keyframes zs-math-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* ====================================================
   夜班标签：复用主题主色渐变（--key-color → --focus-color → --theme-color）
   ==================================================== */
.zs-night-badge {
    display: inline-block;
    padding: 3px 12px;
    margin: 0 0px;
    font-size: 0.75em;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 999px;
    color: #fff;
    /* 优先用主题定义好的变量做渐变，兜底用--key-color系列 */
    background: linear-gradient(
        135deg,
        var(--theme-color, var(--key-color, #667eea)) 0%,
        var(--focus-color, var(--key-color-2, #764ba2)) 100%
    );
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
}

/* 班次提示图标：同步主题渐变色 */
.zs-shift-tip {
    transition: all .2s ease;
}
.zs-shift-tip .zs-shift-tip-icon {
    color: var(--theme-color, var(--key-color, #667eea));
}
#zs_shift_normal_tip .zs-shift-tip-icon {
    color: var(--warning-color, #f59e0b);
}

/* 星光卡片：漂浮呼吸闪烁星星背景效果 */
.zs-starfield {
    position: relative;
    overflow: hidden;
}
.zs-starfield::before,
.zs-starfield::after {
    content: '';
    position: absolute;
    top: -10px; left: 0; right: 0; bottom: -10px;
    pointer-events: none;
    z-index: 0;
    width: 2px; height: 2px; border-radius: 50%;
    background: transparent;
    background-repeat: repeat;
}
/* 第一层：暖金色星星 30颗 */
.zs-starfield::before {
    box-shadow:
        8px 12px 0 0 rgba(255,210,90,.9),
        25px 28px 0 0 rgba(255,200,80,.8),
        45px 8px 0 0 rgba(255,230,120,.9),
        62px 35px 0 0 rgba(255,210,90,.7),
        80px 18px 0 0 rgba(255,240,150,.9),
        98px 40px 0 0 rgba(255,200,80,.8),
        115px 10px 0 0 rgba(255,220,100,.9),
        132px 30px 0 0 rgba(255,230,120,.7),
        150px 22px 0 0 rgba(255,210,90,.9),
        168px 38px 0 0 rgba(255,240,150,.8),
        185px 6px 0 0 rgba(255,200,80,.9),
        202px 28px 0 0 rgba(255,220,100,.7),
        220px 14px 0 0 rgba(255,230,120,.9),
        238px 36px 0 0 rgba(255,210,90,.8),
        255px 20px 0 0 rgba(255,240,150,.9),
        272px 42px 0 0 rgba(255,200,80,.7),
        290px 8px 0 0 rgba(255,220,100,.8),
        308px 26px 0 0 rgba(255,230,120,.9),
        325px 38px 0 0 rgba(255,210,90,.8),
        342px 16px 0 0 rgba(255,240,150,.7),
        360px 30px 0 0 rgba(255,200,80,.9),
        378px 12px 0 0 rgba(255,220,100,.8),
        395px 34px 0 0 rgba(255,230,120,.9),
        412px 22px 0 0 rgba(255,210,90,.7),
        430px 40px 0 0 rgba(255,240,150,.8),
        448px 6px 0 0 rgba(255,200,80,.9),
        465px 28px 0 0 rgba(255,220,100,.8),
        482px 18px 0 0 rgba(255,230,120,.9),
        500px 36px 0 0 rgba(255,210,90,.7),
        518px 10px 0 0 rgba(255,240,150,.8);
    animation: zs-float-twinkle 4s ease-in-out infinite alternate;
}
/* 第二层：白色/淡黄星星 30颗，不同节奏 */
.zs-starfield::after {
    box-shadow:
        15px 20px 0 0 rgba(255,255,255,.9),
        35px 5px 0 0 rgba(255,255,200,.8),
        55px 38px 0 0 rgba(255,255,255,.7),
        72px 14px 0 0 rgba(255,255,180,.9),
        90px 32px 0 0 rgba(255,255,255,.8),
        108px 6px 0 0 rgba(255,255,200,.7),
        125px 26px 0 0 rgba(255,255,255,.9),
        143px 40px 0 0 rgba(255,255,180,.8),
        160px 12px 0 0 rgba(255,255,255,.7),
        178px 34px 0 0 rgba(255,255,200,.9),
        196px 8px 0 0 rgba(255,255,255,.8),
        213px 28px 0 0 rgba(255,255,180,.7),
        230px 16px 0 0 rgba(255,255,255,.9),
        248px 38px 0 0 rgba(255,255,200,.8),
        265px 4px 0 0 rgba(255,255,255,.7),
        282px 24px 0 0 rgba(255,255,180,.9),
        300px 42px 0 0 rgba(255,255,255,.8),
        318px 10px 0 0 rgba(255,255,200,.7),
        335px 30px 0 0 rgba(255,255,255,.9),
        352px 18px 0 0 rgba(255,255,180,.8),
        370px 36px 0 0 rgba(255,255,255,.7),
        388px 8px 0 0 rgba(255,255,200,.9),
        405px 26px 0 0 rgba(255,255,255,.8),
        422px 40px 0 0 rgba(255,255,180,.7),
        440px 14px 0 0 rgba(255,255,255,.9),
        458px 32px 0 0 rgba(255,255,200,.8),
        475px 6px 0 0 rgba(255,255,255,.7),
        492px 28px 0 0 rgba(255,255,180,.9),
        510px 38px 0 0 rgba(255,255,255,.8),
        528px 20px 0 0 rgba(255,255,200,.7);
    animation: zs-float-twinkle2 3s ease-in-out infinite alternate-reverse;
    animation-delay: 1s;
}
.zs-starfield > * {
    position: relative;
    z-index: 1;
}
@keyframes zs-float-twinkle {
    0% {
        opacity: .15;
        transform: translateY(0) scale(.8);
    }
    25% {
        opacity: .5;
        transform: translateY(-3px) scale(1);
    }
    50% {
        opacity: .9;
        transform: translateY(-6px) scale(1.2);
    }
    75% {
        opacity: .6;
        transform: translateY(-3px) scale(1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }
}
@keyframes zs-float-twinkle2 {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1.1);
    }
    25% {
        opacity: .6;
        transform: translateY(3px) scale(1);
    }
    50% {
        opacity: .2;
        transform: translateY(6px) scale(.8);
    }
    75% {
        opacity: .7;
        transform: translateY(3px) scale(1);
    }
    100% {
        opacity: .15;
        transform: translateY(0) scale(.9);
    }
}
body.dark-theme .zs-starfield::before {
    box-shadow:
        8px 12px 0 0 rgba(255,220,100,1),
        25px 28px 0 0 rgba(255,240,150,1),
        45px 8px 0 0 rgba(255,210,90,1),
        62px 35px 0 0 rgba(255,255,180,.9),
        80px 18px 0 0 rgba(255,240,150,1),
        98px 40px 0 0 rgba(255,220,100,.9),
        115px 10px 0 0 rgba(255,230,120,1),
        132px 30px 0 0 rgba(255,240,150,.9),
        150px 22px 0 0 rgba(255,210,90,1),
        168px 38px 0 0 rgba(255,255,180,.9),
        185px 6px 0 0 rgba(255,200,80,1),
        202px 28px 0 0 rgba(255,220,100,.9),
        220px 14px 0 0 rgba(255,230,120,1),
        238px 36px 0 0 rgba(255,240,150,.9),
        255px 20px 0 0 rgba(255,210,90,1),
        272px 42px 0 0 rgba(255,255,180,.9),
        290px 8px 0 0 rgba(255,220,100,1),
        308px 26px 0 0 rgba(255,230,120,.9),
        325px 38px 0 0 rgba(255,210,90,.9),
        342px 16px 0 0 rgba(255,240,150,1),
        360px 30px 0 0 rgba(255,200,80,.9),
        378px 12px 0 0 rgba(255,220,100,1),
        395px 34px 0 0 rgba(255,230,120,.9),
        412px 22px 0 0 rgba(255,210,90,.9),
        430px 40px 0 0 rgba(255,255,180,1),
        448px 6px 0 0 rgba(255,200,80,.9),
        465px 28px 0 0 rgba(255,220,100,1),
        482px 18px 0 0 rgba(255,230,120,.9),
        500px 36px 0 0 rgba(255,210,90,.9),
        518px 10px 0 0 rgba(255,240,150,1);
}
body.dark-theme .zs-starfield::after {
    box-shadow:
        15px 20px 0 0 rgba(255,255,255,1),
        35px 5px 0 0 rgba(255,255,200,1),
        55px 38px 0 0 rgba(255,255,255,.9),
        72px 14px 0 0 rgba(255,255,180,1),
        90px 32px 0 0 rgba(255,255,255,.9),
        108px 6px 0 0 rgba(255,255,200,1),
        125px 26px 0 0 rgba(255,255,255,1),
        143px 40px 0 0 rgba(255,255,180,.9),
        160px 12px 0 0 rgba(255,255,255,.9),
        178px 34px 0 0 rgba(255,255,200,1),
        196px 8px 0 0 rgba(255,255,255,.9),
        213px 28px 0 0 rgba(255,255,180,1),
        230px 16px 0 0 rgba(255,255,255,1),
        248px 38px 0 0 rgba(255,255,200,.9),
        265px 4px 0 0 rgba(255,255,255,.9),
        282px 24px 0 0 rgba(255,255,180,1),
        300px 42px 0 0 rgba(255,255,255,.9),
        318px 10px 0 0 rgba(255,255,200,1),
        335px 30px 0 0 rgba(255,255,255,1),
        352px 18px 0 0 rgba(255,255,180,.9),
        370px 36px 0 0 rgba(255,255,255,.9),
        388px 8px 0 0 rgba(255,255,200,1),
        405px 26px 0 0 rgba(255,255,255,.9),
        422px 40px 0 0 rgba(255,255,180,1),
        440px 14px 0 0 rgba(255,255,255,1),
        458px 32px 0 0 rgba(255,255,200,.9),
        475px 6px 0 0 rgba(255,255,255,.9),
        492px 28px 0 0 rgba(255,255,180,1),
        510px 38px 0 0 rgba(255,255,255,.9),
        528px 20px 0 0 rgba(255,255,200,1);
}

/* 响应式：小屏班次提示换行 */
@media (max-width: 640px) {
    #zs_shift_tip label.inline-block {
        display: block;
        margin-left: 0 !important;
        margin-top: 6px;
    }
}

/* ====================================================
   管理员面板样式
   ==================================================== */
.zs-admin-wrap {
    margin-top: 20px;
}

/* 管理员编辑模式提示条 */
.zs-admin-mode-banner {
    border-left: 3px solid var(--theme-color, #667eea);
    background: var(--muted-bg-color, #f2f3f5);
}
.zs-admin-mode-banner .flex.ac {
    gap: 10px;
}
body.dark-theme .zs-admin-mode-banner {
    border-left-color: var(--theme-color, #667eea);
}

/* 员工工资管理 · 员工列表：单行卡片，与工资记录列表风格一致 */
.zs-employees-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

/* 卡片：单行布局，复用 zs-record-item 基础样式 */
.zs-emp-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 12px;
    gap: 3px 6px;
    border: 1px solid var(--main-border-color, #eee);
    border-radius: 10px;
    background: var(--main-bg-color, #fff);
    transition: transform .2s, box-shadow .2s, background .2s;
    min-width: 0;
    overflow: hidden;
}
.zs-emp-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    background: var(--muted-bg-color, #f7f7f7);
}

/* 头像 + 姓名（行首） */
.zs-emp-card-head {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
}
.zs-emp-avatar {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    display: inline-block;
    background: var(--muted-bg-color, #f5f6f7);
    overflow: hidden;
}
.zs-emp-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted-color, #8b95a1);
    font-size: 12px;
}
.zs-emp-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: var(--main-color, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
}
.zs-emp-login {
    font-size: 11px;
    white-space: nowrap;
    color: var(--muted-color, #8b95a1);
    flex: 0 0 auto;
}
.zs-emp-stat-label {
    font-size: 11px;
    color: var(--muted-color, #8b95a1);
    flex: 0 0 auto;
}
.zs-emp-stat-value {
    font-weight: 600;
    font-size: 13px;
    color: var(--main-color, #1f2937);
    white-space: nowrap;
    flex: 0 0 auto;
}
.zs-emp-stat-salary {
    color: var(--danger-color, #e11d48) !important;
}
.zs-emp-view-btn {
    margin-left: auto;
    flex: 0 0 auto;
    padding: 2px 8px !important;
    font-size: 12px !important;
    border-radius: 6px;
}

/* 移动端：单列显示 */
@media (max-width: 640px) {
    .zs-employees-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .zs-emp-card {
        padding: 8px 10px;
        gap: 2px 5px;
    }
    .zs-emp-name {
        font-size: 12px;
    }
    .zs-emp-stat-value {
        font-size: 12px;
    }
}

/* 保留旧表格类（兜底，不会命中新结构） */
.zs-admin-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.zs-admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.zs-admin-table th,
.zs-admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--muted-border-color, #eee);
    white-space: nowrap;
}
.zs-admin-table th {
    background: var(--muted-bg-color, #f9f9f9);
    font-weight: 600;
    color: var(--muted-color, #666);
    font-size: 13px;
}
.zs-admin-table tbody tr:hover {
    background: var(--muted-bg-color, #f9f9f9);
}
.zs-admin-table .ta-c { text-align: center; }
.zs-admin-table .ta-r { text-align: right; }

/* 小屏：表格横向滚动（保留对旧结构的兜底兼容） */
@media (max-width: 640px) {
    .zs-admin-table th,
    .zs-admin-table td {
        padding: 8px 10px;
        font-size: 13px;
    }
}

/* 管理员详情区 */
.zs-admin-detail {
    animation: zsFadeIn .25s ease;
}
@keyframes zsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ====== 管理员详情 · 工资记录卡片网格 ======
   管理员记录卡片与前端用户端完全一致，共用 #zs_records_list 基础样式，
   不再使用独立覆盖。桌面端 4 列、移动端 1 列，均由通用规则统一控制。 */

/* 刷新按钮：渐变背景 + 白色文字，适配暗黑模式 */
#zs_refresh_btn {
    color: #fff !important;
    background: linear-gradient(135deg, var(--theme-color, var(--key-color, #667eea)) 0%, #fb6bea 100%) !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
body.dark-theme #zs_refresh_btn {
    color: #fff !important;
    background: linear-gradient(135deg, var(--theme-color, var(--key-color, #667eea)) 0%, #fb6bea 100%) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ====================================================
   Tab 菜单：计时工资 / 累计工时 / 记件工资（独立按钮）
   ==================================================== */
.zs-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
}
.zs-tab {
    display: inline-flex;
    align-items: center;
    padding: 6px 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted-color, #666);
    background: rgba(251, 107, 234, 0.12);
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none !important;
    transition: all .2s ease;
    white-space: nowrap;
    flex: 0 1 auto;
}
.zs-tab:hover {
    color: #ff5473;
    background: rgba(251, 107, 234, 0.20);
}
.zs-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #28c76f 0%, #1ec97d 100%);
    box-shadow: 0 2px 8px rgba(40, 199, 111, 0.25);
}

/* 面板切换 */
.zs-pane {
    display: none;
    animation: zsPaneFadeIn .22s ease;
}
.zs-pane.active {
    display: block;
}
@keyframes zsPaneFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   记件多行产品表格（#zs_piece_pane 新版）
   ========================================================= */
.zs-piece-table-wrap {
    margin-bottom: 10px;
}
.zs-piece-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #ebeef5);
    border-radius: 10px;
    overflow: hidden;
}
.zs-piece-table thead th {
    background: linear-gradient(135deg, var(--muted-bg-color, #f5f7fa) 0%, var(--muted-bg-color, #eef2ff) 100%);
    color: var(--muted-color, #606266);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 8px;
    text-align: justify;
    text-align-last: justify;
    text-justify: distribute-all-lines;
    border-bottom: 1px solid var(--main-border-color, #ebeef5);
    white-space: nowrap;
}
.zs-piece-table thead th[style*="text-align:center"],
.zs-piece-table thead th[style*="text-align: center"] {
    text-align: center !important;
    text-align-last: center !important;
}
.zs-piece-table tbody td,
.zs-piece-table tfoot td {
    padding: 8px 6px;
    border-bottom: 1px dashed var(--muted-border-color, #f0f2f5);
    vertical-align: middle;
}
.zs-piece-table tbody tr:last-child td {
    border-bottom: none;
}
.zs-piece-table tfoot {
    background: var(--muted-bg-color, #fafbff);
}
.zs-piece-table tfoot td {
    border-top: 1px solid var(--main-border-color, #ebeef5);
    border-bottom: none;
    padding: 10px 8px;
}
.zs-piece-table .input-block {
    padding: 7px 10px !important;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
}
/* 产品名称：自绘下拉面板替代原生 datalist
   —— 解决：①原生会按已选值过滤导致只显示当前匹配项；②手机端点中率低
   —— 自绘面板：全部预设显示、图标独立热区可点击 */
.zs-pi-name-wrap {
    position: relative;
    width: 100%;
}
.zs-piece-table .zs-pi-name-wrap .input-block.zs-pi-name {
    /* 右侧留位给 fa-caret-down 按钮（可点击），避免文字被遮住 */
    padding-right: 32px !important;
}
/* 下拉触发图标：独立热区，桌面/手机统一好点
   —— 手机端兼容要点：
      ① touch-action: manipulation → 禁用双击缩放 + 300ms 延迟，单指点击立即响应
      ② -webkit-user-select: none → 长按不弹文本选择菜单
      ③ inline-flex + align/justify center 保证触摸时命中面积真正居中 */
.zs-pi-name-caret {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: var(--muted-color, #909399);
    border-radius: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
            user-select: none;
    touch-action: manipulation;
    transition: background .15s ease, color .15s ease;
    /* iOS Safari 对内联非 <a>/<button> 的 click 兼容性较差：
       加这条后，即便委托的 click 事件也能正确触发（配合我们新增的 touchend 双通道双重保险） */
    -webkit-pointer-events: auto;
            pointer-events: auto;
}
.zs-pi-name-caret:hover,
.zs-pi-name-caret:active,
.zs-pi-name-wrap.open > .zs-pi-name-caret {
    background: var(--line-gray-light, #f0f2f5);
    color: var(--text-color, #1f2937);
}
/* 自绘下拉面板：统一挂在 body 下由 JS 定位（left/top/width 由 JS 内联写入），完全绕开父级 overflow 裁剪 */
.zs-pi-dropdown {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--main-bg-color, #fff);
    border: 1px solid var(--main-border-color, #ebeef5);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    z-index: 999999;
    display: none;
}
.zs-pi-dropdown.open {
    display: block;
    animation: zs-dropdown-fade-in .16s ease-out both;
}
@keyframes zs-dropdown-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.zs-pi-dropdown li[role="option"] {
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--key-color, #1f2937);
    cursor: pointer;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
            user-select: none;
    touch-action: manipulation;
}
.zs-pi-dropdown li[role="option"]:hover,
.zs-pi-dropdown li[role="option"]:active {
    background: var(--muted-bg-color, #eef2ff);
    color: var(--key-color, #4338ca);
    font-weight: 500;
}
.zs-piece-table tfoot td input[type=number][readonly],
.zs-piece-table td input[readonly].muted-2-color {
    background: var(--muted-bg-color, #f7f9fc) !important;
    color: var(--muted-color, #606266) !important;
}
/* 删除按钮样式（记件行） */
.zs-piece-table .zs-del-piece-item {
    white-space: nowrap;
    transition: all .18s ease;
    background: linear-gradient(135deg, var(--muted-bg-color, #fee2e2), var(--muted-border-color, #fecaca));
    color: var(--danger-color, #b91c1c);
    border: 1px solid var(--muted-border-color, #fecaca);
}
.zs-piece-table .zs-del-piece-item:hover {
    background: linear-gradient(135deg, var(--muted-border-color, #fecaca), var(--danger-color, #ef4444));
    color: #fff;
    border-color: var(--danger-color, #ef4444);
    transform: translateY(-1px);
}
.zs-piece-sum-input {
    font-weight: 600;
    background: var(--muted-bg-color, #fffbeb) !important;
}
/* 新增产品按钮包装：电脑端居中靠右，整体视觉更自然 */
.zs-add-piece-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
/* 新增一条产品：粉紫渐变主题色（不影响其他 btn-secondary） */
.zs-add-piece-wrap #zs_add_piece_item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 5px;
    line-height: 1;
    background: linear-gradient(to top right, #ff5473, #fb6bea);
    border: 1px solid transparent;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 3px 10px rgba(251, 107, 234, 0.28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.zs-add-piece-wrap #zs_add_piece_item > i,
.zs-add-piece-wrap #zs_add_piece_item > .fa,
.zs-add-piece-wrap #zs_add_piece_item > [class*="fa-"] {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-right: 0 !important; /* 取消模板里写的 mr3 class 带来的冗余 margin，改用 gap 控制间距 */
}
.zs-add-piece-wrap #zs_add_piece_item:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
    box-shadow: 0 5px 14px rgba(251, 107, 234, 0.36);
}
.zs-add-piece-wrap #zs_add_piece_item:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(251, 107, 234, 0.24);
}
/* 记件记录卡片里的产品明细展示（用户端 + 管理员端通用） */
.zs-piece-items-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 2px;
    padding: 6px 0 !important;
}
.zs-pi-line {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    font-size: 13px;
    line-height: 1.7;
}
.zs-pi-name-cell {
    min-width: 90px;
    color: var(--key-color, #1f2937);
    font-weight: 500;
}
/* 产品编号标签（记录展示时显示在产品名称前） */
.zs-pi-code-tag {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #00bcd4;
    background: rgba(0, 188, 212, 0.1);
    border: 1px solid rgba(0, 188, 212, 0.25);
    border-radius: 4px;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}
/* 移动端：记件表格 → 卡片式布局，无需横向滑动 */
@media (max-width: 640px) {
    /* table → block，取消表格特性 */
    .zs-piece-table,
    .zs-piece-table thead,
    .zs-piece-table tbody,
    .zs-piece-table tfoot,
    .zs-piece-table tr {
        display: block;
        width: 100%;
    }
    /* 隐藏表头，改用 data-label 在每行显示 */
    .zs-piece-table thead {
        display: none;
    }
    .zs-piece-table-wrap {
        overflow-x: hidden;
    }
    /* 每行 tr 变成卡片块 */
    .zs-piece-table tbody tr.zs-piece-row {
        background: var(--main-bg-color, #fff);
        border: 1px solid var(--main-border-color, #ebeef5);
        border-radius: 10px;
        padding: 0px 0px;
        margin-bottom: 8px;
    }
    /* td → flex 行：左边标签，右边输入框 */
    .zs-piece-table tbody td {
        display: flex;
        align-items: center;
        padding: 5px 0;
        border-bottom: none;
        gap: 8px;
    }
    /* 用 data-label 显示字段名：两头对齐 */
    .zs-piece-table tbody td::before {
        content: attr(data-label);
        flex: 0 0 68px;
        font-size: 13px;
        color: var(--muted-color, #909399);
        font-weight: 600;
        white-space: nowrap;
        text-align: justify;
        text-align-last: justify;
        text-justify: distribute-all-lines;
    }
    .zs-piece-table tbody td[data-label="操作"]::before {
        display: none;
    }
    .zs-piece-table tbody td[data-label="操作"] {
        justify-content: flex-end;
        margin-top: 2px;
    }
    .zs-piece-table tbody .input-block {
        flex: 1;
        padding: 8px 10px !important;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        box-sizing: border-box;
    }
    /* 手机端卡片布局：产品名称容器占剩余宽度，配合右侧下拉图标/面板正确渲染 */
    .zs-piece-table tbody td .zs-pi-name-wrap {
        flex: 1;
        width: auto;
    }
    /* 手机端：下拉项加大 padding 提升手指点中率；面板最大高度按屏幕一半（防止被底栏遮挡且够用） */
    .zs-pi-dropdown {
        max-height: 50vh;
    }
    .zs-pi-dropdown li[role="option"] {
        padding: 13px 12px;
        font-size: 15px;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    /* 删除按钮 */
    .zs-piece-table .zs-del-piece-item {
        padding: 7px 14px !important;
        font-size: 13px !important;
    }
    /* tfoot：合计独占一个卡片（不再包含新增按钮） */
    .zs-piece-table tfoot tr {
        display: flex;
        flex-direction: column;
        gap: 6px;
        background: var(--muted-bg-color, #fafbff);
        border: 1px solid var(--main-border-color, #ebeef5);
        border-radius: 10px;
        padding: 10px;
    }
    .zs-piece-table tfoot td {
        display: block;
        padding: 0;
        border: none;
        text-align: left !important;
        font-weight: 600;
    }
    .zs-piece-table tfoot td[colspan] {
        font-size: 14px;
        color: var(--muted-color, #606266);
    }
    .zs-piece-table tfoot #zs_piece_total {
        width: 100%;
        padding: 10px !important;
        font-size: 15px;
    }
    /* 新增产品按钮：手机端 100% 宽 + 居中文字，大按钮更好点 */
    .zs-add-piece-wrap {
        justify-content: stretch !important;
    }
    .zs-add-piece-wrap #zs_add_piece_item {
        width: 100%;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px;
        line-height: 1 !important;
        padding: 12px !important;
        font-size: 15px !important;
    }
    .zs-add-piece-wrap #zs_add_piece_item > i,
    .zs-add-piece-wrap #zs_add_piece_item > .fa,
    .zs-add-piece-wrap #zs_add_piece_item > [class*="fa-"] {
        display: inline-block !important;
        vertical-align: middle !important;
        line-height: 1 !important;
        margin-right: 0 !important;
    }
}

/* =========================================================
   统计报表区域样式
   ========================================================= */

/* 子 Tab */
.zs-stats-tabs {
    border-bottom: 2px solid var(--line-gray, #ebeef5);
    padding-bottom: 8px;
}
.zs-stats-tab {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    color: var(--muted-color, #606266);
    cursor: pointer;
    transition: all .2s ease;
    white-space: nowrap;
}
.zs-stats-tab:hover {
    color: var(--key-color, #409eff);
    background: rgba(255,255,255,0.6);
}
.zs-stats-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #ff5473 0%, #fb6bea 100%);
    box-shadow: 0 2px 8px rgba(102,126,234,0.3);
}

/* 年度汇总：卡片网格 */
.zs-stats-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.zs-stats-cards-grid.zs-stats-3 {
    grid-template-columns: repeat(3, 1fr);
}
.zs-stat-card-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
    border: 1px solid var(--line-gray-light, #f0f2f5);
    border-radius: 10px;
    padding: 12px;
    transition: transform .2s ease, box-shadow .2s ease;
}
.zs-stat-card-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.zs-stat-card-icon {
    font-size: 22px;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0,0,0,0.03);
}
.zs-stat-card-body {
    flex: 1;
    min-width: 0;
}
.zs-stat-card-val {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    word-break: break-all;
}
.zs-stat-card-label {
    font-size: 12px;
    color: var(--muted-color, #909399);
    margin-top: 2px;
}

/* 图表容器 */
.zs-chart-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    padding: 10px;
    background: #fff;
    border: 1px solid var(--line-gray-light, #f0f2f5);
    border-radius: 10px;
}

/* 工资趋势切换按钮 */
.zs-chart-toggle {
    gap: 10px;
}
.zs-trend-btn {
    padding: 6px 18px !important;
    border-radius: 8px;
}

/* 产品排行表格 */
.zs-product-rank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.zs-product-rank-table th {
    background: linear-gradient(135deg, #f5f7fa 0%, #eef2ff 100%);
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    color: var(--muted-color, #606266);
    border-bottom: 2px solid var(--line-gray, #ebeef5);
}
.zs-product-rank-table td {
    padding: 8px 10px;
    border-bottom: 1px dashed var(--line-gray-light, #f0f2f5);
}
.zs-product-rank-table tbody tr:hover {
    background: #fafbff;
}
.zs-pct-bar {
    display: inline-block;
    width: 50px;
    height: 8px;
    background: #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 4px;
}
.zs-pct-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(to right, #667eea, #764ba2);
    border-radius: 4px;
}

/* 工作日历 */
.zs-cal-grid-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.zs-cal-month-block {
    background: #fff;
    border: 1px solid var(--line-gray, #ebeef5);
    border-radius: 10px;
    padding: 10px;
}
.zs-cal-month-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color, #303133);
    margin-bottom: 6px;
    text-align: center;
}
.zs-cal-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    color: var(--muted-color, #c0c4cc);
    margin-bottom: 4px;
}
.zs-cal-week-header span {
    padding: 2px 0;
}
.zs-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.zs-cal-day,
.zs-cal-day-empty {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
    position: relative;
    min-height: 32px;
}
.zs-cal-day-empty {
    background: transparent;
}
.zs-cal-day {
    background: #f5f7fa;
    color: var(--muted-color, #909399);
    cursor: default;
    transition: transform .15s ease;
}
.zs-cal-day:hover {
    transform: scale(1.08);
    z-index: 2;
}
.zs-cal-day-num {
    font-weight: 600;
    line-height: 1;
}
.zs-cal-day-salary {
    font-size: 9px;
    color: var(--muted-color, #c0c4cc);
    margin-top: 1px;
}
/* 已录入：计时(蓝) / 记件(橙) */
.zs-cal-has-hourly {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
}
.zs-cal-has-hourly .zs-cal-day-salary { color: #1976d2; }
.zs-cal-has-piece {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
    color: #e65100;
}
.zs-cal-has-piece .zs-cal-day-salary { color: #ef6c00; }
.zs-cal-has-night {
    box-shadow: inset 0 0 0 2px #764ba2;
}
/* 漏录（过去的日期没记录） */
.zs-cal-missed {
    background: #fef0f0;
    color: #f56c6c;
}
/* 今天 */
.zs-cal-today {
    box-shadow: 0 0 0 2px #67c23a;
}
/* 图例 */
.zs-cal-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.zs-cal-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 2px;
}
.zs-cal-hourly { background: #bbdefb; }
.zs-cal-piece { background: #ffe0b2; }
.zs-cal-night { background: transparent; border: 2px solid #764ba2; width: 6px; height: 6px; }
.zs-cal-empty { background: #fef0f0; }

/* 响应式：工资记录卡片网格（文章卡片式） */
@media (max-width: 800px) {
    /* 移动端：工资记录单列卡片 */
    #zs_records_list,
    #zs_admin_records_list,
    .zs-admin-detail #zs_admin_records_list,
    .zs-admin-detail #zs_records_list {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    /* 卡片缩略图缩小 */
    .zs-card-thumb {
        flex: 0 0 72px;
        padding: 10px 6px;
    }
    .zs-thumb-day { font-size: 22px; }
    .zs-thumb-day.zs-thumb-range { font-size: 11px; }
    .zs-thumb-month { font-size: 12px; }
    .zs-thumb-weekday { font-size: 10px; }
    .zs-thumb-icon { font-size: 13px; }
    .zs-card-title { font-size: 17px; }
    .zs-card-body { padding: 10px; gap: 4px; }
    .zs-card-metrics { font-size: 12px; }
    .zs-article-card .zs-record-meta { font-size: 11px; gap: 3px 10px; }
    .zs-article-card .zs-record-meta .zs-pi-line { font-size: 11px; line-height: 1.5; }
    /* 移动端隐藏按钮文字，纯图标 */
    .zs-record-actions .zs-btn-label { display: none; }
    .zs-article-card .zs-record-actions button {
        padding: 3px 8px;
        font-size: 13px;
    }
    /* 累计工时列表：移动端收紧 */
    .zs-cumulative-section { padding: 12px; margin-top: 16px; }
    .zs-cumulative-item { padding: 10px 12px; }
    .zs-cum-stats { gap: 8px; font-size: 12px; }
    .zs-cum-perday { display: none; }
    /* 统计摘要区：800px 以下强制 2 列 */
    .zs-salary-wrap .zs-stats > div,
    .zs-admin-stats > div {
        flex: 0 0 calc(50% - 5px);
        min-width: calc(50% - 5px);
    }
}
@media (max-width: 480px) {
    /* 超窄屏：收紧间距与字号 */
    #zs_records_list,
    #zs_admin_records_list {
        gap: 8px;
    }
    .zs-card-thumb {
        flex: 0 0 58px;
        padding: 8px 4px;
    }
    .zs-thumb-day { font-size: 18px; }
    .zs-thumb-day.zs-thumb-range { font-size: 10px; }
    .zs-thumb-month { font-size: 11px; }
    .zs-thumb-weekday { font-size: 9px; padding: 1px 6px; }
    .zs-thumb-icon { font-size: 11px; }
    .zs-card-title { font-size: 15px; }
    .zs-card-body { padding: 8px; gap: 3px; }
    .zs-card-metrics { font-size: 11px; line-height: 1.5; }
    .zs-article-card .zs-record-meta { font-size: 10px; gap: 2px 8px; }
    .zs-article-card .zs-record-meta .zs-pi-line { font-size: 10px; }
    .zs-article-card .zs-record-actions button {
        padding: 2px 6px;
        font-size: 12px;
    }
    .zs-cum-range { font-size: 13px; }
    .zs-cum-stats { font-size: 11px; gap: 6px; }
}

/* 响应式：统计报表 */
@media (max-width: 768px) {
    .zs-stats-cards-grid,
    .zs-stats-cards-grid.zs-stats-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .zs-cal-grid-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
    .zs-stats-tab {
        padding: 5px 10px;
        font-size: 12px;
    }
}
@media (max-width: 480px) {
    /* 统计报表：年度汇总卡片 移动端每行 2 个（需求），放弃原本的 1 列单列堆叠 */
    .zs-stats-cards-grid,
    .zs-stats-cards-grid.zs-stats-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .zs-cal-grid-wrap {
        grid-template-columns: 1fr;
    }
    .zs-stat-card-mini {
        padding: 10px;
        gap: 8px;
        flex-direction: row;
        align-items: center;
    }
    .zs-stat-card-val {
        font-size: 16px;
    }
    .zs-stat-card-label {
        font-size: 11px;
        line-height: 1.35;
    }
    .zs-stat-card-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }
}

/* 记件 badge：紫色系（区别于夜班紫色偏深，用偏亮的青绿紫） */
.zs-piece-badge {
    display: inline-block;
    padding: 3px 12px;
    margin: 0 0px;
    font-size: 0.75em;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 6px rgba(16, 185, 129, .2);
}
/* 管理员面板里的 piece badge 不要额外 margin */
.zs-admin-detail .zs-piece-badge,
.zs-admin-detail .zs-night-badge,
.zs-admin-detail .zs-cumulative-badge {
    margin: 0 0 0 8px;
}

/* 累计工时 badge：靛蓝/紫蓝渐变（区别于计时蓝、计件绿、夜班深紫） */
.zs-cumulative-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    margin: 0 0px;
    font-size: 0.72em;
    font-weight: 500;
    line-height: 1.6;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #7367f0 0%, #5d4bff 100%);
    box-shadow: 0 2px 6px rgba(115, 103, 240, .2);
}

/* 小屏：Tab 菜单自动换行撑满 */
@media (max-width: 640px) {
    .zs-salary-wrap .zib-widget-title .flex.jc {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .zs-tabs {
        flex: 1 1 100%;
        justify-content: flex-start;
        border-radius: 0;
        padding: 0;
    }
    .zs-tab {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        text-align: center;
        padding: 6px 2px;
        font-size: 12px;
    }
    /* 统计报表标题：窄屏改为上下堆叠，彻底避免换行+溢出 */
    #zs_stats_widget .zib-widget-title {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    #zs_stats_widget .zib-widget-title > h4,
    #zs_stats_widget .zib-widget-title > *:first-child {
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }
    #zs_stats_widget #zs_stats_year {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ============================================================
   公司选择器 & 公司管理
   ============================================================ */
#zs_company_id {
    cursor: pointer;
}
.zs-company-row:hover {
    background: var(--muted-border-color, #eef0f3) !important;
}

/* ============================================================
   暗黑模式适配：工资记录 & 全局
   ============================================================ */
body.dark-theme .zs-record-item {
    background: var(--main-bg-color) !important;
    border-color: var(--main-border-color) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body.dark-theme .zs-record-item:hover {
    background: var(--muted-bg-color) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}
body.dark-theme .zs-record-date {
    color: var(--key-color) !important;
}
body.dark-theme .zs-record-weekday {
    color: var(--muted-2-color) !important;
}
body.dark-theme .zs-record-total {
    color: var(--theme-color, #ff6b6b) !important;
}
body.dark-theme .zs-record-meta {
    color: var(--muted-2-color) !important;
}
body.dark-theme .zs-record-meta span::before {
    color: var(--muted-3-color) !important;
}
body.dark-theme .zs-record-metric { color: var(--muted-2-color) !important; }
body.dark-theme .zs-record-metric { border-top-color: var(--main-border-color, rgba(255,255,255,0.08)) !important; }
body.dark-theme .zs-record-metric .zs-mh { color: var(--key-color) !important; }
body.dark-theme .zs-record-metric .zs-mrate { color: var(--muted-color) !important; }
body.dark-theme .zs-record-metric .zs-msep,
body.dark-theme .zs-record-metric .zs-mcompany { color: var(--muted-3-color) !important; }
body.dark-theme .zs-btn-edit {
    background: linear-gradient(135deg, var(--theme-color, var(--key-color, #667eea)) 0%, #fb6bea 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark-theme .zs-btn-delete {
    background: rgba(255,105,180,.18) !important;
    color: #ff9ebb !important;
    border: 1px solid rgba(255,105,180,.35) !important;
}
body.dark-theme .zs-pi-name-cell {
    color: var(--key-color) !important;
}
body.dark-theme .zs-pi-code-tag {
    color: #4dd0e1 !important;
    background: rgba(0, 188, 212, 0.15) !important;
    border-color: rgba(0, 188, 212, 0.3) !important;
}
body.dark-theme .zs-hourly-badge {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 6px rgba(59, 130, 246, .3);
}
body.dark-theme .zs-piece-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 2px 6px rgba(16, 185, 129, .3);
}
body.dark-theme .zs-cumulative-badge {
    background: linear-gradient(135deg, #7367f0 0%, #5d4bff 100%);
    box-shadow: 0 2px 6px rgba(115, 103, 240, .3);
}
body.dark-theme .zs-night-badge {
    background: linear-gradient(135deg, var(--theme-color, #667eea) 0%, var(--focus-color, #764ba2) 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
/* 管理员卡片暗黑模式与前端共用同一套样式 */
/* 计件工资表格暗黑模式适配 */
body.dark-theme .zs-piece-table {
    background: var(--main-bg-color) !important;
    border-color: var(--main-border-color) !important;
}
body.dark-theme .zs-piece-table thead th {
    background: linear-gradient(135deg, var(--muted-bg-color) 0%, var(--muted-bg-color) 100%) !important;
    color: var(--muted-color) !important;
    border-bottom-color: var(--main-border-color) !important;
}
body.dark-theme .zs-piece-table tbody td,
body.dark-theme .zs-piece-table tfoot td {
    border-bottom-color: var(--muted-border-color) !important;
}
body.dark-theme .zs-piece-table tfoot {
    background: var(--muted-bg-color) !important;
}
body.dark-theme .zs-piece-table tfoot td {
    border-top-color: var(--main-border-color) !important;
}
body.dark-theme .zs-piece-table tbody tr.zs-piece-row {
    background: var(--main-bg-color) !important;
    border-color: var(--main-border-color) !important;
}
body.dark-theme .zs-piece-table tfoot tr {
    background: var(--muted-bg-color) !important;
    border-color: var(--main-border-color) !important;
}
body.dark-theme .zs-piece-table tfoot td input[type=number][readonly],
body.dark-theme .zs-piece-table td input[readonly].muted-2-color {
    background: var(--muted-bg-color) !important;
    color: var(--muted-color) !important;
}
body.dark-theme .zs-del-piece-item {
    background: linear-gradient(135deg, rgba(244,67,54,.15), rgba(244,67,54,.1)) !important;
    color: var(--danger-color, #f56c6c) !important;
    border-color: rgba(244,67,54,.3) !important;
}
body.dark-theme .zs-del-piece-item:hover {
    background: linear-gradient(135deg, var(--danger-color, #f56c6c), var(--danger-color, #ef4444)) !important;
    color: #fff !important;
}
body.dark-theme .zs-piece-sum-input {
    background: var(--muted-bg-color) !important;
    color: var(--theme-color, #f56c6c) !important;
}
body.dark-theme .zs-pi-dropdown {
    background: var(--main-bg-color) !important;
    border-color: var(--main-border-color) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5) !important;
}
body.dark-theme .zs-pi-dropdown li[role="option"] {
    color: var(--key-color) !important;
}
body.dark-theme .zs-pi-dropdown li[role="option"]:hover,
body.dark-theme .zs-pi-dropdown li[role="option"]:active {
    background: var(--muted-bg-color) !important;
    color: var(--theme-color) !important;
}

/* ====== 使用教程样式 ====== */

/* ====== 未登录提示条 ====== */
.zs-login-notice {
    padding: 10px 16px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8f4fd 0%, #d6eaf8 100%);
    border: 1px solid #aed6f1;
    color: #2c6faa;
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: space-between;
}
body.dark-theme .zs-login-notice {
    background: linear-gradient(135deg, #1a2a3a 0%, #1f3145 100%);
    border-color: #2a4a6a;
    color: #7ab8e8;
}
.zs-tutorial-wrap {
    padding: 4px 0 20px;
}

.zs-tutorial-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff5473 0%, #a344ff 100%);
    color: #fff;
    margin-bottom: 16px;
}

.zs-tutorial-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.zs-tutorial-hero h3 { color: #fff; }
.zs-tutorial-hero p { color: rgba(255,255,255,0.85); }

/* 快速导航 */
.zs-tutorial-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: var(--muted-bg-color, #f6f6f6);
}

.zs-tut-nav-item {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    background: #fff;
    color: var(--key-color, #333);
    border: 1px solid var(--main-border-color, #eee);
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    white-space: nowrap;
}

.zs-tut-nav-item:hover {
    background: var(--theme-color, #ff5473);
    color: #fff;
    border-color: transparent;
}

/* 章节区块 */
.zs-tut-section {
    margin-bottom: 20px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--main-border-color, #eee);
    transition: box-shadow .3s;
}

.zs-tut-section.zs-tut-highlight {
    box-shadow: 0 0 0 2px var(--theme-color, #ff5473);
}

.zs-tut-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--muted-bg-color, #f6f6f6);
}

.zs-tut-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--theme-color, #ff5473);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    flex-shrink: 0;
}

.zs-tut-section-head h4 { font-size: 15px; }

/* 步骤 */
.zs-tut-step {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--main-border-color, #f0f0f0);
}

.zs-tut-step:last-child { border-bottom: none; }

.zs-tut-step-num {
    font-size: 12px;
    font-weight: bold;
    color: var(--theme-color, #ff5473);
    background: rgba(255,84,115,0.08);
    padding: 2px 10px;
    border-radius: 12px;
    flex-shrink: 0;
    height: 22px;
    line-height: 18px;
    white-space: nowrap;
}

.zs-tut-step-body {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--key-color, #333);
}

.zs-tut-step-body p { margin: 0 0 4px; }
.zs-tut-step-body p:last-child { margin-bottom: 0; }

/* 列表 */
.zs-tut-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}

.zs-tut-list li {
    padding: 4px 0 4px 16px;
    position: relative;
    font-size: 13px;
    color: var(--muted-color, #666);
    line-height: 1.6;
}

.zs-tut-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 12px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--theme-color, #ff5473);
}

/* 底部提示 */
.zs-tut-footer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff9e6 0%, #fff3d4 100%);
    border: 1px solid #ffe69b;
    margin-top: 20px;
}

.zs-tut-footer-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffa500;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

/* 教程内 code 标签 */
.zs-tut-step-body code {
    background: var(--muted-bg-color, #f6f6f6);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--theme-color, #ff5473);
}

/* 暗色主题适配 */
body.dark-theme .zs-tutorial-hero {
    background: linear-gradient(135deg, #e0456a 0%, #8b3ad9 100%);
}
body.dark-theme .zs-tut-nav-item {
    background: var(--muted-bg-color, #2a2a2a);
    color: var(--key-color, #ccc);
    border-color: rgba(255,255,255,0.1);
}
body.dark-theme .zs-tut-nav-item:hover {
    background: var(--theme-color, #ff5473);
    color: #fff;
}
body.dark-theme .zs-tut-section-head {
    background: var(--muted-bg-color, #2a2a2a);
}
body.dark-theme .zs-tut-step-body { color: var(--key-color, #ccc); }
body.dark-theme .zs-tut-list li { color: var(--muted-color, #999); }
body.dark-theme .zs-tut-step-body code {
    background: var(--muted-bg-color, #2a2a2a);
    color: var(--theme-color, #ff5473);
}
body.dark-theme .zs-tut-footer {
    background: linear-gradient(135deg, #3a3520 0%, #4a4530 100%);
    border-color: #5a5030;
}

/* ====== 统计报表暗黑模式适配（毛玻璃效果） ====== */

/* Tab 栏底边 */
body.dark-theme .zs-stats-tabs {
    border-bottom-color: rgba(255,255,255,0.08);
}
body.dark-theme .zs-stats-tab {
    color: var(--muted-color, #909399);
}
body.dark-theme .zs-stats-tab:hover {
    color: var(--key-color, #ccc);
    background: rgba(255,255,255,0.06);
}

/* 年度汇总卡片：毛玻璃 */
body.dark-theme .zs-stat-card-mini {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.dark-theme .zs-stat-card-mini:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    background: rgba(255,255,255,0.07);
}
body.dark-theme .zs-stat-card-icon {
    background: rgba(255,255,255,0.06);
}
body.dark-theme .zs-stat-card-label {
    color: var(--muted-color, #909399);
}

/* 图表容器：毛玻璃 */
body.dark-theme .zs-chart-container {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 产品排行表格：毛玻璃 */
body.dark-theme .zs-product-rank-table th {
    background: rgba(255,255,255,0.06);
    color: var(--muted-color, #909399);
    border-bottom-color: rgba(255,255,255,0.1);
}
body.dark-theme .zs-product-rank-table td {
    border-bottom-color: rgba(255,255,255,0.05);
    color: var(--key-color, #ccc);
}
body.dark-theme .zs-product-rank-table tbody tr:hover {
    background: rgba(255,255,255,0.04);
}
body.dark-theme .zs-pct-bar {
    background: rgba(255,255,255,0.08);
}
body.dark-theme .zs-pct-bar > span {
    background: linear-gradient(to right, #ff5473, #a344ff);
}

/* 工作日历：毛玻璃 */
body.dark-theme .zs-cal-grid-wrap {
    gap: 10px;
}
body.dark-theme .zs-cal-month-block {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
body.dark-theme .zs-cal-month-title {
    color: var(--key-color, #ccc);
}
body.dark-theme .zs-cal-week-header {
    color: var(--muted-color, #909399);
}
body.dark-theme .zs-cal-week-header span {
    color: var(--muted-color, #909399);
}

/* 日历单元格 */
body.dark-theme .zs-cal-day {
    background: rgba(255,255,255,0.03);
    color: var(--muted-color, #909399);
}
body.dark-theme .zs-cal-day-salary {
    color: var(--muted-color, #c0c4cc);
}

/* 计时日（蓝）→ 暗色毛玻璃 */
body.dark-theme .zs-cal-has-hourly {
    background: rgba(64,158,255,0.15);
    color: #5dafff;
}
body.dark-theme .zs-cal-has-hourly .zs-cal-day-salary { color: #5dafff; }

/* 计件日（橙）→ 暗色毛玻璃 */
body.dark-theme .zs-cal-has-piece {
    background: rgba(230,162,60,0.15);
    color: #ffc266;
}
body.dark-theme .zs-cal-has-piece .zs-cal-day-salary { color: #ffc266; }

/* 夜班内框 */
body.dark-theme .zs-cal-has-night {
    box-shadow: inset 0 0 0 2px #a344ff;
}

/* 漏录日期 */
body.dark-theme .zs-cal-missed {
    background: rgba(245,108,108,0.1);
    color: #ff8a8a;
}

/* 今天高亮 */
body.dark-theme .zs-cal-today {
    box-shadow: 0 0 0 2px #67c23a;
}

/* 日历图例圆点 */
body.dark-theme .zs-cal-hourly { background: rgba(64,158,255,0.4); }
body.dark-theme .zs-cal-piece { background: rgba(230,162,60,0.4); }
body.dark-theme .zs-cal-night {
    border-color: #a344ff;
}
body.dark-theme .zs-cal-empty { background: rgba(245,108,108,0.25); }

/* 日历导航区域毛玻璃 */
body.dark-theme .zs-cal-nav {
    color: var(--key-color, #ccc);
}
body.dark-theme .zs-cal-legend {
    color: var(--muted-color, #909399);
}