/* ================================================================
   建工万能助手 · 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: transparent;
}

.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-color: var(--jg-paper, #F4F7FB);
  background-image:
    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%),
    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, 26px 26px, 26px 26px;
}
/* 内容区与 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;
  position: relative;
  /* 突破 .home-main max-width 限制，铺满全宽；用 padding 把内容推回原位 */
  margin: 0 calc(-50vw + 50%);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  /* 透明背景，透出 .home-page 统一背景 */
  background: transparent;
}
.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 {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 240px;
  display: block;
  margin: auto;
}
.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%);
  background-size: auto, auto, auto, auto;
  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; }

/* ================================================================
   修复层：强化计算区域毛玻璃质感（浅色背景下也清晰可感）
   ================================================================ */
/* 1. 页面背景光斑加强（让毛玻璃有内容可透）——网格由各页面自身承载 */
body {
  background-image:
    radial-gradient(ellipse at 12% -5%, rgba(37, 99, 235, 0.22), transparent 52%),
    radial-gradient(ellipse at 88% 8%, rgba(245, 158, 11, 0.18), transparent 48%),
    radial-gradient(ellipse at 70% 92%, rgba(34, 211, 238, 0.18), transparent 50%),
    radial-gradient(ellipse at 25% 88%, rgba(124, 58, 237, 0.14), transparent 46%);
}

/* 2. 三栏工作台：更透的玻璃 + 顶部高光 + 玻璃边框 */
.calc-work-preview,
.calc-work-form,
.calc-work-result {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.26)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.68) !important;
  box-shadow: 0 12px 44px rgba(37, 99, 235, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
  position: relative;
  overflow: hidden;
}
/* 玻璃顶部高光 */
.calc-work-preview::before,
.calc-work-form::before,
.calc-work-result::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  pointer-events: none;
  border-radius: 12px 12px 0 0;
  z-index: 1;
}
.calc-work-title { position: relative; z-index: 2; }
.calc-work-form .calc-field-row,
.calc-work-form .calc-precision-row,
.calc-work-actions { position: relative; z-index: 2; }
.calc-result-empty,
.calc-result-cards,
.calc-result-actions { position: relative; z-index: 2; }
.calc-work-svg { position: relative; z-index: 2; }

/* 3. 分类栏 / 按钮栏：更明显的玻璃 */
.calc-hub-cats,
.calc-hub-calc-list {
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-color: rgba(255, 255, 255, 0.62) !important;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.07) !important;
}
.calc-hub-cat,
.calc-hub-calc-btn {
  background: rgba(244, 247, 251, 0.55) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 4. 参数输入区玻璃化 */
.calc-field-input .el-input__wrapper {
  background: rgba(255, 255, 255, 0.5) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* 5. 图形预览区：玻璃感图纸 */
.calc-work-svg {
  background:
    linear-gradient(rgba(37, 99, 235, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.12) 1px, transparent 1px),
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    rgba(251, 253, 255, 0.45) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ================================================================
   计算器页面：参考图布局样式（模块分组 / 主结果卡 / 2×2结果网格）
   ================================================================ */
/* 左栏：分类标签 + 交互提示 */
.calc-preview-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 4px 14px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}
.calc-preview-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #7A8BA3;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* 中栏：模块标题 */
.calc-module-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}
.calc-module-title::before {
  content: '';
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--jg-blue);
}
.calc-module-title-2 {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed rgba(148, 163, 184, 0.35);
}
/* 自定义/查表：分段选择器（一个整体容器，选中项为滑动蓝色色块） */
.calc-mode-tabs {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  background: #F1F5F9;
  border-radius: 8px !important;
  border: none !important;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
/* 滑动指示器：蓝色色块平滑滑动 */
.calc-mode-indicator {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  background: linear-gradient(135deg, #3D7BFF, #1D4ED8);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
  transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}
.calc-mode-tab {
  position: relative;
  z-index: 2;
  padding: 4px 14px;
  border-radius: 6px !important;
  font-size: 13px;
  font-weight: 600;
  background: transparent !important;
  color: #64748B;
  cursor: pointer;
  transition: color 0.2s;
  border: none !important;
}
.calc-mode-tab:hover {
  color: var(--jg-blue);
}
.calc-mode-tab.active {
  color: #FFFFFF;
}
/* 提示文字 */
.calc-hint-text {
  font-size: 12px;
  color: #7A8BA3;
  margin: 12px 0 10px;
  position: relative;
  z-index: 2;
}

/* 右栏：主结果大卡片 */
.calc-main-result {
  background: linear-gradient(145deg, rgba(232, 240, 255, 0.85), rgba(220, 234, 255, 0.9));
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 12px;
  padding: 18px 16px;
  margin-bottom: 12px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.calc-main-result-label {
  font-size: 13px;
  color: #334155;
  font-weight: 600;
  margin-bottom: 6px;
}
.calc-main-result-value {
  font-family: var(--jg-font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--jg-blue);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.calc-main-result-unit {
  font-size: 12px;
  color: #5B6B84;
  margin-top: 4px;
  font-weight: 600;
}

/* 2×2 结果网格 */
.calc-result-grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 2;
}
.calc-result-card2 {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  transition: all 0.25s;
}
.calc-result-card2:hover {
  border-color: rgba(37, 99, 235, 0.3);
  transform: translateY(-2px);
}
.calc-result-key2 {
  font-size: 12px;
  color: #5B6B84;
  margin-bottom: 5px;
  line-height: 1.4;
}
.calc-result-val2 {
  font-family: var(--jg-font-display);
  font-size: 20px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: 0.02em;
}
.calc-result-unit2 {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 3px;
}

/* 右栏：小数位 + 保存（覆盖旧的 calc-precision-row） */
.calc-work-result .calc-precision-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: #5B6B84;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.calc-work-result .calc-precision-row .el-radio-button__inner {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
}

/* 参数字段：一行布置两个（2列网格，缩短整体高度） */
.calc-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 10px;
  position: relative;
  z-index: 2;
}
.calc-fields-grid .calc-field-row {
  margin-bottom: 0 !important;
}
.calc-fields-grid .calc-field-label {
  font-size: 12px;
  margin-bottom: 3px;
}

/* 统一选择器与输入框高度（密度下拉 = 直径输入框等高） */
.calc-field-input .el-select__wrapper,
.calc-field-input .el-input__wrapper {
  height: 32px !important;
  min-height: 32px !important;
  box-sizing: border-box;
}
.calc-field-input .el-select__wrapper {
  padding: 0 10px;
  line-height: 32px;
}
.calc-field-input .el-select__selected-item,
.calc-field-input .el-select__placeholder {
  line-height: 30px;
}
.calc-field-input .el-input__inner {
  height: 32px;
  line-height: 32px;
}

/* 三栏工作台稳定高度：计算前后高度不变 */
.calc-work-preview,
.calc-work-form,
.calc-work-result {
  min-height: 480px;
}

/* ===== 左侧预览区标签 ===== */
.calc-preview-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--jg-line);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  z-index: 10;
}

