:root {
  /* 冷色深空底（对齐 ASTRA 风格）：深蓝夜幕 + 冷白/蓝紫星云；金色仅用于 UI 强调 */
  --bg-0: #070913;
  --bg-1: #0d1020;
  --panel: rgba(19, 22, 40, 0.66);
  --panel-solid: #101322;
  --line: rgba(168, 176, 205, 0.14);
  --line-strong: rgba(226, 231, 248, 0.3);
  --gold: #d4af69;
  --gold-soft: #e8d5a3;
  --gold-deep: #a67c3a;
  --ink: #eceef7;
  --muted: #8f93ab;
  --danger: #e07a6a;
  --ok: #6fd0a8;
  --warn: #d4a85c;
  --shadow: 0 24px 80px rgba(2, 4, 12, 0.55);
  --radius: 18px;
  --serif: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-lux: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html, body {
  /* 禁止页面级捏合缩放（允许平移滚动）；灯箱自身 touch-action:none 不受影响 */
  touch-action: pan-x pan-y;
}
/* 页面不可见（切后台/锁屏）时由 JS 加 is-hidden：暂停全部动画与过渡，
   GPU 空闲，降低设备占用与发热；回前台恢复播放 */
body.is-hidden *,
body.is-hidden *::before,
body.is-hidden *::after {
  animation-play-state: paused !important;
  transition: none !important;
}
body {
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 760px at 50% -12%, #151a33 0%, transparent 60%),
    #070913;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 背景：深空 + 动态 canvas 星野（复刻 ASTRA starfall）──
 * 层次：canvas 190 星缓转（主角）→ 蓝/紫星云渐变 → 静态光晕球 → grain → vignette。
 * canvas 动画在页面隐藏时由 starfield.js 自动暂停，静止态开销极低。 */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  background:
    radial-gradient(620px 460px at 16% -8%, rgba(84, 120, 210, 0.14), transparent 70%),
    radial-gradient(820px 600px at 104% 2%, rgba(120, 84, 210, 0.14), transparent 72%),
    radial-gradient(1200px 760px at 50% 118%, rgba(52, 120, 150, 0.1), transparent 76%);
}
.starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.static-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.static-orb.a {
  width: 520px; height: 520px;
  top: -160px; left: -6%;
  background: radial-gradient(circle, rgba(90, 130, 235, 0.14), transparent 66%);
}
.static-orb.b {
  width: 460px; height: 460px;
  bottom: -120px; right: -4%;
  background: radial-gradient(circle, rgba(140, 90, 235, 0.12), transparent 68%);
}
.static-orb.c {
  width: 360px; height: 360px;
  top: 40%; left: 58%;
  background: radial-gradient(circle, rgba(70, 180, 200, 0.08), transparent 66%);
}
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 46%, rgba(1, 2, 8, 0.55) 100%);
}

/* 切后台时无论动画/过渡一律冻结（低功耗），回前台自动恢复 */
body.is-hidden {
  animation-play-state: paused;
}
body.is-hidden *,
body.is-hidden *::before,
body.is-hidden *::after {
  animation-play-state: paused !important;
  transition: none !important;
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 20px 64px;
}

/* 顶部品牌区：静态渐变 + 一次性入场（无持续动画/逐帧重绘） */
.brand {
  text-align: center;
  margin-bottom: 36px;
  animation: fadeUp 1s var(--ease-lux) both;
}
.brand-mark {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.35em;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--line-strong);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
  background:
    linear-gradient(100deg, rgba(212, 175, 105, 0.04), rgba(232, 213, 163, 0.12), rgba(212, 175, 105, 0.04)) padding-box,
    rgba(212, 175, 105, 0.06);
  animation: markIn 0.9s var(--ease-lux) both;
  box-shadow: none;
}
.brand h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 42px);
  letter-spacing: 0.08em;
  color: var(--gold-soft);
  background: linear-gradient(100deg, #a67c3a 0%, #e8d5a3 35%, #fff6df 50%, #e8d5a3 65%, #a67c3a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: none;
}
.brand-sub {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  animation: fadeUp 1s var(--ease-lux) 0.25s both;
}

/* 徽章/标题辉光改为渐变底一次性淡入（不再逐帧改 box-shadow/background-position） */
@keyframes markIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  background: linear-gradient(165deg, rgba(40, 48, 84, 0.16), rgba(10, 14, 34, 0.26));
  border: 1px solid rgba(214, 222, 250, 0.22);
  border-radius: var(--radius);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 40px rgba(90, 120, 230, 0.06),
    var(--shadow);
  padding: 28px 26px 26px;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,236,255,0.65), transparent);
}
.card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -30%;
  width: 40%;
  height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-120%) rotate(12deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.card:hover::after {
  opacity: 1;
  transform: translateX(360%) rotate(12deg);
  transition: transform 1s var(--ease-out), opacity 0.25s ease;
}
.card-label {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.card h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.hint {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 300;
}

.gate-card {
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.gate-form { margin-top: 22px; text-align: left; }
.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--muted);
}
input[type="password"],
input[type="text"] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input[type="password"]:focus,
input[type="text"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 105, 0.12);
}

.btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
  border-radius: 12px;
  padding: 12px 18px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.06em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), background 0.25s, border-color 0.25s, opacity 0.25s, box-shadow 0.25s;
}
.btn:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: rgba(212, 175, 105, 0.08);
  transform: translateY(-1px);
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.full { width: 100%; }
.btn.sm { padding: 8px 12px; font-size: 12px; }
.btn.primary {
  background: linear-gradient(135deg, #c9a45c 0%, #e8d5a3 45%, #b8924a 100%);
  border-color: transparent;
  color: #1a1208;
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(212, 175, 105, 0.22);
  transition: transform 0.25s var(--ease-out), background 0.25s, border-color 0.25s, opacity 0.25s, box-shadow 0.25s, filter 0.2s;
}
.btn.primary:hover:not(:disabled) {
  filter: brightness(1.06);
  background: linear-gradient(135deg, #d4af69 0%, #f0e0b8 45%, #c9a45c 100%);
  box-shadow: 0 12px 36px rgba(212, 175, 105, 0.35);
}
.btn.ghost {
  background: transparent;
  color: var(--gold-soft);
  border-color: var(--line);
}
.btn.danger {
  background: rgba(224, 122, 106, 0.12);
  border-color: rgba(224, 122, 106, 0.4);
  color: #f0b4aa;
}
@keyframes goldBreathe {
  0%, 100% { box-shadow: 0 8px 28px rgba(212, 175, 105, 0.18); background-position: 0% 50%; }
  50% { box-shadow: 0 10px 36px rgba(212, 175, 105, 0.32); background-position: 100% 50%; }
}

.hidden { display: none !important; }
.muted { color: var(--muted); font-size: 13px; }
.error {
  color: var(--danger);
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 13px;
}
.error.shake {
  animation: shakeX 0.45s var(--ease-out);
}
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}

/* 步骤切换 / 入场 */
.step-card,
.gate-card,
.history-card {
  animation: stepEnter 0.55s var(--ease-lux) both;
}
.step-card.is-leaving {
  animation: stepLeave 0.28s var(--ease-out) both;
  pointer-events: none;
}
@keyframes stepEnter {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.98);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes stepLeave {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
    filter: blur(4px);
  }
}
.workspace-enter {
  animation: workspaceIn 0.7s var(--ease-lux) both;
}
@keyframes workspaceIn {
  from { opacity: 0; transform: translateY(28px); filter: blur(10px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.gate-exit {
  animation: gateOut 0.45s var(--ease-out) both;
}
@keyframes gateOut {
  to { opacity: 0; transform: scale(0.94) translateY(-12px); filter: blur(6px); }
}

.step-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.step-head.compact {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  max-width: 100%;
}
.step-head.compact > div:first-child {
  min-width: 0;
  flex: 1;
}
.step-head.compact .btn {
  flex-shrink: 0;
}
.step-copy {
  flex: 1;
  min-width: 0;
}
.step-num {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold);
  opacity: 0.55;
  line-height: 1;
  min-width: 36px;
  padding-top: 4px;
}

/*
 * 上传 / 审核标题行：同一布局
 *  编号 | label + 标题 + hint | 右侧动画
 *  align-items:center → 编号与文案、动画垂直居中对齐
 */
.step-head.transfer-head,
.step-head.audit-head {
  align-items: center;
  gap: 12px;
}
.step-head.transfer-head .step-copy,
.step-head.audit-head .step-copy {
  flex: 1;
  min-width: 0;
}
.step-head.transfer-head .tech-visual,
.step-head.audit-head .audit-visual {
  margin-left: auto;
  flex-shrink: 0;
}
.step-head.audit-head .step-copy .hint {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── 审核动画：文档流内居中，略大于上传页 tech-visual ── */
.audit-visual {
  position: relative;
  width: 112px;
  height: 112px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(212, 175, 105, 0.35));
  pointer-events: none;
}
.audit-glow {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,105,0.28), transparent 70%);
  pointer-events: none;
}
.audit-visual.is-running .audit-glow {
  animation: techGlowPulse 2s ease-in-out infinite;
}
.audit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  box-sizing: border-box;
  pointer-events: none;
}
.audit-ring.ring-a {
  inset: 2px;
  border-top-color: #f0e0b8;
  border-right-color: rgba(212, 175, 105, 0.45);
  border-bottom-color: transparent;
  border-left-color: rgba(212, 175, 105, 0.12);
}
.audit-ring.ring-b {
  inset: 14px;
  border: 1px dashed rgba(212, 175, 105, 0.35);
}
.audit-visual.is-running .audit-ring.ring-a {
  animation: techSpin 3s linear infinite;
}
.audit-visual.is-running .audit-ring.ring-b {
  animation: techSpin 9s linear infinite reverse;
}
.audit-visual.is-idle .audit-ring.ring-a {
  opacity: 0.55;
}
.audit-visual.is-done .audit-ring.ring-a {
  border-color: rgba(125, 190, 154, 0.55);
  opacity: 0.8;
}
.audit-visual.is-failed .audit-ring.ring-a {
  border-color: rgba(224, 122, 106, 0.55);
}

