/* ============================================================
   学途 · 响应式断点（全局）
   页面内还有各自局部的 @media，那些留在 pages.css 里跟着页面走。
   ============================================================ */

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.active { display: block; }
    .main-content { margin-left: 0; }
    .menu-toggle { display: flex; }
    .top-bar { padding: 12px 16px; }
    .content-area { padding: 16px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .section-grid { grid-template-columns: 1fr; }
    .chart-grid { grid-template-columns: 1fr; }
    .chart-wrap { height: 240px; }
    .form-row { grid-template-columns: 1fr; }
    .header-search { display: none; }
    .page-subtitle { display: none; }
    .modal-box { padding: 20px; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .chart-wrap { height: 220px; }
}

/* KaTeX math rendering */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.katex-display > .katex { white-space: normal; }
.math-display { display: block; margin: 8px 0; }
.math-inline { display: inline; }
.rgen-result-body .katex-display { max-width: 100%; }