/* ===================== 基础与变量 ===================== */
:root{
  --navy:#0b1f3a;
  --navy2:#102a4c;
  --accent:#3b7dd8;
  --accent2:#0f9d58;
  --bg:#f4f6fa;
  --card:#ffffff;
  --text:#1c2733;
  --muted:#6b7a8d;
  --line:#e3e8ef;
  --code-bg:#0d1b2a;
  --code-fg:#e6edf3;
  --shadow:0 2px 10px rgba(11,31,58,.08);
  --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  padding-bottom:64px; /* 给底部 tab 留位 */
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===================== 顶部栏 ===================== */
.appbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;
  background:linear-gradient(135deg,var(--navy),var(--navy2));
  color:#fff;box-shadow:0 2px 12px rgba(11,31,58,.25);
}
.apptitle{font-size:18px;font-weight:700;flex:1;letter-spacing:.5px}
.iconbtn{
  width:40px;height:40px;border-radius:10px;font-size:18px;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.iconbtn:active{background:rgba(255,255,255,.15)}

/* ===================== 搜索栏（已移除） ===================== */

/* ===================== 抽屉 ===================== */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}
.drawer{
  position:fixed;top:0;left:0;bottom:0;width:78%;max-width:300px;z-index:50;
  background:var(--card);transform:translateX(-100%);transition:transform .25s ease;
  display:flex;flex-direction:column;box-shadow:4px 0 24px rgba(0,0,0,.2);
}
.drawer.open{transform:translateX(0)}
.drawer-head{
  padding:calc(env(safe-area-inset-top) + 18px) 18px 14px;
  background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;font-weight:700;font-size:16px;
}
.drawer-list{list-style:none;margin:0;padding:8px;overflow:auto;flex:1}
.drawer-list li{
  display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:10px;
  font-size:15px;color:var(--text);transition:.15s;
}
.drawer-list li:active,.drawer-list li.active{background:var(--bg)}
.dot{width:10px;height:10px;border-radius:50%;flex:none}
.drawer-foot{padding:14px 18px;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}

/* ===================== 内容区 ===================== */
.content{padding:16px 14px 24px;max-width:900px;margin:0 auto}
.hero{
  background:linear-gradient(135deg,var(--navy),var(--accent));
  color:#fff;border-radius:var(--radius);padding:22px 20px;margin-bottom:18px;
  box-shadow:var(--shadow);
}
.hero h1{margin:0 0 6px;font-size:22px}
.hero p{margin:0;opacity:.9;font-size:14px}
.hero .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.hero .tags span{background:rgba(255,255,255,.16);padding:3px 10px;border-radius:20px;font-size:12px}

.section-title{font-size:15px;color:var(--muted);margin:6px 4px 12px;font-weight:600}

/* 课程卡片网格 */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{
  background:var(--card);border-radius:var(--radius);padding:16px 14px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
  border:1px solid var(--line);transition:.15s;position:relative;overflow:hidden;
}
.card:active{transform:scale(.98)}
.card .badge{
  align-self:flex-start;color:#fff;font-size:13px;font-weight:700;
  padding:5px 10px;border-radius:8px;letter-spacing:.5px;
}
.card h3{margin:2px 0 0;font-size:16px;line-height:1.4}
.card p{margin:0;font-size:12.5px;color:var(--muted);flex:1}
.card .meta{font-size:11.5px;color:var(--muted)}

/* ===================== 列表/课程页 ===================== */
.backbar{display:flex;align-items:center;gap:10px;margin:-4px 0 14px}
.backbar .iconbtn{color:var(--navy);width:36px;height:36px;background:var(--card);box-shadow:var(--shadow)}
.course-head{
  border-radius:var(--radius);padding:18px 16px;color:#fff;margin-bottom:16px;box-shadow:var(--shadow);
}
.course-head h2{margin:0 0 4px;font-size:19px}
.course-head p{margin:0;opacity:.92;font-size:13px}
.lesson{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 14px;margin-bottom:10px;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:12px;transition:.15s;
}
.lesson:active{transform:scale(.99);background:var(--bg)}
.lesson .num{
  width:34px;height:34px;border-radius:9px;background:var(--bg);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;flex:none;font-size:14px;
}
.lesson .lt{flex:1}
.lesson .lt h4{margin:0 0 2px;font-size:15px}
.lesson .lt p{margin:0;font-size:12.5px;color:var(--muted)}
.lesson .arrow{color:var(--muted);font-size:18px}

/* ===================== 阅读页 ===================== */
.lesson-title{font-size:21px;margin:0 0 4px;color:var(--navy)}
.lesson-sum{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.block{margin-bottom:16px}
.block.text{font-size:15px;color:#26323f}
.block.text p{margin:0 0 10px}
.block.text ul,.block.text ol{padding-left:20px;margin:0 0 10px}
.block.text li{margin-bottom:4px}
.block.text b,.block.text strong{color:var(--navy)}
.block.text code{background:#eef2f8;color:#b5341f;padding:1px 6px;border-radius:5px;font-size:13px;font-family:"SF Mono",Consolas,Menlo,monospace}
.block h3{font-size:16px;margin:0 0 8px;color:var(--navy);border-left:3px solid var(--accent);padding-left:9px}

/* 代码块 */
.code{
  position:relative;background:var(--code-bg);border-radius:10px;overflow:hidden;
  box-shadow:var(--shadow);
}
.code-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:7px 12px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
}
.code-head .lang{color:#8fa6c4;font-size:11.5px;letter-spacing:1px;text-transform:uppercase}
.code-head .copy{
  color:#cdd8e6;font-size:12px;padding:3px 9px;border-radius:6px;background:rgba(255,255,255,.08);
}
.code-head .copy:active{background:rgba(255,255,255,.2)}
.code pre{
  margin:0;padding:14px 14px;overflow-x:auto;color:var(--code-fg);
  font-family:"SF Mono",Consolas,Menlo,monospace;font-size:12.5px;line-height:1.55;white-space:pre;
}
.code pre::-webkit-scrollbar{height:6px}
.code pre::-webkit-scrollbar-thumb{background:#2a3b52;border-radius:3px}

/* 提示框 */
.note{
  background:#fff8e6;border:1px solid #f3dca0;border-left:4px solid #e8a200;
  border-radius:10px;padding:12px 14px;font-size:14px;color:#6b4e00;
}
.note b{color:#7a3d00}

/* 中文注解 */
.zh{
  background:#eef6ff;border:1px solid #cfe3ff;border-left:4px solid var(--accent);
  border-radius:10px;padding:10px 14px;font-size:14px;color:#1f4e79;line-height:1.7;
}
.zh b,.zh strong{color:#0b3d6b}

/* 搜索结果（已移除：用户要求不提供任何输入控件） */

/* ===================== 底部 tab ===================== */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  display:flex;background:var(--card);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 10px rgba(0,0,0,.05);
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 0;font-size:11px;color:var(--muted);transition:.15s;
}
.tab span{font-size:11px}
.tab.active{color:var(--accent)}
.tab.active{font-weight:700}

/* ===================== 大屏适配 ===================== */
@media (min-width:680px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .card p{font-size:13px}
}