/* ===== 中间面板标题行 ===== */
.calc-form-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

/* ===== 右栏：骨架占位样式 ===== */
.calc-main-result-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.calc-main-result-placeholder {
  display: inline-block;
  width: 32px;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  margin-right: 4px;
}
.calc-main-result-value {
  font-family: var(--jg-font-display);
  font-size: 34px;
  font-weight: 700;
  color: var(--jg-blue);
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.calc-main-result-value:not(.has-value) {
  color: #94A3B8;
  font-size: 28px;
}
.calc-result-placeholder {
  display: inline-block;
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  margin-right: 4px;
  vertical-align: middle;
}
.calc-result-val2 .has-value {
  color: #0F172A;
}
.calc-result-val2:not(.has-value) {
  color: #94A3B8;
}

/* ===== 右栏：空状态提示 ===== */
.calc-result-hint {
  text-align: center;
  font-size: 13px;
  color: #94A3B8;
  margin: 8px 0 12px;
  line-height: 1.6;
}

/* ===== 左栏底部提示 ===== */
.calc-preview-hint {
  text-align: center;
  font-size: 12px;
  color: #94A3B8;
  margin-top: 10px;
}

/* ===== 兜底：自定义/查表按钮强制方形圆角（与外层容器一致） ===== */
.calc-work-form .calc-mode-tab,
.calc-hub-page .calc-mode-tab,
.calc-work-form .calc-mode-tab.active,
.calc-hub-page .calc-mode-tab.active {
  border-radius: 8px !important;
}
.calc-work-form .calc-mode-tabs,
.calc-hub-page .calc-mode-tabs {
  border-radius: 8px !important;
}

/* ================================================================
   工作台高度统一：三栏永远等高 + 固定统一高度（所有计算器一致）
   （彻底解决不同计算器之间忽高忽低）
   ================================================================ */
.calc-workbench {
  display: grid !important;
  grid-template-columns: 1.1fr 1fr 1.1fr !important;
  gap: 16px;
  align-items: stretch !important;
  align-content: stretch !important;
  height: 580px !important;
}
.calc-work-preview,
.calc-work-form,
.calc-work-result {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 中栏：字段网格弹性撑开，提示和按钮吸底 */
.calc-work-form .calc-fields-grid {
  flex: 1 1 auto;
  align-content: start;
}
.calc-work-form .calc-hint-text {
  margin-top: auto;
  padding-top: 10px;
}
.calc-work-form .calc-work-actions {
  margin-top: 8px;
}
/* 左栏：预览区撑满剩余空间 */
.calc-work-preview .calc-work-svg {
  flex: 1 1 auto;
  min-height: 260px;
}
/* 右栏：结果网格撑满，卡片均匀分布 */
.calc-work-result .calc-result-grid2 {
  flex: 1 1 auto;
  align-content: start;
  margin-bottom: 12px;
}
.calc-work-result .calc-result-hint {
  margin-top: auto;
  padding-top: 10px;
}

/* ===== 2026-09-18 CAD SVG 预览区样式 ===== */

/* 左栏预览区浅色 CAD 背景 */
.calc-work-svg {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  padding: 0 !important;
}

/* SVG 全尺寸显示 */
.calc-work-svg svg {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px !important;
}

/* CAD 风格 SVG 内部样式 */
.cad-svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 标签文字适配浅色背景 */
.calc-work-svg-label {
  color: #64748b !important;
  margin-top: 8px !important;
  font-size: 12px !important;
}

/* 提示文字适配浅色背景 */
.calc-preview-hint {
  color: #94a3b8 !important;
  font-size: 11px !important;
}

/* ================================================================
   UI 交互动效 + 移动端适配优化（2026-09-19）
   ================================================================ */

/* ---------- 导航：992px 及以下启用汉堡抽屉（此前仅 768px 以下生效，
            修复 769-992px 平板/窄窗口导航溢出问题） ---------- */
@media (max-width: 992px) {
  .app-nav-inner {
    height: 60px;
    padding: 0 16px;
  }
  .app-nav-title {
    font-size: 17px;
  }
  .app-nav-title::after {
    display: none;
  }

  .app-nav-links {
    display: none;
    position: fixed;
    top: 0;
    right: -300px;
    width: 280px;
    height: 100vh;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 72px 20px 20px;
    gap: 4px;
    z-index: 1001;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    margin: 0;
    overflow-y: auto;
  }
  .app-nav-links.is-open {
    display: flex;
    right: 0;
  }

  .app-nav-center {
    display: none;
  }
  .app-nav-right {
    display: none;
  }
  .app-nav-hamburger {
    display: flex;
    margin-left: auto;
    z-index: 1002;
  }
  .app-nav-mobile-search {
    display: block;
    margin: 16px 0;
  }
  .app-nav-mobile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 16px;
    border-top: 1px solid #f1f5f9;
  }

  /* 抽屉内链接：深色文字 + 浅色背景交互（压过 v2 深色导航的浅色文字） */
  .app-nav-links .app-nav-link {
    color: #334155 !important;
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 10px;
  }
  .app-nav-links .app-nav-link:hover {
    color: #2563eb !important;
    background: #f1f5f9 !important;
  }
  .app-nav-links .app-nav-link.active {
    color: #2563eb !important;
    background: #e8f0fe !important;
  }
  .app-nav-links .app-nav-link.active::after {
    display: none;
  }

  /* 抽屉内搜索框：浅色底 */
  .app-nav-mobile-search .el-input__wrapper {
    background: #f1f5f9 !important;
    box-shadow: 0 0 0 1px #e2e8f0 inset !important;
  }
  .app-nav-mobile-search .el-input__wrapper.is-focus {
    background: #fff !important;
    box-shadow: 0 0 0 2px #2563eb inset !important;
  }
  .app-nav-mobile-search .el-input__inner {
    color: #1e293b;
  }
  .app-nav-mobile-search .el-input__inner::placeholder {
    color: #94a3b8;
  }

  .app-nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
  }
  .app-nav-overlay.is-visible {
    opacity: 1;
    visibility: visible;
  }
}

