@charset "utf-8";
/* ============================================================
   layout.css —— 顶部条 / 头部导航 / 底部 / 浮窗
   ============================================================ */

/* ---------- 顶部工具条 ---------- */
.topbar{background:var(--ink);color:rgba(255,255,255,.72);font-size:12.5px;}
.tb-in{display:flex;align-items:center;justify-content:space-between;height:36px;}
.tb-l{letter-spacing:.3px;}
.tb-r{display:flex;align-items:center;gap:8px;}
.tb-r b{color:#fff;font-size:14px;letter-spacing:.5px;}

/* 顶部搜索：只有一个输入框，回车提交，不放按钮 */
.tb-search{flex:0 0 auto;}
.tb-search input{
  width:210px;height:26px;padding:0 12px;border-radius:13px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);
  color:#fff;font-size:12.5px;font-family:inherit;transition:width .2s,background .2s,border-color .2s;
}
.tb-search input::placeholder{color:rgba(255,255,255,.45);}
.tb-search input:focus{
  outline:0;width:250px;background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.34);
}

/* 移动端搜索：图标 + 下拉面板（默认隐藏，≤900 生效） */
.msearch-btn{display:none;}
.msearch,.msearch-mask{display:none;}

/* ---------- 头部 ---------- */
.hd{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.hd-in{display:flex;align-items:center;height:var(--hd-h);gap:28px;}

.logo{flex:0 0 auto;display:flex;align-items:center;height:44px;}
.logo img{display:block;max-height:44px;width:auto;}

/* 主导航 */
.nav{flex:1;min-width:0;}
.nav > ul{display:flex;align-items:center;gap:4px;}
/* li 设为 flex 容器：带二级菜单的 li 内部会有换行/空格等空白文本节点，
   若用默认 block 会多出一个匿名行盒（高度按继承的 line-height 计算），
   导致该 li 变高、文字被 align-items:center 顶上去，和没有二级菜单的项不齐。
   flex 容器会忽略空白文本节点，高度统一为 a 的 line-height。 */
.nav > ul > li{position:relative;display:flex;align-items:center;}
.nav > ul > li > a{
  display:block;padding:0 16px;line-height:var(--hd-h);font-size:15.5px;
  font-weight:500;color:var(--ink);white-space:nowrap;
}
.nav > ul > li > a:hover,
.nav > ul > li.on > a{color:var(--brand);}
.nav > ul > li.on > a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;
  background:var(--brand);border-radius:3px 3px 0 0;
}

/* 二级菜单 */
.nav .sub{
  position:absolute;left:0;top:100%;min-width:150px;padding:8px 0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s;
}
.nav li:hover .sub{opacity:1;visibility:visible;transform:translateY(0);}
.nav .sub a{display:block;padding:8px 18px;font-size:14px;color:var(--ink2);white-space:nowrap;}
.nav .sub a:hover{background:var(--soft);color:var(--brand);}

/* 头部电话 */
.hd-tel{flex:0 0 auto;text-align:right;line-height:1.3;}
.hd-tel .t{display:block;font-size:11.5px;color:var(--ink3);}
.hd-tel b{font-size:20px;color:var(--brand);letter-spacing:.5px;}

/* 会员登录状态（未登录：登录/注册；已登录：头像+昵称） */
.hd-user{flex:0 0 auto;display:flex;align-items:center;gap:8px;}
.hd-login{
  display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;
  border:1px solid var(--line);border-radius:19px;background:#fff;
  font-size:14px;color:var(--ink);white-space:nowrap;transition:.2s;
}
.hd-login:hover{border-color:var(--brand);color:var(--brand);}
.hd-reg{border-style:dashed;color:var(--ink2);}
.hd-login.is-user{gap:9px;padding:0 14px 0 6px;}
.hd-login.is-user .avatar{
  width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--soft);
  border:1px solid var(--line);flex:0 0 auto;
}
.hd-login.is-user .uname{max-width:96px;overflow:hidden;text-overflow:ellipsis;}

