/* ================================================================
   建工万能助手 · v3 工业蓝图视觉层
   —— 工程蓝图 × 工业机械 × 简约专业 × 大胆个性
   覆盖层：在 style.css / calc-style.css 之后引入，权重更高
   ================================================================ */

/* ---------- 0. Design Tokens ---------- */
:root {
  /* 工业主色 */
  --jg-ink: #0A1120;
  --jg-ink-2: #101B30;
  --jg-ink-3: #16233C;
  --jg-steel: #1E293B;
  --jg-blue: #2563EB;
  --jg-blue-bright: #3D7BFF;
  --jg-cyan: #22D3EE;
  --jg-orange: #F59E0B;
  --jg-orange-deep: #EA580C;
  --jg-paper: #F4F7FB;
  --jg-line: #DCE4F0;
  --jg-line-dark: rgba(148, 163, 184, 0.28);

  /* 覆盖 Element Plus 主题 */
  --el-color-primary: #2563EB;
  --el-color-primary-light-3: #4F83F0;
  --el-color-primary-light-5: #82A6F5;
  --el-color-primary-light-7: #B5C9F9;
  --el-color-primary-light-8: #CEDDFB;
  --el-color-primary-light-9: #E8EFFD;
  --el-color-primary-dark-2: #1D4ED8;
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;
  --el-border-radius-round: 999px;
  --el-font-family: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  /* 工业字体 */
  --jg-font-display: "Bahnschrift", "DIN Alternate", "Arial Narrow", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --jg-font-body: "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 1. 全局基座 ---------- */
html, body {
  font-family: var(--jg-font-body);
  background: var(--jg-paper);
  color: #1E293B;
}

/* 页面冷调蓝图网格纹理 */
body {
  background-color: var(--jg-paper);
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  background-attachment: fixed;
}

#app { background: transparent; }

/* 滚动条工业风 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #E9EFF8; }
::-webkit-scrollbar-thumb {
  background: #9DB4D9;
  border-radius: 6px;
  border: 2px solid #E9EFF8;
}
::-webkit-scrollbar-thumb:hover { background: var(--jg-blue); }

::selection { background: rgba(37, 99, 235, 0.18); }

/* ---------- 2. Element Plus 全局组件工业化 ---------- */
/* 按钮：直角 + 硬朗投影 */
.el-button {
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.02em;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.el-button--primary {
  --el-button-hover-bg-color: #1D4ED8;
  --el-button-hover-border-color: #1D4ED8;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25);
}
.el-button--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35); }

