/* ===== 手机端顶栏收紧：LOGO 缩窄、账号名限宽，确保整体不溢出、LOGO 完整 =====
   顶栏现在有：LOGO ｜ 当前账号 ｜ 设置 ｜ 主题 ｜ 退出 —— 390px 放不下
   ⇒ LOGO 限宽 + 文字省略，其余元素 flex:0 0 auto 不压缩
*/

@media (max-width: 680px) {
  #app > .top {
    height: 52px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    overflow: visible !important;   /* 下拉菜单需要，但下面全部限宽所以不会溢出 */
  }

  /* ① LOGO：限宽 + 图片等比缩小，文字可省略 */
  #app > .top .hz-logo-link {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 136px !important;
    height: 52px !important;
    max-height: 52px !important;
    overflow: hidden !important;
    gap: 5px !important;
  }
  #app > .top .hz-logo-link img {
    height: 28px !important;
    width: auto !important;
    max-width: 36px !important;
    flex: 0 0 auto !important;
    object-fit: contain !important;
  }
  #app > .top .hz-logo-link .t1 {
    font-size: 13px !important;
    max-width: 92px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }
  #app > .top .hz-logo-link .t2 { display: none !important; }   /* 英文副标题手机不显示 */

  /* ② 当前账号名：限宽 + 省略号，别抢 LOGO 的位置 */
  #hz-who {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 86px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    gap: 4px !important;
  }
  #hz-who b {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 60px !important;
  }
  #hz-who .hz-role { display: none !important; }

  /* ③ 右侧按钮一律不压缩 */
  #hz-set-wrap { flex: 0 0 auto !important; }
  #hz-set-btn { width: 32px !important; min-width: 32px !important; height: 32px !important; padding: 0 !important; }
  #hz-set-btn span.hz-txt { display: none !important; }
  #hz-theme-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 48px !important;
    height: 30px !important;
    padding: 0 7px !important;
    gap: 5px !important;
  }
  #hz-theme-btn .hz-ti { width: 16px !important; height: 16px !important; }
  #app > .top button.btn,
  #app > .top .btn.ghost,
  #app > .top a.btn {
    flex: 0 0 auto !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 9px !important;
    font-size: 11.5px !important;
  }

  /* ④ 顶栏中途的占位 spacer 不要占太多 */
  #app > .top > .sp { flex: 1 1 auto !important; min-width: 4px !important; }
}

/* 超窄屏（≤360，如 iPhone SE）进一步收紧 */
@media (max-width: 360px) {
  #app > .top .hz-logo-link { max-width: 112px !important; }
  #app > .top .hz-logo-link .t1 { font-size: 12px !important; max-width: 74px !important; }
  #hz-who { max-width: 66px !important; }
  #hz-who b { max-width: 42px !important; }

  /* 手机端 LOGO 文字块原来被整块隐藏（只剩一张小图）⇒ 恢复显示，做成「图 + 中文名」 */
  #app > .top .hz-logo-link > span {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  #app > .top .hz-logo-link img {
    height: 32px !important;
    max-width: 40px !important;
    width: auto !important;
  }
  #app > .top .hz-logo-link { max-width: 132px !important; }
  #app > .top .hz-logo-link .t1 {
    font-size: 13px !important;
    max-width: 86px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #app > .top .hz-logo-link .t2 { display: none !important; }
}