/* =====================================================================
   账单转换网站 · 全站样式
   设计基调：干净、简洁、清爽；服务于"内部财务运营"工作流。
   编排原则：
     1. token 集中：颜色/字号/间距/圆角/阴影先在这里改
     2. 留白慷慨：卡片间距 24，卡片内 padding 22，弱阴影
     3. 状态色只在需要行动时高亮（成功/待确认/必填/失败）
     4. 数字一律等宽（财务表格刚需）
     5. 侧栏反白：让业务区成为视觉主角
     6. 三档断点：≥961 桌面 / 641–960 平板 / ≤640 移动
   ===================================================================== */

:root {
  /* ---- 颜色：主色 + 中性 5 阶 ---- */
  --brand:        #3B5BDB;     /* 靛蓝，克制现代 */
  --brand-hover:  #2E48B3;
  --brand-soft:   #EEF1FD;     /* 用于选中底/输入框 hover */
  --brand-ring:   rgba(59,91,219,0.20);

  /* ---- 颜色：强调（必填/可改 徽章专用） ---- */
  --accent:       #B45309;     /* 沿用项目历史要求的琥珀色 */
  --accent-soft:  #FEF3C7;

  /* ---- 颜色：状态 ---- */
  --ok:           #0F8A5F;
  --ok-soft:      #E6F4ED;
  --warn:         #B45309;
  --warn-soft:    #FEF3C7;
  --danger:       #B42318;
  --danger-soft:  #FEE4E2;
  --info:         #0D6E9E;
  --info-soft:    #E0F2FE;
  --neutral:      #6B7280;
  --neutral-soft: #F1F2F4;

  /* ---- 颜色：中性阶（页面/卡片/边线/文字） ---- */
  --bg:           #F7F8FA;
  --surface:      #FFFFFF;
  --line:         #E5E7EB;
  --line-strong:  #D1D5DB;
  --ink:          #1F2937;
  --sub-ink:      #4B5563;
  --muted:        #6B7280;

  /* ---- 字体 ---- */
  --font-sans:    "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, "Cascadia Mono", monospace;

  /* ---- 字号阶（chinese-friendly / 现代字距） ---- */
  --fs-12:    12px;
  --fs-125:   12.5px;
  --fs-13:    13px;
  --fs-14:    14px;
  --fs-15:    15px;
  --fs-16:    16px;
  --fs-22:    22px;
  --fs-28:    28px;

  /* ---- 间距阶（4 / 8 / 12 / 16 / 24 / 32） ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;

  /* ---- 圆角 ---- */
  --r-1:  6px;   /* 徽章/小标签 */
  --r-2:  10px;  /* 按钮/输入框 */
  --r-3:  14px;  /* 卡片/弹窗 */
  --r-pill: 999px;

  /* ---- 阴影（克制，不堆叠厚阴影） ---- */
  --shadow-card:   0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-hover:  0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  --shadow-modal:  0 24px 64px rgba(15,23,42,0.18), 0 8px 16px rgba(15,23,42,0.08);

  /* ---- 尺寸：侧栏与主区 ---- */
  --sidebar-w:    240px;       /* 桌面端 */
  --main-max:     1180px;
}

@media (max-width: 960px) {
  :root { --sidebar-w: 200px; }
}

/* =====================================================================
   全局基线
   ===================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--brand-hover); text-decoration: none; }
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-ring); border-radius: 4px; }

code {
  font-family: var(--font-mono);
  background: #EEF0F3;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.92em;
  color: var(--sub-ink);
}

::selection { background: var(--brand-soft); color: var(--brand-hover); }

/* 按钮与控件统一 focus 样式 */
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-ring);
}

/* =====================================================================
   布局：侧栏 + 主区
   关键决策：侧栏反白为白底，让业务区成为视觉主角
   ===================================================================== */

.layout {
  display: flex;
  min-height: 100vh;
}

/* ---- 侧栏（白底 + 边线分隔） ---- */
.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: var(--fs-15);
  letter-spacing: -0.02em;
}
.brand-text {
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 12px;
}

