/* ============================================================
   广西专升本 · 手机端排版 v6 (Claude 诊断 + 适配修正)
   根因：iOS PWA standalone 无浏览器UI → 视觉上内容偏大
   方案：clamp() 流式字号 + 小屏加重 + sticky 底部
   ============================================================ */

/* ====== 1. 关键修复：iOS 字体自动放大 ====== */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-size: 15px;
}
body {
  background: #f5f4f1 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 375px) { html { font-size: 14px; } }
@media (max-width: 320px) { html { font-size: 13.5px; } }

/* ====== 2. 页面容器 ====== */
.page-wrapper {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 0 70px 0; /* 底部留白给 sticky 按钮 */
}

/* ====== 3. 顶部导航 ====== */
@media (max-width: 768px) {
  .top-nav {
    padding: 0 10px !important;
    border-bottom: 1px solid #d0cdc7 !important;
    background: #fff !important;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .nav-inner {
    height: clamp(38px, 10vw, 44px) !important;
  }
  .nav-logo {
    font-size: clamp(12px, 3.5vw, 14px) !important;
  }
  .nav-link {
    font-size: clamp(10px, 2.8vw, 12px) !important;
    padding: 3px 5px !important;
  }
  .nav-cta {
    padding: 3px 8px !important;
    font-size: clamp(10px, 2.8vw, 12px) !important;
    border-radius: 5px !important;
  }
}

/* ====== 4. 题目卡片 ====== */
@media (max-width: 768px) {
  .card {
    border-radius: 0 !important;
    margin: 0 0 1px 0 !important;
    padding: clamp(12px, 3.8vw, 16px) clamp(10px, 3vw, 14px) !important;
    box-shadow: none !important;
    background: #fff !important;
    border-bottom: 1px solid #e8e5df !important;
  }
  .card:first-of-type {
    border-top: 1px solid #e8e5df !important;
  }
}

/* ====== 5. 章节标签 ====== */
.chapter-tag {
  font-size: clamp(9px, 2.5vw, 11px) !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
  margin-bottom: 4px !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px;
}
.chapter-tag.math { background: #eef2ff !important; color: #4f46e5 !important; }

/* ====== 6. 进度条 ====== */
.progress-text {
  font-size: clamp(9px, 2.5vw, 11px) !important;
  color: #999 !important;
  margin-bottom: 4px !important;
  text-align: left !important;
  font-family: SF Mono, Menlo, Consolas, monospace;
}
.progress-bar {
  height: 2px !important;
  margin: 2px 0 4px !important;
  background: #e8e5df !important;
}

/* ====== 7. 题干：课堂投屏与手机阅读友好 ====== */
.stem {
  font-size: clamp(15.5px, 4.2vw, 18px) !important;
  font-weight: 500 !important;
  line-height: 1.68 !important;
  margin: 10px 0 !important;
  color: #1a1a1a !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  word-break: normal;
  -webkit-user-select: text;
  user-select: text;
}
.stem .katex { font-size: 1em !important; }

/* ====== 8. 选项：保持可读而不拥挤 ====== */
.option {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: clamp(7px, 2vw, 10px) clamp(8px, 2.5vw, 12px) !important;
  margin-bottom: 5px !important;
  border: 1px solid #e5e2db !important;
  border-radius: 6px !important;
  background: #fafaf8 !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  min-height: clamp(36px, 10vw, 44px);
  -webkit-user-select: none;
  user-select: none;
}
.option:active { background: #f0efe9 !important; }

.option-label {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 4px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: clamp(11px, 3vw, 13px) !important;
  color: #888 !important;
  flex-shrink: 0;
  margin-top: 1px;
}
.option-content {
  flex: 1 !important;
  font-size: clamp(14.5px, 3.8vw, 16.5px) !important;
  line-height: 1.58 !important;
  padding-top: 0 !important;
  color: #333 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.option-content .katex { font-size: 1em !important; }

/* 选中态 */
.option.selected {
  border-color: #4f46e5 !important;
  background: #eef2ff !important;
}
.option.selected .option-label {
  color: #4f46e5 !important;
  background: #dbeafe !important;
  border-radius: 4px !important;
}

/* ====== 9. 公式横向滑动 ====== */
/* 保留触摸滑动，但隐藏部分 WebView 会渲染成灰色方块的滚动条。 */
.stem,
.option-content,
.katex-display { scrollbar-width: none; }
.stem::-webkit-scrollbar,
.option-content::-webkit-scrollbar,
.katex-display::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ====== 10. 按钮区 + sticky 底部 ====== */
@media (max-width: 768px) {
  .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(8px, 2.5vw, 12px) clamp(16px, 5vw, 24px) !important;
    font-size: clamp(12.5px, 3.5vw, 15px) !important;
    font-weight: 500 !important;
    min-height: clamp(36px, 10vw, 46px) !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer;
    transition: opacity 0.15s;
  }
  .btn:active { opacity: 0.7; }
  .btn-primary { background: #4f46e5 !important; color: #fff !important; }
  .btn-ghost { background: #f0efe9 !important; color: #555 !important; }
  .btn + .btn { margin-left: 8px; }
}

/* 底部按钮容器 sticky */
.action-buttons {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #f0efe9;
  z-index: 40;
  display: flex;
  gap: 8px;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.04);
}

/* ====== 11. 结果卡片 ====== */
@media (max-width: 768px) {
  .result-card {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 16px 12px !important;
    box-shadow: none !important;
    border-bottom: 1px solid #e8e5df !important;
  }
}
.result-icon { font-size: clamp(40px, 12vw, 56px) !important; margin-bottom: 6px; }
.result-text { font-size: clamp(16px, 4.5vw, 20px) !important; font-weight: 700; }
.result-text.correct { color: #22c55e; }
.result-text.wrong { color: #ef4444; }

/* ====== 12. KaTeX display ====== */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 3px 0;
  max-width: 100%;
}
.katex-display > .katex {
  max-width: 100%;
  white-space: normal;
}

/* ====== 13. 解析区域 ====== */
.solution-box {
  margin-top: 12px;
  border: 1px solid #e5e2db;
  border-radius: 7px;
  overflow: hidden;
  -webkit-user-select: text;
  user-select: text;
}
.solution-box summary {
  padding: 10px 14px;
  font-weight: 600;
  font-size: clamp(12.5px, 3.5vw, 14px);
  background: #fafaf8;
  cursor: pointer;
  list-style: none;
}
.solution-box summary::-webkit-details-marker { display: none; }
.solution-box[open] summary { border-bottom: 1px solid #e5e2db; }
.solution-content {
  padding: 10px 14px;
  font-size: clamp(12px, 3.3vw, 14px);
  line-height: 1.7;
  color: #333;
}
.sol-section {
  font-weight: 700;
  font-size: clamp(12.5px, 3.5vw, 14px);
  color: #4F46E5;
  margin: 10px 0 5px;
  padding-bottom: 3px;
  border-bottom: 1px dashed #e5e2db;
}
.sol-section:first-child { margin-top: 0; }
.sol-step { padding: 2px 0 2px 2px; margin: 2px 0; }
.sol-warning {
  background: #fef3c7;
  border-left: 3px solid #f59e0b;
  padding: 6px 10px;
  margin: 6px 0;
  border-radius: 0 5px 5px 0;
  font-size: clamp(11px, 3vw, 13px);
  color: #92400e;
}
.sol-line { padding: 1px 0; margin: 1px 0; }

/* ====== 14. PWA standalone 专属 ====== */
@media all and (display-mode: standalone) {
  html { font-size: 15px; }

  .top-nav {
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(44px + env(safe-area-inset-top, 0px)) !important;
  }

  .stem {
    font-size: clamp(15.5px, 4.2vw, 18px) !important;
    line-height: 1.68 !important;
  }

  .option-content {
    font-size: clamp(14.5px, 3.8vw, 16.5px) !important;
    line-height: 1.6 !important;
  }

  .card {
    padding: clamp(10px, 3vw, 14px) clamp(10px, 3vw, 14px) !important;
  }

  .btn {
    font-size: clamp(12px, 3.3vw, 14px) !important;
    padding: 8px 16px !important;
  }

  .page-wrapper {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}

/* ====== 15. iOS 老版本 fallback ====== */
html.pwa-standalone .stem,
html.standalone .stem {
  font-size: clamp(15.5px, 4.2vw, 18px) !important;
}

html.pwa-standalone .option-content,
html.standalone .option-content {
  font-size: clamp(14.5px, 3.8vw, 16.5px) !important;
}

/* ====== 16. 填空题输入框：16px 防止 iOS 缩放 ====== */
input[type=text],
input[type=number],
textarea {
  font-size: 16px !important;
  padding: 8px 10px;
  border: 1px solid #e5e2db;
  border-radius: 6px;
  width: 100%;
  line-height: 1.4;
  background: #fff;
  color: #333;
}

/* ====== 17. 桌面端 ====== */
@media (min-width: 769px) {
  .page-wrapper {
    max-width: 640px;
    margin: 0 auto;
  }
  .card {
    max-width: 640px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ====== 18. v7 当前页面结构适配 ====== */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: 11px;
    --mobile-bar: 42px;
  }

  body {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .top-nav {
    min-height: calc(var(--mobile-bar) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--mobile-gutter) 0 !important;
  }

  .nav-inner {
    width: 100%;
    height: var(--mobile-bar) !important;
    min-height: var(--mobile-bar);
    gap: 8px;
  }

  .nav-logo {
    max-width: 42vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nav-links { gap: 5px !important; }
  .nav-links .nav-link:not(.nav-cta) { display: none; }
  .account-button {
    min-height: 30px !important;
    max-width: 30vw;
    padding: 0 8px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11px !important;
  }

  #view {
    width: 100%;
    max-width: 640px !important;
    padding: 10px var(--mobile-gutter) calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .picker-heading { margin: 4px auto 14px; }
  .picker-heading h1 { font-size: 18px !important; }
  .pick-grid { gap: 8px !important; }
  .pick-card {
    min-height: 96px !important;
    padding: 15px 8px !important;
    border-radius: 10px !important;
  }
  .pick-icon { font-size: 28px !important; margin-bottom: 4px !important; }
  .pick-name { font-size: 14px !important; margin-bottom: 2px !important; }
  .pick-arrow { font-size: 11px !important; }

  .app-tabs { margin-bottom: 10px !important; border-radius: 8px !important; }
  .app-tab { min-height: 36px; padding: 7px 4px !important; font-size: 11px !important; }
  .mode-row { gap: 8px !important; }
  .mode-btn { padding: 15px 8px !important; border-radius: 10px !important; }
  .mb-icon { font-size: 26px !important; margin-bottom: 4px !important; }
  .mb-label { font-size: 14px !important; }
  .chapter-grid { gap: 7px !important; }
  .chapter-btn { padding: 11px 8px !important; border-radius: 8px !important; }

  .question-toolbar { align-items: flex-start; }
  .favorite-button { min-height: 28px !important; padding: 0 7px !important; font-size: 11px !important; }

  .action-bar,
  .exam-nav {
    position: sticky;
    bottom: 0;
    z-index: 40;
    margin: 10px calc(-1 * var(--mobile-gutter)) 0 !important;
    padding: 8px var(--mobile-gutter) calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255,255,255,.96);
    border-top: 1px solid #e5e7eb;
    backdrop-filter: blur(10px);
  }

  .action-bar .btn { flex: 1; }
  .action-bar .btn + .btn,.exam-nav .btn + .btn { margin-left: 0 !important; }
  .action-bar .btn,.exam-nav .btn { min-height: 44px !important; }
  .exam-answer-sheet { max-height: 86px; overflow-y: auto; }
  .exam-dot { width: 28px !important; height: 28px !important; font-size: 10px !important; }

  .result-container { padding: 6px 0 0 !important; }
  .result-icon { font-size: 36px !important; }
  .result-text { font-size: 17px !important; margin-bottom: 12px !important; }
  .answer-box { padding: 9px 11px !important; margin-bottom: 7px !important; }
  .answer-box .value { font-size: 13px !important; }

  .learning-header { align-items: flex-start; }
  .learning-header h1 { font-size: 19px !important; }
  .learning-header p { font-size: 12px !important; }
  .learning-summary { margin: 14px 0 !important; }
  .learning-summary div { padding: 11px 4px !important; }
  .learning-summary strong { font-size: 18px !important; }
  .learning-center section { margin-top: 20px !important; }

  .account-dialog { padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important; }
}

@media all and (display-mode: standalone) and (max-width: 767px) {
  html { font-size: 15px; }
  #view { padding-top: 7px !important; }
  .stem { font-size: clamp(15.5px, 4.2vw, 18px) !important; }
  .option-content { font-size: clamp(14.5px, 3.8vw, 16.5px) !important; }
  .option { min-height: 44px !important; padding-top: 7px !important; padding-bottom: 7px !important; }
}

/* 英语长句需要更大的字面尺寸和更宽松的行距。 */
body[data-subject="english"] .stem {
  font-size: clamp(17px, 4.6vw, 19px) !important;
  line-height: 1.76 !important;
  letter-spacing: .01em;
  overflow-wrap: break-word;
}
body[data-subject="english"] .option-content {
  font-size: clamp(15.5px, 4.1vw, 17.5px) !important;
  line-height: 1.68 !important;
  letter-spacing: .008em;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}