:root {
  /* ---------- 第二十二轮：按参考稿重做的一套令牌 ----------
     参考稿的三个关键特征，全部落在这几个变量上：
       ①「近白 + 极淡色晕」的底 —— --bg 抬亮，色晕交给 html::before 那层固定渐变；
       ②「纯白卡片浮在底上」—— 卡片靠 1px 发丝描边 + 多层柔投影分层，不靠重阴影；
       ③「胶囊 + 近黑强对比」—— --radius 放大到 18px，按钮/标签/分段控件一律走胶囊，
          再引入一个近黑的 --strong 作为「当前选中」这类需要强对比的地方。
     ⚠️ 变量名与语义一个没改（--card 还是卡片底色、--brand 还是主色…），
        所以全站引用它们的地方会整体换肤，不需要逐个去改。 */
  --bg: #f7f9fc;
  --card: #ffffff;
  --ink: #0f1729;
  --ink-2: #5a6b86;
  --ink-3: #98a4b8;
  --line: #eaeff7;
  --line-2: #dfe6f1;            /* 比 --line 深一档：输入框描边、需要看清边界的地方 */
  --brand: #2f6bf3;
  --brand-d: #1b4fd6;
  --brand-l: #e9f0ff;
  --ok: #12a06a;
  --ok-l: #e4f7ee;
  --warn: #d98220;
  --warn-l: #fdf2e2;
  --danger: #e0453f;
  --danger-l: #fdecea;
  /* 参考稿里的几种柔和点缀色（卡片底 / 图标块 / 状态底） */
  --tint-mint: #e6f7ef;
  --tint-lav: #ecedfd;
  --tint-sky: #e8f0ff;
  --tint-pink: #fdeaf1;
  --strong: #101828;            /* 近黑「强对比」色：侧栏选中胶囊等 */
  --radius: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 22px rgba(16, 24, 40, .06);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, .06), 0 22px 50px rgba(16, 24, 40, .12);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* 「薄荷 → 白 → 薰衣草」的极淡色晕（参考稿的底子）。
   固定铺满视口、不随内容滚动、pointer-events:none —— 纯装饰层，
   卡片和文字全部浮在它上面，不影响任何交互；不透明度压得很低，
   所以深色文字压上去的对比度不受影响（户外强光下也读得清）。
   宽屏用 vmax 让它随屏幕放大、读作「两角的柔光」；
   窄屏（＜768px）另给一套 px 尺寸 —— 手机上视口窄，同样大小的辐射会整片糊满、
   整页偏紫，改用小半径的角落光晕，中间才留得住白。 */
html::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52vmax 34vmax at 2% -9%, rgba(150, 222, 189, .30), transparent 64%),
    radial-gradient(48vmax 32vmax at 100% -7%, rgba(178, 186, 250, .26), transparent 62%),
    radial-gradient(54vmax 40vmax at 96% 108%, rgba(196, 208, 252, .22), transparent 64%),
    linear-gradient(180deg, #fbfdfe 0%, var(--bg) 52%, #f9fafd 100%);
}
@media (max-width: 767px) {
  html::before {
    background:
      radial-gradient(300px 220px at -6% -5%, rgba(150, 222, 189, .32), transparent 66%),
      radial-gradient(320px 240px at 106% -7%, rgba(178, 186, 250, .28), transparent 64%),
      radial-gradient(360px 300px at 104% 104%, rgba(196, 208, 252, .24), transparent 66%),
      linear-gradient(180deg, #fbfdfe 0%, var(--bg) 52%, #f9fafd 100%);
  }
}

body { overscroll-behavior-y: none; background: transparent; }

#app {
  max-width: 620px;
  margin: 0 auto;
  min-height: 100vh;
  background: transparent;
  position: relative;
}

/* ---------- 登录 ----------
   第二十二轮：登录页跟着全站一起转浅色 —— 不再单独铺一层深蓝渐变，
   直接复用 html::before 那层色晕（浅色卡浮在色晕上，和登录后的界面同一套语言）。
   登录页自己的那层色晕压得比内页稍浓一点，让这唯一一张卡有存在感。 */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 22px 60px;
  background: transparent;
}
.login-wrap::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 330px at 18% 4%, rgba(150, 222, 189, .55), transparent 66%),
    radial-gradient(600px 360px at 88% 98%, rgba(178, 186, 250, .52), transparent 64%),
    radial-gradient(520px 320px at 104% -6%, rgba(196, 208, 252, .42), transparent 62%);
}
.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 28px 24px 24px;
  box-shadow: var(--shadow-lg);
}
.login-brand { text-align: center; margin-bottom: 22px; }
/* 登录页公司 logo（原来是 ⚡ 占位块，现换成公司图形标；图本身带透明底，不需要白框） */
.login-logo {
  display: block; height: 34px; width: auto;
  margin: 0 auto 14px; max-width: 78%;
  object-fit: contain; user-select: none; -webkit-user-drag: none;
}
@media (max-width: 374px) { .login-logo { height: 30px; } }
.login-brand h1 { font-size: 21px; margin: 0 0 4px; letter-spacing: .5px; }
.login-brand p { margin: 0; color: var(--ink-3); font-size: 12.5px; }
.login-tip {
  margin-top: 16px; padding: 11px 13px; border-radius: 12px;
  background: var(--brand-l); color: var(--brand-d); font-size: 12.5px; line-height: 1.6;
}
/* 保存密码 / 下次自动登录 */
.login-opts {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: -1px 0 14px;
}
.lg-chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
  -webkit-user-select: none; user-select: none;
}
.lg-chk input {
  width: 17px; height: 17px; margin: 0; flex: none;
  accent-color: var(--brand); cursor: pointer;
}
.login-saved {
  display: flex; align-items: center; gap: 6px;
  margin: -4px 0 12px; font-size: 12.5px; color: var(--ink-3);
}
.login-saved:empty { display: none; }
.login-saved b { color: var(--ink-2); font-weight: 600; }
.login-saved a { color: var(--brand); text-decoration: none; font-weight: 600; }

/* ---------- 表单 ---------- */
.field { margin-bottom: 13px; }
.field > label {
  display: block; font-size: 12.5px; color: var(--ink-2);
  margin-bottom: 6px; font-weight: 500;
}
.input, select.input, textarea.input {
  width: 100%; border: 1px solid var(--line-2); background: #fbfcfe;
  border-radius: 12px; padding: 11px 13px; font-size: 15px; color: var(--ink);
  font-family: inherit; outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.input:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(47, 107, 243, .13); }
