/* ============================================================================
   app-enhance.css —— 全站视觉提质感层 v1 (2026-08-11)
   ----------------------------------------------------------------------------
   设计原则：
     1. 叠加在 calculator.css / calc-common.css / site-chrome.css 之上，
        不改动既有脆弱结构（calculator.css 是重建版，谨慎触碰）。
     2. 零破坏：border-radius:0 由 header.php 全局 `* {border-radius:0!important}`
        保证，本文件不写任何圆角（含伪元素）。
     3. 铁律不变：主色 var(--primary)、CTA 实心、字号≥12px 全部继承现有令牌。
     4. 全站生效，但仅首页渲染 .app-hero 元素，其他页面无该 DOM 即无副作用。
   ============================================================================ */

/* ══════════════ 1. 首页 Hero 区（仅首页 .app-hero 元素触发） ══════════════ */
.app-hero{
  position:relative;
  width:100vw; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding:52px 20px 46px;
  overflow:hidden;
  box-sizing:border-box;
  color:var(--white);
}
/* 网格点阵装饰（无圆角） */
.app-hero::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
}
/* 顶部高光斜条（无圆角，方切） */
.app-hero::after{
  content:""; position:absolute; top:0; right:-8%;
  width:46%; height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,.14), transparent 60%);
  pointer-events:none;
}
.app-hero-inner{
  position:relative; z-index:1;
  max-width:var(--container-max-width,1400px);
  margin:0 auto; text-align:center;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.16);
  padding:5px 14px; font-size:var(--fs-sm); font-weight:600;
  margin-bottom:16px; letter-spacing:.3px;
}
.hero-eyebrow i{font-size:var(--fs-label);}
.hero-title{
  font-size:clamp(26px, 4.2vw, 42px);
  font-weight:800; line-height:1.18;
  margin:0 0 12px; letter-spacing:.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.hero-sub{
  font-size:var(--fs-h4); opacity:.92;
  max-width:680px; margin:0 auto 24px; line-height:1.65;
}
/* Hero 搜索框 */
.hero-search{
  display:flex; max-width:560px; margin:0 auto 26px;
  box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.hero-search input{
  flex:1; min-width:0; border:none;
  padding:14px 18px; font-size:var(--fs-body);
  color:var(--gray-900); outline:none; background:var(--white);
}
.hero-search input::placeholder{color:var(--gray-400);}
.hero-search button{
  border:none; background:var(--gray-900); color:var(--white);
  padding:0 24px; font-size:var(--fs-body); font-weight:600;
  cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:background .18s; white-space:nowrap;
}
.hero-search button:hover{background:var(--gray-900);}
/* 数据统计卡 */
.hero-stats{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px; margin-top:4px;
}
.hero-stat{
  background:rgba(255,255,255,.12);
  padding:10px 18px; min-width:104px;
  border-top:2px solid rgba(255,255,255,.35);
  backdrop-filter:blur(2px);
}
.hero-stat b{
  display:block; font-size:var(--fs-h2);
  font-weight:800; line-height:1.05;
}
.hero-stat span{font-size:var(--fs-sm); opacity:.9;}

/* ══════════════ 2. 卡片入场动画（错峰 fade-up，仅视觉，不影响布局） ══════════════ */
@keyframes appFadeUp{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
.tool-card{animation:appFadeUp .5s ease both;}
.tool-grid .tool-card:nth-child(1){animation-delay:.03s}
.tool-grid .tool-card:nth-child(2){animation-delay:.06s}
.tool-grid .tool-card:nth-child(3){animation-delay:.09s}
.tool-grid .tool-card:nth-child(4){animation-delay:.12s}
.tool-grid .tool-card:nth-child(5){animation-delay:.15s}
.tool-grid .tool-card:nth-child(6){animation-delay:.18s}
.tool-grid .tool-card:nth-child(n+7){animation-delay:.21s}
/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce){
  .tool-card{animation:none;}
}

/* ══════════════ 3. 统一悬浮阴影语言（增强既有 hover） ══════════════ */
.tool-card{
  box-shadow:0 1px 4px rgba(26, 32, 44,.05);
  transition:border-color .18s, box-shadow .22s, transform .22s;
}
.tool-card:hover{
  border-color:var(--primary);
  box-shadow:0 10px 28px rgba(66, 144, 245,.14);
  transform:translateY(-3px);
}
/* 图标容器 hover 反色放大（与 home_new 原型一致） */
.tool-card-icon{transition:background .2s, color .2s, transform .2s;}
.tool-card:hover .tool-card-icon{
  background:var(--primary);
  color:var(--white);
  transform:scale(1.06);
}
/* 工具按钮 hover 微抬 */
.tool-btn{transition:background .18s, transform .18s, box-shadow .18s;}
.tool-btn:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(66, 144, 245,.22);}

/* ══════════════ 4. 分区标题强化（图标方块 + 主色左条） ══════════════ */
.section-header{
  position:relative;
  border-left:4px solid var(--primary);
  padding-left:12px;
  margin:var(--space-20) 0 var(--space-12);
}
.section-badge{
  box-shadow:0 1px 3px rgba(26, 32, 44,.08);
  font-weight:700;
}
.section-badge.ai{background:var(--primary-light); color:var(--primary);}
.section-badge.doc{background:var(--primary-50); color:var(--info);}

/* ══════════════ 5. 计算器页：区块卡片层次增强（叠加 calc-common） ══════════════ */
.calc-block,
.input-section > .input-group,
.input-section > .input-card,
.result-card{
  box-shadow:0 1px 5px rgba(26, 32, 44,.05);
  transition:box-shadow .22s ease, transform .22s ease;
}
.calc-block:hover,
.result-card:hover{
  box-shadow:0 8px 24px rgba(26, 32, 44,.09);
}
/* 操作按钮 hover 抬升 */
.action-buttons .btn{transition:background .15s, transform .15s, box-shadow .15s;}
.action-buttons .btn:hover{transform:translateY(-1px);}

/* ══════════════ 6. 资料页卡片提质感（叠加 ziliao.css，统一阴影语言） ══════════════ */
.tuji-card,
.zl-card{
  box-shadow:0 1px 4px rgba(26, 32, 44,.05);
}
.tuji-card:hover,
.zl-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 26px rgba(66, 144, 245,.16);
}
.tuji-card-icon,
.zl-card-icon{transition:background .2s, transform .2s;}
.tuji-card:hover .tuji-card-icon,
.zl-card:hover .zl-card-icon{transform:scale(1.06);}

