/* ============================================================================
 * Skin — 把旧的 .card / .btn / .header / .stat-xxx 等类桥接到新设计系统
 * ----------------------------------------------------------------------------
 * 为什么用 "皮肤覆盖" 而不是改 HTML class：
 *   - index.html 里的 id / onclick 和 5000+ 行 app.js 深度耦合，换 class 风险极高
 *   - tokens.css / components.css 已经定义了 UI 原语，这里只是用旧 class 选择器
 *     把新样式绑到旧结构上，**零 JS/HTML 改动**拿到新视觉
 *
 * 规则：
 *   - 所有颜色 / 间距 / 阴影都走 CSS var（tokens）
 *   - 不在这里写 !important，除非旧 style.css 里有内联样式冲突
 *   - 渐进增强：如果某个旧 class 这里没覆盖，fallback 到 style.css 的原样式
 * ==========================================================================*/

/* ---------- 全局排版 ---------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: transparent;  /* 背景交给 .ui-bg-grid */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* ---------- Header ---------- */
/* 2026-07-01 (问题5): 标题区——绝对居中，不被左右两侧宽度变化挤压。
   header position:sticky 已是定位上下文，这里用 absolute + 居中变换。 */
/* 圆点 logo 已删除（2026-07-02 用户要求去掉） */

/* 历史任务按钮：ghost 样式 */

/* 语言切换：pill 风格，不再 absolute */

/* 账户条：登录态显示邮箱 + 登出/管理（JS 用 inline display:flex 切显隐，故初始 none 放 CSS 安全） */

/* ---------- Container ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-6) var(--sp-12);
}

/* ---------- Card（主卡片，对应 Step1-4 等容器） ---------- */
.card {
  background: linear-gradient(160deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-2);
  margin-bottom: var(--sp-5);
  transition: box-shadow var(--t-base) var(--ease),
              transform var(--t-base) var(--ease);
}
.card:hover { box-shadow: var(--shadow-3); }

/* ---------- Card 垂直节奏（wizard 流程页）----------
 * flex-column + min-height 让 CTA 通过 margin-top:auto 推向底部，
 * 消除页间跳转时视觉重心漂移。
 * 豁免：home_hub / step4_progress / analysisResultView / history_page /
 *        admin_page / query_builder_page（内容已填满或有独立布局）。 */
#step1,
#step2,
#step3,
#step_c_upload {
  display: flex;
  flex-direction: column;
}
#home_role_select,
#login_page {
  display: flex;
  flex-direction: column;
  min-height: var(--card-min-h);
  justify-content: center;
}
/* CTA 区域推向卡片底部 */
#step1 > .footer-hint,
#step2 > .answer-input,
#step3 > .step3-actions,
#step_c_upload > .step3-actions {
  margin-top: auto;
}

.card-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin-bottom: var(--sp-2);
  letter-spacing: -.2px;
}
.card-hint {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-5);
  line-height: var(--lh-base);
}

/* Hub 页：三种任务类型的入口卡片特殊处理 */

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 9px 18px;
  font: inherit;
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn:hover { background: var(--c-surface-3); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-primary {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
  border-color: transparent;
  box-shadow: 0 1px 3px rgba(47, 155, 191, .3);
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-semibold);
}
.btn-primary:hover {
  background: var(--c-accent-hover);
  color: var(--c-accent-contrast);
  box-shadow: 0 4px 14px rgba(47, 155, 191, .35);
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0) scale(.98);
  box-shadow: 0 1px 2px rgba(47, 155, 191, .2);
}

.btn-secondary {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border-color: transparent;
}
.btn-secondary:hover {
  background: var(--c-accent);
  color: var(--c-accent-contrast);
}

.btn-small {
  padding: 5px 12px !important;
  font-size: var(--fs-xs) !important;
  border-radius: var(--r-sm) !important;
}

.btn-danger {
  background: var(--c-danger-soft);
  color: var(--c-danger);
  border-color: transparent;
}
.btn-danger:hover {
  background: var(--c-danger);
  color: #fff;
}

/* ---------- 输入 ---------- */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: var(--shadow-focus);
}
textarea {
  resize: vertical;
  min-height: 180px;
  line-height: var(--lh-loose);
  font-family: var(--font-sans);
}