textarea.input { resize: vertical; min-height: 62px; }
.input::placeholder { color: #b3bccd; }
.input[readonly] { background: #f1f4f9; color: var(--ink-2); }

/* 按钮统一走胶囊形（参考稿的按钮/标签全是胶囊）。
   主按钮加一层同色柔影，让它从浅底上「浮」起来，而不是靠加深颜色区分。 */
.btn {
  border: 0; border-radius: 999px; padding: 11px 20px; font-size: 15px;
  font-family: inherit; font-weight: 600; cursor: pointer;
  background: var(--brand); color: #fff;
  box-shadow: 0 2px 8px rgba(47, 107, 243, .26);
  transition: opacity .15s, transform .05s, box-shadow .15s;
}
.btn:active { transform: scale(.985); box-shadow: 0 1px 4px rgba(47, 107, 243, .22); }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.btn.block { width: 100%; display: block; }
.btn.ghost { background: var(--brand-l); color: var(--brand-d); box-shadow: none; }
.btn.line { background: #fff; color: var(--ink-2); border: 1px solid var(--line-2); box-shadow: none; }
.btn.danger { background: var(--danger-l); color: var(--danger); box-shadow: none; }
.btn.sm { padding: 7px 14px; font-size: 13px; border-radius: 999px; }
.btn-row { display: flex; gap: 10px; margin-top: 18px; }
.btn-row .btn { flex: 1; }

/* ---------- 主框架 ---------- */
#mainView { min-height: 100vh; display: flex; flex-direction: column; }
#appHeader {
  position: sticky; top: 0; z-index: 30;
  /* 第二十二轮：从「深蓝渐变实心条」换成「浅色毛玻璃 + 发丝下边框」。
     参考稿的顶栏就是浅底深字（深字压在浅底上更沉静，也给下面的白卡留出干净起线）；
     整站唯一的强色点缀收成顶部那 3px 渐变条，不再用整条深色压住页面。 */
  background: rgba(252, 253, 255, .86);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line);
  color: var(--ink); padding: 14px 16px 13px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
#appHeader::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, #6fd8ae 0%, #2f6bf3 54%, #9aa2f5 100%);
  opacity: .9; pointer-events: none;
}
#appHeader .h-title { font-size: 16.5px; font-weight: 700; letter-spacing: -.1px; }
#appHeader .h-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
#appHeader .h-tag { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; letter-spacing: .2px; }
.h-user {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-2);
  background: #fff; border: 1px solid var(--line-2);
  padding: 4px 11px 4px 5px; border-radius: 999px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  white-space: nowrap;
}
.h-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(140deg, #2f6bf3, #7a5af8);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}

#viewHost { flex: 1; padding: 12px 12px 96px; }

#tabbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 620px; z-index: 40;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 22px rgba(16, 24, 40, .05);
  display: flex; gap: 4px;
  padding: 6px 8px calc(6px + var(--safe-b));
}
/* 每个页签自带底色：--tc 实色 / --tl 同色系浅底（由 TABS 注入）
   文字口径：加粗（未选中 600 / 选中 700）+ 放大（原来 10.5 起，现在 11.5 起）。
   页签名不许换行 —— 8 个页签名现在全是 2 个字（首页/记工/材料/报销/结算/报表/设置/我的），
   8 字宽的「基础配置」已改名「设置」，最宽也就 2 字（11.5px 下约 23px），
   所以窄屏的收紧规则现在只剩「图标别互相挤」的作用、不再有溢字风险。
   改字号前先按这个反推：每格可用 ≈ (视口 - 6 - 7) / 8。 */
#tabbar button {
  flex: 1; min-width: 0; border: 0; background: none; font-family: inherit;
  position: relative;                 /* 未读角标 .tab-dot 以此为定位基准 */
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 1px 4px; border-radius: 16px;
  color: var(--tc, var(--ink-3)); opacity: .64; font-size: 12px; cursor: pointer;
  transition: opacity .15s, background .15s, color .15s;
  white-space: nowrap;                /* 页签名不许换行（页签名一律 2 字，留此防止以后加长名） */
}
#tabbar button .ti {
  width: 34px; height: 23px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tl, #eef1f6);
  transition: background .15s, color .15s, transform .15s;
}
#tabbar button svg { width: 17px; height: 17px; }
#tabbar button .tn { font-weight: 600; letter-spacing: -.2px; }
#tabbar button.on { opacity: 1; background: var(--tl, #eef1f6); }
#tabbar button.on .ti { background: var(--tc, var(--brand)); color: #fff; transform: translateY(-1px); }
#tabbar button.on .tn { font-weight: 700; color: var(--tc, var(--brand-d)); }
/* 页签多了（报销 → 结算，共 8 个）在窄屏上要收紧，否则文字换行 / 图标互相挤 */
#tabbar.seven { gap: 2px; padding-left: 4px; padding-right: 4px; }
#tabbar.seven button { padding: 4px 0 3px; font-size: 11.5px; }
#tabbar.seven button .ti { width: 30px; height: 21px; border-radius: 7px; }
#tabbar.seven button svg { width: 15px; height: 15px; }
/* 8 个页签：窄屏靠 .eight 收字号，让图标和文字不互相挤。
   注：页签名已全部是 2 字（最宽的「基础配置」已改名「设置」），不再有溢字风险，
   这几档字号纯为观感而收窄。各档实测（2px 内边距）：10.5px → 41.1px，11px → 43.2px，11.5px → 45.2px */
