/* ============================================================
   天工后台 · 统一主题「钛金军工·浅色机甲」（以 CRM 控制台为基准）
   机甲青 #0a7e96 + 军工橙 #e8681c + 钛合金冷钢灰底 #d2dbe6
   角色：整文件替换 sales-theme.css（墨绿臻品），选择器全覆盖
   ============================================================ */
@import url('../vendor/fonts/mech-fonts.css?v=20261012a');

:root {
  /* CRM 同源设计令牌 */
  --bg:#d2dbe6; --bg2:#c3cdda;
  --plate:#eef2f7; --plate-hi:#f9fbfd; --plate-lo:#dde4ed;
  --line:#b1bccb; --line-dk:#8d9aae;
  --ink:#22364c; --ink-2:#485b73; --muted:#73839b;
  --cyan:#0a7e96; --cyan-d:#076277; --cyan-l:#23c3df; --cyan-soft:#e2f5fa;
  --orange:#e8681c; --orange-d:#c4520e; --orange-soft:#fdeee2;
  --green:#1b9a5d; --green-soft:#e3f5ec;
  --yellow:#d9a20a; --yellow-soft:#fbf3da;
  --red:#d6453c; --red-soft:#fbe9e8;
  --blue:#2b63c8; --blue-soft:#e7eefb;
  --violet:#7a55c2; --violet-soft:#f0ebfa;
  --head:#36536e; --head-2:#2e4861;
  --shadow:0 2px 0 #b9c4d2,0 10px 24px rgba(34,54,76,.14);

  /* 旧「墨绿臻品」变量名别名 → 新机甲色（防页面内联样式引用旧变量断色） */
  --sp-green-deep:#076277; --sp-green:#0a7e96; --sp-green-mid:#1293ad;
  --sp-gold:#e8681c; --sp-gold-dark:#c4520e; --sp-gold-soft:rgba(232,104,28,.12);
  --sp-cream:#d2dbe6; --sp-warm:#dde4ed; --sp-ink:#22364c; --sp-muted:#73839b; --sp-line:#c3cfdd;

  /* Element Plus 主色接管（机甲青系梯度） */
  --el-color-primary:#0a7e96; --el-color-primary-dark-2:#076277;
  --el-color-primary-light-3:#54a5b6; --el-color-primary-light-5:#8abfcb;
  --el-color-primary-light-7:#b5d8e0; --el-color-primary-light-8:#cee5ea; --el-color-primary-light-9:#e2f5fa;
  --el-color-success:#1b9a5d; --el-color-warning:#d9a20a;
  --el-color-danger:#d6453c; --el-color-error:#d6453c; --el-color-info:#73839b;
  --el-border-radius-base:4px;
  --el-text-color-primary:#22364c; --el-text-color-regular:#485b73; --el-text-color-secondary:#73839b;
  --el-border-color:#c3cfdd; --el-border-color-light:#ccd6e2; --el-border-color-lighter:#d8e0ea; --el-border-color-extra-light:#e4eaf1;
  --el-fill-color-light:#e9eff6; --el-fill-color-lighter:#eef3f8; --el-fill-color-extra-light:#f4f8fb;
}