/* textarea + char-count 的 input-area */
.input-area { position: relative; }
.char-count {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
  background: var(--c-surface);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-border);
}

/* ---------- Hub 里的任务类型/用户身份选择器 ---------- */

/* Hub 里三种功能入口按钮行 */
.card-actions, .hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* ---------- Complete section（Step3 顶部成功栏）---------- */
/* Bug-2 修复：改成垂直堆叠 + 整体居中，让 .complete-desc 与页面顶部
   "专利侵权风险分析系统" h1 在水平方向上居中对齐。 */
.complete-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--c-success-soft);
  border: 1px solid rgba(16, 185, 129, .25);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
  text-align: center;
}
.complete-section > .complete-title,
.complete-section > .complete-desc {
  width: 100%;
  min-width: 0;
}
.complete-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c-success);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin: 0 auto;
  font-size: 18px;
}
.complete-title {
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  font-size: var(--fs-md);
  margin: 0;
}
.complete-desc {
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
  margin: 2px 0 0 0;
}

/* ---------- Review section（Step3 里的技术方案回显）---------- */
.review-section {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.review-section h4 {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* （2026-07-04 死代码清扫：模式选择 .mode-options/.mode-grid 已删——quick/detailed 档位 UI 于 2026-06-27 移除） */

/* ---------- Upload section / upload-box ---------- */
.upload-section { margin-top: var(--sp-5); }
.upload-section h4 {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.upload-box {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-5);
  background: var(--c-surface);
  border: 1.5px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.upload-box:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-soft);
}
.upload-box .icon {
  font-size: 28px;
  color: var(--c-accent);
  margin-bottom: var(--sp-2);
}
.upload-box .icon svg { width: 28px; height: 28px; display: block; margin: 0 auto; }
.upload-box p {
  font-weight: var(--fw-medium);
  color: var(--c-text);
  margin-bottom: 4px;
}
.upload-box .formats {
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}

/* ---------- Step1 技术方案拖放区（A-5 新加，用新 class）---------- */
.tech-drop-zone {
  position: relative; /* W5/W6：蛇形动画绝对定位的锚点 */
  overflow: hidden;
  margin: 0 0 var(--sp-3);
  padding: var(--sp-4);
  text-align: center;
  cursor: pointer;
  border-radius: var(--r-md) !important;
  border: 1.5px dashed var(--c-border-strong) !important;
  background: var(--c-surface-2) !important;
  transition: border-color var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.tech-drop-zone:hover {
  border-color: var(--c-accent) !important;
  background: var(--c-accent-soft) !important;
}
.tech-drop-zone__hint { font-size: var(--fs-sm); color: var(--c-text-muted); }
/* 2026-07-27：原 --fs-xs + --c-text-faint（又小又淡）导致"解析中/已解析"状态用户
   实测难以感知，误以为没上传成功。提到 --fs-sm + 常规文字色，保留 tech-drop-zone__hint
   同级视觉权重之下（hint 仍稍大，避免两行抢视觉焦点）。 */
.tech-drop-zone__status { font-size: var(--fs-sm); color: var(--c-text-muted); margin-top: var(--sp-2); font-weight: 500; }

/* 2026-07-27：上传文件缩略图卡片（不同文件类型不同图标/缩略图，逐张显示解析状态） */
.tech-file-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-top: var(--sp-3);
}
.tech-file-cards:empty { margin-top: 0; }
.tech-file-card {
  width: 92px;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  text-align: center;
  cursor: default;
}
.tech-file-card__thumb {
  width: 100%;
  height: 48px;
  border-radius: var(--r-xs);
  background: var(--c-surface-3) center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-1);
}
.tech-file-card__ext {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-text-muted);
  letter-spacing: .02em;
}
.tech-file-card__name {
  font-size: var(--fs-xs);
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tech-file-card__status {
  font-size: var(--fs-xs);
  margin-top: 2px;
  color: var(--c-text-muted);
  transition: opacity .3s ease; /* W5：轮播文案交叉淡入淡出 */
}
.tech-file-card__status--fading {
  opacity: 0;
}
.tech-file-card[data-state="parsing"] .tech-file-card__status {
  color: var(--c-accent);
}

/* W6(2026-08-02, PLAN_UPLOAD_APPEND.md)：解析在途蛇形边框巡游，替换原扫动条。
   单色 + 半透明淡尾，无炫光/发光/渐变（UI 基调红线）。
   P1(PLAN_UPLOAD_FEEDBACK.md)：显隐改走 display（不再用 [hidden] 属性——内联
   SVG 是 SVG 命名空间，UA 样式表 [hidden]{display:none} 匹配不到，之前蛇形常显
   常动）；单一真相源 = 拖放区 .tech-drop-zone--parsing class，见下方规则。 */
.tech-parse-snake {
  display: none;
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
}
.tech-drop-zone--parsing .tech-parse-snake { display: block; }
.tech-parse-snake rect {
  x: 1px; y: 1px;
  width: calc(100% - 2px); height: calc(100% - 2px);
  rx: var(--r-md); /* 与 .tech-drop-zone 实际 border-radius 一致 */
  fill: none; stroke: var(--c-accent); stroke-width: 2;
  stroke-linecap: round;
}
.tech-parse-snake__head {
  stroke-dasharray: 12 88;             /* pathLength=100 归一：蛇身 12% 周长 */
  animation: tech-parse-snake-run 3.5s linear infinite;
}
.tech-parse-snake__tail {
  stroke-dasharray: 20 80;             /* 更长、更淡，负 delay 让尾拖在头后 */
  opacity: .3;
  animation: tech-parse-snake-run 3.5s linear infinite;
  animation-delay: -.28s;              /* 8% 周长的相位差 = 淡尾 */
}
@keyframes tech-parse-snake-run {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }    /* 负方向 = 顺时针 */
}
.tech-drop-zone--parsing {
  border-color: transparent !important; /* 解析中淡化虚线边框让蛇清晰（基础规则 !important，需同权重覆盖） */
}
@media (prefers-reduced-motion: reduce) {
  .tech-parse-snake__head { animation: none; stroke-dasharray: none; opacity: .4; }
  .tech-parse-snake__tail { display: none; }
  .tech-file-card__status {
    transition: none;
  }
}

