/* 设计变量 + 元素基础样式。配色全在这里: 白天 = 浅金(:root), 夜间 = 暗金黑([data-theme="dark"])。
 * 主题由 head.html 里的内联脚本在首次绘制前写到 <html data-theme>, 切换见 core.js 的 theme()。
 * 其它 css 只用变量, 不写死颜色。 */
:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --surface: #ffffff;
  --surface-2: #fbf8f2;
  --surface-3: #f5eee1;
  --side-bg: #ffffff;
  --line: rgba(184, 142, 79, .18);
  --line-strong: rgba(184, 142, 79, .34);
  --text: #1a1612;
  --muted: #6f675b;
  --dim: #9e9484;
  --primary: #926f34;
  --primary-strong: #785623;
  --primary-soft: #f5eee1;
  --on-primary: #ffffff;
  --grad: linear-gradient(135deg, #b88e4f 0%, #926f34 55%, #785623 100%);
  --ok: #3d7d56;
  --ok-soft: #e8f2ea;
  --warn: #b26b12;
  --warn-soft: #fbf0dc;
  --danger: #b8423a;
  --danger-soft: #fbeae7;
  --focus: rgba(184, 142, 79, .28);
  --glow: rgba(216, 178, 110, .38);
  --shadow: 0 4px 20px -2px rgba(146, 111, 52, .06), 0 2px 6px -1px rgba(146, 111, 52, .04);
  --shadow-lg: 0 20px 50px -8px rgba(60, 44, 20, .28);
  --backdrop: rgba(26, 22, 18, .42);
  /* 代码面板(nginx 配置预览等): 比对话框深一档的暖色, 滚动提示阴影 */
  --code-bg: #f6efe2;
  --code-head: #efe5d2;
  --code-shade: rgba(120, 86, 35, .26);
  --code-key: #8a6224;
  --code-comment: #a3977f;
  /* 欢迎页的碎金: 亮面 / 本色 / 暗面 */
  --gold-1: #f0d79b;
  --gold-2: #c9a14f;
  --gold-3: #8a6524;
  --scroll-thumb: rgba(146, 111, 52, .28);
  --scroll-thumb-hover: rgba(146, 111, 52, .55);
  /* 圆角照 design/d01 截图(code.html): 卡片/输入框/菜单项 4px, 按钮/标签组/下拉 8px, 弹窗 12px, 徽章/圆点全圆 */
  --radius: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --display: "Manrope", var(--sans);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0f;
  --surface: #161615;
  --surface-2: #1b1b1a;
  --surface-3: #232222;
  --side-bg: #0a0a0a;
  --line: rgba(177, 140, 77, .14);
  --line-strong: rgba(177, 140, 77, .3);
  --text: #dcd8d4;
  --muted: #a79c8d;
  --dim: #7a7166;
  --primary: #b18c4d;
  --primary-strong: #d0a45e;
  --primary-soft: rgba(177, 140, 77, .13);
  --on-primary: #17120a;
  --grad: linear-gradient(135deg, #d0a45e 0%, #b18c4d 55%, #8a6a35 100%);
  --ok: #8da892;
  --ok-soft: rgba(141, 168, 146, .14);
  --warn: #d9a45b;
  --warn-soft: rgba(217, 164, 91, .14);
  --danger: #e57373;
  --danger-soft: rgba(229, 115, 115, .14);
  --focus: rgba(177, 140, 77, .3);
  --glow: rgba(177, 140, 77, .38);
  --shadow: 0 4px 12px -2px rgba(0, 0, 0, .45);
  --shadow-lg: 0 20px 40px -8px rgba(0, 0, 0, .7);
  --backdrop: rgba(0, 0, 0, .6);
  --code-bg: #0c0c0b;
  --code-head: #121211;
  --code-shade: rgba(208, 164, 94, .2); /* 深色底上黑阴影看不见, 用一层淡金光表示「还有内容」 */
  --code-key: #d0a45e;
  --code-comment: #6f675d;
  --gold-1: #f5da9a;
  --gold-2: #cda45c;
  --gold-3: #7d5f28;
  --scroll-thumb: rgba(177, 140, 77, .26);
  --scroll-thumb-hover: rgba(177, 140, 77, .55);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.5 var(--sans); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
::selection { background: var(--focus); }
/* 滚动条: 细、小圆角(和全站 --radius 一个风格)、金色系。
   标准属性只给 Firefox: Chrome 121+ 只要看到 scrollbar-width/color 就忽略下面的 ::-webkit-*, 画它自己的胶囊形 */
@supports (-moz-appearance: none) {
  html { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 2px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-strong); text-decoration: underline; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
code, pre, textarea.code { font-family: var(--mono); font-size: 12.5px; }
pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
[hidden] { display: none !important; }
.icon { width: 16px; height: 16px; flex: none; vertical-align: -3px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.ellipsis { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }