/* 站点品牌 / 机房切换器 / 社群 / 友链（注入） */
  .brand { padding: 2px 2px 10px; }
  .brand-name { font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: .02em; }
  /* 「4W」小图标：内联 SVG（和落地页同一个 ✓）*/
  .brand-logo { width: 1.6em; height: 1.6em; vertical-align: -0.32em; margin-right: 8px; }
  .brand-sub { font-size: 11px; color: #9a9a9a; margin-top: 4px; line-height: 1.5; }

  .site-switch { padding: 12px 12px 10px; border-bottom: 1px solid #373737; }
  .site-switch-title { font-size: 11px; letter-spacing: .08em; color: #9a9a9a;
                       margin: 0 0 8px 2px; }
  /* 机房切换器：下拉 + 地区分组（2026-10-09 从"平铺列表"改过来 —— 机房一多列表就变成一堵墙 ✗）
     好处：无论多少台机房，侧边栏高度恒定 ≈120px ✓；原生控件，手机也好用 ✓ */
  .site-select { display:block; width:100%; padding:9px 10px; border-radius:5px;
                 font-size:13px; line-height:1.4;
                 background:rgba(255,255,255,.10); color:#e8e8e8;
                 border:1px solid rgba(255,255,255,.22); cursor:pointer; }
  .site-select:hover { background:rgba(255,255,255,.18); }
  .site-select option, .site-select optgroup { background:#24292f; color:#e8e8e8; }
  .site-select optgroup { color:#9a9a9a; font-style:normal; font-weight:600; }
  .site-link { display: block; padding: 8px 11px; margin: 4px 0; border-radius: 5px;
               font-size: 12.5px; text-decoration: none; color: #e0e0e0;
               background: rgba(255,255,255,.07); border-left: 3px solid transparent; }
  .site-link:hover { background: rgba(255,255,255,.16); color: #fff; }
  .site-link.home { background: rgba(63,185,80,.14); color: #56d364; font-size: 13px;
                    font-weight: 600; text-align: center; padding: 10px 11px;
                    margin: 10px 0 2px; border-left: 3px solid #3fb950; }
  .site-link.home:hover { background: #238636; color: #fff; border-left-color: #56d364; }

  .community { padding: 12px; border-bottom: 1px solid #373737; }
  .community-title { font-size: 11px; letter-spacing: .08em; color: #9a9a9a;
                     text-transform: uppercase; margin: 0 0 8px 2px; }
  .community a { display: block; padding: 7px 11px; margin: 4px 0; border-radius: 5px;
                 font-size: 12.5px; text-decoration: none; color: #cfd8e3;
                 background: rgba(255,255,255,.05); }
  .community a:hover { background: rgba(255,255,255,.16); color: #fff; }
  .community a .tag { color: #7d8590; font-size: 11px; }

  .friends { margin: 22px 6px 8px; padding-top: 14px; border-top: 1px solid #e1e4e8; }
  .friends-title { color: #888; font-size: 11px; letter-spacing: .08em;
                   text-transform: uppercase; margin-bottom: 8px; }
  .friends a { display: inline-block; margin: 3px 8px 3px 0; padding: 5px 11px;
               border-radius: 4px; text-decoration: none; color: #333;
               background: #f6f6f6; border: 1px solid #ddd; }
  .friends a:hover { background: #1f6feb; color: #fff; border-color: #1f6feb; }

  /* h2 的蓝色点缀：左侧竖条 ✓（和落地页同一套视觉语言）（2026-10-11 用户要求）
     ⚠️ 用 flex 居中 ✓，别用 top/height 硬算 ✗ —— 那样是按"行盒顶部"对齐，看着偏上 */
  .main h2 { display: flex; align-items: center; gap: 9px; }
  .main h2::before { content: ""; flex: none; width: 3px; height: 1.05em;
                     background: #1f6feb; border-radius: 2px; }

  /* ---------- 移动端（2026-10-11 加）----------
     原来这里**一条响应式规则都没有** ✗，而探测图是写死 <IMG WIDTH="697"> 的 ✗
     → 手机上页面横向溢出、图只能看左边一截 ✗（smokeping 自带 CSS 只管了侧边栏，
       管不到图 ✗）
     修法：让所有图按容器缩放 ✓ —— 图上的字会跟着缩小，这样手机上一屏能看到整张 30 小时图 ✓ */
  img { max-width: 100%; height: auto; }

  /* ---------- 移动端入口栏 + ☰ 可见化（2026-10-11 加，用户反馈）----------
     问题：手机用户从首页点进某个机房后，**页面上没有任何可见的回首页入口** ✗
           （唯一那个「返回首页」链接藏在默认收起的侧边栏里 ✗）
           ☰ 又只有 opacity .3、文字还被 text-indent 藏了 ✗ → 看着像装饰
     方案 C：① 加一条始终可见的入口栏（窄屏才显示，宽屏本来就有侧边栏 ✓）
             ② 把 ☰ 提亮 + 加中文标签 ✓ */
  .pagebar { display: none; }
  a#menu-button:hover { opacity: 1 !important; }

  /* 抽屉遮罩（2026-10-11 加，用户反馈"点空白处不自动回位"）：
     一开始我只加了"点空白处关抽屉"，实测**不管用** ✗ ——
     因为机房页几乎整个内容都包在链接里（每张图都是 <a href="?target=CT">），
     点"空白处"其实点到了图表链接 → 直接跳转走了，根本轮不到关抽屉 ✗
     ⇒ 正确解法是遮罩：盖住内容区、吃掉点击，既关抽屉又不会误触底下的链接 ✓
     左边界设 250px，正好不盖住侧边栏本身 ✓
     ⚠️⚠️ 只在窄屏显示 ✗ —— 显示规则写在下面的 max-width:900px 里
         （PC 上侧边栏本来就是常驻的，冒遮罩纯属添乱：
           用户实测误点 ☰ 会冒出遮罩、正文还被挤到侧边栏底下 ✗）*/
  .drawer-scrim { display: none; }

  /* ⚠️ PC（宽屏）上把 ☰ 和它带来的布局位移全部禁掉 ✗
     那个 ☰ 是 smokeping 主题自带的：它的 .sidebar-hidden 只会把正文左内边距清零，
     **并不会真的隐藏侧边栏** ✗ → 宽屏上点一下，正文就滑到侧边栏底下、看着像坏了
     ⇒ 宽屏下：不给 ☰（侧边栏本来就常驻，用不上 ✓）、不给遮罩、正文内边距钉死 ✓ */
  @media (min-width: 901px) {
    .navbar-menu { display: none !important; }
    .drawer-scrim { display: none !important; }
    .sidebar-hidden .main, .sidebar-visible .main { padding-left: 250px !important; }
    .sidebar-hidden .navbar, .sidebar-visible .navbar { left: 0 !important; }
    /* ⚠️ 这条不能漏 ✗：主题在 .sidebar-hidden 下**还会把侧边栏自己滑走** ✓
       （我第一版只钉住正文和导航，结果误点后侧边栏没了、正文还留 250px 空档 ✗）
       宽屏下侧边栏必须常驻 —— 这样即使被程序触发，也完全没有视觉效果 ✓ */
    .sidebar-hidden .sidebar, .sidebar-visible .sidebar { left: 0 !important; }
  }

  @media (max-width: 900px) {
    /* 遮罩只在这个断点里显示 ✓（宽屏上侧边栏常驻，不需要它 ✗）*/
    .sidebar-visible .drawer-scrim {
      display: block; position: fixed; top: 0; left: 250px; right: 0; bottom: 0;
      z-index: 5; background: rgba(0, 0, 0, .30);
      -webkit-tap-highlight-color: transparent;
    }
    .pagebar { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 2px 14px; }
    .pagebar a { display: inline-block; padding: 9px 15px; border-radius: 8px; text-decoration: none;
                 font-size: 13.5px; border: 1px solid #d0d7de; background: #fff; color: #1f2328; }
    .pagebar a.pb-home { background: #1f6feb; border-color: #1f6feb; color: #fff; font-weight: 600; }
    .pagebar a.pb-switch { background: #f6f8fa; }
    .pagebar a:active { opacity: .8; }
    /* ☰：把被 text-indent 藏起来的文字放出来，图标挪到左边当装饰 ✓ */
    a#menu-button { opacity: .85 !important; background-position: left center !important;
                    background-size: 22px 22px !important;
                    text-indent: 0 !important; overflow: visible !important;
                    white-space: nowrap !important; width: auto !important;
                    padding: 0 14px 0 34px !important; color: #333;
                    font-size: 13.5px !important; line-height: 50px !important; }
  }
  @media (max-width: 900px) {
    html { -webkit-text-size-adjust: 100%; }
    /* ⚠️⚠️ 千万别整体覆盖 .main 的 padding ✗✗
       自带 CSS 是 `.main { padding-left:250px; padding-top:50px }`，
       那个 padding-top 是**给固定定位的 navbar 让位**用的 —— h1 就靠它才露得出来 ✗
       2026-10-11 我写成 `padding: 10px 12px 32px` 把它一起清了，
       结果手机上 h1（机房名）被 navbar 盖住、用户反馈"标题不显示" ✗
       ⇒ 要收紧就**只改左右下**，顶部必须保留 ✓ */
    .main { padding-right: 8px; padding-bottom: 26px; }
    .main h1 { font-size: 18px; line-height: 1.35; margin: 8px 2px; }
    .main h2 { font-size: 13.5px; line-height: 1.5; margin: 5px 2px; }
    .panel, .panel-body { max-width: 100%; }
    .panel img, .details img { width: 100% !important; height: auto !important; }
    .sidebar-menu { max-height: 70vh; overflow-y: auto; }   /* 机房多了侧边栏能滚 ✓ */
  }