.nav-item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--r-2);
  background: transparent;
  color: var(--sub-ink);
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.nav-item:hover {
  background: var(--brand-soft);
  color: var(--brand-hover);
  text-decoration: none;
}
.nav-item.active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.nav-item.active .nav-sub { color: rgba(255,255,255,0.78); }
.nav-item.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.nav-item.disabled:hover {
  background: transparent;
  color: var(--sub-ink);
}
.nav-title {
  display: block;
  font-weight: 600;
  font-size: var(--fs-135, 13.5px);
  letter-spacing: -0.005em;
}
.nav-sub {
  display: block;
  font-size: var(--fs-12);
  margin-top: 3px;
  line-height: 1.5;
  color: var(--sub-ink);
  letter-spacing: 0;
}
.nav-badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--neutral-soft);
  color: var(--muted);
  font-weight: 500;
}

/* =====================================================================
   主体：页面头 + 卡片堆叠
   ===================================================================== */

.main {
  flex: 1 1 auto;
  padding: var(--s-6) var(--s-5) var(--s-7);
  max-width: var(--main-max);
  width: 100%;
  margin: 0 auto;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
/* 桌面端页头吸顶：长页面滚动时「开始生成」等操作始终可达 */
@media (min-width: 641px) {
  .page-head {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: var(--s-2) 0 var(--s-3);
  }
}
.page-head h1 {
  font-size: var(--fs-22);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.page-head h1 .step-num {
  color: var(--brand);
  font-weight: 600;
  margin-right: 2px;
}
.page-head .summary {
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.5;
}
.page-head .spacer { flex: 1 1 auto; }

/* ---- 卡片：基础 + 变体 ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-5);
  margin-bottom: var(--s-5);
  box-shadow: var(--shadow-card);
}
.card:last-child { margin-bottom: 0; }

.card h2 {
  font-size: var(--fs-16);
  font-weight: 600;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.005em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.card h2 > .hint {
  font-weight: 400;
  color: var(--muted);
  font-size: var(--fs-125);
  letter-spacing: 0;
  margin-left: 2px;
}
.card h3 {
  font-size: var(--fs-14);
  font-weight: 600;
  margin: var(--s-4) 0 var(--s-2);
  color: var(--ink);
}

/* 段内说明 */
.lede {
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.65;
  margin: 0 0 var(--s-3);
}
.muted { color: var(--muted); }
.small { font-size: var(--fs-125); }

/* =====================================================================
   提示：error / info / warn（统一卡片样式）
   ===================================================================== */

.alert {
  border-radius: var(--r-2);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  border: 1px solid var(--line);
  background: var(--neutral-soft);
  color: var(--sub-ink);
  font-size: var(--fs-13);
  line-height: 1.6;
}
.alert:last-child { margin-bottom: 0; }
.alert strong { color: var(--ink); font-weight: 600; }
.alert.info    { border-color: #BFE0F4; background: var(--info-soft);    color: #0E5972; }
.alert.warn    { border-color: #F5D796; background: var(--warn-soft);    color: var(--warn); }
.alert.danger  { border-color: #F8C7C3; background: var(--danger-soft);  color: var(--danger); }

/* =====================================================================
   表单：输入框、文件、按钮、字段集
   ===================================================================== */

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

label.field { display: block; margin-bottom: var(--s-3); }
label.field > span {
  display: block;
  font-size: var(--fs-125);
  color: var(--muted);
  margin-bottom: var(--s-1);
  font-weight: 500;
}

input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 9px var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  font-size: var(--fs-14);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
select:hover {
  border-color: #6B7280;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  outline: none;
}

input[type="file"] {
  border: 1px dashed #C4CCD7;
  border-radius: var(--r-2);
  padding: var(--s-3);
  background: var(--bg);
  flex: 1 1 320px;
  min-width: 0;
  color: var(--sub-ink);
  font-size: var(--fs-13);
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-4);
  margin: 0 0 var(--s-4);
  background: var(--bg);
}
fieldset:last-child { margin-bottom: 0; }
legend {
  padding: 0 var(--s-2);
  font-weight: 600;
  font-size: var(--fs-13);
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* ---- 按钮 ---- */
.btn {
  appearance: none;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  padding: 9px 18px;
  border-radius: var(--r-2);
  cursor: pointer;
  font-size: var(--fs-14);
  font-weight: 500;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  letter-spacing: -0.005em;
  line-height: 1.4;
  white-space: nowrap;
}
.btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn.ghost {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--line-strong);
}
.btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-hover); }

.btn.small { padding: 6px var(--s-3); font-size: var(--fs-125); border-radius: 8px; }

.btn.danger {
  background: var(--surface);
  color: var(--danger);
  border-color: #F8C7C3;
}
.btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }

.btn .btn-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  opacity: 0.78;
  margin-top: 2px;
  letter-spacing: 0;
}

