/* =====================================================================
   NX AI · Beta 驗收版 · 全站統一微調層
   =====================================================================
   目標:
   - 手機版第一優先，壓低元件比例、減少捲動
   - 桌機版微幅收斂，保持整體一致
   - 不新增功能，只針對 UI / Responsive / 排版 / 體驗 優化
   ===================================================================== */

/* ---------- 全站字體滑順度統一 ---------- */
html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/* =====================================================================
   TABLET · ≤ 900px
   ===================================================================== */
@media (max-width: 900px) {

  /* -------- Topbar 收縮 -------- */
  .dash-top {
    height: 56px !important;
    padding: 0 16px !important;
  }
  .dash-top .top-crumb .cur { font-size: 15px !important; }
  .dash-top .hamburger,
  .dash-top .back-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .dash-top .user-chip .avatar {
    width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
  }

  /* -------- 主內容區 padding 統一 -------- */
  .dash-content { padding: 18px 16px 32px !important; gap: 18px !important; }

  /* -------- 通用卡片圓角/內距 -------- */
  .wd-card,
  .sp-card,
  .mem-card,
  .card,
  .nx-card {
    border-radius: 14px !important;
  }
}

/* =====================================================================
   MOBILE · ≤ 640px  (核心優化區)
   ===================================================================== */
