/* ═══════════════════ UE Gameplay 宝典 · 共享样式 ═══════════════════ */
:root {
  --bg: #0d1117; --surface: #161b22; --border: #30363d;
  --text: #c9d1d9; --text-dim: #8b949e; --accent: #58a6ff;
  --accent2: #f0883e; --green: #3fb950; --red: #f85149;
  --purple: #a371f7; --yellow: #d29922;
  --tag-bg: #1c2128; --code-bg: #1c2128; --mem-bg: #1a2330;
  --radius: 10px; --shadow: 0 2px 8px rgba(0,0,0,.3);
  --fs: 15px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.7;
  padding: 8px 12px 40px; max-width: 860px; margin: 0 auto;
  font-size: var(--fs); -webkit-text-size-adjust: 100%;
}

/* ── Progress bar ── */
#pbar-w { position:fixed; top:0; left:0; width:100%; height:3px; background:var(--border); z-index:100; }
#pbar-f { height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--purple)); transition:width .1s linear; }

/* ── Header ── */
.page-header { text-align:center; padding:18px 10px 6px; position:sticky; top:3px; background:var(--bg); z-index:9; border-bottom:1px solid var(--border); margin-bottom:4px; }
.page-header h1 { font-size:1.35rem; background:linear-gradient(135deg,var(--accent),var(--purple)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.page-header .sub { color:var(--text-dim); font-size:.74rem; margin-top:2px; }
.page-header .back { display:inline-block; font-size:.72rem; color:var(--accent); text-decoration:none; margin-top:2px; }
#mst { font-size:.7rem; color:var(--green); }

/* ── Home page ── */
.home-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
@media (max-width:440px) { .home-grid { grid-template-columns:1fr; } }
.home-card {
  display:block; text-decoration:none; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:13px 14px; transition:.15s; box-shadow:var(--shadow);
}
.home-card:hover { border-color:var(--accent); }
.home-card .ic { font-size:1.3rem; }
.home-card h3 { font-size:.92rem; margin:2px 0; }
.home-card .meta { font-size:.72rem; color:var(--text-dim); }
.home-card .cnt { font-size:.7rem; color:var(--green); }

/* ── Toolbar ── */
#tb { position:sticky; top:87px; z-index:9; background:var(--bg); padding:5px 0 3px; display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
#tb button { font-size:.68rem; padding:3px 9px; border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text-dim); cursor:pointer; white-space:nowrap; transition:.15s; -webkit-tap-highlight-color:transparent; }
#tb button:hover, #tb button.on { color:var(--accent); border-color:var(--accent); }
#tb #fs-group { display:flex; gap:2px; margin-left:auto; }
#tb #fs-group button { padding:3px 7px; }

/* ── Search ── */
#search { width:100%; padding:9px 14px; border-radius:20px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:.88rem; outline:none; transition:border .2s; margin:4px 0 2px; }
#search:focus { border-color:var(--accent); }
#no-result { display:none; text-align:center; color:var(--text-dim); padding:40px 10px; font-size:.9rem; }

/* ── Stats ── */
#stats { display:flex; justify-content:space-between; padding:2px 2px 4px; font-size:.72rem; color:var(--text-dim); margin-bottom:4px; }

/* ── Q&A Card ── */
.qa { margin-top:8px; border:1px solid var(--border); border-radius:8px; overflow:hidden; background:var(--bg); position:relative; }
.qa.done { border-left:3px solid var(--green); }
.qa.mastered { opacity:.55; }
.qa.hidden { display:none; }
.qa-h { display:flex; align-items:flex-start; gap:7px; padding:9px 10px; cursor:pointer; user-select:none; transition:background .15s; }
.qa-h:hover { background:#1a2030; }
.qa-h .qi { color:var(--accent); font-weight:700; font-size:.85rem; flex-shrink:0; margin-top:1px; }
.qa-h .qt { flex:1; font-size:.87rem; font-weight:500; line-height:1.4; }
.qa-h .qr { color:var(--text-dim); font-size:.72rem; transition:transform .2s; flex-shrink:0; margin-top:2px; }
.qa.open .qa-h .qr { transform:rotate(90deg); }
.qa-b { display:none; padding:0 10px 10px 28px; font-size:.83rem; border-top:1px solid var(--border); animation:fi .2s; }
.qa.open .qa-b { display:block; }
@keyframes fi { from{opacity:0} to{opacity:1} }

.qa-b p { margin:5px 0; }
.qa-b ul, .qa-b ol { padding-left:18px; margin:3px 0; }
.qa-b li { margin:2px 0; }
.qa-b code { background:var(--code-bg); padding:1px 5px; border-radius:4px; font-size:.8rem; color:var(--accent2); }
.qa-b strong { color:var(--yellow); }
.qa-b em { color:var(--green); font-style:normal; }
.qa-b h4 { color:var(--purple); margin:8px 0 4px; font-size:.85rem; }
.qa-b .mem { background:var(--mem-bg); border-left:3px solid var(--accent); padding:7px 10px; margin:7px 0; border-radius:0 6px 6px 0; font-size:.8rem; }
.qa-b .mem strong { color:var(--accent); }
.qa-b .tip { background:#1a3020; border-left:3px solid var(--green); padding:6px 10px; margin:7px 0; border-radius:0 6px 6px 0; font-size:.79rem; }
.qa-b .tip strong { color:var(--green); }
.qa-b table { width:100%; border-collapse:collapse; font-size:.8rem; margin:6px 0; }
.qa-b th, .qa-b td { padding:5px 6px; text-align:left; border-bottom:1px solid var(--border); }

/* ── Check button ── */
.chk { position:absolute; top:8px; right:34px; width:22px; height:22px; border-radius:50%; border:2px solid var(--border); background:transparent; cursor:pointer; z-index:2; font-size:.65rem; display:flex; align-items:center; justify-content:center; transition:.15s; color:transparent; }
.qa.done .chk { border-color:var(--green); background:var(--green); color:#fff; }

/* ── Tag ── */
.tag { display:inline-block; font-size:.67rem; padding:1px 6px; border-radius:10px; margin-left:4px; background:var(--tag-bg); border:1px solid var(--border); }
.tag.hot { border-color:var(--red); color:var(--red); }
.tag.core { border-color:var(--accent); color:var(--accent); }
.tag.ue { border-color:var(--purple); color:var(--purple); }

/* ── Quiz mode ── */
.quiz .qa-b { display:none !important; }
.quiz .qa.show-answer .qa-b { display:block !important; }
#quiz-hint { display:none; text-align:center; padding:6px; color:var(--accent2); font-size:.78rem; font-weight:500; }

/* ── BTT ── */
#btt { position:fixed; bottom:22px; right:18px; width:40px; height:40px; border-radius:50%; background:var(--accent); color:#fff; border:none; font-size:1.1rem; cursor:pointer; opacity:.65; transition:opacity .2s; z-index:20; box-shadow:0 4px 12px rgba(88,166,255,.3); display:none; }
#btt:hover { opacity:1; }

/* ── Footer ── */
.site-footer { text-align:center; padding:20px 0 10px; color:var(--text-dim); font-size:.7rem; }

/* ── Responsive ── */
@media (max-width:480px) {
  body { padding:6px 6px 32px; }
  .qa-h { padding:7px 8px; } .qa-b { padding:0 8px 8px 20px; font-size:.81rem; }
  .page-header h1 { font-size:1.2rem; }
  #tb button { font-size:.65rem; padding:3px 7px; }
}

/* ── Light theme ── */
@media (prefers-color-scheme:light) {
  :root { --bg:#ffffff; --surface:#f6f8fa; --border:#d0d7de; --text:#1f2328; --text-dim:#656d76; --accent:#0969da; --tag-bg:#eef1f5; --code-bg:#eef1f5; --mem-bg:#eef5ff; }
  .qa-b .tip { background:#e6ffec; }
  .qa-h:hover { background:#eef1f5; }
}
body.light { --bg:#ffffff; --surface:#f6f8fa; --border:#d0d7de; --text:#1f2328; --text-dim:#656d76; --accent:#0969da; --tag-bg:#eef1f5; --code-bg:#eef1f5; --mem-bg:#eef5ff; }
body.light .qa-b .tip { background:#e6ffec; }
body.light .qa-h:hover { background:#eef1f5; }