/* ==========================================================================
   手机端优化（2026-09-06）
   --------------------------------------------------------------------------
   手机端是底部导航形态，跟桌面端不是一套东西。这里只动确实碍事的地方：
   够不着的操作、堆成两行的页签、要滚到底才看得到的支付按钮、太小的点击目标。
   ========================================================================== */

@media (max-width: 768px) {

  /* ---- 密钥列表：表格换成卡片 ---------------------------------------
     9 列的表在 390px 下只看得见前两列，禁用/编辑/删除完全够不着。 */
  .console-key-table-wrap { display: none; }

  .console-key-card-list {
    display: grid;
    gap: var(--pangu-space-3);
    padding: var(--pangu-space-3);
  }

  .console-key-card {
    display: grid;
    gap: var(--pangu-space-3);
    border: 1px solid var(--pangu-border);
    border-radius: var(--pangu-radius-md);
    padding: var(--pangu-space-4);
    background: var(--pangu-surface);
  }

  .console-key-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pangu-space-2);
  }

  .console-key-card-top .console-key-name {
    min-width: 0;
    overflow: hidden;
    font-size: var(--pangu-fs-md);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .console-key-card-secret {
    display: flex;
    align-items: center;
    gap: var(--pangu-space-2);
    min-width: 0;
    border: 1px solid var(--pangu-border);
    border-radius: var(--pangu-radius-sm);
    padding: 6px 6px 6px 10px;
    background: var(--pangu-surface-2, rgba(148, 163, 184, 0.08));
  }

  .console-key-card-secret .console-key-preview {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: var(--pangu-fs-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .console-key-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pangu-space-2);
    margin: 0;
  }

  .console-key-card-meta dt {
    color: var(--pangu-text-3, #94a3b8);
    font-size: 11px;
  }

  .console-key-card-meta dd {
    margin: 2px 0 0;
    font-family: var(--font-mono);
    font-size: var(--pangu-fs-sm);
    font-weight: 700;
  }

  .console-key-card-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--pangu-space-2);
  }

  /* 手机上按钮至少 36px 高，好点 */
  .console-key-card-actions .pangu-btn { height: 36px; }

  /* ---- 购买中心 ---------------------------------------------------- */
  /* 页签的三等分在 legacy 那条带 !important 的规则里（已改成 3 列），
     这里只管把长标题截断，别把格子撑破 */
  .console-purchase .console-purchase-tab {
    min-width: 0;
    font-size: var(--pangu-fs-xs);
  }

  .console-purchase .console-purchase-tab > span:not(.material-symbols-outlined) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 「立即支付」原来在页面最底下，要滚很久。钉在底部导航上方。 */
  .console-purchase #paymentSubmitButton {
    position: sticky;
    bottom: calc(var(--portal-bottomnav-height, 64px) + var(--pangu-space-2));
    z-index: 3;
  }

  /* ---- 分组监控 ------------------------------------------------------
     平台卡里那排渠道卡是 flex nowrap + 每张固定 310px，390px 下要横着
     刷 1956px 才能看完 6 张。手机上改成一张一行，纵向滚。
     （桌面端的圆角/宽度是上一轮刚定的，这里只在 ≤768 生效。） */
  .channel-monitor-channels-row {
    flex-wrap: wrap;
    gap: var(--pangu-space-3);
    overflow-x: visible;
  }

  .channel-monitor-channels-row > .channel-monitor-node-card {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* 模型筛选的小药丸只有 25px 高，手指按不准 */
  .channel-monitor-model-chips {
    flex-wrap: wrap;
    gap: 6px;
  }

  .channel-monitor-model-chips button,
  .channel-monitor-models-area > header button:not(.pangu-btn) {
    min-height: 32px;
  }

  /* 一键配置的步骤条：三步横着排要滑，手机上换行 */
  .console-su-steps {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* ---- 使用记录：表格换成卡片 ----------------------------------------
     8 列 1094px，手机上横滑两屏才看得到「费用」；只留五列的话每格又都是
     省略号（"$0.01…"）。跟密钥、订单一样出卡片，字段比表格还全。 */
  .console-usage-scroll-wrap { display: none; }

  /* 「列设置」只管表格，手机上表格是收起来的，留着这个按钮点了没反应 */
  .console-usage-column-settings { display: none; }

  .console-usage-card-list {
    display: grid;
    gap: var(--pangu-space-3);
    padding: var(--pangu-space-3);
  }

  .console-usage-card {
    display: grid;
    gap: var(--pangu-space-3);
    border: 1px solid var(--pangu-border);
    border-radius: var(--pangu-radius-md);
    padding: var(--pangu-space-4);
    background: var(--pangu-surface);
  }

  .console-usage-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pangu-space-2);
    min-width: 0;
  }

  .console-usage-card-top .console-usage-model-wrap { min-width: 0; }

  .console-usage-card-top .console-usage-model {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .console-usage-card-top .console-usage-cost {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--pangu-fs-md);
    font-weight: 750;
  }

  .console-usage-card-sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pangu-space-2);
    color: var(--pangu-text-3, #94a3b8);
    font-size: var(--pangu-fs-xs);
  }

  .console-usage-card-sub .console-usage-key-name {
    min-width: 0;
    overflow: hidden;
    color: var(--pangu-text-2);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .console-usage-card-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pangu-space-2) var(--pangu-space-3);
    margin: 0;
  }

  .console-usage-card-meta dt {
    color: var(--pangu-text-3, #94a3b8);
    font-size: 11px;
  }

  .console-usage-card-meta dd {
    margin: 2px 0 0;
    font-family: var(--font-mono);
    font-size: var(--pangu-fs-sm);
    font-weight: 700;
  }

  .console-usage-card-meta dd.warn { color: var(--pangu-warning, #d97706); }
  .console-usage-card-meta dd.bad { color: var(--pangu-danger, #dc2626); }

  /* ---- 我的订单：卡片被桌面的两列网格拆了 ------------------------------
     .console-order-item 在桌面是「图标列 + 内容列」的两列网格，
     手机卡片里那三块（上排/下排/按钮）被塞进这两个格子，结果状态药丸
     被压成竖排的「已\n完\n成」，取消订单整个跑到卡片外面（x = -63）。
     手机上改成一列上下堆。 */
  .console-orders-card-list .console-order-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pangu-space-3);
  }

  .console-orders-card-list .console-order-item-top {
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pangu-space-2);
    width: 100%;
    min-width: 0;
  }

  .console-orders-card-list .console-order-type-cell {
    min-width: 0;
  }

  .console-orders-card-list .console-order-status-badge {
    flex: 0 0 auto;
    align-self: flex-start;
    height: auto;
    white-space: nowrap;
  }

  .console-orders-card-list .console-order-item-bottom {
    align-items: center;
    justify-content: space-between;
    gap: var(--pangu-space-2);
    width: 100%;
    min-width: 0;
  }

  .console-orders-card-list .console-order-actions {
    justify-content: flex-end;
    gap: var(--pangu-space-2);
    width: 100%;
  }

  /* ---- 点击目标太小的 ---- */
  #profileAvatarDeleteButton,
  .console-su-notice-toggle {
    min-height: 32px;
  }
}