/* 中间文档卡片 */
.audit-doc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 48px;
  margin: -24px 0 0 -18px;
  border-radius: 4px 4px 3px 3px;
  background:
    linear-gradient(180deg, rgba(255,248,232,0.95), rgba(232,213,163,0.75));
  border: 1px solid rgba(166, 124, 58, 0.45);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  overflow: hidden;
  z-index: 2;
}
.audit-doc .audit-line {
  display: block;
  height: 2px;
  margin: 7px 6px 0;
  border-radius: 1px;
  background: rgba(120, 90, 40, 0.28);
}
.audit-doc .audit-line.short { width: 55%; }
.audit-doc .audit-line:first-child { margin-top: 9px; width: 70%; }

/* 文档内扫描线 */
.audit-scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  top: -10px;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(212, 175, 105, 0.15),
    rgba(255, 241, 196, 0.75),
    rgba(212, 175, 105, 0.15),
    transparent
  );
  opacity: 0;
  pointer-events: none;
}
.audit-visual.is-running .audit-scan {
  opacity: 1;
  animation: auditScanY 2.2s ease-in-out infinite;
}
@keyframes auditScanY {
  0% { top: -8px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 校验印章 / 对勾 */
.audit-seal {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f0e0b8, #a67c3a 70%);
  border: 1.5px solid rgba(255, 241, 196, 0.7);
  box-shadow: 0 2px 10px rgba(212, 175, 105, 0.45);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.audit-visual.is-running .audit-seal {
  animation: auditSealPulse 1.6s ease-in-out infinite;
}
.audit-visual.is-done .audit-seal {
  background: radial-gradient(circle at 35% 30%, #c8f0d8, #4f8a68 70%);
  border-color: rgba(158, 212, 176, 0.8);
  box-shadow: 0 2px 12px rgba(125, 190, 154, 0.45);
}
.audit-visual.is-failed .audit-seal {
  background: radial-gradient(circle at 35% 30%, #f0b4aa, #8a3a32 70%);
  border-color: rgba(224, 122, 106, 0.7);
}
.audit-check {
  width: 8px;
  height: 5px;
  border-left: 2px solid #1a1208;
  border-bottom: 2px solid #1a1208;
  transform: rotate(-45deg) translate(0, -1px);
  box-sizing: border-box;
}
.audit-visual.is-failed .audit-check {
  width: 8px;
  height: 8px;
  border: none;
  transform: none;
  position: relative;
}
.audit-visual.is-failed .audit-check::before,
.audit-visual.is-failed .audit-check::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 2px;
  height: 8px;
  background: #1a1208;
  border-radius: 1px;
}
.audit-visual.is-failed .audit-check::before { transform: rotate(45deg); }
.audit-visual.is-failed .audit-check::after { transform: rotate(-45deg); }

@keyframes auditSealPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* 轨道光点 */
.audit-orbit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.audit-visual.is-running .audit-orbit {
  animation: techSpin 7s linear infinite;
}
.audit-orbit span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff1c4;
  box-shadow: 0 0 8px rgba(255, 241, 196, 0.9);
  top: 50%;
  left: 50%;
  margin: -2px 0 0 -2px;
}
.audit-orbit span:nth-child(1) { transform: rotate(0deg) translateY(-48px); }
.audit-orbit span:nth-child(2) { transform: rotate(90deg) translateY(-48px); opacity: 0.7; width: 3px; height: 3px; }
.audit-orbit span:nth-child(3) { transform: rotate(180deg) translateY(-48px); opacity: 0.55; }
.audit-orbit span:nth-child(4) { transform: rotate(270deg) translateY(-48px); opacity: 0.8; width: 3px; height: 3px; }
.audit-visual.is-idle .audit-orbit span { opacity: 0.35; }
.audit-visual.is-idle .audit-doc { filter: saturate(0.85); }

.drop-zone {
  border: 1px dashed var(--line-strong);
  border-radius: 16px;
  padding: 36px 20px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(120, 150, 235, 0.05), transparent 60%),
    rgba(5, 8, 20, 0.34);
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out), box-shadow 0.3s;
  position: relative;
}
.drop-zone::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  padding: 1px;
  background: conic-gradient(from var(--spin, 0deg), transparent 40%, rgba(212,175,105,0.55), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.drop-zone:hover::before,
.drop-zone.dragover::before {
  opacity: 1;
  animation: spinBorder 2.4s linear infinite;
}
.drop-zone:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.25);
}
.drop-zone.dragover {
  border-color: var(--gold);
  background: rgba(212, 175, 105, 0.08);
  transform: scale(1.02);
  box-shadow: 0 0 40px rgba(212, 175, 105, 0.18);
}
.drop-icon {
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 10px;
  opacity: 0.8;
  display: inline-block;
}
@keyframes spinBorder {
  to { --spin: 360deg; }
}
@property --spin {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.drop-title {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--ink);
}
.drop-sub {
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.file-meta, .file-chip {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(5, 8, 20, 0.38);
  font-size: 13px;
  color: var(--gold-soft);
}

/* 上传进度：全宽，在标题行下方 */
.lux-progress { min-width: 0; margin-top: 2px; }
.lux-progress-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--muted);
}
.lux-progress-top strong {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--gold-soft);
  font-weight: 500;
  transition: color 0.3s;
  text-shadow: 0 0 18px rgba(212, 175, 105, 0.35);
}
.lux-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  border: 1px solid rgba(212, 175, 105, 0.18);
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.35);
}
.lux-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a6528, var(--gold), #fff1c4, var(--gold));
  background-size: 200% 100%;
  box-shadow: 0 0 16px rgba(212, 175, 105, 0.55);
  transition: width 0.35s var(--ease-out), background 0.35s, box-shadow 0.35s;
  position: relative;
}
/* 进行中：进度条本身轻微流光 + 光点滑动（局部，不闪全页） */
.lux-bar-fill.is-active {
  animation: barFlow 2.2s linear infinite;
}
.lux-bar-fill.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: barSoftGlide 1.5s ease-in-out infinite;
  pointer-events: none;
}
.lux-bar-fill.indeterminate {
  width: 38% !important;
  animation: shimmer 1.4s ease-in-out infinite, barFlow 2.2s linear infinite;
}
.lux-bar-fill.indeterminate::after { display: none; }
.lux-bar-fill.done {
  background: linear-gradient(90deg, #5f9e78, #9ed4b0, #c8f0d8);
  box-shadow: 0 0 16px rgba(125, 190, 154, 0.45);
  animation: none;
}
.lux-bar-fill.done::after { display: none; }
.lux-bar-fill.failed {
  background: linear-gradient(90deg, #8a3a32, #e07a6a);
  box-shadow: 0 0 12px rgba(224, 122, 106, 0.3);
  animation: none;
}
.lux-bar-fill.failed::after { display: none; }
.lux-detail {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  min-height: 1.4em;
  transition: opacity 0.2s;
}
@keyframes shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
@keyframes barFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes barSoftGlide {
  0% { transform: translateX(-40%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(260%); opacity: 0; }
}

/* 「上传中」标题右侧科技动画（更醒目）。
   子步骤默认 .hidden → display:none，元素不参与合成；仅 stepTransfer 显示时
   这些常驻无限动画才真正渲染（局部小区域），不影响静止态功耗 */
.tech-visual {
  position: relative;
  width: 100px;
  height: 96px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 12px rgba(212, 175, 105, 0.35));
}
.tech-glow {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,105,0.35), transparent 70%);
  animation: techGlowPulse 2s ease-in-out infinite;
  pointer-events: none;
}
.tech-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  box-sizing: border-box;
}
.tech-ring.ring-a {
  inset: 2px;
  border-top-color: #f0e0b8;
  border-right-color: rgba(212, 175, 105, 0.55);
  border-bottom-color: transparent;
  border-left-color: rgba(212, 175, 105, 0.15);
  box-shadow: 0 0 10px rgba(212, 175, 105, 0.25);
  animation: techSpin 2.4s linear infinite;
}
.tech-ring.ring-b {
  inset: 14px;
  border-bottom-color: #e8d5a3;
  border-left-color: rgba(232, 213, 163, 0.6);
  border-top-color: transparent;
  border-right-color: rgba(232, 213, 163, 0.12);
  animation: techSpin 3.6s linear infinite reverse;
}
.tech-ring.ring-c {
  inset: 26px;
  border: 1px dashed rgba(212, 175, 105, 0.45);
  animation: techSpin 10s linear infinite;
}
.tech-core {
  position: absolute;
  inset: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff8e8, transparent 42%),
    radial-gradient(circle, rgba(232,213,163,0.95), rgba(166,124,58,0.35) 55%, transparent 75%);
  box-shadow:
    0 0 16px rgba(212, 175, 105, 0.65),
    0 0 32px rgba(212, 175, 105, 0.25);
  animation: techCorePulse 1.8s ease-in-out infinite;
}
.tech-scan {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0 55%,
    rgba(255, 241, 196, 0.55) 72%,
    rgba(212, 175, 105, 0.15) 82%,
    transparent 100%
  );
  animation: techSpin 1.8s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.95;
}
.tech-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    transparent 0 78%,
    rgba(255, 255, 255, 0.5) 88%,
    transparent 100%
  );
  animation: techSpin 1.2s linear infinite;
  opacity: 0.7;
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.tech-dots {
  position: absolute;
  inset: 0;
  animation: techSpin 7s linear infinite;
}
.tech-dots span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff1c4;
  box-shadow: 0 0 8px rgba(255, 241, 196, 1), 0 0 14px rgba(212, 175, 105, 0.8);
  top: 50%;
  left: 50%;
  margin: -2.5px 0 0 -2.5px;
}
.tech-dots span:nth-child(1) { transform: rotate(0deg) translateY(-42px); }
.tech-dots span:nth-child(2) { transform: rotate(45deg) translateY(-42px); opacity: 0.75; width: 3px; height: 3px; }
.tech-dots span:nth-child(3) { transform: rotate(90deg) translateY(-42px); opacity: 0.55; }
.tech-dots span:nth-child(4) { transform: rotate(135deg) translateY(-42px); opacity: 0.85; width: 4px; height: 4px; }
.tech-dots span:nth-child(5) { transform: rotate(180deg) translateY(-42px); opacity: 0.6; }
.tech-dots span:nth-child(6) { transform: rotate(225deg) translateY(-42px); opacity: 0.8; }
.tech-dots span:nth-child(7) { transform: rotate(270deg) translateY(-42px); opacity: 0.5; width: 3px; height: 3px; }
.tech-dots span:nth-child(8) { transform: rotate(315deg) translateY(-42px); opacity: 0.95; }

