/* 总入口页与学习路线图共用的样式：颜色变量（亮色 / 暗色）、顶栏、页脚 */
:root {
  --bg: #fafafa; --surface: #ffffff; --fg: #111827; --text: #374151; --muted: #6b7280; --faint: #9ca3af;
  --line: #e5e7eb; --grid: rgba(17, 24, 39, 0.045); --glow: rgba(88, 86, 214, 0.10);
  --header: rgba(255, 255, 255, 0.72); --btn: #111827; --btn-fg: #ffffff;
  --blue: #007aff; --cyan: #5ac8fa; --purple: #af52de;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 30px rgba(15, 23, 42, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0a0a; --surface: #111113; --fg: #f3f4f6; --text: #d4d4d8; --muted: #a1a1aa; --faint: #71717a;
    --line: #27272a; --grid: rgba(255, 255, 255, 0.05); --glow: rgba(88, 86, 214, 0.18);
    --header: rgba(255, 255, 255, 0.06); --btn: #f3f4f6; --btn-fg: #111827;
    --blue: #3b9eff; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
}
:root[data-theme="dark"] {
  --bg: #0a0a0a; --surface: #111113; --fg: #f3f4f6; --text: #d4d4d8; --muted: #a1a1aa; --faint: #71717a;
  --line: #27272a; --grid: rgba(255, 255, 255, 0.05); --glow: rgba(88, 86, 214, 0.18);
  --header: rgba(255, 255, 255, 0.06); --btn: #f3f4f6; --btn-fg: #111827;
  --blue: #3b9eff; --shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg); line-height: 1.6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
               "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* 内容少的页面（学习卡、搜索）页脚也贴在底部 */
  min-height: 100vh; display: flex; flex-direction: column;
}
body > footer { margin-top: auto; }
::selection { background-color: color-mix(in srgb, var(--blue) 22%, transparent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px;
}
a { color: inherit; text-decoration: none; }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* header */
header {
  position: sticky; top: 0; z-index: 10; background: var(--header);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
header nav { display: flex; align-items: center; height: 60px; gap: 8px; }
.brand { font-weight: 800; font-size: 18px; letter-spacing: -0.01em; white-space: nowrap; }
.brand b { background: linear-gradient(90deg, var(--blue), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tabs { flex: 1; display: flex; justify-content: center; align-items: center; gap: 4px; }
.tabs a { padding: 8px 14px; font-size: 14px; color: var(--muted); border-radius: 8px; transition: color .15s; white-space: nowrap; }
@media (max-width: 1440px) { .tabs a { padding: 8px 8px; font-size: 13.5px; } }
@media (max-width: 1280px) { .tabs a { padding: 8px 6px; font-size: 13px; } }
.tabs a:hover { color: var(--fg); }
.tabs .sep { width: 1px; height: 16px; background: var(--line); margin: 0 6px; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand .logo { width: 26px; height: 26px; flex: none; }
.tabs-books { display: none; }          /* 各本手册收进"手册"下拉，顶栏不再平铺成一排 */
/* 顶栏的下拉菜单：<details> 实现，assets/aig-menu.js 负责点别处时收起 */
.tabs .menu { position: relative; }
.tabs summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 3px; padding: 8px 12px;
                font-size: 14px; color: var(--muted); border-radius: 8px; white-space: nowrap; user-select: none; }
.tabs summary::-webkit-details-marker { display: none; }
.tabs summary:hover, .tabs .menu[open] > summary { color: var(--fg); }
.tabs summary.on { color: var(--fg); font-weight: 600; }
.tabs .chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
              stroke-linejoin: round; transition: transform .15s; }
.tabs .menu[open] .chev { transform: rotate(180deg); }
.menu-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; display: flex; flex-direction: column;
              min-width: 280px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface);
              box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14); }
