/* =========================================================================
 * theme-astra.css —— ASTRA 冷青蓝 · 薄荷绿主题（覆盖式）
 * 目标：在保留 zxnas 全部功能 / 按钮 / 元素结构与 app.js 逻辑不变的前提下，
 *       把视觉从「深空蓝 + 香槟金」焕新为「冷色青蓝星云 + 薄荷绿水光 + 明体衬线
 *       + 细字距 + 晶莹玻璃/金色星光」的 ASTRA 星辰感。
 * 实现：本文件在 style.css 之后载入，用覆盖与显式梯度把原硬编码的暖金色
 *       统一替换为薄荷绿系；所有 var(--gold) 引用通过 :root 覆盖自动生效。
 * 回退：删除 index.html 中的本文件引入即可，零风险。
 * ========================================================================= */

/* ─────────── 1. Design tokens ─────────── */
:root {
  /* 薄荷蓝主强调（整体偏蓝的 ASTRA 青蓝薄荷） */
  --gold: #9eeaff;           /* 主强调：薄荷蓝（比 a1ffee 更蓝） */
  --gold-soft: #d6f1ff;      /* 柔和薄荷蓝 */
  --gold-deep: #4aa8d8;      /* 青蓝深 */
  --mint: #8ce8f5;           /* 中调薄荷蓝 */
  --mint-blue: #6ea8ff;      /* 冷青蓝（星云辅色）*/
  --star-gold: #ffcf78;      /* 星光金（点缀星星）*/
  --btn-blue: #6ec6ff;       /* 按钮薄荷蓝 */
  --btn-blue-deep: #4aaee0;  /* 按钮薄荷蓝深 */
  --btn-blue-light: #a8e6ff; /* 按钮薄荷蓝亮 */

  /* 深空底：ASTRA 基调更深更冷 */
  --bg-0: #071114;
  --bg-1: #0c1620;
  --panel: rgba(17, 29, 43, 0.62);
  --panel-solid: #0f1a24;
  --line: rgba(158, 192, 202, 0.15);
  --line-strong: rgba(200, 240, 222, 0.3);

  /* 文字 */
  --ink: #eef4f6;
  --muted: #969bb4;
  --danger: #fb7185;
  --ok: #90e8ea;
  --warn: #ffcf78;

  /* 字体：拉丁用 Cormorant(优雅衬线)，中文用 Noto Serif SC(思源宋体/明朝体) */
  --serif: "Cormorant Garamond", "Noto Serif SC", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --sans: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  --shadow: 0 24px 80px rgba(1, 6, 12, 0.6);
}