@media (max-width: 640px) {

  /* ========== 1. Topbar ========== */
  .dash-top {
    height: 52px !important;
    padding: 0 12px !important;
  }
  .dash-top .top-crumb { gap: 8px !important; }
  .dash-top .top-crumb .cur { font-size: 14.5px !important; }
  .dash-top .crumb-link,
  .dash-top .crumb-sep { display: none !important; }
  .dash-top .hamburger,
  .dash-top .back-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 9px !important;
  }
  .dash-top .hamburger svg,
  .dash-top .back-btn svg { width: 18px !important; height: 18px !important; }

  /* User chip 更輕巧 */
  .dash-top .user-chip { padding: 3px !important; border-radius: 999px !important; }
  .dash-top .user-chip .avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  /* ========== 2. 主內容區壓縮 ========== */
  .dash-content { padding: 14px 14px 28px !important; gap: 14px !important; }

  /* ========== 3. Sidebar drawer 內容收斂 ========== */
  .dash-side { padding: 18px 14px 16px !important; }
  .dash-side .side-brand { padding: 2px 6px 16px !important; margin-bottom: 12px !important; }
  .dash-side .side-brand .mark { width: 30px !important; height: 30px !important; font-size: 12px !important; }
  .dash-side .side-brand .name { font-size: 14px !important; }
  .dash-side .side-link {
    padding: 9px 10px !important;
    font-size: 13.5px !important;
  }
  .dash-side .side-eyebrow { font-size: 10px !important; padding: 0 8px 6px !important; }
  .dash-side .side-foot .side-foot-brand { font-size: 14px !important; }
  .dash-side .side-foot .side-foot-tag { font-size: 10px !important; }

  /* ========== 4. Hero Banner 統一壓低（各頁 hero） ========== */
  /* 提領/儲值/會員/關於等頁 hero 統一 padding/字級 */
  .wd-hero,
  .dep-hero,
  .about-hero,
  .mem-hero,
  .sp-hero {
    padding: 20px 18px !important;
    border-radius: 14px !important;
  }
  .wd-hero-title,
  .dep-hero-title,
  .about-hero-title,
  .mem-hero-title,
  .sp-hero-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
  }
  .wd-hero-sub,
  .dep-hero-sub,
  .about-hero-sub,
  .mem-hero-sub,
  .sp-hero-sub {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  /* 壓低 hero 裝飾圖層 */
  .wd-hero-art,
  .dep-hero-art,
  .about-hero-art,
  .sp-hero-art { display: none !important; }
  .wd-hero-key,
  .dep-hero-key { font-size: 10px !important; letter-spacing: 0.16em !important; }

  /* ========== 5. Section head 壓小 ========== */
  .wd-sect-head h2,
  .dep-sect-head h2,
  .mem-sect-head h2,
  .about-sect-head h2 {
    font-size: 15px !important;
  }
  .wd-sect-head .en,
  .dep-sect-head .en,
  .about-sect-head .en { display: none !important; }
  .wd-sect-head,
  .dep-sect-head { margin-top: 2px !important; }

  /* ========== 6. 通用卡片壓縮 padding ========== */
  .wd-card,
  .dep-card,
  .mem-card,
  .sp-card,
  .about-card {
    padding: 18px 16px 20px !important;
    border-radius: 14px !important;
  }
  .wd-card-head,
  .dep-card-head,
  .mem-card-head {
    margin-bottom: 14px !important;
    gap: 10px !important;
  }
  .wd-card-head .title,
  .dep-card-head .title {
    font-size: 14px !important;
    gap: 8px !important;
  }
  .wd-card-head .title .ico,
  .dep-card-head .title .ico {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
  }
  .wd-card-head .title .ico svg,
  .dep-card-head .title .ico svg { width: 14px !important; height: 14px !important; }
  .wd-card-head .bound-chip { font-size: 11px !important; padding: 3px 8px !important; }

  /* ========== 7. 銀行/表單資訊欄位 ========== */
  .wd-bank-field { padding: 8px 0 !important; }
  .wd-bank-field .label { font-size: 11.5px !important; }
  .wd-bank-field .value { font-size: 14.5px !important; }
  .wd-bank-field .value.mono { font-size: 13.5px !important; }

  /* ========== 8. 表單元件（提領/儲值/綁定/登入/註冊） ========== */
  .wd-form,
  .dep-form { gap: 14px !important; }
  .wd-field-label,
  .dep-field-label {
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }
  .wd-input,
  .dep-input {
    padding: 12px 14px !important;
    font-size: 18px !important;
  }
  .wd-input-suffix,
  .dep-input-suffix {
    padding: 0 14px !important;
    font-size: 11.5px !important;
  }
  .wd-input-wrap,
  .dep-input-wrap {
    border-radius: 10px !important;
    border-width: 1px !important;
  }
  .wd-help,
  .dep-help { font-size: 11.5px !important; }

  /* ========== 9. Submit / CTA 按鈕統一 ========== */
  .wd-submit,
  .dep-submit,
  .mem-submit {
    padding: 12px 18px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 14px -4px rgba(37, 99, 235, 0.36) !important;
  }
  .wd-submit svg,
  .dep-submit svg { width: 14px !important; height: 14px !important; }

  /* ========== 10. 注意事項卡（wd-notice） ========== */
  .wd-notice {
    padding: 16px 16px 18px !important;
    border-radius: 14px !important;
  }
  .wd-notice-head {
    margin-bottom: 10px !important;
    gap: 8px !important;
  }
  .wd-notice-head .title { font-size: 13px !important; }
  .wd-notice-head .en { display: none !important; }
  .wd-notice-head .ico { width: 24px !important; height: 24px !important; border-radius: 7px !important; }
  .wd-notice-head .ico svg { width: 12px !important; height: 12px !important; }
  .wd-notice ul { gap: 10px !important; }
  .wd-notice ul li {
    font-size: 13px !important;
    line-height: 1.7 !important;
    padding-left: 16px !important;
  }
  .wd-notice ul li::before { left: 2px !important; }

  /* ========== 11. Support page 額外收斂 ========== */
  .sp-content { padding: 14px 14px 28px !important; }
  .sp-hero { margin-bottom: 14px !important; }
  .sp-card { padding: 20px 18px 22px !important; }
  .sp-card-head { margin-bottom: 10px !important; gap: 10px !important; }
  .sp-card-icon { width: 36px !important; height: 36px !important; }
  .sp-card-title { font-size: 16px !important; }
  .sp-card-desc { font-size: 14px !important; line-height: 1.65 !important; }
  .sp-divider { margin: 16px 0 14px !important; }
  .sp-meta { margin-bottom: 18px !important; gap: 6px !important; }
  .sp-meta-label { font-size: 13px !important; }
  .sp-meta-days { font-size: 15.5px !important; }
  .sp-meta-time { font-size: 16.5px !important; }
  .sp-meta-note { font-size: 13px !important; }
  .sp-cta {
    width: 100% !important;
    padding: 12px 18px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  /* ========== 12. Dashboard 卡片壓縮 ========== */
  .card { padding: 16px !important; border-radius: 14px !important; }
  .card-energy .en-value .num { font-size: 36px !important; }
  .card-energy .en-value .unit { font-size: 12px !important; }
  .card-energy .en-label { font-size: 10.5px !important; margin-bottom: 8px !important; }
  .card-energy .en-sub { font-size: 12px !important; margin-top: 10px !important; }
  .card-today .t-value .num { font-size: 28px !important; }
  .card-today .t-value .plus { font-size: 16px !important; }
  .card-today .t-mini-bars { height: 32px !important; }
  .card-title { font-size: 12.5px !important; }
  .card-title .tag { font-size: 9.5px !important; padding: 2px 6px !important; }
  .pill-btn { height: 34px !important; padding: 0 12px !important; font-size: 12.5px !important; }

  /* Section head on dashboard */
  .section-head h2 { font-size: 14px !important; }
  .dash-hello h1 { font-size: 18px !important; }
  .dash-hello .today { font-size: 10.5px !important; }

  /* Quick actions */
  .quick-card { padding: 14px !important; gap: 12px !important; border-radius: 12px !important; }
  .quick-card .q-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  .quick-card .q-icon svg { width: 18px !important; height: 18px !important; }
  .quick-card .q-title { font-size: 13.5px !important; }
  .quick-card .q-desc { font-size: 11.5px !important; }

  /* AI Core hero cards on mobile — 壓低卡片高度讓一頁能看到更多 */
  .core-hero { min-height: 220px !important; border-radius: 16px !important; }
  .core-hero .hero-body { min-height: 220px !important; padding: 16px !important; padding-bottom: 16px !important; }
  .core-hero .hero-foot {
    padding-top: 12px !important;
    gap: 10px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  .core-hero .hero-key { font-size: 40px !important; left: 16px !important; right: 16px !important; }
  .core-hero .hero-title { font-size: 13px !important; }
  .core-hero .hero-title-wrap { top: 16px !important; left: 16px !important; }
  .core-hero .hero-title-tw { font-size: 10.5px !important; }
  .core-hero .hero-meta { gap: 16px !important; }
  .core-hero .hero-meta .m-item b { font-size: 14px !important; }
  .core-hero .hero-meta .m-item span { font-size: 9.5px !important; }
  .core-hero .hero-cta {
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    align-self: center !important;
  }

  /* Recent list on dashboard */
  .card-recent .r-icon { width: 28px !important; height: 28px !important; border-radius: 7px !important; }
  .card-recent .r-icon svg { width: 13px !important; height: 13px !important; }
  .card-recent .r-title { font-size: 12.5px !important; }
  .card-recent .r-sub { font-size: 11px !important; }
  .card-recent .r-time { font-size: 10.5px !important; }
  .card-recent .r-item { padding: 10px 2px !important; }

  /* Announcement */
  .card-anno .a-list { gap: 8px !important; }
  .card-anno .a-item { padding: 12px 14px !important; border-radius: 10px !important; }
  .card-anno .a-title { font-size: 12.5px !important; margin-bottom: 4px !important; }
  .card-anno .a-tag { font-size: 9.5px !important; padding: 2px 6px !important; margin-bottom: 6px !important; }
  .card-anno .a-meta { font-size: 10.5px !important; }

  /* ========== 13. Modal 手機優化 ========== */
  .wd-modal { padding: 16px !important; }
  .wd-modal-panel {
    padding: 22px 20px 20px !important;
    border-radius: 16px !important;
    max-width: 100% !important;
  }
  .wd-modal-title { font-size: 18px !important; margin-bottom: 14px !important; }
  .wd-modal-key { font-size: 10px !important; margin-bottom: 8px !important; }
  .wd-modal-fields {
    padding: 14px 14px !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    border-radius: 10px !important;
  }
  .wd-modal-field .label { font-size: 10px !important; }
  .wd-modal-field .value { font-size: 13.5px !important; }
  .wd-modal-field .value .amt { font-size: 17px !important; }
  .wd-modal-field .value .unit { font-size: 10px !important; }
  .wd-modal-actions { grid-template-columns: 1fr 1.4fr !important; gap: 8px !important; }
  .wd-btn { padding: 11px 14px !important; font-size: 13.5px !important; }
  .wd-modal-warn { font-size: 11.5px !important; padding: 8px 10px !important; margin-bottom: 14px !important; }

  /* Success modal */
  .wd-success-ring { width: 56px !important; height: 56px !important; margin-bottom: 14px !important; }
  .wd-success-ring svg { width: 26px !important; height: 26px !important; }
  .wd-success-title { font-size: 17px !important; }
  .wd-success-sub { font-size: 12.5px !important; }
  .wd-success-hint { font-size: 11.5px !important; margin-bottom: 16px !important; }
  .wd-success-status { padding: 10px 14px !important; margin-bottom: 12px !important; }
  .wd-success-status .label { font-size: 10px !important; }
  .wd-success-status .chip { font-size: 10.5px !important; padding: 3px 10px !important; }

  /* Empty card (未綁定提示) */
  .wd-empty-card { padding: 32px 20px 30px !important; border-radius: 14px !important; }
  .wd-empty-ico { width: 50px !important; height: 50px !important; margin-bottom: 14px !important; }
  .wd-empty-ico svg { width: 22px !important; height: 22px !important; }
  .wd-empty-title { font-size: 16px !important; margin-bottom: 6px !important; }
  .wd-empty-desc { font-size: 13px !important; margin-bottom: 18px !important; }
  .wd-empty-btn { padding: 11px 22px !important; font-size: 13.5px !important; }

  /* ========== 14. About page ========== */
  .about-content { padding: 14px 14px 28px !important; gap: 16px !important; }

  /* ========== 15. Member page ========== */
  .mem-content { padding: 14px 14px 28px !important; gap: 14px !important; }
  .mem-card { padding: 18px 16px !important; }

  /* ========== 16. Landing/index Hero collapse ========== */
  .nx-h1 { font-size: clamp(28px, 8vw, 42px) !important; }
  .nx-h2 { font-size: clamp(20px, 5.5vw, 26px) !important; }
  .nx-h3 { font-size: 16px !important; }
  .nx-lead { font-size: 14.5px !important; }
  .nx-btn-lg { padding: 12px 20px !important; font-size: 14px !important; }
}

/* =====================================================================
   SMALL PHONE · ≤ 380px  (iPhone SE 等窄機)
   ===================================================================== */
@media (max-width: 380px) {
  .dash-content { padding: 12px 12px 24px !important; gap: 12px !important; }

  /* Hero 再壓一級 */
  .wd-hero,
  .dep-hero,
  .about-hero,
  .mem-hero,
  .sp-hero {
    padding: 18px 14px !important;
  }
  .wd-hero-title,
  .dep-hero-title,
  .about-hero-title,
  .mem-hero-title,
  .sp-hero-title { font-size: 20px !important; }
  .wd-hero-sub,
  .dep-hero-sub,
  .about-hero-sub,
  .mem-hero-sub,
  .sp-hero-sub { font-size: 13px !important; }

  /* 卡片 */
  .wd-card,
  .dep-card,
  .mem-card,
  .sp-card,
  .about-card,
  .card {
    padding: 16px 14px 18px !important;
    border-radius: 12px !important;
  }

  /* Input */
  .wd-input,
  .dep-input { font-size: 17px !important; padding: 11px 12px !important; }
  .wd-input-suffix,
  .dep-input-suffix { padding: 0 12px !important; }

  /* Buttons */
  .wd-submit,
  .dep-submit,
  .sp-cta { padding: 11px 16px !important; font-size: 13.5px !important; }

  /* Support 二次壓縮 */
  .sp-card-title { font-size: 15.5px !important; }
  .sp-card-desc { font-size: 13.5px !important; }
  .sp-meta-days { font-size: 15px !important; }
  .sp-meta-time { font-size: 16px !important; }

  /* Modal */
  .wd-modal-panel { padding: 20px 16px 18px !important; }
  .wd-modal-title { font-size: 17px !important; }
}