/* =====================================================================
   状态：徽章（填充式，更克制）+ 进度条
   ===================================================================== */

.status-line {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}
.badge-queued                { background: var(--neutral-soft); color: var(--neutral); }
.badge-running               { background: var(--info-soft);    color: var(--info); }
.badge-succeeded             { background: var(--ok-soft);      color: var(--ok); }
.badge-failed                { background: var(--danger-soft);  color: var(--danger); }
.badge-awaiting_confirmation { background: var(--warn-soft);    color: var(--warn); }
.badge-cancelled             { background: var(--neutral-soft); color: var(--neutral); }

/* 徽章变体：用于"必填/可改"等专门标签（橙色，沿用项目历史） */
.tag-required {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ---- 进度条 ---- */
.progress {
  height: 6px;
  background: var(--neutral-soft);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: 10px 0 4px;
}
.progress > span {
  display: block;
  height: 100%;
  background: var(--brand);
  width: 0;
  transition: width .3s ease;
}
.is-busy .progress > span {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,0.22) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 75%, transparent 75%);
  background-size: 20px 20px;
  animation: progress-stripes 1s linear infinite;
}
@keyframes progress-stripes { to { background-position: 20px 0; } }

/* ---- 任务状态卡里的消息 ---- */
.task-message {
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.65;
}
.task-message.error {
  color: var(--danger);
  background: var(--danger-soft);
  padding: 8px var(--s-3);
  border-radius: var(--r-2);
  border: 1px solid #F8C7C3;
}

/* =====================================================================
   表头强调：必填/可改列头（沿用项目历史，升级视觉）
   ===================================================================== */

.table thead th.required {
  background: var(--warn-soft);
  color: var(--warn);
  border-bottom: 2px solid var(--accent);
  font-weight: 600;
  position: relative;
}
.table thead th.required::after {
  content: "必填/可改";
  margin-left: 6px;
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  background: #FFF1D6;
  border-radius: var(--r-pill);
  vertical-align: 1px;
}

/* =====================================================================
   报表生成中：忙遮罩（卡片级浮层）
   ===================================================================== */

#task-card { position: relative; }

.busy-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(247,248,250,0.86);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-3);
  text-align: center;
  padding: var(--s-5);
}
#task-card.is-busy .busy-overlay { display: flex; }

.spinner {
  width: 44px; height: 44px;
  border: 4px solid var(--neutral-soft);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-bottom: var(--s-3);
}
.spinner.small {
  width: 18px; height: 18px;
  border-width: 3px;
  margin: 0 var(--s-2) 0 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.busy-title {
  font-size: var(--fs-15);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--s-1);
  letter-spacing: -0.005em;
}
.busy-sub {
  font-size: var(--fs-125);
  color: var(--muted);
  max-width: 420px;
  line-height: 1.6;
}
.busy-sub code {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--sub-ink);
}

/* =====================================================================
   任务日志：浅色面板融入页面，仅用色彩语义标记级别
   ===================================================================== */

