:root {
  --h5-bg: #0d1828;
  --h5-surface: #152238;
  --h5-surface2: #1c2d48;
  --h5-border: rgba(255, 255, 255, 0.08);
  --h5-text: #eef3fb;
  --h5-muted: #8fa3bf;
  --h5-primary: #3b82f6;
  --h5-primary-dark: #2563eb;
  --h5-accent: #10b981;
  --h5-warn: #f59e0b;
  --h5-danger: #ef4444;
  --h5-radius: 12px;
  --h5-tab-h: 56px;
  --h5-safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--h5-bg);
  color: var(--h5-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--h5-primary); text-decoration: none; }

.h5-body { min-height: 100dvh; }

.h5-app {
  min-height: 100dvh;
  padding-bottom: calc(var(--h5-tab-h) + var(--h5-safe-b) + 12px);
}

.h5-app:has(.h5-login) { padding-bottom: 0; }

/* Header */
.h5-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 16px 12px;
  background: linear-gradient(180deg, #1a3050 0%, var(--h5-bg) 100%);
}

.h5-header-simple { display: block; }

.h5-header-eyebrow {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--h5-muted);
  letter-spacing: 0.05em;
}

.h5-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}

.h5-header p {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--h5-muted);
}

.h5-header-link {
  font-size: 13px;
  color: var(--h5-muted);
  padding: 6px 10px;
  border: 1px solid var(--h5-border);
  border-radius: 8px;
}

.h5-back {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--h5-muted);
}

/* Stats */
.h5-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 12px 16px;
}

.h5-stat {
  background: var(--h5-surface);
  border: 1px solid var(--h5-border);
  border-radius: var(--h5-radius);
  padding: 12px 8px;
  text-align: center;
}

.h5-stat strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.h5-stat span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--h5-muted);
}

/* Section */
.h5-section { padding: 0 12px 16px; }

.h5-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.h5-section-head h2,
.h5-section-title {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
}

.h5-section-head a { font-size: 13px; }

/* Cards */
.h5-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 16px;
}

.h5-card {
  display: block;
  background: var(--h5-surface);
  border: 1px solid var(--h5-border);
  border-radius: var(--h5-radius);
  padding: 14px;
  color: inherit;
}

.h5-card-action { padding-bottom: 12px; }

.h5-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.h5-card h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}

.h5-card-sub {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--h5-muted);
}

.h5-card-meta {
  margin: 0;
  font-size: 12px;
  color: var(--h5-muted);
}

.h5-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.h5-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #6ee7b7;
}

.h5-badge-warn {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
}

/* Detail */
.h5-detail {
  margin: 0 12px 16px;
  background: var(--h5-surface);
  border: 1px solid var(--h5-border);
  border-radius: var(--h5-radius);
  overflow: hidden;
}

.h5-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--h5-border);
  font-size: 14px;
}

.h5-detail-row:last-child { border-bottom: none; }

.h5-detail-row span { color: var(--h5-muted); flex-shrink: 0; }

.h5-detail-row strong,
.h5-detail-row a {
  text-align: right;
  word-break: break-all;
}

/* Quick actions */
.h5-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px 20px;
}

.h5-quick-btn {
  display: block;
  text-align: center;
  padding: 14px;
  background: var(--h5-surface2);
  border: 1px solid var(--h5-border);
  border-radius: var(--h5-radius);
  color: var(--h5-text);
  font-weight: 500;
}

/* Piece list */
.h5-piece-list {
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.h5-piece-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  background: var(--h5-surface);
  border: 1px solid var(--h5-border);
  border-radius: var(--h5-radius);
}

.h5-piece-item strong {
  display: block;
  font-size: 15px;
}

.h5-piece-item span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--h5-muted);
}

.h5-piece-item em {
  font-style: normal;
  font-size: 17px;
  font-weight: 700;
  color: var(--h5-accent);
}

/* Form */
.h5-form { display: flex; flex-direction: column; gap: 12px; }

.h5-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h5-field span {
  font-size: 13px;
  color: var(--h5-muted);
}

.h5-input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--h5-border);
  border-radius: 10px;
  background: var(--h5-surface2);
  color: var(--h5-text);
  font-size: 15px;
  outline: none;
}

.h5-input:focus {
  border-color: var(--h5-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.h5-textarea { min-height: 72px; resize: vertical; }

.h5-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.h5-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.h5-btn-block { width: 100%; margin-top: 4px; }

.h5-btn-primary {
  background: var(--h5-primary);
  color: #fff;
}

.h5-btn-primary:active { background: var(--h5-primary-dark); }

.h5-btn-accent {
  background: var(--h5-accent);
  color: #fff;
}

/* Login */
.h5-login {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
}

.h5-login-brand {
  text-align: center;
  margin-bottom: 32px;
}

.h5-login-icon {
  font-size: 48px;
  margin-bottom: 12px;
}

.h5-login-brand h1 {
  margin: 0 0 6px;
  font-size: 26px;
}

.h5-login-brand p {
  margin: 0;
  color: var(--h5-muted);
  font-size: 14px;
}

.h5-hint {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--h5-muted);
}

.h5-hint-err { color: var(--h5-danger); }

.h5-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--h5-muted);
  font-size: 14px;
}