/* ---------- 弹窗/消息框移动端适配 ---------- */
@media (max-width: 768px) {
  .el-dialog {
    width: calc(100% - 32px) !important;
  }
  .el-message-box {
    width: calc(100% - 48px) !important;
  }
}

/* ---------- 交互动效打磨 ---------- */
/* 资讯列表行 hover：左侧渐变指示条 */
.news-item-compact {
  position: relative;
}
.news-item-compact::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--jg-blue, #2563eb), var(--jg-orange, #f59e0b));
  opacity: 0.9;
  transition: transform 0.25s ease;
}
.news-item-compact:hover::before {
  transform: translateY(-50%) scaleY(1);
}

/* 资讯卡片 hover：标题强调色 */
.news-card:hover .news-card-title {
  color: var(--jg-blue, #2563eb);
}

/* 热门计算器卡片 hover：图标放大 + 箭头位移 */
.hot-calc-icon {
  transition: transform 0.25s ease;
}
.hot-calc-card:hover .hot-calc-icon {
  transform: scale(1.08);
}
.hot-calc-card:hover .hot-calc-arrow {
  transform: translateX(4px);
  color: var(--jg-blue, #2563eb);
}

/* 键盘可达性：焦点可见环 */
a:focus-visible,
button:focus-visible,
[role='button']:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--jg-blue, #2563eb);
  outline-offset: 2px;
}

/* ---------- 加载与空状态优化 ---------- */
.el-empty {
  padding: 32px 16px;
}
.el-empty__image {
  width: 120px;
}
.el-empty__description p {
  margin-top: 4px;
}
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.86);
}
.el-loading-spinner .el-loading-text {
  color: var(--jg-blue, #2563eb) !important;
  font-size: 13px;
}
.el-loading-spinner .circular {
  color: var(--jg-blue, #2563eb) !important;
}

/* ================================================================
   全局内容页：统一蓝图网格背景（覆盖原纯色背景）
   ================================================================ */
.data-page,
.news-page,
.profile-page,
.points-page,
.admin-page,
.resources-page {
  background-color: var(--jg-paper) !important;
  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) !important;
  background-size: 26px 26px !important;
}