/* ==================================================================
 * 移动端设计规范（对标大厂 App）
 * ------------------------------------------------------------------
 * 这一层整体覆盖前面的样式。规范来源是支付宝 / 微信 / 美团 / 淘宝
 * 这类 App 的移动端设计语言，核心是「一套栅格 + 一套字号 + 列表化」。
 *
 * 之前的问题：
 *   ① 页面内边距 22px，390px 屏被吃掉 44px，内容只剩 346px；
 *   ② 表格每一行都是独立的带边框圆角卡片，行与行之间还有 6px 空隙，
 *      这是「网页卡片」的做法，不是 App 的做法；
 *   ③ 字号有 11.5 / 12 / 12.5 / 13 / 14 / 15 六种，没人能看出区别；
 *   ④ 圆角 13px + 1px 实边框，视觉噪音大；
 *   ⑤ 顶部 66px 标题栏 + 44px 标签条 = 110px 的头部，占掉 13% 屏幕。
 *
 * 规范要点：
 *   栅格：4px 基准，只用 4 / 8 / 12 / 16 / 20 / 24
 *   字号：10 角标 · 11 说明 · 12 次要 · 13 正文小 · 14 正文 · 15 列表标题 · 17 页面标题
 *   字号收敛，不允许再出现 11.5 / 12.5 / 13.5 / 15.5 这种半像素值
 *   圆角：卡片 10 · 输入框/主按钮 8 · 次按钮 6 · 标签 4 或全圆
 *   控件：输入框 44 · 主按钮 44 · 次按钮 32 · 标签 26
 *   列表：一张卡片装所有行，行之间 1px 细线，双行 item 高 64px
 * ================================================================== */

