/* mweb/css/application.css
   应用领域页：对照小程序 pages/application/application.wxss */

.page-app.page-application { background: #f5f6f8; }

/* 解除 .page-app 的 overflow-x:hidden（common.css 全局设置），
   使二级导航 .app-subnav 与三级 Tab .app-tab-scroll 可横向滚动 */
.page-app { overflow-x: visible !important; }

/* ===================== 二级分类导航（对照 .full-inside-subnav） ===================== */
.app-subnav {
  width: 100%;
  background: #ffffff;
  border-bottom: 0.5px solid #e0e0e0;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.app-subnav::-webkit-scrollbar { display: none; }
.app-subnav-inner {
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  min-width: max-content;
}
/* 可滚动容器：允许横向 touch/鼠标拖拽，隐藏文字选中 */
.app-subnav,
.app-tab-scroll {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.app-subnav.dragging,
.app-tab-scroll.dragging {
  cursor: grabbing;
}
.app-subnav-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 7px 15px;
  margin-right: 8px;
  border-radius: 20px;
  background: #f2f4f7;
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}
.app-subnav-item:last-child { margin-right: 0; }
.app-subnav-text {
  font-size: 14px;
  color: #444444;
  line-height: 1.2;
}
/* 二级导航图标 */
.app-subnav-ico {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  object-fit: contain;
  vertical-align: middle;
}
/* 选中态：渐变背景 */
.app-subnav-item.active {
  background: linear-gradient(to right, #007aff 0%, #114378 100%);
  box-shadow: 0 3px 8px rgba(0, 116, 188, 0.25);
}
.app-subnav-item.active .app-subnav-text {
  color: #ffffff;
  font-weight: 500;
}

/* ===================== 内容区 ===================== */
.app-body { padding: 12px 12px 20px; }

/* ---- 三级 Tab ---- */
.app-tab-head { margin-bottom: 12px; }
.app-tab-scroll {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.app-tab-scroll::-webkit-scrollbar { display: none; }
.app-tab-group {
  display: inline-flex;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #1d3546;
  min-width: max-content;
}
.app-tab-btn {
  flex-shrink: 0;
  padding: 7px 15px;
  margin-right: 10px;
  border: 0.5px solid #d8dce3;
  border-radius: 4px;
  background: #ffffff;
  font-size: 14px;
  color: #333333;
  transition: all 0.2s;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.app-tab-btn:last-child { margin-right: 0; }
.app-tab-btn.active {
  background-color: #0074bc;
  color: #ffffff;
  border-color: #0074bc;
  font-weight: 500;
}

/* ---- 电路图富文本 ---- */
.app-circuit {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
/* 电路图富文本（后台维护的电路方案 HTML） */
.app-rich {
  font-size: 14px;
  color: #444;
  line-height: 1.8;
}
.app-rich img {
  max-width: 100%;
  height: auto;
  display: block;
}
.app-rich p { margin: 0 0 10px; }
.app-rich h3, .app-rich h4 { margin: 12px 0 8px; color: #1a3a5c; }
.app-circuit .circuit-text {
  font-size: 14px;
  color: #444;
  line-height: 1.8;
  margin-bottom: 10px;
}
/* 电路图色块占位 */
.circuit-ph {
  width: 100%;
  height: 210px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 46px),
    linear-gradient(135deg, #1a3a5c, #0074bc);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  letter-spacing: 2px;
}

/* ---- 产品相关推荐（对照 .recommend-panel） ---- */
.app-recommend {
  margin-top: 12px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}
.app-recommend-head {
  background-color: #1a3044;
  color: #ffffff;
  padding: 11px 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
}
.app-recommend-title { font-weight: 600; }
.app-recommend-cat {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-recommend-body {
  border: 0.5px solid #e5e8ee;
  border-top: none;
}
.app-recommend-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 13px;
  font-size: 14px;
  color: #333333;
  border-bottom: 0.5px solid #eeeeee;
  cursor: pointer;
}
.app-recommend-item:last-child { border-bottom: none; }
.app-recommend-name {
  color: #0074bc;
  font-weight: 600;
  flex-shrink: 0;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-recommend-param {
  margin-left: 10px;
  font-weight: 600;
  color: #999999;
  font-size: 12px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- 加载 / 空状态 ---- */
.app-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 0;
  color: #999999;
  font-size: 13px;
}
.app-loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid #e0e6ec;
  border-top-color: #0074bc;
  border-radius: 50%;
  margin-bottom: 10px;
  animation: app-spin 0.8s linear infinite;
}
@keyframes app-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.app-empty {
  padding: 20px 0;
  text-align: center;
  color: #999999;
  font-size: 13px;
}
.app-empty-full {
  background: #ffffff;
  border-radius: 8px;
  padding: 60px 0;
}