@keyframes techSpin {
  to { transform: rotate(360deg); }
}
@keyframes techCorePulse {
  0%, 100% { opacity: 0.9; }
  50% { opacity: 1; }
}
@keyframes techGlowPulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 0.9; transform: scale(1.08); }
}

.sheet-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
  margin-bottom: 16px;
}
.sheet-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(5, 8, 20, 0.36);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
  user-select: none;
  animation: sheetIn 0.45s var(--ease-lux) both;
}
.sheet-item:nth-child(1) { animation-delay: 0.04s; }
.sheet-item:nth-child(2) { animation-delay: 0.08s; }
.sheet-item:nth-child(3) { animation-delay: 0.12s; }
.sheet-item:nth-child(4) { animation-delay: 0.16s; }
.sheet-item:nth-child(5) { animation-delay: 0.2s; }
.sheet-item:nth-child(6) { animation-delay: 0.24s; }
.sheet-item:nth-child(n+7) { animation-delay: 0.28s; }
@keyframes sheetIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.sheet-item:hover {
  border-color: var(--line-strong);
  background: rgba(212, 175, 105, 0.06);
  transform: translateX(4px);
}
.sheet-item.selected {
  border-color: var(--gold);
  background: rgba(212, 175, 105, 0.12);
  box-shadow: inset 0 0 0 1px rgba(212, 175, 105, 0.2), 0 0 20px rgba(212, 175, 105, 0.08);
}
.sheet-item input {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
}
.sheet-item .name {
  flex: 1;
  font-size: 14px;
}
.sheet-item .tag {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* 强制重审：卡片右上角紧凑勾选 */
.sheets-head {
  justify-content: space-between;
  align-items: flex-start;
}
.sheets-head .step-copy {
  flex: 1;
  min-width: 0;
}
.audit-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(212, 175, 105, 0.3);
  border-radius: 999px;
  background: rgba(212, 175, 105, 0.08);
  cursor: pointer;
  user-select: none;
  flex: 0 0 auto;
  transition: border-color 0.2s, background 0.2s;
}
.audit-option:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 105, 0.14);
}
.audit-option input {
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--gold);
  cursor: pointer;
}
.audit-option-copy {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.audit-option-copy strong {
  color: var(--gold-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.audit-option-copy small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 18px;
  max-width: 100%;
  box-sizing: border-box;
}
/* 审核操作：按钮成组靠右，与卡片内容右缘对齐，不拉满左右两端 */
.actions-row.audit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
}
.actions-left,
.actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 100%;
}
.actions-left {
  justify-content: flex-end;
}
.actions-right {
  justify-content: flex-end;
  /* 不要 flex:1 / margin-left:auto 把按钮甩到贴边或撑出卡片 */
  flex: 0 1 auto;
  margin-left: 0;
}