/* ══════════════ 7. 顶部品牌条与导航整合 ══════════════ */
/* 2026-08-11：site-header 统一包裹 nav-wrapper + sitemap-nav 整体 sticky top:0，避免两个独立 sticky top 错位 */
.site-header{
  position:sticky !important;
  top:0 !important;
  z-index:1100 !important;
  width:100vw !important;
  margin-left:calc(-50vw + 50%) !important;
  margin-right:calc(-50vw + 50%) !important;
  background:linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}
/* 覆盖 calculator.css 对 .nav-wrapper 的居中/列布局旧规则，改单行；nav-wrapper 在 site-header 内不再 sticky（静态布局） */
.nav-wrapper{
  padding-top:2px !important;
  padding-bottom:2px !important;
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  background:transparent !important;
}
.nav-wrapper .nav-container{
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  text-align:left !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}
.nav-wrapper .nav-title{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  flex:0 0 auto !important;
  width:auto !important;
  max-width:min(520px, 100%) !important;
  color:var(--white) !important;
}
.brand-stack{
  max-width:100% !important;
  color:var(--white) !important;
}
/* 站名下方三行（站名 + tagline + brand-intro 简介） */
.brand-stack{
  display:flex !important;
  flex-direction:column !important;
  gap:2px !important;
  line-height:1.25 !important;
}
.brand-name{font-size:var(--brand-name-font-size, var(--fs-h3)) !important;}
.nav-tagline{font-size:var(--brand-tagline-font-size, var(--fs-sm)) !important;}
.brand-intro{
  font-size:var(--brand-intro-font-size, var(--fs-xs)) !important;
  font-weight:400 !important;
  opacity:0.72 !important;
  max-width:520px !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
@media (max-width:992px){
  .brand-intro{display:none !important;}
}
/* logo 去黑底：混色模式让深色背景融入蓝色品牌条，浅色线条保留 */
.nav-logo-wrap{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.25);
  overflow:hidden;
  flex-shrink:0;
}
.nav-logo-wrap img{
  width:100%; height:100%; object-fit:contain;
  mix-blend-mode:screen;
  filter:brightness(1.15) contrast(1.1);
}
/* 首页 brand bar 与内页统一显示：站点名 + tagline + 简介，全部后台可控 */
.nav-wrapper--home{
  padding-top:2px !important;
  padding-bottom:2px !important;
}

/* 2026-08-11：网站简介 nav-intro——默认隐藏（避免截断乱象），仅 ≥1400px 大屏显示（与首页一致） */
.nav-intro{display:none;}
@media (min-width:1400px){
  .nav-intro{
    display:inline-flex !important;
    font-size:var(--fs-xs);
    font-weight:400;
    opacity:.6;
    padding-left:10px;
    margin-left:4px;
    border-left:1px solid rgba(255,255,255,.35);
    max-width:360px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex-shrink:0;
    min-width:0;
    vertical-align:middle;
  }
}

