/* ── 手机端适配（左侧导航栏在窄屏下不可用，改用顶部横向分类条，收回桌面壳预留的空间）── */
@media (max-width: 768px) {
  :root {
    --app-rail-mobile-height: 52px;
  }

  body {
    padding-left: 0 !important;
  }

  .app-rail {
    display: none !important;
  }

  .app-rail-mobile {
    display: flex;
  }

  .app-mobile-notice {
    display: flex;
  }

  /* 顶栏在手机上铺满、贴边，不用桌面端"浮动小窗"那套圆角/留白，和下面的分类条拼成一整条 */
  .app-topbar,
  .app-titlebar-floating .app-topbar {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .app-topbar-tooltip::part(popup) {
    translate: 0 0;
  }

  /* 分类条紧贴顶栏下沿，背景/圆角与顶栏一致，两者视觉上合并成一条 */
  .app-rail-mobile {
    top: var(--app-topbar-height) !important;
    border-top: 0;
  }

  .home-page {
    padding-left: 0 !important;
  }

  .sb-content {
    padding: 12px 12px 132px;
  }

  .sb-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  /* 双列卡片太窄放不下一整行「玩家数 + 操作按钮」，让按钮换行到自己一行并稍微缩小 */
  .sb-card-bottom-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* 阻止左侧信息被压缩成 0 宽（否则文字画在按钮底下而不触发换行） */
  .sb-card-bottom-left {
    min-width: fit-content;
  }

  .sb-card-actions {
    margin-left: auto;
    gap: 4px;
  }

  .sb-card-action-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px;
  }

  .sb-card-action-main {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    flex-basis: 42px;
  }

  .sb-add-row {
    flex-direction: column;
    align-items: stretch;
  }

  .sb-input.wide,
  .sb-input[label="地址（IP 或域名）"] {
    width: 100%;
  }
}