.menu-panel--right { left: auto; right: 0; }
.tabs .menu-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; color: var(--fg); white-space: nowrap; }
.tabs .menu-item b { font-size: 14px; font-weight: 600; }
.tabs .menu-item span { font-size: 12.5px; color: var(--muted); }
.tabs .menu-item:hover { background: rgba(127, 127, 127, 0.1); }
.tabs .menu-item.on b { color: var(--blue); }
.tabs .menu-item.on::after { display: none; }
.menu--books { display: block; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; color: var(--muted); background: transparent; border: 0; cursor: pointer;
}
.icon-btn:hover { color: var(--fg); background: rgba(127, 127, 127, 0.1); }
.icon-btn svg { width: 20px; height: 20px; }
.sun { display: none; }
:root[data-theme="dark"] .sun { display: block; } :root[data-theme="dark"] .moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sun { display: block; } :root:not([data-theme="light"]) .moon { display: none; }
}

footer { border-top: 1px solid var(--line); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 28px; padding-bottom: 36px; font-size: 13px; color: var(--faint); }
footer a:hover { color: var(--fg); }

.c-indigo { --c: #5856d6; } .c-blue { --c: #007aff; } .c-purple { --c: #af52de; }
.c-orange { --c: #ff9500; } .c-green { --c: #34c759; } .c-teal { --c: #30b0c7; } .c-pink { --c: #ff2d55; }
.c-red { --c: #ff3b30; } .c-brown { --c: #a2845e; } .c-mint { --c: #00c7be; } .c-slate { --c: #64748b; } .c-gold { --c: #d4a017; } .c-ocean { --c: #118ab2; } .c-pine { --c: #0e5e57; }

.tabs a.on { color: var(--fg); font-weight: 600; position: relative; }
.tabs a.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -11px; height: 2px; border-radius: 2px; background: var(--blue); }

/* 顶栏与各本手册的顶栏同宽（手册的 .md-grid 是 64rem，屏宽 ≥1600px、≥2000px 时根字号变成 22px、24px），
   从首页进到手册里时 logo 和右侧按钮不会左右跳；练习题页的 .wrap.wide 仍然占满整屏 */
header nav.wrap { max-width: 1280px; padding: 0 20px; }
@media (min-width: 1600px) { header nav.wrap { max-width: 1408px; } }
@media (min-width: 2000px) { header nav.wrap { max-width: 1536px; } }
@media (max-width: 760px) { header nav.wrap { padding: 0 16px; } }
/* 手机：顶栏只留 logo、「手册」「更多」两个菜单、搜索和配色切换；「学习路线」「练习题」挪进「更多」（.menu-item--m），
   菜单展开成顶栏下方整宽的面板 */
.brand-sub { margin-left: -2px; }
.tabs .menu-item.menu-item--m { display: none; }
@media (max-width: 760px) {
  .brand { margin-right: auto; }
  .brand-sub { display: none; }
  .tabs { flex: 0 0 auto; gap: 0; }
  .tabs > a, .tabs .sep { display: none; }
  .tabs summary { padding: 8px 8px; }
  .tabs .menu-item.menu-item--m { display: flex; }
  .menu-panel, .menu-panel--right { position: fixed; top: 64px; left: 12px; right: 12px; min-width: 0;
                                    max-height: calc(100vh - 80px); overflow-y: auto; }
  header .icon-btn[href*="github.com"] { display: none; }
  .wrap { padding: 0 16px; }
}


/* 正文字号档位：和手册页共用 localStorage 的 aig-font（见 assets/aig-fontsize.js）。
   门户页的字号大多是写死的 px，所以这里用 main 上的 zoom 整体放大，顶栏和页脚不动。 */
:root[data-aig-font="s"]  main { zoom: 0.92; }
:root[data-aig-font="l"]  main { zoom: 1.12; }
:root[data-aig-font="xl"] main { zoom: 1.26; }
.aig-font { display: flex; align-items: center; gap: 4px; padding: 8px 12px 10px; border-top: 1px solid var(--line); }
.aig-font__label { flex: 0 0 auto; margin-right: 4px; font-size: 12px; color: var(--muted); }
.aig-font__btn { flex: 1; font: inherit; font-size: 12px; padding: 3px 0; cursor: pointer; color: var(--fg);
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.aig-font__btn:hover { border-color: var(--blue); color: var(--blue); }
.aig-font__btn[aria-pressed="true"] { color: #fff; background: var(--blue); border-color: var(--blue); }

/* 语言切换：中文页显示 EN，英文页显示 中文 */
.icon-btn.lang-btn { width: auto; padding: 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--line); border-radius: 8px; }