/* ─────────── 2. 全局字体与空气感字距 ─────────── */
body {
  background:
    radial-gradient(1100px 680px at 50% -14%, #14324a 0%, transparent 62%),
    #071216;
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* ─────────── 3. 背景星云（冷青蓝 + 薄荷蓝光） ─────────── */
.ambient {
  background:
    radial-gradient(620px 460px at 16% -8%, rgba(90, 180, 235, 0.18), transparent 70%),
    radial-gradient(820px 600px at 104% 2%, rgba(110, 150, 255, 0.18), transparent 72%),
    radial-gradient(900px 620px at 50% 118%, rgba(110, 220, 245, 0.14), transparent 76%);
}
.static-orb.a {
  background: radial-gradient(circle, rgba(96, 180, 240, 0.18), transparent 66%);
}
.static-orb.b {
  background: radial-gradient(circle, rgba(120, 150, 255, 0.16), transparent 68%);
}
.static-orb.c {
  background: radial-gradient(circle, rgba(110, 216, 245, 0.14), transparent 66%);
}
.vignette {
  background: radial-gradient(ellipse at center, transparent 46%, rgba(0, 4, 12, 0.6) 100%);
}

/* ─────────── 4. 品牌区 ─────────── */
/* 品牌徽章与标题统一为「标记需复核」按钮的琥珀金配色 */
.brand-mark {
  color: var(--warn);
  border-color: rgba(255, 207, 120, 0.5);
  background:
    linear-gradient(100deg, rgba(255, 207, 120, 0.05), rgba(255, 207, 120, 0.16), rgba(255, 207, 120, 0.05)) padding-box,
    rgba(255, 207, 120, 0.07);
}
/* 品牌标题：柔和青蓝辉光渐变（不发白，呼应星空蓝调） */
.brand h1,
.gate-brand h1 {
  color: var(--gold-soft);
  background: linear-gradient(100deg, #2e7ba6 0%, #55aed6 32%, #a5dcef 55%, #55aed6 78%, #2e7ba6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gate-brand h1 {
  filter: drop-shadow(0 2px 16px rgba(120, 210, 255, 0.28));
}

/* 紧凑品牌头：腾出顶部空间，标题与步骤卡同排并相对卡片居中 */
.brand-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px 2px 10px;
  text-align: left;
  margin: 0;
  animation: fadeUp 0.7s var(--ease-lux) both;
}
.brand-inline .brand-mark {
  margin: 0;
  padding: 5px 11px;
  font-size: 11px;
  letter-spacing: 0.3em;
  flex: 0 0 auto;
}
.brand-inline .brand-copy {
  min-width: 0;
}
.brand-inline h1 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(17px, 2vw, 21px);
  letter-spacing: 0.08em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-inline .brand-sub {
  margin: 4px 0 0;
  font-size: 10px;
  letter-spacing: 0.22em;
  animation: none;
}
/* 缩小左列品牌头与首个步骤卡的间距 */
.col-left .brand-inline ~ .card {
  margin-top: 0;
}
@media (max-width: 560px) {
  .brand-inline {
    gap: 10px;
    padding: 2px 2px 6px;
  }
  .brand-inline h1 {
    font-size: 17px;
  }
  .brand-inline .brand-sub {
    letter-spacing: 0.16em;
  }
}

/* ─────────── 5. 玻璃卡片 ─────────── */
.card {
  background: linear-gradient(165deg, rgba(46, 82, 92, 0.18), rgba(9, 22, 30, 0.3));
  border-color: rgba(200, 240, 222, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(230, 255, 244, 0.12),
    inset 0 0 40px rgba(107, 153, 255, 0.07),
    var(--shadow);
}
.card::before {
  background: linear-gradient(90deg, transparent, rgba(220, 252, 238, 0.62), transparent);
}
.card:hover::after {
  background: linear-gradient(105deg, transparent, rgba(240, 255, 249, 0.07), transparent);
}

/* ─────────── 6. 按钮 ─────────── */
.btn:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: rgba(161, 255, 238, 0.08);
}
.btn.primary {
  background: linear-gradient(135deg, #b2e3f6 0%, #a9e0f7 45%, #8ff0ea 100%);
  color: #10282e;
  box-shadow: 0 8px 28px rgba(161, 255, 238, 0.3);
}
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #c8f0fb 0%, #bdeaf9 45%, #9ef2ee 100%);
  box-shadow: 0 12px 36px rgba(161, 255, 238, 0.44);
}
.btn.ghost {
  color: var(--gold-soft);
  border-color: var(--line);
}
.btn.danger {
  background: rgba(251, 113, 133, 0.13);
  border-color: rgba(251, 113, 133, 0.42);
  color: #fecdd3;
}
.btn-approve {
  background: rgba(127, 232, 192, 0.13);
  border-color: rgba(127, 232, 192, 0.42);
  color: var(--ok);
}
.btn-approve:hover:not(:disabled) {
  background: rgba(127, 232, 192, 0.2);
  border-color: rgba(127, 232, 192, 0.62);
  box-shadow: 0 0 18px rgba(127, 232, 192, 0.24);
}
.btn-review {
  background: rgba(255, 207, 120, 0.13);
  border-color: rgba(255, 207, 120, 0.42);
  color: var(--warn);
}
.btn-review:hover:not(:disabled) {
  background: rgba(255, 207, 120, 0.2);
  border-color: rgba(255, 207, 120, 0.62);
  box-shadow: 0 0 18px rgba(255, 207, 120, 0.24);
}
.btn-recheck.is-ready {
  background: rgba(127, 232, 192, 0.13);
  border-color: rgba(127, 232, 192, 0.45);
  color: var(--ok);
}
.btn-recheck.is-ready:hover:not(:disabled) {
  background: rgba(127, 232, 192, 0.2);
  border-color: rgba(127, 232, 192, 0.65);
  box-shadow: 0 0 18px rgba(127, 232, 192, 0.24);
}

/* 按钮呼吸（主蓝金背景呼吸改薄荷） */
@keyframes goldBreathe {
  0%, 100% { box-shadow: 0 8px 28px rgba(142, 232, 245, 0.2); background-position: 0% 50%; }
  50% { box-shadow: 0 10px 36px rgba(142, 232, 245, 0.36); background-position: 100% 50%; }
}

/* ─────────── 7. 表单 ─────────── */
input[type="password"]:focus,
input[type="text"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(158, 234, 255, 0.14);
}
.remark-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(158, 234, 255, 0.14), 0 0 20px rgba(158, 234, 255, 0.16);
}
.details-select {
  background: rgba(0, 14, 10, 0.45)
    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='%23a9f8dc' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--gold-soft);
}
.details-select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(158, 234, 255, 0.14);
}
.details-select option {
  background: var(--panel-solid);
  color: var(--ink);
}

