/* ================================================================
   PMP 十五至尊图 — 响应式适配 (平板 + 手机)
   ================================================================ */

/* ============ 平板 (≤768px) ============ */
@media (max-width: 768px) {
  /* ---- Topbar 导航栏 ---- */
  .topbar {
    padding: 8px 12px;
    gap: 8px;
  }
  .topbar-left { gap: 8px; }
  .logo { font-size: 1rem; }
  .badge { display: none; } /* 平板隐藏 PMBOK 徽章 */

  .topbar-right { flex: 1; }
  .topbar-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .topbar-nav::-webkit-scrollbar { height: 0; } /* 隐藏滚动条 */

  .search-input {
    width: 140px;
    font-size: .82rem;
    padding: 6px 10px;
  }

  /* ---- 面包屑 ---- */
  .breadcrumb-bar { padding: 6px 12px; }
  .breadcrumb-bar ol { font-size: .75rem; }

  /* ---- 矩阵 ---- */
  .matrix-container { padding: 0 4px; }
  .matrix-table th, .matrix-table td {
    padding: 5px 3px;
    font-size: .72rem;
  }
  .col-ka { width: 75px; min-width: 65px; }
  .ka-name { font-size: .75rem; }
  .cell-link { font-size: .7rem; }
  .legend-bar { gap: 12px; font-size: .72rem; }

  /* ---- 详情浮层 ---- */
  .detail-overlay { justify-content: center; align-items: flex-end; }
  .detail-panel {
    width: 100vw;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    padding: 20px 14px;
  }

  /* ITTO 三列变单列 */
  .itto-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .itto-col-head { font-size: .78rem; }
  .itto-item { font-size: .75rem; padding: 5px 8px; }

  /* ITTO 弹窗 */
  .itto-pop-row { flex-direction: column; gap: 4px; }
  .itto-pop-label { flex: none; }
  .itto-pop-body { padding: 10px 12px; }

  /* ---- 考题 ---- */
  .exam-container { padding: 0 8px; }
  .question-card { padding: 18px 14px; }
  .question-stem { font-size: .93rem; }
  .option-item { padding: 10px 12px; font-size: .85rem; }
  .exam-topbar { flex-direction: column; align-items: flex-start; }
  .exam-actions { flex-direction: column; }
  .exam-actions .btn { width: 100%; justify-content: center; }

  /* ---- 速查卡 ---- */
  .quick-ref-container { padding: 0 4px; }
  .qr-tab { padding: 8px 12px; font-size: .78rem; }
  .qr-card { padding: 18px 14px; }
  .evm-grid { grid-template-columns: 1fr 1fr; }
  .strategy-list { grid-template-columns: 1fr; }
  .stages-row { flex-direction: column; }
  .comp-table { font-size: .78rem; }
  .comp-table th, .comp-table td { padding: 7px 8px; }
  .flow-diagram { flex-direction: column; align-items: flex-start; gap: 4px; }
  .flow-arrow { transform: rotate(90deg); margin: 2px 0 2px 16px; }

  /* ---- 博客 ---- */
  .blog-container { padding: 0 8px; }
  .blog-article { padding: 18px 14px; }
}