/* Tab bar */
.h5-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--h5-tab-h) + var(--h5-safe-b));
  padding-bottom: var(--h5-safe-b);
  background: rgba(13, 24, 40, 0.96);
  border-top: 1px solid var(--h5-border);
  backdrop-filter: blur(12px);
}

.h5-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--h5-muted);
  font-size: 11px;
  padding: 6px 0;
}

.h5-tab-icon { font-size: 20px; line-height: 1; }

.h5-tab.is-active { color: var(--h5-primary); }

.h5-menu { padding: 0 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.h5-push-card {
  margin: 0 12px 12px;
  padding: 14px 16px;
  background: var(--h5-surface);
  border: 1px solid var(--h5-border);
  border-radius: var(--h5-radius);
}
.h5-push-head strong { display: block; font-size: 15px; margin-bottom: 4px; }
.h5-push-status { margin: 0 0 12px; font-size: 13px; color: var(--h5-muted); line-height: 1.45; }
.h5-btn-disabled { opacity: 0.72; }
.h5-menu-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: var(--h5-surface); border: 1px solid var(--h5-border);
  border-radius: var(--h5-radius); color: var(--h5-text); font-size: 15px;
}
.h5-menu-item em { font-style: normal; background: var(--h5-danger); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
.h5-menu-danger { color: var(--h5-danger); }
.h5-msg.is-unread { border-color: rgba(59, 130, 246, 0.4); }

.h5-toast {
  position: fixed; left: 50%; bottom: calc(var(--h5-tab-h) + 24px); transform: translateX(-50%);
  background: rgba(0,0,0,0.85); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 14px; z-index: 200; opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.h5-toast.show { opacity: 1; }

/* ============================================================================
 * 移动端增强（2026-10）：吸顶头部、5 栏标签、按压反馈、表单、上传、骨架
 * ========================================================================= */

/* 修复：底部导航共 5 项，原样式按 4 列导致溢出 */
.h5-tabbar { grid-template-columns: repeat(5, 1fr) !important; }

.h5-body {
  overscroll-behavior-y: contain;
  -webkit-tap-highlight-color: transparent;
}

/* 吸顶头部 */
.h5-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(26, 48, 80, .98) 0%, rgba(13, 24, 40, .94) 100%);
}

.h5-header h1 { font-size: 21px; letter-spacing: .3px; }
.h5-back { padding: 4px 0; min-height: 28px; }

/* 卡片按压反馈 */
.h5-card,
.h5-quick-btn,
.h5-menu-item,
.h5-piece-item { transition: transform .12s ease, border-color .12s ease, background .12s ease; }

.h5-card:active,
.h5-quick-btn:active,
.h5-menu-item:active,
.h5-piece-item:active {
  transform: scale(.985);
  border-color: rgba(59, 130, 246, .45);
  background: var(--h5-surface2);
}

.h5-quick-btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 20px 16px;
  font-size: 15px;
}

.h5-card h3 { line-height: 1.35; }

/* 统计卡 */
.h5-stats { grid-template-columns: repeat(4, 1fr); }

.h5-stat strong { font-size: 19px; letter-spacing: .2px; }

/* 列表项箭头 */
.h5-card { position: relative; }
.h5-card::after {
  content: '›';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(143, 163, 191, .5);
  font-size: 20px;
  line-height: 1;
}

.h5-detail-row a { color: #93c5fd; }

/* 表单：大触控区 + 日期适配 */
.h5-input {
  min-height: 46px;
  font-size: 16px; /* iOS 防止自动缩放 */
}

.h5-input[type="date"],
.h5-input[type="datetime-local"] { color-scheme: dark; }

.h5-textarea { min-height: 84px; }

.h5-btn { min-height: 46px; }

.h5-btn:active { transform: scale(.99); }

.h5-btn-ghost {
  background: transparent;
  border: 1px solid var(--h5-border);
  color: var(--h5-text);
}

/* 表单分组 */
.h5-form-card {
  margin: 0 12px 14px;
  padding: 14px;
  background: var(--h5-surface);
  border: 1px solid var(--h5-border);
  border-radius: var(--h5-radius);
}

.h5-form-card h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}

/* 图片上传预览 */
.h5-upload {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.h5-upload__item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--h5-surface2);
  border: 1px dashed var(--h5-border);
}

.h5-upload__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.h5-upload__item span {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .6);
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

.h5-upload__add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px dashed rgba(143, 163, 191, .45);
  color: var(--h5-muted);
  font-size: 12px;
  cursor: pointer;
}

.h5-upload__add b { font-size: 20px; font-weight: 400; }

.h5-file-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* 底部操作条 */
.h5-actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  gap: 8px;
  padding: 10px 12px calc(10px + var(--h5-safe-b));
  background: rgba(13, 24, 40, .97);
  border-top: 1px solid var(--h5-border);
  backdrop-filter: blur(12px);
}

.h5-actionbar .h5-btn { flex: 1; }

