/* ============================================================
   RL 学习中心 · 统一设计系统（深色费曼风）
   源自 lec3/lec5 的费曼笔记配色，供 hub / demo / notes 复用
   ============================================================ */
:root {
  --bg: #0c1220;
  --bg-card: #141d30;
  --bg-card2: #1a2540;
  --ink: #e6ecf5;
  --ink-dim: #8fa0b8;
  --ink-faint: #5a6a84;
  --accent: #5b9dff;
  --accent-warm: #ffb454;
  --green: #34d399;
  --red: #f87171;
  --purple: #a78bfa;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --mono: "SF Mono", "Cascadia Code", "Fira Code", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.75;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---------- 顶部统一导航条 ---------- */
.rl-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(14px);
  background: rgba(12, 18, 32, 0.82);
  border-bottom: 1px solid var(--border);
}
.rl-nav__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 11px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.rl-nav__home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--ink-dim);
  font-size: 13.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.rl-nav__home:hover { color: var(--ink); border-color: var(--border-strong); background: var(--bg-card); }
.rl-nav__crumb {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rl-nav__crumb b { color: var(--ink-dim); font-weight: 600; }
.rl-nav__spacer { flex: 1; }
/* demo ⇄ 笔记 切换 */
.rl-nav__switch { display: flex; gap: 4px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.rl-nav__switch a {
  text-decoration: none; font-size: 12.5px; color: var(--ink-dim); font-weight: 500;
  padding: 4px 11px; border-radius: 6px; transition: color .15s, background .15s; white-space: nowrap;
}
.rl-nav__switch a:hover { color: var(--ink); }
.rl-nav__switch a.on { background: var(--accent); color: #071022; }

@media (max-width: 560px) {
  .rl-nav__crumb { display: none; }
}

/* ---------- 通用容器 ---------- */
.rl-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 90px; }

/* ---------- 状态徽章 ---------- */
.rl-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .3px;
  padding: 2px 8px; border-radius: 6px; font-weight: 600; white-space: nowrap;
}
.rl-badge--demo { color: var(--accent); background: rgba(91, 157, 255, .12); border: 1px solid rgba(91, 157, 255, .28); }
.rl-badge--note { color: var(--green); background: rgba(52, 211, 153, .1); border: 1px solid rgba(52, 211, 153, .26); }
.rl-badge--todo { color: var(--ink-faint); background: rgba(255, 255, 255, .03); border: 1px solid var(--border); }