/* ══════════════ 8. 主导航用户信息区美化 ══════════════ */
.user-area{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.user-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:var(--primary-light);
  padding:5px 10px;
  color:var(--primary);
  transition:background .18s;
}
.user-pill:hover{background:var(--primary-50);}
.user-nickname{
  font-weight:600;
  font-size:var(--fs-label);
  max-width:84px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.user-edit-btn{
  background:none;
  border:none;
  color:var(--primary);
  padding:0;
  cursor:pointer;
  font-size:var(--fs-xs);
  margin-left:2px;
  opacity:0.6;
  transition:opacity .15s;
}
.user-edit-btn:hover{opacity:1;}
.user-quota{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gray-500);
  font-size:var(--fs-sm);
}
.user-quota-item{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.user-quota-icon{
  color:var(--primary);
  font-size:var(--fs-xs);
}
.user-quota-value{
  color:var(--primary);
  font-weight:700;
  font-size:var(--fs-label);
}
.user-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px; height:30px;
  font-size:var(--fs-label);
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.user-icon-btn--primary:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
}
.user-pill{
  transition:background .18s;
}
.user-pill:hover{background:var(--primary-50);}

/* 主导航（面包屑+用户信息）滚动时顶置在品牌条下方
   注意：calculator.css 给 .sitemap-nav 用了 position:relative + left:50% + margin:-50vw 的满铺技巧；
   改成 sticky 时必须取消 left/right 偏移，改用 margin: calc(-50vw + 50%) 才能保持满铺且不飞出视口 */
.sitemap-nav{
  /* 2026-08-11：sitemap-nav 在 site-header 内静态布局（不再独立 sticky，与 brand bar 一起顶置） */
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  left:auto !important;
  right:auto !important;
  margin-left:calc(-50vw + 50%) !important;
  margin-right:calc(-50vw + 50%) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  /* 2026-08-13：左右内边距与 .nav-wrapper 一致（22px），避免面包屑比品牌条更靠左而视觉上出界 */
  padding:8px 22px !important;
  background:transparent !important;
  color:var(--white) !important;
  box-shadow:none !important;
  flex-wrap:nowrap !important;
}
/* sitemap-nav 蓝色背景下的链接/文字白色 */
.sitemap-nav .home-section-nav,
.sitemap-nav .calc-breadcrumb{
  font-size:var(--nav-font-size, 16px) !important;
}
.sitemap-nav a{ color:rgba(255,255,255,.92) !important; }
.sitemap-nav .home-section-nav a:hover,
.sitemap-nav .calc-breadcrumb a:hover,
.sitemap-nav .bc-home-icon{ color:var(--white) !important; }
.sitemap-nav .calc-breadcrumb-item.is-current{ color:var(--white) !important; font-weight:700; }
.sitemap-nav .calc-breadcrumb-sep{ color:rgba(255,255,255,.6) !important; margin:0 4px !important; }
/* 面包屑与主导航严格对齐：清掉 calculator.css 带来的内边距/外边距/伪元素分隔符 */
.sitemap-nav .calc-breadcrumb{
  padding:0 !important;
  margin:0 !important;
}
.sitemap-nav .calc-breadcrumb-list,
.sitemap-nav .calc-breadcrumb-list ol,
.sitemap-nav .calc-breadcrumb-list ul{
  display:flex !important; align-items:center !important; gap:0 !important;
  list-style:none !important; margin:0 !important; padding:0 !important;
}
.sitemap-nav .calc-breadcrumb-list li{
  display:flex !important; align-items:center !important; gap:0 !important;
  list-style:none !important;
}
/* header.php 里已用手写 .calc-breadcrumb-sep，去掉 calculator.css 的伪元素分隔符避免双 › */
.sitemap-nav .calc-breadcrumb-list li:not(:last-child)::after{ content:none !important; display:none !important; }
.sitemap-nav .hsn-links a:hover{ background:rgba(255,255,255,.14) !important; }
/* 左侧导航区（首页分区导航 / 内页面包屑）自适应占满剩余空间 */
.sitemap-nav .home-section-nav,
.sitemap-nav .calc-breadcrumb{
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  max-width:none !important;
}
.sitemap-nav .home-section-nav{
  display:flex !important;
  align-items:center !important;
  /* 搜索框紧贴导航链接（不再 space-between） */
  justify-content:flex-start !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}
