/* base.css · 大连肯维斯公共样式
   设计令牌(:root)、reset、body、.app、.tabbar、.toast 等全站通用 */
:root{
--green-deep:#1B4332;   /* 主色：沉稳墨绿 */
--green:#2D6A4F;        /* 深翠绿 */
--green-mist:#B8D4B8;   /* 浅墨绿（卡片/分隔） */
--green-light:#E8F0E8;  /* 浅墨绿灰（背景） */
--gold:#E8A33D;         /* 暖铜金：数据高亮/CTA */
--gold-soft:#F4C77A;
--gold-deep:#C8821F;
--bg:#f3f6f3;
--card:#ffffff;
--text:#22302a;
--text-sub:#6b7b73;
--text-muted:#9aa89f;
--border:#e6ece6;
--radius:14px;
--radius-sm:10px;
--radius-lg:18px;
/* 多层阴影：更柔和、更有层次 */
--shadow-sm:0 2px 8px rgba(27,67,50,.06);
--shadow:0 6px 20px rgba(27,67,50,.10);
--shadow-lg:0 10px 30px rgba(27,67,50,.14);
--shadow-green:0 8px 24px rgba(27,67,50,.22);
--shadow-gold:0 6px 18px rgba(232,163,61,.30);
/* 过渡曲线 */
--ease-out:cubic-bezier(.22,.61,.36,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
/* 渐变 */
--grad-green:linear-gradient(135deg,#1B4332 0%,#2D6A4F 100%);
--grad-green-soft:linear-gradient(135deg,#2D6A4F 0%,#408063 100%);
--grad-gold:linear-gradient(135deg,#E8A33D 0%,#F4C77A 100%);
--maxw:480px;
--danger:#c0392b;       /* 危险色：删除/清空（后台用） */
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-size:15px;
  line-height:1.6;
font-family:system-ui,-apple-system,"Segoe UI",BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",sans-serif;
background:#d9ded9;
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:"tnum" 1,"kern" 1;
letter-spacing:.2px;
}
img{display:block;width:100%;height:100%;object-fit:cover}
/* ===== App 外壳（移动端居中，桌面端两侧留灰底） ===== */
.app{
position:relative;
max-width:var(--maxw);
margin:0 auto;
min-height:100vh;
background:var(--bg);
box-shadow:0 0 40px rgba(0,0,0,.08);
overflow:hidden;
}
/* ===== 顶部栏容器（各页在 page.css 设置 padding 与子元素） ===== */
.topbar{
position:sticky; top:0; z-index:50;
display:flex; align-items:center; justify-content:space-between;
height:48px;
background:var(--green-deep); color:#fff;
box-shadow:0 2px 14px rgba(27,67,50,.18);
}
/* ===== 底部 Tab 导航（全站统一） ===== */
.tabbar{
position:fixed;max-width:var(--maxw);left:50%;transform:translateX(-50%);
bottom:0;z-index:50;width:100%;
display:flex;justify-content:space-around;align-items:center;
height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
background:#fff;border-top:1px solid var(--border);
box-shadow:0 -4px 20px rgba(0,0,0,.05);
}
.tab-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding-top:6px;color:var(--text-muted);transition:color .2s var(--ease-out)}
.tab-item .tab-ico{width:23px;height:23px;transition:transform .25s var(--ease-spring)}
.tab-item .tab-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab-item .tab-txt{font-size:12px}
.tab-item:active .tab-ico{transform:scale(.88)}
.tab-item.active{color:var(--green-deep)}
.tab-item.active .tab-ico{transform:translateY(-1px)}
.tab-item.active .tab-txt{font-weight:700}
/* ===== 底部弹出菜单（关于我们 / 关于产品） ===== */
.tab-menu{position:fixed;inset:0;z-index:55;display:none}
.tab-menu.show{display:block}
.tab-menu .tm-mask{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tab-menu .tm-panel{
position:absolute;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));
max-width:var(--maxw);margin:0 auto;
background:#fff;border-radius:14px 14px 0 0;padding:14px 12px 18px;
box-shadow:0 -6px 24px rgba(0,0,0,.12);
animation:tmUp .22s var(--ease-out);
max-height:70vh;overflow-y:auto
}
@keyframes tmUp{from{transform:translateY(100%)}to{transform:none}}
.tab-menu .tm-item{
padding:12px 14px;font-size:15px;color:var(--text);border-radius:10px;
cursor:pointer;transition:background .15s
}
.tab-menu .tm-item:active{background:var(--green-light);color:var(--green-deep)}
.tab-menu .tm-item + .tm-item{border-top:1px solid var(--border)}
/* ===== 弹窗标题 + 图标卡片（关于我们专用） ===== */
.tab-menu .tm-title{
font-size:15px;font-weight:800;color:var(--text);
padding:4px 4px 12px;letter-spacing:.5px
}
.tab-menu .tm-grid{
display:grid;grid-template-columns:1fr 1fr;gap:12px 14px
}
.tab-menu .tm-grid.tm-grid-4{
grid-template-columns:repeat(4,1fr);gap:10px 8px
}
.tab-menu .tm-grid.tm-grid-4 .tm-card{padding:14px 4px}
.tab-menu .tm-grid.tm-grid-4 .tm-card-icon{width:26px;height:26px;margin-bottom:6px}
.tab-menu .tm-grid.tm-grid-4 .tm-card-txt{font-size:12.5px}
.tab-menu .tm-card{
background:#F0F5F0;border-radius:12px;
padding:18px 10px;text-align:center;cursor:pointer;
transition:transform .18s var(--ease-spring),background .18s
}
.tab-menu .tm-card:active{transform:scale(.96);background:#E4EDE4}
.tab-menu .tm-card-icon{
width:28px;height:28px;margin:0 auto 8px
}
.tab-menu .tm-card-icon img{
width:22px;height:22px;display:block;margin:auto
}
.tab-menu .tm-card-txt{font-size:14px;font-weight:600;color:var(--green-deep)}
/* ===== 轻提示 toast（无 white-space:pre-line；需换行的页面在 page.css 追加） ===== */
.toast{
position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);
background:rgba(27,67,50,.92);color:#fff;font-size:13px;
padding:10px 18px;border-radius:10px;z-index:99;opacity:0;
transition:opacity .25s,transform .25s;pointer-events:none;max-width:80%;text-align:center;
box-shadow:var(--shadow-lg);
line-height:1.5
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* 通用工具类 */
.h-14{height:14px}
.hide{display:none!important}
.tc{text-align:center}
.muted{color:var(--text-muted)}
.small{font-size:12px}

/* ===== 文本内联 SVG 统一尺寸（替换 emoji 后必须加的规则） ===== */
/* 所有 h1~h6 中直接包含的 svg（无前缀类名约束） */
h1>svg:first-child,h2>svg:first-child,h3>svg:first-child,
h4>svg:first-child,h5>svg:first-child,h6>svg:first-child{
  width:1.2em;height:1.2em;vertical-align:-0.1em;margin-right:.25em;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
/* .label 里的 svg（如 .wireframe-block .label svg） */
.label>svg:first-child,
.label svg:first-child{
  width:1em;height:1em;vertical-align:-0.1em;margin-right:.3em;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
/* .t / .d 等通用文本容器里的 svg（如 .svc-hotline .t svg） */
.t>svg:first-child,
.t svg:first-child,
.d>svg:first-child{
  width:1.1em;height:1.1em;vertical-align:-0.1em;margin-right:.25em;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
/* 联系方式里的内联 svg（如 .contact-map 导航提示条地址图标） */
.map-nav-hint svg:first-child{
  width:1em;height:1em;vertical-align:-0.15em;margin-right:.3em;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
/* 节能计算器标题 svg */
.calc-title svg:first-child{
  width:1.3em;height:1.3em;vertical-align:-0.15em;margin-right:.3em;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
/* 各类 banner/entry h5 svg（如 agent-entry h5 svg） */
.agent-entry h5 svg:first-child,
.calc-box h5 svg:first-child{
  width:1.1em;height:1.1em;vertical-align:-0.1em;margin-right:.25em;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}
/* strong/em/b 等强调标签里的内联 svg（如 计算说明 标题前缀） */
strong>svg:first-child,em>svg:first-child,b>svg:first-child,
strong svg:first-child,em svg:first-child,b svg:first-child{
  width:1em;height:1em;vertical-align:-0.15em;margin-right:.25em;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round
}

@media(min-width:481px){ body{background:#cfd6cf} }

/* 设计增强层：入场动效、自适应、质感优化 */

/* ---------- 关键帧 ---------- */
@keyframes kwFadeUp{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes kwFadeIn{from{opacity:0}to{opacity:1}}
@keyframes kwPopX{0%{opacity:0;transform:translateX(-50%) scale(.7)}60%{opacity:1;transform:translateX(-50%) scale(1.06)}100%{transform:translateX(-50%) scale(1)}}

/* ---------- 平滑滚动（锚点跳转如 #message 更顺滑） ---------- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* ---------- 顶部栏：纯透明度淡入（sticky 元素不用 transform，避免粘附抖动） ---------- */
.topbar{animation:kwFadeIn .4s var(--ease-out) both}

/* ---------- 内容块：错峰 fadeUp ----------
   说明：仅位移 .app 的内容型直接子元素；.topbar 为 sticky、.tabbar/.float-contact 依赖
   translateX(-50%) 居中、.toast 依赖 translate(-50%,-50%) 居中，故均排除，
   改用纯透明度淡入，避免覆盖其定位 transform。 */
.app > *:not(.topbar):not(.tabbar):not(.float-contact):not(.toast):not(.action-bar):not(.tab-menu){
animation:kwFadeUp .55s var(--ease-out) both
}
.app > *:not(.topbar):not(.tabbar):not(.float-contact):not(.toast):not(.action-bar):not(.tab-menu):nth-child(1){animation-delay:0s}
.app > *:not(.topbar):not(.tabbar):not(.float-contact):not(.toast):not(.action-bar):not(.tab-menu):nth-child(2){animation-delay:.05s}
.app > *:not(.topbar):not(.tabbar):not(.float-contact):not(.toast):not(.action-bar):not(.tab-menu):nth-child(3){animation-delay:.1s}
.app > *:not(.topbar):not(.tabbar):not(.float-contact):not(.toast):not(.action-bar):not(.tab-menu):nth-child(4){animation-delay:.15s}
.app > *:not(.topbar):not(.tabbar):not(.float-contact):not(.toast):not(.action-bar):not(.tab-menu):nth-child(5){animation-delay:.2s}
.app > *:not(.topbar):not(.tabbar):not(.float-contact):not(.toast):not(.action-bar):not(.tab-menu):nth-child(6){animation-delay:.25s}
.app > *:not(.topbar):not(.tabbar):not(.float-contact):not(.toast):not(.action-bar):not(.tab-menu):nth-child(n+7){animation-delay:.3s}

/* ---------- 底栏 / 悬浮钮：纯透明度淡入（保护居中 transform） ---------- */
.tabbar{animation:kwFadeIn .5s var(--ease-out) .12s both}

/* ===== 悬浮联系按钮（全站统一 · 首页风格：墨绿圆 + 白字） ===== */
.float-contact{
  position:fixed;max-width:var(--maxw);left:50%;transform:translateX(-50%);
  bottom:calc(64px + env(safe-area-inset-bottom));z-index:40;
  width:100%;pointer-events:none;
  animation:kwPopX .5s var(--ease-spring) .35s both
}
.float-contact .fc-inner{
  display:flex;flex-direction:column;gap:12px;align-items:flex-end;
  margin-right:14px;pointer-events:auto
}
.float-btn{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green-deep);color:#fff;
  cursor:pointer;box-shadow:0 4px 14px rgba(27,67,50,.35);
  transition:transform .2s var(--ease-spring);
  font-size:15px;font-weight:600;letter-spacing:.5px
}
.float-btn:active{transform:scale(.9)}
.float-btn .fc-label{color:#fff;line-height:1}

/* ---------- 图片淡入 ---------- */
.app img{animation:kwFadeIn .6s var(--ease-out) both}

/* ---------- 文本选区 ---------- */
::selection{background:var(--green-deep);color:#fff}
::-moz-selection{background:var(--green-deep);color:#fff}

/* ---------- 键盘焦点态（无障碍） ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}

/* ---------- 滚动条美化（桌面预览） ---------- */
@media(min-width:481px){
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#e3e8e3}
::-webkit-scrollbar-thumb{background:#9aa89f;border-radius:8px;border:2px solid #e3e8e3}
::-webkit-scrollbar-thumb:hover{background:var(--green)}
}

/* ---------- 超小屏适配（≤359px：略微收紧间距，不改变布局） ---------- */
@media(max-width:359px){
:root{--radius:12px;--radius-sm:8px;--radius-lg:16px}
body{font-size:14px}
.topbar{height:44px}
.topbar .title,.topbar .brand{font-size:16px}
.tabbar{height:calc(52px + env(safe-area-inset-bottom))}
.tab-item .tab-txt{font-size:11px}
.app img{animation-duration:.4s}
}

/* ---------- 减弱动效（无障碍：尊重用户系统偏好） ---------- */
@media(prefers-reduced-motion:reduce){
*,:before,:after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}