*, *::before, *::after { box-sizing: border-box; }
/* hidden 必须压过组件自身的 display（否则 .sheet-wrap 的 display:flex 会让空遮罩常驻） */
[hidden]{display:none !important;}
:root{
  --ink:#14171f; --ink2:#5b6472; --ink3:#8b94a3;
  --line:#e6e8ec; --line2:#eef0f3;
  --bg:#f4f5f7; --card:#fff;
  --brand:#1d4ed8; --brand-soft:#eef2ff;
  --danger:#c9342f; --danger-soft:#fdeceb;
  --warn:#96600a; --warn-soft:#fdf3e2;
  --ok:#15803d; --ok-soft:#e9f6ee;
  --r:12px;
}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
.root{max-width:520px;margin:0 auto;min-height:100%;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
input,select,textarea{font:inherit;color:inherit;}
a{color:var(--brand);text-decoration:none;}

/* ---------- shell ---------- */
.app{min-height:100vh;display:flex;flex-direction:column;}
.hd{
  position:sticky;top:0;z-index:20;
  background:rgba(244,245,247,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line2);
  padding:10px 16px 10px;display:flex;align-items:center;gap:10px;
  padding-top:calc(10px + env(safe-area-inset-top));
}
.hd h1{font-size:17px;font-weight:600;margin:0;letter-spacing:-.2px;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hd .sub{font-size:12px;color:var(--ink3);font-weight:400;}
.back{width:32px;height:32px;display:grid;place-items:center;margin-left:-8px;border-radius:8px;}
.back:active{background:#e9ebef;}
.main{flex:1;padding:12px 16px 92px;}
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  max-width:520px;margin:0 auto;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{flex:1;padding:8px 0 9px;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;color:var(--ink3);position:relative;}
/* tab 按钮外面包了一层，PC 端才能把整组竖过来。
   手机上它只是横向 flex，和以前完全一样 —— 少这一条，四个 tab 会竖排堆叠 */
.tabbar .tb-items{display:flex;flex:1;}
/* 宽屏侧栏的品牌区与当前用户，手机上不出现（样式在 pc.css 里展开） */
.side-hd,.side-ft{display:none;}
/* 详情 / 表单这类没有一级 tab 的页面，手机上不显示底部导航（和以前一致）；
   PC 上侧栏是整页骨架，必须出现，覆盖规则在 pc.css 里 */
.app.notab .tabbar{display:none;}
.tabbar button.on{color:var(--brand);font-weight:600;}
.tabbar svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.tabbar .dot{position:absolute;top:5px;right:calc(50% - 16px);min-width:15px;height:15px;padding:0 4px;
  border-radius:8px;background:var(--danger);color:#fff;font-size:10px;line-height:15px;
  font-weight:600;text-align:center;}

/* ---------- cards & bits ---------- */
.card{background:var(--card);border-radius:var(--r);border:1px solid var(--line2);
  padding:14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(20,23,31,.03);}
.card.tap:active{background:#fafbfc;}
.sec-title{display:flex;align-items:center;gap:8px;margin:18px 2px 8px;font-size:13px;
  font-weight:600;color:var(--ink2);}
.sec-title .n{margin-left:auto;font-weight:400;font-size:12px;color:var(--ink3);}
.muted{color:var(--ink3);}
.small{font-size:12px;}
.row{display:flex;align-items:center;gap:8px;}
.between{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.stack{display:flex;flex-direction:column;gap:6px;}
.grow{flex:1;min-width:0;}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hr{height:1px;background:var(--line2);margin:12px -14px;}
.empty{text-align:center;color:var(--ink3);font-size:13px;padding:28px 12px;}
.empty svg{width:34px;height:34px;stroke:#c4cad4;fill:none;stroke-width:1.5;margin-bottom:8px;}
/* 行内小图标容器：不限定尺寸时 SVG 会撑满父容器（报错提示曾因此变成巨大黑三角） */
.ei{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex:0 0 16px;}
.ei svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:6px;
  font-size:11px;font-weight:600;white-space:nowrap;letter-spacing:.2px;}
.b-wait{background:var(--warn-soft);color:var(--warn);}
.b-go{background:var(--brand-soft);color:var(--brand);}
.b-out{background:var(--danger-soft);color:var(--danger);}
.b-done{background:#f1f3f6;color:var(--ink2);}
.b-ok{background:var(--ok-soft);color:var(--ok);}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:44px;padding:0 18px;border-radius:10px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:600;width:100%;transition:transform .06s,opacity .15s;}
.btn:active{transform:scale(.985);opacity:.9;}
.btn[disabled]{opacity:.45;pointer-events:none;}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500;}
.btn.danger{background:var(--danger);}
.btn.ok{background:var(--ok);}
.btn.sm{height:34px;font-size:13px;padding:0 12px;width:auto;border-radius:8px;font-weight:500;}
.btn-row{display:flex;gap:8px;}
.btn-row .btn{width:auto;flex:1;}

/* ---------- forms ---------- */
.field{margin-bottom:14px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:6px;}
.input, select.input, textarea.input{
  width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;font-size:15px;outline:none;appearance:none;
}
textarea.input{height:auto;padding:10px 12px;min-height:72px;resize:vertical;line-height:1.5;}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(29,78,216,.08);}
select.input{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%238b94a3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.hint{font-size:12px;color:var(--ink3);margin-top:5px;}
.steps{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.step{display:flex;gap:9px;font-size:13px;line-height:1.6;color:var(--ink2);}
.step .n{flex:0 0 20px;width:20px;height:20px;border-radius:50%;background:#eef1f6;
  color:var(--ink2);font-size:12px;font-weight:600;display:flex;align-items:center;
  justify-content:center;margin-top:1px;}
.step b{font-weight:600;color:var(--ink);}
.step div{flex:1;min-width:0;}
.err{font-size:12px;color:var(--danger);margin-top:5px;}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;height:32px;padding:0 13px;border-radius:16px;background:#fff;
  border:1px solid var(--line);font-size:13px;color:var(--ink2);white-space:nowrap;}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500;}
.seg{display:flex;background:#eceef2;border-radius:10px;padding:3px;gap:2px;}
.seg button{flex:1;height:34px;border-radius:8px;font-size:13px;color:var(--ink2);}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06);}

/* ---------- A4 审批单 ---------- */
.doc-wrap{padding:14px;background:#eceef2;min-height:100vh;}
.doc-bar{display:flex;gap:8px;max-width:210mm;margin:0 auto 12px;}
.doc-bar .btn{flex:0 0 auto;}
.doc{background:#fff;max-width:210mm;margin:0 auto;padding:16mm 16mm 20mm;
  box-shadow:0 2px 12px rgba(0,0,0,.08);}
.doc-title{font-size:22px;font-weight:700;text-align:center;letter-spacing:6px;}
.doc-meta{text-align:center;font-size:11px;color:#8b94a3;margin-top:8px;
  padding-bottom:14px;border-bottom:2px solid #14171f;}
.doc-tb{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px;}
.doc-tb th,.doc-tb td{border:1px solid #d8dce3;padding:8px 10px;text-align:left;vertical-align:top;}
.doc-tb th{background:#f6f7f9;font-weight:600;width:88px;white-space:nowrap;}
.doc-flow th{width:auto;}
.doc-flow th:nth-child(2),.doc-flow td:nth-child(2){width:92px;white-space:nowrap;}
.doc-flow th:nth-child(4),.doc-flow td:nth-child(4){width:54px;white-space:nowrap;}
.doc-sec{font-size:13px;font-weight:700;margin:20px 0 6px;padding-left:8px;border-left:3px solid #14171f;}
.doc-photos{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;}
.doc-ph{width:calc(33.33% - 7px);}
.doc-ph img{width:100%;height:118px;object-fit:cover;border:1px solid #d8dce3;display:block;background:#f1f3f6;}
.doc-ph span{display:block;font-size:10px;color:#8b94a3;margin-top:3px;}
.doc-foot{margin-top:24px;padding-top:12px;border-top:1px dashed #d8dce3;
  font-size:11px;color:#8b94a3;line-height:1.8;}
@media(max-width:700px){
  .doc{padding:20px 16px 26px;}
  .doc-title{font-size:19px;letter-spacing:3px;}
  .doc-tb{font-size:12px;}
  .doc-tb th{width:74px;}
  .doc-ph{width:calc(50% - 5px);}
}
@media print{
  @page{size:A4;margin:12mm;}
  body{background:#fff !important;}
  .doc-wrap{padding:0;background:#fff;min-height:0;}
  .doc-bar{display:none !important;}
  .doc{box-shadow:none;max-width:none;width:auto;padding:0;}
  .doc-ph{width:calc(33.33% - 7px);}
}

/* ---------- login ---------- */
.login{padding:44px 24px 32px;max-width:420px;margin:0 auto;}
.login .logo{width:52px;height:52px;border-radius:14px;background:var(--ink);display:grid;
  place-items:center;margin-bottom:22px;}
.login .logo svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.login h2{font-size:24px;font-weight:600;margin:0 0 6px;letter-spacing:-.4px;}
.login p.desc{color:var(--ink2);font-size:14px;margin:0 0 28px;}
.code-row{display:flex;gap:8px;}
.code-row .input{flex:1;}
.code-row .btn{width:auto;flex:0 0 auto;height:44px;padding:0 14px;font-size:13px;
  background:#fff;border:1px solid var(--line);color:var(--brand);font-weight:600;}
.code-row .btn[disabled]{color:var(--ink3);opacity:1;background:#f7f8fa;}
.legal{font-size:11px;color:var(--ink3);text-align:center;margin-top:22px;line-height:1.7;}

/* ---------- oauth ---------- */
.or{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:12px;margin:22px 0 14px;}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line);}
.oauth{display:flex;flex-direction:column;gap:10px;}
.oauth .btn{font-weight:500;}
.oi{width:20px;height:20px;display:inline-grid;place-items:center;flex:0 0 auto;}
.oi svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.oi.wx{color:#07c160;}
.oi.wb{color:#1d4ed8;}

/* ---------- apply card ---------- */
.acard{background:#fff;border-radius:var(--r);border:1px solid var(--line2);padding:13px 14px;
  margin-bottom:9px;position:relative;overflow:hidden;}
.acard:active{background:#fafbfc;}
.acard .top{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px;}
/* 卡片标题用 .ttl，不能叫 .doc —— .doc 是 A4 审批单的纸张容器（16mm 内边距 + 阴影），
   同名会把列表卡撑成一块白纸，这个坑踩过一次 */
.acard .ttl{font-size:15px;font-weight:600;line-height:1.35;flex:1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.acard .meta{font-size:12px;color:var(--ink3);display:flex;flex-wrap:wrap;gap:4px 10px;}
.acard .flag{position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0 2px 2px 0;}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:22px;}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1.5px;background:var(--line);}
.tl-item{position:relative;padding-bottom:16px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-21px;top:5px;width:9px;height:9px;border-radius:50%;
  background:#fff;border:2px solid var(--line);}
.tl-item.done::before{background:var(--ok);border-color:var(--ok);}
.tl-item.now::before{background:var(--brand);border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(29,78,216,.14);}
.tl-item.rej::before{background:var(--danger);border-color:var(--danger);}
.tl-item .t{font-size:13px;font-weight:600;}
.tl-item .d{font-size:12px;color:var(--ink3);margin-top:1px;}

/* ---------- stage track ---------- */
.track{display:flex;align-items:center;gap:0;margin:4px 0 2px;}
.track .st{flex:1;height:4px;background:var(--line);}
.track .st:first-child{border-radius:2px 0 0 2px;}
.track .st:last-child{border-radius:0 2px 2px 0;}
.track .st.on{background:var(--brand);}
.track .st.win{background:var(--ok);}
.track .st.lose{background:#b9bec9;}

/* ---------- stat ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.stat{background:#fff;border:1px solid var(--line2);border-radius:var(--r);padding:12px 10px;text-align:center;}
.stat .v{font-size:21px;font-weight:600;letter-spacing:-.5px;line-height:1.2;}
.stat .k{font-size:11px;color:var(--ink3);margin-top:2px;}
.stat.alert .v{color:var(--danger);}

/* ---------- 工作台 ---------- */
.hd.greet{padding-bottom:11px;}
.hd.greet h1{font-size:21px;letter-spacing:-.45px;}
.hd .icobtn{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--ink2);flex:0 0 auto;}
.hd .icobtn:active{background:#e9ebef;}
.hd .icobtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}

/* 待办箱：页面上唯一"需要动手"的区块 */
.todo{background:#fff;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;
  margin-bottom:12px;box-shadow:0 1px 2px rgba(20,23,31,.03);}
.todo-hd{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line2);}
.todo-hd .pip{width:6px;height:6px;border-radius:3px;background:var(--warn);flex:0 0 auto;}
.todo-hd .t{font-size:13px;font-weight:600;color:var(--ink);}
.todo-hd .cnt{margin-left:auto;font-size:12px;color:var(--ink3);}
.td{display:block;width:100%;text-align:left;padding:12px 14px;position:relative;
  border-bottom:1px solid var(--line2);}
.td:last-child{border-bottom:0;}
.td:active{background:#fafbfc;}
.td.urgent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--danger);}
.td .ttl{font-size:14.5px;font-weight:600;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.td .meta{font-size:12px;color:var(--ink3);margin-top:3px;line-height:1.5;word-break:break-word;}
.td .acts{display:flex;gap:7px;margin-top:10px;}
.td .reason{margin-top:7px;font-size:12.5px;color:#a8312c;background:var(--danger-soft);
  border-radius:6px;padding:6px 9px;line-height:1.5;word-break:break-word;}
.td-more{display:block;width:100%;text-align:center;padding:11px 14px;font-size:12.5px;color:var(--ink3);}
.td-more:active{background:#fafbfc;}
.btn.xs{height:31px;padding:0 15px;font-size:13px;border-radius:7px;width:auto;flex:0 0 auto;font-weight:600;}
.btn.xs.ghost{font-weight:500;}

/* 待办清空的正反馈（不能整块消失，否则用户以为没加载出来） */
.clear{display:flex;align-items:center;gap:8px;background:var(--ok-soft);border:1px solid #cfe8d8;
  color:var(--ok);border-radius:var(--r);padding:11px 14px;font-size:13px;font-weight:500;
  margin-bottom:12px;}
.clear svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.3;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}

/* 入口条：只是跳转，不承担"数据摘要"的职责，避免和下方列表重复 */
.entries{display:flex;gap:8px;margin-bottom:14px;}
.entry{flex:1;min-width:0;background:#fff;border:1px solid var(--line2);border-radius:10px;
  height:38px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 4px;
  box-shadow:0 1px 2px rgba(20,23,31,.03);}
.entry:active{background:#fafbfc;}
.entry .ev{font-size:16px;font-weight:600;letter-spacing:-.3px;line-height:1;}
.entry .et{font-size:12px;color:var(--ink3);white-space:nowrap;}
.entry.zero .ev{color:var(--ink3);font-weight:500;}
.entry.danger .ev,.entry.danger .et{color:var(--danger);}

/* 首页快捷操作：一行两个，不再占用独立白卡 */
.quick{display:flex;gap:8px;margin-bottom:4px;}
.quick .btn{width:auto;flex:1;}

.sec-more{margin-left:auto;font-weight:400;font-size:12px;color:var(--ink3);
  display:inline-flex;align-items:center;gap:1px;flex:0 0 auto;}
.sec-more svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.foot{margin:20px 2px 0;font-size:11.5px;color:var(--ink3);text-align:center;line-height:1.7;}

/* ---------- photo ---------- */
.photos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.photo{position:relative;padding-top:100%;border-radius:8px;overflow:hidden;background:#f0f2f5;}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.photo .del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:9px;
  background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:18px;text-align:center;}
.addph{padding-top:100%;border-radius:8px;background:#f7f8fa;border:1px dashed #cfd4dd;
  position:relative;display:grid;place-items:center;}
.addph svg{width:20px;height:20px;stroke:#8b94a3;fill:none;stroke-width:1.6;}

/* ---------- toast / sheet ---------- */
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);z-index:100;
  background:rgba(20,23,31,.92);color:#fff;font-size:13px;padding:9px 16px;border-radius:10px;
  max-width:82vw;text-align:center;animation:up .18s ease-out;}
@keyframes up{from{opacity:0;transform:translate(-50%,8px);}to{opacity:1;transform:translate(-50%,0);}}
.sheet-wrap{position:fixed;inset:0;z-index:90;background:rgba(20,23,31,.36);
  display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:#fff;width:100%;max-width:520px;border-radius:16px 16px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:slide .2s ease-out;}
@keyframes slide{from{transform:translateY(20px);opacity:.6;}to{transform:none;opacity:1;}}
.sheet h3{margin:0 0 4px;font-size:16px;font-weight:600;}
.sheet .sh-sub{font-size:12px;color:var(--ink3);margin-bottom:14px;}
.loading{display:grid;place-items:center;padding:64px 0;color:var(--ink3);font-size:13px;gap:10px;}
.spin{width:20px;height:20px;border:2px solid var(--line);border-top-color:var(--brand);
  border-radius:50%;animation:sp .7s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}
.kv{display:flex;gap:10px;padding:8px 0;font-size:13px;border-bottom:1px solid var(--line2);}
.kv:last-child{border-bottom:0;}
.kv .k{color:var(--ink3);flex:0 0 76px;}
.kv .v{flex:1;text-align:right;word-break:break-word;}