/**
 * SSG 公共样式 - 通用布局（加载动画、侧边栏）
 *
 * 抽取自 CategoryTemplate / TutorialOverviewTemplate 中完全相同的 .loading 样式，
 * 以及高度相似的 .sidebar / .sidebar-title 样式。
 *
 * 依赖：auth.css（提供 --primary-color 变量）
 * 引入：SharedSnippet.cssTags()
 */

/* ---- 加载动画 ---- */
.loading { text-align: center; padding: 40px; color: var(--text-tertiary, #94A3B8); }
.loading::after { content: ''; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border, #E2E8F0); border-top-color: var(--primary-color, #2563EB); border-radius: 50%; animation: spin 0.8s linear infinite; margin-left: 8px; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 侧边栏（通用版，模板可在 <style> 中覆盖细节） ---- */
.sidebar { width: 260px; flex-shrink: 0; background: var(--surface, #fff); border-radius: 12px; padding: 16px; box-shadow: 0 1px 3px rgba(15,23,42,0.06); border: 1px solid var(--border, #E2E8F0); position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; }
.sidebar-title { font-size: 15px; font-weight: 600; color: var(--text-primary, #0F172A); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--primary-color, #2563EB); }