@media (max-width: 760px) {

  /* ---------- 设计令牌 ---------- */
  :root {
    --m-page-pad: 12px;        /* 页面左右内边距 */
    --m-gap: 8px;              /* 卡片之间 */
    --m-card-pad: 14px;        /* 卡片内边距 */
    --m-radius: 10px;          /* 卡片圆角 */
    --m-radius-ctl: 8px;       /* 控件圆角 */
    --m-hair: rgba(255, 255, 255, .07);   /* 分隔线 */
    --m-card: #0D1B2E;                    /* 卡片底色（比页面亮一档，不靠边框分层） */
    --m-card-2: #12233A;                  /* 卡片内的次级填充 */

    --m-fs-caption: 10px;
    --m-fs-hint: 11px;
    --m-fs-sub: 12px;
    --m-fs-body-s: 13px;
    --m-fs-body: 14px;
    --m-fs-title: 15px;
    --m-fs-page: 17px;
  }

  /* ---------- 页面容器 ---------- */
  /* 22px 改成 12px：这一条直接多给内容 20px 宽 */
  .layui-tab-item.view,
  .layui-tab-item {
    padding: var(--m-page-pad) !important;
  }
  .card { margin-bottom: var(--m-gap) !important; }
  .card:last-child { margin-bottom: 0 !important; }

  /* ---------- 顶部栏：66 → 48，标题 17px ---------- */
  :root { --app-header: 50px; }
  .main-layout-header {
    height: 50px !important;
    padding: 0 var(--m-page-pad) !important;
    gap: 8px !important;
  }
  .main-layout-header .brand-text,
  .main-layout-header .site-name { font-size: var(--m-fs-page) !important; font-weight: 600 !important; }
  .user-chip { height: 34px !important; padding: 0 10px 0 4px !important; font-size: var(--m-fs-sub) !important; }
  .sidebar-toggle-button,
  .modern-logout { width: 36px !important; height: 36px !important; border-radius: var(--m-radius-ctl) !important; }
  .balance-refresh { width: 34px !important; height: 34px !important; border-radius: var(--m-radius-ctl) !important; }

  /* ---------- 标签条：做成 App 的分段导航 ---------- */
  .layui-tab-title {
    height: 40px !important;
    padding: 5px var(--m-page-pad) !important;
    gap: 4px;
    background: #0A1727 !important;
    border-bottom: 1px solid var(--m-hair);
  }
  .layui-tab-title li {
    height: 30px !important;
    min-width: 0 !important;
    padding: 0 11px !important;
    border-radius: 15px !important;
    font-size: var(--m-fs-sub) !important;
    font-weight: 500 !important;
    line-height: 30px !important;
  }
  .layui-tab-title li.layui-this {
    background: rgba(57, 167, 255, .14) !important;
    color: var(--app-primary) !important;
    font-weight: 600 !important;
  }
  .layui-tab-title li.layui-this::after { display: none !important; }

  /* ---------- 卡片：靠底色分层，不靠粗边框 ---------- */
  .card {
    padding: var(--m-card-pad) !important;
    border-radius: var(--m-radius) !important;
    border: 1px solid var(--m-hair) !important;
    background: var(--m-card) !important;
    box-shadow: none !important;
  }
  .card > h3,
  .card > .card-title {
    margin: 0 0 12px !important;
    font-size: var(--m-fs-title) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
  }
  .card > h3::before,
  .card > .card-title::before { width: 3px !important; height: 13px !important; }

  /* ---------- 页面标题 ---------- */
  .page-head { margin: 0 0 12px !important; }
  .page-head h2 {
    font-size: var(--m-fs-page) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    margin: 0 0 4px !important;
  }
  .page-head p, .page-head .hint {
    font-size: var(--m-fs-sub) !important;
    line-height: 18px !important;
    color: var(--app-muted) !important;
  }

  /* ---------- 字号收敛：干掉半像素字号 ---------- */
  .hint, .field > label, .field-label { font-size: var(--m-fs-sub) !important; }
  .field > label, .field-label { font-weight: 500 !important; color: var(--app-muted) !important; }
  .hint { line-height: 17px !important; }
  small, .text-sm { font-size: var(--m-fs-hint) !important; }

  /* ================================================================
   * 列表：表格 → 一张卡片 + 细线分隔
   * ----------------------------------------------------------------
   * 大厂 App 里列表长这样：
   *   ┌─────────────────────────────────┐
   *   │ 企业微信                20.00 元 │
   *   │ 2516@86 · 中国          [对接]  │
   *   ├─────────────────────────────────┤  ← 1px 细线（不是卡片间隙）
   *   │ 微信[发码]              80.00 元 │
   *   │ 1238@86 · 中国          [对接]  │
   *   └─────────────────────────────────┘
   * 而不是每行一个带边框的小方块。
   * ================================================================ */
  .scroll-x,
  .table-scroll {
    overflow-x: visible !important;
    border-radius: var(--m-radius);
    background: var(--m-card);
    border: 1px solid var(--m-hair);
    overflow: hidden;
  }
  /* 空表格不用画卡片 */
  .scroll-x:has(table.dt tbody td.empty) {
    background: transparent;
    border: 0;
  }

  table.dt {
    min-width: 0 !important;
    width: 100%;
    display: block;
    font-size: var(--m-fs-body-s);
    background: transparent;
  }
  table.dt thead { display: none; }
  table.dt tbody { display: block; }

  table.dt tbody tr {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    min-height: 64px;
    margin: 0 !important;
    padding: 11px 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  /* 行间细线：贴顶、左右贴边（大厂习惯是整行通线） */
  table.dt tbody tr + tr::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--m-hair);
  }
  /* 有标题/单价的行才需要断行占位 */
  table.dt tbody tr:has(td[data-mb="title"])::after,
  table.dt tbody tr:has(td[data-mb="price"])::after {
    content: '';
    order: 15;
    flex-basis: 100%;
    height: 0;
  }

  table.dt tbody td {
    display: block;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    min-width: 0;
    background: transparent !important;
  }
  table.dt tbody td::before { content: none !important; }

  /* 第一行：主标题 + 数值 */
  table.dt tbody td[data-mb="title"] {
    order: 10;
    flex: 1 1 auto;
    font-size: var(--m-fs-title);
    font-weight: 500;
    line-height: 21px;
    color: var(--app-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap !important;
  }
  table.dt tbody td[data-mb="price"] {
    order: 10;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: var(--m-fs-title);
    font-weight: 600;
    line-height: 21px;
    color: var(--app-primary);
    font-variant-numeric: tabular-nums;
  }
  /* 第二行：次要信息 + 操作 */
  table.dt tbody td[data-mb="meta"] {
    order: 20;
    flex: 0 0 auto;
    font-size: var(--m-fs-sub);
    line-height: 18px;
    color: var(--app-muted);
  }
  table.dt tbody td[data-mb="meta"] + td[data-mb="meta"]::before {
    content: '·';
    margin-right: 5px;
    opacity: .45;
  }
  table.dt tbody td[data-mb="meta"] .stock-badge { font-size: var(--m-fs-sub); }
  table.dt tbody td[data-mb="meta"] .stock-badge.is-dead {
    padding: 0 6px;
    line-height: 17px;
    border-radius: 4px;
    font-size: var(--m-fs-hint);
  }

  table.dt tbody td[data-mb="act"] {
    order: 30;
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
  }
  table.dt tbody td[data-mb="act"]:first-of-type { margin-left: auto; }
  table.dt tbody td[data-mb="act"] .btn {
    height: 30px;
    min-height: 30px;
    padding: 0 12px;
    font-size: var(--m-fs-sub);
    border-radius: 6px;
  }
  table.dt tbody td[data-mb="hide"] { display: none !important; }

  table.dt tbody td.empty {
    display: block;
    padding: 32px 0 !important;
    text-align: center !important;
    font-size: var(--m-fs-body-s);
    color: var(--app-muted);
  }

  /* ---------- 表单控件 ---------- */
  /* 字号必须是 16px：iOS Safari 在聚焦 font-size < 16px 的输入框时会
     自动放大整个页面，用户点一下输入框页面就跳一下，非常难受。
     这是硬指标，不能为了「字小一点」把它压到 14px。 */
  .input, .select, input.input, select.select, textarea.input,
  input[type="text"], input[type="number"], input[type="password"],
  input[type="tel"], input[type="search"], textarea {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    border-radius: var(--m-radius-ctl) !important;
    border: 1px solid var(--m-hair) !important;
    background: var(--m-card-2) !important;
  }
  textarea.input, textarea { height: auto !important; min-height: 80px !important; padding: 10px 12px !important; }
  .field { margin-bottom: 12px !important; }
  .field:last-child { margin-bottom: 0 !important; }
  .field > label, .field-label { margin-bottom: 6px !important; }

  /* ---------- 点击响应 ----------
     touch-action: manipulation 去掉移动端浏览器那 300ms 的点击延迟，
     顺便禁掉双击缩放，按钮按下去是「立刻」响应的。 */
  .btn, button, a, .country-pill, .layui-tab-title li, .combo-btn,
  .combo-item, .check-lab, label, [role="button"] {
    touch-action: manipulation;
  }
  /* 去掉移动端点击时那层灰色高亮方块（每个系统颜色还不一样） */
  .btn, button, a, .country-pill, .layui-tab-title li, .combo-btn, .combo-item {
    -webkit-tap-highlight-color: transparent;
  }

  /* ---------- 按钮 ---------- */
  .btn {
    height: 44px;
    min-height: 44px;
    padding: 0 18px;
    font-size: var(--m-fs-title);
    font-weight: 500;
    border-radius: var(--m-radius-ctl);
  }
  .btn-lg {
    height: 46px;
    min-height: 46px;
    font-size: var(--m-fs-title);
    border-radius: var(--m-radius-ctl);
  }
  .btn-sm {
    height: 32px;
    min-height: 32px;
    padding: 0 12px;
    font-size: var(--m-fs-sub);
    font-weight: 500;
    border-radius: 6px;
  }
  /* 相邻可点元素之间至少留 8px，否则手指会点错 */
  .btn-row { gap: 8px !important; }
  .btn-ghost {
    background: var(--m-card-2) !important;
    border: 1px solid var(--m-hair) !important;
  }

  /* ---------- 国家标签：做成 App 的 chip ---------- */
  .country-strip { gap: 8px !important; padding: 2px 0 6px !important; }
  .country-pill {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: var(--m-fs-sub) !important;
    font-weight: 500 !important;
    border-radius: 15px !important;
    border: 1px solid var(--m-hair) !important;
    background: var(--m-card-2) !important;
  }
  .country-pill.is-on {
    border-color: rgba(57, 167, 255, .5) !important;
    background: rgba(57, 167, 255, .14) !important;
    color: var(--app-primary) !important;
    font-weight: 600 !important;
  }
  .country-pill .cp-num { font-size: var(--m-fs-hint) !important; opacity: .7; }

  /* ---------- 复选框一行 ---------- */
  .check-lab {
    min-height: 44px !important;
    font-size: var(--m-fs-body) !important;
    padding: 0 4px !important;
  }
  .check-lab input { width: 18px !important; height: 18px !important; }

  /* ---------- 收码页 ---------- */
  .pick-actions {
    gap: 12px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .pick-price-box { min-width: 0; flex: 1 1 auto; }
  .pick-price { font-size: 20px !important; font-weight: 600 !important; }
  .pick-price-lab { font-size: var(--m-fs-hint) !important; }
  .pick-go {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 96px;
    height: 44px !important;
    border-radius: var(--m-radius-ctl) !important;
    font-size: var(--m-fs-title) !important;
  }
  .combo-btn {
    min-height: 44px !important;
    border-radius: var(--m-radius-ctl) !important;
    padding: 0 12px !important;
  }
  .combo-btn .combo-text { font-size: var(--m-fs-body) !important; }
  .combo-btn .combo-sub { font-size: var(--m-fs-hint) !important; }
  .combo-pop { border-radius: var(--m-radius) var(--m-radius) 0 0 !important; }
  .combo-item { min-height: 60px !important; padding: 10px 14px !important; }
  .combo-item .ci-name { font-size: var(--m-fs-title) !important; }
  .combo-item .ci-sub { font-size: var(--m-fs-sub) !important; }
  .combo-item .ci-price { font-size: var(--m-fs-title) !important; }

  /* 号码 / 验证码展示 */
  .code-block .lab { font-size: var(--m-fs-hint) !important; letter-spacing: .04em !important; }
  .code-block .val { font-size: 20px !important; }
  .code-block .val.is-code { font-size: 26px !important; letter-spacing: .06em !important; }
  .code-block .val.is-empty { font-size: var(--m-fs-body) !important; }
  .code-hero { padding: var(--m-card-pad) !important; gap: 12px !important; }

  /* ---------- 底部安全区 ---------- */
  .layui-tab-item.view { padding-bottom: calc(var(--m-page-pad) + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- 超窄屏（320/360）再收一档 ---------- */
@media (max-width: 360px) {
  :root {
    --m-page-pad: 10px;
    --m-card-pad: 12px;
    --m-fs-page: 16px;
  }
  table.dt tbody tr { padding: 10px 12px !important; min-height: 60px; }
  table.dt tbody td[data-mb="title"],
  table.dt tbody td[data-mb="price"] { font-size: var(--m-fs-body) !important; }
  .btn { padding: 0 14px; }
}

/* ==================================================================
 * 特异性补丁
 * ------------------------------------------------------------------
 * CSS 是按「特异性 + 加载顺序」决定胜负的，不是只看谁写在后面。
 * 下面这些选择器在 style.css / theme.css 里的写法比我原来的选择器更具体
 * （多一个类、或者多一层后代、或者带 !important），所以必须用同等或更高
 * 特异性的选择器才能盖住，光靠 mobile.css 排在后面没用。
 *
 * 被压住的：
 *   .card .btn            (0,2,0)  height:36px   压住 .btn (0,1,0)
 *   .layui-tab > .layui-tab-title (0,2,0) + !important  压住 .layui-tab-title
 *   .layui-tab-title li   高度来自别处的 line-height
 * ================================================================== */
@media (max-width: 760px) {

  /* 标签条：必须连 --app-tabs 一起改，因为它的高度和内容区高度都靠这个变量算 */
  :root { --app-tabs: 40px; }
  .layui-tab > .layui-tab-title,
  .layui-tab-title {
    height: 40px !important;
    min-height: 40px !important;
    padding: 5px var(--m-page-pad) !important;
  }
  .layui-tab > .layui-tab-title li,
  .layui-tab-title li {
    height: 30px !important;
    min-height: 30px !important;
    line-height: 30px !important;
    padding: 0 11px !important;
    border-radius: 15px !important;
    font-size: var(--m-fs-sub) !important;
    font-weight: 500 !important;
  }
  .layui-tab-title li.layui-this { font-weight: 600 !important; }

  /* 卡片里的按钮：用 .card .btn 同等特异性夺回来 */
  .card .btn,
  .card button.btn,
  .card .btn:not(.btn-sm):not(.btn-lg) {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    font-size: var(--m-fs-title) !important;
    font-weight: 500 !important;
    border-radius: var(--m-radius-ctl) !important;
  }
  .card .btn-sm,
  .card button.btn-sm {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    font-size: var(--m-fs-sub) !important;
    border-radius: 6px !important;
  }
  .card .btn-lg,
  .card button.btn-lg {
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 20px !important;
    font-size: var(--m-fs-title) !important;
    border-radius: var(--m-radius-ctl) !important;
  }

  /* 列表行里的操作按钮更小一档（行内按钮不占 44px，否则行高撑到 80+） */
  table.dt tbody td[data-mb="act"] .btn,
  table.dt tbody td[data-mb="act"] .btn-sm {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: var(--m-fs-sub) !important;
    border-radius: 6px !important;
  }

  /* 页面内容区高度跟着 --app-tabs 走，这里确认一下 */
  .layui-tab-content { height: calc(100% - var(--app-tabs)) !important; }
}