/* ============================================================
   北京瀛和（沈阳）律师事务所 · 金融案件智能处理系统
   统一设计系统 — 藏青 #1B2A4A + 金色 #B6924A
   ============================================================ */

:root {
  --navy:        #1B2A4A;   /* 主色 藏青 */
  --navy-700:    #243a63;   /* 藏青浅 */
  --navy-900:    #131f38;   /* 藏青深 */
  --gold:        #B6924A;   /* 强调 金棕 */
  --gold-dark:   #9E7C38;   /* 金棕 hover */
  --gold-soft:   rgba(182,146,74,.25);

  --bg:          #F4F6FA;
  --surface:     #ffffff;
  --line:        #e6e9f0;

  --text:        #1F2937;
  --text-soft:   #6B7280;
  --text-mute:   #8A93A5;

  --danger:      #C53030;
  --danger-bg:   #fff5f5;
  --danger-bd:   #feb2b2;
  --warn-bg:     #fff7e6;
  --warn-text:   #8a6d00;

  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 6px 24px rgba(27,42,74,.08);
  --shadow-sm:   0 2px 10px rgba(27,42,74,.06);
  --ring:        0 0 0 3px rgba(27,42,74,.12);
  --font:        "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: var(--gold-dark); text-decoration: none; transition: color .15s; }
a:hover { color: var(--gold); }

/* ===================== 顶部品牌导航 ===================== */
.app-header {
  background: linear-gradient(120deg, var(--navy-900), var(--navy) 55%, var(--navy-700));
  color: #fff;
  box-shadow: 0 2px 16px rgba(19,31,56,.25);
  border-bottom: 3px solid var(--gold);
  position: relative;
  z-index: 10;
}
.app-header .header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-mark {
  width: 42px; height: 42px; flex: none;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-900);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
/* 品牌 logo（白色药丸底，保证蓝字在藏青顶栏上清晰可读） */
.brand-logo-wrap {
  flex: none; background: #fff; border-radius: 10px;
  padding: 8px 14px; display: flex; align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
}
.brand-logo { display: block; height: 34px; width: auto; }
.brand-divider { width: 1px; height: 34px; background: rgba(255,255,255,.22); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-firm { font-size: 12px; color: var(--gold); letter-spacing: .5px; }
.brand-sys  { font-size: 19px; font-weight: 700; color: #fff; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-nav { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.app-nav a {
  color: #d8def0; font-size: 14px; padding: 7px 14px; border-radius: 8px;
  transition: background .15s, color .15s;
}
.app-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.app-nav a.active { background: var(--gold); color: var(--navy-900); font-weight: 600; }

/* ===================== 主体容器 ===================== */
.page { flex: 1 0 auto; }
.container { max-width: 1080px; margin: 32px auto; padding: 0 24px; }

h1.page-title { font-size: 25px; font-weight: 700; color: var(--navy); margin-bottom: 10px; letter-spacing: .6px; }
.page-sub { color: var(--text-soft); font-size: 14px; margin-bottom: 28px; line-height: 1.75; max-width: 860px; }

/* ===================== 卡片 ===================== */
.card,
.upload-card,
.result-card {
  background: var(--surface);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 22px;
}
.card h2,
.result-card h2 { font-size: 18px; color: var(--navy); margin-bottom: 18px; font-weight: 700; }
.card h2 .hint { font-weight: 400; }

/* ===================== 生成结果下载清单（每份文书一行：Word / PDF） ===================== */
.dl-grid { display: flex; flex-direction: column; gap: 10px; }
.dl-item {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  background: #f7f9fd;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.dl-item .dl-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 600; color: var(--navy);
}
.dl-item .btn-sm { flex: 0 0 auto; }
.dl-all { margin-top: 18px; }
.dl-pdf-note { margin-top: 10px; color: var(--text-mute); font-size: 12.5px; }
@media (max-width: 720px) {
  .dl-item { flex-wrap: wrap; }
  .dl-item .dl-name { flex-basis: 100%; margin-bottom: 4px; }
}

/* 卡片首个 h2 自动呈现为藏青标题栏（管理 / 档案 / 结果卡无需改 HTML 即统一外观） */
.card > h2:first-child,
.result-card > h2:first-child {
  margin: -28px -28px 24px;            /* 抵消卡片 28px 内边距，顶满边缘 */
  padding: 14px 22px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy) 60%, var(--navy-700));
  color: #fff; font-size: 16px; letter-spacing: .5px;
  border-bottom: 2px solid var(--gold);
  border-radius: var(--radius) var(--radius) 0 0;
}
.card > h2:first-child .hint,
.result-card > h2:first-child .hint { color: #cbd3e6; }

/* ===================== 区域面板（带藏青标题栏的独立白卡） ===================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 26px;
  overflow: hidden;                    /* 标题栏方角随卡片圆角裁切 */
}
.panel:last-child { margin-bottom: 0; }
.panel-hd {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy) 60%, var(--navy-700));
  border-bottom: 2px solid var(--gold);
}
.panel-no {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-900); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.panel-hd h3, .panel-title {
  margin: 0; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .5px;
}
.panel-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.panel-bd { padding: 22px 24px 24px; }
.panel-sub {
  font-size: 13px; color: var(--text-soft); line-height: 1.7; margin: 0 0 16px;
}
/* 标题栏上的描边按钮：白底，在藏青底色上更醒目 */
.panel-actions .btn-add { background: #fff; border-color: var(--gold); color: var(--gold-dark); }
.panel-actions .btn-add:hover { background: var(--gold); color: var(--navy-900); }

/* ===================== 段落标题 / 分隔线 ===================== */
.section-divider { border: none; border-top: 1px solid var(--line); margin: 26px 0 20px; }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-title h3 {
  font-size: 15px; font-weight: 700; color: var(--navy);
  padding-left: 11px; position: relative;
}
.section-title h3::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px; background: var(--gold);
}
.section-title .hint { font-weight: 400; }