/* ============ 手机 (≤480px) ============ */
@media (max-width: 480px) {
  /* ---- Topbar ---- */
  .topbar {
    padding: 6px 8px;
    gap: 4px;
    flex-direction: column;
    align-items: stretch;
  }
  .topbar-left {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .logo { font-size: .95rem; }
  .topbar-right {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: space-between;
  }

  .topbar-nav {
    order: 3;
    width: 100%;
    display: flex;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }
  .topbar-nav .btn {
    padding: 4px 8px;
    font-size: .72rem;
    flex-shrink: 0;
  }
  .btn-quickref, .btn-blog {
    padding: 4px 10px !important;
    font-size: .72rem !important;
    border-radius: 14px !important;
  }

  .search-input {
    flex: 1;
    width: auto;
    min-width: 100px;
    font-size: .78rem;
    padding: 5px 8px;
  }

  #themeToggle {
    padding: 4px 8px;
    font-size: .75rem;
  }

  /* ---- 面包屑 ---- */
  .breadcrumb-bar {
    top: auto;
    position: relative;
    padding: 4px 8px;
  }
  .breadcrumb-bar ol { font-size: .7rem; flex-wrap: wrap; }

  /* ---- 矩阵 ---- */
  .matrix-container { padding: 0 2px; }
  .matrix-table { table-layout: auto; }
  .matrix-table th, .matrix-table td {
    padding: 4px 2px;
    font-size: .68rem;
  }
  .col-ka { width: 60px; min-width: 50px; }
  .ka-name { font-size: .7rem; }
  .ka-count { display: none; }
  .cell-link { font-size: .65rem; }
  .pg-count { font-size: .62rem; }
  .legend-bar { gap: 8px; font-size: .68rem; }
  .col-pg { font-size: .75rem; padding: 8px 4px; }

  /* ---- 详情浮层 ---- */
  .detail-panel {
    width: 100vw;
    max-height: 92vh;
    padding: 16px 10px;
    border-radius: 12px 12px 0 0;
  }
  .detail-name { font-size: 1.2rem; }
  .detail-eng { font-size: .78rem; }
  .detail-tags { flex-wrap: wrap; gap: 4px; }
  .detail-tag { font-size: .7rem; padding: 2px 8px; }
  .detail-section-title { font-size: .9rem; }
  .detail-desc { font-size: .82rem; }

  /* 混淆卡片 */
  .confused-card { padding: 10px 12px; font-size: .78rem; }
  .similar-link { padding: 3px 8px; font-size: .72rem; }

  /* KA/PG列表 */
  .ka-process-list, .pg-process-grid { grid-template-columns: 1fr; }
  .ka-process-item, .pg-process-card { padding: 8px 12px; font-size: .78rem; }

  /* ---- 考题 ---- */
  .exam-container { padding: 0 4px; }
  .exam-topbar h2 { font-size: 1rem; }
  .exam-tab { padding: 3px 10px; font-size: .72rem; }
  .question-card { padding: 14px 10px; }
  .question-stem { font-size: .88rem; line-height: 1.7; }
  .question-meta { gap: 6px; font-size: .7rem; }
  .option-item { padding: 8px 10px; font-size: .82rem; gap: 8px; }
  .option-letter { width: 24px; height: 24px; font-size: .78rem; }
  .answer-panel { padding: 12px 14px; font-size: .82rem; }
  .exam-actions .btn { padding: 10px; font-size: .82rem; }

  /* 统计面板 */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px 8px; }
  .stat-value { font-size: 1.4rem; }
  .wrong-item { flex-direction: column; align-items: flex-start; gap: 4px; font-size: .78rem; }

  /* ---- 速查卡 ---- */
  .quick-ref-container { padding: 0 2px; }
  .qr-tab { padding: 6px 9px; font-size: .72rem; }
  .qr-card { padding: 14px 10px; }
  .qr-card h3 { font-size: .95rem; }
  .evm-grid { grid-template-columns: 1fr; gap: 6px; }
  .evm-cell { padding: 10px 12px; }
  .evm-cell .evm-formula { font-size: .95rem; }
  .evm-cell .evm-name { font-size: .78rem; }
  .evm-cell .evm-desc { font-size: .7rem; }
  .comp-table { font-size: .72rem; }
  .comp-table th, .comp-table td { padding: 5px 6px; }
  .strategy-list { grid-template-columns: 1fr; gap: 6px; }
  .strategy-card { padding: 10px 12px; }
  .strategy-card .s-title { font-size: .82rem; }
  .strategy-card .s-desc { font-size: .72rem; }
  .stages-row { flex-direction: column; gap: 4px; }
  .stage-card { min-width: auto; padding: 10px 8px; }
  .stage-card .s-name { font-size: .78rem; }
  .stage-card .s-action { font-size: .68rem; }
  .flow-diagram { padding: 12px 8px; font-size: .75rem; }
  .flow-node { padding: 8px 10px; font-size: .75rem; }
  .tip-box { padding: 10px 12px; font-size: .75rem; }

  /* ---- 博客 ---- */
  .blog-container { padding: 0 2px; }
  .blog-article { padding: 14px 10px; }
  .blog-article h1 { font-size: 1.2rem; }
  .blog-article h2 { font-size: 1rem; }
  .blog-list-item { padding: 12px; }
  .blog-list-item h3 { font-size: .9rem; }

  /* ---- 通用 ---- */
  h2 { font-size: 1.1rem; }
  h3 { font-size: 1rem; }
  h4 { font-size: .88rem; }
}

/* ============ 极小屏 (≤360px) ============ */
@media (max-width: 360px) {
  .topbar-nav .btn {
    padding: 3px 6px;
    font-size: .68rem;
  }
  .btn-quickref, .btn-blog {
    padding: 3px 8px !important;
    font-size: .68rem !important;
  }
  .search-input { font-size: .72rem; }
  .logo { font-size: .85rem; }

  .matrix-table th, .matrix-table td { font-size: .62rem; padding: 3px 1px; }
  .col-ka { width: 50px; min-width: 42px; }
  .ka-name { font-size: .65rem; }
  .cell-link { font-size: .6rem; }

  .question-card { padding: 10px 8px; }
  .question-stem { font-size: .82rem; }
  .option-item { font-size: .78rem; padding: 6px 8px; }
}