/* ─────────── 8. 标题/编号字距（明体空气感） ─────────── */
.card h2 { letter-spacing: 0.08em; }
.step-num { color: var(--gold); }
.hint { letter-spacing: 0.02em; }

/* ─────────── 9. 上传进度条 ─────────── */
.lux-progress-top strong {
  color: var(--gold-soft);
  text-shadow: 0 0 18px rgba(158, 234, 255, 0.4);
}
.lux-bar {
  border: 1px solid rgba(158, 234, 255, 0.2);
}
.lux-bar-fill {
  background: linear-gradient(90deg, #4aa8d8, #8ce8f5, #d6f1ff, #8ce8f5);
  box-shadow: 0 0 16px rgba(142, 232, 245, 0.6);
}
.lux-bar-fill.done {
  background: linear-gradient(90deg, #4aa8d8, #8ce8f5, #d0f0ff);
  box-shadow: 0 0 16px rgba(127, 232, 192, 0.5);
}
.lux-bar-fill.failed {
  background: linear-gradient(90deg, #93304a, #fb7185);
  box-shadow: 0 0 12px rgba(251, 113, 133, 0.35);
}

/* ─────────── 10. 任务进度面板 ─────────── */
.progress-panel {
  border-color: rgba(200, 240, 222, 0.16);
  background: rgba(6, 16, 22, 0.32);
}
.progress-panel.live {
  border-color: rgba(158, 234, 255, 0.3);
  box-shadow: inset 3px 0 0 0 rgba(158, 234, 255, 0.5);
}
.progress-pct { color: var(--gold-soft); }
.progress-stage { color: var(--gold-soft); }
.progress-bar { border: 1px solid rgba(158, 234, 255, 0.14); }
.progress-bar-fill {
  background: linear-gradient(90deg, #4aa8d8, #8ce8f5, #d6f1ff, #8ce8f5);
  box-shadow: 0 0 14px rgba(142, 232, 245, 0.5);
}
.progress-bar-fill.failed {
  background: linear-gradient(90deg, #93304a, #fb7185);
}
.progress-bar-fill.completed {
  background: linear-gradient(90deg, #4aa8d8, #8ce8f5);
}
.progress-bar-fill.cancelled,
.progress-bar-fill.cancelling {
  background: linear-gradient(90deg, #5878a8, #a8c4e0);
}
.progress-now {
  background: rgba(158, 234, 255, 0.06);
  border-color: var(--line);
}
.progress-now .activity-line {
  border-color: rgba(158, 234, 255, 0.18);
  background: rgba(158, 234, 255, 0.06);
  color: var(--gold-soft);
}
.pulse-dot {
  box-shadow: 0 0 0 0 rgba(127, 232, 192, 0.6);
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(127, 232, 192, 0.6); }
  70% { box-shadow: 0 0 0 10px rgba(127, 232, 192, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 232, 192, 0); }
}

/* 统计数字 */
.stat:hover {
  border-color: var(--line-strong);
  background: rgba(158, 234, 255, 0.06);
}

/* ─────────── 11. 科技/审核/加载动画（金→薄荷） ─────────── */
.tech-visual { filter: drop-shadow(0 0 12px rgba(142, 232, 245, 0.4)); }
.tech-glow {
  background: radial-gradient(circle, rgba(142, 232, 245, 0.4), transparent 70%);
}
.tech-ring.ring-a {
  border-top-color: #d6f1ff;
  border-right-color: rgba(142, 232, 245, 0.6);
  border-left-color: rgba(142, 232, 245, 0.18);
  box-shadow: 0 0 10px rgba(142, 232, 245, 0.3);
}
.tech-ring.ring-b {
  border-bottom-color: #cdefff;
  border-left-color: rgba(158, 234, 255, 0.6);
  border-right-color: rgba(158, 234, 255, 0.14);
}
.tech-ring.ring-c {
  border: 1px dashed rgba(158, 234, 255, 0.5);
}
.tech-core {
  background:
    radial-gradient(circle at 32% 28%, #e6f6ff, transparent 42%),
    radial-gradient(circle, rgba(158, 234, 255, 0.95), rgba(74, 168, 216, 0.4) 55%, transparent 75%);
  box-shadow:
    0 0 16px rgba(142, 232, 245, 0.7),
    0 0 32px rgba(142, 232, 245, 0.3);
}
.tech-scan {
  background: conic-gradient(
    from 0deg,
    transparent 0 55%,
    rgba(214, 241, 255, 0.6) 72%,
    rgba(142, 232, 245, 0.18) 82%,
    transparent 100%
  );
}
.tech-dots span {
  background: #d6f1ff;
  box-shadow: 0 0 8px rgba(214, 241, 255, 1), 0 0 14px rgba(142, 232, 245, 0.85);
}

.audit-visual { filter: drop-shadow(0 0 14px rgba(142, 232, 245, 0.4)); }
.audit-glow {
  background: radial-gradient(circle, rgba(142, 232, 245, 0.32), transparent 70%);
}
.audit-ring.ring-a {
  border-top-color: #d6f1ff;
  border-right-color: rgba(142, 232, 245, 0.5);
  border-left-color: rgba(142, 232, 245, 0.15);
}
.audit-ring.ring-b {
  border: 1px dashed rgba(158, 234, 255, 0.4);
}
.audit-visual.is-done .audit-ring.ring-a { border-color: rgba(127, 232, 192, 0.55); }
.audit-visual.is-failed .audit-ring.ring-a { border-color: rgba(251, 113, 133, 0.55); }
.audit-doc {
  background: linear-gradient(180deg, rgba(235, 255, 247, 0.95), rgba(158, 234, 255, 0.78));
  border-color: rgba(74, 168, 216, 0.45);
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.audit-doc .audit-line { background: rgba(80, 168, 216, 0.32); }
.audit-scan {
  background: linear-gradient(
    180deg,
    transparent,
    rgba(142, 232, 245, 0.18),
    rgba(230, 255, 244, 0.8),
    rgba(142, 232, 245, 0.18),
    transparent
  );
}
.audit-seal {
  background: radial-gradient(circle at 35% 30%, #d6f1ff, #4aa8d8 70%);
  border-color: rgba(214, 241, 255, 0.75);
  box-shadow: 0 2px 10px rgba(142, 232, 245, 0.5);
}
.audit-visual.is-done .audit-seal {
  background: radial-gradient(circle at 35% 30%, #d0f0ff, #4aa8d8 70%);
  border-color: rgba(158, 234, 255, 0.85);
  box-shadow: 0 2px 12px rgba(127, 232, 192, 0.5);
}
.audit-visual.is-failed .audit-seal {
  background: radial-gradient(circle at 35% 30%, #fecdd3, #8a2f44 70%);
  border-color: rgba(251, 113, 133, 0.75);
}
.audit-orbit span {
  background: #d6f1ff;
  box-shadow: 0 0 8px rgba(214, 241, 255, 0.95);
}

.loader-ring.r1 {
  border-top-color: var(--gold);
  border-right-color: rgba(142, 232, 245, 0.4);
}
.loader-ring.r2 {
  border-bottom-color: rgba(142, 232, 245, 0.5);
  border-left-color: rgba(142, 232, 245, 0.3);
}
.loader-ring.r3 {
  border-top-color: rgba(158, 234, 255, 0.35);
}
.loader-particle {
  background: var(--gold-soft);
  box-shadow: 0 0 6px var(--gold), 0 0 12px rgba(142, 232, 245, 0.5);
}
.loader-gem {
  background: rgba(158, 234, 255, 0.2);
  border-color: rgba(158, 234, 255, 0.55);
  box-shadow:
    inset 0 0 12px rgba(158, 234, 255, 0.2),
    0 0 24px rgba(158, 234, 255, 0.3);
}
.loader-gem::after { background: var(--bg-0); }
.loader-glow {
  background: radial-gradient(circle, rgba(142, 232, 245, 0.22) 0%, transparent 70%);
}

/* ─────────── 12. 上传拖拽区 ─────────── */
.drop-zone {
  background:
    linear-gradient(180deg, rgba(120, 210, 180, 0.06), transparent 60%),
    rgba(4, 14, 18, 0.36);
}
.drop-zone::before {
  background: conic-gradient(from var(--spin, 0deg), transparent 40%, rgba(142, 232, 245, 0.6), transparent 70%);
}
.drop-zone.dragover {
  border-color: var(--gold);
  background: rgba(158, 234, 255, 0.1);
  box-shadow: 0 0 40px rgba(142, 232, 245, 0.2);
}
.drop-icon { color: var(--gold); }

/* ─────────── 13. 选工作表 ─────────── */
.sheet-item:hover {
  background: rgba(158, 234, 255, 0.07);
}
.sheet-item.selected {
  border-color: var(--gold);
  background: rgba(158, 234, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(158, 234, 255, 0.22), 0 0 20px rgba(158, 234, 255, 0.1);
}
.sheet-item input { accent-color: var(--gold); }
.audit-option {
  border-color: rgba(158, 234, 255, 0.34);
  background: rgba(158, 234, 255, 0.09);
}
.audit-option:hover {
  border-color: var(--gold);
  background: rgba(158, 234, 255, 0.15);
}
.audit-option input { accent-color: var(--gold); }
.audit-option-copy strong { color: var(--gold-soft); }

/* ─────────── 14. 历史任务 ─────────── */
.history-item {
  background: linear-gradient(165deg, rgba(34, 62, 74, 0.55), rgba(12, 24, 32, 0.6));
  border-color: rgba(200, 240, 222, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(230, 255, 244, 0.08),
    0 10px 30px rgba(1, 6, 12, 0.32);
}
.history-item::before {
  background: linear-gradient(90deg, transparent, rgba(220, 252, 238, 0.5), transparent);
}
.history-item:hover {
  border-color: rgba(158, 234, 255, 0.42);
  background: linear-gradient(165deg, rgba(44, 78, 94, 0.62), rgba(18, 34, 44, 0.66));
  box-shadow: 0 6px 22px rgba(2, 3, 12, 0.32);
  transform: translateY(-1px);
}
/* hover 时内层不出现深色方块背景，整体高亮由 .history-item 圆角卡片承担 */
.history-item:hover .history-block,
.history-item:hover .history-block.is-inline,
.history-item:hover .history-block.is-stacked {
  border-color: transparent;
  background: transparent;
}
.history-title strong { color: var(--gold-soft); }
.history-more {
  border-color: var(--line-strong);
  background: rgba(4, 14, 18, 0.36);
  color: var(--gold-soft);
}
.history-more:hover {
  border-color: var(--gold);
  background: rgba(158, 234, 255, 0.11);
  color: var(--gold);
}

/* 徽章：背景改薄荷 */
.badge {
  background: rgba(158, 234, 255, 0.13);
  color: var(--gold-soft);
  border-color: var(--line);
}
.badge.failed {
  background: rgba(251, 113, 133, 0.13);
  color: #fecdd3;
  border-color: rgba(251, 113, 133, 0.32);
}
.badge.running,
.badge.queued,
.badge.pending,
.badge.cancelling {
  background: rgba(255, 207, 120, 0.13);
  color: var(--warn);
  border-color: rgba(255, 207, 120, 0.32);
}
.badge.completed {
  background: rgba(127, 232, 192, 0.13);
  color: var(--ok);
  border-color: rgba(127, 232, 192, 0.32);
}
.badge.cancelled {
  background: rgba(150, 170, 220, 0.13);
  color: #c4d4f0;
  border-color: rgba(150, 170, 220, 0.32);
}

/* ─────────── 15. Tab / 明细 ─────────── */
.tab-item:hover {
  color: var(--gold-soft);
  background: rgba(158, 234, 255, 0.05);
}
.tab-item.is-active {
  color: var(--gold-soft);
  border-bottom-color: var(--gold);
}
.tab-badge {
  background: rgba(158, 234, 255, 0.15);
  color: var(--gold-soft);
  border-color: rgba(158, 234, 255, 0.32);
}
.tab-item.is-active .tab-badge {
  background: rgba(158, 234, 255, 0.26);
  border-color: var(--gold);
}

.empty-orbit::before {
  border-top-color: rgba(158, 234, 255, 0.85);
  border-right-color: rgba(158, 234, 255, 0.4);
}
.empty-orbit::after {
  border-bottom-color: rgba(214, 241, 255, 0.65);
  border-left-color: rgba(158, 234, 255, 0.3);
}
.empty-orbit span {
  background: var(--gold-soft);
  box-shadow: 0 0 8px rgba(158, 234, 255, 0.4);
}

/* ─────────── 16. 记录卡片 / 源字段 ─────────── */
.record-card {
  background: linear-gradient(165deg, rgba(46, 82, 92, 0.2), rgba(11, 24, 32, 0.32));
  border-color: rgba(200, 240, 222, 0.16);
}
.record-card:hover {
  border-color: rgba(158, 234, 255, 0.42);
  background: rgba(158, 234, 255, 0.06);
}
.record-sn { color: var(--gold-soft); }
.record-reason:hover { color: var(--gold-soft); }
.record-toggle { color: var(--gold); }
.record-toggle:hover { color: var(--gold-soft); }
.record-fields-inner {
  border-color: var(--line-strong);
  background: rgba(158, 234, 255, 0.04);
}
.rf-th {
  background: rgba(158, 234, 255, 0.09);
}
.rf-td { color: var(--gold-soft); }

.badge-skip.region {
  background: rgba(120, 180, 220, 0.13);
  color: #a8c8e0;
  border-color: rgba(120, 180, 220, 0.38);
}
.badge-skip.field {
  background: rgba(255, 207, 120, 0.13);
  color: var(--warn);
  border-color: rgba(255, 207, 120, 0.38);
}
.badge-skip.approved {
  background: rgba(127, 232, 192, 0.13);
  color: var(--ok);
  border-color: rgba(127, 232, 192, 0.38);
}

/* 凭证缩略图 */
.thumb:hover,
.thumb-pdf:hover {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(142, 232, 245, 0.24);
}
.thumb-pdf .pdf-badge {
  color: var(--gold-soft);
  border-color: rgba(158, 234, 255, 0.5);
}
.search-miss { color: var(--ok); }
.search-loading::before {
  border-color: rgba(158, 234, 255, 0.25);
  border-top-color: var(--gold);
}
.proof-loading::before {
  border-color: rgba(158, 234, 255, 0.25);
  border-top-color: var(--gold);
}

/* ─────────── 17. 弹窗 / Toast ─────────── */
.modal-backdrop { background: rgba(1, 6, 12, 0.8); }
.modal-card {
  background: linear-gradient(165deg, rgba(46, 82, 92, 0.24), rgba(9, 22, 30, 0.38));
  border-color: rgba(200, 240, 222, 0.24);
  box-shadow: 0 30px 80px rgba(1, 6, 12, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.modal-card h3 { color: var(--gold-soft); }
.toast {
  border-color: var(--line-strong);
  background: rgba(8, 20, 24, 0.96);
  color: var(--gold-soft);
}
.toast.error {
  border-color: rgba(251, 113, 133, 0.5);
  background: rgba(30, 12, 16, 0.96);
  color: #fecdd3;
}

/* ─────────── 18. 滚动条（薄荷细条） ─────────── */
.history-list::-webkit-scrollbar-thumb {
  background: rgba(158, 234, 255, 0.32);
}
.details-panes,
.col-left .step-card,
.col-left .step-card .sheet-list,
.col-left .step-card .progress-panel {
  scrollbar-color: rgba(158, 234, 255, 0.32) 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(158, 234, 255, 0.32);
}
.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(158, 234, 255, 0.5);
}
.status-tabs::-webkit-scrollbar-thumb,
.status-tabs { scrollbar-color: rgba(158, 234, 255, 0.32) transparent; }
.record-fields:hover::-webkit-scrollbar-thumb,
.record-fields:focus-within::-webkit-scrollbar-thumb {
  background: rgba(158, 234, 255, 0.36);
}

/* ─────────── 19. Viewer 灯箱（薄荷调） ─────────── */
.viewer-container { background-color: rgba(2, 8, 14, 0.95); }
.viewer-toolbar > ul > li:hover,
.viewer-toolbar > ul > li:focus {
  background-color: rgba(142, 232, 245, 0.28);
  border-color: var(--gold);
}
.viewer-toolbar > ul > .viewer-pdf-link { color: var(--gold); }
.viewer-button:hover,
.viewer-button:focus {
  background-color: rgba(142, 232, 245, 0.28);
}
.viewer-navbar { background-color: rgba(2, 8, 14, 0.9); }

/* ═══ 6. 宽屏一屏布局：品牌头内化后覆盖 style.css 的 .brand 压缩规则 ═══
 * style.css 在 @media(min-width:900px) 下把 .brand 设为居中、h1 字号 26px、
 * brand-mark 竖直堆叠——这些是给「顶部整行品牌头」用的。现在品牌头已左置到
 * col-left 内，需用相同断点的更高特异性规则把它拉回水平紧凑布局。 */
@media (min-width: 900px) {
  .brand-inline.brand-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
    margin-bottom: 6px;
    padding: 2px 2px 6px;
    gap: 12px;
  }
  .brand-inline .brand-mark {
    margin: 0;
    font-size: 11px;
    padding: 5px 11px;
    letter-spacing: 0.3em;
  }
  .brand-inline .brand-copy {
    min-width: 0;
  }
  .brand-inline h1 {
    margin: 0;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: 0.08em;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .brand-inline .brand-sub {
    margin: 3px 0 0;
    font-size: 10px;
    letter-spacing: 0.2em;
  }
}
/* 保护 col-left 高度链：品牌头不参与 flex 拉伸，紧贴首个步骤卡 */
.col-left .brand-inline {
  flex-shrink: 0;
}

/* 密码门品牌头：门页阶段居中显示的完整品牌区（解锁前可见） */
.gate-brand {
  text-align: center;
  margin: 0 0 30px;
  animation: fadeUp 0.9s var(--ease-lux) both;
}
.gate-brand .brand-mark {
  margin-bottom: 16px;
  font-size: 15px;
  padding: 8px 20px;
  letter-spacing: 0.38em;
  border-radius: 999px;
}
.gate-brand h1 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(26px, 4.5vw, 38px);
  letter-spacing: 0.08em;
  line-height: 1.2;
}
.gate-brand .brand-sub {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 解锁后：CSS 用 :has 联动——gateSection 带 hidden 时隐藏门页品牌头，
   避免残留到主界面；解锁前 workspace hidden、gate-brand 正常显示 */
.shell:has(#gateSection.hidden) .gate-brand {
  display: none !important;
}

/* 密码门：门卡保持自然流式顶部留白 */
@media (min-width: 900px) {
  /* 门页态：.shell 为 flex column，两段内容整体垂直居中 */
  .shell:has(#gateSection:not(.hidden)) .gate-brand {
    margin-top: auto;
    margin-bottom: 0;
  }
  .shell:has(#gateSection:not(.hidden)) .gate-card {
    margin-top: 30px;
    margin-bottom: auto;
  }
}

/* ═══ 7. 修复：步骤卡假滚动条 ═══
 * 宽屏下 style.css 给 .col-left .step-card 设 overflow-y:auto，
 * 但卡内绝对定位装饰（.card::after 超界扫光、.drop-zone::before 外扩等）
 * 即使透明也参与溢出计算，导致内容未超高也出现滚动条。
 * 真实需要滚动的内部容器（#stepSheets .sheet-list 等）自带 overflow，
 * 故这里把卡片自身改为裁掉溢出，消除假滚动条。 */
@media (min-width: 900px) {
  .col-left .step-card {
    overflow-y: hidden;
  }
}

/* ═══ 8. 排版微调：文件名卡片与工作表列表间距 ═══
 * 步骤3中 #sheetFileName 底部与 .sheet-list 首个日期卡片过近，
 * 给文件卡与列表之间补足呼吸间距。 */
#stepSheets #sheetFileName {
  margin-bottom: 16px;
}

/* ═══ 9. 步骤3 提示文案自适应不换行 ═══
 * step-copy 受同排 step-num / 强制重审胶囊挤压，宽度测量偏窄，
 * 但 hint 实际可延伸到整行，避免自动折行成难看两行。 */
#stepSheets .sheets-head .step-copy .hint {
  white-space: nowrap;
}