/* 二次确认弹层 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.hidden { display: none !important; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 12, 0.8);
  animation: fadeIn 0.25s ease both;
}
.modal-card {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: linear-gradient(165deg, rgba(40, 48, 84, 0.12), rgba(12, 15, 36, 0.2));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(214, 222, 250, 0.24);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(2, 4, 12, 0.55), inset 0 1px 0 rgba(255,255,255,0.12);
  padding: 28px 26px 22px;
  animation: modalIn 0.35s var(--ease-lux) both;
}
.modal-card h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--gold-soft);
  letter-spacing: 0.04em;
}
.modal-card .hint {
  margin-top: 10px;
  margin-bottom: 22px;
}
.modal-actions {
  margin-top: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.modal-actions .btn {
  flex: 0 0 auto;
  padding-left: 12px;
  padding-right: 12px;
  white-space: nowrap;
  font-size: 14px;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.progress-panel {
  border: 1px solid rgba(214, 222, 250, 0.14);
  border-radius: 14px;
  background: rgba(7, 11, 26, 0.3);
  padding: 18px;
  min-height: 140px;
  position: relative;
  overflow: hidden;
}
/* 进行中：仅左侧细光条缓慢呼吸，不再整块扫光闪屏 */
.progress-panel.live {
  border-color: rgba(212, 175, 105, 0.28);
  box-shadow: inset 3px 0 0 0 rgba(212, 175, 105, 0.45);
}
.progress-empty { padding: 8px 0; }
.progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.progress-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 14px;
}
.progress-stage {
  margin-top: 8px;
  color: var(--gold-soft);
  font-weight: 500;
  font-size: 15px;
}
.progress-eta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.progress-pct {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--gold-soft);
  min-width: 72px;
  text-align: right;
  line-height: 1;
}
.progress-bar {
  margin-top: 14px;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 105, 0.12);
}
.progress-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a6528, var(--gold), #fff1c4, var(--gold));
  background-size: 200% 100%;
  box-shadow: 0 0 14px rgba(212, 175, 105, 0.45);
  transition: width 0.55s var(--ease-out), background 0.35s;
  position: relative;
}
/* 进行中：进度条流光 + 光点（局部），不闪整页 */
.progress-bar-fill.is-active {
  animation: barFlow 2.2s linear infinite;
}
.progress-bar-fill.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36%;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: barSoftGlide 1.6s ease-in-out infinite;
  pointer-events: none;
}
.progress-bar-fill.failed {
  background: linear-gradient(90deg, #8a3a32, #e07a6a);
}
.progress-bar-fill.failed::after { display: none; }
.progress-bar-fill.completed {
  background: linear-gradient(90deg, #4f8a68, #9ed4b0);
}
.progress-bar-fill.completed::after { display: none; }
.progress-bar-fill.cancelled,
.progress-bar-fill.cancelling {
  background: linear-gradient(90deg, #6b5a8a, #b8a4d8);
}
.progress-bar-fill.cancelled::after,
.progress-bar-fill.cancelling::after { display: none; }
.progress-now {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(212, 175, 105, 0.05);
  border: 1px solid var(--line);
}
.progress-now .k {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.progress-now .v {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  /* 当前操作单行显示：不允许换行，超出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.progress-now .d {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  word-break: break-word;
}
.progress-now .activity-line {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(212, 175, 105, 0.16);
  background: rgba(212, 175, 105, 0.06);
  color: var(--gold-soft);
  font-size: 13px;
  line-height: 1.45;
  /* 当前操作单行显示：不允许换行，超出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-now .activity-line::before {
  content: "当前操作 · ";
  color: var(--muted);
  letter-spacing: 0.04em;
  font-size: 11px;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(125, 190, 154, 0.55);
  animation: pulse 1.4s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(125, 190, 154, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(125, 190, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(125, 190, 154, 0); }
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  transition: border-color 0.25s, background 0.25s;
  /* 标签与数值同一行显示，不允许换行 */
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
}
.stat .k {
  flex: 0 0 auto;
}
.stat:hover {
  border-color: var(--line-strong);
  background: rgba(212, 175, 105, 0.06);
}
.stat .k { font-size: 11px; color: var(--muted); letter-spacing: 0.06em; }
.stat .v {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-top: 0;
  color: var(--gold-soft);
}

.history-list {
  min-height: 60px;
  max-width: 100%;
  /* 移动端/窄屏：随页面整体滚动（不设内部滚动）；
     宽屏一屏布局下由 media 块接管为内部滚动 */
  overflow: visible;
}
.history-list::-webkit-scrollbar {
  width: 6px;
}
.history-list::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 105, 0.3);
  border-radius: 3px;
}
.history-list::-webkit-scrollbar-track {
  background: transparent;
}
/* 内部滚动容器统一定制滚动条：金色细条与历史列表/状态 Tab 风格一致，
   避免宽屏一屏布局下出现系统默认粗滚动条（任务明细内容区、左侧上传/选日期卡、
   步骤卡内滚动区）。移动端这些容器不产生内部滚动，样式无副作用。 */
.details-panes,
.col-left .step-card,
.col-left .step-card .sheet-list,
.col-left .step-card .progress-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 105, 0.3) transparent;
}
.details-panes::-webkit-scrollbar,
.col-left .step-card::-webkit-scrollbar,
.col-left .step-card .sheet-list::-webkit-scrollbar,
.col-left .step-card .progress-panel::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.details-panes::-webkit-scrollbar-track,
.col-left .step-card::-webkit-scrollbar-track,
.col-left .step-card .sheet-list::-webkit-scrollbar-track,
.col-left .step-card .progress-panel::-webkit-scrollbar-track {
  background: transparent;
}
.details-panes::-webkit-scrollbar-thumb,
.col-left .step-card::-webkit-scrollbar-thumb,
.col-left .step-card .sheet-list::-webkit-scrollbar-thumb,
.col-left .step-card .progress-panel::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 105, 0.3);
  border-radius: 3px;
}
.details-panes::-webkit-scrollbar-thumb:hover,
.col-left .step-card::-webkit-scrollbar-thumb:hover,
.col-left .step-card .sheet-list::-webkit-scrollbar-thumb:hover,
.col-left .step-card .progress-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 175, 105, 0.5);
}
/*
 * P3 历史任务卡片：与 step-card/details 面板风格统一
 * - 半透明深色底 + 金色细描边
 * - hover 金色发光
 * - 状态徽章（已完成=ok 绿、失败/已取消=danger、运行中=金色呼吸）
 * - 按钮间距与 .btn 对齐
 */
.history-item {
  display: block;
  padding: 16px 14px;
  margin-bottom: 12px;
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(36, 43, 76, 0.5), rgba(13, 16, 38, 0.58));
  border: 1px solid rgba(214, 222, 250, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 30px rgba(2, 4, 12, 0.3);
  position: relative;
  overflow: hidden;
  animation: historyIn 0.4s var(--ease-lux) both;
  transition: border-color 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), transform 0.35s var(--ease-out), background 0.35s;
  text-align: left;
}
.history-item::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,231,248,0.45), transparent);
  pointer-events: none;
}
.history-item:hover {
  border-color: var(--line-strong);
  background: linear-gradient(165deg, rgba(44, 52, 92, 0.62), rgba(18, 22, 46, 0.66));
  box-shadow: 0 24px 80px rgba(2, 4, 12, 0.55), 0 0 28px rgba(212, 175, 105, 0.1);
  transform: translateY(-1px);
}
.history-block {
  display: inline-grid;
  text-align: left;
  max-width: 100%;
  vertical-align: top;
  box-sizing: border-box;
  column-gap: 12px;
  row-gap: 8px;
  align-items: center;
  justify-items: start;
}
.history-item:hover .history-block {
  border-color: rgba(212, 175, 105, 0.32);
  background: rgba(5, 8, 20, 0.4);
}/* 宽屏：标题列占满剩余宽度，按钮固定右对齐；详情在标题列下方 */
.history-block.is-inline {
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "title actions"
    "meta actions";
}
.history-block.is-inline .history-title { grid-area: title; }
.history-block.is-inline .history-actions {
  grid-area: actions;
  margin-top: 0;
  width: auto;
  justify-content: flex-start;
  justify-self: end;
  align-self: center;
}
.history-block.is-inline .history-meta {
  grid-area: meta;
  /* 宽度由 JS 锁为标题宽，与文件名+徽章一致 */
  justify-self: start;
}