/* ===================== 表单元素 ===================== */
label { font-size: 14px; color: var(--text-soft); }

/* 覆盖所有“类文本”输入框（含未显式写 type 的 <input>，默认即 text） */
input:not([type=checkbox]):not([type=radio]):not([type=file]),
select, textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; background: #fafbfc; color: var(--text);
  font-family: var(--font); transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--navy); background: #fff; box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: #aab0bd; }
input[type=file] { font-size: 14px; }

.select-area { margin-bottom: 4px; }
.select-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.select-row > .select-item { flex: 1 1 0; min-width: 240px; }
.select-item { flex: 1; min-width: 200px; margin-bottom: 20px; }
.select-item label { display: block; margin-bottom: 8px; font-size: 14px; color: var(--text-soft); }

/* 代理律师两个下拉并排（即便在半栏内也不换行堆叠） */
.lawyer-selects { display: flex; gap: 12px; }
.lawyer-selects select { flex: 1 1 0; min-width: 0; width: auto; }

/* 字段网格 */
.field-grid, .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-grid .full, .grid .full { grid-column: 1 / -1; }
.field-item label, .field label { display: block; font-size: 13px; color: var(--text-soft); margin-bottom: 6px; }

/* ===================== 按钮 ===================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 24px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
  font-family: var(--font); transition: background .15s, box-shadow .15s, transform .05s, color .15s;
  text-decoration: none; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gold); color: var(--navy-900); box-shadow: 0 2px 8px rgba(182,146,74,.3); }
.btn-primary:hover { background: var(--gold-dark); color: #fff; }
.btn-primary:disabled { background: #cfd5e0; color: #fff; cursor: not-allowed; box-shadow: none; }
.btn-gray { background: #eef1f6; color: var(--navy); }
.btn-gray:hover { background: #e0e5ee; color: var(--navy); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bd); }
.btn-danger:hover { background: #ffe7e7; }
.btn-sm { padding: 5px 12px; font-size: 13px; }

/* 次要描边按钮（others 页 .btn 默认是描边样式，沿用之） */
.btn-outline {
  background: #fff; color: var(--navy); border: 1px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-add {
  margin-left: auto; padding: 6px 14px; font-size: 13px; border-radius: 8px;
  border: 1px solid var(--gold); background: #fff; color: var(--gold-dark); cursor: pointer;
  font-weight: 600; transition: background .15s, color .15s;
}
.btn-add:hover { background: var(--gold); color: var(--navy-900); }
.btn-add:disabled { opacity: .5; cursor: not-allowed; }

.btn-link { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 13px; }
.btn-link:hover { text-decoration: underline; }