.sitemap-nav .hsn-links{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  flex-wrap:wrap !important;
}
.sitemap-nav #hsn-search-wrap{
  width:220px !important;
  flex-shrink:0 !important;
}
/* 右侧用户区不压缩，紧贴右侧；内部图标均匀散开不挤团 */
.sitemap-nav .user-area{
  flex:0 0 auto !important;
  margin-left:auto !important;
  justify-content:space-between !important;
}
/* 用户区在蓝色 sitemap-nav 背景上：高对比清晰配色（写死颜色，避免 var(--white)/var(--danger) 未定义失效） */
.sitemap-nav .user-pill{ background:var(--white) !important; color:var(--primary) !important; font-weight:600 !important; }
.sitemap-nav .user-pill:hover{ background:var(--primary-50) !important; }
.sitemap-nav .user-pill .user-nickname{ color:var(--primary) !important; }
.sitemap-nav .user-pill .user-edit-btn{ color:var(--primary-dark) !important; }
.sitemap-nav .user-quota{ color:rgba(255,255,255,.92) !important; }
.sitemap-nav .user-quota b{ color:var(--white) !important; }
.sitemap-nav .user-icon-btn{
  color:var(--white) !important;
  border-color:rgba(255,255,255,.5) !important;
  background:transparent !important;
}
.sitemap-nav .user-icon-btn:hover{ background:rgba(255,255,255,.18) !important; }
.sitemap-nav .user-icon-btn--primary{
  background:rgba(255,255,255,.28) !important;
  color:var(--white) !important;
  border-color:rgba(255,255,255,.7) !important;
}
.sitemap-nav .user-icon-btn--primary:hover{
  background:var(--white) !important;
  color:var(--primary) !important;
}
/* 规则按钮：红底白图标（原 var(--danger) 未定义导致变黑看不见） */
.sitemap-nav .user-icon-btn--rule,
.sitemap-nav .user-icon-btn--rule i{
  color:var(--white) !important;
  background:var(--danger) !important;
  border-color:var(--danger) !important;
}
.sitemap-nav .user-icon-btn--rule:hover,
.sitemap-nav .user-icon-btn--rule:hover i{
  background:var(--danger) !important;
  border-color:var(--danger) !important;
  color:var(--white) !important;
}
/* 微信图标：微信官方绿底 + 白色图标（原 var(--white) 未定义导致图标变深灰） */
.sitemap-nav .user-icon-btn--wechat,
.sitemap-nav .user-icon-btn--wechat i{
  background:var(--success) !important;
  color:var(--white) !important;
  border-color:var(--success) !important;
}
.sitemap-nav .user-icon-btn--wechat:hover,
.sitemap-nav .user-icon-btn--wechat:hover i{
  background:var(--success) !important;
  border-color:var(--success) !important;
  color:var(--white) !important;
}
@media (max-width:992px){
  .nav-wrapper .nav-container{flex-wrap:wrap !important; align-items:flex-start !important;}
  .sitemap-nav{flex-wrap:wrap !important; gap:10px !important;}
  .sitemap-nav .home-section-nav,
  .sitemap-nav .calc-breadcrumb{width:100% !important;}
  .sitemap-nav{flex-wrap:wrap !important;}
  .sitemap-nav .user-area{width:100% !important; margin-left:0 !important; justify-content:space-between !important; gap:8px !important;}
  .sitemap-nav .user-area > .user-pill,
  .sitemap-nav .user-area > .user-quota,
  .sitemap-nav .user-area > .user-icon-btn{flex:1 1 0 !important; min-width:0 !important; justify-content:center !important;}
}
@media (max-width:768px){
  .nav-wrapper{padding-left:14px !important; padding-right:14px !important;}
  .nav-wrapper .nav-title{gap:7px !important; align-items:center !important;}
  .nav-wrapper .brand-name{font-size:var(--brand-name-font-size, var(--fs-h3)) !important;}
  .nav-wrapper .nav-tagline{font-size:var(--brand-tagline-font-size, var(--fs-sm)) !important;}
  .nav-wrapper .brand-intro{font-size:var(--brand-intro-font-size, var(--fs-xs)) !important;}
  .sitemap-nav{padding:8px 12px !important;}
  .sitemap-nav #hsn-search-wrap{width:100% !important;}
  .user-area{gap:6px !important;}
  .user-pill{padding:4px 8px !important;}
  .user-quota{gap:6px !important;}
  .user-icon-btn{width:28px !important; height:28px !important;}
}
/* 小屏 (≤640px)：用户胶囊隐藏昵称/编辑按钮、次数只显示图标+数字、按钮更紧凑；用户胶囊变只显示图标 */
@media (max-width:640px){
  /* 2026-08-11：≤640px 移动端清爽排版——brand bar 紧凑（只 logo+搜索 100% 行1），sitemap-nav 三行 */
  .nav-wrapper{padding:6px 10px !important; min-height:0 !important;}
  .nav-wrapper .nav-container{align-items:center !important; gap:8px !important;}
  /* logo 缩小到 28px */
  .nav-wrapper .nav-logo-wrap{width:28px !important; height:28px !important;}
  .nav-wrapper .nav-logo-wrap img{width:28px !important; height:28px !important;}
  /* brand bar 内站名 + tagline + brand-intro 隐藏（移动端只留 logo 节省空间） */
  .nav-wrapper .nav-title .brand-stack{display:none !important;}
  .nav-wrapper .nav-title{gap:0 !important; flex:0 0 auto !important; align-items:center !important;}
  /* 移动端：搜索框 100% 占一行（sitemap-nav 内） */
  .sitemap-nav{flex-wrap:wrap !important;}
  .sitemap-nav #hsn-search-wrap{flex:1 1 100% !important; max-width:none !important; width:100% !important; margin-left:0 !important;}
  .sitemap-nav #hsn-search-wrap input{width:100% !important; box-sizing:border-box !important; padding:5px 8px 5px 28px !important; font-size:13px !important;}

  /* sitemap-nav 三行：导航横滚 / 用户区第三行（site-header 整体 sticky，移动端内 sitemap-nav 不再独立 sticky） */
  .sitemap-nav{flex-wrap:wrap !important; padding:6px 10px !important; gap:4px !important;}
  .sitemap-nav .home-section-nav,
  .sitemap-nav .calc-breadcrumb{
    width:100% !important; margin:0 !important; padding:0 !important;
    overflow-x:auto !important; white-space:nowrap !important;
  }
  .sitemap-nav .home-section-nav{display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:nowrap !important;}
  .sitemap-nav .hsn-links{gap:8px !important; flex-shrink:0 !important;}
  /* 用户区第三行 */
  .sitemap-nav .user-area{
    width:100% !important; margin:6px 0 0 !important; padding:6px 0 0 !important;
    border-top:1px solid rgba(255,255,255,.2) !important;
    justify-content:space-between !important; gap:8px !important;
  }
  .user-pill{padding:3px 7px !important; gap:3px !important;}
  /* 移动端保留昵称：游客/用户名标识必须可见，否则"用户位置"只剩一个孤图标 */
  .user-pill .user-nickname{display:inline !important; max-width:64px !important;}
  .user-pill .user-edit-btn{display:none !important;}
  .user-quota{gap:6px !important; font-size:11px !important;}
  .user-icon-btn{width:26px !important; height:26px !important;}
}

