/* =========================================================
   外呼分期台账系统 · 暖陶玻璃界面（2026-10-27）
   设计：暖陶模糊渐变背景 + 半透明磨砂玻璃卡片 + 细白描边大圆角 + 铜橙强调
   说明：类名与原版保持一致，仅替换视觉层，不改动任何业务逻辑
   ========================================================= */

:root {
    /* 暖陶色阶 */
    --clay-0: #FBF2EA;
    --clay-1: #F1DDCE;
    --clay-2: #E3C4AD;
    --clay-3: #D3A57C;

    /* 铜橙强调 */
    --copper: #B4703C;
    --copper-dk: #8E5127;
    --copper-lt: #D9945C;
    --copper-glow: #E8A96B;

    /* 文字 */
    --ink: #3B2C21;
    --ink-2: #7B6555;
    --ink-3: #A38C7A;
    --muted: #8B7462;

    /* 玻璃与描边 */
    --glass-bg: linear-gradient(155deg, rgba(255, 255, 255, .74), rgba(255, 251, 246, .46));
    --glass-bd: rgba(255, 255, 255, .74);
    --line: rgba(180, 140, 110, .2);
    --bg: #EFE0D4;

    /* 兼容旧变量名（部分模板内联样式可能引用） */
    --brand: #B4703C;
    --brand-dark: #8E5127;
    --side-bg: transparent;
    --side-fg: #7B6555;

    --shadow-card: 0 18px 40px -26px rgba(92, 52, 26, .45), 0 1px 2px rgba(92, 52, 26, .05), inset 0 1px 0 rgba(255, 255, 255, .85);
    --ease-spring: cubic-bezier(.34, 1.5, .5, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #F2E1D3; }

body {
    font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", -apple-system, "Segoe UI", sans-serif;
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.55;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}
a { color: var(--copper-dk); text-decoration: none; }
a:hover { color: var(--copper); }
::selection { background: rgba(180, 112, 60, .2); }

/* ===== 背景：暖陶模糊渐变 ===== */
/* 兜底背景（若模板未注入 .bg 图层，由 body 伪元素提供同样的暖陶渐变） */
body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(48vw 48vw at 6% 2%, rgba(249, 216, 188, .95), rgba(249, 216, 188, 0) 70%),
        radial-gradient(42vw 42vw at 96% 12%, rgba(239, 192, 163, .9), rgba(239, 192, 163, 0) 72%),
        radial-gradient(56vw 56vw at 40% 108%, rgba(223, 174, 135, .72), rgba(223, 174, 135, 0) 74%),
        radial-gradient(120% 92% at 12% -6%, #FDF6EF 0%, #F3E0D1 40%, #E7CBB6 78%, #DEBBA2 100%);
}
.bg {
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: radial-gradient(120% 92% at 12% -6%, #FDF6EF 0%, #F3E0D1 40%, #E7CBB6 78%, #DEBBA2 100%);
}
.bg i {
    position: absolute; display: block; border-radius: 50%; filter: blur(72px); opacity: .8;
    /* 提升为独立合成层：页面滚动时浏览器直接复用这张纹理，不再重算 72px 大模糊 */
    transform: translateZ(0);
    /* 这里曾有一个 26 秒的无限漂浮动画。低端办公机上，背景每动一帧，
       所有 backdrop-filter 毛玻璃卡片就跟着重算一遍，表现为大块色块闪烁
       （台账管理这类长表格页最明显）。纯装饰，砍掉动画换稳定。 */
}
.bg i:nth-child(1) { width: 48vw; height: 48vw; left: -10vw; top: -12vw;
    background: radial-gradient(circle at 40% 40%, #F9D8BC, #E9AE84 58%, rgba(233, 174, 132, 0) 72%); }
.bg i:nth-child(2) { width: 42vw; height: 42vw; right: -8vw; top: 4vh; animation-delay: -7s;
    background: radial-gradient(circle at 50% 50%, #EFC0A3, #D08F63 56%, rgba(208, 143, 99, 0) 74%); }
.bg i:nth-child(3) { width: 56vw; height: 56vw; left: 20vw; bottom: -26vw; opacity: .5; animation-delay: -13s;
    background: radial-gradient(circle at 50% 50%, #DFAE87, #B9764A 54%, rgba(185, 118, 74, 0) 74%); }
.bg i:nth-child(4) { width: 28vw; height: 28vw; right: 16vw; bottom: 2vh; opacity: .9; animation-delay: -3s;
    background: radial-gradient(circle at 50% 50%, #FDEDDD, rgba(253, 237, 221, 0) 70%); }
/* （bgFloat 漂浮动画已移除：低端办公机上会引发毛玻璃卡片整帧重算、页面闪烁） */

/* ===== 顶栏 ===== */
.topbar {
    position: sticky; top: 0; z-index: 80;
    margin: 10px 12px 0;
    padding: 10px 16px;
    display: flex; justify-content: space-between; align-items: center;
    gap: 10px; flex-wrap: wrap;
    border-radius: 18px;
    background: linear-gradient(155deg, rgba(255, 255, 255, .8), rgba(255, 248, 242, .56));
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid var(--glass-bd);
    box-shadow: 0 16px 36px -24px rgba(92, 52, 26, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.topbar h1 { font-size: 16px; margin: 0; font-weight: 650; letter-spacing: .4px; color: #3E2E22; }
.topbar .who { font-size: 12.5px; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.topbar .who .muted { color: var(--ink-3) !important; font-size: 12px; }
.topbar a {
    color: #8A4C22; margin-left: 14px; padding: 4px 10px; border-radius: 9px;
    background: rgba(180, 112, 60, .1); transition: background .2s, transform .2s;
}
.topbar a:hover { background: rgba(180, 112, 60, .18); transform: translateY(-1px); color: #7C3F1B; }

/* ===== 主体布局 ===== */
.app {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 12px; min-height: calc(100vh - 64px);
}

/* ===== 左侧菜单 ===== */
.sidebar {
    flex: 0 0 214px; width: 214px;
    position: sticky; top: 76px;
    max-height: calc(100vh - 90px); overflow-y: auto;
    padding: 12px 0 10px;
    border-radius: 22px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(26px) saturate(1.4);
    backdrop-filter: blur(26px) saturate(1.4);
    border: 1px solid var(--glass-bd);
    box-shadow: var(--shadow-card);
    color: var(--ink-2);
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar .side-title {
    font-size: 11px; letter-spacing: 1.4px; color: var(--ink-3);
    padding: 6px 20px 8px;
}
.sidebar a {
    display: flex; align-items: center;
    height: 42px; padding: 0 13px; margin: 2px 8px;
    border-radius: 13px;
    color: var(--ink-2); font-size: 13.5px; font-weight: 500;
    white-space: nowrap; position: relative; z-index: 1;
    transition: color .28s ease, background .28s ease;
}
.sidebar a:hover { background: rgba(255, 255, 255, .5); color: var(--ink); }
.sidebar a.active {
    color: #7C3F1B; font-weight: 650;
    background: linear-gradient(135deg, rgba(255, 255, 255, .95), rgba(255, 236, 222, .72));
    box-shadow: 0 10px 22px -14px rgba(150, 80, 35, .7), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.sidebar .pill {
    position: absolute; z-index: 0; pointer-events: none;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(255, 236, 222, .7));
    box-shadow: 0 10px 22px -14px rgba(150, 80, 35, .7), inset 0 1px 0 #fff;
    transition: top .5s var(--ease-spring), left .5s var(--ease-spring),
                width .5s var(--ease-spring), height .5s var(--ease-spring);
}
.sidebar .side-foot { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 8px; }

.main { flex: 1 1 auto; min-width: 0; padding: 4px 2px 40px; }
.container { max-width: 1180px; margin: 0 auto; width: 100%; }

/* ===== 顶部 Tab（玻璃分段控件） ===== */
.tabs {
    display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 16px;
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 12px 26px -22px rgba(92, 52, 26, .6), inset 0 1px 0 rgba(255, 255, 255, .9);
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: 8px 15px; font-size: 13.5px; color: var(--ink-2); cursor: pointer;
    border-radius: 11px; white-space: nowrap; border: 1px solid transparent;
    background: transparent;
    transition: color .22s, background .22s, box-shadow .22s;
}
.tab:hover { color: var(--copper-dk); background: rgba(255, 255, 255, .55); }
.tab.active {
    color: #7C3F1B; font-weight: 650;
    background: linear-gradient(135deg, #FFFFFF, rgba(255, 240, 230, .88));
    border-color: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 18px -12px rgba(120, 60, 25, .8), inset 0 1px 0 #fff;
}
.panel { display: none; }
.panel.active { display: block; animation: panelIn .4s cubic-bezier(.2, .85, .3, 1); }
@keyframes panelIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* ===== 卡片（磨砂玻璃） ===== */
.card {
    position: relative;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    border: 1px solid var(--glass-bd);
    border-radius: 22px;
    padding: 18px;
    margin-bottom: 14px;
    max-width: 100%; overflow: visible;
    box-shadow: var(--shadow-card);
    transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}
.card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%);
    opacity: 0; transition: opacity .38s ease; mix-blend-mode: screen;
}
.card:hover::before { opacity: 1; }
.card:hover { box-shadow: 0 26px 54px -30px rgba(92, 52, 26, .6), 0 1px 2px rgba(92, 52, 26, .06), inset 0 1px 0 rgba(255, 255, 255, .92); }
.card > h2, .card > h3 {
    font-size: 14.5px; margin: 0 0 13px; color: #3E2E22; font-weight: 650;
    padding-bottom: 9px; border-bottom: 1px solid rgba(180, 140, 110, .16);
}
.page-head { margin-bottom: 14px; padding: 2px 4px; }
.page-head h2 { font-size: 19px; margin: 0 0 4px; font-weight: 700; letter-spacing: .3px; color: #3E2E22; }
.page-head .desc { color: var(--ink-2); font-size: 12.5px; }

/* ===== 表单 ===== */
label { display: block; font-size: 12.5px; color: var(--ink-2); margin: 10px 0 5px; font-weight: 500; }
input, select, textarea {
    width: 100%; max-width: 100%; padding: 9px 12px;
    border: 1px solid rgba(180, 140, 110, .3);
    border-radius: 11px; font-size: 13.5px; font-family: inherit;
    background: rgba(255, 255, 255, .72); color: var(--ink);
    transition: border-color .2s, box-shadow .2s, background .2s;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: rgba(180, 112, 60, .55); background: #fff;
    box-shadow: 0 0 0 3px rgba(180, 112, 60, .12);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
textarea { resize: vertical; min-height: 64px; }
select { cursor: pointer; }

button, .btn {
    background: linear-gradient(135deg, var(--copper-lt), var(--copper-dk));
    color: #FFF6EE; border: none; padding: 9px 16px;
    border-radius: 11px; font-size: 13.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; text-decoration: none; display: inline-block;
    box-shadow: 0 12px 22px -14px rgba(142, 81, 39, .95), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .22s var(--ease-spring), box-shadow .22s, filter .22s;
}
button:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -14px rgba(142, 81, 39, 1); filter: brightness(1.03); }
button:active, .btn:active { transform: translateY(0); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
button.secondary {
    background: rgba(255, 255, 255, .7); color: var(--ink-2);
    border: 1px solid rgba(180, 140, 110, .3); box-shadow: none;
}
button.secondary:hover { background: #fff; color: var(--ink); }
button.ghost {
    background: rgba(180, 112, 60, .1); color: var(--copper-dk);
    border: 1px solid rgba(180, 112, 60, .18); box-shadow: none;
}
button.ghost:hover { background: rgba(180, 112, 60, .17); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* 自适应栅格：列宽不足自动换行，永不超出容器 */
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > div { flex: 1 1 160px; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.grid2 > * { min-width: 0; }

/* ===== 表格 ===== */
.table-wrap {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 13px; border: 1px solid rgba(180, 140, 110, .16);
    background: rgba(255, 255, 255, .4);
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: rgba(180, 112, 60, .25); border-radius: 99px; }
/* 员工列表：列多时可横向滚动 / 拖动下方进度条 */
.emp-table { min-width: 2600px; }   /* 全部档案字段都摊开，靠横向进度条看 */
/* 常驻屏幕底部：不用先滚到表格最下面才能拖（position: fixed 老浏览器也认） */
.emp-bar-wrap {
    display: flex; align-items: center; gap: 10px; margin: 0;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding: 8px 14px;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid rgba(180, 140, 110, .22);
    box-shadow: 0 -3px 14px -6px rgba(90, 50, 20, .35);
}
.emp-bar {
    -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 120px;
    height: 8px; border-radius: 99px; outline: none; background: rgba(180, 140, 110, .18);
}
.emp-bar::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: linear-gradient(135deg, #E8A96B, #B4703C); border: 2px solid #fff;
    box-shadow: 0 2px 8px -2px rgba(150, 80, 35, .6); cursor: grab;
}
.emp-bar::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff;
    background: linear-gradient(135deg, #E8A96B, #B4703C); cursor: grab;
}
.emp-bar::-moz-range-track { height: 8px; border-radius: 99px; background: rgba(180, 140, 110, .18); }
@media (max-width: 640px) {
    .emp-table { min-width: 2400px; }
    .emp-bar-wrap { gap: 8px; }
}

/* ================= 员工管理：三个体验改造 ==============================
   ① 按需渲染：表格容器固定高度，只画看得见的那十几行（千人也不卡）
   ② 姓名列冻结：往右拉时姓名不动（IE11 不支持 sticky，会退化成普通列）
   ③ 底部常驻横向条：见上面的 .emp-bar-wrap
   ==================================================================== */
#empScroll {
    max-height: calc(100vh - 250px);
    min-height: 240px;
    overflow: auto;                 /* 纵横都能滚，按需渲染靠滚动位置算 */
    -webkit-overflow-scrolling: touch;
}
#empScroll .emp-table tbody td {
    height: 40px; padding: 0 10px; line-height: 40px;   /* 行高固定，按需渲染才准 */
}
#empScroll .emp-table tbody tr.vspacer,
#empScroll .emp-table tbody tr.vspacer td {
    height: auto; padding: 0; border: 0; background: none; line-height: 0;
}
/* 姓名列冻结 */
.emp-table th.emp-name, .emp-table td.emp-name {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 rgba(180, 140, 110, .28);
}
.emp-table thead th { z-index: 3; }
.emp-table thead th.emp-name { z-index: 4; background: #fdf3e9; }
.emp-table tr.row-left td.emp-name { background: #fbf7f3; }
/* 底部常驻条出现时，给页面留出位置，免得挡住最后一行 */
body.has-empbar { padding-bottom: 54px; }
table { width: 100%; border-collapse: collapse; font-size: 12.8px; }
th, td { border-bottom: 1px solid rgba(180, 140, 110, .14); padding: 8px 10px; text-align: left; white-space: nowrap; }
th {
    background: rgba(180, 112, 60, .08); color: #8A4C22;
    font-weight: 600; font-size: 12px; letter-spacing: .2px;
    position: sticky; top: 0; z-index: 1;
    backdrop-filter: blur(8px);
}
tbody tr { transition: background .18s; }
tbody tr:hover { background: rgba(255, 255, 255, .55); }
tbody tr:last-child td { border-bottom: none; }

/* ===== 状态与提示 ===== */
.pass { color: #4E8A63; font-weight: 600; }
.fail { color: #B4462F; font-weight: 600; }
.muted { color: var(--muted); font-size: 12px; }
.small, .small * { font-size: 12px; }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 5px; }
.flash {
    background: rgba(180, 70, 47, .09); color: #9C3A24;
    border: 1px solid rgba(180, 70, 47, .16);
    padding: 9px 13px; border-radius: 12px; margin-bottom: 12px; font-size: 13px;
}
.note {
    background: rgba(255, 255, 255, .52); color: #6B5342;
    border-left: 3px solid var(--copper-lt);
    padding: 11px 13px; border-radius: 12px; font-size: 12.8px;
    margin-bottom: 12px; line-height: 1.7;
}
.warn-note {
    background: rgba(232, 169, 107, .16); border-left-color: #D99A4E; color: #8A5A1E;
}
pre.report {
    background: rgba(255, 255, 255, .62);
    border: 1px solid rgba(180, 140, 110, .18);
    border-radius: 14px; padding: 14px;
    white-space: pre-wrap; word-break: break-word;
    font-size: 12.5px; line-height: 1.75; color: #43342A;
    max-height: 420px; overflow: auto; margin: 0;
    font-family: "PingFang SC", "Microsoft YaHei", ui-monospace, monospace;
}
pre.report::-webkit-scrollbar { width: 8px; height: 8px; }
pre.report::-webkit-scrollbar-thumb { background: rgba(180, 112, 60, .22); border-radius: 99px; }
.badge {
    display: inline-block; background: rgba(180, 112, 60, .12); color: #8A4C22;
    border: 1px solid rgba(180, 112, 60, .16);
    border-radius: 999px; padding: 2px 9px; font-size: 11.5px;
}

/* ===== 统计卡 ===== */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat {
    background: linear-gradient(160deg, rgba(255, 255, 255, .86), rgba(255, 248, 242, .55));
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 16px; padding: 13px 15px;
    box-shadow: 0 14px 28px -24px rgba(120, 60, 25, .85), inset 0 1px 0 #fff;
    transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.stat:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -24px rgba(120, 60, 25, .9), inset 0 1px 0 #fff; }
.stat .num {
    font-size: 21px; font-weight: 700; color: #7C3F1B; letter-spacing: -.3px;
    font-variant-numeric: tabular-nums;
}
.stat .lbl { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* ===== 登录页 ===== */
.login-wrap {
    max-width: 380px; margin: 8vh auto;
    padding: 26px 24px;
    border-radius: 24px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(26px) saturate(1.4);
    backdrop-filter: blur(26px) saturate(1.4);
    border: 1px solid var(--glass-bd);
    box-shadow: 0 40px 80px -50px rgba(70, 38, 18, .8), inset 0 1px 0 #fff;
}
.login-wrap h1, .login-wrap h2 { font-size: 19px; margin: 0 0 4px; color: #3E2E22; }

/* ===== 通用滚动条 ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(180, 112, 60, .2); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(180, 112, 60, .35); background-clip: content-box; }

/* ===== 平板 / 手机：左侧菜单转为顶部横向条 ===== */
@media (max-width: 880px) {
    .app { flex-direction: column; gap: 10px; padding: 10px; }
    .sidebar {
        width: 100%; flex: none; position: static; max-height: none;
        display: flex; gap: 3px; overflow-x: auto; padding: 6px;
        border-radius: 18px;
    }
    .sidebar .side-title, .sidebar .side-foot { display: none; }
    .sidebar a { height: 38px; padding: 0 12px; margin: 0; font-size: 12.5px; }
    .sidebar .pill { display: none; }
    .main { padding: 2px 2px 30px; }
    .container { padding: 0; }
    .topbar { margin: 10px 10px 0; padding: 9px 12px; border-radius: 16px; }
    .topbar h1 { font-size: 15px; }
}
@media (max-width: 640px) {
    .card { padding: 14px; border-radius: 18px; }
    .topbar { padding: 9px 12px; }
    .topbar h1 { font-size: 14.5px; }
    .topbar .who { font-size: 11.5px; }
    .grid2 { grid-template-columns: 1fr; gap: 8px; }
    .row { gap: 8px; }
    input, select, textarea, button, .btn { font-size: 16px; }  /* 防 iOS 聚焦缩放 */
    button, .btn { padding: 11px 16px; }
    .tab { padding: 8px 12px; font-size: 13px; }
    .page-head h2 { font-size: 17px; }
    #ocr_preview img { max-width: 45% !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ===== 员工端：紧凑录入卡（标签在左、输入在右，手机一屏可看全） ===== */
.ez-card { padding: 12px 12px 10px; }
.ez-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ez-head h2 { margin: 0; font-size: 14px; border: none; padding: 0; }
.ez-head .hint { font-size: 11.5px; }
.ez { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.ez-r { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 12px; color: #7B6555; }
.ez-r > span { flex: 0 0 46px; text-align: right; white-space: nowrap; }
.ez-r input, .ez-r select {
    flex: 1 1 auto; min-width: 0; width: 100%; height: 32px;
    padding: 4px 8px; font-size: 13.5px; line-height: 1.2; margin: 0;
    border: 1px solid rgba(180, 140, 110, .3); border-radius: 9px;
    background: rgba(255, 255, 255, .8); color: #3B2C21;
    box-shadow: none;
}
.ez-r input:focus, .ez-r select:focus {
    border-color: rgba(200, 110, 45, .55);
    box-shadow: 0 0 0 3px rgba(216, 128, 58, .14);
    outline: none;
}
.ez-wide { grid-column: 1 / -1; }
/* 必填项：标签后红色星号；缺填时输入框标红 */
.ez-r.req > span::after { content: '*'; color: #c0392b; margin-left: 1px; font-weight: 700; }
.req-star { color: #c0392b; font-weight: 700; }
.req-tip { font-size: 11px; }
.ez-r.bad > span { color: #c0392b; }
.ez-r.bad input, .ez-r.bad select {
    border-color: #c0392b;
    background: rgba(255, 236, 233, .75);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}
.ez-r.bad input:focus, .ez-r.bad select:focus { border-color: #c0392b; }
.ez-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ez-actions button { padding: 8px 16px; }
.ez-flash { animation: ezFlash 1.3s ease; }
@keyframes ezFlash {
    0%   { box-shadow: 0 0 0 0 rgba(216, 128, 58, .5), 0 18px 40px -30px rgba(92, 52, 26, .5); }
    60%  { box-shadow: 0 0 0 8px rgba(216, 128, 58, .14), 0 18px 40px -30px rgba(92, 52, 26, .5); }
    100% { box-shadow: 0 18px 40px -30px rgba(92, 52, 26, .5); }
}
@media (max-width: 640px) {
    .ez { gap: 5px 8px; }
    .ez-card { padding: 10px; }
    .ez-r > span { flex: 0 0 40px; font-size: 11.5px; }
    .ez-r input, .ez-r select { height: 33px; font-size: 16px; padding: 3px 6px; }
    .ez-actions button { padding: 9px 14px; }
}
@media (max-width: 360px) {
    .ez { grid-template-columns: 1fr; }
}

/* ---------- 员工管理：在职 / 离职 分栏 ---------- */
.emp-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:2px 0 8px}
.emp-tab{padding:5px 13px;border-radius:99px;font-size:12px;line-height:1.6;cursor:pointer;
  color:var(--ink-2,#6b5a4c);background:rgba(255,255,255,.6);border:1px solid rgba(180,140,110,.25);
  transition:background .2s,color .2s,border-color .2s}
.emp-tab b{font-weight:700;font-variant-numeric:tabular-nums}
.emp-tab.on{background:linear-gradient(135deg,#E8A96B,#B4703C);color:#fff;border-color:transparent}
.tag{display:inline-block;padding:1px 8px;border-radius:99px;font-size:11px;line-height:1.7;white-space:nowrap}
.tag-green{background:rgba(34,150,90,.12);color:#177a4a;border:1px solid rgba(34,150,90,.25)}
.tag-gray{background:rgba(120,120,120,.12);color:#6b6b6b;border:1px solid rgba(120,120,120,.22)}
tr.row-left td{background:rgba(140,140,140,.055)}
tr.row-left td:first-child{color:#8a8a8a}

/* ================= 性能模式（低端办公机自动/手动开启） =================
   关闭：背景流动、面板入场、闪烁、悬停位移与重阴影、亮度滤镜
   保留：静态玻璃（backdrop-filter）、圆角描边、基础颜色过渡
   ==================================================================== */
html.perf-lite .bg i{animation:none !important}
html.perf-lite .panel.active{animation:none !important}
html.perf-lite .ez-flash{animation:none !important}
html.perf-lite *{
  animation:none !important;
  transition-property:color,background-color,border-color,opacity !important;
  transition-duration:.12s !important;
  text-shadow:none !important;
}
html.perf-lite .topbar a:hover,
html.perf-lite button:hover,
html.perf-lite .btn:hover,
html.perf-lite .stat:hover,
html.perf-lite .emp-tab:hover{transform:none !important;filter:none !important}
html.perf-lite .card:hover{
  box-shadow:0 16px 30px -30px rgba(92,52,26,.45), inset 0 1px 0 rgba(255,255,255,.92) !important
}
html.perf-lite .card:hover::before{opacity:.55 !important}

/* ================= 纯净模式（body.plain） =================
   个别页面（如台账管理）彻底关掉背景光斑与毛玻璃，换不透明实底，
   用来规避个别显卡/浏览器上 backdrop-filter 的闪烁问题。
   用法：模板顶部 {% set body_class = 'plain' %}。
   ======================================================== */
body.plain{background:#E7CBB6}
/* 底色：恢复与其他页面一致的暖陶渐变。
   闪烁元凶是 .bg 里 4 个 blur(72px) 光斑 + 毛玻璃，不是渐变本身；
   body::before 这层兜底渐变是纯静态的（fixed、无模糊、无动画），
   单独用它不会引发合成闪烁，颜色却和别的页面完全一致。 */
body.plain .bg{display:none !important}
body.plain .card,
body.plain .topbar,
body.plain .sidebar{
  background:#fff;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.plain .card::before{display:none !important}
body.plain .topbar,
body.plain .sidebar,
body.plain .card{border-color:rgba(160,120,90,.25)}
body.plain .sidebar a{background:transparent}
body.plain .sidebar a:hover{background:#f3e7dc}
body.plain .sidebar a.active{background:linear-gradient(135deg,#E8A96B,#B4703C);color:#fff}

/* ---------- 纯净模式表格：消除"多层色块/拖影/闪烁" ----------
   根因：表头 sticky + 半透明底 + backdrop-filter:blur(8px)——行滚过时
   每帧重投影，低端机留下色带残影；表格各层全是半透明叠加。
   纯净模式下全部换成不透明实底，彻底去掉表格里的模糊层。 */
body.plain .table-wrap{background:#fff}
body.plain table th{
  background:#f6ede3;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
body.plain tbody tr:hover{background:#faf3ea}
body.plain tbody tr{transition:none}
/* 占位行同样不给任何透明层，避免和真实行混出不同底色 */
body.plain tr.vspacer td{background:transparent !important}