/* 窄屏：标题 → 详情 → 按钮（详情/按钮均对齐标题宽） */
.history-block.is-stacked {
  grid-template-columns: minmax(0, max-content);
  grid-template-areas:
    "title"
    "meta"
    "actions";
  justify-items: start;
}
.history-block.is-stacked .history-title { grid-area: title; }
.history-block.is-stacked .history-meta {
  grid-area: meta;
  justify-self: start;
}
.history-block.is-stacked .history-actions {
  grid-area: actions;
  /* 宽度由 JS 设为标题宽；内部右对齐 → 对齐任务标题右缘 */
  justify-content: flex-end;
  justify-self: start;
  margin-top: 4px;
  box-sizing: border-box;
}

.history-title {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  line-height: 1.45;
  max-width: 100%;
  box-sizing: border-box;
}
.history-title strong {
  font-size: 15px;
  color: var(--gold-soft);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* P3: 运行中徽章金色呼吸动画——仅页面处于运行任务状态（body.task-running，由
   renderProgress 维护）时低频呼吸；浏览历史等静止态不呼吸 */
.badge.running {
  animation: goldBreathe 3s ease-in-out infinite;
}
body:not(.task-running) .badge.running {
  animation: none;
}
.history-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  text-align: left;
  word-break: break-word;
  box-sizing: border-box;
  /* 与标题同宽：由 JS 设置 width = 标题自然宽 */
  max-width: 100%;
}
.history-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  margin-top: 6px;
}
.history-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
/* 「查看更多」按钮：全宽虚线，与历史卡片风格一致 */
.history-more {
  width: 100%;
  justify-content: center;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  background: rgba(5, 8, 20, 0.34);
  color: var(--gold-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  margin-top: 4px;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.history-more:hover {
  border-color: var(--gold);
  background: rgba(212, 175, 105, 0.1);
  color: var(--gold);
}
.history-item:nth-child(1) { animation-delay: 0.03s; }
.history-item:nth-child(2) { animation-delay: 0.06s; }
.history-item:nth-child(3) { animation-delay: 0.09s; }
.history-item:nth-child(4) { animation-delay: 0.12s; }
.history-item:nth-child(5) { animation-delay: 0.15s; }
@keyframes historyIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.history-item:last-child {
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
}
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  background: rgba(212, 175, 105, 0.12);
  color: var(--gold-soft);
  border: 1px solid var(--line);
  flex-shrink: 0;
  white-space: nowrap;
}
.badge.failed {
  background: rgba(224, 122, 106, 0.12);
  color: #f0b4aa;
  border-color: rgba(224, 122, 106, 0.3);
}
.badge.running,
.badge.queued,
.badge.pending,
.badge.cancelling {
  background: rgba(212, 168, 92, 0.12);
  color: var(--warn);
  border-color: rgba(212, 168, 92, 0.3);
}
.badge.completed {
  background: rgba(125, 190, 154, 0.12);
  color: var(--ok);
  border-color: rgba(125, 190, 154, 0.3);
}
.badge.cancelled {
  background: rgba(150, 130, 180, 0.12);
  color: #c4b4e0;
  border-color: rgba(150, 130, 180, 0.3);
}

.foot {
  text-align: center;
  margin-top: 28px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(154, 144, 128, 0.55);
}

code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.92em;
  color: var(--gold-soft);
}

@media (max-width: 560px) {
  .shell { padding: 28px 14px 48px; }
  .card { padding: 20px 14px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .history-item {
    padding: 14px 8px;
  }
  .history-block {
    padding: 12px 14px;
  }

  .step-head.transfer-head,
  .step-head.audit-head {
    flex-wrap: nowrap;
    gap: 10px;
  }
  .step-head.transfer-head .tech-visual {
    width: 72px;
    height: 72px;
  }
  .step-head.audit-head .audit-visual {
    width: 88px;
    height: 88px;
  }
  .tech-dots span:nth-child(1) { transform: rotate(0deg) translateY(-30px); }
  .tech-dots span:nth-child(2) { transform: rotate(45deg) translateY(-30px); }
  .tech-dots span:nth-child(3) { transform: rotate(90deg) translateY(-30px); }
  .tech-dots span:nth-child(4) { transform: rotate(135deg) translateY(-30px); }
  .tech-dots span:nth-child(5) { transform: rotate(180deg) translateY(-30px); }
  .tech-dots span:nth-child(6) { transform: rotate(225deg) translateY(-30px); }
  .tech-dots span:nth-child(7) { transform: rotate(270deg) translateY(-30px); }
  .tech-dots span:nth-child(8) { transform: rotate(315deg) translateY(-30px); }
  .audit-orbit span:nth-child(1) { transform: rotate(0deg) translateY(-36px); }
  .audit-orbit span:nth-child(2) { transform: rotate(90deg) translateY(-36px); }
  .audit-orbit span:nth-child(3) { transform: rotate(180deg) translateY(-36px); }
  .audit-orbit span:nth-child(4) { transform: rotate(270deg) translateY(-36px); }
  .audit-doc {
    width: 30px;
    height: 40px;
    margin: -20px 0 0 -15px;
  }
  .audit-seal {
    width: 18px;
    height: 18px;
    right: 12px;
    bottom: 14px;
  }
  .audit-doc .audit-line {
    margin: 5px 4px 0;
  }
  .audit-doc .audit-line:first-child { margin-top: 7px; }

  /* 审核按钮：整组靠右、可换行，与卡片右内边距对齐 */
  .actions-row.audit-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }
  .actions-left,
  .actions-right {
    width: auto;
    max-width: 100%;
    margin-left: 0;
    flex: 0 1 auto;
    justify-content: flex-end;
  }
  .actions-left .btn,
  .actions-right .btn,
  .actions-row .btn {
    flex: 0 0 auto;
  }
}