/* ══════════════ 9. 全站搜索框与下拉列表样式 ══════════════ */
#hsn-search-wrap{position:relative; flex-shrink:0; margin-left:12px;}
.hsn-search-icon{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:var(--gray-500);
  font-size:12px;
  pointer-events:none;
}
.site-search{
  width:200px;
  padding:6px 10px 6px 30px;
  border:1px solid rgba(255,255,255,.45);
  background:var(--white);
  color:var(--gray-900);
  font-size:var(--fs-label);
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  box-sizing:border-box;
}
.site-search:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(66, 144, 245,0.10);
}
.site-search-list{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0; right:0;
  max-height:380px;
  overflow-y:auto;
  background:var(--white);
  border:1px solid var(--gray-200, var(--gray-200));
  box-shadow:0 8px 24px rgba(26, 32, 44,0.10);
  margin:0; padding:0;
  list-style:none;
  z-index:1000;
  text-align:left;
}
.site-search-list li{
  padding:9px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  border-bottom:1px solid var(--gray-100, var(--gray-100));
  font-size:var(--fs-body);
  background:var(--white);
  transition:background .15s;
}
.site-search-list li:hover,
.site-search-list li.is-active{background:var(--primary-100, var(--primary-light));}
.site-search-list li .site-search-cat{
  background:var(--primary-100, var(--primary-light));
  color:var(--primary);
  padding:2px 8px;
  font-size:11px;
  font-weight:600;
  flex-shrink:0;
}
.site-search-list li .site-search-name{
  flex:1;
  color:var(--gray-700, var(--gray-700));
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.site-search-list li .site-search-desc{
  font-size:11px;
  color:var(--gray-500);
  margin-left:8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:240px;
  display:inline-block;
  vertical-align:bottom;
}
.site-search-list li .fa-arrow-right{
  color:var(--gray-400);
  font-size:11px;
  flex-shrink:0;
}
.site-search-list .site-search-more{
  padding:7px 14px;
  color:var(--gray-500);
  font-size:11px;
  text-align:center;
  background:var(--gray-050);
  cursor:default;
}
/* Hero 搜索框内部列表定位 */
.hero-search{position:relative;}
.hero-search .site-search-list{
  top:calc(100% + 6px);
  border-top:2px solid var(--primary);
}

/* ══════════════ 10. 计算器结果区骨架屏 ══════════════ */
.calc-skeleton{
  padding:18px;
  background:var(--white);
  border:1px solid var(--gray-200);
}
.calc-skeleton-row{
  height:14px;
  margin-bottom:12px;
  background:linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size:200% 100%;
  animation:calcSkeletonShine 1.4s infinite linear;
}
.calc-skeleton-row:last-child{margin-bottom:0;}
@keyframes calcSkeletonShine{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@media (prefers-reduced-motion: reduce){
  .calc-skeleton-row{animation:none; background:var(--gray-100);}
}

/* ══════════════ 11. 计算器页面标题条 ══════════════ */
.calc-page-header{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  background:var(--white);
  border-bottom:1px solid var(--calc-line, var(--gray-200));
  padding:16px max(16px, calc((100vw - var(--content-max-width, 1600px)) / 2 + 16px));
  box-sizing:border-box;
}
.calc-page-header-inner{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.calc-page-title{
  font-size:var(--fs-h2, 19px);
  font-weight:700;
  color:var(--gray-900, var(--gray-900));
  margin:0;
  line-height:1.3;
}
.calc-page-subtitle{
  font-size:var(--fs-sm, 12px);
  color:var(--gray-500, var(--gray-500));
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.calc-page-subtitle i{color:var(--primary, var(--primary));}
@media (max-width:768px){
  .calc-page-header{padding:12px max(14px, calc((100vw - var(--content-max-width, 1600px)) / 2 + 14px));}
  .calc-page-title{font-size:var(--fs-h3, 16px);}
}

/* ══════════════ 12. 404 页面美化（左右分栏，直角铁律） ══════════════ */
.state-page-wrap{
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 260px);
  padding:40px 16px; margin:0;
  background:
    radial-gradient(circle at 18% 18%, rgba(66, 144, 245,0.045), transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(66, 144, 245,0.045), transparent 42%),
    var(--gray-050, var(--gray-050));
}
/* 卡片：两栏 grid，直角，轻阴影（双类提升优先级，覆盖 calculator.css 通用 .state-page） */
.state-page.state-page-404{
  display:grid !important;
  grid-template-columns:230px 1fr;
  gap:0;
  max-width:780px; width:100%;
  background:var(--white);
  border:1px solid var(--gray-200, var(--gray-200));
  border-radius:0 !important;
  box-shadow:0 14px 44px rgba(26, 32, 44,0.10);
  padding:0 !important;
  text-align:left !important;
  overflow:hidden;
  position:relative;
}
/* 左侧：蓝色渐变 + 网格点阵 + 大号 404 艺术字 */
.state-page-404 .err404-aside{
  position:relative;
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:var(--white);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:42px 22px;
  overflow:hidden;
}
.state-page-404 .err404-aside::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size:18px 18px;
  pointer-events:none;
}
.state-page-404 .err404-num{
  position:relative;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:5.4rem; font-weight:900; line-height:1;
  letter-spacing:-2px;
  text-shadow:0 6px 20px rgba(0,0,0,0.20);
}
.state-page-404 .err404-compass{
  position:relative; margin-top:14px; font-size:2rem;
}
.state-page-404 .err404-label{
  position:relative; margin-top:10px;
  font-size:13px; font-weight:600; letter-spacing:3px; opacity:.9;
}
/* 右侧内容区 */
.state-page-404 .err404-body{
  padding:38px 34px;
  display:flex; flex-direction:column; gap:15px;
}
.state-page-404 .state-title{
  font-size:1.6rem; color:var(--gray-900, var(--gray-900));
  margin:0 !important; font-weight:800; text-align:left;
}
.state-page-404 .state-text{
  font-size:1rem; color:var(--gray-500, var(--gray-500));
  margin:0 !important; line-height:1.65; text-align:left;
}
/* 行内搜索框（直角、主色描边、实心提交按钮） */
.err404-search{
  display:flex; border:1px solid var(--gray-300, var(--gray-300)); background:var(--white);
}
.err404-search input{
  flex:1; min-width:0; border:none; outline:none;
  padding:11px 14px; font-size:14px; color:var(--gray-900, var(--gray-900)); background:transparent;
}
.err404-search input::placeholder{color:var(--gray-400, var(--gray-400));}
.err404-search button{
  border:none; background:var(--primary, var(--primary)); color:var(--white);
  padding:0 18px; cursor:pointer; font-size:14px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .18s;
}
.err404-search button:hover{background:var(--primary-dark, var(--primary-dark));}
/* 操作按钮左对齐 */
.state-page-404 .state-actions{
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:flex-start !important; margin:0 !important;
}
/* 热门入口 */
.err404-quick{margin-top:2px;}
.err404-quick-label{
  display:block; font-size:12px; color:var(--gray-500, var(--gray-500));
  margin-bottom:9px; font-weight:600; letter-spacing:.5px;
}
.err404-quick-links{display:flex; flex-wrap:wrap; gap:8px;}
.err404-quick-links a{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px;
  background:var(--primary-light, var(--primary-light));
  color:var(--primary-dark, var(--primary-dark));
  font-size:13px; font-weight:600; border:1px solid transparent;
  text-decoration:none; transition:background .16s, border-color .16s;
}
.err404-quick-links a:hover{background:var(--white); border-color:var(--primary, var(--primary));}
/* 隐藏 calculator.css 残留的右侧水印（新结构不再使用，避免双层 404 字） */
.state-page-404 > .state-404-bg{display:none !important;}
/* 移动端：堆叠为单列，左侧收窄为横条 */
@media (max-width:640px){
  .state-page.state-page-404{grid-template-columns:1fr !important;}
  .state-page-404 .err404-aside{
    flex-direction:row; gap:14px; padding:22px 24px;
  }
  .state-page-404 .err404-num{font-size:3.4rem;}
  .state-page-404 .err404-compass{margin-top:0;}
  .state-page-404 .err404-label{margin-top:0; letter-spacing:2px;}
  .state-page-404 .err404-body{padding:28px 22px;}
}

/* ══════════════ 10.5. AI 三工具页（design-wrap）与 wz 页面（wz-layout）满铺 ══════════════ */
/* 与 .home-container / .calculator-wrapper 一致：100vw 满铺 + max(16px, calc((100vw-var(--content-max-width))/2+16)) 居中对齐 */
.design-wrap, .wz-layout{
  width:100vw !important;
  position:relative !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  padding-left:max(16px, calc((100vw - var(--content-max-width, 1600px)) / 2 + 16px)) !important;
  padding-right:max(16px, calc((100vw - var(--content-max-width, 1600px)) / 2 + 16px)) !important;
  box-sizing:border-box !important;
}

/* ══════════════ 13. 规范查询跳转卡片（norm_search.php） ══════════════ */
.norm-card-wrap{
  display:flex; align-items:center; justify-content:center;
  min-height:calc(100vh - 200px); padding:40px 20px;
  background:var(--gray-050, var(--gray-050));
}
.norm-card{
  background:var(--white);
  padding:46px 44px 38px; max-width:560px; width:100%;
  text-align:center;
  box-shadow:0 4px 12px rgba(26, 32, 44,.06);
  border:1px solid var(--gray-200, var(--gray-200));
}
.norm-card-icon{
  width:80px; height:80px;
  background:var(--primary, var(--primary));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
  font-size:36px; color:var(--white);
}
.norm-card-title{
  color:var(--gray-900, var(--gray-900));
  font-size:22px; font-weight:700;
  margin:0 0 12px; line-height:1.3;
}
.norm-card-desc{
  color:var(--gray-700, var(--gray-700));
  font-size:14px; line-height:1.75;
  margin:0 0 22px;
}
.norm-card-source{
  color:var(--gray-500, var(--gray-500));
  font-size:13px; line-height:1.7;
  padding:10px 18px; background:var(--gray-050, var(--gray-050));
  display:inline-block; margin:0 0 22px;
  border-left:3px solid var(--primary, var(--primary));
  text-align:left;
}
.norm-card-source .sub{font-size:12px; color:var(--gray-400, var(--gray-400));}
.norm-card .btn-primary{
  margin:0;
}
.norm-card-hint{
  color:var(--gray-400, var(--gray-400));
  font-size:12px; margin:14px 0 0;
}
.norm-card-tips{
  margin:24px 0 0; padding-top:20px;
  border-top:1px solid var(--gray-200, var(--gray-200));
  text-align:left;
}
.norm-card-tips h3{
  color:var(--gray-900, var(--gray-900));
  font-size:14px; font-weight:600;
  margin:0 0 10px;
  display:flex; align-items:center; gap:6px;
}
.norm-card-tips h3 i{color:var(--warning, var(--warning));}
.norm-card-tips ul{
  list-style:none; padding:0; margin:0;
  color:var(--gray-700, var(--gray-700));
  font-size:13px; line-height:2;
}
.norm-card-tips ul li{padding-left:20px; position:relative;}
.norm-card-tips ul li:before{
  content:"✓"; position:absolute; left:0;
  color:var(--success, var(--success)); font-weight:bold;
}
.norm-back-link{
  display:inline-flex; align-items:center; gap:4px;
  margin-top:22px;
  color:var(--gray-500, var(--gray-500));
  font-size:13px; text-decoration:none;
  transition:color .15s;
}
.norm-back-link:hover{color:var(--primary, var(--primary));}
@media (max-width:640px){
  .norm-card{padding:32px 22px;}
  .norm-card-icon{width:64px; height:64px; font-size:28px;}
  .norm-card-title{font-size:19px;}
}

/* ══════════════ 14. 状态页居中 + 直角铁律（no_credit 等用 .state-page 的页面） ══════════════ */
.state-page{
  margin:30px auto !important;
  border-radius:0 !important;
}
.state-icon{
  border-radius:0 !important;
}
.state-note{
  border-radius:0 !important;
}

/* ══════════════ 15. 首页工具卡片 hover 增强 ══════════════ */
.tool-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tool-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26, 32, 44,.10);
  border-color: var(--primary-100, var(--primary-light));
}
.tool-card .tool-btn{
  transition: background .18s, box-shadow .18s;
}
.tool-card:hover .tool-btn{
  box-shadow: 0 4px 10px rgba(66, 144, 245,.25);
}

