/* 厂区加工与冷库业务系统 · 样式（管理端 / 现场端 / 客户端共用）
 * 颜色均满足 WCAG AA：正文与按钮文字对比度 ≥ 4.5:1（--pri-l 只用于装饰色块） */
:root {
  --pri: #b8531b; --pri-d: #9a4415; --pri-l: #e0702a; --pri-s: #fdf0e6;
  --grn: #2e7a4d; --grn-s: #e6f3eb;
  --blu: #2b6cc9; --blu-s: #e8f0fb;
  --red: #b8321a; --red-s: #fdecea;
  --yel: #8a6100; --yel-s: #fdf5d9;
  --gry: #6b7280; --gry-s: #f0f1f3;
  --tx: #1d2126; --tx2: #4b5260; --tx3: #636a76;
  --bd: #e2e4e8; --bg: #f4f5f7; --sf: #fff;
  --side: #1c2a23; --side-tx: #b7c5bd;
  --r: 8px; --sh: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.07);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 14px/1.6 var(--font); color: var(--tx); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--blu); text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.35; }
h1 { font-size: 20px; } h2 { font-size: 15.5px; } h3 { font-size: 14px; }
p { margin: 0 0 8px; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.t2 { color: var(--tx2); } .t3 { color: var(--tx3); } .red { color: var(--red); } .grn { color: var(--grn); } .pri { color: var(--pri); }
.num { font-variant-numeric: tabular-nums; } .r { text-align: right; } .nw { white-space: nowrap; }
.sm { font-size: 12.5px; } .b { font-weight: 600; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .row.between { justify-content: space-between; } .grow { flex: 1; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mb8 { margin-bottom: 8px; }

/* ---------- 管理端骨架 ---------- */
.hdr { position: sticky; top: 0; z-index: 40; height: 54px; display: flex; align-items: center; gap: 14px; padding-right: 16px; background: var(--sf); border-bottom: 1px solid var(--bd); }
.brand { width: 220px; height: 100%; display: flex; align-items: center; gap: 10px; padding: 0 16px; background: var(--side); color: #fff; font-weight: 600; white-space: nowrap; font-size: 14.5px; }
.brand:hover { text-decoration: none; }
.logo { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 35% 35%, #ffb36b, var(--pri-l) 60%, var(--pri)); }
.hdr .sp { flex: 1; }
.hdr a.lk { color: var(--tx2); font-size: 13px; white-space: nowrap; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.who select { height: 30px; border: 1px solid var(--bd); border-radius: 6px; padding: 0 6px; background: #fff; }
.body { display: flex; min-height: calc(100vh - 54px); }
.side { width: 220px; flex: none; background: var(--side); color: var(--side-tx); padding: 6px 0 40px; position: sticky; top: 54px; height: calc(100vh - 54px); overflow-y: auto; }
.side .g { padding: 10px 0 2px; }
.side .gt { padding: 0 18px 4px; font-size: 12px; color: #94a39a; letter-spacing: .5px; }
.side a { display: flex; justify-content: space-between; align-items: center; padding: 7px 18px 7px 28px; color: var(--side-tx); font-size: 13.5px; border-left: 3px solid transparent; }
.side a:hover { color: #fff; background: rgba(255,255,255,.04); text-decoration: none; }
.side a.on { color: #fff; background: rgba(224,112,42,.18); border-left-color: var(--pri); }
.side a .n { font-size: 11px; background: var(--pri); color: #fff; border-radius: 9px; padding: 0 6px; line-height: 17px; }
.main { flex: 1; min-width: 0; padding: 18px 24px 60px; }
.ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.ph .sub { color: var(--tx3); font-size: 13px; margin-top: 2px; }
.crumb { font-size: 12.5px; color: var(--tx3); margin-bottom: 4px; } .crumb a { color: var(--tx3); }
@media (max-width: 900px) { .side { display: none; } .brand { width: auto; } .main { padding: 14px; } }

/* ---------- 组件 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--bd); border-radius: 6px; background: #fff; cursor: pointer; white-space: nowrap; font-size: 13.5px; color: var(--tx); }
.btn:hover { background: #fafafa; border-color: #c8ccd2; text-decoration: none; }
.btn.p { background: var(--pri); border-color: var(--pri); color: #fff; } .btn.p:hover { background: var(--pri-d); }
.btn.g { background: var(--grn); border-color: var(--grn); color: #fff; } .btn.g:hover { background: #24633e; }
.btn.d { color: var(--red); border-color: #f0c2b8; } .btn.d:hover { background: var(--red-s); }
.btn.s { height: 26px; padding: 0 10px; font-size: 12.5px; }
.btn.t { border-color: transparent; background: transparent; color: var(--blu); padding: 0 6px; height: 26px; }
.btn.lg { height: 46px; font-size: 16px; padding: 0 20px; border-radius: 8px; }
.btn.blk { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.card { background: var(--sf); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--sh); margin-bottom: 16px; }
.card > .hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.card > .hd .hint { color: var(--tx3); font-size: 12.5px; font-weight: 400; }
.card > .bd { padding: 14px 16px; }
.card > .bd.flush { padding: 0; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g21 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); } .g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
@media (max-width: 1100px) { .g4, .g5 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px) { .g2, .g3, .g4, .g5, .g21 { grid-template-columns: minmax(0,1fr); } }

.stat { background: #fff; border: 1px solid var(--bd); border-radius: var(--r); padding: 12px 16px; box-shadow: var(--sh); }
.stat .l { color: var(--tx3); font-size: 12.5px; }
.stat .v { font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 13px; font-weight: 400; color: var(--tx3); margin-left: 3px; }
.stat .f { font-size: 12px; color: var(--tx3); }
.stat.hl { border-top: 3px solid var(--pri); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bd); padding: 0 10px; overflow-x: auto; }
.tabs a { padding: 9px 12px; color: var(--tx2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { text-decoration: none; color: var(--tx); }
.tabs a.on { color: var(--pri); border-bottom-color: var(--pri); font-weight: 600; }
.tabs a .c { font-size: 11.5px; color: var(--tx3); margin-left: 3px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--bd); }

.inp, .sel, .txa { height: 32px; padding: 0 10px; border: 1px solid var(--bd); border-radius: 6px; background: #fff; min-width: 0; }
.txa { height: auto; min-height: 64px; padding: 8px 10px; width: 100%; resize: vertical; }
.inp:focus, .sel:focus, .txa:focus { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(224,112,42,.14); }
.inp[readonly] { background: var(--gry-s); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 20px; }
.form.one { grid-template-columns: 1fr; }
.form.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
.form .fd { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.form .fd.full { grid-column: 1 / -1; }
.form label { font-size: 13px; color: var(--tx2); }
.form label .req { color: var(--red); margin-left: 2px; }
.form .help { font-size: 12px; color: var(--tx3); }
.form .inp, .form .sel { width: 100%; }
@media (max-width: 760px) { .form, .form.three { grid-template-columns: 1fr; } }

/* 选项按钮组（少打字） */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { margin: 0; }
.chips input { display: none; }
.chips span { display: inline-block; padding: 5px 12px; border: 1px solid var(--bd); border-radius: 16px; background: #fff; cursor: pointer; font-size: 13px; color: var(--tx2); user-select: none; }
.chips input:checked + span { border-color: var(--pri); background: var(--pri-s); color: var(--pri-d); font-weight: 600; }
.chips input:disabled + span { opacity: .4; cursor: not-allowed; }

/* 数量步进器 */
.stepper { display: flex; align-items: stretch; }
.stepper button { width: 38px; border: 1px solid var(--bd); background: #fafafa; cursor: pointer; font-size: 18px; }
.stepper button:first-child { border-radius: 6px 0 0 6px; } .stepper button:last-child { border-radius: 0 6px 6px 0; }
.stepper input { flex: 1; border: 1px solid var(--bd); border-left: 0; border-right: 0; text-align: center; height: 34px; min-width: 0; font-size: 15px; font-weight: 600; }

.tw { overflow-x: auto; }
table.tb { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tb th, .tb td { padding: 9px 12px; border-bottom: 1px solid var(--bd); text-align: left; white-space: nowrap; vertical-align: middle; }
.tb th { background: #fafbfc; color: var(--tx2); font-weight: 500; font-size: 13px; }
.tb td.wrap { white-space: normal; min-width: 160px; }
.tb tbody tr:hover { background: #fcfaf7; }
.tb .num, .tb th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tb .empty { text-align: center; color: var(--tx3); padding: 36px 0; }
.tb tr.warn td { background: #fffaf0; }
.tb tfoot td { font-weight: 600; background: #fafbfc; }

.bg { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px; border-radius: 11px; font-size: 12px; white-space: nowrap; background: var(--gry-s); color: var(--gry); }
.bg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bg.green { background: var(--grn-s); color: var(--grn); } .bg.orange { background: var(--pri-s); color: var(--pri-d); }
.bg.blue { background: var(--blu-s); color: var(--blu); } .bg.red { background: var(--red-s); color: var(--red); }
.bg.yellow { background: var(--yel-s); color: var(--yel); } .bg.gray { background: var(--gry-s); color: var(--gry); }
.bg.plain::before { display: none; }

.desc { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 20px; }
.desc.c2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .desc.c4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.desc .k { font-size: 12.5px; color: var(--tx3); }
.desc .v { word-break: break-all; }
.desc .full { grid-column: 1 / -1; }
@media (max-width: 900px) { .desc, .desc.c4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.notice { padding: 9px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 14px; background: var(--blu-s); color: #22508c; }
.notice.warn { background: var(--yel-s); color: #745300; } .notice.danger { background: var(--red-s); color: #942a0e; } .notice.ok { background: var(--grn-s); color: #1f5a37; }

/* 流程步骤条 */
.steps { display: flex; counter-reset: s; }
.steps .st { flex: 1; position: relative; text-align: center; font-size: 12.5px; color: var(--tx3); padding-top: 30px; }
.steps .st::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--gry-s); color: var(--tx3); font-weight: 600; z-index: 1; }
.steps .st::after { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: var(--bd); }
.steps .st:first-child::after { display: none; }
.steps .st.done { color: var(--grn); } .steps .st.done::before { background: var(--grn); color: #fff; content: "✓"; }
.steps .st.done::after, .steps .st.cur::after { background: var(--grn); }
.steps .st.cur { color: var(--pri); font-weight: 600; } .steps .st.cur::before { background: var(--pri); color: #fff; }
.steps .st.skip { opacity: .45; }

/* 确认状态块 */
.cfm { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 10px 12px; background: #fafbfc; border: 1px dashed var(--bd); border-radius: 6px; font-size: 13px; margin-top: 12px; }
.cfm .it { display: flex; align-items: center; gap: 6px; }
.cfm .ok { color: var(--grn); } .cfm .no { color: var(--pri-d); }
.sig { height: 34px; border: 1px solid var(--bd); background: #fff; border-radius: 4px; vertical-align: middle; }

.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; }
.timeline li { position: relative; padding: 0 0 16px 20px; border-left: 2px solid var(--bd); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--tx3); }
.timeline li.done::before { border-color: var(--grn); background: var(--grn); }
.timeline li.cur::before { border-color: var(--pri); background: var(--pri); box-shadow: 0 0 0 4px rgba(224,112,42,.18); }
.timeline .tt { font-weight: 600; } .timeline .tm { color: var(--tx3); font-size: 12px; margin-left: 6px; font-weight: 400; }
.timeline .tx { color: var(--tx2); font-size: 13px; }

.bar { height: 8px; background: var(--gry-s); border-radius: 4px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: var(--grn); }
.bar.warn > i { background: var(--yel); } .bar.danger > i { background: var(--red); }

/* 排产甘特 */
.gantt { position: relative; }
.gantt .axis { display: flex; margin-left: 130px; border-bottom: 1px solid var(--bd); font-size: 11.5px; color: var(--tx3); }
.gantt .axis div { flex: 1; border-left: 1px solid var(--bd); padding-left: 3px; }
.gantt .ln { display: flex; align-items: stretch; border-bottom: 1px solid var(--bd); min-height: 58px; }
.gantt .ln .nm { width: 130px; flex: none; padding: 8px 10px; font-size: 13px; background: #fafbfc; border-right: 1px solid var(--bd); }
.gantt .ln .tr { position: relative; flex: 1; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100%/15 - 1px), #f0f1f3 calc(100%/15 - 1px), #f0f1f3 calc(100%/15)); }
.gantt .blk { position: absolute; top: 7px; bottom: 7px; border-radius: 5px; padding: 3px 7px; font-size: 12px; line-height: 1.35; overflow: hidden; color: #fff; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.gantt .blk.done { background: #8a9a92; } .gantt .blk.run { background: var(--pri); } .gantt .blk.plan { background: var(--blu); } .gantt .blk.conf { outline: 2px solid var(--red); }
.gantt .now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 2; pointer-events: none; }
.gantt .now::after { content: "现在"; position: absolute; top: -18px; left: -12px; font-size: 11px; color: var(--red); white-space: nowrap; }
.gantt .ln + .ln .now::after { display: none; }

/* 冷库格子 / 月台格子 */
.rooms { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 6px; }
.room { border-radius: 6px; padding: 6px 6px 5px; font-size: 12px; border: 1px solid var(--bd); background: #fff; min-height: 64px; cursor: pointer; }
.room:hover { border-color: var(--pri); }
.room .no { font-weight: 700; font-size: 13px; }
.room .who { font-size: 11.5px; color: var(--tx2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.room.free { background: #f7f8f9; color: var(--tx3); }
.room.active { background: var(--grn-s); border-color: #b9dcc6; }
.room.returning { background: var(--yel-s); border-color: #ecd391; }
.room.applying { background: var(--pri-s); border-color: #f2c7a7; }
.chan { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; font-size: 12.5px; color: var(--tx3); }
.chan::after { content: ""; flex: 1; border-top: 1px dashed var(--bd); }
@media (max-width: 1100px) { .rooms { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.docks { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 6px; }
.dock { border: 1px solid var(--bd); border-radius: 6px; padding: 6px; min-height: 70px; font-size: 12px; background: #fff; }
.dock .no { font-weight: 700; }
.dock.busy { background: var(--pri-s); border-color: #f2c7a7; } .dock.wait { background: var(--blu-s); border-color: #c4d7f3; }
@media (max-width: 1100px) { .docks { grid-template-columns: repeat(5, minmax(0,1fr)); } }

/* 二维码 */
.qr { display: inline-block; background: #fff; padding: 8px; border: 1px solid var(--bd); border-radius: 6px; line-height: 0; }
.qrcard { text-align: center; padding: 16px; border: 1px dashed var(--bd); border-radius: 10px; background: #fffdfa; }
.qrcard .code { font-family: var(--mono); font-size: 18px; letter-spacing: 2px; font-weight: 700; margin-top: 6px; }

/* 弹窗 / toast */
.mask { position: fixed; inset: 0; background: rgba(15,20,25,.45); z-index: 100; display: grid; place-items: center; padding: 14px; }
.modal { width: min(560px, 100%); background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(16,24,40,.2); max-height: calc(100vh - 28px); display: flex; flex-direction: column; }
.modal.wide { width: min(820px, 100%); }
.modal .mh { padding: 13px 18px; border-bottom: 1px solid var(--bd); font-weight: 600; }
.modal .mb { padding: 16px 18px; overflow-y: auto; }
.modal .mf { padding: 11px 18px; border-top: 1px solid var(--bd); display: flex; justify-content: flex-end; gap: 8px; }
.toasts { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: #1d2126; color: #fff; padding: 9px 16px; border-radius: 6px; font-size: 13.5px; animation: tin .2s; }
.toast.ok { background: var(--grn); } .toast.err { background: var(--red); }
@keyframes tin { from { opacity: 0; transform: translateY(-6px); } }

/* 签名板 */
.sigpad { border: 1px dashed #c9cdd3; border-radius: 8px; background: #fff; position: relative; }
.sigpad canvas { display: block; width: 100%; height: 150px; touch-action: none; cursor: crosshair; }
.sigpad .ph-t { position: absolute; inset: 0; display: grid; place-items: center; color: #c3c7ce; pointer-events: none; font-size: 15px; }
.sigpad .clr { position: absolute; right: 6px; top: 6px; }

/* 上传占位 */
.upl { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px dashed #c9cdd3; border-radius: 6px; background: #fafbfc; font-size: 13px; color: var(--tx2); cursor: pointer; }
.upl:hover { border-color: var(--pri); }
.file { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px; background: var(--blu-s); color: var(--blu); font-size: 12.5px; }
.file::before { content: "📎"; }
.photo { width: 120px; height: 84px; border-radius: 6px; background: repeating-linear-gradient(135deg, #eef0f2 0 8px, #f7f8f9 8px 16px); border: 1px solid var(--bd); display: grid; place-items: center; font-size: 11.5px; color: var(--tx3); text-align: center; padding: 4px; }

.todo { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--bd); font-size: 13.5px; }
.todo:last-child { border-bottom: 0; }
.todo .ic { width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: 14px; flex: none; }
.empty-s { padding: 28px; text-align: center; color: var(--tx3); }

/* ---------- 手机端（现场端 / 客户端） ---------- */
body.m { background: #e9ebee; }
.phone { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; padding-bottom: 72px; }
@media (min-width: 600px) { body.m { padding: 20px 0; } .phone { min-height: calc(100vh - 40px); border-radius: 22px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.18); } }
.mtop { position: sticky; top: 0; z-index: 30; background: var(--sf); border-bottom: 1px solid var(--bd); height: 50px; display: flex; align-items: center; padding: 0 12px; gap: 8px; }
.mtop .ttl { flex: 1; text-align: center; font-weight: 600; font-size: 16px; }
.mtop .back { width: 56px; color: var(--tx2); font-size: 14px; }
.mtop .act { width: 56px; text-align: right; font-size: 13px; }
.mtop.brandbar { background: linear-gradient(120deg, #1c2a23, #2e5a40); color: #fff; border: 0; height: auto; padding: 14px 14px 16px; display: block; }
.mbody { padding: 12px; }
.mtab { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: 60px; background: #fff; border-top: 1px solid var(--bd); display: flex; z-index: 30; }
@media (min-width: 600px) { .mtab { bottom: 20px; border-radius: 0 0 22px 22px; } }
.mtab a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11.5px; color: var(--tx3); gap: 1px; position: relative; }
.mtab a .i { font-size: 20px; line-height: 1; }
.mtab a.on { color: var(--pri); }
.mtab a:hover { text-decoration: none; }
.mtab a .dot { position: absolute; top: 6px; left: 55%; background: var(--red); color: #fff; font-size: 10px; border-radius: 8px; padding: 0 5px; line-height: 15px; }
.mcard { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 10px; box-shadow: var(--sh); }
.mcard .mt { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.kv { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f1f2f4; font-size: 14px; gap: 10px; }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--tx3); flex: none; } .kv .v { text-align: right; }
.mlist a.it, .mlist div.it { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid #f1f2f4; color: var(--tx); }
.mlist .it:last-child { border-bottom: 0; }
.mlist a.it:hover { text-decoration: none; }
.mbig { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 10px; }
.mbig a { background: #fff; border-radius: 12px; padding: 16px 14px; color: var(--tx); box-shadow: var(--sh); display: flex; flex-direction: column; gap: 4px; }
.mbig a:hover { text-decoration: none; }
.mbig a .i { font-size: 26px; } .mbig a .t { font-weight: 600; font-size: 15px; } .mbig a .d { font-size: 12px; color: var(--tx3); }
.mform .fd { margin-bottom: 14px; }
.mform label { display: block; font-size: 13.5px; color: var(--tx2); margin-bottom: 6px; }
.mform .inp, .mform .sel { width: 100%; height: 42px; font-size: 15px; border-radius: 8px; }
.mform .chips span { padding: 8px 14px; font-size: 14px; }
.mfoot { position: sticky; bottom: 60px; background: linear-gradient(transparent, var(--bg) 30%); padding: 14px 12px 10px; }
.scan { position: relative; aspect-ratio: 1; background: #111; border-radius: 14px; overflow: hidden; display: grid; place-items: center; color: #aaa; }
.scan video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan .frame { grid-area: 1 / 1; width: 62%; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.25); position: relative; border-radius: 8px; }
.scan .frame::before, .scan .frame::after { content: ""; position: absolute; left: 6%; right: 6%; height: 2px; background: #3ddc84; box-shadow: 0 0 10px #3ddc84; top: 10%; animation: scanl 2s infinite ease-in-out; }
.scan .frame::after { display: none; }
@keyframes scanl { 50% { top: 88%; } }
.scan .tip { position: absolute; bottom: 12px; left: 12px; right: 12px; text-align: center; font-size: 13px; color: #e5e7eb; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.prog { display: flex; gap: 4px; margin: 8px 0 2px; }
.prog i { flex: 1; height: 5px; border-radius: 3px; background: var(--gry-s); }
.prog i.d { background: var(--grn); } .prog i.c { background: var(--pri); }

@media print {
  .noprint { display: none !important; }
  body { background: #fff; }
}

/* ---------- 无障碍与交互（ui-ux-pro-max 审查后补充） ---------- */
:focus-visible { outline: 2px solid var(--blu); outline-offset: 2px; }
.inp:focus-visible, .sel:focus-visible, .txa:focus-visible { outline: none; }
.chips input:focus-visible + span { outline: 2px solid var(--blu); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ico { flex: none; vertical-align: -3px; }
.btn, .chips span, .side a, .mtab a, .mbig a { transition: background-color .15s ease, border-color .15s ease, color .15s ease; touch-action: manipulation; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .7; }
.btn[aria-busy="true"]::before { content: ""; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.upl.loading { opacity: .7; pointer-events: none; }
.upl:focus-within { border-color: var(--blu); }
a.file { display: inline-flex; align-items: center; gap: 4px; }
.hint { font-size: 12.5px; color: var(--tx3); margin-top: 4px; }
.ferr { font-size: 12.5px; color: var(--red); margin-top: 4px; }
.boot-err { max-width: 420px; margin: 18vh auto; padding: 24px; text-align: center; }
.boot-err h1 { margin-bottom: 8px; }
.who .btn { height: 30px; }
.who .nm { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- 登录页 ---------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 460px); background: var(--sf); }
.login .art { position: relative; background: var(--side) url(img/scene.jpg) center / cover; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 48px; }
.login .art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,26,21,.15) 30%, rgba(16,26,21,.85)); }
.login .art > * { position: relative; }
.login .art h2 { font-size: 26px; margin-bottom: 8px; }
.login .art p { opacity: .85; font-size: 14px; margin: 0; max-width: 520px; }
.login .pane { display: flex; flex-direction: column; justify-content: center; padding: 40px 48px; }
.login .pane .brandline { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; margin-bottom: 28px; }
.login h1 { font-size: 22px; margin-bottom: 4px; }
.login .sub { color: var(--tx3); margin-bottom: 24px; }
.login .fd { margin-bottom: 16px; }
.login label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 6px; }
.login .inp { width: 100%; height: 44px; font-size: 16px; }
.login .pw { position: relative; }
.login .pw .inp { padding-right: 48px; }
.login .pw button { position: absolute; right: 2px; top: 2px; width: 44px; height: 40px; border: 0; background: none; color: var(--tx3); cursor: pointer; border-radius: 6px; font-size: 13px; }
.login .err { min-height: 20px; color: var(--red); font-size: 13.5px; margin: -4px 0 10px; }
.login .foot { margin-top: 28px; color: var(--tx3); font-size: 12.5px; }
@media (max-width: 860px) { .login { grid-template-columns: 1fr; } .login .art { min-height: 180px; padding: 24px; } .login .art h2 { font-size: 20px; } .login .pane { padding: 28px 22px; } }

.boot-loading { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40vh; color: var(--tx3); }
.boot-loading::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--bd); border-top-color: var(--pri); border-radius: 50%; animation: spin .8s linear infinite; }

/* 手机端：触控目标 ≥ 44px，输入框 16px 字号（避免 iOS 自动放大） */
body.m .btn { min-height: 44px; }
body.m .btn.s { min-height: 36px; padding: 0 12px; }
body.m .inp, body.m .sel { min-height: 44px; font-size: 16px; }
body.m .txa { font-size: 16px; }
body.m .chips span { padding: 9px 14px; }