.log {
  background: #F4F6F9;
  color: #33415C;
  border: 1px solid var(--line);
  border-left: 3px solid #94A3B8;
  border-radius: var(--r-2);
  padding: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.55;
}
/* 默认只露出最后两行 */
.log.log-collapsed { max-height: 62px; }
.log-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.log-head .spacer { flex: 1 1 auto; }
.log .l-error   { color: var(--danger); font-weight: 500; }
.log .l-warn    { color: var(--warn); }
.log .l-success { color: var(--ok); }

/* 链接按钮 */
.link-btn {
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  padding: 0;
  font-size: var(--fs-125);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
}
.link-btn:hover { color: var(--brand-hover); }

/* =====================================================================
   表格：表头/单元格/数字对齐
   ===================================================================== */

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.table th,
.table td {
  border-bottom: 1px solid var(--line);
  padding: 10px var(--s-3);
  text-align: left;
  vertical-align: top;
}
.table th {
  background: var(--bg);
  font-weight: 600;
  color: var(--sub-ink);
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.table tbody tr:hover { background: #FBFBFE; }
.table tbody tr:last-child td { border-bottom: none; }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 限高 + 内部滚动，让 sticky 表头在长表格（确认弹窗、任务历史）里真正生效 */
.table-wrap {
  overflow: auto;
  max-height: 65vh;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
}
.table-wrap thead th { position: sticky; top: 0; z-index: 1; }

/* KV：键值展示卡 */
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3) var(--s-4);
}
.kv > div {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 10px var(--s-3);
  background: var(--bg);
}
.kv .k {
  font-size: var(--fs-12);
  color: var(--muted);
  letter-spacing: 0;
}
.kv .v {
  font-size: var(--fs-15);
  font-weight: 600;
  margin-top: 2px;
  word-break: break-all;
  color: var(--ink);
}

.plain-list { margin: 0; padding-left: var(--s-4); }
.plain-list li { margin-bottom: var(--s-1); }

.actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

.hidden { display: none !important; }

/* =====================================================================
   确认弹窗
   ===================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15,23,42,0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  animation: modal-backdrop .18s ease;
}
@keyframes modal-backdrop { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  background: var(--surface);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-modal);
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-rise .2s ease;
}
@keyframes modal-rise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.modal-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.modal-head h2 {
  font-size: var(--fs-16);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.modal-head .spacer,
.modal-foot .spacer { flex: 1 1 auto; }

.modal-body {
  padding: var(--s-4) var(--s-5);
  overflow: auto;
  flex: 1 1 auto;
}
.modal-body fieldset:last-child { margin-bottom: 0; }

.modal-foot {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.accounts-cell { max-width: 420px; }
.accounts-list {
  margin: var(--s-2) 0 0;
  padding: var(--s-2) var(--s-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  max-height: 220px;
  overflow: auto;
  font-size: var(--fs-125);
}
.accounts-list span {
  display: inline-block;
  margin: 0 var(--s-3) var(--s-1) 0;
}
.accounts-list .nick { color: var(--muted); }

/* =====================================================================
   折叠区块（校验结果等）
   ===================================================================== */

.collapse-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.collapse-head .title {
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.collapse-head .spacer { flex: 1 1 auto; }

/* 校验结果条目（成功/失败一行行） */
.assertion-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px var(--s-3);
  border-radius: var(--r-2);
  font-size: var(--fs-13);
}
.assertion-row.pass { background: var(--ok-soft); color: var(--ok); }
.assertion-row.fail { background: var(--danger-soft); color: var(--danger); }
.assertion-row .name { font-weight: 600; }

/* 下载区按钮组（每个产物一个主按钮 + 副标题） */
.downloads { display: flex; flex-direction: column; gap: var(--s-3); }
.downloads .btn { align-self: flex-start; }
.downloads .file-meta {
  color: var(--muted);
  font-size: var(--fs-12);
  margin-top: 4px;
  letter-spacing: 0;
}

/* =====================================================================
   响应式
   ===================================================================== */

@media (max-width: 960px) {
  .main { padding: var(--s-5) var(--s-4) var(--s-6); }
  .card { padding: var(--s-4); }
}

