/* ============================================================
   豹豹服务器官网 · 面板式布局（宝塔后台那种内容呈现）
   只改布局，不改任何配色 / 背景图 / 卡片底色。
   回滚：删掉 index.htm 里 css/bt-panel.css 的 <link>
         以及 .bt-topbar 那一段 HTML 即可。
   ============================================================ */

@media (min-width:992px){
  body{padding-left:220px!important;padding-top:56px!important;}

  /* ---------- 原导航 → 左侧菜单栏 ---------- */
  nav#menu1{
    position:fixed!important;left:0!important;top:0!important;bottom:0!important;
    width:220px!important;height:100vh!important;display:block!important;
    overflow-y:auto!important;padding:14px 10px!important;box-sizing:border-box!important;
    background:#2b333e!important;border-right:1px solid rgba(255,255,255,.06)!important;
    z-index:1000!important;
  }
  nav#menu1 ul{
    display:flex!important;flex-direction:column!important;gap:2px!important;
    width:100%!important;margin:0!important;padding:0!important;
  }
  nav#menu1 ul li{width:100%!important;float:none!important;display:block!important;margin:0!important;}
  nav#menu1 ul li a{
    display:block!important;width:100%!important;box-sizing:border-box!important;
    padding:11px 14px!important;border-radius:8px!important;
    color:#c2ccd6!important;font-size:14px!important;line-height:1.5!important;
    text-align:left!important;text-decoration:none!important;
    transition:background .18s,color .18s;
  }
  nav#menu1 ul li a:hover,nav#menu1 ul li a.active{background:rgba(255,255,255,.08)!important;color:#fff!important;}
  nav#menu1 ul li a img{vertical-align:middle;margin-right:4px;}

  /* ---------- 顶栏 ---------- */
  .bt-topbar{
    position:fixed;left:220px;right:0;top:0;height:56px;z-index:999;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:0 18px;background:#fff;border-bottom:1px solid #e8ecf0;
  }
  .bt-crumb{font-size:14px;color:#7b8794;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bt-crumb strong{color:#1f2329;font-weight:600;}
  .bt-actions{display:flex;gap:8px;flex:none;}
  .bt-chip{
    padding:7px 12px;border-radius:6px;border:1px solid #e8ecf0;background:#f7f9fb;
    color:#4e5969!important;font-size:13px;line-height:1;text-decoration:none!important;transition:.18s;
  }
  .bt-chip:hover{border-color:#34e89e;color:#0f3443!important;}

  /* ---------- 区块 → 面板 ---------- */
  section,#world,footer{
    max-width:1180px!important;margin:16px auto!important;
    border:1px solid #e8ecf0;border-radius:12px;overflow:hidden;
  }
  .showcase{min-height:62vh!important;}
  #world iframe{width:100%!important;max-width:100%;height:520px!important;border:0!important;border-radius:10px;background:#f7f9fb;}
}

/* 移动端不加外壳，保持原样 */
@media (max-width:991px){
  .bt-topbar{display:none!important;}
}

/* 深色模式下顶栏跟随 */
body.dark-mode .bt-topbar{background:#222!important;border-bottom-color:#3a3a3a!important;}
body.dark-mode .bt-crumb{color:#8b98a5!important;}
body.dark-mode .bt-crumb strong{color:#fff!important;}
body.dark-mode .bt-chip{background:#2a2a2a!important;border-color:#3a3a3a!important;color:#c9d1d9!important;}

/* ---------- 首屏背景：改用压缩后的 hero（WebP 优先，JPG 回退） ---------- */
.showcase{
  background-image:url("../img/hero.jpg")!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
@supports (background-image: -webkit-image-set(url("../img/hero.webp") 1x)){
  .showcase{background-image:-webkit-image-set(url("../img/hero.webp") type("image/webp"), url("../img/hero.jpg") type("image/jpeg"))!important;}
}
@supports (background-image: image-set(url("../img/hero.webp") 1x)){
  .showcase{background-image:image-set(url("../img/hero.webp") type("image/webp"), url("../img/hero.jpg") type("image/jpeg"))!important;}
}

/* ---------- 内联 SVG 图标（替代 FontAwesome） ---------- */
.bt-ico{width:18px;height:18px;margin-right:8px;vertical-align:-3px;flex:none;}