.submit-row { margin-top: 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hint { font-size: 13px; color: var(--text-mute); line-height: 1.6; }

.manage-link, .top-link {
  font-size: 13px; color: var(--gold-dark); text-decoration: none;
}
.manage-link { float: right; font-size: 12px; }
.manage-link:hover, .top-link:hover { color: var(--gold); }

/* ===================== 拖拽上传区 ===================== */
.drop-zone {
  border: 2px dashed #c6cede; border-radius: var(--radius-sm); padding: 40px 20px;
  text-align: center; cursor: pointer; transition: border-color .2s, background .2s;
  background: #fbfcfe;
}
.drop-zone:hover, .drop-zone.dragover { border-color: var(--gold); background: #fdfaf2; }
.drop-zone p { color: var(--text-mute); font-size: 14px; margin-top: 8px; }
.drop-zone input[type=file] { display: none; }
.drop-icon { font-size: 38px; }

/* 统一美化所有原生「选取文件」按钮，让每个上传入口都醒目（被告身份材料、AI 识别、当事人上传等） */
input[type="file"] { font-size: 13px; color: var(--text-soft); }
input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 18px; cursor: pointer;
  border: 1px solid var(--gold); border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-900); font-size: 14px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(182,146,74,.3);
  transition: background .15s, color .15s, box-shadow .15s;
}
input[type="file"]::file-selector-button:hover {
  background: var(--gold-dark); color: #fff;
  box-shadow: 0 3px 12px rgba(182,146,74,.45);
}

