/* ========================================================================
   MOBILE FIX v20260719 - 修复移动端按钮截断与布局混乱
   ======================================================================== */

/* --- 修复1: Header 移动端按钮布局 --- */
@media (max-width: 860px) {
  .header-inner {
    flex-wrap: nowrap;
    gap: 4px;
    padding: 0 8px;
  }
  .header-nav {
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .header-nav::-webkit-scrollbar { display: none; }

  /* 缩小按钮尺寸 */
  .header-nav .theme-btn,
  .header-nav .install-btn,
  .header-nav .quest-btn,
  .header-nav .course-btn {
    padding: 5px 8px;
    min-width: 32px;
    height: 32px;
    font-size: 14px;
    flex-shrink: 0;
  }

  /* Logo 文字缩短 */
  .logo-text {
    font-size: 0.85rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 语言下拉按钮缩小 */
  .lang-current {
    padding: 4px 8px;
    font-size: 0.75rem;
    min-width: 50px;
  }

  /* Auth 按钮缩小 */
  .auth-buttons .btn-text,
  .auth-buttons .header-signup {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}

/* 超小屏 (<380px) 进一步缩小 */
@media (max-width: 380px) {
  .header-inner {
    padding: 0 4px;
    gap: 2px;
  }
  .header-nav {
    gap: 2px;
  }
  .header-nav .theme-btn,
  .header-nav .install-btn,
  .header-nav .quest-btn,
  .header-nav .course-btn {
    padding: 4px 6px;
    min-width: 28px;
    height: 28px;
  }
  .logo-icon { font-size: 1rem; }
  .logo-text { font-size: 0.7rem; max-width: 70px; }
  .lang-current {
    padding: 3px 6px;
    font-size: 0.7rem;
  }
}

/* --- 修复2: floatInstall 按钮截断 --- */
#floatInstall {
  max-width: calc(100vw - 16px) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  gap: 6px !important;
  bottom: 16px !important;
  right: 8px !important;
  left: auto !important;
}

@media (max-width: 380px) {
  #floatInstall {
    max-width: calc(100vw - 12px) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    right: 6px !important;
    bottom: 12px !important;
  }
  #floatInstallText {
    font-size: 12px;
  }
}

/* --- 修复3: 搜索框在较小移动端不强制垂直 --- */
@media (max-width: 768px) and (min-width: 481px) {
  .search-box {
    flex-direction: row !important;
    gap: 8px;
  }
  .search-box input {
    flex: 1;
    width: auto !important;
  }
  .search-box button {
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .search-box {
    flex-direction: column;
    gap: 8px;
  }
  .search-box input,
  .search-box button {
    width: 100%;
  }
}

/* --- 修复4: Hero区域内边距 --- */
@media (max-width: 768px) {
  .hero-section {
    padding: 90px 12px 32px !important;
  }
  .hero-title {
    font-size: 1.5rem !important;
  }
}

/* --- 修复5: 防止内容溢出 --- */
@media (max-width: 768px) {
  .content {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* 表格横向滚动 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* 图片不出界 */
  img, video, iframe, canvas, svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 代码块不出界 */
  pre, code {
    white-space: pre-wrap !important;
    word-break: break-all;
  }
}

/* --- 修复6: 按钮最小触摸区域（符合 WCAG） --- */
@media (max-width: 860px) {
  button, [role="button"], a.btn, .btn-primary, .btn-outline, .btn-text {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }

  /* 微调特小按钮 */
  .theme-btn, .install-btn, .quest-btn, .course-btn {
    min-height: 32px;
    min-width: 32px;
  }
}

/* --- 修复7: 弹窗在移动端全屏显示 --- */
@media (max-width: 768px) {
  .modal-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 20px 20px 0 0 !important;
  }
  .modal-overlay {
    align-items: flex-end !important;
  }
}

/* --- 提取自 index.html force-modal-fix --- */
@media (max-width:768px){
  .modal-overlay{background:rgba(5,5,15,0.88);backdrop-filter:blur(4px)}
  .modal-card{background:var(--bg-alt);border-color:rgba(255,255,255,.15);border-radius:20px 20px 0 0}
}

/* --- 提取自 index.html force-mob-translate-btn --- */
.mob-translate-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--success),var(--success-dark));color:#fff;text-decoration:none;box-shadow:0 2px 8px rgba(16,185,129,0.4);margin-left:6px;font-size:16px;line-height:1;flex-shrink:0;}
.mob-translate-btn:active{transform:scale(0.92);}
.mob-translate-icon{font-size:15px;line-height:1;display:inline-block;}
.mob-translate-text{font-size:11px;font-weight:600;margin-left:3px;}
@media(max-width:380px){
  .mob-translate-text{display:none;}
  .mob-translate-btn{width:30px;height:30px;}
}
@media(min-width:769px){
  .mob-translate-btn{display:none;}
}

