/* ============================================================
   天竞协作通 TEKGEN-PMP · 全站科技风主题 v1.0
   设计 tokens：科技蓝主色 + 青色点缀 + 深空导航 + 扁平卡片
   全站统一：index / m / sysmap / checkin / engineer-checkin / eval
   ============================================================ */
:root {
  /* 品牌色板 */
  --tk-primary: #0075FF;        /* 科技蓝主色 */
  --tk-primary-hover: #3391FF;
  --tk-primary-active: #005ECC;
  --tk-cyan: #00C8FF;           /* 青色点缀 */
  --tk-grad: linear-gradient(135deg, #0075FF 0%, #00C8FF 100%);
  --tk-grad-deep: linear-gradient(180deg, #0B1A2F 0%, #10294A 100%);  /* 深空导航 */
  /* 中性色 */
  --tk-text: #1A2330;
  --tk-text-2: #5E6B7E;
  --tk-text-3: #8A939E;
  --tk-bg: #F2F4F8;
  --tk-card: #FFFFFF;
  --tk-border: #E4E9F0;
  /* 语义色（与 Element Plus 对齐） */
  --tk-success: #67C23A;
  --tk-warning: #E6A23C;
  --tk-danger: #F56C6C;
  /* 形状与阴影 */
  --tk-radius: 10px;
  --tk-radius-lg: 12px;
  --tk-shadow: 0 2px 10px rgba(11, 26, 47, .06);
  --tk-shadow-hover: 0 6px 18px rgba(0, 117, 255, .14);

  /* Element Plus 跟随主题 */
  --el-color-primary: #0075FF;
  --el-color-primary-light-3: #4aa0ff;
  --el-color-primary-light-5: #80bfff;
  --el-color-primary-light-7: #b3d9ff;
  --el-color-primary-light-8: #cce5ff;
  --el-color-primary-light-9: #e8f3ff;
  --el-color-primary-dark-2: #005ecc;
  --el-border-radius-base: 6px;
}

/* ── 基础 ─────────────────────────────────────── */
body.tk, body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; }

/* 顶部科技渐变饰条：贴在页面最顶 */
.tk-topline { height: 3px; background: var(--tk-grad); }

/* ── 卡片 ─────────────────────────────────────── */
.tk-card { background: var(--tk-card); border-radius: var(--tk-radius-lg);
  box-shadow: var(--tk-shadow); transition: box-shadow .18s ease, transform .18s ease; }
.tk-card-hover:hover { box-shadow: var(--tk-shadow-hover); transform: translateY(-2px); }

/* 统计卡：左侧渐变竖条 + 大数字 */
.tk-stat { position: relative; background: #fff; border-radius: var(--tk-radius);
  padding: 14px 18px 14px 20px; box-shadow: var(--tk-shadow); min-width: 120px;
  transition: box-shadow .18s ease, transform .18s ease; }
.tk-stat::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 2px; background: var(--tk-grad); opacity: .9; }
.tk-stat:hover { box-shadow: var(--tk-shadow-hover); transform: translateY(-2px); }
.tk-stat .num { font-size: 26px; font-weight: 700; color: var(--tk-text);
  font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.tk-stat .lbl { font-size: 12px; color: var(--tk-text-3); margin-top: 2px; }
.tk-stat.warn .num { color: var(--warning, #E6A23C); }
.tk-stat.warn::before { background: linear-gradient(180deg, #E6A23C, #F56C6C); }

/* 图标芯片：渐变底 + 白色图标，用于卡片/空态/标题 */
.tk-chip { display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; background: var(--tk-grad);
  color: #fff; flex: none; box-shadow: 0 3px 8px rgba(0, 117, 255, .25); }
.tk-chip.blue { background: var(--tk-grad); }
.tk-chip.cyan { background: linear-gradient(135deg, #00C8FF, #00E0C8); box-shadow: 0 3px 8px rgba(0, 200, 255, .25); }
.tk-chip.green { background: linear-gradient(135deg, #52C41A, #67C23A); box-shadow: 0 3px 8px rgba(103, 194, 58, .25); }
.tk-chip.orange { background: linear-gradient(135deg, #FF9D40, #E6A23C); box-shadow: 0 3px 8px rgba(230, 162, 60, .25); }

/* ── 按钮 ─────────────────────────────────────── */
.tk-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 18px; border: none; border-radius: var(--tk-radius); cursor: pointer;
  background: var(--tk-primary); color: #fff; font-size: 15px; transition: background .15s; }
.tk-btn-primary:hover { background: var(--tk-primary-hover); }
.tk-btn-primary:active { background: var(--tk-primary-active); }
.tk-btn-primary:disabled { background: #c0c4cc; cursor: not-allowed; }
.tk-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--tk-primary); color: var(--tk-primary);
  background: #fff; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all .15s; }
.tk-btn-ghost:hover { background: #e8f3ff; }

/* ── 标签（自定义页） ─────────────────────────── */
.tk-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px;
  border-radius: 5px; font-size: 11px; line-height: 18px; }
.tk-tag.ok   { background: #e8f4e5; color: #4d9636; }
.tk-tag.warn { background: #fdeee4; color: #b25f2e; }
.tk-tag.blue { background: #e7f0fa; color: #0075FF; }
.tk-tag.cyan { background: #e0f7fe; color: #0795b3; }
.tk-tag.gray { background: #eef1f4; color: #7a828d; }
.tk-tag.red  { background: #fdeaea; color: #f56c6c; }

/* 状态点 */
.tk-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }
.tk-dot.ok   { background: var(--tk-success); box-shadow: 0 0 0 3px rgba(103, 194, 58, .15); }
.tk-dot.blue { background: var(--tk-primary); box-shadow: 0 0 0 3px rgba(0, 117, 255, .15); }
.tk-dot.warn { background: var(--tk-warning); box-shadow: 0 0 0 3px rgba(230, 162, 60, .15); }

/* ── 深空导航侧栏（桌面 SPA） ─────────────────── */
.tk-side {
  background-color: #0B1A2F;
  background-image:
    linear-gradient(rgba(0, 117, 255, .06), rgba(0, 200, 255, .03)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, .025) 23px 24px),
    linear-gradient(180deg, #0B1A2F 0%, #10294A 100%);
  color: #c6d2e2;
}
.tk-side .brand { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.tk-side .mi { color: #b7c4d6; }
.tk-side .mi:not(.on):hover { background: rgba(255, 255, 255, .07); color: #fff; }
.tk-side .mi.on { background: linear-gradient(90deg, rgba(0, 117, 255, .95), rgba(0, 200, 255, .75));
  color: #fff; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 117, 255, .35); }
.tk-side .mi.grp { color: #e8eef6; }
.tk-side .mi.sub { color: #93a3b8; }
.tk-side .mi.sub.on { color: #fff; }
.tk-side .mi.sub:not(.on):hover { color: #fff; }

/* ── 顶栏（桌面 SPA） ─────────────────────────── */
.tk-topbar { background: #fff; box-shadow: 0 1px 0 var(--tk-border), 0 2px 10px rgba(11, 26, 47, .04); }

/* ── 移动端顶栏（渐变） ───────────────────────── */
.tk-mtopbar { background: var(--tk-grad); color: #fff; position: sticky; top: 0; z-index: 10; }

/* ── 表单（自定义页） ─────────────────────────── */
.tk-field { width: 100%; box-sizing: border-box; border: 1px solid #dcdfe6;
  border-radius: 8px; padding: 9px 10px; font-size: 14px; transition: border-color .15s, box-shadow .15s; }
.tk-field:focus { outline: none; border-color: var(--tk-primary); box-shadow: 0 0 0 3px rgba(0, 117, 255, .12); }
label.tk-lbl { font-size: 13px; color: var(--tk-text-2); display: block; margin-top: 10px; }

/* ── 科技网格背景（登录/系统图） ───────────────── */
.tk-mesh { background:
    radial-gradient(1200px 500px at 15% -10%, rgba(0, 117, 255, .08), transparent 60%),
    radial-gradient(900px 420px at 110% 15%, rgba(0, 200, 255, .08), transparent 60%),
    linear-gradient(rgba(11, 26, 47, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 26, 47, .028) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px; }

/* 深灰科技网格背景（登录页暗色版）：深空灰底 + 蓝青辉光 + 网格 */
.tk-mesh-dark { background:
    radial-gradient(900px 480px at 14% -8%, rgba(0, 117, 255, .28), transparent 55%),
    radial-gradient(760px 420px at 106% 22%, rgba(0, 200, 255, .16), transparent 58%),
    radial-gradient(600px 360px at 50% 118%, rgba(0, 117, 255, .12), transparent 60%),
    linear-gradient(rgba(140, 175, 220, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 175, 220, .055) 1px, transparent 1px),
    linear-gradient(180deg, #0C1322 0%, #121A2B 100%);
  background-size: auto, auto, auto, 34px 34px, 34px 34px, auto;
  min-height: 100vh; }

/* 深空辉光背景：蓝黑渐变 + 蓝/青光晕,无网格(登录页) */
.tk-deepglow { position: relative; min-height: 100vh;
  background:
    radial-gradient(900px 480px at 14% -8%, rgba(0, 117, 255, .28), transparent 55%),
    radial-gradient(760px 420px at 106% 22%, rgba(0, 200, 255, .16), transparent 58%),
    radial-gradient(700px 400px at 50% 115%, rgba(0, 117, 255, .10), transparent 62%),
    linear-gradient(180deg, #030714 0%, #071026 55%, #06121F 100%); }

/* 星辰大海背景（登录页宇宙版）：深空渐变 + 双星云辉光 + 海平线微光（配合 canvas 动态星空） */
.tk-cosmos { position: relative; overflow: hidden; min-height: 100vh;
  background:
    radial-gradient(1100px 560px at 18% -12%, rgba(0, 117, 255, .22), transparent 60%),
    radial-gradient(900px 520px at 88% 12%, rgba(0, 200, 255, .13), transparent 62%),
    radial-gradient(1400px 420px at 50% 108%, rgba(0, 150, 190, .20), transparent 70%),
    linear-gradient(180deg, #030714 0%, #071026 46%, #0A1830 72%, #06121F 100%); }

/* ── 时间线 ───────────────────────────────────── */
.tk-tl { list-style: none; padding-left: 0; margin: 0; }
.tk-tl li { border-left: 2px solid #dbe4ef; padding: 6px 0 6px 14px; position: relative;
  font-size: 13px; color: #444; }
.tk-tl li::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--tk-grad); box-shadow: 0 0 0 3px rgba(0, 117, 255, .15);
  position: absolute; left: -5px; top: 12px; }
.tk-tl .t { color: var(--tk-text-3); font-size: 12px; margin-right: 8px; }

/* ── 扁平图标基元 ─────────────────────────────── */
.tk-ico { display: inline-flex; vertical-align: -3px; }
.tk-ico svg { display: block; }


/* ══════════════════════════════════════════════════════════════
   0.3 UI 基座扩展（2026-10-05，决策=总纲 0.3）
   ① 全站数字等宽（金额/统计列对齐）
   ② 状态语义色令牌组（值=STATUS_SEM 现用色固化，双端 JS TK_ST 同源）
   ③ 图表色令牌组（echarts 系列色，双端 JS TK_CHART 同源）
   ══════════════════════════════════════════════════════════════ */
body { font-variant-numeric: tabular-nums; }

:root {
  /* 状态语义组（--tk-st-*）：绿=完成/通过 · 琥珀=等待/计划 · 蓝=流转 · 红=驳回/损坏 · 灰=终止/冻结 */
  --tk-info: #4A90D9;
  --tk-st-done: #1F9663;
  --tk-st-wait: #e6a23c;
  --tk-st-flow: #4A90D9;
  --tk-st-reject: #f56c6c;
  --tk-st-gray: #8a939e;
  /* 图表系列色（echarts 读 JS 侧 TK_CHART 同源值） */
  --tk-chart-1: #0075FF;
  --tk-chart-2: #00C8FF;
  --tk-chart-3: #1F9663;
  --tk-chart-4: #E6A23C;
  --tk-chart-5: #8b5cf6;
  --tk-chart-6: #f56c6c;
}

/* ── 移动专属令牌覆写区（m.html 内联样式的收编目标，第2波 UI 深化逐批迁入） ── */
/* 移动端 tabbar/胶囊等组件样式统一引用上方令牌；本区预留覆写钩子 */
@media (max-width: 768px) {
  :root { --tk-radius: 9px; }
}