/* 标签 */
.el-tag { border-radius: 4px; font-weight: 600; }
.el-tag--primary { --el-tag-bg-color: rgba(37,99,235,.1); --el-tag-border-color: rgba(37,99,235,.3); --el-tag-text-color: #1D4ED8; }
.el-tag--success { --el-tag-bg-color: rgba(5,150,105,.1); --el-tag-border-color: rgba(5,150,105,.3); --el-tag-text-color: #047857; }
.el-tag--warning { --el-tag-bg-color: rgba(245,158,11,.12); --el-tag-border-color: rgba(245,158,11,.35); --el-tag-text-color: #B45309; }
.el-tag--danger { --el-tag-bg-color: rgba(220,38,38,.1); --el-tag-border-color: rgba(220,38,38,.3); --el-tag-text-color: #B91C1C; }

/* 输入框 */
.el-input__wrapper, .el-select__wrapper {
  border-radius: 6px;
  transition: box-shadow 0.2s;
}
.el-input__wrapper.is-focus, .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px var(--jg-blue) inset, 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

/* 表格 */
.el-table {
  --el-table-border-color: var(--jg-line);
  --el-table-header-bg-color: #F1F5FB;
  --el-table-header-text-color: #334155;
  --el-table-row-hover-bg-color: #EEF4FF;
  border-radius: 10px;
  overflow: hidden;
}
.el-table th.el-table__cell { font-weight: 700; }

/* 弹窗 */
.el-dialog { border-radius: 14px; overflow: hidden; }
.el-dialog__title { font-weight: 700; color: #0F172A; }
.el-dialog__header { border-bottom: 1px solid var(--jg-line); }

/* 卡片 */
.el-card { border-radius: 12px; border-color: var(--jg-line); }

/* 面包屑 */
.el-breadcrumb { font-size: 14px; }

/* Radio 按钮组 */
.el-radio-button__inner { border-radius: 0 !important; font-weight: 600; }

/* ---------- 3. 导航栏：深色工业顶栏 ---------- */
.app-nav {
  background: linear-gradient(180deg, #0A1120 0%, #0D1730 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 24px rgba(10, 17, 32, 0.35) !important;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.app-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--jg-orange) 0%, var(--jg-orange-deep) 40%, var(--jg-blue) 100%);
  opacity: 0.9;
}
.app-nav-inner { height: 72px; }

.app-nav-logo img {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.app-nav-title {
  font-family: var(--jg-font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FFFFFF !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-transform: uppercase;
}
.app-nav-title::after {
  content: '· 一站式建工平台';
  font-family: var(--jg-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.45);
  margin-left: 8px;
  vertical-align: middle;
}

.app-nav-link {
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 500;
  border-radius: 6px;
  padding: 9px 15px;
  transition: all 0.2s;
}
.app-nav-link:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.app-nav-link.active {
  color: #FFFFFF !important;
  background: rgba(37, 99, 235, 0.35) !important;
  position: relative;
}
.app-nav-link.active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: 4px;
  height: 2px;
  background: var(--jg-orange);
  border-radius: 2px;
}

.app-nav-search .el-input__wrapper {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset !important;
  height: 40px;
}
.app-nav-search .el-input__wrapper .el-input__inner {
  height: 40px;
  line-height: 40px;
  display: block;
  vertical-align: middle;
}
.app-nav-search .el-input__wrapper:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
}
.app-nav-search .el-input__wrapper.is-focus {
  background: #FFFFFF !important;
  box-shadow: 0 0 0 2px var(--jg-blue), 0 0 0 6px rgba(37, 99, 235, 0.3) !important;
}
.app-nav-search .el-input__inner { color: #fff; }
.app-nav-search .el-input__inner::placeholder { color: rgba(255, 255, 255, 0.4); }
.app-nav-search .el-input__wrapper.is-focus .el-input__inner { color: #1E293B; }

/* 导航登录按钮 */
.app-nav .btn-primary {
  background: linear-gradient(135deg, var(--jg-blue), #1D4ED8) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-weight: 600;
  box-shadow: 0 2px 12px rgba(37, 99, 235, 0.4);
}
.app-nav .btn-primary:hover {
  box-shadow: 0 4px 18px rgba(37, 99, 235, 0.55);
  transform: translateY(-1px);
}

/* 移动端汉堡菜单 */
.app-nav-hamburger span,
.app-nav-hamburger span::before,
.app-nav-hamburger span::after { background: #FFFFFF; }

/* ---------- 4. Hero 轮播：工程蓝图控制台 ---------- */
.home-hero {
  padding: 20px 0;
  background:
    radial-gradient(ellipse at 20% -20%, rgba(37, 99, 235, 0.12), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(245, 158, 11, 0.08), transparent 50%),
    var(--jg-paper);
}

.carousel-container {
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(10, 17, 32, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 轮播背景：统一压深为工业夜景 */
.carousel-slide.bg-sunset,
.carousel-slide.bg-city,
.carousel-slide.bg-construction,
.carousel-slide.bg-mountain,
.carousel-slide.bg-night {
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(135deg, #0A1120 0%, #101B30 50%, #16233C 100%);
  background-size: 44px 44px, 44px 44px, 100% 100%;
}
/* 每张保留一点差异化光斑 */
.carousel-slide.bg-sunset { background-image:
  radial-gradient(circle at 75% 25%, rgba(245, 158, 11, 0.28), transparent 38%),
  linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(135deg, #0A1120, #101B30 50%, #16233C); background-size: auto, 44px 44px, 44px 44px, 100%; }
.carousel-slide.bg-city { background-image:
  radial-gradient(circle at 30% 70%, rgba(37, 99, 235, 0.35), transparent 42%),
  linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(135deg, #0A1120, #101B30 50%, #16233C); background-size: auto, 44px 44px, 44px 44px, 100%; }
.carousel-slide.bg-construction { background-image:
  radial-gradient(circle at 65% 80%, rgba(245, 158, 11, 0.22), transparent 40%),
  linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(135deg, #0A1120, #101B30 50%, #16233C); background-size: auto, 44px 44px, 44px 44px, 100%; }
.carousel-slide.bg-mountain { background-image:
  radial-gradient(circle at 20% 30%, rgba(34, 211, 238, 0.2), transparent 40%),
  linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(135deg, #0A1120, #101B30 50%, #16233C); background-size: auto, 44px 44px, 44px 44px, 100%; }
.carousel-slide.bg-night { background-image:
  radial-gradient(circle at 80% 20%, rgba(37, 99, 235, 0.3), transparent 45%),
  linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
  linear-gradient(135deg, #0A1120, #101B30 50%, #16233C); background-size: auto, 44px 44px, 44px 44px, 100%; }

.carousel-overlay {
  background: linear-gradient(180deg, rgba(10, 17, 32, 0.25) 0%, rgba(10, 17, 32, 0.68) 100%);
}

/* 四角坐标角标 */
.carousel-container::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  pointer-events: none;
  z-index: 4;
}
.carousel-container::after {
  content: 'JG-HELPER // 工程数据控制台';
  position: absolute;
  top: 16px; left: 26px;
  font-family: var(--jg-font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 4;
}

.carousel-content {
  top: 50%;
  bottom: auto;
  left: 8%;
  transform: translateY(-50%);
  text-align: left;
  max-width: 720px;
  padding: 0;
}
.carousel-tag {
  font-family: var(--jg-font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding: 6px 14px 5px;
  background: rgba(245, 158, 11, 0.18) !important;
  color: #FCD34D;
  border: 1px solid rgba(245, 158, 11, 0.5);
  border-radius: 3px;
  margin-bottom: 18px;
  position: relative;
  padding-left: 22px;
}
.carousel-tag::before {
  content: '';
  position: absolute;
  left: 8px; top: 50%;
  width: 6px; height: 6px;
  background: var(--jg-orange);
  transform: translateY(-50%);
}
.carousel-title {
  font-family: var(--jg-font-display);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  margin-bottom: 14px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
}
.carousel-desc {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
}

/* 圆点：改为工程刻度（底部水平居中） */
.carousel-dots { bottom: 24px; left: 50%; transform: translateX(-50%); gap: 8px; }
.carousel-dot {
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  transition: all 0.3s;
}
.carousel-dot.active {
  background: var(--jg-orange);
  transform: none;
  width: 42px;
}
.carousel-dot:hover { background: rgba(255, 255, 255, 0.6); }

/* 箭头：方形机械按钮 */
.carousel-arrow {
  border-radius: 6px;
  background: rgba(10, 17, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  width: 46px;
  height: 46px;
}
.carousel-arrow:hover {
  background: var(--jg-blue);
  border-color: var(--jg-blue);
  transform: translateY(-50%) scale(1.05);
}

/* ---------- 5. 首页主体 ---------- */
.home-page { background: transparent; }
/* 内容区与 Hero 轮播完全同宽：1264 = 1200 内容 + 32*2 内边距
   width:100% 防止 flex 交叉轴 auto-margin 触发 fit-content 收缩 */
.home-main { width: 100% !important; max-width: 1264px; padding: 0 32px; margin: 0 auto !important; }

/* ---------- 6. 快捷入口：工业面板卡片 ---------- */
.shortcuts-section { padding: 34px 0 42px; }
.shortcuts-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }

.shortcut-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 12px;
  padding: 30px 22px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 移除卡片编号角标（01-08） */
.shortcut-card::before {
  display: none;
}
/* 顶部工业色条 */
.shortcut-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--jg-blue), var(--jg-cyan));
  opacity: 0;
  transition: opacity 0.3s;
}
.shortcut-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.14);
}
.shortcut-card:hover::after { opacity: 1; }

/* 快捷入口图标：深墨蓝底 + 浅白图标（企业级 SaaS 质感，与深色导航呼应） */
.shortcut-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(145deg, #1B2A45 0%, #0F1B30 100%) !important;
  color: #DCE6F5 !important;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  margin: 0 0 16px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: none;
  filter: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.shortcut-icon .el-icon {
  font-size: 30px !important;
  font-weight: 400;
}
.shortcut-icon::before { display: none; }
.shortcut-icon::after { display: none; }
/* hover：工程蓝渐变，浮起发光 */
.shortcut-card:hover .shortcut-icon {
  background: linear-gradient(135deg, #3D7BFF 0%, #1D4ED8 100%) !important;
  border-color: rgba(59, 130, 246, 0.65);
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-3px);
}

.shortcut-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: 0.02em;
}
.shortcut-desc { font-size: 12.5px; color: #94A3B8; }

/* ---------- 7. Section 标题：工程铭牌 ---------- */
.section-header { margin-bottom: 22px; }
.section-title-bar {
  width: 5px;
  height: 24px;
  border-radius: 0;
  background: var(--jg-orange);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}
.section-title h2 {
  font-family: var(--jg-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #0F172A;
}
.section-title h2::after {
  content: ' / MODULE';
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #B6C4DC;
  margin-left: 6px;
}
.section-more {
  color: var(--jg-blue);
  font-weight: 600;
  padding: 6px 14px;
  border: 1px solid rgba(37, 99, 235, 0.25);
  border-radius: 6px;
  background: #fff;
  transition: all 0.25s;
}
.section-more:hover {
  background: var(--jg-blue);
  color: #fff !important;
  border-color: var(--jg-blue);
  gap: 8px;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}

/* ---------- 8. 数据服务卡片 ---------- */
.data-services-grid { gap: 18px; }
.data-service-card {
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 12px;
  padding: 30px 26px 26px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 底部斜切角 */
.data-service-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 46px; height: 4px;
  background: linear-gradient(90deg, var(--jg-orange), var(--jg-orange-deep));
  border-radius: 0 2px 0 0;
  opacity: 0;
  transition: all 0.3s;
}
/* hover 扫描线 */
.data-service-card::after {
  content: '';
  position: absolute;
  left: -60%; top: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(37, 99, 235, 0.08), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.data-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.14);
}
.data-service-card:hover::before { opacity: 1; }
.data-service-card:hover::after { left: 120%; }

/* 数据服务图标：统一深墨蓝（与快捷入口一致） */
.data-service-icon {
  border-radius: 10px;
  background: linear-gradient(145deg, #1B2A45 0%, #0F1B30 100%) !important;
  color: #DCE6F5 !important;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.data-service-card:hover .data-service-icon {
  background: linear-gradient(135deg, #3D7BFF 0%, #1D4ED8 100%) !important;
  border-color: rgba(59, 130, 246, 0.65);
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.data-service-info h4 { font-size: 16.5px; font-weight: 700; }
.data-service-arrow {
  width: 30px; height: 30px;
  border: 1px solid var(--jg-line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  background: #fff;
}
.data-service-card:hover .data-service-arrow {
  color: #fff;
  background: var(--jg-blue);
  border-color: var(--jg-blue);
}

/* ---------- 9. 热门计算器 ---------- */
.hot-calc-grid { gap: 16px; }
.hot-calc-card {
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 12px;
  padding: 24px 26px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hot-calc-card::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 0;
  background: var(--jg-blue);
  transform: translateY(-50%);
  transition: height 0.3s;
}
.hot-calc-card:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.4);
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.13);
}
.hot-calc-card:hover::before { height: 70%; }
/* 热门计算器图标：统一深墨蓝（与快捷入口一致） */
.hot-calc-icon {
  border-radius: 10px;
  background: linear-gradient(145deg, #1B2A45 0%, #0F1B30 100%) !important;
  color: #DCE6F5 !important;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.hot-calc-card:hover .hot-calc-icon {
  background: linear-gradient(135deg, #3D7BFF 0%, #1D4ED8 100%) !important;
  border-color: rgba(59, 130, 246, 0.65);
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.hot-calc-info h4 { font-size: 16px; font-weight: 700; }
.hot-calc-arrow {
  width: 28px; height: 28px;
  border: 1px solid var(--jg-line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94A3B8;
  background: #fff;
  transition: all 0.25s;
}
.hot-calc-card:hover .hot-calc-arrow {
  background: var(--jg-blue);
  color: #fff;
  border-color: var(--jg-blue);
  transform: translateX(3px);
}

/* ---------- 10. 最新资讯列表 ---------- */
.news-list-compact {
  border-radius: 12px;
  border: 1px solid var(--jg-line);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}
.news-item-compact {
  padding: 17px 22px;
  border-bottom: 1px solid #EEF2F9;
  position: relative;
  transition: all 0.25s;
}
/* 左侧警示块 */
.news-item-compact::before {
  content: '';
  width: 3px;
  height: 22px;
  background: var(--jg-orange);
  border-radius: 2px;
  opacity: 0.55;
  flex-shrink: 0;
  transition: all 0.25s;
}
.news-item-compact:hover { background: #F2F6FF; }
.news-item-compact:hover::before { opacity: 1; background: var(--jg-blue); height: 30px; }
.news-item-title { font-weight: 600; }
.news-item-date {
  font-family: var(--jg-font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #94A3B8;
  background: #F4F7FB;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--jg-line);
}

/* ---------- 11. 资源导航入口 ---------- */
.resources-entry-card {
  background: linear-gradient(135deg, #0A1120 0%, #101B30 55%, #16233C 100%) !important;
  border-radius: 12px;
  border: 1px solid rgba(37, 99, 235, 0.35);
  box-shadow: 0 16px 44px rgba(10, 17, 32, 0.4);
  position: relative;
  overflow: hidden;
}
/* 蓝图网格 */
.resources-entry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
/* 警示斜纹角 */
.resources-entry-card::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 110px; height: 110px;
  background: repeating-linear-gradient(-45deg, rgba(245, 158, 11, 0.35) 0 8px, transparent 8px 16px);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
  opacity: 0.7;
}
.resources-entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 56px rgba(10, 17, 32, 0.5);
}
.resources-entry-icon {
  background: rgba(245, 158, 11, 0.16) !important;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 10px !important;
}
.resources-entry-info h3 {
  font-family: var(--jg-font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
}
.resources-entry-info p { color: rgba(255, 255, 255, 0.7); }
.resources-entry-arrow {
  width: 44px; height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resources-entry-card:hover .resources-entry-arrow {
  background: var(--jg-orange);
  border-color: var(--jg-orange);
}

/* ---------- 12. 页脚：深色工业底 ---------- */
.home-footer {
  background: #0A1120 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  position: relative;
  margin-top: 20px;
}
.home-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--jg-orange), var(--jg-blue));
  opacity: 0.8;
}
.home-footer p { color: rgba(255, 255, 255, 0.45) !important; }
.home-footer .footer-brand-logo img {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.home-footer .footer-beian a { color: rgba(255, 255, 255, 0.5) !important; }
.home-footer .footer-beian a:hover { color: #fff !important; }
.footer-sub { letter-spacing: 0.3em; }

/* ================================================================
   数据页（资料库 / 信息价 / 资讯 / 资源导航 / 换算）统一工业化
   ================================================================ */
.data-page { background: transparent; }
.data-main { width: 100% !important; max-width: 1264px; margin: 0 auto !important; padding: 24px 32px; }

/* 页头 Hero：深蓝工程面板 */
.data-page-hero,
.atlas-hero {
  background:
    radial-gradient(ellipse at 85% 20%, rgba(34, 211, 238, 0.14), transparent 45%),
    linear-gradient(135deg, #0E1B36 0%, #12244A 60%, #1B3A78 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 14px 40px rgba(10, 17, 32, 0.3) !important;
  position: relative;
  overflow: hidden;
}
.data-page-hero::before,
.atlas-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
}
.data-page-hero::after,
.atlas-hero::after {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 160px; height: 160px;
  background: repeating-linear-gradient(-45deg, rgba(245, 158, 11, 0.3) 0 8px, transparent 8px 16px);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  opacity: 0.6;
  pointer-events: none;
}
.data-page-hero-title,
.atlas-hero-title {
  font-family: var(--jg-font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
}
.data-page-hero-title::after,
.atlas-hero-title::after {
  content: '';
  display: block;
  width: 52px;
  height: 3px;
  background: var(--jg-orange);
  margin-top: 10px;
  border-radius: 2px;
}
.data-page-hero-desc,
.atlas-hero-desc {
  color: rgba(255, 255, 255, 0.75) !important;
  position: relative;
  z-index: 1;
}
.atlas-hero-icon {
  background: rgba(245, 158, 11, 0.15) !important;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 10px;
  z-index: 1;
}
.hero-stat-item { position: relative; z-index: 1; }
.hero-stat-num {
  font-family: var(--jg-font-display);
  color: #FCD34D !important;
  text-shadow: 0 0 24px rgba(245, 158, 11, 0.4);
}

/* 筛选条 */
.data-main .filter-bar,
.info-price-main .filter-bar {
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.data-main .filter-bar .el-radio-button__inner {
  border: none;
  background: transparent;
  color: #475569;
  font-weight: 600;
}
.data-main .filter-bar .el-radio-button__original-radio:checked + .el-radio-button__inner,
.data-main .filter-bar .el-radio-button:checked .el-radio-button__inner {
  background: var(--jg-blue);
  color: #fff;
  box-shadow: none;
}
.data-main .filter-bar .el-radio-button:first-child .el-radio-button__inner,
.data-main .filter-bar .el-radio-button__inner { border-radius: 6px; }

/* 表格容器 */
.data-page .el-table {
  --el-table-border-color: var(--jg-line);
  --el-table-header-bg-color: #F1F5FB;
  --el-table-header-text-color: #334155;
  --el-table-row-hover-bg-color: #EEF4FF;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

/* 分页 */
.el-pagination.is-background .el-pager li {
  border-radius: 6px;
  font-weight: 600;
}
.el-pagination.is-background .el-pager li.is-active {
  background: var(--jg-blue);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}

/* 加载态 */
.loading-card { border-radius: 12px; border-color: var(--jg-line); }

/* ================================================================
   资讯页
   ================================================================ */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.news-card {
  background: #FFFFFF;
  border: 1px solid var(--jg-line) !important;
  border-radius: 12px !important;
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.news-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--jg-blue), var(--jg-cyan));
  opacity: 0;
  transition: opacity 0.3s;
}
.news-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.13) !important;
}
.news-card:hover::before { opacity: 1; }
.news-card-title {
  font-size: 17px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.5;
}
.news-card-desc { color: #64748B; font-size: 13.5px; line-height: 1.7; }
.news-date {
  font-family: var(--jg-font-display);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #94A3B8;
}
.news-card-footer .el-button { font-weight: 700; }

/* ================================================================
   资料库页
   ================================================================ */
.atlas-hero-stats .hero-stat-label { color: rgba(255, 255, 255, 0.7); }

/* ================================================================
   单位换算页
   ================================================================ */
.converter-layout .el-menu {
  border-right: 1px solid var(--jg-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.converter-layout .el-menu-item {
  font-weight: 600;
  color: #475569;
}
.converter-layout .el-menu-item.is-active {
  background: #EFF4FF;
  color: var(--jg-blue);
  border-right: 3px solid var(--jg-orange);
}
.converter-card { border-radius: 12px; border-color: var(--jg-line); box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05); }
.rmb-result {
  font-family: var(--jg-font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ================================================================
   资源导航页
   ================================================================ */
.resources-search-wrap .el-input__wrapper { border-radius: 8px; }
.resources-grid .resource-card,
.resources-grid .resource-item,
.resources-grid .resources-category {
  background: #fff;
  border: 1px solid var(--jg-line);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: all 0.25s;
}
.resources-grid .resource-card:hover,
.resources-grid .resource-item:hover {
  border-color: rgba(37, 99, 235, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
}

/* ================================================================
   登录页
   ================================================================ */
.login-page-v2 {
  background:
    radial-gradient(ellipse at 15% 10%, rgba(37, 99, 235, 0.18), transparent 50%),
    radial-gradient(ellipse at 90% 90%, rgba(245, 158, 11, 0.1), transparent 45%),
    linear-gradient(160deg, #0A1120 0%, #101B30 55%, #0E1B36 100%) !important;
}
.login-card-v2 {
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5) !important;
}
.login-card-header-v2 h1 {
  font-family: var(--jg-font-display);
  letter-spacing: 0.06em;
}
.login-btn-v2 {
  border-radius: 8px !important;
  font-weight: 700;
  letter-spacing: 0.3em;
}

/* ================================================================
   响应式适配
   ================================================================ */
@media (max-width: 1024px) {
  .carousel-title { font-size: 34px; }
  .news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .app-nav-inner { height: 60px; padding: 0 16px; }
  .app-nav-title { font-size: 17px; }
  .app-nav-title::after { display: none; }
  .carousel-content { left: 6%; right: 6%; }
  .carousel-title { font-size: 28px; }
  .carousel-desc { font-size: 14px; }
  .carousel-container::after { display: none; }
  .home-main, .data-main { padding: 0 16px; }
  .shortcuts-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .shortcut-card { padding: 22px 14px 18px; }
  .data-services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .hot-calc-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .news-grid { grid-template-columns: 1fr; gap: 14px; }
  .section-title h2 { font-size: 19px; }
  .section-title h2::after { display: none; }
  .resources-entry-card { padding: 22px 20px !important; gap: 16px !important; }
  .data-page-hero-title, .atlas-hero-title { font-size: 20px; }
}

/* ================================================================
   计算器页面：统一深墨蓝工业风（覆盖 calc-style.css）
   ================================================================ */
/* 页面背景：浅灰蓝图网格 */
.calc-hub-page {
  background-color: var(--jg-paper);
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* 顶部导航：深墨蓝 */
.calc-hub-header {
  background: linear-gradient(180deg, #0A1120 0%, #0D1730 100%) !important;
  box-shadow: 0 4px 24px rgba(10, 17, 32, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
}
.calc-hub-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--jg-orange), var(--jg-blue));
  opacity: 0.9;
}
.calc-hub-title { color: #FFFFFF; }
.calc-hub-title-icon {
  background: linear-gradient(135deg, #3D7BFF, #1D4ED8) !important;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4);
}
.calc-hub-subtitle { color: rgba(255, 255, 255, 0.5) !important; }

/* 搜索框：深色玻璃 */
.calc-hub-search {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.5);
}

/* 导航 Tab */
.calc-hub-nav-tab {
  color: rgba(255, 255, 255, 0.72) !important;
  border-radius: 6px;
  transition: all 0.2s;
}
.calc-hub-nav-tab:hover { color: #fff !important; background: rgba(255, 255, 255, 0.08); }
.calc-hub-nav-tab.active {
  color: #fff !important;
  background: rgba(37, 99, 235, 0.35) !important;
}
.calc-hub-nav-tab.active::after { background: var(--jg-orange) !important; }

/* 区块标题：工业铭牌 */
.calc-section-title {
  font-family: var(--jg-font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #0F172A;
}
.calc-section-title::before {
  background: var(--jg-orange) !important;
  border-radius: 0 !important;
  width: 5px !important;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.35);
}

/* 分类卡片 / 常用卡片：硬朗白卡片 */
.calc-category-card,
.calc-popular-item {
  background: #FFFFFF !important;
  border: 1px solid var(--jg-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.calc-category-card:hover,
.calc-popular-item:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, 0.4) !important;
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.13) !important;
}

/* 分类图标 + 常用图标：深墨蓝统一（覆盖 data-theme 彩色） */
.calc-category-icon,
.calc-popular-icon {
  background: linear-gradient(145deg, #1B2A45 0%, #0F1B30 100%) !important;
  color: #DCE6F5 !important;
  border: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.08);
  border-radius: 12px !important;
}
.calc-category-card[data-theme="blue"] .calc-category-icon,
.calc-category-card[data-theme="green"] .calc-category-icon,
.calc-category-card[data-theme="orange"] .calc-category-icon,
.calc-category-card[data-theme="cyan"] .calc-category-icon,
.calc-category-card[data-theme="violet"] .calc-category-icon,
.calc-category-card[data-theme="rose"] .calc-category-icon {
  background: linear-gradient(145deg, #1B2A45 0%, #0F1B30 100%) !important;
  color: #DCE6F5 !important;
}
.calc-category-card:hover .calc-category-icon,
.calc-category-card[data-theme="blue"]:hover .calc-category-icon,
.calc-category-card[data-theme="green"]:hover .calc-category-icon,
.calc-category-card[data-theme="orange"]:hover .calc-category-icon,
.calc-category-card[data-theme="cyan"]:hover .calc-category-icon,
.calc-category-card[data-theme="violet"]:hover .calc-category-icon,
.calc-category-card[data-theme="rose"]:hover .calc-category-icon,
.calc-popular-item:hover .calc-popular-icon {
  background: linear-gradient(135deg, #3D7BFF 0%, #1D4ED8 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.45) !important;
}

/* 分类名称 / 数量 / 箭头 */
.calc-category-name { color: #0F172A !important; font-weight: 700; }
.calc-category-count { color: #94A3B8 !important; }
.calc-category-arrow {
  background: #fff !important;
  border: 1px solid var(--jg-line) !important;
  border-radius: 6px !important;
  color: #94A3B8 !important;
  transition: all 0.25s;
}
.calc-category-card:hover .calc-category-arrow {
  background: var(--jg-blue) !important;
  color: #fff !important;
  border-color: var(--jg-blue) !important;
  transform: translateX(3px);
}
.calc-popular-item .calc-popular-name { color: #0F172A !important; font-weight: 600; }

/* 分类页头部 */
.calc-cat-header {
  background:
    radial-gradient(ellipse at 85% 20%, rgba(34, 211, 238, 0.14), transparent 45%),
    linear-gradient(135deg, #0E1B36 0%, #12244A 60%, #1B3A78 100%) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 14px 40px rgba(10, 17, 32, 0.3) !important;
}
.calc-cat-back { color: rgba(255, 255, 255, 0.85) !important; }
.calc-cat-back:hover { color: #fff !important; }
.calc-cat-title { color: #FFFFFF !important; font-family: var(--jg-font-display); }

/* 子分类 Tab */
.calc-sub-tab {
  border-radius: 6px !important;
  border: 1px solid var(--jg-line) !important;
  background: #fff !important;
  color: #475569 !important;
  font-weight: 600;
  transition: all 0.2s;
}
.calc-sub-tab:hover { border-color: rgba(37, 99, 235, 0.4) !important; color: var(--jg-blue) !important; }
.calc-sub-tab.active {
  background: var(--jg-blue) !important;
  border-color: var(--jg-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.calc-sub-badge { background: #EEF2F9 !important; color: #64748B !important; }
.calc-sub-tab.active .calc-sub-badge { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; }

/* 形状卡片 */
.calc-shape-card {
  border-radius: 10px !important;
  border: 1px solid var(--jg-line) !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: all 0.25s;
}
.calc-shape-card:hover { border-color: rgba(37, 99, 235, 0.4) !important; transform: translateY(-2px); }
.calc-shape-card.active {
  border-color: var(--jg-blue) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}
.calc-shape-dot { background: var(--jg-blue) !important; }

/* 参数面板 / 右侧面板 */
.calc-param-panel,
.calc-right-card {
  border-radius: 12px !important;
  border: 1px solid var(--jg-line) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
}
.calc-param-title,
.calc-right-title { font-family: var(--jg-font-display); font-weight: 700; color: #0F172A; }

/* 输入框 */
.calc-field-input .el-input__wrapper { border-radius: 6px !important; }

/* 提交按钮：工业蓝 */
.calc-submit-btn {
  background: linear-gradient(135deg, #3D7BFF, #1D4ED8) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: all 0.25s;
}
.calc-submit-btn:hover {
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
  transform: translateY(-1px);
}

/* 结果区 */
.calc-result {
  border-radius: 12px !important;
  border: 1px solid var(--jg-line) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.calc-result-title { font-family: var(--jg-font-display); font-weight: 700; }
.calc-result-val { color: var(--jg-blue) !important; font-weight: 700; }

/* 计算器详情页容器 */
.calc-page { background: transparent; }
.calc-left-panel,
.calc-preview-header {
  border-radius: 12px !important;
  border: 1px solid var(--jg-line) !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.calc-back-btn {
  border-radius: 8px !important;
  background: linear-gradient(135deg, #3D7BFF, #1D4ED8) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}

/* 计算器页面：统一全局导航后的内容区与工具条 */
.calc-hub-content {
  max-width: 1264px;
  margin: 0 auto;
  padding: 28px 32px;
}
.calc-hub-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  margin-bottom: 22px;
}
.calc-hub-toolbar .calc-hub-search {
  background: #F4F7FB !important;
  border: 1px solid var(--jg-line) !important;
  color: #94A3B8 !important;
  border-radius: 8px !important;
  width: 250px;
}
.calc-hub-toolbar .calc-hub-nav-tab {
  color: #475569 !important;
  background: #F4F7FB !important;
  border-radius: 6px;
}
.calc-hub-toolbar .calc-hub-nav-tab:hover {
  color: var(--jg-blue) !important;
  background: #EAF1FF !important;
}
.calc-hub-toolbar .calc-hub-nav-tab.active {
  background: var(--jg-blue) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.calc-hub-toolbar .calc-hub-nav-tab.active::after { display: none; }

/* ================================================================
   计算器中心页：敬翔式三栏布局（分类标签 + 计算器按钮 + 工作台）
   ================================================================ */
/* 大分类标签栏 */
.calc-hub-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  margin-bottom: 14px;
}
.calc-hub-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #F4F7FB;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
  border: 1px solid transparent;
}
.calc-hub-cat:hover {
  color: var(--jg-blue);
  background: #EAF1FF;
}
.calc-hub-cat.active {
  background: linear-gradient(135deg, #3D7BFF, #1D4ED8);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}
.calc-hub-cat-count {
  font-family: var(--jg-font-display);
  font-size: 11px;
  font-weight: 700;
  background: rgba(100, 116, 139, 0.15);
  color: #64748B;
  padding: 1px 7px;
  border-radius: 999px;
  line-height: 1.6;
}
.calc-hub-cat.active .calc-hub-cat-count {
  background: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
}

/* 计算器按钮栏 */
.calc-hub-calc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  margin-bottom: 18px;
}
.calc-hub-calc-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  background: #F4F7FB;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s;
  border: 1px solid transparent;
}
.calc-hub-calc-btn:hover {
  color: var(--jg-blue);
  border-color: rgba(37, 99, 235, 0.35);
  background: #EAF1FF;
}
.calc-hub-calc-btn.active {
  background: #EAF1FF;
  color: var(--jg-blue);
  border-color: rgba(37, 99, 235, 0.4);
  font-weight: 700;
}
.calc-hub-calc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #B6C4DC;
  transition: all 0.22s;
}
.calc-hub-calc-btn.active .calc-hub-calc-dot {
  background: var(--jg-blue);
  box-shadow: 0 0 6px rgba(37, 99, 235, 0.6);
}

/* 三栏工作台 */
.calc-workbench {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.1fr;
  gap: 16px;
  align-items: stretch;
}
.calc-work-preview,
.calc-work-form,
.calc-work-result {
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.calc-work-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--jg-font-display);
  font-size: 15px;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.calc-work-title-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: var(--jg-orange);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* 图形预览区 */
.calc-work-svg {
  flex: 1;
  min-height: 260px;
  background:
    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    #F8FAFD;
  background-size: 20px 20px;
  border: 1px solid #E8EFF8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 16px;
}
.calc-work-svg svg {
  max-width: 100%;
  max-height: 240px;
}
.calc-work-svg-label {
  text-align: center;
  font-size: 13px;
  color: #94A3B8;
  margin-top: 10px;
  font-weight: 500;
}

/* 参数输入区 */
.calc-work-form .calc-field-row { margin-bottom: 12px; }
.calc-work-actions {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}
.calc-work-actions .calc-submit-btn { flex: 1.4; }
.calc-reset-btn {
  flex: 1;
  background: #FFFFFF !important;
  border: 1px solid var(--jg-line) !important;
  color: #64748B !important;
  border-radius: 8px !important;
  font-weight: 600;
}
.calc-reset-btn:hover {
  border-color: rgba(37, 99, 235, 0.4) !important;
  color: var(--jg-blue) !important;
}

/* 结果展示区 */
.calc-result-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #B6C4DC;
  font-size: 14px;
  line-height: 1.8;
  background: #F8FAFD;
  border: 1px dashed #DCE4F0;
  border-radius: 10px;
  min-height: 240px;
}
.calc-result-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  flex: 1;
  align-content: start;
}
.calc-result-card {
  background: #FFFFFF;
  border: 1px solid var(--jg-line);
  border-radius: 10px;
  padding: 12px 14px;
  transition: all 0.25s;
}
.calc-result-card.primary {
  background: linear-gradient(145deg, #EFF4FF, #E8EFFD);
  border-color: rgba(37, 99, 235, 0.25);
}
.calc-result-key {
  font-size: 12px;
  color: #64748B;
  margin-bottom: 4px;
  line-height: 1.4;
}
.calc-result-val {
  font-family: var(--jg-font-display);
  font-size: 19px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: 0.02em;
}
.calc-result-card.primary .calc-result-val { color: var(--jg-blue); }
.calc-result-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* ================================================================
   全站毛玻璃（Glassmorphism）覆盖层
   —— 半透明磨砂 + 背景模糊 + 彩色光斑背景
   ================================================================ */
/* 页面背景：蓝图网格 + 彩色光斑（让毛玻璃有内容可透） */
body {
  background-color: #EEF3FA;
  background-image:
    radial-gradient(ellipse at 12% -5%, rgba(37, 99, 235, 0.14), transparent 52%),
    radial-gradient(ellipse at 88% 8%, rgba(245, 158, 11, 0.10), transparent 48%),
    radial-gradient(ellipse at 70% 92%, rgba(34, 211, 238, 0.10), transparent 50%),
    radial-gradient(ellipse at 25% 88%, rgba(124, 58, 237, 0.07), transparent 46%),
    linear-gradient(rgba(37, 99, 235, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.035) 1px, transparent 1px);
  background-size: auto, auto, auto, auto, 30px 30px, 30px 30px;
  background-attachment: fixed;
}

/* ---------- 导航栏：半透明深墨蓝磨砂 ---------- */
.app-nav {
  background: rgba(10, 17, 32, 0.72) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* ---------- Hero 轮播 ---------- */
.carousel-container {
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 20px 60px rgba(10, 17, 32, 0.35);
}

/* ---------- 首页卡片：半透明磨砂白 ---------- */
.shortcut-card,
.data-service-card,
.hot-calc-card,
.news-list-compact,
.news-card,
.resources-grid .resource-card,
.resources-grid .resource-item,
.resources-grid .resources-category,
.converter-card,
.calc-hub-cats,
.calc-hub-calc-list,
.calc-work-preview,
.calc-work-form,
.calc-work-result,
.data-main .filter-bar,
.info-price-main .filter-bar {
  background: rgba(255, 255, 255, 0.60) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%);
  backdrop-filter: blur(18px) saturate(165%);
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.08) !important;
}
.shortcut-card:hover,
.data-service-card:hover,
.hot-calc-card:hover,
.news-card:hover {
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: 0 16px 44px rgba(37, 99, 235, 0.16) !important;
}

/* ---------- 资源导航入口：半透明深墨蓝磨砂 ---------- */
.resources-entry-card {
  background: rgba(10, 17, 32, 0.62) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-color: rgba(59, 130, 246, 0.35) !important;
}

/* ---------- 页脚：半透明深墨蓝磨砂 ---------- */
.home-footer {
  background: rgba(10, 17, 32, 0.78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* ---------- 数据页 Hero / 计算器分类页头 ---------- */
.data-page-hero,
.atlas-hero,
.calc-cat-header {
  background:
    radial-gradient(ellipse at 85% 20%, rgba(34, 211, 238, 0.16), transparent 45%),
    rgba(14, 27, 54, 0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

/* ---------- 表格：磨砂容器 ---------- */
.data-page .el-table {
  background: rgba(255, 255, 255, 0.62) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.data-page .el-table th.el-table__cell {
  background: rgba(241, 245, 251, 0.72) !important;
}
.data-page .el-table td.el-table__cell {
  background: rgba(255, 255, 255, 0.35) !important;
}

/* ---------- 输入框 / 下拉：磨砂 ---------- */
.el-input__wrapper,
.el-select__wrapper {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- 参数面板 / 右侧面板 / 预览区 ---------- */
.calc-param-panel,
.calc-right-card,
.calc-left-panel,
.calc-preview-header {
  background: rgba(255, 255, 255, 0.60) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border-color: rgba(255, 255, 255, 0.55) !important;
}

/* ---------- 计算器图形预览网格 ---------- */
.calc-work-svg {
  background:
    linear-gradient(rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.05) 1px, transparent 1px),
    rgba(248, 250, 253, 0.55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.calc-result-empty {
  background: rgba(248, 250, 253, 0.55) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- 分类标签 / 计算器按钮（磨砂浅底） ---------- */
.calc-hub-cat,
.calc-hub-calc-btn,
.calc-sub-tab {
  background: rgba(244, 247, 251, 0.65) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- 结果卡片 ---------- */
.calc-result-card {
  background: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.calc-result-card.primary {
  background: linear-gradient(145deg, rgba(239, 244, 255, 0.75), rgba(232, 239, 253, 0.85)) !important;
}

/* ================================================================
   修复层：导航栏恢复实色 / CAD 图纸预览 / 毛玻璃文字对比度
   ================================================================ */
/* 1. 顶部导航栏：恢复不透明深墨蓝实色（去掉毛玻璃） */
.app-nav {
  background: linear-gradient(180deg, #0A1120 0%, #0D1730 100%) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 2. CAD 工程图纸风格预览框：蓝色坐标网格 */
.calc-work-svg {
  background:
    linear-gradient(rgba(37, 99, 235, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.10) 1px, transparent 1px),
    linear-gradient(rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
    #FBFDFF !important;
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(37, 99, 235, 0.28) !important;
}
/* CAD 风格：图形线条加粗蓝色，填充淡蓝，标注清晰 */
.calc-work-svg svg *[stroke] {
  stroke: #2563EB !important;
  stroke-width: 2.4 !important;
}
.calc-work-svg svg *[fill]:not([fill="none"]) {
  fill: rgba(37, 99, 235, 0.10) !important;
}
.calc-work-svg svg text {
  fill: #1E40AF !important;
  font-size: 14px !important;
  font-weight: 700;
  font-family: var(--jg-font-display);
}
.calc-work-svg svg {
  filter: drop-shadow(0 3px 8px rgba(37, 99, 235, 0.25));
}
/* CAD 图纸外框标记 */
.calc-work-preview::after {
  content: 'CAD VIEW';
  position: absolute;
  right: 14px; top: 12px;
  font-family: var(--jg-font-display);
  font-size: 10px;
  letter-spacing: 0.25em;
  color: rgba(37, 99, 235, 0.45);
  pointer-events: none;
}
.calc-work-preview { position: relative; }

/* 3. 毛玻璃下的文字对比度修复 */
.shortcut-desc,
.data-service-info p,
.hot-calc-info p,
.news-card-desc,
.news-date,
.news-item-date,
.calc-result-key,
.calc-hub-cat-count,
.calc-work-svg-label,
.calc-field-unit,
.calc-category-count,
.calc-hub-calc-btn,
.news-item-title,
.calc-popular-item span {
  color: #5B6B84 !important;
}
/* 输入框内文字加深 */
.el-input__inner,
.el-select__inner,
.calc-field-input .el-input__inner {
  color: #1E293B !important;
}
.el-input__inner::placeholder {
  color: #7A8BA3 !important;
}

/* ================================================================
   修复层：底部信息栏贴底（sticky footer，去掉底部白色空白）
   ================================================================ */
.calc-hub-page,
.calc-category-page,
.calc-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 0 !important;
}
.calc-hub-page .home-footer,
.calc-category-page .home-footer,
.calc-page .home-footer {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}
/* 全局兜底：任何页面的 footer 都贴底 */
.home-footer { margin-bottom: 0 !important; }