/* docs-style.css — 标记线文档站 · 真正的 Aero Glass（Vista/Win7 玻璃质感）
   关键：明显半透明 + backdrop-filter 透出背景；蓝玻璃标题栏 + 顶白高光底暗边；
   多层边框模拟玻璃折射边；小圆角(8px)。亮色蓝玻璃 + 暗色玻璃双主题。 */

:root {
  /* 玻璃材质（明显半透明，让背后背景透出模糊） */
  --glass: rgba(255, 255, 255, 0.24);
  --glass-strong: rgba(255, 255, 255, 0.38);
  /* Vista 玻璃的"厚度感"：上亮下透的渐变，比平铺 alpha 更像玻璃 */
  --glass-grad: linear-gradient(165deg, rgba(255, 255, 255, 0.52) 0%, rgba(255, 255, 255, 0.34) 45%, rgba(255, 255, 255, 0.16) 100%);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-hi: rgba(255, 255, 255, 0.9);     /* 顶/左高光 */
  --glass-lo: rgba(20, 50, 90, 0.18);       /* 底/右暗边 */
  --glass-shadow: 0 12px 34px rgba(20, 50, 90, 0.22);

  /* 蓝玻璃标题栏（Vista 经典） */
  --aero-title: linear-gradient(180deg, rgba(196, 232, 255, 0.4) 0%, rgba(112, 182, 240, 0.48) 48%, rgba(62, 146, 218, 0.62) 100%);
  --aero-title-text: #ffffff;
  --aero-title-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);

  --aero-text: #15233a;
  --aero-muted: #3f5876;
  --aero-accent: #1f6fc4;
  --aero-accent-soft: rgba(31, 111, 196, 0.14);
  --aero-radius: 8px;
  --aero-blur: 26px;

  --ifm-navbar-height: 60px;
  --ifm-sidebar-width: 300px;
  --ifm-container-width: 1140px;
  --ifm-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --ifm-line-height-base: 1.65;
}

[data-theme="dark"] {
  --glass: rgba(22, 30, 52, 0.32);
  --glass-strong: rgba(22, 30, 52, 0.46);
  --glass-grad: linear-gradient(165deg, rgba(52, 68, 104, 0.5) 0%, rgba(34, 46, 76, 0.36) 50%, rgba(22, 30, 52, 0.22) 100%);
  --glass-border: rgba(150, 185, 230, 0.28);
  --glass-hi: rgba(200, 225, 255, 0.4);
  --glass-lo: rgba(0, 0, 0, 0.4);
  --glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);

  --aero-title: linear-gradient(180deg, rgba(70, 100, 150, 0.42) 0%, rgba(40, 66, 110, 0.5) 50%, rgba(22, 38, 72, 0.68) 100%);
  --aero-title-text: #eaf2ff;
  --aero-text: #e6ecf5;
  --aero-muted: #9fb0c6;
  --aero-accent: #5aa9ff;
  --aero-accent-soft: rgba(90, 169, 255, 0.16);
}

