/* ============================================================
   GlassBlog 液态玻璃主题核心
   所有可调样式参数集中在下方 CSS 变量，改这里即可改全站质感
   ============================================================ */
:root {
  /* 液态玻璃参数 */
  --glass-bg: rgba(255, 255, 255, 0.55);      /* 卡片背景透明度 */
  --glass-border: rgba(255, 255, 255, 0.65);  /* 极细白色半透明描边 */
  --glass-blur: 18px;                          /* 磨砂模糊度 */
  --glass-saturate: 160%;                      /* 背景饱和度提升 */
  --glass-radius: 24px;                        /* 大圆角 */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.5); /* 顶部细微高光 */

  /* 全局配色（黑白灰为主，单一辅助色） */
  --bg: #f5f5f7;
  --text: #1d1d1f;
  --text-2: #6e6e73;
  --accent: #0071e3;
}

html.dark {
  --glass-bg: rgba(28, 28, 30, 0.55);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --bg: #000000;
  --text: #f5f5f7;
  --text-2: #86868b;
  --accent: #0a84ff;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", "Segoe UI", sans-serif;
  transition: background 0.4s ease, color 0.4s ease;
}

/* 页面背景：极淡的弥散渐变，为磨砂提供可模糊的内容 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60vw 60vw at 15% 0%, rgba(0, 113, 227, 0.08), transparent 60%),
    radial-gradient(50vw 50vw at 90% 20%, rgba(120, 120, 128, 0.10), transparent 60%),
    radial-gradient(70vw 70vw at 50% 100%, rgba(0, 113, 227, 0.05), transparent 60%);
}

/* ---------- 液态玻璃卡片 ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.4s ease;
}

/* 顶栏：切换页面时位置保持不动。
   导航靠 -translate-x-1/2 水平居中，若 transform 参与过渡，
   每次渲染都会从原位滑到居中（即切换时的多余动画）。
   这里只保留玻璃质感的过渡，transform 即时生效。 */
#nav {
  transition: background 0.4s ease, box-shadow 0.35s ease, border-color 0.4s ease;
}

.glass-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.10), var(--glass-highlight);
}

html.dark .glass-hover:hover {
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), var(--glass-highlight);
}

/* 小尺寸玻璃（标签、按钮、徽章） */
.glass-sm {
  border-radius: calc(var(--glass-radius) / 2);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) / 2)) saturate(var(--glass-saturate));
  backdrop-filter: blur(calc(var(--glass-blur) / 2)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
}

/* ---------- 文字 ---------- */
.text-secondary { color: var(--text-2); }
.text-accent { color: var(--accent); }

/* ---------- 页面加载与过渡（柔和缓慢） ---------- */
.fade-in {
  animation: fadeUp 0.6s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

a, button { transition: all 0.25s ease; }

/* ---------- Markdown 渲染排版 ---------- */
.prose-glass h1, .prose-glass h2, .prose-glass h3 {
  font-weight: 600;
  margin: 1.4em 0 0.6em;
}
.prose-glass h1 { font-size: 1.6rem; }
.prose-glass h2 { font-size: 1.3rem; }
.prose-glass h3 { font-size: 1.1rem; }
.prose-glass p { margin: 0.9em 0; line-height: 1.8; }
.prose-glass ul, .prose-glass ol { margin: 0.9em 0; padding-left: 1.4em; line-height: 1.8; }
.prose-glass ul { list-style: disc; }
.prose-glass ol { list-style: decimal; }
.prose-glass blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1em;
  color: var(--text-2);
  margin: 1em 0;
}
.prose-glass pre {
  background: rgba(120, 120, 128, 0.12);
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.85rem;
  margin: 1em 0;
}
.prose-glass code {
  background: rgba(120, 120, 128, 0.14);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.85em;
}
.prose-glass pre code { background: none; padding: 0; }
.prose-glass img { border-radius: 16px; margin: 1em 0; max-width: 100%; }
.prose-glass a { color: var(--accent); }

/* 滚动条极简化 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, 0.3); border-radius: 8px; }

/* ---------- highlight.js 主题（用变量适配深浅色，替代官方主题 CSS，零额外请求） ---------- */
:root {
  --hljs-keyword: #d73a49; --hljs-string: #032f62; --hljs-comment: #6a737d;
  --hljs-number: #005cc5; --hljs-title: #6f42c1; --hljs-attr: #e36209; --hljs-meta: #22863a;
}
html.dark {
  --hljs-keyword: #ff7b72; --hljs-string: #a5d6ff; --hljs-comment: #8b949e;
  --hljs-number: #79c0ff; --hljs-title: #d2a8ff; --hljs-attr: #ffa657; --hljs-meta: #7ee787;
}
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name { color: var(--hljs-keyword); }
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--hljs-string); }
.hljs-comment, .hljs-quote { color: var(--hljs-comment); font-style: italic; }
.hljs-number, .hljs-symbol { color: var(--hljs-number); }
.hljs-title, .hljs-section { color: var(--hljs-title); }
.hljs-attr, .hljs-attribute, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-built_in { color: var(--hljs-attr); }
.hljs-meta, .hljs-deletion { color: var(--hljs-meta); }

/* 代码块复制按钮 */
.prose-glass pre { position: relative; }
.code-copy {
  position: absolute; top: 8px; right: 8px;
  padding: 3px 10px; font-size: 11px; border-radius: 8px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity .2s;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.prose-glass pre:hover .code-copy { opacity: 1; }

/* ---------- Memos 风格 Markdown 编辑器 ---------- */
.md-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  padding: 6px; border-radius: 14px 14px 0 0;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-bottom: none;
}
.md-toolbar button {
  min-width: 30px; height: 28px; padding: 0 7px; border-radius: 8px;
  font-size: 12px; color: var(--text-2); cursor: pointer;
}
.md-toolbar button:hover { background: rgba(120, 120, 128, 0.15); color: var(--text); }
.md-toolbar .md-sep { width: 1px; height: 16px; background: var(--glass-border); margin: 0 4px; }
.md-editor-area {
  border: 1px solid var(--glass-border); border-radius: 0 0 14px 14px;
  background: var(--glass-bg);
}
.md-editor-area textarea {
  width: 100%; background: transparent; outline: none; resize: vertical;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.md-view-btn { transition: color .15s; }

/* 筛选/标签 chips */
.chip {
  padding: 4px 12px; font-size: 12px; border-radius: 999px; cursor: pointer;
  background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--text-2);
  transition: all .15s; white-space: nowrap;
}
.chip:hover { color: var(--text); }
.chip.on { color: var(--accent); border-color: var(--accent); background: rgba(0, 113, 227, 0.08); }

/* 文章目录（scroll-spy 当前节高亮） */
.toc-item { color: var(--text-2); }
.toc-item.toc-on { color: var(--accent); font-weight: 500; }
/* 目录跳转时标题不被固定导航遮挡 */
.prose-glass h2, .prose-glass h3 { scroll-margin-top: 6rem; }
/* 软件页等带 id 的锚点跳转同样避开固定导航 */
article[id] { scroll-margin-top: 6rem; }

/* ---------- 移动端兼容（参考 Memos 的适配方式） ---------- */
html {
  /* 禁止 iOS 横屏时自动放大文字 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  /* 去掉点按时的灰色高亮闪烁 */
  -webkit-tap-highlight-color: transparent;
  /* 刘海屏横屏时左右安全区（配合 viewport-fit=cover），内容不被圆角/刘海遮挡 */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
/* 100dvh：修复 iOS Safari 100vh 包含动态地址栏导致的底部遮挡 */
@supports (height: 100dvh) {
  .min-h-screen { min-height: 100dvh; }
}
/* iOS 输入框字号 <16px 聚焦时会自动放大页面，移动端统一抬到 16px */
@media (max-width: 640px) {
  input, textarea, select { font-size: 16px !important; }
}
/* 长 URL / 长单词 / 长代码不撑破布局 */
.prose-glass { overflow-wrap: break-word; word-break: break-word; }
.prose-glass pre { word-break: normal; overflow-wrap: normal; }