@media (max-width: 640px) {
  /* 移动端：侧栏堆叠到主区顶部，nav 改横排；
     无需 JS 与额外元素，所见即所得。 */
  .layout { flex-direction: column; min-height: auto; }

  .sidebar {
    position: static;
    width: 100%;
    flex: 0 0 auto;
    min-width: 0;
    height: auto;
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 0;
    background: var(--surface);
  }
  .sidebar .brand {
    padding: 14px var(--s-4) var(--s-3);
    border-bottom: none;
  }
  .sidebar .brand-text { font-size: var(--fs-15); }

  .nav {
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0 var(--s-3) var(--s-3);
    gap: var(--s-2);
  }
  .nav-item {
    flex: 1 1 calc(50% - var(--s-1));
    min-width: 0;
    padding: 9px var(--s-3);
  }
  .nav-item.active { box-shadow: var(--shadow-card); }
  .nav-sub {
    display: block;
    max-height: 3em;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .main {
    padding: var(--s-4) var(--s-3) var(--s-6);
    max-width: 100%;
    min-width: 0;
  }

  .page-head { margin-bottom: var(--s-4); flex-direction: column; align-items: flex-start; }
  .page-head h1 { font-size: var(--fs-22); word-break: break-word; }
  .page-head .spacer { display: none; }
  .page-head > .btn,
  .page-head > a.btn {
    width: 100%;
    justify-content: center;
  }

  .card { padding: var(--s-4) var(--s-3); margin-bottom: var(--s-4); }
  .card h2 { font-size: var(--fs-15); }

  .form-row { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .form-row .btn,
  .form-row input[type="file"] {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }
  .form-row .btn { justify-content: center; padding: 10px var(--s-4); }

  .modal { padding: var(--s-3); }
  .modal-panel {
    max-height: calc(100vh - 24px);
    border-radius: var(--r-2);
  }
  .modal-head,
  .modal-body,
  .modal-foot {
    padding-left: var(--s-4);
    padding-right: var(--s-4);
  }

  .btn { padding: 10px var(--s-4); }
  .btn.small { padding: 7px var(--s-3); }

  .kv { grid-template-columns: 1fr; }
  .table th, .table td { padding: 8px var(--s-3); }
}

/* =====================================================================
   组件：上传拖拽区（dropzone）
   ===================================================================== */

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
  padding: var(--s-5) var(--s-4);
  border: 1.5px dashed #B9C4D4;
  border-radius: var(--r-2);
  background: var(--bg);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.dropzone:hover { border-color: var(--brand); background: var(--brand-soft); }
.dropzone.is-dragover {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.dropzone input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
}
.dropzone input[type="file"]:focus-visible + .dz-icon {
  box-shadow: 0 0 0 3px var(--brand-ring);
  border-radius: 8px;
}
.dropzone:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.dz-icon {
  width: 30px; height: 30px;
  color: var(--brand);
  margin-bottom: 2px;
}
.dz-title {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.dz-hint {
  font-size: var(--fs-12);
  color: var(--muted);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.dz-file {
  font-size: var(--fs-125);
  color: var(--brand-hover);
  font-weight: 500;
  word-break: break-all;
  margin-top: 2px;
}

/* =====================================================================
   组件：任务流程步进器（steps）
   ===================================================================== */

.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
}
.steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--fs-13);
  padding: 4px 0;
}
.steps li:not(:last-child)::after {
  content: "";
  flex: 1 1 24px;
  height: 1px;
  background: var(--line);
  margin: 0 var(--s-3);
  min-width: 24px;
}
.step-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--muted);
  flex: 0 0 auto;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.steps li.is-active { color: var(--ink); font-weight: 600; }
.steps li.is-active .step-dot {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}
.steps li.is-done { color: var(--sub-ink); }
.steps li.is-done .step-dot {
  border-color: var(--ok);
  background: var(--ok-soft);
  color: var(--ok);
}
.steps li.is-done .step-dot .n { display: none; }
.steps li.is-done .step-dot::after { content: "✓"; font-size: 11px; }

/* =====================================================================
   组件：空状态（empty state）
   ===================================================================== */