/* ===== 背景：明显的彩色光斑，让玻璃有内容可折射模糊 ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ifm-font-family-base);
  color: var(--aero-text);
  line-height: var(--ifm-line-height-base);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 55% 45% at 12% 16%, rgba(64, 150, 255, 0.8), transparent 62%),
    radial-gradient(ellipse 45% 40% at 88% 22%, rgba(170, 85, 247, 0.7), transparent 60%),
    radial-gradient(ellipse 50% 42% at 72% 92%, rgba(38, 208, 188, 0.65), transparent 62%),
    radial-gradient(ellipse 38% 34% at 28% 88%, rgba(255, 110, 180, 0.5), transparent 60%),
    linear-gradient(160deg, #6fa8e6, #8d76e0);
  background-attachment: fixed;
  transition: color .2s ease;
}
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 55% 45% at 12% 16%, rgba(40, 96, 210, 0.55), transparent 62%),
    radial-gradient(ellipse 45% 40% at 88% 22%, rgba(120, 60, 210, 0.5), transparent 60%),
    radial-gradient(ellipse 50% 42% at 72% 92%, rgba(24, 150, 168, 0.45), transparent 62%),
    radial-gradient(ellipse 38% 34% at 28% 88%, rgba(190, 60, 130, 0.35), transparent 60%),
    linear-gradient(160deg, #0a0e1a, #121627);
}
a { color: var(--aero-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== 顶栏：蓝玻璃标题栏（半透明 + 顶部白高光 + 底部暗边） ===== */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--ifm-navbar-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem; z-index: 200;
  background: var(--aero-title);
  -webkit-backdrop-filter: blur(var(--aero-blur)) saturate(180%);
  backdrop-filter: blur(var(--aero-blur)) saturate(180%);
  border: 1px solid var(--glass-border);
  border-bottom-color: var(--glass-lo);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 12px rgba(20, 50, 90, 0.32);
}
.navbar__left { display: flex; align-items: center; gap: .75rem; }
.navbar__brand { font-size: 1.1rem; font-weight: 700; color: var(--aero-title-text); display: flex; align-items: center; gap: .4rem; text-shadow: var(--aero-title-shadow); }
.navbar__brand:hover { text-decoration: none; }
.navbar__links { display: flex; align-items: center; gap: .75rem; }
.navbar__link { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; color: var(--aero-title-text); font-weight: 600; font-size: .9rem; text-shadow: var(--aero-title-shadow); padding: .35rem .8rem; border-radius: 6px; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.4); transition: background .15s; }
.navbar__link .ic, .navbar__link .txt { transition: opacity .25s ease; }
.navbar__link .txt { position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; white-space: nowrap; }
.navbar__link:hover { color: #fff; background: rgba(255, 255, 255, 0.32); text-decoration: none; }
.navbar__link:hover .ic { opacity: 0; }
.navbar__link:hover .txt { opacity: 1; }
.theme-toggle {
  background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(255, 255, 255, 0.55); cursor: pointer;
  width: 34px; height: 34px; border-radius: 6px; font-size: 17px; color: #fff;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.36); }
.navbar__toggle { display: none; background: transparent; border: 0; cursor: pointer; font-size: 22px; color: #fff; }

/* ===== 侧边栏：玻璃面板（左亮右暗折射边） ===== */
.sidebar {
  position: fixed; top: var(--ifm-navbar-height); left: 0; bottom: 0;
  width: var(--ifm-sidebar-width);
  overflow-y: auto; padding: 1rem 0;
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  border-right: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), inset 1px 0 0 rgba(255, 255, 255, 0.35), inset -1px 0 0 rgba(20, 50, 90, 0.1);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar-group { margin-bottom: .25rem; }
.sidebar-group__title {
  display: flex; align-items: center; gap: .4rem;
  padding: .5rem .75rem; font-size: .95rem; font-weight: 700; color: var(--aero-text);
}
.sidebar-link {
  display: block; padding: .4rem .75rem; margin: 0 .5rem; border-radius: 6px;
  border: 1px solid transparent;
  font-size: .9rem; color: var(--aero-muted); font-weight: 500;
  transition: background .15s, color .15s, box-shadow .15s, border-color .15s;
}
/* 悬浮：白玻璃 */
.sidebar-link:hover { background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); color: var(--aero-text); text-decoration: none; }
[data-theme="dark"] .sidebar-link:hover { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
/* 选中：蓝玻璃 */
.sidebar-link.active {
  background: linear-gradient(180deg, rgba(150, 200, 250, 0.5), rgba(62, 146, 218, 0.66));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 5px rgba(20, 50, 90, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}
[data-theme="dark"] .sidebar-link.active {
  background: linear-gradient(180deg, rgba(90, 130, 190, 0.62), rgba(40, 80, 150, 0.74));
  color: #eaf4ff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 5px rgba(0, 0, 0, 0.4);
  border-color: rgba(150, 185, 230, 0.35);
}

/* ===== 主体 ===== */
.main-wrapper { margin-left: var(--ifm-sidebar-width); padding-top: var(--ifm-navbar-height); }
.main-inner { display: flex; gap: 1.5rem; max-width: var(--ifm-container-width); margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* 内容区 = 一个 Aero 玻璃窗口：小圆角 + 多层折射边 + 顶部高光带 */
.content {
  flex: 1; min-width: 0; max-width: 780px; position: relative; overflow: hidden;
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--aero-radius);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    inset 1px 0 0 rgba(255, 255, 255, 0.35),
    inset -1px 0 0 rgba(20, 50, 90, 0.08),
    var(--glass-shadow);
  padding: 2rem 2.25rem;
}

/* ===== 右侧目录 TOC ===== */
.toc {
  width: 210px; flex-shrink: 0; position: sticky;
  top: calc(var(--ifm-navbar-height) + 1rem); align-self: flex-start;
  max-height: calc(100vh - 100px); overflow-y: auto; font-size: .8rem;
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: var(--aero-radius);
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), var(--glass-shadow);
  padding: 1rem 1.1rem;
}
.toc__title { font-weight: 700; color: var(--aero-text); margin-bottom: .5rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--glass-border); }
.toc li { padding: .2rem 0 .2rem .8rem; }
.toc a { color: var(--aero-muted); display: block; }
.toc a:hover, .toc a.active { color: var(--aero-accent); text-decoration: none; }
.toc .toc-h3 { padding-left: 1.6rem; }

/* ===== Markdown 正文 ===== */
.markdown { color: var(--aero-text); }
.markdown h1 { font-size: 2rem; font-weight: 700; line-height: 1.25; margin: 0 0 1.5rem; }
.markdown h1:first-child { font-size: 3rem; margin-bottom: 2rem; }
.markdown h2 { font-size: 1.7rem; font-weight: 700; line-height: 1.25; margin: 2.4rem 0 1rem; padding-bottom: .4rem; border-bottom: 1px solid var(--glass-border); }
.markdown h3 { font-size: 1.35rem; font-weight: 600; line-height: 1.25; margin: 1.8rem 0 .75rem; }
.markdown h4 { font-size: 1.05rem; font-weight: 700; margin: 1.4rem 0 .5rem; }
.markdown p { margin: 0 0 1rem; line-height: var(--ifm-line-height-base); }
.markdown ul, .markdown ol { margin: 0 0 1rem; padding-left: 2rem; }
.markdown li { margin: .25rem 0; }
.markdown a { color: var(--aero-accent); }
.markdown a:hover { text-decoration: underline; }
.markdown code {
  font-family: var(--ifm-font-family-monospace); font-size: .9rem;
  background: var(--aero-accent-soft); border: 1px solid var(--glass-border);
  border-radius: 5px; padding: .12rem .35rem; color: var(--aero-text);
}
.markdown pre {
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); border-radius: 8px;
  padding: 1rem; overflow: auto; margin: 0 0 1rem; box-shadow: var(--glass-shadow);
}
.markdown pre code { background: transparent; border: 0; padding: 0; font-size: .9rem; color: var(--aero-text); }
.markdown blockquote { margin: 0 0 1rem; padding: .6rem 1rem; border-left: 3px solid var(--aero-accent); background: var(--aero-accent-soft); border-radius: 0 8px 8px 0; color: var(--aero-muted); }
.markdown blockquote p { margin: 0; }
.markdown hr { background: var(--glass-border); border: 0; height: 1px; margin: 1.5rem 0; }
.markdown table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; display: block; overflow: auto; }
.markdown th, .markdown td { border: 1px solid var(--glass-border); padding: .75rem; text-align: left; }
.markdown thead tr { border-bottom: 2px solid var(--glass-border); }
.markdown tbody tr:nth-child(2n) { background: rgba(255, 255, 255, 0.25); }
[data-theme="dark"] .markdown tbody tr:nth-child(2n) { background: rgba(255, 255, 255, 0.05); }
.markdown img { max-width: 100%; border-radius: 8px; box-shadow: var(--glass-shadow); }