/* —— 启动加载动画 —— */
/* 加载占位：透明浮层，露出底层星空；加载期间隐藏主内容防闪现 */
#workspace.workspace {
  position: relative;
}
/* 加载中：主内容（品牌头+左右列）不可见，仅剩 loader 与背后星空 */
#workspace:has(#loaderOverlay:not(.hidden)) #mainGrid {
  visibility: hidden;
}
.loader-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 40px 0;
  background: transparent;
}
.loader-stage {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 多重旋转光环 */
.loader-orbital {
  position: absolute;
  inset: 0;
}
.loader-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.loader-ring.r1 {
  border-top-color: var(--gold);
  border-right-color: rgba(212, 175, 105, 0.35);
  animation: loaderSpin 2.4s linear infinite;
}
.loader-ring.r2 {
  inset: 6px;
  border-bottom-color: rgba(212, 175, 105, 0.45);
  border-left-color: rgba(212, 175, 105, 0.25);
  animation: loaderSpin 1.8s linear infinite reverse;
}
.loader-ring.r3 {
  inset: 14px;
  border-top-color: rgba(212, 175, 105, 0.3);
  animation: loaderSpin 3s var(--ease-lux) infinite;
}
/* 环上粒子 */
.loader-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 6px var(--gold), 0 0 12px rgba(212, 175, 105, 0.4);
}
.loader-particle.p1 { top: -4px; left: 50%; margin-left: -2px; animation: particleA 2.4s linear infinite; }
.loader-particle.p2 { right: -4px; top: 50%; margin-top: -2px; animation: particleB 1.8s linear infinite; }
.loader-particle.p3 { bottom: -4px; left: 50%; margin-left: -2px; animation: particleC 3s linear infinite; }
.loader-particle.p4 { left: -4px; top: 50%; margin-top: -2px; animation: particleD 2.1s linear infinite; }
/* 中芯菱纹 */
.loader-gem {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  background: rgba(212, 175, 105, 0.18);
  transform: rotate(45deg);
  border-radius: 3px;
  border: 1px solid rgba(212, 175, 105, 0.5);
  box-shadow:
    inset 0 0 12px rgba(212, 175, 105, 0.15),
    0 0 24px rgba(212, 175, 105, 0.25);
  animation: gemBreathe 2s var(--ease-lux) infinite;
}
.loader-gem::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 2px;
  background: var(--bg-0);
  transform: rotate(0deg);
}
/* 光晕 */
.loader-glow {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 105, 0.18) 0%, transparent 70%);
  animation: glowBreathe 2s var(--ease-lux) infinite;
}
/* 文字：逐字闪烁 */
.loader-text {
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  gap: 0;
}
.loader-text span {
  display: inline-block;
  animation: letterShimmer 2s var(--ease-lux) infinite;
}
.loader-text span:nth-child(1) { animation-delay: 0s; }
.loader-text span:nth-child(2) { animation-delay: 0.12s; }
.loader-text span:nth-child(3) { animation-delay: 0.24s; }
.loader-text span:nth-child(4) { animation-delay: 0.36s; }
.loader-text span:nth-child(5) { animation-delay: 0.48s; }
.loader-text span:nth-child(6) { animation-delay: 0.60s; }
.loader-text span:nth-child(7) { animation-delay: 0.72s; }

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}
@keyframes particleA {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.5); }
}
@keyframes particleB {
  0%, 100% { opacity: 0.4; transform: scale(1.4); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes particleC {
  0%, 100% { opacity: 0.7; transform: scale(1.1); }
  50% { opacity: 0.2; transform: scale(1.6); }
}
@keyframes particleD {
  0%, 100% { opacity: 0.3; transform: scale(1.5); }
  50% { opacity: 0.9; transform: scale(0.9); }
}
@keyframes gemBreathe {
  0%, 100% { transform: rotate(45deg) scale(1); opacity: 0.85; }
  50% { transform: rotate(45deg) scale(0.82); opacity: 0.45; }
}
@keyframes glowBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.15); }
}
@keyframes letterShimmer {
  0%, 100% { opacity: 0.3; color: var(--muted); }
  50% { opacity: 1; color: var(--gold-soft); }
}

/* ===== 双列布局 ===== */
.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
  align-items: stretch;
}
.col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.col-left {
  gap: 24px;
}
/* 右列明细面板拉伸至与左列（流程 + 历史）总高度一致 */
.col-right .details-card {
  flex: 1;
}
.col .card {
  max-width: 100%;
}

/* ===== 任务明细面板 ===== */
.details-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.details-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.details-head .step-head.compact {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.details-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.details-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(0, 0, 0, 0.35)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23d4af69' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--gold-soft);
  font: inherit;
  font-size: 13px;
  padding: 8px 32px 8px 12px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  max-width: 220px;
  text-overflow: ellipsis;
}
.details-select:hover {
  border-color: var(--line-strong);
}
.details-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 105, 0.12);
}
.details-select option {
  background: var(--panel-solid);
  color: var(--ink);
}

.status-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 105, 0.3) transparent;
}
.status-tabs::-webkit-scrollbar { height: 4px; }
.status-tabs::-webkit-scrollbar-track { background: transparent; }
.status-tabs::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 105, 0.3);
  border-radius: 999px;
}
.tab-item {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  flex: 1 1 auto;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.tab-item:hover {
  color: var(--gold-soft);
  background: rgba(212, 175, 105, 0.05);
}
.tab-item.is-active {
  color: var(--gold-soft);
  border-bottom-color: var(--gold);
}
.tab-item:focus-visible {
  outline: none;
  border-bottom-color: var(--gold);
}
.tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(212, 175, 105, 0.14);
  color: var(--gold-soft);
  border: 1px solid rgba(212, 175, 105, 0.3);
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}
.tab-item.is-active .tab-badge {
  background: rgba(212, 175, 105, 0.25);
  border-color: var(--gold);
}

.details-panes {
  min-width: 0;
}
.detail-pane {
  display: none;
}
.detail-pane.is-active {
  display: block;
  animation: paneIn 0.3s var(--ease-lux) both;
}
@keyframes paneIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== 明细空态（静态装饰：默认视图长时间驻留，避免常驻旋转合成）===== */
.details-empty {
  padding: 56px 20px;
  text-align: center;
}
.empty-orbit {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
}
.empty-orbit::before,
.empty-orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid transparent;
  box-sizing: border-box;
}
.empty-orbit::before {
  border-top-color: rgba(212, 175, 105, 0.8);
  border-right-color: rgba(212, 175, 105, 0.35);
  transform: rotate(18deg);
}
.empty-orbit::after {
  inset: 10px;
  border-bottom-color: rgba(232, 213, 163, 0.6);
  border-left-color: rgba(212, 175, 105, 0.25);
  transform: rotate(-24deg);
}
.empty-orbit span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 8px rgba(212, 175, 105, 0.35);
  top: 50%;
  left: 50%;
  margin: -2.5px 0 0 -2.5px;
  opacity: 0.5;
}
.empty-orbit span:nth-child(1) { transform: rotate(0deg) translateY(-36px); }
.empty-orbit span:nth-child(2) { transform: rotate(90deg) translateY(-36px); }
.empty-orbit span:nth-child(3) { transform: rotate(180deg) translateY(-36px); }
.empty-orbit span:nth-child(4) { transform: rotate(270deg) translateY(-36px); }
.empty-copy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.empty-copy small {
  font-size: 12px;
}

/* ===== 记录卡片 ===== */
.record-card {
  background: linear-gradient(165deg, rgba(40, 48, 84, 0.18), rgba(12, 16, 38, 0.28));
  border: 1px solid rgba(214, 222, 250, 0.14);
  border-radius: 12px;
  padding: 14px 14px 12px;
  margin-bottom: 10px;
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out), box-shadow 0.25s;
  animation: recordIn 0.35s var(--ease-lux) both;
}
.record-card:last-child {
  margin-bottom: 0;
}
.record-card:hover {
  border-color: rgba(212, 175, 105, 0.4);
  background: rgba(212, 175, 105, 0.05);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}
@keyframes recordIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.record-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.record-sn {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  color: var(--gold-soft);
  flex: 1;
  min-width: 0;
  word-break: break-all;
}
.record-meta {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  flex-shrink: 0;
  text-align: right;
}
.record-reason {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.55;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
  transition: color 0.2s;
}
.record-reason:hover {
  color: var(--gold-soft);
}
.record-reason.expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}
.record-toggle {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gold);
  cursor: pointer;
  transition: color 0.2s;
}
.record-toggle:hover {
  color: var(--gold-soft);
}
.record-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  margin-top: 10px;
}
.record-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
.record-actions-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.record-fields {
  flex: 1 1 100%;
  min-width: 0;
  overflow-x: auto;
  margin-bottom: 8px;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
}
/* 数据表格作为卡片直子元素时（如已审核卡）：与标题区留出间距 */
.record-card > .record-fields {
  margin-top: 10px;
}
.record-fields:hover,
.record-fields:focus-within {
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 105, 0.35) transparent;
}
.record-fields::-webkit-scrollbar {
  height: 4px;
}
.record-fields::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}
.record-fields:hover::-webkit-scrollbar-thumb,
.record-fields:focus-within::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 105, 0.35);
}
.record-fields-inner {
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(212, 175, 105, 0.03);
}
.rf-row {
  display: table-row;
}
.rf-th,
.rf-td {
  display: table-cell;
  vertical-align: middle;
  padding: 5px 12px;
  text-align: left;
  border-right: 1px solid var(--line);
}
.rf-th:last-child,
.rf-td:last-child {
  border-right: none;
}
.rf-th {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  background: rgba(212, 175, 105, 0.08);
  border-bottom: 1px solid var(--line-strong);
  font-weight: 600;
}
.rf-td {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: var(--gold-soft);
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background 0.18s ease;
}
.rf-td:hover {
  background: rgba(212, 175, 105, 0.1);
}
.rf-td.imei {
  max-width: 280px;
}