/* 「或手动录入被告信息」折叠入口：加底色/边框/金色小箭头，比纯文字更醒目 */
details.def-manual { margin-top: 14px; }
details.def-manual > summary {
  cursor: pointer; list-style: none; user-select: none;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; font-size: 14px; font-weight: 600; color: var(--navy);
  background: #f3f6fc; border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); transition: background .15s, border-color .15s;
}
details.def-manual > summary:hover { background: #fdfaf2; border-color: var(--gold); }
details.def-manual > summary::-webkit-details-marker { display: none; }
details.def-manual > summary::before {
  content: "▸"; color: var(--gold-dark); font-size: 13px; transition: transform .15s;
}
details.def-manual[open] > summary::before { transform: rotate(90deg); }

/* 被告①已上传证件列表：每个文件一行，可点 ✕ 删除 */
.def-file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.def-file-chip {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  background: #f3f6fc; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px;
}
.def-file-chip .dfc-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.def-file-chip .dfc-x {
  margin-left: auto; flex: none; cursor: pointer; border: none; background: none;
  color: var(--text-soft); font-size: 15px; line-height: 1; padding: 0 2px;
}
.def-file-chip .dfc-x:hover { color: var(--danger); }

.file-list { margin-top: 16px; }
.file-item {
  display: flex; align-items: center; gap: 8px;
  background: #f3f6fc; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px;
  margin-top: 8px; font-size: 13px;
}
.file-item .remove { cursor: pointer; color: var(--danger); margin-left: auto; font-size: 16px; }

/* ===================== 提示 / 警告框 ===================== */
.error-box {
  background: var(--danger-bg); border: 1px solid var(--danger-bd); border-radius: var(--radius-sm);
  padding: 14px 18px; color: var(--danger); margin-bottom: 20px; font-size: 14px; white-space: pre-wrap;
}
.warn-box {
  background: var(--warn-bg); color: var(--warn-text); padding: 14px 18px;
  border-radius: var(--radius-sm); margin-top: 16px; border: 1px solid #f0dca0;
}
.ok-box {
  background: #eafaf0; border: 1px solid #b9e6c9; border-radius: var(--radius-sm);
  padding: 14px 18px; color: #1d7a44; margin-bottom: 20px; font-size: 14px;
}

/* ===================== 登录 / 初始化 居中卡片 ===================== */
.auth-wrap { max-width: 400px; margin: 6vh auto 0; }
.auth-wrap .field { margin-bottom: 16px; }
.auth-wrap input { width: 100%; }
.auth-sub { font-size: 13px; color: var(--text-mute); margin: -8px 0 20px; line-height: 1.6; }

/* 顶栏右侧用户区 */
.nav-user { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.nav-user .who { color: #cbd3e6; }
.nav-user form { display: inline; }
.nav-user .logout-btn {
  background: none; border: 1px solid rgba(255,255,255,.4); color: #fff;
  padding: 4px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; font-family: var(--font);
}
.nav-user .logout-btn:hover { background: rgba(255,255,255,.12); }

.raw-box {
  margin-top: 12px; background: #f7f9fc; border-radius: var(--radius-sm);
  padding: 14px; font-size: 12px; color: var(--text-soft); white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--line);
}

/* ===================== 列表行 / 徽标 ===================== */
.row { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); }
.row .nm { flex: 1; font-size: 14px; color: var(--text); }
.tag {
  font-size: 11px; background: var(--navy); color: #fff; opacity: .92;
  padding: 2px 9px; border-radius: 10px; letter-spacing: .3px;
}

details { margin-top: 8px; }
summary { cursor: pointer; color: var(--gold-dark); font-size: 13px; }
summary:hover { color: var(--gold); }
form.inline { display: inline; }

.fee-row { display: flex; gap: 12px; align-items: flex-end; }
.fee-row > div { flex: 1; }

/* ===================== AI 识别区（manage） ===================== */
.ai-extract {
  background: #f7faff; border: 1px dashed #b9d0ff; border-radius: var(--radius-sm);
  padding: 14px; margin-bottom: 16px;
}
.ai-hint { font-size: 12px; color: #5a6b8c; margin-bottom: 8px; }
.ai-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ai-row .ai-files { flex: 1; min-width: 200px; background: #fff; }
.ai-status { font-size: 12px; color: var(--gold-dark); }
.ai-status.err { color: var(--danger); }

/* ===================== 被告块 / 当事人块 / 律师槽 ===================== */
.defendant-block, .party-block, .lawyer-slot {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px;
  margin-bottom: 14px; background: #fbfcfe;
}
.def-head, .party-head { display: flex; align-items: center; margin-bottom: 12px; }
.party-head { justify-content: space-between; }
.def-title, .party-head .ptitle { font-size: 14px; font-weight: 700; color: var(--navy); }
.def-remove, .party-remove { margin-left: auto; font-size: 12px; color: var(--danger); background: none; border: none; cursor: pointer; }
.def-remove:hover, .party-remove:hover { text-decoration: underline; }

.def-manual { margin-top: 10px; }
.def-manual summary { font-size: 13px; }
.def-manual .field-grid { margin-top: 12px; }
.def-files input[type=file] { font-size: 13px; }

.pick-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.pick-row select { max-width: 280px; }
.source-row { display: flex; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.source-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.fgroup { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #e3e6ee; }
/* 面板正文内的首个字段组：不重复顶部分隔线，紧贴标题栏 */
.panel-bd > .fgroup:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.fgroup > h3 {
  font-size: 15px; margin: 0 0 12px; color: var(--navy); font-weight: 700;
  padding-left: 11px; position: relative;
}
.fgroup > h3::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px; background: var(--gold);
}

/* ===================== 其他文书勾选区（index / others 共用 chip 风格） ===================== */
.others-pick { display: flex; flex-direction: column; gap: 18px; }
.others-cat-title,
.cat-title {
  font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 12px;
  padding-left: 11px; position: relative;
}
.others-cat-title::before,
.cat-title::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px; background: var(--gold);
}
.cat { margin: 16px 0; }

/* 文书可选项渲染为带边框的“药片”，排成对齐网格，更大气 */
.others-docs,
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
.others-doc,
.docs label {
  font-size: 14px; color: var(--text); font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .15s, background .15s, box-shadow .15s;
}
.others-doc:hover,
.docs label:hover { border-color: var(--gold); background: #fdfaf2; box-shadow: 0 1px 6px rgba(182,146,74,.12); }
.others-doc input,
.docs label input { flex: none; }

.other-extra {
  background: #f7faff; border: 1px solid #e3e9fb; border-radius: var(--radius-sm);
  padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.other-extra .extra-item label { display: block; font-size: 12px; color: var(--text-mute); margin-bottom: 4px; }

.stage-checks { display: flex; gap: 16px; flex-wrap: wrap; }
.stage-check { font-size: 14px; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* 复选框 / 单选框着色 */
input[type=checkbox], input[type=radio] { accent-color: var(--navy); }

/* ===================== 加载动画 ===================== */
.loading { display: none; color: var(--gold-dark); font-size: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  display: inline-block; width: 14px; height: 14px; border: 2px solid var(--gold);
  border-top-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite; vertical-align: middle; margin-right: 6px;
}

/* ===================== 生成文书进度遮罩 ===================== */
.gen-overlay {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(19, 31, 56, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.gen-overlay.show { display: flex; animation: genFade .25s ease; }
@keyframes genFade { from { opacity: 0; } to { opacity: 1; } }
.gen-box {
  width: min(460px, 88vw); background: #fff; border-radius: 16px;
  padding: 36px 40px 30px; text-align: center;
  border-top: 4px solid var(--gold);
  box-shadow: 0 26px 64px rgba(0, 0, 0, .38);
  animation: genPop .3s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes genPop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.gen-title { font-size: 20px; font-weight: 700; color: var(--navy); letter-spacing: .5px; }
.gen-bar {
  margin: 24px 0 12px; height: 13px; border-radius: 999px;
  background: #eef1f6; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07);
}
.gen-bar-fill {
  height: 100%; width: 0; border-radius: 999px; position: relative;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transition: width .35s ease;
}
.gen-bar-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: genSheen 1.2s linear infinite;
}
@keyframes genSheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.gen-pct { font-size: 15px; color: var(--gold-dark); font-weight: 600; }
.gen-hint { margin-top: 12px; font-size: 13px; color: var(--text-soft); }
.gen-cancel { margin-top: 22px; min-width: 120px; }

/* ===================== 下载（PDF转换/打包）处理中遮罩 ===================== */
.dl-overlay {
  display: none; position: fixed; inset: 0; z-index: 9100;
  background: rgba(19, 31, 56, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
.dl-overlay.show { display: flex; animation: genFade .25s ease; }
.dl-spin {
  width: 44px; height: 44px; margin: 0 auto 22px; border: 4px solid #eef1f6;
  border-top-color: var(--gold); border-radius: 50%;
  animation: spin .9s linear infinite;
}
.dl-overlay-msg { font-size: 15px; color: var(--navy); line-height: 1.7; }
.dl-overlay-sub { margin-top: 10px; font-size: 13px; color: var(--text-soft); }

/* ===================== 工具类 ===================== */
.hidden { display: none !important; }

/* ===================== 页脚 ===================== */
.app-footer {
  flex: none;
  background: var(--navy-900); color: #aab3c7;
  border-top: 3px solid var(--gold);
  text-align: center; padding: 22px 24px; font-size: 13px; line-height: 1.8;
}
.app-footer .foot-firm { color: #e8ecf5; }
.app-footer .foot-mail { color: var(--gold); }
.app-footer .foot-beian {
  margin-top: 8px; font-size: 12px; color: #8b93a7;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.app-footer .foot-beian-link {
  color: #8b93a7; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.app-footer .foot-beian-link:hover { color: var(--gold); }
.app-footer .foot-beian-sep { color: #5a6478; }
.app-footer .foot-beian-icon { width: 14px; height: 14px; vertical-align: middle; }

/* ===================== 欢迎遮罩 ===================== */
.splash {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at 50% 38%, var(--navy-700), var(--navy-900) 72%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; text-align: center; padding: 24px;
  opacity: 1; transition: opacity .7s ease;
}
.splash.fade-out { opacity: 0; pointer-events: none; }
.splash .splash-mark {
  width: 76px; height: 76px; border-radius: 18px; margin-bottom: 26px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-900); display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 800; letter-spacing: 2px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  animation: splashPop .8s cubic-bezier(.2,.8,.2,1) both;
}
.splash .splash-logo-wrap {
  background: #fff; border-radius: 14px; padding: 18px 30px; margin-bottom: 28px;
  box-shadow: 0 10px 40px rgba(0,0,0,.4);
  animation: splashPop .8s cubic-bezier(.2,.8,.2,1) both;
}
.splash .splash-logo { display: block; height: 56px; width: auto; }
.splash .splash-firm { font-size: 17px; color: var(--gold); letter-spacing: 2px; margin-bottom: 10px; animation: splashUp .8s .1s both; }
.splash .splash-sys  { font-size: 26px; font-weight: 700; letter-spacing: 1px; animation: splashUp .8s .22s both; }
.splash .splash-rule {
  width: 64px; height: 2px; background: var(--gold); margin: 22px auto;
  animation: splashWidth .9s .35s both;
}
.splash .splash-team { font-size: 13px; color: #aab3c7; animation: splashUp .8s .45s both; }
@keyframes splashPop  { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes splashUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes splashWidth{ from { width: 0; opacity: 0; } to { width: 64px; opacity: 1; } }

/* ===================== 响应式 ===================== */
@media (max-width: 720px) {
  .container { margin: 22px auto; padding: 0 16px; }
  .field-grid, .grid, .other-extra { grid-template-columns: 1fr; }
  .app-nav { margin-left: 0; width: 100%; }
  .brand-sys { font-size: 15px; white-space: normal; }
  .card, .upload-card, .result-card { padding: 20px; }
  /* 卡片内边距随之变窄，标题栏负边距同步调整，避免错位 */
  .card > h2:first-child,
  .result-card > h2:first-child { margin: -20px -20px 18px; padding: 12px 16px; }
  .panel-hd { padding: 12px 16px; gap: 10px; flex-wrap: wrap; }
  .panel-no { width: 23px; height: 23px; font-size: 13px; }
  .panel-hd h3, .panel-title { font-size: 15px; }
  .panel-bd { padding: 18px 16px 20px; }
  .splash .splash-sys { font-size: 21px; }
}