/* --- 提取自 index.html quick-learn-styles --- */
.quick-words{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:16px 8px;}
.quick-word-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:var(--bg-card);color:var(--text);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;box-shadow:0 2px 8px rgba(0,0,0,0.04);font-family:inherit;}
.quick-word-chip:hover,.quick-word-chip:active{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,0.08);border-color:var(--accent);}
.quick-chip-zh{font-size:1.25rem;font-weight:700;line-height:1.2;}
.quick-chip-py{font-size:0.75rem;color:var(--text-muted);margin-top:2px;}
.quick-result{display:none;margin:16px auto 0;max-width:420px;animation:fadeInUp .3s ease;}
.quick-learn-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:28px 24px 22px;box-shadow:0 20px 50px rgba(0,0,0,0.12);text-align:center;}
.quick-learn-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border:none;border-radius:50%;background:rgba(128,128,128,0.12);color:var(--text-muted);font-size:22px;line-height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.quick-learn-close:hover{background:rgba(128,128,128,0.22);color:var(--text);}
.quick-learn-header{margin-bottom:18px;}
.quick-learn-badge{display:inline-block;font-size:0.75rem;font-weight:600;color:var(--brand);background:var(--primary-subtle);padding:4px 10px;border-radius:999px;margin-bottom:10px;}
.quick-learn-zh{font-size:2.4rem;font-weight:800;color:var(--text);line-height:1.1;}
.quick-learn-py{font-size:1rem;color:var(--text-secondary);margin-top:6px;}
.quick-learn-body{margin:18px 0 22px;}
.quick-learn-ho{font-size:1.05rem;color:var(--accent);font-weight:600;margin-bottom:8px;}
.quick-learn-label{color:var(--text-muted);font-weight:500;}
.quick-learn-meaning{font-size:0.95rem;color:var(--text-secondary);}
.quick-learn-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
.quick-learn-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 16px;border:none;border-radius:12px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:transform .12s,opacity .12s;}
.quick-learn-btn:active{transform:scale(0.96);}
.quick-learn-btn.listen{background:var(--info);color:#fff;}
.quick-learn-btn.save{background:var(--bg-alt);color:var(--text);border:1px solid var(--border);}
.quick-learn-btn.save.saved{background:var(--danger-subtle);color:var(--danger);border-color:var(--danger-border);}
.quick-learn-btn.evaluate{background:var(--accent);color:#fff;}
.quick-learn-btn.write{background:var(--success);color:#fff;}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* --- 提取自 index.html floatPulse --- */
@keyframes floatPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@media(min-width:769px){#floatInstall{display:none}}
@media(display-mode:standalone){#floatInstall{display:none}}

/* --- floatInstall 桌面端样式（提取自 index.html L403） --- */
#floatInstall{position:fixed;bottom:20px;right:20px;z-index:var(--z-confetti);background:linear-gradient(135deg,var(--grad-install-start),var(--grad-install-end));color:#fff;padding:14px 18px 14px 20px;border-radius:50px;font-size:16px;font-weight:700;box-shadow:0 4px 20px rgba(37,99,235,0.5);cursor:pointer;border:none;display:none;align-items:center;gap:8px;font-family:system-ui,sans-serif;animation:floatPulse 2s infinite;max-width:calc(100vw - 40px);}
#floatInstall button.close-btn{margin-left:8px;background:rgba(255,255,255,0.2);border:none;color:#fff;border-radius:50%;width:22px;height:22px;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;}

/* --- paypalModal fix（提取自 index.html L809） --- */
.paypal-modal-fix{background:rgba(5,5,15,0.88)}

.float-install-icon{font-size:20px;}
.float-install-close{margin-left:8px;background:rgba(255,255,255,0.2);border:none;color:#fff;border-radius:50%;width:22px;height:22px;font-size:14px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;}