/* 模块定位：全站设计基础。核心职责：统一颜色、字体、导航、控件与移动适配。
 * 方法清单：设计变量 / 基础重置 / 网站页头 / 连接状态 / 通用表单。
 * 拆分理由：首页和研究空间共用一份视觉定义，不再各自维护冲突的主题。 */
:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --ink: #253343;
  --muted: #627388;
  --accent: #547abb;
  --line: #dfe5ed;
  --surface: #ffffffed;
  --shadow: 0 16px 48px #354c700c;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  font-synthesis: weight;
  font-size: 16px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
body:has(dialog[open]) { overflow: hidden; }
body[data-background="sand"] { --bg: #faf7f2; --line: #e7e0d8; --surface: #fffdf9f2; }
body[data-background="ice"] { --bg: #edf5fb; --line: #d5e3ee; --surface: #fafdfff2; }
button, input, select, textarea { font: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; transition: color .2s, background .2s, box-shadow .2s; }
button, a, summary { cursor: pointer; }
button { color: inherit; border: 0; background: none; }
button:disabled { opacity: .4; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
button:hover:not(:disabled), a:hover { color: var(--accent); }
[hidden] { display: none !important; }
input, select, textarea { border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; color: var(--ink); padding: 13px; width: 100%; min-width: 0; font-size: 16px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
.skip-link { position: fixed; left: 20px; top: -70px; z-index: 200; padding: 12px; background: white; }
.skip-link:focus { top: 20px; }
.site-header { position: relative; height: 112px; padding: 0 4.5%; display: flex; align-items: center; justify-content: space-between; gap: 25px; z-index: 3; }
.brain-stage > .site-header { position: absolute; inset: 0 0 auto; }
.site-brand { display: flex; align-items: center; gap: 13px; font-size: 24px; font-weight: 650; letter-spacing: 3px; flex-shrink: 0; }
.site-brand-mark { font-size: 46px; color: var(--accent); line-height: 1; }
.site-brand small { display: block; font-size: 12px; letter-spacing: 2px; color: var(--muted); margin-top: 6px; }
.site-nav { display: flex; align-items: center; gap: 36px; color: var(--muted); font-size: 16px; font-weight: 550; }
.site-nav button { font-size: 16px; font-weight: 550; padding: 12px 0; }
.site-nav span { font-size: 12px; margin-left: 5px; }
.site-nav [aria-current="page"] { position: relative; color: var(--ink); }
.site-nav [aria-current="page"]:after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); left: 50%; bottom: -12px; }
.site-actions { display: flex; align-items: center; gap: 25px; }
.site-connection { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.site-connection i { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: #c79663; }
.site-connection i.connected, .site-connection i.online { background: #69a38d; }
.appearance-button { font-size: 15px; font-weight: 600; border: 1px solid #cdd6e2; border-radius: 30px; padding: 12px 18px; background: #ffffff91; white-space: nowrap; }
.appearance-button > span { margin-right: 5px; color: var(--accent); }
@media (max-width: 1100px) {
  .site-nav { gap: 24px; } .site-actions { gap: 15px; }
  .site-actions .site-connection { display: none; }
}
@media (max-width: 650px) {
  .site-header { height: auto; min-height: 132px; padding: 23px 6% 20px; flex-wrap: wrap; gap: 21px 12px; }
  .site-brand { font-size: 21px; gap: 9px; letter-spacing: 1px; }
  .site-brand-mark { font-size: 36px; } .site-brand small { font-size: 11px; letter-spacing: .5px; }
  .site-nav { order: 3; width: 100%; gap: 24px; font-size: 14px; }
  .site-nav button { font-size: 14px; padding: 0; }
  .site-nav [aria-current="page"]:after { bottom: -9px; }
  .site-actions { gap: 0; } .appearance-button { font-size: 14px; padding: 11px 13px; }
  .site-header > .site-connection { max-width: 135px; font-size: 11px; white-space: normal; line-height: 1.6; }
}
@media (prefers-reduced-motion: reduce) { button, a { transition: none; } }