/* 文档页（关于 / 隐私 / 帮助 / 提交）：视觉跟起始页走，不套工具库的侧栏。
   颜色、圆角、玻璃层全部引 /home.css 的令牌，所以这里只写排布，不再引 mkd-index.css。 */

/* ---------- 顶栏：起始页那块dock玻璃，左品牌右导航 ---------- */
.dbar {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 30;
  display: flex; align-items: center; gap: 12px;
  width: min(880px, calc(100vw - 24px)); padding: 6px 8px 6px 14px;
  border-radius: 999px; background: var(--dock); border: 1px solid var(--dock-line);
  box-shadow: var(--dock-shadow);
  backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6);
}
.dbar-logo { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px }
.dbar-logo img { width: 25px; height: 25px; border-radius: 7px; object-fit: contain }
.dbar-logo b { font-size: 14.5px; font-weight: 750; letter-spacing: -.02em; color: var(--ink); text-shadow: var(--text-sh) }
.dbar-nav { flex: 1; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none }
.dbar-nav::-webkit-scrollbar { display: none }
.dbar-nav a {
  flex: none; padding: 7px 12px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--sub); transition: .15s var(--ease);
}
.dbar-nav a:hover { background: var(--hover); color: var(--ink) }
.dbar-nav a.on { background: color-mix(in srgb, var(--acc) 15%, transparent); color: var(--acc-600) }

/* ---------- 画布：内容是一张浮在壁纸上的玻璃卡，整页滚动 ---------- */
.dwrap {
  position: relative; z-index: 1; width: min(720px, calc(100vw - 32px));
  margin: 0 auto; padding: 104px 0 48px;
}
.dcard {
  padding: 30px 32px 34px; border-radius: var(--r4);
  background: color-mix(in srgb, var(--dock) 74%, transparent);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6);
}
.dcrumb { font-size: 12px; font-weight: 650; letter-spacing: .04em; color: var(--faint) }
.dcard h1 { margin-top: 14px; font-size: 27px; font-weight: 750; letter-spacing: -.025em; line-height: 1.25; color: var(--ink) }
.dcard .lead { margin-top: 10px; font-size: 16.5px; font-weight: 600; line-height: 1.7; color: var(--sub) }
.dcard p { margin-top: 14px; font-size: 14.5px; line-height: 1.85; color: var(--sub) }
/* 二级标题左挂一道强调条，和起始页设置抽屉里的分组同一路子 */
.dcard h2 { position: relative; margin-top: 30px; padding-left: 11px; font-size: 16px; font-weight: 700; color: var(--ink) }
.dcard h2::before { content: ''; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 2px; background: var(--acc) }
.dcard ul { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; list-style: none }
.dcard li { position: relative; padding-left: 15px; font-size: 14px; line-height: 1.75; color: var(--sub) }
.dcard li::before { content: ''; position: absolute; left: 2px; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--acc) }
.dcard a { color: var(--acc-600); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--acc-600) 34%, transparent); text-underline-offset: 3px }
.dcard a:hover { text-decoration-color: var(--acc-600) }
.dcard strong { font-weight: 700; color: var(--ink) }
.dcard code { padding: 2px 6px; border-radius: 6px; background: var(--field); color: var(--ink); font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace }
.dcard .updated {
  margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--faint);
}

/* ---------- 提交表单：控件层级照抄设置抽屉（--field 凹底 + --acc 聚焦） ---------- */
.dcard .form { display: flex; flex-direction: column; gap: 16px; margin-top: 18px }
.dcard .field { display: flex; flex-direction: column; gap: 7px }
.dcard .field > label { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--sub) }
.dcard .field > label span { color: var(--acc-600) }
.dcard input[type=text], .dcard input[type=url], .dcard input[type=email], .dcard textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r2);
  background: var(--field); color: var(--ink); font-size: 14px; line-height: 1.5;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.dcard textarea { min-height: 84px; font-family: inherit; resize: vertical }
.dcard input::placeholder, .dcard textarea::placeholder { color: var(--faint) }
.dcard input:focus, .dcard textarea:focus {
  outline: none; border-color: var(--acc); background: var(--pop);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent);
}
.dcard .hint { font-size: 12px; line-height: 1.6; color: var(--faint) }
/* 分类胶囊：radio 藏起来，焦点环画在 label 上，键盘用户照样看得见选中哪一档 */
.dcard .pills { display: flex; flex-wrap: wrap; gap: 6px }
.dcard .pills input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px }
.dcard .pills label {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--field); color: var(--sub); font-size: 12.5px; font-weight: 600;
  cursor: pointer; transition: .15s var(--ease);
}
.dcard .pills label:hover { color: var(--ink); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)) }
.dcard .pills input:checked + label { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, var(--field)); color: var(--acc-600) }
.dcard .pills input:focus-visible + label { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent) }
/* 校验提示的类名由页面脚本写成 msg is-ok / is-error */
.dcard .msg { padding: 11px 13px; border-radius: var(--r2); font-size: 13px; line-height: 1.6 }
.dcard .msg.is-ok { background: color-mix(in srgb, var(--acc) 12%, var(--field)); color: var(--acc-ink) }
.dcard .msg.is-error { background: color-mix(in srgb, #ef4444 12%, var(--field)); color: #b91c1c }
[data-theme=dark] .dcard .msg.is-error { color: #fca5a5 }
.dcard .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px }
.dcard .mbtn {
  padding: 11px 20px; border: 0; border-radius: 999px; background: var(--acc); color: #04211a;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: .15s var(--ease);
}
.dcard .mbtn:hover { background: var(--acc-600); color: #fff }
[data-theme=dark] .dcard .mbtn:hover { color: #04211a; filter: brightness(1.08) }
.dcard .sep { width: 1px; height: 18px; background: var(--line) }

/* ---------- 页脚：只留链接和备案，正文里不出现这些 ---------- */
.dfoot { margin-top: 26px; font-size: 12px; line-height: 2; text-align: center; color: var(--sub) }
.dfoot a { color: var(--sub) }
.dfoot a:hover { color: var(--acc-600) }
.dfoot .foot-sep { margin: 0 6px; opacity: .5 }
.dfoot .beian a { color: var(--faint) }

@media (max-width: 560px) {
  .dwrap { padding-top: 96px }
  .dbar { gap: 8px; padding-left: 10px }
  .dbar-logo b { display: none }
  .dcard { padding: 22px 18px 26px }
  .dcard h1 { font-size: 22px }
  .dcard .lead { font-size: 15.5px }
  .dcard .actions { gap: 8px }
}