.att-root {

  /* 清新蓝绿体系：柔和雾霾蓝为主，薄荷绿与浅青为辅，暖橙作强调 */
  --primary:#4a8ac0; --primary-d:#3a76a8;
  --navy:#2f6b96; --navy-2:#3b83b8;
  --bg:#fff; --card:#fff; --line:#e4ecf3;
  --text:#1e2c3a; --muted:#7f92a6;
  --green:#2f9e5f; --red:#e2703a; --mint:#3fb8a8;
  --r:14px;
  --safe: env(safe-area-inset-bottom, 0px);
}
.att-root * {
box-sizing:border-box; -webkit-tap-highlight-color:transparent;
}
.att-root, .att-root {
margin:0;padding:0;
}
.att-root {

  /* 纯白到极浅灰蓝的柔和渐变 + 极淡点阵纸纹（教程图视觉语言） */
  background:
    radial-gradient(circle at 1px 1px, rgba(74,138,192,.055) 1px, transparent 0) 0 0/14px 14px,
    linear-gradient(180deg,#ffffff 0%,#f6fafd 48%,#eaf2f8 100%);
  background-attachment:fixed;
  min-height:100vh;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  font-size:15px; line-height:1.4; -webkit-text-size-adjust:100%;
  padding-bottom:calc(62px + var(--safe));
}
.att-root .wrap {
max-width:720px; margin:0 auto; padding:0 10px;
}
.att-root button, .att-root input, .att-root select, .att-root textarea {
font-family:inherit; font-size:15px;
}
.att-root button {
border:1px solid var(--line); background:#fff; color:var(--text); border-radius:9px; cursor:pointer; touch-action:manipulation;
}
.att-root button:active {
transform:scale(.96);
}
.att-root input, .att-root select {
border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--text); padding:6px 8px;
}
.att-root input:focus, .att-root select:focus, .att-root textarea:focus {
outline:none; border-color:var(--primary);
}
/* 顶栏 */
.att-root .top {
position:sticky; top:0; z-index:20; padding:8px 0 6px;
background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
.att-root .top .row {
display:flex; align-items:center; gap:8px; padding:0 10px;
}
.att-root .ttl {
font-size:16px; font-weight:700; display:flex; align-items:center; gap:6px;
}
.att-root .ttl i {
width:8px;height:8px;border-radius:50%;display:block;
background:linear-gradient(135deg,var(--mint),var(--primary));
}
.att-root .grow {
flex:1;
}
.att-root .mini {
height:32px; padding:0 10px; font-size:13px; border-radius:8px; display:inline-flex; align-items:center; gap:4px;
}
.att-root .mini.primary {
background:linear-gradient(135deg,var(--navy-2),var(--navy)); border-color:var(--navy); color:#fff;
box-shadow:0 1px 5px rgba(47,107,150,.22);
}
.att-root .mini.primary:active {
background:var(--primary-d);
}
.att-root .mini.danger {
color:#c2571f; border-color:#f6cbaa; background:#fdf5ef;
}
/* 小圆角胶囊按钮（名单页「＋ 添加」用，不撑满整行） */
.att-root .mini.pill {
border-radius:16px; font-size:13.5px; font-weight:600; letter-spacing:.3px;
flex:none !important; min-width:0 !important; padding:0 16px;
}
/* 日期条 */
.att-root .datebar {
display:flex; gap:5px; overflow-x:auto; padding:7px 10px 3px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
/* ⚠ 必须 position:relative：否则子元素的 offsetLeft 以更外层的定位祖先为参照，
   居中滚动位置会多算日期栏自身的页面偏移（表现为「今天」没真正居中）。 */
position:relative;
}
.att-root .datebar::-webkit-scrollbar {
display:none;
}
.att-root .db {
flex:none; width:42px; padding:4px 0; border-radius:11px; border:1px solid var(--line); background:#fff; text-align:center; line-height:1.2; position:relative;
box-shadow:0 1px 2px rgba(47,107,150,.05);
}
.att-root .db .n {
font-size:15px; font-weight:600;
}
.att-root .db .w {
font-size:9px; color:var(--muted);
}
.att-root .db.we {
background:#f2f7fb; color:var(--muted); border-color:#eaf1f7;
}
.att-root .db.on {
background:linear-gradient(135deg,var(--navy-2),var(--navy)); border-color:var(--navy); color:#fff;
box-shadow:0 2px 7px rgba(47,107,150,.28);
}
.att-root .db.on .w {
color:rgba(255,255,255,.82);
}
.att-root .db .dot {
position:absolute; top:2px; right:4px; width:5px; height:5px; border-radius:50%; background:#45c07d;
}
.att-root .db.on .dot {
background:#fff;
}
/* 块 */
.att-root .sec {
margin:10px 0;
}
.att-root .panel {
background:var(--card); border-radius:var(--r); overflow:hidden;
border:1px solid var(--line); box-shadow:0 2px 9px rgba(47,107,150,.07);
}
.att-root .panel-hd {
padding:10px 12px; font-weight:700; font-size:14px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;
background:linear-gradient(180deg,#fbfdff,#f5f9fc);
}
/* 模块标题左侧薄荷色小竖条 */
.att-root .panel-hd::before {
content:''; width:3px; height:14px; border-radius:2px; flex:none;
background:linear-gradient(180deg,var(--mint),var(--primary));
}
.att-root .panel-bd {
padding:10px 12px;
}
.att-root .muted {
color:var(--muted); font-size:13px;
}
/* 工具条 */
.att-root .tools {
display:flex; gap:6px; padding:8px 9px; border-bottom:1px solid var(--line);
}
.att-root .tools button {
flex:1; height:33px; font-size:13px; border-radius:8px;
}
.att-root .tools button.primary {
background:linear-gradient(135deg,var(--navy-2),var(--navy)); border-color:var(--navy); color:#fff;
}
.att-root .tools button.primary:active {
background:var(--primary-d);
}
.att-root .tools button.danger {
color:var(--red); border-color:#fca5a5;
}
/* 步进切换 */
.att-root .stepbar {
display:flex; align-items:center; gap:6px; padding:7px 9px; border-bottom:1px solid var(--line); background:#f6fafd;
}
.att-root .stepbar.plain {
padding:0; border:none; background:none;
}
.att-root .stepbar .st-t {
font-size:12px; color:var(--muted); flex:none;
}
.att-root .stepbar button {
flex:none; height:28px; padding:0 13px; font-size:12.5px; border-radius:7px;
}
.att-root .stepbar button.on {
background:linear-gradient(135deg,var(--navy-2),var(--navy)); border-color:var(--navy); color:#fff; font-weight:600;
}
/* 概览 */
.att-root .chips {
display:grid; grid-template-columns:repeat(4,1fr); gap:7px;
}
.att-root .chip {
background:var(--card); border-radius:12px; padding:8px 4px; text-align:center;
border:1px solid var(--line); box-shadow:0 1px 3px rgba(47,107,150,.06);
}
.att-root .chip .k {
font-size:11px; color:var(--muted);
}
.att-root .chip .v {
font-size:17px; font-weight:700; margin-top:1px;
}
/* 四色语义：在岗蓝、出勤绿、缺勤橙、加班青（两个页面的同类指标共用） */
.att-root .chip[data-k="在岗"], .att-root .chip[data-k="出勤合计"] {
background:#e9f2fb; border-color:#d0e4f4; color:var(--navy);
}
.att-root .chip[data-k="出勤"], .att-root .chip[data-k="全员出勤率"] {
background:#e6f6ec; border-color:#c9ecd6; color:#1f7a45;
}
.att-root .chip[data-k="缺勤"], .att-root .chip[data-k="缺勤合计"] {
background:#fdf0e7; border-color:#f8dcc6; color:#b4560f;
}
.att-root .chip[data-k="加班"], .att-root .chip[data-k="加班合计"] {
background:#e4f7f4; border-color:#c7eae6; color:#137a6e;
}
.att-root .chip[data-k] .k {
color:inherit; opacity:.72;
}
/* 员工卡：间隔底色 —— 奇数行浅绿、偶数行浅蓝，各带左侧色条，相邻一眼可分 */
.att-root .emp {
border-radius:14px; box-shadow:0 1px 4px rgba(47,107,150,.07); padding:8px 10px 9px; margin-bottom:8px;
border:1px solid var(--line); border-left:4px solid transparent;
}
/* 奇数行：浅绿 */
.att-root .emp:not(.alt) {
background:#e8f7ee !important; border-color:#c9ecd8; border-left-color:#57c48c;
}
/* 偶数行：浅蓝 */
.att-root .emp.alt {
background:#e7f1fb !important; border-color:#cbdff3; border-left-color:#5b9fd4;
}
/* 槽位与备注在彩色底上保持白底，输入区始终清晰可辨 */
.att-root .emp .slot {
background:#fff;
}
.att-root .emp .note input {
background:#fff; border-color:#e0eaf2;
}
.att-root .emp .hd {
display:flex; align-items:baseline; gap:6px; margin-bottom:5px;
}
.att-root .emp .nm {
font-weight:700; font-size:15px;
}
.att-root .emp .no {
font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.att-root .emp .sum {
margin-left:auto; font-size:11.5px; font-weight:600; white-space:nowrap; flex:none;
}
.att-root .slots {
display:flex; gap:6px;
}
.att-root .slot {
flex:1; min-width:0; background:#fff; border:1px solid var(--line); border-radius:11px; padding:5px 3px 6px; text-align:center;
box-shadow:0 1px 2px rgba(47,107,150,.04);
}
.att-root .slot .lb {
font-size:11px; color:var(--muted); line-height:1.2; margin-bottom:3px;
}
.att-root .slot .lb b {
color:var(--text); font-weight:600;
}
/* 步进控件：整组在槽位内水平居中，宽屏时不贴左、窄屏时不挤爆 */
.att-root .stp {
display:flex; align-items:center; justify-content:center; gap:2px;
}
.att-root .stp button {
width:34px; height:34px; font-size:19px; line-height:1; border-radius:10px; padding:0; font-weight:700; flex:none;
border-color:#dce8f1; background:linear-gradient(180deg,#fff,#f5f9fc); color:var(--primary);
}
.att-root .stp input {

  /* 时间框收窄：基准 52px，空间不足时才压缩，且不低于 min-width，避免被挤成一条缝 */
  flex:0 1 52px; width:52px; min-width:30px; max-width:52px; height:34px;
  text-align:center; font-weight:700; font-size:14px;
  padding:0 2px; border-radius:8px; background:#fff; color:var(--muted);
  -moz-appearance:textfield; pointer-events:none;
}
/* 窄屏：整体收一档，保证「− 时间 +」一组能完整放进一个槽位 */
@media (max-width:380px) {
.att-root .stp button { width:30px; height:30px; font-size:17px; }
.att-root .stp input { width:44px; flex-basis:44px; max-width:44px; min-width:28px; height:30px; font-size:13.5px; }
}
@media (max-width:340px) {
.att-root .slots { gap:4px; }
.att-root .slot { padding:5px 1px 6px; }
.att-root .stp button { width:28px; height:28px; font-size:16px; }
.att-root .stp input { width:40px; flex-basis:40px; max-width:40px; min-width:24px; height:28px; font-size:13px; }
}
.att-root .stp input::-webkit-outer-spin-button, .att-root .stp input::-webkit-inner-spin-button {
-webkit-appearance:none; margin:0;
}
.att-root .stp input.pos {
color:#1f7a45; border-color:#a9e0c1; background:#eefaf3;
}
.att-root .stp input.full {
color:var(--navy); border-color:#a8cdea; background:#edf5fc;
}
.att-root .quick {
display:flex; gap:5px; margin-top:6px;
}
.att-root .quick button {
flex:1; height:31px; font-size:12.5px; border-radius:9px;
}
.att-root .q-on {
background:linear-gradient(135deg,var(--navy-2),var(--navy)); border-color:var(--navy); color:#fff;
box-shadow:0 1px 4px rgba(47,107,150,.22);
}
.att-root .q-abs {
color:#c2571f; border-color:#f6cbaa; background:#fdf5ef;
}
.att-root .q-rest {
color:var(--muted);
}
/* 备注 */
.att-root .note {
display:flex; align-items:center; gap:5px; margin-top:6px;
}
.att-root .note .tag {
font-size:11px; color:var(--muted); flex:none;
}
.att-root .note input {
flex:1; min-width:0; height:30px; font-size:13px; padding:0 8px; background:#fff; border-color:#e0eaf2; border-radius:9px;
}
.att-root .note .x {
flex:none; width:28px; height:28px; padding:0; color:#9ca3af; font-size:16px; line-height:1; border-radius:7px;
}
/* 汇总 */
.att-root .sumrow {
display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line);
}
.att-root .sumrow .nm {
font-weight:600; font-size:14.5px;
}
.att-root .sumrow .no {
font-size:11px; color:var(--muted);
}
.att-root .sumrow .nums {
margin-left:auto; display:flex; gap:10px; font-size:12.5px; text-align:right;
}
.att-root .sumrow .nums div {
min-width:44px;
}
.att-root .sumrow .nums .k {
font-size:10px; color:var(--muted); display:block;
}
.att-root .det {
padding:6px 12px 10px; background:#f7fafd;
}
.att-root .det-row {
display:flex; align-items:center; gap:6px; padding:5px 0; border-bottom:1px dashed var(--line); font-size:13px;
}
.att-root .det-row .dt {
width:88px; flex:none; color:var(--muted); font-size:12px;
}
.att-root .det-row .v {
width:44px; text-align:right; font-weight:600; flex:none;
}
.att-root .det-row .st {
width:52px; text-align:right; font-size:12px; flex:none;
}
.att-root .det-note {
font-size:12px; color:#4a6577; background:#f1f7fb; border:1px solid #e2edf5; border-radius:8px; padding:4px 8px; margin:3px 0 5px; word-break:break-all;
}
/* 名单 */
.att-root .rost {
display:flex; align-items:center; gap:6px; padding:9px 12px; border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.att-root .rost .nm {
font-weight:600; font-size:14.5px;
}
.att-root .rost .no {
font-size:11px; color:var(--muted);
}
.att-root .rost .del {
margin-left:auto; color:#9ca3af; border:none; background:none; font-size:20px; padding:0 6px;
}
.att-root .rost .del:active {
color:var(--red);
}
.att-root .rost.left .nm {
color:var(--muted); text-decoration:line-through;
}
.att-root .lvt {
display:inline-block; font-size:10.5px; font-weight:600; color:#b45309; background:#fef3c7;
     border-radius:5px; padding:1px 5px; vertical-align:1px; text-decoration:none;
}
.att-root .lvedit {
width:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:2px;
        background:#fdf6ee; border:1px solid #f7e6d4; border-radius:11px; padding:7px 8px;
}
.att-root .lvedit input[type=date] {
flex:1; min-width:130px; height:32px; font-size:13px;
}
.att-root .lvedit .lvtip {
width:100%; font-size:11px; color:#92400e; line-height:1.5;
}
/* 名单：起始日期可点击修改 */
.att-root .rost .jn {
border:none; background:none; padding:0; margin:0; font:inherit; color:var(--primary);
     text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px;
     cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.att-root .rost .jn:active {
opacity:.6;
}
.att-root .joinedit {
width:100%; display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:2px;
        background:#eef6fd; border:1px solid #d3e6f8; border-radius:11px; padding:7px 8px;
}
.att-root .joinedit input[type=date] {
flex:1; min-width:130px; height:32px; font-size:13px;
}
.att-root .joinedit .lvtip {
width:100%; font-size:11px; color:#1e40af; line-height:1.5;
}
.att-root .leavenote {
padding:6px 8px; margin-bottom:7px; border-radius:10px; background:#fdf6ee; border:1px solid #f7e6d4;
           color:#9a5b12; font-size:12px; text-align:center;
}
.att-root .sumrow.left .nm {
color:var(--muted);
}
/* 底导航 */
.att-root .tabbar {
position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; padding-bottom:var(--safe);
background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border-top:1px solid var(--line); box-shadow:0 -2px 12px rgba(47,107,150,.08);
}
.att-root .tabbar button {
flex:1; border:none; background:none; border-radius:0; height:54px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--muted);
position:relative;
}
.att-root .tabbar button .ic {
font-size:18px; line-height:1;
}
.att-root .tabbar button.on {
color:var(--navy); font-weight:700;
}
/* 选中项下方一条蓝色下划线（教程图同款） */
.att-root .tabbar button.on::after {
content:''; position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
width:22px; height:2.5px; border-radius:2px; background:var(--primary);
}
.att-root .tabbar button:active {
background:#f2f7fb;
}
/* 其他 */
.att-root .toast {
position:fixed; left:50%; bottom:calc(76px + var(--safe)); transform:translateX(-50%) translateY(10px);
  background:linear-gradient(135deg,#33556f,#243d52); color:#fff; padding:8px 16px; border-radius:18px; font-size:13px; opacity:0; transition:.22s; pointer-events:none; z-index:60; white-space:nowrap;
  box-shadow:0 4px 14px rgba(36,61,82,.28);
}
.att-root .toast.show {
opacity:1; transform:translateX(-50%) translateY(0);
}
.att-root .empty {
padding:30px 16px; text-align:center; color:var(--muted); font-size:14px;
}
.att-root .fld {
display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line);
}
.att-root .fld:last-child {
border-bottom:none;
}
.att-root .fld .k {
font-size:14px;
}
.att-root .fld .k small {
display:block; color:var(--muted); font-size:11px;
}
.att-root .fld input[type=number] {
width:72px; text-align:center;
}
.att-root .hide {
display:none !important;
}
.att-root .btns {
display:flex; gap:8px; flex-wrap:wrap;
}
.att-root .btns button {
flex:1; min-width:92px; height:38px; font-size:14px;
}
/* ==================================================================
 *  嵌入财务系统后新增的样式
 * ------------------------------------------------------------------
 *  上面全部选择器都带 .att-root 前缀，只在考勤页容器内生效，
 *  不会污染财务系统其它页面（.panel / .muted / .empty 等类名有重名）。
 *  下面「导入弹窗」的样式例外：它渲染在全局 modal 里，不在 .att-root 内。
 * ================================================================== */

/* 员工来源小标签 */
.att-root .src{
  display:inline-block; font-size:10.5px; font-weight:600; border-radius:5px;
  padding:1px 5px; vertical-align:1px; margin-left:3px;
}
.att-root .src.sys{color:#2f6b96; background:#e4f0fa;}
.att-root .src.man{color:#a85c10; background:#fdf1e4;}

/* 从员工信息表导入 —— 弹窗内容（渲染在全局 modal 内，不加 .att-root） */
.imp{padding:2px 0}
.imp-bar{display:flex; align-items:center; gap:8px; padding:0 2px 8px; border-bottom:1px solid #e5e7eb; margin-bottom:8px;}
.imp-bar .grow{flex:1}
.imp-list{max-height:340px; overflow-y:auto; border:1px solid #e5e7eb; border-radius:8px;}
.imp-row{
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-bottom:1px solid #f1f5f9; cursor:pointer; font-size:14px;
}
.imp-row:last-child{border-bottom:none}
.imp-row:hover{background:#f8fafc}
.imp-row.done{opacity:.55}
.imp-row .imp-nm{font-weight:600; min-width:64px}
.imp-row .imp-no{color:#6b7280; font-size:12.5px; min-width:88px}
.imp-row .imp-dp{color:#6b7280; font-size:12.5px; flex:1}
.imp-row .imp-done{font-size:11px; color:#16a34a; background:#dcfce7; border-radius:5px; padding:1px 6px}

/* 通用横向行（名单页/设置页用；原考勤表只在 .top .row 下定义） */
.att-root .row{display:flex; align-items:center; gap:8px;}

/* 日期条上「已锁定（超出可改范围）」的日期 */
.att-root .db.lk{opacity:.45}
.att-root .db.lk .n{color:var(--muted)}