.h5-body.has-actionbar .h5-app { padding-bottom: calc(74px + var(--h5-safe-b)); }
.h5-body.has-actionbar .h5-tabbar { display: none; }

/* 空状态 */
.h5-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--h5-muted);
  font-size: 13.5px;
  line-height: 1.8;
}

.h5-empty::before {
  content: '📭';
  display: block;
  font-size: 34px;
  margin-bottom: 8px;
  opacity: .8;
}

/* 骨架屏 */
.h5-skeleton { padding: 12px; }
.h5-skeleton i {
  display: block;
  height: 76px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #16253b 25%, #1d3050 37%, #16253b 63%);
  background-size: 400% 100%;
  animation: h5Shimmer 1.3s ease infinite;
}
@keyframes h5Shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* 提示条 */
.h5-note {
  margin: 0 12px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #bfdbfe;
  background: rgba(59, 130, 246, .12);
  border: 1px solid rgba(59, 130, 246, .22);
}

/* 刷新提示 */
.h5-refresh {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translate(-50%, -60px);
  z-index: 120;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(59, 130, 246, .92);
  color: #fff;
  font-size: 12px;
  transition: transform .2s ease;
  pointer-events: none;
}

.h5-refresh.is-show { transform: translate(-50%, 0); }

/* 小屏适配 */
@media (max-width: 360px) {
  .h5-stats { grid-template-columns: repeat(2, 1fr); }
  .h5-header h1 { font-size: 19px; }
}

/* 横屏 */
@media (orientation: landscape) and (max-height: 480px) {
  .h5-header { position: static; }
  .h5-login { padding: 20px; }
}

/* 上传按钮（整行） */
label.h5-upload__add {
  aspect-ratio: auto;
  height: 48px;
  flex-direction: row;
  gap: 6px;
  font-size: 13.5px;
}

/* ========== 现场作业（P0 · 扫码/打卡/拍照/清单/签名） ========== */
.h5-field-hero{padding:14px 16px 10px;background:linear-gradient(160deg,#0d1828,#132743);color:#fff}
.h5-field-hero h1{font-size:17px;margin:0 0 4px;font-weight:600}
.h5-field-hero p{margin:0;font-size:12px;color:rgba(255,255,255,.66);line-height:1.5}
.h5-field-hero a{color:#7dd3fc;text-decoration:none}
.h5-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:12px 16px 0}
.h5-step{background:#f1f5f9;border-radius:10px;padding:8px 6px;text-align:center;font-size:11px;color:#64748b}
.h5-step b{display:block;font-size:15px;color:#0f172a;margin-bottom:2px}
.h5-step.is-done{background:#ecfdf5;color:#047857}
.h5-step.is-done b{color:#059669}
.h5-step.is-warn{background:#fff7ed;color:#b45309}
.h5-step.is-warn b{color:#d97706}
.h5-check-card{background:#fff;border-radius:14px;margin:12px 16px;padding:14px}
.h5-check-card h3{margin:0 0 10px;font-size:14px;display:flex;align-items:center;justify-content:space-between}
.h5-check-card h3 small{font-weight:400;color:#94a3b8;font-size:11px}
.h5-check-row{padding:10px 0;border-bottom:1px dashed #e2e8f0}
.h5-check-row:last-child{border-bottom:0}
.h5-check-row__name{font-size:13px;line-height:1.5;color:#0f172a}
.h5-check-row__name em{color:#dc2626;font-style:normal;font-size:11px;margin-left:4px}
.h5-verdict{display:flex;gap:6px;margin-top:8px}
.h5-verdict button{flex:1;border:1px solid #e2e8f0;background:#fff;border-radius:8px;padding:6px 0;font-size:12px;color:#475569}
.h5-verdict button.is-ok{background:#059669;border-color:#059669;color:#fff}
.h5-verdict button.is-bad{background:#dc2626;border-color:#dc2626;color:#fff}
.h5-verdict button.is-na{background:#64748b;border-color:#64748b;color:#fff}
.h5-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.h5-photo-grid figure{margin:0;position:relative;border-radius:10px;overflow:hidden;background:#f1f5f9;aspect-ratio:1}
.h5-photo-grid img{width:100%;height:100%;object-fit:cover;display:block}
.h5-photo-grid figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(15,23,42,.62);color:#fff;font-size:10px;padding:2px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h5-sign-wrap{border:1px dashed #cbd5e1;border-radius:12px;background:#f8fafc;position:relative}
.h5-sign-wrap canvas{width:100%;height:170px;display:block;touch-action:none;border-radius:12px}
.h5-sign-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:12px;pointer-events:none}
.h5-sign-img{width:100%;border-radius:12px;background:#fff;border:1px solid #e2e8f0}
.h5-draft-tip{margin:12px 16px 0;background:#eff6ff;color:#1d4ed8;border-radius:10px;padding:8px 12px;font-size:12px;display:flex;justify-content:space-between;align-items:center}
.h5-draft-tip button{border:0;background:transparent;color:#1d4ed8;font-size:12px;text-decoration:underline}
.h5-mini{font-size:11px;color:#94a3b8}