/* P2(2026-08-02, PLAN_UPLOAD_FEEDBACK.md)：一轮（见 app.04-input.js 定义）内全部
   文件解析成功后的完成反馈——拖放区边框绿色脉冲 2s，JS 2100ms 后移除 class。
   失败轮不触发（卡片红态 + 状态行文字已是两个渠道，不三重强调）。 */
.tech-drop-zone--done {
  border-color: var(--c-success) !important;
  animation: tech-drop-done-pulse 2s var(--ease);
}
@keyframes tech-drop-done-pulse {
  0%   { border-color: var(--c-border-strong); }
  15%  { border-color: var(--c-success); }
  70%  { border-color: var(--c-success); }
  100% { border-color: var(--c-border-strong); }
}
@media (prefers-reduced-motion: reduce) {
  .tech-drop-zone--done { animation: none; }
}

/* 2026-08-02（BUGS.md #2026-08-02-C）：进度页取消按钮两段式"武装"态——第一次点击
   进入本态（文案已换成"再点一次确认取消"），5s 内再点执行。加粗+下划线让状态
   变化即时可感，替代被浏览器可抑制的原生 confirm()。 */
.btn--armed {
  font-weight: 600;
  text-decoration: underline;
}
.tech-file-card[data-state="done"] {
  border-color: rgba(79, 125, 90, .35);
}
.tech-file-card[data-state="done"] .tech-file-card__status { color: var(--c-success); }
.tech-file-card[data-state="error"] {
  border-color: rgba(181, 74, 58, .35);
  background: var(--c-danger-soft);
}
.tech-file-card[data-state="error"] .tech-file-card__status {
  color: var(--c-danger);
  white-space: normal;
  overflow-wrap: break-word;
}

.field-hint-card {
  background: var(--c-accent-soft) !important;
  border-color: rgba(47, 155, 191, .18) !important;
  border-radius: var(--r-md) !important;
}

/* ---------- Step4 进度页 ---------- */
.progress-page-header {
  text-align: center;
  padding: var(--sp-8) var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--c-divider);
  margin-bottom: var(--sp-6);
}
.progress-icon {
  font-size: 40px;
  margin-bottom: var(--sp-2);
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: .8; }
}