#tabbar.eight { gap: 0; padding-left: 2px; padding-right: 2px; }
#tabbar.eight button { padding: 4px 1px 3px; font-size: 10.5px; }
#tabbar.eight button .ti { width: 27px; height: 20px; border-radius: 6px; }
#tabbar.eight button svg { width: 14px; height: 14px; }
/* 390px 起每格 ≥48px，可以放到 11.5px 且不顶边 */
@media (min-width: 390px) { #tabbar.eight button { font-size: 11.5px; } }
/* 超窄机（≤340px，每格 ~40px）再收 0.5px，让 8 格挤得下图标 */
@media (max-width: 340px) { #tabbar.eight button { font-size: 10px; } }

/* ---------- 卡片 / 列表 ----------
   第二十二轮：卡片一律「1px 发丝描边 + 多层柔投影 + 18px 圆角」——
   参考稿里白卡是浮在色晕底上的，靠描边和柔影分层，而不是靠一道重阴影，
   所以浅底上卡片边界依然清楚，又不会显脏。 */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden;
}
.card-pad { padding: 15px; }
.card-head {
  padding: 14px 16px 12px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.1px; }
.card-head .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.stat {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 15px 13px;
  box-shadow: var(--shadow);
}
.stat .k {
  font-size: 11.5px; color: var(--ink-3);
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
.stat .v { font-size: 23px; font-weight: 700; margin-top: 4px; letter-spacing: -.6px; }
.stat .v small { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-left: 3px; }
.stat.brand .v { color: var(--brand); }
.stat.ok .v { color: var(--ok); }
.stat.warn .v { color: var(--warn); }
/* 可下钻的统计卡 */
.stat.tap { cursor: pointer; transition: transform .06s, background .15s, border-color .15s; }
.stat.tap:active { transform: scale(.985); background: #f8fafd; border-color: #d8e2f2; }
.stat .more { font-size: 10.5px; font-weight: 600; color: var(--brand); opacity: .9; white-space: nowrap; }
.stat.ok .more { color: var(--ok); }
.stat.warn .more { color: var(--warn); }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.quick button {
  border: 1px solid var(--line); font-family: inherit; cursor: pointer;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 15px 14px; text-align: left; color: var(--ink);
  transition: background .15s, border-color .15s, transform .06s;
}
.quick button:active { background: #f8fafd; border-color: #d8e2f2; transform: scale(.99); }
/* 快捷入口的图标块：参考稿里的「柔和色底 + 圆角方块」 */
.quick .qi {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--tint-sky); color: var(--brand-d);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.quick button:nth-child(2) .qi { background: var(--tint-mint); color: #0f7d54; }
.quick .qt { font-size: 13.5px; font-weight: 700; margin-top: 9px; letter-spacing: -.1px; }
.quick .qd { font-size: 11px; color: var(--ink-3); margin-top: 2px; }

.row {
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  display: flex; gap: 10px; align-items: flex-start;
}
.row:last-child { border-bottom: 0; }
.row.tap { cursor: pointer; }
.row.tap:active { background: #f8fafd; }
.row .grow { flex: 1; min-width: 0; }
.row .t1 {
  font-size: 14.5px; font-weight: 600; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap;
}
.row .t2 { font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.5; }
.row .t3 { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }
.row .rt { text-align: right; white-space: nowrap; }
.row .num { font-size: 15px; font-weight: 700; color: var(--brand); }
.row .num.g { color: var(--ok); }
.row .num.w { color: var(--warn); }
.row .num small { font-size: 11px; font-weight: 500; color: var(--ink-3); }

.tag {
  display: inline-block; font-size: 10.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--brand-l); color: var(--brand-d); font-weight: 600; line-height: 1.55;
  white-space: nowrap;
}
.tag.gray { background: #eef2f8; color: var(--ink-2); }
.tag.ok { background: var(--ok-l); color: var(--ok); }
.tag.warn { background: var(--warn-l); color: var(--warn); }
.tag.danger { background: var(--danger-l); color: var(--danger); }

.empty { padding: 34px 20px; text-align: center; color: var(--ink-3); font-size: 13px; }
.empty .ei { font-size: 30px; display: block; margin-bottom: 8px; opacity: .55; }

/* 分段控件：胶囊形轨道 + 白色胶囊滑块（参考稿的圆角语言；
   白滑块 + 极淡投影，选中的那一档「浮」起来，一眼能看出是当前项） */
.seg {
  display: flex; background: #eef2f9; border-radius: 999px; padding: 3px;
  margin-bottom: 12px; gap: 3px;
}
.seg button {
  flex: 1; border: 0; background: none; font-family: inherit; font-size: 13.5px;
  padding: 8px 6px; border-radius: 999px; color: var(--ink-2); cursor: pointer;
  font-weight: 500; white-space: nowrap;
  transition: background .15s, color .15s, box-shadow .15s;
}
.seg button.on {
  background: #fff; color: var(--brand-d); font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 3px 10px rgba(16, 24, 40, .07);
}
/* 三页签且标题较长时用（如报表：材料+人工合计 / 人工统计 / 材料统计），保证 360px 窄屏不挤 */
.seg.tight button { font-size: 12.5px; padding: 8px 2px; letter-spacing: -0.2px; }

.filterbar { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.filterbar .input { flex: 1; min-width: 120px; padding: 9px 10px; font-size: 13.5px; }
.filterbar select.input { flex: 1; min-width: 110px; }
/* 带字段名的筛选栏：每个控件上方一行小字（记工页的「查询开始时间 / 查询截止时间 / 选择人员」）。
   未命名的控件用 .fb-cell 包一层但不写 span，靠 align-items:flex-end 与有名字的底边对齐 */
/* 带字段名的筛选栏：带 <span> 标签的格子比不带标签的格子高一截，
   所以**带标签的格子必须排在前面**（同一行从左边开始），
   否则它的标签会顶到上一行的右上角，看起来像在标注别的字段（报销页踩过）。 */
.filterbar.lbl { align-items: flex-end; row-gap: 10px; }
.filterbar.lbl .fb-cell { flex: 1; min-width: 118px; display: flex; flex-direction: column; gap: 4px; }
.filterbar.lbl .fb-cell > span { font-size: 11.5px; color: var(--ink-3); padding-left: 2px; }
.filterbar.lbl .fb-cell .input { flex: none; min-width: 0; }

.sumline {
  display: flex; gap: 14px; flex-wrap: wrap; padding: 11px 15px;
  background: var(--tint-sky); border: 1px solid #dbe6fb;
  border-radius: var(--radius); margin-bottom: 12px;
  font-size: 12.5px; color: var(--brand-d);
}
.sumline b { font-size: 15px; color: var(--brand-d); }
.dlink { cursor: pointer; white-space: nowrap; border-bottom: 1px dashed currentColor; padding-bottom: 1px; }
.dlink:active { opacity: .6; }

.fab {
  position: fixed; right: 16px; bottom: calc(80px + var(--safe-b)); z-index: 45;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--brand); color: #fff; font-size: 26px; line-height: 1;
  box-shadow: 0 10px 24px rgba(47, 107, 243, .38), 0 2px 6px rgba(16, 24, 40, .12);
  cursor: pointer; transition: transform .06s, box-shadow .15s;
}
.fab:active { background: var(--brand-d); transform: scale(.96); }
@media (min-width: 632px) { .fab { right: calc(50% - 310px + 16px); } }

/* ---------- 底部抽屉 ---------- */
#sheetHost { position: fixed; inset: 0; z-index: 60; display: none; }
#sheetHost.open { display: block; }
.sheet-mask {
  position: absolute; inset: 0; background: rgba(15, 23, 41, .42);
  animation: fade .18s ease;
}
.sheet {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: 100%; max-width: 620px; background: var(--card);
  border-radius: 24px 24px 0 0; max-height: 92vh; display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideUp .24s cubic-bezier(.22, .8, .3, 1);
}
@keyframes slideUp { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.sheet-head {
  padding: 11px 14px 11px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; flex: none;
}
.sheet-head .sh-tt { flex: 1; min-width: 0; }
.sheet-head h3 { margin: 0; font-size: 16px; }
.sheet-head .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

/* 抽屉「返回」键 —— 从原来 28px 的浅灰 ✕ 圆点改成「‹ 返回」胶囊：
   图标 + 文字双通道，34px 高、实心描边 + 浅底，一眼就能认出是退出这个抽屉。
   工人反馈过老版 ✕ 太淡、跟背景融在一起（点不准也认不出）。 */
.sheet-back {
  flex: none; display: inline-flex; align-items: center; gap: 3px;
  height: 34px; padding: 0 13px 0 9px; margin-left: -3px;
  border: 1px solid #c9d6ea; border-radius: 999px;
  background: #eef3fb; color: #143566;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
.sheet-back .sb-ico { font-size: 20px; line-height: 1; margin-top: -2px; font-weight: 700; }
.sheet-back:active { transform: scale(.97); background: #dde8f8; border-color: #9db8dd; }
/* 首次登录强制改密码的抽屉是锁定的：这时连「返回」都不出现，所以不会有误关的问题 */

.sheet-body { padding: 15px 16px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet-foot {
  padding: 12px 16px calc(14px + var(--safe-b)); border-top: 1px solid var(--line);
  display: flex; gap: 10px; flex: none;
}
.sheet-foot .btn { flex: 1; }
/* 底部「取消 / 关闭」也加粗一档 + 箭头图标：跟主按钮（实心蓝）形成明确区分，
   但不再是原来那种「比背景深一点点」的灰白描边，弱视 / 户外强光下也能看清 */
.sheet-foot .btn.cancel {
  background: #f4f6fa; color: #3c4a63; border: 1.5px solid #c9d2e0;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.sheet-foot .btn.cancel .bi { font-size: 18px; line-height: 1; margin-top: -2px; font-weight: 700; }
.sheet-foot .btn.cancel:active { background: #e6ebf4; border-color: #a9b6ca; }

/* ---------- 明细抽屉（看板下钻） ---------- */
.dt-sum {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
  background: var(--tint-sky); border: 1px solid #dbe6fb; border-radius: 12px; padding: 10px 13px;
  margin-bottom: 11px; font-size: 12.5px; color: var(--brand-d);
}
.dt-sum b { font-size: 15px; color: var(--brand-d); }
.dt-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.dt-row:last-child { border-bottom: 0; padding-bottom: 4px; }
.dt-row .dn { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.dt-row .dn .dd { font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 3px; line-height: 1.5; }
.dt-row .dv {
  text-align: right; white-space: nowrap; flex: none;
  font-size: 15px; font-weight: 700; color: var(--brand); margin-top: -1px;
}
.dt-row .dv.g { color: var(--ok); }
.dt-row .dv.w { color: var(--warn); }
.dt-row .dv small { font-size: 10.5px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.dt-rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 5px; margin-right: 6px;
  background: #eef1f6; color: var(--ink-2); font-size: 10.5px; font-weight: 700;
  vertical-align: 1px;
}
.dt-rank.i1 { background: var(--brand); color: #fff; }
.dt-rank.i2 { background: #4a90f7; color: #fff; }
.dt-rank.i3 { background: #86b3fa; color: #fff; }
.dt-bar { height: 5px; border-radius: 3px; background: #eef1f6; margin-top: 6px; overflow: hidden; }
.dt-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); }
.dt-bar i.g { background: var(--ok); }
.dt-bar i.w { background: var(--warn); }
.dt-note { font-size: 11.5px; color: var(--ink-3); padding: 8px 0 2px; line-height: 1.6; }
/* 明细行里的补充信息（按人看项目名 / 按项目看参与人）：
   排在进度条下面，比主文案再淡一档，别抢主信息的注意力。 */
.dt-row .dn .pjline {
  margin-top: 5px; font-size: 11.5px; color: var(--ink-2); font-weight: 400;
  line-height: 1.9; word-break: break-all;
}
.dt-row .dn .pjline .tag { margin: 0 2px 0 3px; vertical-align: 1px; }
.dt-row .dn .pjline .pd {
  font-style: normal; color: var(--ink-3); margin-left: 5px; white-space: nowrap;
}

/* ---------- 组合输入（材料） ---------- */
.combo { position: relative; }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-lg);
  max-height: 210px; overflow-y: auto; display: none;
}
.combo-list.open { display: block; }
.combo-list div { padding: 9px 12px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid #f4f6fa; }
.combo-list div:last-child { border-bottom: 0; }
.combo-list div:active { background: var(--brand-l); }
.combo-list .cm { color: var(--ink-3); font-size: 11.5px; margin-left: 6px; }
.combo-list .cn { padding: 9px 12px; color: var(--ink-3); font-size: 12.5px; }

/* ---------- 工时快选 ---------- */
.hours-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 9px; }
.hours-grid button {
  border: 1px solid var(--line-2); background: #fbfcfe; border-radius: 12px;
  padding: 9px 2px; font-family: inherit; font-size: 13px; color: var(--ink-2);
  cursor: pointer; font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}
.hours-grid button.on { border-color: var(--brand); background: var(--brand-l); color: var(--brand-d); }
.hours-grid button small { display: block; font-size: 10px; font-weight: 500; opacity: .75; }

/* ---------- 批量记工 ---------- */
.batch-row {
  display: flex; align-items: center; gap: 9px; padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.batch-row:last-child { border-bottom: 0; }
.batch-row .bn { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; }
.batch-row .bn em { display: block; font-style: normal; font-size: 11px; color: var(--ink-3); }
.batch-row input {
  width: 74px; text-align: center; border: 1px solid var(--line-2); border-radius: 10px;
  padding: 8px 4px; font-size: 14px; font-family: inherit; outline: none;
}
.batch-row input:focus { border-color: var(--brand); }

.hint { font-size: 11.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.6; }
/* 抽屉底部的错误提示：原先 min-height 17px 只是占位，单按钮（只读抽屉）时会让
   「关闭」按钮看起来偏上。padding-bottom 兜住视觉重心。 */
.err { font-size: 12.5px; color: var(--danger); margin-top: 8px; min-height: 17px; }
.sheet-body > .err:last-child { margin-bottom: 6px; padding-bottom: 8px; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%);
  z-index: 90; background: rgba(20, 30, 50, .9); color: #fff;
  padding: 10px 18px; border-radius: 10px; font-size: 13.5px; max-width: 76vw;
  text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s;
}
#toast.show { opacity: 1; }

.sec-title {
  font-size: 12px; color: var(--ink-3); font-weight: 600;
  margin: 16px 4px 8px; letter-spacing: .4px;
}
.sec-title:first-child { margin-top: 0; }
.mine { padding: 4px 4px 0; }
.mine .mrow {
  display: flex; justify-content: space-between; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 14px;
}
.mine .mrow:last-child { border-bottom: 0; }
.mine .mrow span { color: var(--ink-2); }

/* ---------- 报销登记页「勾选报销材料」 ---------- */
.pick-box {
  border: 1px solid var(--line); border-radius: 14px; background: #fcfdff;
  overflow: hidden; margin-bottom: 2px;
}
.pick-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: var(--tint-sky); border-bottom: 1px solid var(--line);
  font-size: 12.5px; font-weight: 700; color: var(--brand-d);
}
.pick-head .cnt { margin-left: auto; font-weight: 700; }
.pick-head .pick-all {
  border: 0; background: #fff; color: var(--brand); cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px;
  box-shadow: 0 1px 2px rgba(24,39,75,.1);
}
.pick-head .pick-all:active { background: #eaf0fa; }
.pick-list { max-height: 236px; overflow-y: auto; }
.pick-item {
  display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
  border-bottom: 1px solid var(--line); cursor: pointer;
}
.pick-item:last-child { border-bottom: 0; }
.pick-item.on { background: #f2f7ff; }
.pick-item input[type="checkbox"] {
  width: 17px; height: 17px; margin: 1px 0 0; flex: none;
  accent-color: var(--brand); cursor: pointer;
}
.pick-item .pi-main { flex: 1; min-width: 0; }
.pick-item .pi-t1 { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.pick-item .pi-t2 { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
.pick-item .pi-amt {
  flex: none; text-align: right; font-size: 13.5px; font-weight: 700; color: var(--warn);
  white-space: nowrap;
}
.pick-foot {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: #fff8ee; border-top: 1px solid #f2e3cd;
  font-size: 12.5px; color: #8a5a12;
}
.pick-foot b { font-size: 15.5px; color: #b45309; }
.pick-empty {
  padding: 14px 11px; font-size: 12.5px; color: var(--ink-3); text-align: center; line-height: 1.7;
}
.pick-load { padding: 12px 11px; font-size: 12.5px; color: var(--ink-3); text-align: center; }
/* 勾选了材料时金额框只读：换成"锁定"观感，避免有人以为还能改 */
.input.locked { background: #f2f5f9; color: var(--ink-2); }
.lock-hint { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.55; }

/* ---------- 台账模块首页（三个独立板块入口） ---------- */
.mod-grid { display: grid; gap: 10px; margin-bottom: 12px; }
.mod {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  border: 1px solid var(--line); font-family: inherit; cursor: pointer; color: var(--ink);
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 15px;
  transition: background .15s, border-color .15s, transform .06s;
}
.mod:active { background: #f8fafd; border-color: #d8e2f2; transform: scale(.99); }
.mod .mi {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  background: var(--ml, #eef1f6); color: var(--mc, var(--brand));
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.mod .mt { flex: 1; min-width: 0; display: block; }
.mod .mt h3 { margin: 0; font-size: 15px; font-weight: 600; }
.mod .mt p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }
.mod .mk {
  display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 600;
  color: var(--mc, var(--brand-d)); background: var(--ml, var(--brand-l));
  border-radius: 20px; padding: 2px 9px;
}
.mod .ma { flex: none; color: var(--ink-3); font-size: 19px; }

.backlink {
  border: 0; background: none; font-family: inherit; cursor: pointer;
  color: var(--ink-2); font-size: 13px; font-weight: 500;
  padding: 2px 4px 10px; margin-left: -2px;
}
.backlink:active { color: var(--brand); }

/* ---------- 报表 ---------- */
.rchip {
  display: flex; gap: 6px; overflow-x: auto; padding: 0 0 9px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rchip::-webkit-scrollbar { display: none; }
.rchip button {
  flex: none; border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 6px 13px; font-size: 12px; font-family: inherit;
  cursor: pointer; font-weight: 500; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.rchip button.on { border-color: var(--brand); background: var(--brand-l); color: var(--brand-d); font-weight: 600; }

.rep-hero .rh-t { font-size: 12px; color: var(--ink-3); }
.rep-hero .rh-v { font-size: 27px; font-weight: 700; color: var(--brand); letter-spacing: -.6px; margin-top: 2px; }
.rep-hero .rh-g {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 6px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
}
.rep-hero .rh-g b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.rep-hero .rh-g small { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

.seg.scroll { overflow-x: auto; scrollbar-width: none; }
.seg.scroll::-webkit-scrollbar { display: none; }
.seg.scroll button { flex: none; min-width: 62px; }

.dt-row.tap { cursor: pointer; }
.dt-row.tap:active { background: #f7f9fc; }

/* ---------------- 明细抽屉：点条目展开详情（第二十九轮） ---------------- */
.dt-item .dt-detail { display: none; }
.dt-item.open .dt-detail { display: block; }
.dt-item.open > .dt-row { background: #f7f9fc; border-radius: 10px; }
.dt-detail {
  margin: 2px 0 10px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px;
  font-size: 12.5px; line-height: 1.75; color: var(--ink-2);
}
.dt-detail .kv { display: flex; gap: 8px; align-items: baseline; }
.dt-detail .kv .k { flex: none; width: 56px; color: var(--ink-3); }
.dt-detail .kv .v { flex: 1; min-width: 0; word-break: break-word; color: var(--ink); }
.dt-detail .kv .v em { font-style: normal; color: var(--ink-3); }
.dt-detail .ph-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.dt-detail .ph-strip img {
  width: 62px; height: 62px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--line-2); cursor: pointer; background: #fff;
}
.dt-detail .dt-ph-note { font-size: 11.5px; color: var(--ink-3); margin-top: 8px; }

/* ---------------- 首页：公司名称 + 版本号 ---------------- */
.brand {
  display: flex; flex-direction: column; gap: 3px;
  padding: 2px 2px 12px;
}
/* 公司名单独一行（原来的公司 logo 已按需求去掉，logo.png 也不再随包发布） */
.brand .bn {
  display: flex; align-items: center; gap: 10px;
  font-size: 15.5px; font-weight: 700; color: var(--ink); letter-spacing: -.2px; line-height: 1.35;
}
.brand .bn > span { min-width: 0; }
.brand .bs { font-size: 11.5px; color: var(--ink-3); }
.brand .bs b { color: var(--brand-d); font-weight: 600; }

.verline {
  text-align: center; font-size: 11.5px; color: var(--ink-3);
  padding: 6px 0 4px; cursor: pointer;
}
.verline b { color: var(--ink-2); font-weight: 600; }
.verline:active { color: var(--brand); }

/* ---------------- 首页：用工与材料趋势图 ---------------- */
.legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px 2px; font-size: 11.5px; color: var(--ink-2);
}
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend i.lgd { background: var(--brand); }
.legend i.lgm { background: #d98200; }
.legend .lgt { margin-left: auto; color: var(--ink-3); font-size: 11px; }
.chart { padding: 4px 8px 12px; }
/* 首页 BI 看板的三个关键数字（合计 / 月均 / 本月） */
.bi-kpi { display: flex; gap: 7px; padding: 2px 12px 6px; }
.bi-kpi > .bi-kpi-c { flex: 1; min-width: 0; background: #f7f9fd; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
/* 三个数字都能点开看明细：点一下有反馈，标签下面挂「明细 ›」提示可点 */
.bi-kpi > .bi-kpi-c.tap { cursor: pointer; transition: transform .06s, background .15s; }
.bi-kpi > .bi-kpi-c.tap:active { transform: scale(.97); background: #eaf0fa; }
.bi-kpi .more { font-size: 10px; font-weight: 600; color: var(--brand); margin-left: 3px; white-space: nowrap; }
.bi-kpi b { display: block; font-size: 16.5px; font-weight: 700; color: var(--ink); letter-spacing: -.3px; white-space: nowrap; }
.bi-kpi small { display: block; font-size: 10.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.bi-kpi small i { font-style: normal; font-weight: 700; margin-left: 3px; white-space: nowrap; }
.bi-kpi small i.up { color: #b45309; }
.bi-kpi small i.down { color: #047857; }
/* 各项目累计：右侧「用工 / 材料累计」两栏 */
.row .rt.two-col { display: flex; gap: 12px; flex: none; }
.row .rt.two-col > div { text-align: right; min-width: 0; }
.row .rt.two-col .num { font-size: 14px; }
.chart svg { touch-action: manipulation; }

.login-brand .login-co {
  margin-top: 6px; font-size: 12px; color: var(--ink-2); font-weight: 500; letter-spacing: .2px;
}

/* ---------------- 单据照片（材料录入 / 上传） ---------------- */
/* 8px 间距不够删图「×」悬在角落（-6px 外扩）—— 拉开到 12px，避免相邻照片的 × 叠在一起 */
.photo-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.photo-grid:empty { display: none; }
.ph-cell { position: relative; width: 74px; height: 74px; border-radius: 12px; border: 1px solid var(--line); background: #f7f9fd; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; }
/* 照片右上角的删除「×」：原来是 20px 的半透明黑点，手机上很难点中 —— 放大到 26px，
   加深底色并加一圈白边，从照片上「浮」出来。 */
.ph-x {
  position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; padding: 0;
  border: 2px solid #fff; border-radius: 50%;
  background: #d92d20; color: #fff; font-size: 16px; font-weight: 700;
  line-height: 22px; text-align: center; cursor: pointer;
  box-shadow: 0 1px 4px rgba(12, 22, 42, .35);
}
.ph-x:active { background: #b42318; }
.ph-add { width: 74px; height: 74px; border-radius: 12px; border: 1px dashed #cbd8e8; background: #f7f9fd; color: #94a3b8; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 19px; cursor: pointer; }
.ph-add small { font-size: 10.5px; margin-top: 1px; }
.upload-row { display: flex; gap: 10px; margin-top: 10px; }
.up-btn { flex: 1; display: block; text-align: center; margin: 0; }

/* ---------------- 云更新提示条（index.html 里的版本探针用） ---------------- */
/* 探针发现线上有新版本时先亮一下这条，650ms 后整页自动重载。
   移动端固定在顶部安全区之下，不遮挡底部页签；只提示、不可点，所以 pointer-events:none。 */
.upd-bar {
  position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 95; pointer-events: none; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px;
  background: #143566; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .2px;
  box-shadow: 0 6px 20px rgba(12, 22, 42, .3);
  animation: updIn .18s ease-out both;
}
@keyframes updIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------------- 首页「最新动态」（第十四轮） ---------------- */
/* 有未读才置顶出现：管理员 / 班组长一登录就看到「谁、什么时候、做了什么」 */
.feed-card { border: 1px solid #d8e4f8; background: linear-gradient(180deg, #f7faff 0%, #fff 62%); }
.feed-card .card-head { align-items: flex-start; }
.feed-dot {
  display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: #e13c3c; color: #fff; font-size: 11px; font-weight: 700;
  vertical-align: 1px; letter-spacing: .2px;
}
.feed-card .row + .row { border-top: 1px solid var(--line); }
.feed-row { align-items: flex-start; }
.feed-row .t1 { font-weight: 600; }
.feed-row .t1 b { color: var(--brand); }
.fe-ico {
  flex: none; width: 32px; height: 32px; margin-right: 10px; border-radius: 9px;
  background: var(--brand-l); display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.feed-more { padding: 9px 14px; font-size: 12px; color: var(--ink-3); text-align: center; }
.feed-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 12px; border-top: 1px solid var(--line);
}
.feed-foot span { font-size: 11.5px; color: var(--ink-3); }
.feed-sheet-note {
  padding: 9px 12px; margin-bottom: 8px; border-radius: 9px;
  background: #f4f7fc; color: var(--ink-2); font-size: 12px; line-height: 1.5;
}
/* 首页页签的未读角标 */
#tabbar button .tab-dot {
  position: absolute; top: 2px; left: 50%; margin-left: 2px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: #e13c3c; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px;
  text-align: center; box-shadow: 0 1px 3px rgba(225, 60, 60, .45);
}

/* ============================================================
   第十五轮：失败不白屏、不静默 —— 错误提示与加载占位
   ============================================================ */
#toast.show.err {
  background: rgba(150, 28, 28, .95);
  border: 1px solid rgba(255, 255, 255, .3);
  font-weight: 600; line-height: 1.5;
}

.load-card {
  margin: 16vh auto 0; max-width: 340px; padding: 26px 20px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); text-align: center;
}
.load-card .spin {
  width: 26px; height: 26px; margin: 0 auto 14px; border-radius: 50%;
  border: 2.5px solid #dbe6f5; border-top-color: var(--brand);
  animation: jgtspin .8s linear infinite;
}
@keyframes jgtspin { to { transform: rotate(360deg); } }
.load-card .t1 { font-size: 15px; font-weight: 700; color: var(--ink); }
.load-card .t2 { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.6; }
.load-card .t3 {
  font-size: 12.5px; color: #8a5a00; background: var(--warn-l); border: 1px solid #f2e0b0;
  border-radius: 9px; padding: 9px 11px; margin-top: 12px; line-height: 1.6; text-align: left;
}
.load-card.err { border-color: #f0d0d0; }
.load-card.err .t1 { color: #a02626; }
.load-card .btn { margin-top: 16px; }

/* ============================================================
   第十六轮：审核与确认
   ------------------------------------------------------------
   施工员 / 班组长提交 → 待审区 → 管理员审核（邮件链接或应用内）
   通过后才计入台账。以下为审核相关的成套样式。
   ============================================================ */

/* 角标：数字（「我的」页里的待办条数） */
.cnt-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  height: 18px; line-height: 18px; border-radius: 9px; text-align: center;
  background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 700;
  vertical-align: 1px;
}

/* 提交后的提示卡（文案由用户指定） */
.audit-tip {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--brand-l); border: 1px solid #d3e2ff; border-radius: 12px;
  padding: 14px 14px 13px;
}
.audit-tip .at-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: #fff; color: var(--brand-d); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(24, 39, 75, .1);
}
.audit-tip .at-ico svg { width: 21px; height: 21px; }
.audit-tip .at-txt { font-size: 14px; line-height: 1.7; color: #1a3a6b; font-weight: 500; }

/* 审核状态胶囊 */
.audit-st {
  display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 1.5;
  padding: 0 7px; border-radius: 6px; border: 1px solid currentColor; opacity: .95;
}

/* 申请列表 / 结果列表 */
.audit-list { display: flex; flex-direction: column; gap: 10px; }
.audit-row {
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px 12px; background: #fff;
}
.audit-row.tap { cursor: pointer; }
.audit-row.tap:active { background: #f7f9fd; }
.audit-row .ar-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.audit-row .ar-kind {
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--brand);
  border-radius: 6px; padding: 1px 7px;
}
.audit-row .ar-kind.m { background: #0f8f6a; }
.audit-row .ar-time { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.audit-row .ar-title { font-size: 14px; font-weight: 600; margin-top: 7px; line-height: 1.55; }
.audit-row .ar-meta { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; line-height: 1.6; }
.audit-row .ar-rm {
  margin-top: 7px; font-size: 12.5px; color: #a02626; background: var(--danger-l);
  border-radius: 8px; padding: 7px 9px; line-height: 1.6;
}

/* 首页「待审核申请」（第三十二轮）：入口从「我的」搬到首页最上面。
   有待办时整卡走暖色高亮（红点角标），没有待办就是一条安静的常驻入口。 */
.audit-entry { border: 1px solid var(--line); }
.audit-entry.hot {
  border: 1px solid #f4d3ad;
  background: linear-gradient(180deg, #fff9f1 0%, #fff 60%);
}
.audit-entry .card-head { align-items: flex-start; }
.audit-entry .row + .row { border-top: 1px solid var(--line); }
/* 待办行前的类型胶囊（和应用内待审列表里的 .ar-kind 同一套观感） */
.ae-kind {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px;
  background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 700;
  vertical-align: 1px;
}
.ae-kind.m { background: #0f8f6a; }

/* 申请明细（审核时逐条看） */
.ai { padding: 11px 0; border-bottom: 1px dashed var(--line); }
.ai:last-of-type { border-bottom: 0; }
.ai .ai-no { font-size: 11.5px; color: var(--ink-3); margin-bottom: 4px; }
.ai .ai-t1 { font-size: 14.5px; font-weight: 600; line-height: 1.55; }
.ai .ai-t2 { font-size: 12.5px; color: var(--ink-2); margin-top: 4px; line-height: 1.65; }
.ai .ai-amt { color: #c2410c; font-weight: 700; }
/* 项目名称一律红色（第三十二轮·用户指定）：审核时一眼看清这笔账挂在哪个项目上。
   audit.html 是单文件自包含（样式内联），那边另有一份同名规则。 */
.pj-red { color: var(--danger); font-weight: 700; }
.ai .ai-rm {
  margin-top: 6px; font-size: 12.5px; color: var(--ink-2); background: #f7f9fd;
  border-left: 3px solid var(--line); border-radius: 8px; padding: 7px 9px;
  line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}
.ai .ai-phs { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.ai .ai-phs img {
  width: 66px; height: 66px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); display: block;
}
.ai-sum {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: var(--brand-l); border: 1px solid #d3e2ff;
  font-size: 12.5px; color: #24457a;
}
.ai-sum b { font-size: 15px; color: #17419a; }

/* 驳回原因输入 */
.rmbox {
  margin-top: 12px; background: #fff; border: 1px solid #f2c9c9; border-radius: 12px;
  padding: 12px 13px;
}
.rmbox label { font-size: 12.5px; font-weight: 700; color: #a52a2a; }
.rmbox textarea {
  width: 100%; margin-top: 8px; border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 10px; font: inherit; font-size: 14px; min-height: 74px;
  resize: vertical; outline: none; color: var(--ink); background: #fff;
}
.rmbox textarea:focus { border-color: var(--brand); }
.rmbox .hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ============================================================
   第十七轮 · 更新推送（登录时弹「工作台已更新」）
   ============================================================ */
.up-hero {
  display: flex; gap: 10px; align-items: center;
  background: linear-gradient(135deg, var(--tint-sky), #f5f9ff);
  border: 1px solid #d8e5ff; border-radius: 16px;
  padding: 13px; margin: 0 0 12px;
}
.up-ico {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.up-t1 { font-size: 15px; font-weight: 700; color: #12305c; }
.up-t2 { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }

.up-card { margin: 0 0 10px; }
.up-list { margin: 8px 0 0; padding-left: 18px; }
.up-list li { font-size: 13px; color: #31405a; line-height: 1.75; margin: 2px 0; }
.up-list li::marker { color: var(--brand); }

/* ============================================================
   第十七轮：桌面（宽屏）适配
   ------------------------------------------------------------
   手机版一行不动 —— 所有规则都关在 @media (min-width: 768px) 里，
   窄屏（真正的手机，＜768px）下一条都不命中，与原版完全一致。宽屏下：
     · 取消 620px 限宽，左侧页签改成一条竖排导航
     · 内容区居中限宽，一屏能看更多内容（不再是一条窄竖条）
     · 抽屉由「底部上拉」换成「居中对话框」（桌面上更自然）
     · 登录卡片居中成一张卡，不再拉满整屏
   ============================================================ */

/* 侧栏品牌区与底部版本行：只在宽屏出现（窄屏由这两行彻底隐藏） */
.side-brand { display: none; }
.side-foot { display: none; }

@media (min-width: 768px) {

  /* ---------- 骨架：左边一条导航，右边内容区 ----------
     内容区宽度统一用一个变量管：普通页 1240px；首页是卡片网格，放宽到 1440px
     让大屏上两侧留白更小、信息铺得更满（窄屏这些规则整体不生效）。 */
  :root { --cw: 1240px; --side: 220px; }
  body:has(#viewHost[data-view="home"]) { --cw: 1440px; }

  #app { max-width: none; margin: 0; }

  #mainView { padding-left: var(--side); }

  #appHeader { padding: 17px 32px 16px; }
  #appHeader .h-title { font-size: 18px; }
  #appHeader .h-sub { font-size: 12px; }

  #viewHost {
    padding: 20px 32px 56px;
    width: 100%; max-width: var(--cw); margin: 0 auto;
  }

  /* ---------- 页签 → 左侧竖排导航 ----------
     第二十二轮：侧栏由「深蓝实底」改成「浅色毛玻璃面板」，
     和内容区共用同一层色晕，只靠一条发丝右边框分开 —— 参考稿的导航就是浅底的。
     选中项则用近黑实底胶囊（--strong）压出强对比，一眼就知道自己在哪一页。 */
  #tabbar,
  #tabbar.seven,
  #tabbar.eight {
    left: 0; right: auto; top: 0; bottom: 0;
    transform: none;
    width: var(--side); max-width: none;
    flex-direction: column;
    gap: 2px;
    padding: 18px 13px;
    border-top: 0;
    border-right: 1px solid var(--line);
    background: rgba(255, 255, 255, .74);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(16, 24, 40, .16) transparent;
  }
  #tabbar::-webkit-scrollbar { width: 6px; }
  #tabbar::-webkit-scrollbar-track { background: transparent; }
  #tabbar::-webkit-scrollbar-thumb {
    background: rgba(16, 24, 40, .14); border-radius: 3px;
  }
  #tabbar::-webkit-scrollbar-thumb:hover { background: rgba(16, 24, 40, .24); }

  /* ---------- 侧栏顶部品牌区 ----------
     第二十二轮：侧栏转浅色之后，logo（黑 + 黄）可以直接压在浅底上本色显示，
     不再需要白色底板去「托」它（那是深色侧栏时代的解法，现在反而多余）。
     ⚠️ 也不要改回任何 brightness/invert 反白滤镜 —— 那会丢掉公司标识本色。 */
  #tabbar .side-brand {
    display: block;
    padding: 2px 4px 15px; margin-bottom: 10px;
    border-bottom: 1px solid var(--line);
    flex: none;
  }
  #tabbar .sb-box {
    display: flex; align-items: center; justify-content: flex-start;
    height: auto; margin-bottom: 10px;
    background: none; border-radius: 0; box-shadow: none;
    overflow: visible; flex: none;
  }
  #tabbar .sb-logo {
    height: 32px; width: auto; max-width: 100%; object-fit: contain;
    flex: none; -webkit-user-drag: none;
  }
  #tabbar .sb-txt { display: block; min-width: 0; }
  #tabbar .sb-txt b {
    display: block; color: var(--ink); font-size: 14px; font-weight: 700;
    letter-spacing: -.1px; line-height: 1.3;
  }
  #tabbar .sb-txt span {
    display: block; color: var(--ink-3); font-size: 10.5px;
    margin-top: 4px; line-height: 1.45;
  }
  /* 侧栏底部版本行：贴在侧栏底边，把剩余空白用起来 */
  #tabbar .side-foot {
    display: block; margin-top: auto; flex: none;
    padding: 13px 6px 2px;
    border-top: 1px solid var(--line);
    color: var(--ink-3); font-size: 10.5px; letter-spacing: .4px;
  }

  #tabbar button,
  #tabbar.seven button,
  #tabbar.eight button {
    flex: none; width: 100%;
    flex-direction: row; justify-content: flex-start; align-items: center;
    gap: 11px;
    padding: 9px 13px; border-radius: 999px;
    font-size: 14px; opacity: 1;
    color: var(--ink-2); background: none;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
  }
  #tabbar button .ti,
  #tabbar.seven button .ti,
  #tabbar.eight button .ti {
    width: 28px; height: 28px; border-radius: 9px; flex: none;
    background: #eef2f9; color: var(--ink-2);
    transition: background .18s ease, color .18s ease;
  }
  #tabbar button svg,
  #tabbar.seven button svg,
  #tabbar.eight button svg { width: 16px; height: 16px; }
  #tabbar button .tn { font-weight: 600; letter-spacing: .1px; }
  #tabbar button:hover { background: #f1f5fb; color: var(--ink); }
  /* 选中项：近黑实底胶囊 + 白字（参考稿导航的当前项样式）——
     浅色侧栏上，深色胶囊是层次最强、也最干净的一档对比。 */
  #tabbar button.on,
  #tabbar.seven button.on,
  #tabbar.eight button.on {
    background: var(--strong); color: #fff;
    box-shadow: 0 6px 16px rgba(16, 24, 40, .22);
  }
  #tabbar button.on .ti,
  #tabbar.seven button.on .ti,
  #tabbar.eight button.on .ti { background: rgba(255, 255, 255, .18); color: #fff; }
  /* ⚠️ 必须显式写 color:#fff：窄屏那条 `button.on .tn` 会把页签名染成各模块的 --tc，
     深色胶囊上会变成「紫字压黑底」这类看不清的组合 —— 宽屏这一档要压回来。 */
  #tabbar button.on .tn { font-weight: 700; color: #fff; }
  /* 角标跟着文字走，不再绝对定位（竖排后绝对定位会飘到行首） */
  #tabbar button .tab-dot { position: static; margin: 0 0 0 auto; flex: none; }

  /* ---------- 悬浮「新增」按钮：贴着内容区右下角（跟着 --cw 走） ---------- */
  .fab { right: max(40px, calc((100vw - var(--side) - var(--cw)) / 2 + 40px)); bottom: 40px; }

  /* ---------- 抽屉：底部上拉 → 居中对话框 ---------- */
  .sheet {
    top: 50%; bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 640px; max-height: 84vh;
    border-radius: 18px;
    animation: sheetPop .2s cubic-bezier(.22, .8, .3, 1);
  }
  @keyframes sheetPop {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.97); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  }
  .sheet-head { padding: 13px 20px; }
  .sheet-body { padding: 18px 22px 4px; }
  .sheet-foot { padding: 14px 22px 16px; }

  /* ---------- 登录页：卡片居中成一张卡 ---------- */
  .login-wrap { padding: 40px 24px; }
  .login-card { max-width: 430px; width: 100%; margin: 0 auto; }

  /* ---------- 分段控件：别在大屏上被拉成一条长带（按钮越宽越难看出是一组） ---------- */
  .seg { max-width: 620px; }
  .seg.tight { max-width: 560px; }
  .seg.scroll { max-width: 780px; }

  /* ---------- 「我的」页是一串入口，宽屏下收窄居中更聚拢（不然标签和值隔着半屏） ---------- */
  #viewHost[data-view="me"] { max-width: 780px; }

  /* ---------- Toast / 更新提示条（跟着内容区居中，不压侧栏） ---------- */
  #toast { max-width: 440px; }
  .upd-bar { left: calc(var(--side) + (100vw - var(--side)) / 2); }

  /* 侧栏顶部已经有「logo + 产品名 + 一句话定位」了，首页顶栏就别再重复一遍，
     只留副标题（班组 + 时间），信息不打架、顶栏更干净。
     浏览器不支持 :has 时最多是照旧重复显示，不影响任何功能。 */
  #mainView:has(#viewHost[data-view="home"]) #appHeader .h-title,
  #mainView:has(#viewHost[data-view="home"]) #appHeader .h-tag { display: none; }
}

/* ---------- 平板档（768～999px）：竖屏平板 / 小屏笔记本 / Windows 高缩放 ----------
   第三十一轮：宽屏门槛从 1000px 下调到 768px —— iPad 竖屏（810 / 820 / 834）、
   Surface 类平板、以及 Windows 125% / 150% 缩放下 CSS 宽度只剩 900 出头的笔记本，
   过去全被判成「手机」（底部页签 + 620 限宽，两侧空一大片）。
   这一档同样用左侧竖排导航 + 居中对话框，只是把侧栏收窄到 176px、字号收紧一档，
   把有限的宽度留给内容；≥1000px 仍是 220px 的完整侧栏（--side 在桌面块里定义）。 */
@media (min-width: 768px) and (max-width: 999px) {
  :root { --cw: 100%; --side: 176px; }
  body:has(#viewHost[data-view="home"]) { --cw: 100%; }

  #appHeader { padding: 14px 22px 13px; }
  #appHeader .h-title { font-size: 16.5px; }
  #viewHost { padding: 16px 22px 48px; }

  #tabbar, #tabbar.seven, #tabbar.eight { width: var(--side); padding: 14px 10px; }
  #tabbar .side-brand { padding: 2px 2px 12px; margin-bottom: 8px; }
  #tabbar .sb-logo { height: 26px; }
  #tabbar .sb-txt b { font-size: 12.5px; }
  #tabbar .sb-txt span { font-size: 9.5px; margin-top: 3px; }
  #tabbar button, #tabbar.seven button, #tabbar.eight button {
    gap: 9px; padding: 8px 10px; font-size: 12.5px;
  }
  #tabbar button .ti, #tabbar.seven button .ti, #tabbar.eight button .ti {
    width: 25px; height: 25px; border-radius: 8px;
  }
  #tabbar button svg, #tabbar.seven button svg, #tabbar.eight button svg {
    width: 15px; height: 15px;
  }

  /* 抽屉仍是居中对话框，但按可用宽度收一收（768 竖屏时别顶到左右边） */
  .sheet { max-width: min(640px, calc(100vw - var(--side) - 40px)); max-height: 86vh; }
  .sheet-body { padding: 16px 18px 4px; }
  .sheet-foot { padding: 13px 18px 15px; }

  /* 内容区本来就不宽，分段控件别再限宽；「我的」也铺满 */
  .seg, .seg.tight, .seg.scroll { max-width: 100%; }
  #viewHost[data-view="me"] { max-width: 100%; }
  #toast { max-width: 380px; }

  .fab { right: 22px; bottom: 28px; }
}

/* ---------- 更宽的屏（≥1280px）：首页卡片两列排 ----------
   首页是一串彼此独立的卡片，宽屏下两两并排，一屏能看到的东西翻倍：
     通栏 —— 公司名 / 最新动态 / 四个统计卡 / 快捷入口 / 汇总行 / 版本行
     两列 —— 用工看板+材料看板、各项目累计+人员累计、最近记工+最近记材料
   align-items: stretch（不是 start）：同一行的两张卡**强制等高**，
   底边对齐 —— 不然一张高一张矮，页面看着就是参差不齐的。
   窄于 1280px 不启用（两列会挤变形）。 */
@media (min-width: 1280px) {
  #viewHost[data-view="home"] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  /* 非卡片元素一律通栏（公司名条 / 统计卡 / 快捷入口 / 汇总行 / 版本行 / 加载与报错块） */
  #viewHost[data-view="home"] > *:not(.card) { grid-column: 1 / -1; }
  /* 「最新动态」要横向宽度，也通栏 */
  #viewHost[data-view="home"] > .feed-card { grid-column: 1 / -1; }
  /* 「待审核申请」同理通栏 —— 它是待办条，跟别的卡并排会看成半张卡 */
  #viewHost[data-view="home"] > .audit-entry { grid-column: 1 / -1; }
  /* 间距改由 grid 的 gap 负责，清掉卡片自己的下边距免得翻倍 */
  #viewHost[data-view="home"] > .card { margin-bottom: 0; }
  /* 首页那四个统计卡在大屏上一行摆完（默认 2 列是给窄屏的） */
  #viewHost[data-view="home"] .stat-grid { grid-template-columns: repeat(4, 1fr); }
}