/* ============================================================
   学习资料共享屋 · 统一设计系统 theme.css
   作用：网页端所有页面共用一套设计变量 + 通用组件，
        改这里 = 全站颜值统一变化。后台同款主色 #3a6df0。
   ============================================================ */
:root{
  --primary:#3a6df0;          /* 主色（与运营后台一致）*/
  --primary-d:#2f5ad6;        /* 主色-按下/悬停 */
  --primary-soft:#eef3ff;     /* 主色-浅底 */
  --primary-softer:#f6f9ff;   /* 主色-更浅底 */
  --bg:#f5f7fa;               /* 页面底色 */
  --surface:#ffffff;          /* 卡片/导航底色 */
  --text:#1a1f36;             /* 主文字 */
  --text-2:#6b7280;           /* 次文字 */
  --text-3:#9ca3af;           /* 弱文字/占位 */
  --line:#eceef2;             /* 分割线 */
  --line-2:#e2e8f0;           /* 边框线 */
  --radius:14px;              /* 卡片圆角 */
  --radius-sm:8px;            /* 控件圆角 */
  --radius-lg:18px;           /* 大圆角 */
  --radius-pill:999px;        /* 胶囊 */
  --shadow-sm:0 2px 8px rgba(20,30,60,.06);
  --shadow:0 8px 24px rgba(45,124,245,.10);
  --shadow-hover:0 10px 32px rgba(45,124,245,.16);
  --maxw:1200px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; }
body{ font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; }