.btn-approve {
  background: rgba(125, 190, 154, 0.12);
  border-color: rgba(125, 190, 154, 0.4);
  color: var(--ok);
}
.btn-approve:hover:not(:disabled) {
  background: rgba(125, 190, 154, 0.2);
  border-color: rgba(125, 190, 154, 0.65);
  box-shadow: 0 0 18px rgba(125, 190, 154, 0.22);
  color: var(--ok);
}
.btn-review {
  background: rgba(212, 168, 92, 0.12);
  border-color: rgba(212, 168, 92, 0.4);
  color: var(--warn);
}
.btn-review:hover:not(:disabled) {
  background: rgba(212, 168, 92, 0.2);
  border-color: rgba(212, 168, 92, 0.65);
  box-shadow: 0 0 18px rgba(212, 168, 92, 0.22);
  color: var(--warn);
}

/* ===== 跳过原因小徽章 ===== */
.badge-skip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.04em;
  border: 1px solid;
  flex-shrink: 0;
  white-space: nowrap;
}
.badge-skip.region {
  background: rgba(120, 150, 180, 0.12);
  color: #9db8cf;
  border-color: rgba(120, 150, 180, 0.35);
}
.badge-skip.field {
  background: rgba(212, 168, 92, 0.12);
  color: var(--warn);
  border-color: rgba(212, 168, 92, 0.35);
}
.badge-skip.approved {
  background: rgba(125, 190, 154, 0.12);
  color: var(--ok);
  border-color: rgba(125, 190, 154, 0.35);
}
.badge-skip.other {
  background: rgba(154, 144, 128, 0.1);
  color: var(--muted);
  border-color: rgba(154, 144, 128, 0.3);
}

/* ===== 凭证缩略图 ===== */
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.thumb {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  object-fit: cover;
  display: block;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb:hover {
  transform: scale(1.04);
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(212, 175, 105, 0.22);
}
.thumb:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 105, 0.18);
}
.thumb-pdf {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line);
  cursor: pointer;
  padding: 0;
  box-sizing: border-box;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
}
.thumb-pdf:hover {
  transform: scale(1.04);
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(212, 175, 105, 0.22);
}
.thumb-pdf img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-pdf .pdf-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
  color: var(--gold-soft);
  background: rgba(14, 12, 18, 0.78);
  border: 1px solid rgba(212, 175, 105, 0.45);
  white-space: nowrap;
  pointer-events: none;
}
/* 加载失败降级为文字卡片 */
.thumb-pdf.has-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
}
.thumb-pdf.has-fallback .pdf-badge {
  position: static;
}
.thumb-pdf.has-fallback small {
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
  max-width: 100%;
  padding: 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* ===== 无记录搜索结果 ===== */
.reason-flag {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 4px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  vertical-align: 1px;
  letter-spacing: 0.05em;
}
.search-result {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 8, 20, 0.36);
  padding: 12px 14px;
  margin-bottom: 10px;
  animation: recordIn 0.35s var(--ease-lux) both;
}
.nas-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.search-path {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
  line-height: 1.5;
}
.search-miss {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ok);
  letter-spacing: 0.04em;
}
.search-miss::before {
  content: "✓";
  margin-right: 6px;
  font-weight: 600;
}
.search-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.search-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(212, 175, 105, 0.2);
  border-top-color: var(--gold);
  animation: loaderSpin 0.9s linear infinite;
}


/* ===== 明细凭证自动展开（人工复核/无记录/已跳过） ===== */
.proof-block {
  margin-top: 10px;
  min-height: 28px;
}
.proof-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 0;
}
.proof-loading::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(212, 175, 105, 0.2);
  border-top-color: var(--gold);
  animation: loaderSpin 0.9s linear infinite;
}
.proof-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 6px 0;
  line-height: 1.5;
}
.proof-error {
  color: var(--danger);
}

.no-record-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(5, 8, 20, 0.36);
}
.no-record-toolbar-copy {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  flex: 1 1 240px;
  min-width: 0;
}
.no-record-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.proof-judged {
  color: var(--ok);
}

.record-skip-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.btn-recheck {
  background: rgba(125, 190, 154, 0.08);
  border-color: var(--line);
  color: var(--muted);
  opacity: 0.7;
}
.btn-recheck.is-ready {
  background: rgba(125, 190, 154, 0.12);
  border-color: rgba(125, 190, 154, 0.45);
  color: var(--ok);
  opacity: 1;
}
.btn-recheck.is-ready:hover:not(:disabled) {
  background: rgba(125, 190, 154, 0.2);
  border-color: rgba(125, 190, 154, 0.65);
  box-shadow: 0 0 18px rgba(125, 190, 154, 0.22);
}

/* ===== 备注输入 ===== */
.remark-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.35);
  resize: vertical;
  min-height: 76px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.remark-input::placeholder {
  color: var(--muted);
}
.remark-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 105, 0.12), 0 0 20px rgba(212, 175, 105, 0.15);
}