.empty-state {
  text-align: center;
  padding: var(--s-6) var(--s-4);
  color: var(--muted);
}
.empty-state .empty-icon {
  width: 48px; height: 48px;
  margin: 0 auto var(--s-3);
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.empty-state .empty-icon svg { width: 24px; height: 24px; }
.empty-title {
  font-weight: 600;
  color: var(--sub-ink);
  margin-bottom: 4px;
}
.empty-sub { font-size: var(--fs-125); line-height: 1.6; }

/* =====================================================================
   组件：登录页 + 侧栏账号区
   ===================================================================== */
.auth-body {
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
}
.auth-shell { width: 100%; max-width: 380px; }
.auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-card);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-5);
}
.auth-brand-text {
  font-size: var(--fs-15);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.auth-title {
  font-size: var(--fs-22);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
  color: var(--ink);
}
.auth-sub {
  font-size: var(--fs-13);
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 var(--s-5);
}
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-foot {
  margin: var(--s-4) 0 0;
  text-align: center;
  font-size: var(--fs-12);
  color: var(--muted);
}
.auth-alt {
  margin: var(--s-4) 0 0;
  text-align: center;
  font-size: var(--fs-13);
  color: var(--muted);
}
.auth-alt a {
  color: var(--brand);
  font-weight: 500;
  text-decoration: none;
}
.auth-alt a:hover { text-decoration: underline; }
.field { display: block; }
.field-label {
  display: block;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--sub-ink);
  margin-bottom: 6px;
}
.btn-block { width: 100%; justify-content: center; }

/* 登录信息固定贴在侧栏左下角（nav 撑满剩余高度） */
.user-chip {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.user-avatar {
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  display: grid; place-items: center;
  font-size: var(--fs-12);
  font-weight: 600;
}
.user-meta { min-width: 0; flex: 1 1 auto; }
.user-name {
  display: block;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-role { display: block; font-size: var(--fs-12); color: var(--muted); }

/* =====================================================================
   组件：结果下载文件卡（file card）
   ===================================================================== */

.downloads { display: flex; flex-direction: column; gap: var(--s-2); }
.file-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  max-width: 560px;
  transition: border-color .15s ease, background .15s ease;
}
.file-card:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  text-decoration: none;
}
.fc-icon {
  width: 22px; height: 22px;
  color: var(--brand);
  flex: 0 0 auto;
}
.fc-body { display: flex; flex-direction: column; min-width: 0; }
.fc-name {
  font-weight: 500;
  color: var(--brand-hover);
  font-size: var(--fs-14);
}
.fc-sub {
  font-size: var(--fs-12);
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 420px;
}

/* =====================================================================
   移动端表格卡片流：带 data-label 的表格在窄屏转成「一卡一行」
   用法：容器加 .table-cards，td 加 data-label="列名"
   ===================================================================== */

@media (max-width: 640px) {
  .table-cards thead { display: none; }
  .table-cards table,
  .table-cards tbody,
  .table-cards tr,
  .table-cards td {
    display: block;
    width: 100%;
  }
  .table-cards table { border: none; background: transparent; }
  .table-cards tbody { display: flex; flex-direction: column; gap: 10px; }
  .table-cards tr {
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 10px var(--s-3);
    background: var(--surface);
  }
  .table-cards tr:hover { background: var(--surface); }
  .table-cards td {
    border-bottom: none;
    padding: 3px 0;
    display: flex;
    gap: var(--s-3);
    align-items: baseline;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  .table-cards td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    min-width: 5.5em;
    color: var(--muted);
    font-size: var(--fs-12);
  }
  .table-cards td:not([data-label])::before { content: none; }
  .table-cards td.num { text-align: left; }
  .table-cards td > input[type="text"],
  .table-cards td > input[type="number"],
  .table-cards td > select { flex: 1 1 auto; min-width: 0; width: auto; }
  .table-cards .accounts-cell { max-width: none; }
}

/* =====================================================================
   工具：减少动画偏好
   ===================================================================== */

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