/* =========================================================
   Python 闯关岛 · 自定义补充样式
   在参考站 style.css 之后加载，仅补充本项目特有部分：
   1) textarea + 行号 编辑器（离线友好，不依赖 CodeMirror）
   2) 首页课程地图
   3) 少量 SPA 微调
   ========================================================= */

/* ---------------- 编辑器：textarea + 背后彩色高亮层 + 行号 gutter ---------------- */
.editor-wrap { display: flex; height: 320px; background: #fff; overflow: hidden; border-radius: 0 0 14px 14px; }
.gutter {
  flex: 0 0 46px; padding: 12px 8px 12px 0; text-align: right;
  font-family: var(--mono); font-size: 14px; line-height: 1.75; color: #aab6cc;
  background: #f5f8ff; border-right: 2px solid var(--line); overflow: hidden;
  white-space: pre; user-select: none; height: 100%;
}
.code-area { position: relative; flex: 1 1 auto; height: 100%; overflow: hidden; }
/* 高亮层与输入框共用完全相同的字号/行高/padding，仅用颜色区分（不加粗/不斜体，避免宽度错位） */
.hl, #code {
  position: absolute; inset: 0; margin: 0; padding: 12px 16px;
  font-family: var(--mono); font-size: 14px; line-height: 1.75;
  tab-size: 4; white-space: pre; border: 0; overflow: auto;
}
.hl { z-index: 1; pointer-events: none; color: var(--ink); background: transparent; }
.hl code { font: inherit; white-space: pre; }
#code {
  z-index: 2; color: transparent !important; background: transparent !important; resize: none; outline: none;
  caret-color: #2c3a55;
}
#code::selection { background: #cfe0ff; }
/* 语法高亮配色（仅颜色，不改字形宽度） */
.tok-hint { color: #b9c4d8; }
.tok-com { color: #94a3b8; }
.tok-str { color: #16a34a; }
.tok-num { color: #e8590c; }
.tok-kw  { color: #7c3aed; }
.tok-bi  { color: #2563eb; }
.tok-fn  { color: #db2777; }
.tok-op  { color: #64748b; }
.editor-hint { padding: 6px 12px; font-size: 11.5px; color: var(--ink-3); background: #fbfcff; border-top: 2px solid var(--line); }

/* 代码面板按钮条里的「看答案」 */
.code-actions .btn.ans { background: linear-gradient(135deg, #ffe9b8, #ffd36e); border-color: #f0b429; color: #8a5a00; }
.code-actions .btn.ans:hover { filter: brightness(1.03); }

/* ---------------- 侧栏课程条目里的进度星 ---------------- */
.lesson-meta .star { color: #ffc93c; }
.lesson-item .lv-dot { width: 10px; height: 10px; border-radius: 99px; flex: 0 0 auto; }

/* ---------------- 题目区「看答案」按钮（放在题目面板内） ---------------- */
.answer-btn { width: 100%; justify-content: center; display: flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #ffe9b8, #ffd36e); border-color: #f0b429; color: #8a5a00;
  font-size: 14px; padding: 10px 14px; }
.answer-btn:hover { filter: brightness(1.03); }

/* 控制台输出里的报错着色（与参考站 .out .err 一致，这里补默认） */
.out .err { color: #ff5d73; }
.out .ok  { color: #22c55e; }

/* ---------------- 首页 ---------------- */
.home { max-width: 1100px; margin: 0 auto; padding: 24px 22px 70px; }
.home-hero {
  background: linear-gradient(135deg, #ffffff 0%, #f3f8ff 100%);
  border: 3px solid #fff; border-radius: 26px; padding: 26px 30px;
  box-shadow: var(--stick); display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.home-hero .h-logo { font-size: 58px; line-height: 1; flex: 0 0 auto; animation: bobbing 3.4s ease-in-out infinite; }
.home-hero .h-title { font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.home-hero .h-sub { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
.home-hero .h-actions { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 20px; font-size: 12.5px; color: var(--ink-2); }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px solid var(--line); border-radius: 99px; padding: 4px 12px; }
.legend .dot { width: 12px; height: 12px; border-radius: 99px; }
.legend .dot.t1 { background: var(--green); }
.legend .dot.t2 { background: var(--orange); }
.legend .dot.t3 { background: var(--red); }
.legend .dot.t4 { background: var(--purple); }

.unit { background: #fff; border: 3px solid #fff; border-radius: 22px; box-shadow: var(--stick); padding: 16px 18px 18px; margin-bottom: 18px; }
.unit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.unit-badge { font-size: 12.5px; font-weight: 800; padding: 4px 13px; border-radius: 99px; color: #fff; box-shadow: 0 2px 0 rgba(44,58,85,.15); }
.unit-badge.u1 { background: linear-gradient(135deg, #4ade80, #16a34a); }
.unit-badge.u2 { background: linear-gradient(135deg, #7cc4ff, #2563eb); }
.unit-badge.u3 { background: linear-gradient(135deg, #c99bff, #7c3aed); }
.unit-badge.u4 { background: linear-gradient(135deg, #ffb057, #f97316); }
.unit-name { font-size: 18px; font-weight: 800; }
.unit-goal { font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; }
.unit-prog { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--ink-2); }

.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 12px; }
.lcard {
  background: var(--soft); border: 2px solid var(--line); border-radius: 16px; padding: 12px 14px;
  cursor: pointer; transition: transform .14s, box-shadow .14s, border-color .14s;
  display: flex; flex-direction: column; gap: 6px;
}
.lcard:hover { transform: translateY(-3px); box-shadow: 0 6px 0 rgba(44,58,85,.08); border-color: var(--blue); }
.lcard .lc-top { display: flex; align-items: center; gap: 8px; }
.lcard .lc-idx { width: 26px; height: 26px; border-radius: 9px; font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ink-2); flex: 0 0 auto; }
.lcard.u1 .lc-idx { background: var(--green-soft); color: #15803d; }
.lcard.u2 .lc-idx { background: var(--blue-soft); color: #1d4ed8; }
.lcard.u3 .lc-idx { background: var(--purple-soft); color: #7e22ce; }
.lcard.u4 .lc-idx { background: var(--orange-soft); color: #c2410c; }
.lcard .lc-title { font-size: 14px; font-weight: 700; line-height: 1.35; }
.lcard .lc-meta { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }

/* 响应式：首页小屏 */
@media (max-width: 600px) {
  .home-hero { padding: 20px; }
  .home-hero .h-logo { font-size: 46px; }
  .home-hero .h-title { font-size: 21px; }
}

/* 启动屏文案微调（沿用参考站 .boot 结构） */
.boot-title { background: linear-gradient(90deg, #22c55e, #3d8bfd, #a259ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 测评难度（第 4 档，紫色） */
.tier-tag.t4 { background: linear-gradient(135deg, #c99bff, #7c3aed); }
.ex-chip.t4 .ec-n { background: var(--purple-soft); color: #7e22ce; }
.ex-chip.t4 .ec-tier { color: #7e22ce; }
.ex-chip.t4.active { border-color: var(--purple); }
.ex-chip.t4.done .ec-n { background: linear-gradient(135deg, #ffe27a, #ffc93c); color: #8a5a00; }
.pt.t4 { background: var(--purple-soft); color: #7e22ce; border-color: #e3d4ff; }

/* ---------------- 底部备案号（嵌入右侧滚动区最底，滚到底才出现） ---------------- */
.site-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.97));
  border: 2px solid var(--line);
  border-radius: 12px;
  font-size: 12.5px;
  color: #66758c;
  padding: 10px 16px;
  box-shadow: 0 2px 10px rgba(44,58,85,.05);
}
.site-footer .beian { display: inline-flex; align-items: center; gap: 4px; }
.site-footer .beian a {
  color: #3d8bfd;
  text-decoration: none;
  font-weight: 700;
  transition: color .15s;
}
.site-footer .beian a:hover { color: #2f6fd6; text-decoration: underline; }