/* ===== 卡片（首页入口）：玻璃 + 顶高光 + 折射边 ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin: 1.5rem 0; }
.card {
  position: relative; overflow: hidden;
  background: var(--glass-grad);
  -webkit-backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: var(--aero-radius);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    var(--glass-shadow);
  padding: 1.5rem; text-align: center; transition: transform .2s, box-shadow .2s, border-color .2s; cursor: pointer; display: block; color: inherit;
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, var(--glass-hi), transparent); pointer-events: none;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(20, 50, 90, 0.3); border-color: var(--aero-accent); text-decoration: none; }
.card-icon { font-size: 2.5rem; margin-bottom: .75rem; position: relative; }
.card-title { font-size: 1.2rem; font-weight: 700; margin-bottom: .4rem; color: var(--aero-text); position: relative; }
.card-desc { font-size: .875rem; color: var(--aero-muted); margin-bottom: 1rem; position: relative; }
.card-btn {
  position: relative; display: inline-block; padding: .4rem 1.1rem; border-radius: 2rem; font-size: .85rem; font-weight: 600;
  color: var(--aero-accent); border: 1px solid var(--aero-accent); transition: all .2s;
}
.card:hover .card-btn { background: var(--aero-accent); color: #fff; }

.card-grid-small { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.card-small {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  backdrop-filter: blur(var(--aero-blur)) saturate(160%);
  border: 1px solid var(--glass-border); border-radius: var(--aero-radius); padding: 1rem;
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow); transition: transform .2s, border-color .2s;
}
.card-small:hover { border-color: var(--aero-accent); transform: translateY(-2px); }
.card-small h4 { margin: 0 0 .4rem; font-size: 1rem; color: var(--aero-text); }
.card-small p { margin: 0; font-size: .85rem; color: var(--aero-muted); }

.coming-soon {
  text-align: center; padding: 3rem 1.25rem;
  background: var(--glass); -webkit-backdrop-filter: blur(var(--aero-blur)); backdrop-filter: blur(var(--aero-blur));
  border: 1px dashed var(--glass-border); border-radius: var(--aero-radius); margin: 1.5rem 0;
}
.coming-soon h3 { color: var(--aero-muted); }

.docs-footer { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--glass-border); color: var(--aero-muted); font-size: .8rem; text-align: center; }

.back-home {
  position: fixed; bottom: 1.3rem; right: 1.3rem; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--aero-title); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px rgba(20, 50, 90, 0.32); border: 1px solid var(--glass-border); z-index: 190;
}
.back-home:hover { color: #fff; text-decoration: none; }

/* ===== 移动端 ===== */
@media (max-width: 996px) {
  .navbar__toggle { display: block; }
  .sidebar { transform: translateX(-100%); transition: transform .25s; z-index: 199; box-shadow: var(--glass-shadow); }
  .sidebar.open { transform: translateX(0); }
  .main-wrapper { margin-left: 0; }
  .toc { display: none; }
  .sidebar-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 198; opacity: 0; visibility: hidden; transition: .2s; }
  .sidebar-overlay.show { opacity: 1; visibility: visible; }
}