/* ╔═══════════════════════════════════════════════════════════════╗
   PERPETUA Mobile Override — 套在 style.css 之後
   原則：中文不斷字、表格滑動、觸控區夠大、字級夠讀
   不改 desktop（>=768px）行為
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────
   1. 全域：中文斷字邏輯
   ───────────────────────────────────────── */
html {
  word-break: keep-all;            /* 中文以「詞」為單位、不一字一行 */
  overflow-wrap: anywhere;          /* 但長英文字串該斷就斷 */
  line-break: strict;
  -webkit-text-size-adjust: 100%;   /* 防 iOS 旋轉時放大 */
}
h1, h2, h3, h4, h5, h6,
button, .btn, a.btn,
th, .nowrap, .num {
  word-break: keep-all;
  overflow-wrap: normal;
}
.nowrap { white-space: nowrap; }

/* 流體媒體 */
img, video, iframe, svg, canvas { max-width: 100%; height: auto; }
pre { white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; }
code { word-break: break-all; overflow-wrap: anywhere; }

/* 文字溢出救援：卡片、容器永遠不撐大父框 */
.card, .panel, .info-block, .step-card, .help-step,
.hero-card, .stat-card, .feature-card,
section, article, aside, main > div {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
/* 把整頁 html+body 鎖在 viewport 內，沒包 .table-scroll 的 table 也不會撐爆 */
html, body { overflow-x: hidden; max-width: 100vw; }
.container, .wrap { max-width: 100%; }

/* ─────────────────────────────────────────
   2. 表格通用：自動橫向 scroll wrapper（只在手機生效）
   配合 base.html 的 JS 自動包 .table-scroll
   桌面（>=769px）保持原生：不撐 min-width、不蓋 gradient mask、
   避免在 dashboard 把 bf-row-bottom 的 grid 推爆 + 蓋掉表格文字。
   ───────────────────────────────────────── */
@media (max-width: 768px) {
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin-bottom: 12px;
    /* 視覺提示：右側淡邊提示可滑 */
    background:
      linear-gradient(to right, var(--bg-elev, #fff) 30%, transparent),
      linear-gradient(to left, var(--bg-elev, #fff) 30%, transparent) 100% 0,
      linear-gradient(to right, rgba(0,0,0,.06), transparent),
      linear-gradient(to left, rgba(0,0,0,.06), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .table-scroll table {
    min-width: max-content;
    margin: 0;
  }
  .table-scroll th { white-space: nowrap; }
  /* td 預設可換行；標 .nowrap 或 .num 才強制不換行 */
  .table-scroll td.nowrap, .table-scroll td.num { white-space: nowrap; }
}
/* admin stack-mode (.responsive-table, .card table @ 640px) 不受影響 */
@media (max-width: 640px) {
  .table-scroll table.responsive-table,
  .card .table-scroll table { min-width: 0; }
}

/* 數字欄位永遠不換行 */
td.num, th.num,
td[class*="amount"], td[class*="usdt"], td[class*="pnl"] {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────
   3. 手機（≤640px）佈局調整
   ───────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.55; }
  h1 { font-size: 24px; line-height: 1.3; }
  h2 { font-size: 20px; line-height: 1.35; }
  h3 { font-size: 17px; }

  /* 觸控區 ≥ 44px、避免 iOS 縮放 */
  button, .btn, a.btn,
  input[type=button], input[type=submit] {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 15px;
  }
  input, select, textarea {
    font-size: 16px;          /* 低於 16 iOS Safari 會自動 zoom */
    min-height: 44px;
    padding: 10px 12px;
  }
  textarea { min-height: 88px; }

  /* main / container 留白統一 */
  main { padding-left: 0; padding-right: 0; }
  .container, .wrap, .panel-wrap, .auth-split .form-side {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* 卡片 / KPI / Grid 一律 1 column */
  .cards, .kpi-row, .grid-2, .grid-3, .grid-4,
  .row, .row-2col, .two-col, .feature-grid,
  .hero-grid, .stat-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .cards > *, .kpi-row > *, .row-2col > *,
  .row > *, .hero-grid > * { width: 100%; max-width: 100%; }

  /* 後台 sidebar 折疊 */
  .admin-shell { grid-template-columns: 1fr !important; }
  .admin-sidebar {
    position: sticky;
    top: 56px;
    z-index: 40;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .admin-sidebar nav {
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 8px 12px;
    gap: 6px;
  }
  .admin-sidebar nav a { flex-shrink: 0; padding: 8px 12px; font-size: 14px; }

  /* 表單 row：label + input 改 stacked */
  .form-row, .field-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .form-row label, .field-row label { margin-bottom: 6px; }

  /* 過寬元件強制收 */
  .panel, .card, .info-block, section {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .panel { padding: 16px !important; }

  /* 標題列：圖片 + 文字 容易塞爆，改 stack */
  .hero-grid, .landing-hero-grid { gap: 24px; }

  /* 程式碼區塊在小螢幕 wrap、不橫向 */
  pre, .codeblock { font-size: 13px; padding: 12px; }

  /* footer 字級 */
  .site-foot { font-size: 13px; padding: 24px 16px; }
  .site-foot .inner { flex-direction: column; gap: 6px; text-align: center; }

  /* 防止 sticky / fixed 區塊蓋住 main */
  main { padding-bottom: 80px; }

  /* 對話泡 / 訊息 */
  .alert, .notice, .toast { font-size: 14px; padding: 10px 12px; }
}

/* ─────────────────────────────────────────
   4. 超窄螢幕 (≤380px) — iPhone SE / mini
   ───────────────────────────────────────── */
@media (max-width: 380px) {
  body { font-size: 14px; }
  h1 { font-size: 22px; }
  .container, .wrap { padding-left: 12px !important; padding-right: 12px !important; }
  .topbar .logo { font-size: 14px !important; letter-spacing: .18em !important; }
  .panel { padding: 12px !important; }
  .table-scroll th, .table-scroll td { padding: 6px 8px !important; font-size: 13px; }
}

/* ─────────────────────────────────────────
   5. Help / 文件頁 — 圖片置中、不超寬
   ───────────────────────────────────────── */
.help-shot img, .help-figure img { max-width: 100%; height: auto; }

@media (max-width: 640px) {
  .help-shot, .help-figure { margin-left: 0; margin-right: 0; }
  .step-card, .help-step { padding: 16px !important; }
}

/* ─────────────────────────────────────────
   6. Lightbox 已存在於 base.html — 確保手機可關
   ───────────────────────────────────────── */
.lightbox.open { padding: 16px; }
.lightbox img { max-width: 100%; max-height: 90vh; }
.lightbox-close { top: 12px; right: 12px; width: 44px; height: 44px; }

/* ─────────────────────────────────────────
   7. 全域救援：所有 standalone landing 頁的 nav 按鈕
   help_*.html / lending.html / home.html / pricing.html 各自有 .btn-nav / .btn-nav-cta
   防止「登入」變「登/入」字直立
   ───────────────────────────────────────── */
.btn-nav, .btn-nav-cta, a.btn-nav, a.btn-nav-cta {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  display: inline-flex !important;
  align-items: center;
}
@media (max-width: 480px) {
  .btn-nav, .btn-nav-cta, a.btn-nav, a.btn-nav-cta {
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    height: auto !important;
    min-height: 36px !important;
  }
  /* standalone landing 頁 nav 整體 */
  nav { padding: 0 16px !important; gap: 8px !important; }
  nav .logo { font-size: 15px !important; letter-spacing: .15em !important; }
}

/* ─────────────────────────────────────────
   8. 教學頁 cross-nav（全頁通用、手機/桌機都顯示）
   light 預設（base.html 系統）；dark 用 [data-theme=dark]
   ───────────────────────────────────────── */
.help-cross-nav {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  max-width: 820px; margin: 24px auto;
  padding: 14px 18px;
  background: var(--card-bg, #fbf4e0);
  border: 1px solid var(--card-border, #e8d7a7);
  border-radius: 10px;
}
.help-cross-label {
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-3, #3c4049); font-weight: 700; margin-right: 8px;
}
.help-cross-nav a {
  padding: 7px 14px;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--card-border, #e8d7a7);
  border-radius: 999px;
  color: var(--ink, #0f0f14);
  font-size: 13px; font-weight: 600; text-decoration: none;
  white-space: nowrap; word-break: keep-all;
  transition: background .15s, border-color .15s, color .15s;
}
.help-cross-nav a:hover { background: var(--gold-soft, #fbf4e0); border-color: var(--gold, #9a6f18); color: var(--gold-ink, #7a5710); }
.help-cross-nav a.active { background: var(--gold-ink, #7a5710); border-color: var(--gold-ink, #7a5710); color: #fff; }

/* dark theme override（standalone help_bingx / help_bitfinex / lending） */
.help-cross-nav[data-theme="dark"] {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
}
.help-cross-nav[data-theme="dark"] .help-cross-label { color: rgba(255,255,255,.55); }
.help-cross-nav[data-theme="dark"] a {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
}
.help-cross-nav[data-theme="dark"] a:hover { background: rgba(232,181,84,.15); border-color: rgba(232,181,84,.4); color: #E8B554; }
.help-cross-nav[data-theme="dark"] a.active { background: rgba(232,181,84,.25); border-color: rgba(232,181,84,.6); color: #E8B554; }

@media (max-width: 640px) {
  .help-cross-nav { padding: 12px 14px; gap: 6px; margin: 12px 16px 20px; }
  .help-cross-label { width: 100%; margin-bottom: 4px; font-size: 11px; }
  .help-cross-nav a { padding: 6px 11px; font-size: 12.5px; }
}

/* ─────────────────────────────────────────
   9. 共用工具 class
   ───────────────────────────────────────── */
.mobile-hide { /* desktop 顯示 */ }
.mobile-only { display: none; }
@media (max-width: 640px) {
  .mobile-hide { display: none !important; }
  .mobile-only { display: initial; }
}