/* 打码文档（/docs/captcha/*）专用样式。
 * 复用 app.css 的令牌，不重定义颜色。左侧导航 + 右侧正文的两栏布局。 */

.cd-layout { display: flex; min-height: 100vh; align-items: flex-start; }

.cd-side {
  width: 248px; flex: 0 0 248px; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; padding: var(--sp-4) var(--sp-3);
  background: var(--surface); border-right: 1px solid var(--border);
}
.cd-brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
  color: var(--fg); text-decoration: none; font-weight: 600;
}
.cd-brand .brand-mark { width: 26px; height: 26px; font-size: 14px; border-radius: 7px; }
.cd-navgroup {
  font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  color: var(--fg-dim); padding: var(--sp-4) var(--sp-2) var(--sp-1);
}
.cd-navlink {
  display: block; padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--fg-muted); text-decoration: none; font-size: var(--fs-sm);
}
.cd-navlink:hover { background: var(--surface-2); color: var(--fg); }
.cd-navlink.active { background: var(--accent-dim); color: var(--fg); font-weight: 500; }

.cd-main {
  flex: 1; min-width: 0; max-width: 900px;
  padding: var(--sp-6) var(--sp-6) var(--sp-7);
}
.cd-main h1 { font-size: var(--fs-3xl); margin: 0 0 var(--sp-2); }
.cd-crumb { font-size: var(--fs-sm); color: var(--fg-dim); margin-bottom: var(--sp-3); }
.cd-crumb a { color: var(--fg-muted); text-decoration: none; }
.cd-crumb a:hover { color: var(--accent-hi); }
.cd-lead { font-size: var(--fs-lg); color: var(--fg); line-height: 1.7; margin: var(--sp-2) 0 var(--sp-4); }
.cd-muted { color: var(--fg-muted); font-size: var(--fs-sm); line-height: 1.75; }

.cd-typebadge {
  display: inline-block; margin: var(--sp-2) 0 var(--sp-3);
  padding: 5px 12px; border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--surface-2); font-size: var(--fs-xs); color: var(--fg-muted);
}
.cd-typebadge code { background: none; border: 0; padding: 0; color: var(--accent-hi); }

.cd-h2 {
  font-size: var(--fs-xl); margin: var(--sp-6) 0 var(--sp-3);
  padding-top: var(--sp-4); border-top: 1px solid var(--border);
}
.cd-main p { line-height: 1.8; font-size: var(--fs-md); }
.cd-main ul, .cd-main ol { line-height: 1.85; font-size: var(--fs-md); padding-left: 22px; }
.cd-main a { color: var(--accent-hi); }
.cd-main code {
  background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 6px; font-size: 12.5px; color: var(--gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cd-main pre.cd-pre {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--sp-4); overflow-x: auto; font-size: 12.5px; line-height: 1.7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--fg);
}
.cd-pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.cd-table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--fs-sm); }
.cd-table th, .cd-table td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top;
}
.cd-table th { color: var(--fg-muted); font-weight: 600; background: var(--surface-2); }
.cd-table td code { font-size: 12px; }
.cd-req { color: var(--danger); font-weight: 600; }
.cd-opt { color: var(--fg-dim); }

.cd-callout {
  border-left: 3px solid var(--accent); background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0;
  font-size: var(--fs-sm); line-height: 1.8;
}
.cd-callout-warn { border-left-color: var(--warn); background: rgba(232,163,61,.07); }

.cd-notes { list-style: disc; }
.cd-notes li { margin: 5px 0; }

.cd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: var(--sp-3); margin: var(--sp-4) 0;
}
.cd-card {
  display: block; padding: var(--sp-4); border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.cd-card:hover { border-color: var(--accent-dim); background: var(--surface-2); }
.cd-card-title { font-size: var(--fs-lg); color: var(--fg); font-weight: 600; margin-bottom: 4px; }
.cd-card-type { margin-bottom: 6px; }
.cd-card-type code { font-size: 11.5px; }
.cd-card-sum { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.6; }

.cd-foot {
  margin-top: var(--sp-7); padding-top: var(--sp-4); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--fg-muted);
}

@media (max-width: 900px) {
  .cd-layout { flex-direction: column; }
  .cd-side {
    position: static; width: 100%; flex: none; height: auto;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  .cd-main { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
}

/* ---------- 验证码示意图 ---------- */

.cd-preview {
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
}
.cd-preview svg { display: block; max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.cd-preview figcaption {
  font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7;
  text-align: center; max-width: 620px;
}

.cd-card-thumb {
  margin: calc(var(--sp-2) * -1) 0 var(--sp-3);
  padding: var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
}
.cd-card-thumb svg { display: block; width: 100%; height: auto; }
.cd-card:hover .cd-card-thumb { background: var(--surface-3); }

/* 总览页的三步上手 */
.cd-steps { margin: 12px 0 16px; padding-left: 22px; line-height: 2; }
.cd-steps li { margin: 2px 0; }