/* ===== Toast 提示 ===== */
.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  z-index: 300;
  max-width: min(480px, 90vw);
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(20, 16, 26, 0.95);
  color: var(--gold-soft);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  animation: toastIn 0.3s var(--ease-lux) both;
}
.toast.hidden { display: none !important; }
.toast.error {
  border-color: rgba(224, 122, 106, 0.5);
  background: rgba(35, 18, 16, 0.95);
  color: #f0b4aa;
}
.toast.hiding {
  animation: toastOut 0.25s var(--ease-out) both;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

/* ===== 移动端适配 ===== */
@media (max-width: 899px) {
  .main-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .col-left {
    gap: 18px;
  }
  /* 移动端：星空 canvas 轻量保留，隐藏星云/光晕/噪点等装饰层，并停掉品牌动画 */
  .static-orb,
  .grain,
  .vignette {
    display: none;
  }
  .brand-mark,
  .brand h1 {
    animation: none;
  }
  /* 移动端全列宽平铺，无需内容随按钮宽缩行 */
  .history-actions {
    flex-wrap: nowrap;
    width: 100%;
    gap: 6px;
  }
  .history-actions .btn {
    flex: 0 0 auto;
    padding: 8px 8px;
    font-size: 12px;
    white-space: nowrap;
  }
  .details-toolbar {
    width: 100%;
    flex-wrap: wrap;
  }
  .details-select {
    flex: 1 1 auto;
    max-width: none;
  }

  /* ── P1 折叠条：details-card.is-collapsed 时仅显示 details-head ── */
  .details-card.is-collapsed {
    min-height: 0;
    padding-bottom: 0;
  }
  .details-card.is-collapsed .details-body,
  .details-card.is-collapsed .details-empty {
    display: none !important;
  }
  .details-card.is-collapsed .details-head {
    margin-bottom: 0;
    padding: 12px 16px;
    cursor: pointer;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: rgba(212, 175, 105, 0.04);
    transition: border-color 0.3s var(--ease-lux), background 0.3s var(--ease-lux);
  }
  .details-card.is-collapsed .details-head:hover {
    border-color: var(--line-strong);
    background: rgba(212, 175, 105, 0.08);
  }
  /* 展开指示箭头 ▾ */
  .details-card.is-collapsed .details-head::after {
    content: "▸";
    font-size: 14px;
    color: var(--gold);
    transition: transform 0.3s var(--ease-lux);
    flex-shrink: 0;
    margin-left: 8px;
  }
  .details-card.is-collapsed .details-head.expanded::after {
    transform: rotate(90deg);
  }
  /* 间距：折叠条与品牌区/上传卡片之间 */
  .col-right .details-card.is-collapsed {
    margin-bottom: 4px;
  }
  /* 折叠→展开过渡 */
  .details-card .details-body,
  .details-card .details-empty {
    transition: opacity 0.3s var(--ease-lux), max-height 0.3s var(--ease-lux);
  }

}
@media (max-width: 560px) {
  .details-head {
    flex-direction: column;
    align-items: stretch;
  }
  .details-head .step-head.compact {
    width: 100%;
  }
  .record-head {
    flex-wrap: wrap;
  }
  .record-meta {
    width: 100%;
    text-align: left;
  }
  .record-actions {
    justify-content: flex-start;
  }
  .record-actions-btns {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .rf-td,
  .rf-td.imei {
    max-width: none;
  }
}



/* ===== 宽屏一屏布局（追加于文件末尾，保证覆盖优先级） =====
 * 宽度足够（>=1000px）时所有模块限制在一个屏幕内：
 * 页面不滚动，历史列表与明细内容各自内部上下滚动；
 * 左列两个模块（流程卡片 + 历史卡片）紧凑显示、同屏可见。
 * 移动端（<1000px）不受影响，保持自然滚动。 */
@media (min-width: 900px) {
  .shell {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 14px 24px 18px;
  }
  .brand {
    margin-bottom: 8px;
    flex-shrink: 0;
  }
  .brand-mark {
    margin-bottom: 6px;
    font-size: 10px;
    padding: 3px 10px;
  }
  .brand h1 {
    font-size: clamp(20px, 2.6vw, 26px);
  }
  .brand-sub {
    margin: 3px 0 0;
    font-size: 10px;
  }
  /* workspace 默认 display:block，必须接入 flex 高度链，
     否则 shell→mainGrid 的高度压缩被其拦截；一屏布局下模块内部滚动，
     workspace 自身不滚动 */
  #workspace.workspace {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
  }
  .main-grid {
    flex: 1;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    /* 左列收窄（流程卡片太宽），右侧历史/明细获得更多空间 */
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    overflow: hidden;
    gap: 14px;
  }
  .col {
    min-height: 0;
    overflow: hidden;
  }
  .col-left {
    gap: 14px;
  }
  /* 左列：流程卡片占满列高；默认允许内部滚动（选日期工作表列表等），
     仅任务进行中（审核进度）不允许滚动——紧凑规则保证全内容可见 */
  .col-left .step-card {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  body.task-running .col-left #stepAudit {
    overflow-y: hidden;
  }
  /* 选日期步骤：工作表菜单弹性占满卡片剩余空间，完整显示并滚动，
     操作按钮贴卡片底部 */
  .col-left #stepSheets {
    display: flex;
    flex-direction: column;
  }
  .col-left #stepSheets .sheet-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    margin-bottom: 20px;
  }
  .col-left #stepSheets .actions-row {
    margin-top: auto;
  }
  /* 审核步骤：进度面板占满剩余空间，操作按钮（终止任务/新建审核等）
     贴卡片底部，与选日期卡片按钮一致 */
  .col-left #stepAudit {
    display: flex;
    flex-direction: column;
  }
  .col-left #stepAudit .progress-panel {
    flex: 1;
    min-height: 0;
    margin-bottom: 14px;
  }
  .col-left #stepAudit .audit-actions {
    margin-top: auto;
  }
  /* 审核进度面板紧凑：全内容一屏可见（进度条/统计/当前阶段/按钮） */
  .progress-panel {
    padding: 10px 12px;
    min-height: 0;
  }
  .progress-title {
    font-size: 12.5px;
    gap: 4px;
  }
  .progress-stage {
    margin-top: 4px;
    font-size: 12.5px;
  }
  .progress-eta {
    margin-top: 2px;
    font-size: 11.5px;
  }
  .progress-pct {
    font-size: 22px;
    min-width: 54px;
  }
  .progress-bar {
    margin-top: 7px;
    height: 6px;
  }
  .progress-now {
    margin-top: 8px;
    padding: 7px 10px;
  }
  .progress-now .v {
    margin-top: 2px;
    font-size: 12.5px;
  }
  /* 3 列布局：列宽足够容纳「标签+数值」同行，不换行且数据完整 */
  .stat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }
  .stat {
    padding: 6px 10px;
  }
  .stat .k {
    font-size: 10.5px;
  }
  .stat .v {
    font-size: 19px;
    margin-top: 0;
  }
  .actions-row.audit-actions {
    margin-top: 6px;
    gap: 8px;
  }
  /* 右列历史卡片（默认视图）：占满列高，列表内部滚动 */
  .history-card {
    flex: 1 1 auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .history-list {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 6px;
  }
  /* 右列：明细面板占满列高，Tab 栏固定，内容区滚动 */
  .details-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .details-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .status-tabs {
    flex: none;
  }
  .details-panes {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
  }
  /* 整体紧凑：左侧两个模块可缩小 */
  .card {
    padding: 16px 18px 10px;
    margin-bottom: 8px;
  }
  .card h2 {
    font-size: 19px;
  }
  .card-label {
    margin-bottom: 4px;
  }
  .step-head {
    margin-bottom: 10px;
  }
  .drop-zone {
    padding: 20px 16px;
  }
  .history-item {
    padding: 8px 10px;
    margin-bottom: 7px;
  }
  .history-title strong {
    font-size: 12.5px;
  }
  .history-meta {
    font-size: 11px;
    line-height: 1.45;
  }
  .history-actions {
    margin-top: 3px;
    gap: 6px;
  }
  .history-actions .btn {
    padding: 6px 8px;
    font-size: 10px;
    /* 宽屏下固定等宽（文字长度不同仍对齐）；移动端保持自然宽度 */
    width: 100px;
  }
  /* 删除/下载文字短，缩小按钮宽度 */
  .history-actions .btn[data-del],
  .history-actions .btn[data-dl] {
    width: 56px;
    padding: 6px 4px;
  }
  .record-card {
    padding: 10px 12px 9px;
    margin-bottom: 8px;
  }
  .details-head {
    margin-bottom: 10px;
  }
  .foot {
    margin-top: 8px;
    font-size: 10px;
  }
}

/* ===== Viewer.js 灯箱主题适配 ===== */
.viewer-container {
  background-color: rgba(3, 4, 12, 0.94);
}
.viewer-canvas > img {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  background: #000;
}
.viewer-title {
  color: var(--ink);
  font-family: var(--sans);
  opacity: 0.9;
}
.viewer-toolbar > ul {
  padding: 8px 4px;
}
.viewer-toolbar > ul > li {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
}
.viewer-toolbar > ul > li:focus,
.viewer-toolbar > ul > li:hover {
  background-color: rgba(212, 175, 105, 0.25);
  border-color: var(--gold);
}
/* 工具栏「查看完整 PDF」按钮：非内置图标，显示文字标签 */
.viewer-toolbar > ul > .viewer-pdf-link {
  width: auto;
  height: 24px;
  min-width: 24px;
  border-radius: 12px;
  padding: 0 8px;
  color: var(--gold);
  font-size: 11px;
  font-family: var(--sans);
  line-height: 22px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.viewer-toolbar > ul > .viewer-pdf-link::before {
  content: "PDF ↗";
  display: inline;
  color: inherit;
  font-size: 11px;
  line-height: inherit;
  background: none;
  width: auto;
  height: auto;
}
.viewer-button {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
}
.viewer-button:focus,
.viewer-button:hover {
  background-color: rgba(212, 175, 105, 0.25);
}
.viewer-navbar {
  background-color: rgba(3, 4, 12, 0.88);
}
.viewer-list > li {
  width: 44px;
  height: 44px;
}
.viewer-list > li img {
  width: auto;
  height: 100%;
}
.viewer-backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}