/* ============================================================
   双兵焊割 · 共享站点外壳样式 (chrome.css)
   由 index.html 的导航 / 页脚 CSS 抽取，供全站页面 <link> 复用。
   主题：暗金（gold on dark），与首页保持一致。
   依赖：页面 <style> 内 :root 需定义
     --dark / --orange2 / --fb1 / --fb2 / --gray
   ============================================================ */

/* ============ 左侧固定竖向图标栏 (5%) ============ */
.menu_a{
  position:fixed;top:0;left:0;height:100%;width:5%;min-width:60px;
  background:var(--dark);z-index:999;
  display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding:45px 0;
}
.menu_a .top-icons{display:flex;flex-direction:column;align-items:center;width:100%;}
.icon{
  color:#fff;text-align:center;cursor:pointer;width:100%;padding:24px 0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:12px;opacity:.85;
}
.icon:hover{color:var(--orange2);}
.icon img{width:60%;max-width:44px;}
.icon .lbl{opacity:.6;}
.menu_a .progress-wrap{position:relative;width:3px;height:150px;background:rgba(255,255,255,.18);border-radius:3px;margin-bottom:30px;}
.menu_a .progress-wrap .progress{position:absolute;top:0;left:-18px;width:38px;height:38px;border-radius:50%;background:#FFD700;display:flex;align-items:center;justify-content:center;color:#1E1D1E;font-size:16px;font-weight:700;cursor:grab;box-shadow:0 0 0 4px rgba(255,215,0,.18),0 4px 12px rgba(0,0,0,.3);transition:transform .2s;user-select:none;touch-action:none;}
.menu_a .progress-wrap .progress:hover{transform:scale(1.12);}
.menu_a .progress-wrap .progress:active{cursor:grabbing;}
@keyframes floatArrow{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}

/* 语言切换浮层 */
.lang-pop{display:none;position:absolute;left:110%;top:50%;transform:translateY(-50%);background:var(--dark);opacity:.95;border:1px solid #4a4a4a;padding:6px 0;border-radius:4px;min-width:90px;}
.lang-pop p{padding:8px 16px;color:#fff;font-size:13px;cursor:pointer;margin:0;}
.lang-pop p:hover,.lang-pop p.active{color:var(--orange2);}

/* ============ 滑出式菜单面板 (250px) ============ */
.menu_b{
  position:fixed;top:0;left:5%;width:250px;height:100%;
  background:var(--dark);opacity:.97;border-left:1px solid #4a4a4a;
  padding:40px 0;z-index:998;
  display:flex;flex-direction:column;align-items:center;
  transform:translateX(-110%);transition:transform .35s ease;
}
.menu_b.open{transform:translateX(0);}
.menu_b .nav-list{width:100%;display:flex;flex-direction:column;align-items:stretch;}
.menu_b .nav-link{display:block;text-align:center;padding:15px 0;color:#fff;font-size:20px;}
.menu_b .nav-link:hover{color:var(--orange2);}
/* 子菜单 dropdown —— 向右展开 */
.menu_b .nav-item.has-sub{position:relative;}
.menu_b .nav-item.has-sub > a .caret{display:inline-block;margin-left:8px;font-size:11px;opacity:.7;transition:transform .25s;}
.menu_b .nav-item.has-sub.open > a .caret{transform:rotate(-90deg);}
.menu_b .sub{display:none;position:absolute;left:100%;top:0;width:180px;margin-left:8px;background:rgba(30,35,45,.97);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 0;box-shadow:4px 4px 20px rgba(0,0,0,.4);z-index:99;}
.menu_b .nav-item.has-sub.open .sub{display:block;}
  .menu_b .nav-item.has-sub:hover .sub{display:block;}
  .menu_b .nav-item.has-sub:hover > a .caret{transform:rotate(-90deg);}
.menu_b .sub a{display:block;text-align:left;padding:12px 20px;color:#ddd;font-size:15px;transition:color .2s,background .2s;}
.menu_b .sub a:hover{color:var(--orange2);background:rgba(255,255,255,.06);}
.menu_b .dropdown-divider{height:0;margin:0;border-top:1px solid rgba(255,255,255,.08);}

/* ============ 页脚 · 深灰渐变 ============ */
.bf_bottom{background:linear-gradient(136deg,var(--fb1) 0%,var(--fb2) 100%);position:relative;color:#fff;}
.bf_bottom .container{max-width:var(--maxw);margin:0 auto;padding:0 15px;}
.bf_bottom .row{padding:100px 0 50px;}
.bf_bottom .hotline{display:flex;align-items:center;gap:14px;padding-bottom:50px;font-size:30px;font-weight:700;color:#fff;}
.bf_bottom .hotline .ph-ic{width:44px;height:44px;border-radius:50%;background:rgba(255,215,0,.18);border:1.5px solid rgba(255,215,0,.45);display:flex;align-items:center;justify-content:center;color:#FFD700;}
.bf_bottom .cols{display:flex;flex-wrap:wrap;gap:30px;}
.bf_bottom .col{flex:1;min-width:160px;padding-left:20px;}
.bf_bottom .col h4{color:#fff;font-size:20px;font-weight:700;margin-bottom:22px;}
.bf_bottom .col a,.bf_bottom .col p{display:block;color:var(--gray);font-size:15px;margin:0 0 14px;line-height:1.6;}
.bf_bottom .col a:hover{color:#fff;}
.bf_bottom .divider{border-bottom:1px solid #6D6D6D;margin:30px 0;}
.bf_bottom .qr{display:flex;flex-direction:column;align-items:flex-end;}
.bf_bottom .qr img{width:140px;height:140px;background:#fff;padding:6px;border-radius:4px;}
.bf_bottom .qr .qt{color:#fff;font-size:13px;margin-top:14px;}
.bf_bottom .copy{padding:24px 4%;color:var(--gray);font-size:13px;}

/* 移动端顶部条 */
.m-topbar{display:none;}

/* ============ 响应式 ============ */
@media(max-width:768px){
  .menu_a{display:none;}
  .menu_b{left:0;width:80%;transform:translateX(-110%);}
  .m-topbar{display:flex;position:fixed;top:0;left:0;right:0;z-index:999;background:var(--dark);align-items:center;justify-content:space-around;padding:10px 0;}
  body{padding-top:54px;}
  .m-topbar .mb-ic{color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;cursor:pointer;}
  .m-topbar .mb-ic img{width:30px;height:30px;}
  .m-topbar .mb-ic{position:relative;}
  .m-topbar .lang-pop{left:auto;right:0;top:100%;transform:none;margin-top:6px;min-width:80px;}
  .bf_bottom .row{padding:50px 0 30px;}
  .bf_bottom .col{padding-left:0;min-width:45%;}
  .bf_bottom .qr{align-items:center;}
}