/* ---------- 顶部导航条（统一） ---------- */
.th-topbar{ background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1000; }
.th-topbar .inner{ max-width:var(--maxw); margin:0 auto; padding:12px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.th-logo{ font-size:20px; font-weight:700; color:var(--primary); letter-spacing:1px; white-space:nowrap; display:flex; align-items:baseline; }
.th-logo .sub{ font-size:11px; color:var(--text-2); margin-left:8px; font-weight:400; }
.th-nav{ display:flex; align-items:center; gap:4px; }
.th-nav a{ padding:8px 14px; font-size:14px; color:var(--text); border-radius:var(--radius-sm); transition:.15s; white-space:nowrap; }
.th-nav a:hover{ color:var(--primary); background:var(--primary-soft); }
.th-nav a.social{ color:#ea580c; font-weight:500; }
.th-nav a.social:hover{ color:#c2410c; background:#fff3ec; }
.th-search{ display:flex; align-items:center; }
.th-search input{ height:38px; width:240px; border:1px solid var(--line-2); border-right:none; border-radius:var(--radius-sm) 0 0 var(--radius-sm); padding:0 14px; font-size:14px; outline:none; background:#fafbfc; color:var(--text); }
.th-search input:focus{ border-color:var(--primary); background:#fff; }
.th-search button{ height:38px; padding:0 18px; border:none; background:var(--primary); color:#fff; border-radius:0 var(--radius-sm) var(--radius-sm) 0; cursor:pointer; font-size:14px; transition:.15s; }
.th-search button:hover{ background:var(--primary-d); }

/* ---------- 按钮 ---------- */
.th-btn{ display:inline-flex; align-items:center; justify-content:center; padding:9px 18px; border-radius:var(--radius-sm); font-size:14px; font-weight:500; cursor:pointer; border:1px solid var(--line-2); background:#fff; color:var(--text); transition:.15s; white-space:nowrap; }
.th-btn:hover{ border-color:var(--primary); color:var(--primary); }
.th-btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); }
.th-btn-primary:hover{ background:var(--primary-d); color:#fff; }

/* ---------- 统一资料卡片（首页/分类/详情相关推荐共用） ---------- */
.th-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; cursor:pointer; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; box-shadow:var(--shadow-sm); text-decoration:none; color:inherit; }
.th-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.th-card .cover{ width:100%; height:130px; display:flex; align-items:center; justify-content:center; font-size:42px; color:#fff; position:relative; overflow:hidden; }
.th-card .body{ padding:14px; display:flex; flex-direction:column; flex:1; }
.th-card .title{ font-size:15px; font-weight:600; color:var(--text); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:42px; }
.th-card .meta{ font-size:12px; color:var(--text-3); margin-top:8px; }
.th-card .meta .author{ color:var(--text-2); }
.th-card .price{ margin-top:auto; padding-top:10px; font-size:17px; font-weight:700; color:#f5573b; }
.th-card .price.free{ color:#16a34a; font-size:15px; }
.th-card .buyBtn{ margin-top:10px; align-self:flex-start; padding:6px 16px; border:none; background:var(--primary); color:#fff; border-radius:var(--radius-sm); font-size:13px; cursor:pointer; transition:.15s; }
.th-card .buyBtn:hover{ background:var(--primary-d); }

/* 三列网格容器（桌面）/ 两列（平板） */
.th-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .th-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } }
@media (max-width:560px){ .th-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } }

/* ---------- 标签胶囊（文档/笔记/音频 等） ---------- */
.th-tag{ display:inline-block; padding:2px 10px; border-radius:var(--radius-pill); font-size:12px; background:var(--primary-soft); color:var(--primary); }

/* ---------- 区块标题 ---------- */
.th-section-title{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--line); position:relative; }
.th-section-title::after{ content:''; position:absolute; bottom:-2px; left:0; width:48px; height:2px; background:var(--primary); border-radius:1px; }
.th-section-title h2{ font-size:20px; font-weight:600; color:var(--text); }
.th-section-title .more{ font-size:13px; color:var(--primary); cursor:pointer; }
.th-section-title .more:hover{ color:var(--primary-d); }

/* ---------- 空状态 ---------- */
.th-empty{ text-align:center; color:var(--text-3); padding:60px 0; font-size:14px; }

/* ---------- 筛选 chip ---------- */
.th-chip{ padding:7px 14px; border:1px solid var(--line-2); border-radius:var(--radius-pill); font-size:13px; color:var(--text-2); cursor:pointer; background:#fff; transition:.15s; white-space:nowrap; }
.th-chip:hover{ border-color:var(--primary); color:var(--primary); }
.th-chip.active{ background:var(--primary); color:#fff; border-color:var(--primary); }

/* ---------- 手机端底部 Tab（统一移动导航，≤768px 显示） ---------- */
.th-bottom-tab{ display:none; }
@media (max-width:768px){
  .th-bottom-tab{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1200; height:56px; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -2px 12px rgba(20,30,60,.06); }
  .th-bottom-tab a{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:11px; color:var(--text-2); text-decoration:none; transition:.15s; }
  .th-bottom-tab a .ic{ font-size:20px; line-height:1; }
  .th-bottom-tab a.active{ color:var(--primary); }
  .th-bottom-tab a.active .ic{ transform:translateY(-1px); }
  /* 移动端隐藏首页底部链接导航，避免与底部 Tab 重复 */
  .bottomNavigation{ display:none !important; }
  body{ padding-bottom:56px; }
}

/* ---------- 首页原有 .courseCard 家族统一覆盖（与 .th-card 外观一致） ---------- */
.courseCard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .18s ease, box-shadow .18s ease; }
.courseCard:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); }
.courseCard .cardCover{ height:130px; }
.courseCard .cardBody{ padding:14px; display:flex; flex-direction:column; flex:1; }
.courseCard .cardTitle{ font-size:15px; font-weight:600; color:var(--text); line-height:1.4; }
.courseCard .cardMeta{ font-size:12px; color:var(--text-3); margin-top:8px; }
.courseCard .cardPrice{ margin-top:auto; padding-top:10px; font-size:17px; font-weight:700; color:#f5573b; }
.courseCard .priceNow{ color:#f5573b; font-weight:700; font-size:17px; }
.courseCard .priceOrig{ color:var(--text-3); text-decoration:line-through; font-size:12px; margin-left:6px; font-weight:400; }
.courseCard .buyBtn{ margin-top:10px; align-self:flex-start; padding:6px 16px; border:none; background:var(--primary); color:#fff; border-radius:var(--radius-sm); font-size:13px; cursor:pointer; transition:.15s; }
.courseCard .buyBtn:hover{ background:var(--primary-d); }