/* ═══════════════════════════════════════════════════════
   智能组卷系统 — 响应式样式
   三档断点：1024px / 768px / 480px
   基础样式 → style.css

   设计说明：因内网穿透隧道对静态资源有约 43KB 传输限制，
   CSS 拆分为两个文件 + 后端 gzip 压缩确保完整传输。
   ═══════════════════════════════════════════════════════ */

/* ── 1024px: 组卷堆叠 ───────────────────────────────── */
@media (max-width: 1024px) {
  .build-layout { flex-direction: column; }
  .build-paper { width: 100%; min-width: 0; max-height: none; }
  .build-paper .paper-questions { max-height: 350px; }
  .fg-grade, .fg-unit, .fg-lesson, .fg-type { min-width: 90px; }
}

/* ── 768px: 手机端布局（侧栏抽屉、表格滚动、卡片收紧）── */
@media (max-width: 768px) {
  /* Core layout */
  .hamburger { display: flex; }
  .sidebar { transform: translateX(-100%); transition: transform 0.3s var(--ease-smooth); }
  .sidebar.open { transform: translateX(0); z-index: 160; }
  .sidebar-overlay { display: block; }
  .main-content { margin-left: 0; padding: 14px; padding-top: 54px; }
  .page-header { margin-bottom: 16px; }
  .page-header h2 { font-size: 1.2rem; }

  /* Filter bar */
  .filter-bar-modern { flex-direction: column; border-radius: var(--radius-lg); padding: 12px 14px; gap: 8px; }
  .fg-grade, .fg-type, .fg-unit, .fg-lesson { width: 100%; flex-shrink: 1; }
  .fg-search { width: 100%; }
  .unit-slide-wrap.show { max-height: 80px; width: 100%; }
  .lesson-slide-wrap.show { max-height: 80px; width: 100%; }

  /* Stats grid */
  .stats-grid { grid-template-columns: 1fr; gap: 10px; }
  .stat-card { padding: 14px; gap: 12px; }
  .stat-card .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
  .stat-number { font-size: 1.3rem; }

  /* Subject cards */
  .subject-grid { grid-template-columns: 1fr; gap: 8px; }
  .subject-card { padding: 14px 12px; }
  .subject-card .subject-icon { font-size: 1.5rem; }

  /* Tables */
  .table-wrap::after { display: block; }
  .table th, .table td { padding: 8px 12px; font-size: 0.8rem; }
  .actions { flex-wrap: wrap; }

  /* Sort bar */
  .sort-bar { border-radius: var(--radius-lg); padding: 8px 14px; gap: 6px; }
  .sort-item { padding: 5px 10px; font-size: 0.78rem; }
  .sort-total { font-size: 0.78rem; }

  /* Question cards */
  .question-card { border-radius: var(--radius-lg); }
  .qc-header { padding: 12px 14px 0; }
  .qc-body { padding: 6px 14px; font-size: 0.85rem; }
  .qc-footer { padding: 8px 14px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .qc-number { font-size: 0.82rem; }
  .qc-tags { gap: 4px; }
  .qc-tag { font-size: 0.65rem; padding: 1px 7px; }

  /* Forms */
  .form { padding: 16px; border-radius: var(--radius-lg); }
  .form-row { flex-direction: column; gap: 6px; }
  .form-row .form-group { min-width: 100%; }
  .form-group { margin-bottom: 10px; }
  .form-group label { font-size: 0.82rem; }
  .form-actions { margin-top: 14px; padding-top: 10px; flex-wrap: wrap; gap: 8px; }

  /* Paper preview */
  .paper-preview { padding: 14px; }
  .paper-preview .paper-title { font-size: 1.1rem; }
  .paper-meta { flex-direction: column; align-items: center; gap: 3px; font-size: 0.8rem; }
  .paper-info { padding: 12px 14px; gap: 10px; }
  .info-item { font-size: 0.82rem; }

  /* Build page */
  .build-tabs { display: flex; }
  .build-browser[data-hidden="true"],
  .build-paper[data-hidden="true"] { display: none; }
  .build-browser-header { padding: 12px 14px; }
  .build-browser-header h3 { font-size: 0.88rem; }
  .browser-filters { flex-direction: column; padding: 10px 14px; gap: 6px; }
  .browser-filters .filter-group { width: 100%; min-width: 0 !important; }
  .browser-filters .filter-group select,
  .browser-filters .filter-group input { width: 100% !important; }
  .browser-questions { padding: 8px 14px; max-height: 350px; }
  .build-paper-header { padding: 12px 14px; }
  .build-paper-header h3 { font-size: 0.88rem; }
  .paper-questions { padding: 8px 12px; }
  .pq-card { padding: 10px; }
  .pq-card-body { font-size: 0.78rem; }

  /* Profile */
  .profile-layout { flex-direction: column; gap: 14px; }
  .profile-col-left, .profile-col-right { min-width: 0 !important; width: 100%; flex: auto; }
  .profile-card { padding: 16px; border-radius: var(--radius-lg); }
  .profile-stats { grid-template-columns: 1fr; gap: 10px; }
  .profile-avatar { width: 48px; height: 48px; font-size: 1.4rem; }
  .profile-name { font-size: 1rem; }

  /* Login */
  .login-card { padding: 24px 20px; border-radius: 16px; }
  .login-card .brand { margin-bottom: 20px; }
  .login-card .brand .logo { font-size: 2rem; }
  .login-card .brand h1 { font-size: 1.15rem; }

  /* Editor */
  .editor-wysiwyg { padding: 10px 12px; min-height: 120px; font-size: 0.85rem; }
  .editor-wysiwyg.editor-opt { min-height: 50px; padding: 6px 10px; }

  /* Option rows */
  .option-row { padding: 10px; }
  .option-header { flex-wrap: wrap; gap: 4px; }

  /* Header actions */
  .header-actions { width: 100%; }
  .header-actions .btn { flex: 1; text-align: center; }
  .quick-actions { flex-direction: column; gap: 8px; }
  .quick-actions .btn { width: 100%; text-align: center; }

  /* Section titles */
  .section h3 { font-size: 0.95rem; }
  .section { margin-bottom: 24px; }
}

/* ── 480px: 极致紧凑（iPhone 等窄屏） ─────────────── */
@media (max-width: 480px) {
  .main-content { padding: 8px; padding-top: 50px; }

  .stat-card { padding: 10px 12px; gap: 10px; }
  .stat-card .stat-icon { width: 32px; height: 32px; font-size: 0.9rem; }
  .stat-number { font-size: 1.2rem; }
  .stat-label { font-size: 0.72rem; }

  .subject-grid { grid-template-columns: 1fr; gap: 6px; }
  .subject-card { padding: 12px 10px; }

  .question-card { border-radius: var(--radius-md); }
  .qc-header { padding: 10px 12px 0; }
  .qc-body { padding: 4px 12px 6px; font-size: 0.82rem; }
  .qc-footer { padding: 6px 12px; gap: 4px; }

  .form { padding: 12px; }
  .form-group input[type="text"],
  .form-group input[type="number"],
  .form-group select,
  .form-group textarea { padding: 7px 9px; font-size: 16px; }

  .filter-bar-modern { padding: 10px 12px; gap: 6px; }
  .filter-bar-modern .filter-group select,
  .filter-bar-modern .filter-group input[type="text"] { padding: 5px 8px; font-size: 0.78rem; }
  select, input[type="text"], input[type="number"] { font-size: 16px !important; }

  .sort-bar { padding: 6px 12px; border-radius: var(--radius-md); }

  .paper-preview { padding: 10px; border-radius: var(--radius-lg); }
  .paper-preview .paper-title { font-size: 1rem; }

  .browser-filters { padding: 8px 12px; gap: 4px; }
  .browser-questions { padding: 6px 12px; }
  .build-paper-header { padding: 10px 12px; }
  .paper-questions { padding: 6px 10px; }
  .pq-card { padding: 8px; }

  .profile-card { padding: 12px; }
  .profile-avatar { width: 40px; height: 40px; font-size: 1.2rem; }
  .profile-card-top { margin-bottom: 14px; padding-bottom: 12px; gap: 12px; }

  .table-wrap::after { font-size: 0.68rem; padding: 6px; }
  .table th, .table td { padding: 6px 10px; font-size: 0.75rem; }

  .btn { padding: 8px 12px; font-size: 0.8rem; min-height: 40px; }
  .btn-sm { padding: 6px 10px; font-size: 0.72rem; min-height: 36px; }

  .unit-slide-wrap.show { max-height: 80px; width: 100%; }
  .lesson-slide-wrap.show { max-height: 80px; width: 100%; }
  .pagination { flex-wrap: wrap; gap: 6px; }
  .page-header h2 { font-size: 1.1rem; }

  .build-tab { padding: 8px; font-size: 0.78rem; }
  .teaching-checkbox-label { padding: 4px 8px; font-size: 0.78rem; }
}

/* ── 768-1023px: 平板 ───────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .sidebar { width: 64px; }
  .sidebar-header { padding: 14px 8px; text-align: center; }
  .sidebar-header h1 { font-size: 0; }
  .sidebar-header h1 a::after { content: "📝"; font-size: 1.4rem; }
  .nav-item { text-align: center; padding: 14px 4px; font-size: 0; border-left: none; }
  .nav-item::before { font-size: 1.1rem; }
  .nav-item.active { border-left: none; background: rgba(59,130,246,0.15); }
  .nav-section-title { display: none; }
  .nav-sub { display: none; }
  .sidebar-footer { text-align: center; }
  .sidebar-footer .user-name,
  .sidebar-footer .user-links a,
  .sidebar-footer .version { display: none; }
  .sidebar-footer .user-info { justify-content: center; }
  .main-content { margin-left: 64px; padding: 24px 20px; }
  .filter-bar-modern { flex-direction: row; }
  .fg-grade, .fg-unit, .fg-lesson, .fg-type { min-width: 85px; }
}