/* 阶段状态卡 */
.stage-card, .stage-status-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  transition: border-color var(--t-base) var(--ease);
}
.stage-card.is-active, .stage-status-card.active {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-1);
}
.stage-card.is-done, .stage-status-card.completed {
  border-color: rgba(16, 185, 129, .4);
}

.progress-bar-container,
.progress-bar-track {
  width: 100%;
  height: 6px;
  background: var(--c-surface-3);
  border-radius: var(--r-pill);
  overflow: hidden;
  margin: var(--sp-2) 0;
}
.progress-bar,
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-cyan));
  transition: width var(--t-slow) var(--ease);
}

/* ---------- Stage 表格（结果页） ---------- */
.table-container, #stage1Table, #stage2Table {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: auto;
  max-height: 500px;
  margin-bottom: var(--sp-5);
}
.table-container table, #stage1Table table, #stage2Table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}
.table-container th, #stage1Table th, #stage2Table th {
  position: sticky; top: 0;
  padding: 10px 14px;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-text-muted);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-divider);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.table-container td, #stage1Table td, #stage2Table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-divider);
  vertical-align: top;
  color: var(--c-text);
}
.table-container tr:hover td,
#stage1Table tr:hover td,
#stage2Table tr:hover td {
  background: var(--c-surface-2);
}

/* 风险等级色标 */
.risk-high { color: var(--c-risk-high) !important; font-weight: var(--fw-semibold); }
.risk-suspect { color: var(--c-risk-suspect) !important; font-weight: var(--fw-semibold); }
.risk-medium { color: var(--c-risk-med) !important; font-weight: var(--fw-semibold); }
.risk-low { color: var(--c-risk-low) !important; font-weight: var(--fw-semibold); }

/* （2026-07-04 死代码清扫：统计卡 .stat-*/.stats-* 与 Complete 页 #resultTitle/#resultDesc
   已删——旧 #step4 结果页 2026-06-09 移除后全部零引用） */

/* ---------- Footer hint / 提示 ---------- */
.footer-hint, .tip-list, .hint-text {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-divider);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}
.tip {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.tip-icon {
  color: var(--c-success);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Scrollbar（细一点的 webkit 版本，更有科技感）---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--c-text-muted); }

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

/* ---------- Analyst 身份视觉微调：信息密度更高
 *
 * Bug 1 (2026-05-15): 之前在 tokens.css 顶层覆盖 --sp-6 / --fs-base，会让
 * .container 横向 padding 跟着切，导致切换身份时整个页面横向"漂"一下。
 * 现在只在数据密集的卡片（结果页、进度页）上做紧凑，hub / step1 / step2 /
 * step3 这些"流程类"卡片不受影响，宽度保持稳定。 */
/* （2026-07-04 死代码清扫：本区涉及旧 #step4/.table-container/.stat-number/#reviewQueueSection
   的选择器已删，仅保留仍存在的消费方） */
body[data-role="analyst"] #history_page .card-title { font-size: var(--fs-lg); }
/* 表格 / 长清单类正文用 13px；step 顶部说明保持 14px 不漂 */
body[data-role="analyst"] .review-section,
body[data-role="analyst"] #executiveSummary,
body[data-role="analyst"] #priorityActions,
body[data-role="analyst"] #focusTierSection { font-size: 13px; }

/* ---------- 自适应：窄屏收起 header 右侧装饰 ---------- */
@media (max-width: 768px) {
  .container { padding: 0 var(--sp-4) var(--sp-8); }
}
/* 2026-07-01 (问题5): 中屏标题宽度收窄，避免与两侧按钮重叠（绝对居中下无法靠 flex 推开）。 */
@media (max-width: 680px) {
  /* 窄屏：标题退出绝对定位，回归正常流，整体两行堆叠，避免与按钮挤压重叠。 */
}

/* ---------- 大屏适配 ---------- */
@media (min-width: 1800px) {
  .card { padding: var(--sp-10, 40px); }
}

/* ---------- 结果页宽表格突破默认容器 ---------- */
.card--wide {
  max-width: min(1800px, 95vw);
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1600px) {
  .card--wide { max-width: min(2000px, 92vw); }
}