/* ============================================================
   企飞人才网 ｜ 移动端加固层 (mobile.css)
   - 仅 @media(max-width:780px) 生效，PC 端零影响、零回归
   - 建立于 2026-09-11，针对真机走查确认的问题逐条修复：
     ① 顶栏两行溢出压住 Logo（.top-bar 写死 36px 高）
     ② 移动端毛玻璃(backdrop-filter)在部分机型渲染成黑块 → 全量移除
     ③ 答题页信息表单/引导弹窗/选项/提交栏 无移动端适配
     ④ 弹窗超出屏幕、无法滚动
     ⑤ Hero 徽章标题窄屏断字错位
   - 全部用 !important 覆盖原样式(含内联)，保证优先级
   ============================================================ */

@media (max-width: 780px) {

  /* ---------- ① 顶栏 / 头部：高度自适应，杜绝压 Logo ---------- */
  .top-bar {
    height: auto !important;
    line-height: 1.6 !important;
    position: static !important;      /* 取消吸顶：高度可变时吸顶偏移必然错位 */
    top: auto !important;
  }
  .top-bar .container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    text-align: center;
  }
  .top-bar .top-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 14px !important;
  }
  .top-bar .welcome-text { white-space: normal !important; }

  .main-header {
    position: static !important;      /* 与顶栏解耦，避免 sticky 偏移压叠 */
    top: auto !important;
  }
  .header-inner {
    height: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px 0 !important;
  }
  .logo-area { justify-content: center !important; width: 100% !important; }
  .main-nav { width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .main-nav ul { flex-wrap: nowrap !important; }
  .main-nav a { white-space: nowrap !important; padding: 8px 12px !important; font-size: 14px !important; }

  /* ---------- ② 移除移动端毛玻璃（黑屏元凶），改实色/低透明度 ---------- */
  .info-form, .hero-card, .qf-hero-card, .qg-mask, .qf-modal, [class*="glass"],
  [style*="backdrop-filter"], [style*="-webkit-backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .qf-hero-card { background: #ffffff !important; }
  .hero-card { background: rgba(255,255,255,.16) !important; }

  /* ---------- ③ 答题页全流程 ---------- */
  .quiz-header .container { flex-wrap: wrap !important; gap: 8px !important; padding: 10px 14px !important; }
  .quiz-hero { padding: 22px 0 20px !important; }
  .quiz-hero h1 { font-size: 20px !important; line-height: 1.35 !important; }
  .quiz-hero p, .quiz-sub { font-size: 12.5px !important; }

  .info-form { padding: 16px 14px !important; border-radius: 12px !important; }
  .info-row { grid-template-columns: 1fr 1fr !important; gap: 10px !important; margin-bottom: 10px !important; }
  .info-field label { font-size: 12px !important; }
  .info-field input, .info-field select, .info-field textarea {
    font-size: 16px !important;      /* 防 iOS 聚焦自动放大 */
    height: 44px !important;
    padding: 0 10px !important;
  }
  .info-field textarea { height: auto !important; padding: 10px !important; }
  .info-actions { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .info-actions .btn-quiz-submit { width: 100% !important; }
  .info-tip { text-align: center; }

  .timer-box { margin-top: 12px !important; }
  .quiz-body { padding: 20px 0 110px !important; }
  .quiz-options { grid-template-columns: repeat(5, 1fr) !important; gap: 5px !important; }
  .quiz-opt { font-size: 11px !important; padding: 10px 2px !important; min-height: 46px !important; display: flex; align-items: center; justify-content: center; text-align: center; }

  .quiz-submit-bar { padding: 10px 0 !important; }
  .quiz-submit-bar .container { flex-direction: column !important; gap: 8px !important; }
  .quiz-submit-bar .btn-quiz-submit { width: 100% !important; }

  /* ---------- ④ 弹窗：限高 + 可滚动，不再顶出屏幕 ---------- */
  .qg-mask { align-items: flex-start !important; overflow-y: auto !important; padding: 16px !important; }
  .qg-dialog { max-height: 90vh !important; overflow-y: auto !important; width: 100% !important; margin: auto 0 !important; }
  #qfResumePrompt { align-items: flex-start !important; overflow-y: auto !important; padding: 20px 0; }
  #qfResumePrompt > div { max-height: 90vh !important; overflow-y: auto !important; margin: auto; }
  #delReqModal > div, [class*="modal"] > div { max-height: 90vh !important; overflow-y: auto !important; }

  /* ---------- ⑤ Hero 徽章标题：窄屏不横向溢出、不断字 ---------- */
  .qf-eyebrow {
    font-size: 11.5px !important;
    letter-spacing: .5px !important;
    padding: 6px 14px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    word-break: keep-all !important;
    text-align: center;
    max-width: 100%;
  }

  /* ---------- 通用：容器/图片/表格/表单触控友好 ---------- */
  .container { max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; }
  img { max-width: 100%; height: auto; }
  input, select, textarea { font-size: 16px !important; }
  .btn, .btn-primary, .btn-outline { min-height: 44px; }
  .admin-table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- 超小屏 <=480px 再收紧 ---------- */
@media (max-width: 480px) {
  .info-row { grid-template-columns: 1fr 1fr !important; }
  .quiz-opt { font-size: 10.5px !important; }
  .top-bar { font-size: 11.5px !important; }
  .qf-eyebrow { font-size: 11px !important; letter-spacing: .2px !important; }
}