body { margin:0; color:var(--ink);
  font-family:"Noto Sans SC","Helvetica Neue",Helvetica,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  background:linear-gradient(155deg,#dbe2ec 0%,#d0d9e5 45%,#c7d1de 100%); min-height:100vh; }
/* 钛金网格底纹 */
body::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(38,66,92,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(38,66,92,.055) 1px,transparent 1px);
  background-size:34px 34px; }
#app { position:relative; z-index:1; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#d7dee8; }
::-webkit-scrollbar-thumb { background:linear-gradient(#9fb0c3,#8295ab); border:2px solid #d7dee8; }

/* ---------- 页头（浅色钛板 + 青色下边线 + 墨蓝字） ---------- */
.sp-header { background:linear-gradient(180deg,#f3f7fb 0%,#e2e9f1 100%); color:var(--ink);
  padding:0 24px; height:56px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:2px solid var(--cyan); box-shadow:0 2px 10px rgba(34,54,76,.18); position:relative; z-index:10; }
.sp-header .tt { font-size:17px; font-weight:700; letter-spacing:1px; color:var(--ink); }
.sp-header .tt::before { content:""; display:inline-block; width:10px; height:10px;
  background:var(--cyan); margin-right:12px; vertical-align:1px;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); box-shadow:0 0 8px rgba(10,126,150,.5); }
.sp-header .sub { font-size:12px; color:var(--cyan-d); margin-left:12px; font-weight:500; letter-spacing:3px; }
.sp-header .user { font-size:13px; color:var(--ink-2); display:flex; align-items:center; }
.sp-header a { color:var(--ink-2); text-decoration:none; margin-left:16px; font-size:13px; transition:color .15s; }
.sp-header a:hover { color:var(--cyan-d); }
.sp-body { padding:20px 24px 28px; }

/* ---------- 登录页（浅钢渐变 + 青光晕） ---------- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1000px 500px at 70% -10%,rgba(35,195,223,.16),transparent 60%),
             radial-gradient(800px 420px at 15% 110%,rgba(10,126,150,.10),transparent 55%),
             linear-gradient(155deg,#dbe2ec 0%,#d0d9e5 45%,#c7d1de 100%); }
.login-box { width:400px; }
.login-box .el-card { border:1px solid var(--line); border-radius:8px; overflow:hidden;
  box-shadow:0 24px 60px rgba(34,54,76,.22); }
.login-box .el-card::before { content:""; display:block; height:4px; margin:-20px -20px 18px;
  background:linear-gradient(90deg,var(--cyan-d),var(--cyan),var(--cyan-l),var(--cyan),var(--cyan-d)); }
.login-box h2 { text-align:center; margin:4px 0 4px; color:var(--cyan-d); letter-spacing:3px; font-size:22px; }
.login-box .tip { text-align:center; color:var(--muted); font-size:12px; letter-spacing:4px; margin-bottom:24px; }
.login-box .el-button--primary { letter-spacing:6px; font-weight:700; height:44px; }

/* ---------- 卡片（钛板小圆角 + 钢蓝边框） ---------- */
.el-card { border-color:var(--line); border-radius:8px;
  background:linear-gradient(170deg,var(--plate-hi) 0%,var(--plate) 60%,var(--plate-lo) 100%);
  box-shadow:0 1px 2px rgba(34,54,76,.06); }
.el-card:hover { box-shadow:0 6px 18px rgba(34,54,76,.12); }
.el-card__header { border-bottom-color:var(--line); font-weight:700; color:var(--ink);
  background:linear-gradient(180deg,#e9eff6,#dde6f0); }

/* ---------- 页签 ---------- */
.el-tabs__item { color:var(--muted); font-size:14px; height:44px; line-height:44px; }
.el-tabs__item.is-active { color:var(--cyan-d); font-weight:700; }
.el-tabs__item:hover { color:var(--cyan-d); }
.el-tabs__active-bar { background:linear-gradient(90deg,var(--cyan),var(--cyan-l)); height:3px; border-radius:2px; }
.el-tabs__nav-wrap::after { background:var(--line); height:1px; }

/* ---------- 表格（钢灰渐变表头 + 斑马纹 + 悬停泛青） ---------- */
.el-table { --el-table-border-color:#d4dce6; --el-table-header-bg-color:#e9eff6;
  --el-table-row-hover-bg-color:var(--cyan-soft); --el-table-text-color:#485b73; --el-table-header-text-color:var(--ink-2);
  --el-table-border-color:#d4dce6; background:transparent; }
.el-table th.el-table__cell { background:linear-gradient(180deg,#e9eff6,#dde6f0) !important;
  color:var(--ink-2); font-weight:700; border-bottom:2px solid #b8c3d1; }
.el-table .el-table__body tr:nth-child(even) > td.el-table__cell { background:#eef3f8; }
.el-table .el-table__body tr:hover > td.el-table__cell { background:var(--cyan-soft) !important; }
.el-table--border .el-table__cell { border-right-color:#d4dce6; }
.el-table .el-table__cell { border-bottom-color:#d4dce6; }

/* ---------- 按钮（实心款机甲切角 + 青系渐变；文字/朴素/链接变体豁免） ---------- */
.el-button:not(.is-text):not(.is-plain):not(.is-link) {
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  font-weight:600; }
.el-button--primary:not(.is-text):not(.is-plain):not(.is-link) {
  background:linear-gradient(180deg,#12a3c0 0%,var(--cyan) 55%,var(--cyan-d) 100%); border:none; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #064f61; }
.el-button--primary:not(.is-text):not(.is-plain):not(.is-link):hover {
  background:linear-gradient(180deg,#23c3df 0%,#0c8bab 55%,#076277 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #064f61,0 4px 12px rgba(10,126,150,.3); }
.el-button--primary:not(.is-text):not(.is-plain):not(.is-link):active {
  background:linear-gradient(180deg,#076277 0%,#064f61 100%); }
.el-button--warning:not(.is-text):not(.is-plain):not(.is-link) {
  background:linear-gradient(180deg,#fb8a3c 0%,var(--orange) 55%,var(--orange-d) 100%); border:none; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #9c410c; }
.el-button--success:not(.is-text):not(.is-plain):not(.is-link) {
  background:linear-gradient(180deg,#2cb873 0%,var(--green) 55%,#147a49 100%); border:none; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #0f5c37; }
.el-button--danger:not(.is-text):not(.is-plain):not(.is-link) {
  background:linear-gradient(180deg,#e0685f 0%,var(--red) 55%,#b23329 100%); border:none; color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 0 #8a261e; }
.el-button.is-text { --el-button-hover-bg-color:var(--cyan-soft); }

/* ---------- 标签 / 分页 / 表单 ---------- */
.el-tag { border-radius:3px;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); border:none; }
.el-pagination { --el-pagination-hover-color:var(--cyan-d); }
.el-pagination .el-pager li.is-active { background:var(--cyan); color:#fff; }
.el-pager li:hover { color:var(--cyan-d); }
.el-form-item__label { color:var(--ink); font-weight:600; }
.el-input__wrapper.is-focus, .el-select__wrapper.is-focused { box-shadow:0 0 0 1px var(--cyan) inset,0 0 0 3px rgba(35,195,223,.18); }
.el-dialog { border-radius:8px; border:1px solid var(--line); box-shadow:0 18px 48px rgba(34,54,76,.25); }
.el-dialog__header { border-bottom:1px solid var(--line); margin-right:0; padding-bottom:14px;
  background:linear-gradient(180deg,#e9eff6,#dde6f0); margin:-20px -20px 16px; padding:14px 20px; }
.el-dialog__title { font-weight:700; color:var(--ink); }
.el-message-box { border-radius:8px; border:1px solid var(--line); }

/* ---------- 总览仪表盘（浅色钛板 + 青底边） ---------- */
.sp-hero { background:linear-gradient(150deg,#f4f8fc 0%,#e6edf5 60%,#dde5ee 100%); border-radius:8px;
  padding:24px 28px; color:var(--ink); position:relative; overflow:hidden; margin-bottom:16px;
  border:1px solid var(--line); border-bottom:2px solid var(--cyan); }
.sp-hero::after { content:""; position:absolute; right:-60px; top:-80px; width:260px; height:260px;
  border-radius:50%; background:radial-gradient(circle,rgba(35,195,223,.18),transparent 65%); }
.sp-hero .h-t { font-size:20px; font-weight:700; letter-spacing:2px; color:var(--ink); }
.sp-hero .h-t i { display:inline-block; width:10px; height:10px; background:var(--cyan);
  margin-right:12px; vertical-align:2px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.sp-hero .h-s { margin-top:8px; font-size:12px; color:var(--cyan-d); letter-spacing:2px; }
.sp-kpi { background:linear-gradient(170deg,var(--plate-hi),var(--plate) 60%,var(--plate-lo));
  border:1px solid var(--line); border-radius:8px; padding:16px 20px;
  display:flex; align-items:center; gap:14px; transition:transform .15s, box-shadow .15s; }
.sp-kpi:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(34,54,76,.14); border-color:var(--cyan); }
.sp-kpi .ic { width:42px; height:42px; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:17px; font-weight:700; color:#fff;
  background:linear-gradient(180deg,#12a3c0,var(--cyan-d));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }
.sp-kpi .lb { font-size:12px; color:var(--muted); letter-spacing:1px; }
.sp-kpi .vl { font-family:"Orbitron","Noto Sans SC",sans-serif; font-size:24px; font-weight:800;
  color:var(--ink); line-height:1.25; font-variant-numeric:tabular-nums; }
.sp-kpi .vl .err { color:var(--red); font-size:13px; font-weight:500; font-family:"Noto Sans SC",sans-serif; }
.sp-note { margin-top:16px; padding:12px 16px; border-radius:6px; font-size:13px; color:var(--ink-2);
  background:linear-gradient(170deg,var(--plate-hi),var(--plate)); border:1px solid var(--line); border-left:3px solid var(--cyan); }

/* ---------- UI 审核工作台 ---------- */
.uiopt-kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.uiopt-batch { padding:12px 16px; border:1px solid var(--line); border-radius:6px; margin-bottom:8px;
  cursor:pointer; transition:border-color .15s, background .15s; background:var(--plate-hi); }
.uiopt-batch:hover { border-color:var(--cyan); background:var(--cyan-soft); }
.uiopt-batch.active { border-color:var(--cyan-d); background:var(--cyan-soft); }
.uiopt-prop { padding:12px 16px; border:1px solid var(--line); border-radius:6px; margin-bottom:8px; background:var(--plate-hi); }
.uiopt-prop.reviewed { opacity:.78; }
.uiopt-diff { margin-top:12px; background:#22364c; border-radius:6px; padding:12px 14px; max-height:280px; overflow:auto; }
.uiopt-diff pre { margin:0; font-size:12px; line-height:1.7; color:#c3d2e2; white-space:pre-wrap; word-break:break-all; }

/* ---------- 弹窗过渡兜底（全站） ----------
   部分运行环境（无头/节流窗口）下弹窗淡入淡出的 animationend/transitionend 不触发，
   Vue 过渡无法收尾会残留遮罩（is-closing 不可点、ESC 失效）。
   弹窗类组件统一即时完成过渡（0 时长），开关干脆可靠，不影响业务交互。 */
.dialog-fade-enter-active, .dialog-fade-leave-active,
.dialog-fade-enter-active .el-overlay-dialog, .dialog-fade-leave-active .el-overlay-dialog,
.el-drawer-fade-enter-active, .el-drawer-fade-leave-active,
.message-box-fade-enter-active, .message-box-fade-leave-active,
.viewer-fade-enter-active, .viewer-fade-leave-active,
.el-message-fade-enter-active, .el-message-fade-leave-active,
.el-notification-fade-enter-active, .el-notification-fade-leave-active,
.el-loading-fade-enter-active, .el-loading-fade-leave-active {
  animation: none !important;
  transition: none !important;
}