/* ============================================================
   极光运动 · 移动端适配样式（≤768px）
   与各页面内联样式配合，统一手机 UI
   ============================================================ */

/* ---------- 全局滚动兜底（v5：放开横向，任何页面可上下/左右滚动） ---------- */
html, body {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-width: 100vw;
  height: auto !important;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: auto;
}
body { position: relative; }
/* 滚动兜底：任何容器不得拦截整页滚动，也不得撑爆视口 */
#app, .wrap, .layout, .main, .page-box, .content-box {
  overflow: visible !important;
  min-width: 0;
  max-width: 100vw;
  box-sizing: border-box;
}
/* 所有内容不超出视口宽度（溢出交给横向滚动，不挤压） */
img, video, canvas, table, pre, iframe { max-width: 100%; }
.el-table__inner-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.el-descriptions__label,
.el-descriptions__content {
  white-space: normal !important;
  word-break: break-all;
  height: auto !important;
}
.el-button span, .el-button { white-space: nowrap !important; }

/* 底部导航：桌面端隐藏 */
.m-tabbar { display: none; }

@media (max-width: 768px) {

  /* ---------- 全局 ---------- */
  body {
    background: #f0f2f7;
    -webkit-tap-highlight-color: transparent;
  }

  /* ---------- 顶部导航（两行自适应） ---------- */
  .topbar {
    padding: 6px 12px !important;
    min-height: 54px;
    height: auto !important;
    background: linear-gradient(135deg, #3b5bdb 0%, #2f9e8f 100%) !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    z-index: 300;
    box-shadow: 0 2px 10px rgba(59, 91, 219, 0.25);
    flex-wrap: wrap;
    row-gap: 4px;
    align-content: flex-start;
  }
  .topbar .brand { font-size: 15px !important; letter-spacing: .3px; white-space: nowrap; line-height: 1.3; }
  .topbar .right { gap: 5px !important; font-size: 12px !important; flex-wrap: wrap; line-height: 1.2; }
  .topbar .right > span,
  .topbar .right > a {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff !important;
    padding: 5px 10px;
    border-radius: 15px;
    white-space: nowrap;
    line-height: 1.2;
  }
  .topbar .right a:active { background: rgba(255, 255, 255, 0.3); }
  .topbar .right .tier-tag {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    margin-left: 0 !important;
    padding: 1px 6px;
    font-size: 11px !important;
  }
  .topbar .right .hide-m { display: none !important; }
  .topbar .right #logoutBtn { background: rgba(255, 77, 79, 0.85) !important; }

  /* ---------- 公告条 ---------- */
  .notice-bar {
    margin: 0 !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    border: 0;
  }

  /* ---------- 页面容器（顶栏两行时留足空间） ---------- */
  .wrap { margin: 12px auto !important; padding: 96px 10px 72px !important; }
  .layout { padding: 96px 10px 100px !important; }
  .main { min-height: calc(100vh - 180px) !important; }

  /* ---------- 移动端底部导航（固定） ---------- */
  .m-tabbar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 300;
    background: #fff;
    border-top: 1px solid #e7eaf2;
    box-shadow: 0 -2px 10px rgba(31, 41, 55, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .m-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0 12px;
    font-size: 12px;
    color: #8a8f99;
    text-decoration: none;
    font-weight: 400;
    -webkit-tap-highlight-color: transparent;
  }
  .m-tab:active { background: #f4f6fb; }
  .m-tab.active { color: #3b5bdb; font-weight: 600; }

  /* ---------- 卡片 ---------- */
  .el-card {
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(31, 41, 55, 0.06) !important;
    margin-bottom: 12px;
  }
  .el-card__header { padding: 12px 14px !important; }
  .el-card__body { padding: 12px 14px !important; }
  .el-card__header .el-text { font-size: 15px; }

  /* ---------- 统计卡片（个人中心） ---------- */
  .stat-card { padding: 10px 4px; }
  .stat-card .num { font-size: 20px !important; }
  .stat-card .lbl { font-size: 12px !important; }

  /* ---------- 表格 ---------- */
  .el-table { font-size: 12px !important; }
  .el-table th.el-table__cell { padding: 8px 2px !important; }
  .el-table td.el-table__cell { padding: 8px 2px !important; }
  .el-table .cell { padding: 0 6px !important; }
  .el-table__inner-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- 弹窗 ---------- */
  .el-dialog { border-radius: 16px !important; width: 94vw !important; max-width: 94vw !important; }
  .el-dialog__header { padding: 14px 16px 6px !important; }
  .el-dialog__body { padding: 12px 16px !important; }
  .el-dialog__footer { padding: 8px 16px 14px !important; }
  .el-dialog__title { font-size: 16px !important; }

  /* ---------- 表单控件 ---------- */
  .el-input__wrapper, .el-textarea__inner, .el-select__wrapper { min-height: 40px !important; }
  .el-button { min-height: 38px; }
  .el-button--small { min-height: 32px; }
  .el-input-number { height: 40px !important; }
  .el-form-item__label { font-size: 13px !important; }

  /* ---------- 分页 ---------- */
  .el-pagination { flex-wrap: wrap; justify-content: center; gap: 4px; }
  .el-pagination__sizes { display: none !important; }

  /* ---------- 学习·鲸鱼 商品卡 ---------- */
  .prod-card, .whale-card { width: calc(50% - 6px) !important; }
  .prod-card .prod-name { height: auto !important; min-height: 38px; }
  .whale-card { min-width: 0 !important; }
  .el-tabs__nav-wrap { overflow-x: auto; }
  .el-tabs__nav { flex-wrap: nowrap; }

  /* ---------- 工单聊天 ---------- */
  .msg .bubble { max-width: 86% !important; font-size: 14px !important; }
  .chat-foot { position: static !important; }
  .chat-panel { height: calc(100vh - 260px) !important; }

  /* ---------- 邀请码 ---------- */
  .invite-code { font-size: 30px !important; letter-spacing: 4px; }

  /* ---------- 我的下级：移动端卡片视图（替代横向滚动表格） ---------- */
  .dl-table { display: none !important; }
  .dl-cards { display: block !important; }
  .dl-card {
    background: #fff; border: 1px solid #e7eaf2; border-radius: 12px;
    padding: 12px; margin-bottom: 10px;
  }
  .dl-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .dl-name { font-size: 15px; font-weight: 600; color: #1a1b1c; }
  .dl-card-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
  .dl-lbl { width: 48px; color: #8a8f99; flex-shrink: 0; }
  .dl-money { font-weight: 600; color: #1a1b1c; }
  .dl-card-foot { display: flex; align-items: center; gap: 8px; }

  /* ---------- 水印字号微调（清晰且不挡操作） ---------- */
  .wm-overlay { font-size: 13px !important; }

  /* ---------- 阳光跑订单：移动端表格视图（源台样式：一行一条） ---------- */
  .pc-orders { display: none !important; }
  .order-cards { display: block !important; }
  .m-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e7eaf2;
    border-radius: 10px;
    background: #fff;
  }
  .m-order-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: 11.5px;
  }
  .m-order-table th {
    background: #f6f8fc;
    color: #4a5568;
    font-weight: 600;
    text-align: left;
    padding: 8px 6px;
    white-space: nowrap;
    border-bottom: 1px solid #e7eaf2;
  }
  .m-order-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #f0f2f7;
    color: #1a1b1c;
    white-space: nowrap;
  }
  .m-order-table tr:last-child td { border-bottom: none; }
  .m-order-table .m-id { font-weight: 700; color: #3b5bdb; }
  .m-order-table .m-ops { display: flex; gap: 6px; align-items: center; }
  .m-order-table .m-ops .el-button { margin-left: 0; }
}