/* 移动端菜单按钮 */
.mnav-btn{
  display:none;width:38px;height:38px;flex:0 0 auto;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.mnav-btn i{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.25s;}

/* ---------- 底部 ---------- */
.ft{background:#0f2a32;color:rgba(255,255,255,.66);font-size:13.5px;margin-top:60px;}
.ft-top{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:36px;
  padding-top:52px;padding-bottom:44px;
}
.ft-logo{font-size:20px;font-weight:700;color:#fff;letter-spacing:.5px;}
.ft-slogan{margin-top:10px;font-size:13px;color:rgba(255,255,255,.5);}
.ft-tel{margin-top:22px;}
.ft-tel span{display:block;font-size:12px;color:rgba(255,255,255,.45);}
.ft-tel b{font-size:24px;color:var(--brand);letter-spacing:.5px;}
.ft-col h4{font-size:14.5px;color:#fff;margin-bottom:16px;font-weight:600;}
.ft-col li{margin:9px 0;}
.ft-col a:hover{color:var(--brand);}
.ft-contact li{color:rgba(255,255,255,.6);line-height:1.8;}
.ft-bot{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:12.5px;color:rgba(255,255,255,.42);}
.ft-bot .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ft-icp a:hover{color:#fff;}

/* ---------- 右侧浮窗 ---------- */
.float-bar{
  position:fixed;right:16px;bottom:120px;z-index:90;
  display:flex;flex-direction:column;gap:8px;
}
.fb-item{
  width:56px;height:56px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;transition:.2s;
}
.fb-item:hover{background:var(--brand);border-color:var(--brand);}
.fb-item:hover .ico,.fb-item:hover .txt{color:#fff;}
.fb-item .ico{font-size:17px;color:var(--brand);line-height:1;}
.fb-item .txt{font-size:11px;color:var(--ink2);}

/* ---------- 移动端底部操作条 ---------- */
.m-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;
  height:56px;display:flex;background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -2px 12px rgba(18,51,61,.06);
}
.m-bar a{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink2);
}
.m-bar .mb-tel{flex:1.2;background:var(--brand);color:#fff;font-weight:600;}

/* ---------- 响应式 ---------- */
@media(max-width:900px){
  .topbar{display:none;}
  .hd-in{gap:0;position:relative;}
  .hd-tel{display:none;}
  .mnav-btn{display:flex;}

  /* 搜索图标：靠右，位于登录状态左侧 */
  .msearch-btn{
    display:flex;align-items:center;justify-content:center;
    width:34px;height:34px;margin-left:auto;margin-right:6px;border-radius:50%;
    color:var(--ink);background:transparent;flex:0 0 auto;
  }
  .msearch-btn svg{width:19px;height:19px;}
  .msearch-btn:active{background:var(--soft);}

  /* 展开的搜索面板：贴在 header 下沿 */
  .msearch{
    display:none;position:fixed;left:0;right:0;top:var(--hd-h);z-index:99;
    padding:10px 12px;background:#fff;border-bottom:1px solid var(--line);
    box-shadow:0 8px 20px rgba(18,51,61,.08);
  }
  body.search-open .msearch{display:block;}
  .msearch-form input{
    width:100%;height:42px;padding:0 16px;border-radius:21px;
    border:1px solid var(--line);background:var(--soft);
    font-size:14px;font-family:inherit;color:var(--ink);
  }
  .msearch-form input::placeholder{color:var(--ink3);}
  .msearch-form input:focus{outline:0;border-color:var(--brand);background:#fff;}
  .msearch-mask{
    display:none;position:fixed;left:0;right:0;top:var(--hd-h);bottom:0;z-index:98;
    background:rgba(13,32,39,.28);
  }
  body.search-open .msearch-mask{display:block;}
  body.search-open{overflow:hidden;}

  /* 移动端三段式：左菜单按钮 / 中 logo / 右登录状态 */
  .logo{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  }
  .logo img{max-height:38px;}
  .hd-user{margin-left:0;}
  .hd-reg{display:none;}
  .hd-login{height:34px;padding:0 14px;font-size:13.5px;}
  .hd-login.is-user{padding:0 10px 0 5px;}
  .hd-login.is-user .avatar{width:26px;height:26px;}
  .hd-login.is-user .uname{display:none;}

  /* 关键修复：.hd 上的 backdrop-filter 会让 position:fixed 的后代
     以 header 自身为包含块，抽屉因此无法相对视口定位。
     移动端关掉滤镜，抽屉才能正常滑出。 */
  .hd{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff;}

  /* 打开时锁住页面滚动 */
  body.nav-open{overflow:hidden;height:100%;}

  /* 遮罩层：点击任意处关闭 */
  .nav-mask{
    position:fixed;left:0;right:0;top:0;bottom:0;z-index:98;
    background:rgba(15,42,50,.45);
    opacity:0;visibility:hidden;transition:.22s ease;
  }
  body.nav-open .nav-mask{opacity:1;visibility:visible;}

  /* 左侧抽屉：宽约 80%，高度按菜单数量自适应全部显示 */
  .nav{
    position:fixed;left:0;top:var(--hd-h);bottom:auto;
    width:82%;max-width:340px;
    height:auto;max-height:calc(100vh - var(--hd-h) - 16px);
    max-height:calc(100dvh - var(--hd-h) - 16px);
    background:#fff;padding:0 0 10px;
    border-radius:0 12px 12px 0;
    box-shadow:0 16px 40px rgba(15,42,50,.22);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    z-index:99;
    transform:translateX(-106%);transition:transform .25s ease;
  }
  .nav.open{transform:translateX(0);}

  .nav > ul{flex-direction:column;align-items:stretch;gap:0;}
  .nav > ul > li{position:relative;border-bottom:1px solid var(--line);display:block;font-size:0;}
  .nav > ul > li > a{line-height:52px;padding:0 56px 0 20px;font-size:16px;}
  .nav > ul > li.on > a::after{display:none;}
  .nav > ul > li.on > a{background:var(--brand-soft);}

  /* 二级菜单折叠：默认收起，保证主菜单一屏全部可见 */
  .nav .sub{
    position:static;display:none;opacity:1;visibility:visible;transform:none;
    min-width:0;border:0;box-shadow:none;padding:2px 0 10px;background:var(--soft);
    flex-wrap:wrap;
  }
  .nav li.sub-open > .sub{display:flex;}
  .nav .sub a{padding:8px 20px;font-size:14px;line-height:1.6;}

  /* 展开箭头（由 JS 注入，避免改动 header.htm 结构） */
  .nav .sub-tog{
    position:absolute;right:0;top:0;width:52px;height:52px;
    display:flex;align-items:center;justify-content:center;
    border:0;background:none;padding:0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nav .sub-tog::before{
    content:"";width:8px;height:8px;margin-top:-4px;
    border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
    transform:rotate(45deg);transition:transform .2s ease,margin .2s ease;
  }
  .nav li.sub-open > .sub-tog::before{transform:rotate(-135deg);margin-top:4px;}

  /* 汉堡 ⇄ 关闭 */
  .mnav-btn.on i:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .mnav-btn.on i:nth-child(2){opacity:0;}
  .mnav-btn.on i:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .float-bar{display:none;}

  /* 移动端页脚：只保留版权信息，隐藏品牌/导航/联系方式大区块 */
  .ft{margin-top:30px;}
  .ft-top{display:none;}
  .ft-bot{border-top:0;padding:16px 0 18px;text-align:center;font-size:12px;}
  .ft-bot .wrap{flex-direction:column;align-items:center;gap:4px;}
}