/* ══════════════ 18. 计算器 3D 示意图（calculator9 sketchWrap） ══════════════ */
.sketch-title{
  font-size:var(--fs-h3,16px);
  font-weight:700;
  color:var(--gray-900,var(--gray-900));
  margin:0 0 10px;
  padding-left:12px;
  border-left:4px solid var(--primary,var(--primary));
}
.u-st54{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.view-btn{
  padding:6px 14px;
  background:var(--primary-light,var(--primary-light));
  color:var(--primary-dark,var(--primary-dark));
  border:1px solid transparent;
  font-size:var(--fs-label,13px);
  font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.view-btn:hover{background:var(--white);border-color:var(--primary,var(--primary));}
#viewer3d{
  background:var(--white);
  border:1px solid var(--gray-200,var(--gray-200));
  min-height:260px;
  margin-bottom:12px;
  overflow:hidden;
}
.sketch-legend{display:flex;flex-wrap:wrap;gap:16px;font-size:var(--fs-label,13px);color:var(--gray-700,var(--gray-700));margin-bottom:4px;}
.leg-item{display:inline-flex;align-items:center;gap:6px;}
.leg-color{width:14px;height:14px;display:inline-block;flex-shrink:0;}
.u-st55{background:var(--primary);}
.u-st56{background:var(--warning);}
.u-st57{background:var(--gray-500);}

/* ══════════════ 17. 页脚 SEO sitemap 精致化 ══════════════ */
.seo-sitemap-col a{
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.seo-sitemap-col a:hover{
  transform: translateY(-1px);
}
.seo-sitemap-qr img{
  box-shadow: 0 2px 6px rgba(26, 32, 44,.08);
}
@media (max-width:480px){
  .related-calc{padding:12px 12px;}
}

/* ══════════════ 19. 大屏自适应：内容区两侧减少留白 ══════════════ */
/* 在 1600px 以上屏幕，把内容容器（.container/.home-container/.app-hero-inner）与满铺元素
   统一引用 --content-max-width 阶梯（1600→1800→2000→90vw），避免两侧大片空白，且二者对齐。 */
@media (min-width: 1600px) {
  .container,
  .home-container,
  .app-hero-inner {
    max-width: min(96vw, var(--content-max-width, 1600px));
  }
}
@media (min-width: 1920px) {
  .container,
  .home-container,
  .app-hero-inner {
    max-width: min(96vw, var(--content-max-width, 1600px));
  }
}
/* 资料页（tuji.php 等）容器一并放宽 */
@media (min-width: 1600px) {
  .home-container:has(.tuji-grid),
  .home-container:has(.zl-grid) {
    max-width: min(96vw, var(--content-max-width, 1600px));
  }
}
@media (min-width: 1920px) {
  .home-container:has(.tuji-grid),
  .home-container:has(.zl-grid) {
    max-width: min(96vw, var(--content-max-width, 1600px));
  }
}

/* 满铺元素（calculator-wrapper / sitemap-nav / footer / calc-page-header 等）内容对齐宽度：随大屏阶梯加宽，减少两侧留白 */
@media (min-width: 1600px) {
  :root { --content-max-width: 1800px; }
}
@media (min-width: 1920px) {
  :root { --content-max-width: 2000px; }
}
@media (min-width: 2560px) {
  :root { --content-max-width: 90vw; }
}