/* domains/web/network.css */
/* network module：网络基础（domain / dns / url / api / http / json / https / cdn） */

/* ---- 共用等宽字体 ---- */
.dom-demo, .dom-anat, .dns-demo, .dns-anat, .url-demo, .url-anat,
.api-demo, .api-anat, .http-demo, .http-anat, .json-demo, .json-anat,
.https-demo, .https-anat, .cdn-demo, .cdn-anat {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Domain 域名 ---- */
.dom-demo { display: flex; flex-direction: column; gap: 8px; }
.dom-demo-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 12px; color: var(--text-2);
  box-shadow: 0 0 0 3px rgba(99,102,241,.08);
}
.dom-demo-row {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 8px;
  padding: 8px 12px; font-size: 12px; color: var(--text);
}
.dom-demo-row .dom-name { font-weight: 600; }
.dom-demo-row .dom-price { margin-left: auto; color: var(--text-2); }
.dom-demo-row .dom-state { font-size: 12px; padding: 1px 7px; border-radius: 99px; }
.dom-demo-row .dom-state.ok { color: var(--green); background: var(--green-light); }
.dom-demo-row .dom-state.taken { color: var(--text-3); background: var(--bg-hover); }
.dom-demo-buy {
  font-size: 12px; color: var(--brand); background: var(--brand-light);
  border-radius: 5px; padding: 3px 9px;
}
.dom-demo-row :is(.dom-name, .dom-state, .dom-price, .dom-demo-buy) {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .dom-demo-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
  }
  .dom-demo-row .dom-state { justify-self: end; }
  .dom-demo-row .dom-price {
    grid-column: 1; grid-row: 2; margin-left: 0;
  }
  .dom-demo-row .dom-demo-buy {
    grid-column: 2; grid-row: 2; justify-self: end;
  }
  .dom-demo-row:not(:has(.dom-demo-buy)) .dom-price {
    grid-column: 2; justify-self: end;
  }
}
.dom-anat { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 600; }
.dom-anat .dom-seg { padding: 3px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--border); }
.dom-anat .dom-seg.sub { color: var(--brand); }
.dom-anat .dom-seg.root { color: var(--text); border-color: var(--brand); }
.dom-anat .dom-seg.tld { color: #ff7d00; }
.dom-anat .dom-dot { color: var(--text-3); }

/* ---- DNS 解析 ---- */
.dns-demo { display: flex; align-items: stretch; gap: 6px; }
.dns-node {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 6px; text-align: center;
}
.dns-node .dns-ico { font-size: 18px; line-height: 1; }
.dns-node .dns-name { font-size: 12px; font-weight: 600; color: var(--text); font-family: -apple-system, "PingFang SC", sans-serif; }
.dns-node .dns-sub { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.dns-arrow { align-self: center; color: var(--text-3); font-size: 12px; flex: none; }
.dns-anat { display: flex; align-items: stretch; gap: 6px; }
.dns-anat .dns-node .ap { display: contents; }
.dns-anat .dns-a {
  align-self: center; font-size: 12px; color: var(--brand); background: var(--brand-light);
  border-radius: 5px; padding: 3px 8px; white-space: nowrap; flex: none;
}

/* ---- URL 网址 ---- */
.url-demo { display: flex; flex-direction: column; gap: 10px; }
.url-bar {
  display: flex; align-items: stretch; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden; font-size: 12px;
}
.url-seg { padding: 7px 4px; color: var(--text); white-space: nowrap; }
.url-seg.proto { background: var(--green-light); color: var(--green); }
.url-seg.host { background: var(--brand-light); color: var(--brand); font-weight: 600; }
.url-seg.path { background: #fff7e8; color: #ff7d00; }
.url-seg.query { background: #f3e8ff; color: #7c3aed; }
.url-seg.hash { background: var(--bg-hover); color: var(--text-2); }
.url-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-3); font-family: -apple-system, "PingFang SC", sans-serif; }
.url-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.url-anat .url-bar { font-size: 13px; }
.url-anat .ap { white-space: nowrap; }

/* ---- API 接口 ---- */
.api-demo { display: flex; flex-direction: column; gap: 8px; }
.api-req, .api-resp {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 12px; line-height: 1.7; color: var(--text);
}
.api-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  border-radius: 4px; padding: 1px 6px; margin-bottom: 4px;
}
.api-req .api-tag { color: var(--brand); background: var(--brand-light); }
.api-resp .api-tag { color: var(--green); background: var(--green-light); }
.api-method { font-weight: 700; color: var(--brand); }
.api-key-token { color: #ff7d00; }
.api-status-ok { color: var(--green); font-weight: 700; }
.api-arrow { text-align: center; color: var(--text-3); font-size: 12px; line-height: 1; }
.api-anat .api-code { font-size: 12px; line-height: 2; }
.api-anat .api-line { display: block; }

/* ---- HTTP 请求 ---- */
.http-demo { display: flex; flex-direction: column; gap: 8px; }
.http-msg {
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 12px; font-size: 12px; line-height: 1.8; color: var(--text-2);
}
.http-msg .http-title { font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .5px; }
.http-method-get { color: var(--green); font-weight: 700; }
.http-method-post { color: var(--brand); font-weight: 700; }
.http-url { color: var(--text); }
.http-head { color: var(--text-3); }
.http-body {
  display: block; margin-top: 4px; background: var(--bg-soft);
  border: 1px dashed var(--border); border-radius: 5px; padding: 4px 8px; color: var(--text);
}
.http-anat .http-msg { font-size: 12px; }
.http-anat .ap { white-space: nowrap; }

/* ---- JSON 数据 ---- */
.json-demo, .json-anat {
  background: #1d2129; border-radius: 8px; padding: 10px 14px;
  font-size: 12px; line-height: 1.8; color: #c9cdd4;
}
.json-demo pre, .json-anat pre { margin: 0; white-space: pre-wrap; }
.json-k { color: #7db3ff; }
.json-s { color: #a6d189; }
.json-n { color: #ffb86c; }
.json-b { color: #f38ba8; }
.json-p { color: #6b7280; }
.json-anat .ap { white-space: nowrap; }

/* ---- HTTPS 安全连接 ---- */
.https-demo { display: flex; flex-direction: column; gap: 10px; }
.https-bar {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 99px;
  padding: 7px 14px; font-size: 12px; color: var(--text);
}
.https-bar .https-lock { color: var(--green); font-size: 12px; }
.https-bar .https-warn {
  font-size: 12px; color: var(--red); background: var(--red-light);
  border-radius: 99px; padding: 2px 8px; flex: none;
}
.https-bar.ok { border-color: #b7eb8f; }
.https-bar.bad { border-color: #ffa39e; }
.https-cap { font-size: 12px; color: var(--text-3); text-align: center; font-family: -apple-system, "PingFang SC", sans-serif; }
.https-anat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.https-anat .https-cert {
  display: flex; flex-direction: column; gap: 2px;
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 10px; font-size: 12px; color: var(--text-2); line-height: 1.5;
}
.https-anat .https-cert b { font-size: 12px; color: var(--text); font-family: -apple-system, "PingFang SC", sans-serif; }
.https-anat .https-tunnel {
  flex: 1; min-width: 60px; height: 8px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--green-light) 0 10px, #d3f2c2 10px 20px);
  border: 1px solid #b7eb8f; position: relative;
}

/* ---- CDN 加速 ---- */
.cdn-demo { display: flex; align-items: stretch; gap: 6px; }
.cdn-origin {
  flex: 1.1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--brand); border-radius: 8px; padding: 8px 6px;
}
.cdn-edges { flex: 1.6; display: flex; flex-direction: column; gap: 5px; }
.cdn-edge {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border-light); border-radius: 7px;
  padding: 4px 10px; font-size: 12px; color: var(--text-2);
  font-family: -apple-system, "PingFang SC", sans-serif;
}
.cdn-edge .cdn-ms { margin-left: auto; color: var(--green); font-family: ui-monospace, Menlo, monospace; }
.cdn-node-name { font-size: 12px; font-weight: 600; color: var(--text); font-family: -apple-system, "PingFang SC", sans-serif; }
.cdn-node-sub { font-size: 12px; color: var(--text-3); }
.cdn-arrow { align-self: center; color: var(--text-3); font-size: 12px; flex: none; }
.cdn-anat { display: flex; align-items: stretch; gap: 6px; }
.cdn-anat .cdn-cache {
  align-self: center; font-size: 12px; color: #ff7d00; background: #fff7e8;
  border-radius: 5px; padding: 3px 8px; white-space: nowrap; flex: none;
}

/* domains/platform/tooling-foundations.css */
/* tooling foundations module：格式与工具（markdown / html / git / terminal / npm / env-var / deployment / database） */

/* ---- Markdown 文档 ---- */
.md-demo { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.md-col { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.md-tag { font-size: 12px; letter-spacing: .6px; color: var(--text-3); }
.md-arrow { align-self: center; flex: none; color: var(--text-3); font-size: 14px; }
.md-src { display: flex; flex-direction: column; gap: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color: var(--text-2); }
.md-out { display: flex; flex-direction: column; gap: 4px; }
.md-l { display: block; line-height: 1.5; }
.md-mark { color: var(--brand); }
.md-h { font-size: 14px; font-weight: 700; color: var(--text); }
.md-p { font-size: 12px; color: var(--text-2); }
.md-li { font-size: 12px; color: var(--text-2); padding-left: 12px; position: relative; }
.md-li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.md-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--bg-soft); border: 1px solid var(--border-light); border-radius: 4px; padding: 2px 6px; color: var(--text-2); }
.md-anat { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }

/* ---- HTML 页面结构 ---- */
.html-demo { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.html-tree { flex: 1.1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.html-node { background: #fff; border: 1px solid var(--border); border-radius: 4px; padding: 2px 7px; color: var(--brand); white-space: nowrap; overflow: hidden; }
.html-node em { color: var(--text-3); font-style: normal; font-family: inherit; }
.html-d1 { margin-left: 14px; }
.html-d2 { margin-left: 28px; }
.html-arrow { align-self: center; flex: none; color: var(--text-3); font-size: 14px; }
.html-page { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.html-anat { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--text); }
.html-punc { color: var(--text-3); }
.html-tagname { color: #7c3aed; font-weight: 600; }
.html-attr { color: #b45309; }
.html-content { color: var(--brand); }

/* ---- Git 版本控制 ---- */
.git-demo { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.git-track { display: flex; align-items: flex-start; }
.git-node { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.git-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.git-dot.git-bad { background: var(--red); box-shadow: 0 0 0 2px var(--red-light); }
.git-msg { font-size: 12px; color: var(--text-3); text-align: center; line-height: 1.3; }
.git-link { flex: 1; min-width: 8px; height: 2px; background: var(--border); margin-top: 5px; }
.git-back { align-self: flex-start; font-size: 12px; color: var(--brand); border: 1px dashed var(--brand); border-radius: 5px; padding: 2px 8px; }
.git-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.git-box { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--text); }
.git-box em { font-style: normal; font-size: 12px; color: var(--text-3); }
.git-arr { flex: none; font-size: 12px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ---- 终端命令行（terminal / git / npm 共用的黑窗口） ---- */
.terminal-win, .git-term, .npm-term { width: 100%; background: #1f2430; border-radius: 8px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; line-height: 1.55; color: #d7dae0; }
.terminal-bar, .git-tbar, .npm-tbar { display: flex; align-items: center; gap: 5px; padding: 6px 9px; background: #2a303c; }
.terminal-bar i, .git-tbar i, .npm-tbar i { width: 7px; height: 7px; border-radius: 50%; background: #454c5c; }
.terminal-bar span, .git-tbar span, .npm-tbar span { font-size: 12px; color: #8a91a0; margin-left: 4px; }
.terminal-body, .git-tb, .npm-tb { padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; text-align: left; }
.terminal-p { color: #4ade80; }
.terminal-c { color: #ffffff; }
.terminal-g { color: #4ade80; }
.terminal-r { color: #f87171; }
.terminal-d { color: #8a91a0; }
.terminal-a { color: #fbbf24; }

/* ---- npm 包管理 ---- */
.npm-demo { display: flex; align-items: center; gap: 8px; width: 100%; }
.npm-card { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-2); }
.npm-tag { font-size: 12px; color: var(--text-3); letter-spacing: .3px; }
.npm-k { color: var(--brand); }
.npm-arrow { flex: none; font-size: 12px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-align: center; }
.npm-anat { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }

/* ---- 环境变量 ---- */
.env-var-demo { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.env-var-file { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
.env-var-tag { font-size: 12px; color: var(--text-3); letter-spacing: .3px; }
.env-var-key { color: var(--brand); font-weight: 600; }
.env-var-file i { color: var(--text-3); font-style: normal; }
.env-var-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.env-var-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--bg-soft); border: 1px solid var(--border-light); border-radius: 5px; padding: 3px 8px; color: var(--text-2); }
.env-var-shield { font-size: 12px; color: #16a34a; }
.env-var-anat { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text); display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.env-var-eq { color: var(--text-3); }
.env-var-val { color: #b45309; }
.env-var-cmt { color: var(--text-3); }

/* ---- 部署上线 ---- */
.deploy-demo { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; width: 100%; }
.deploy-step { flex: none; max-width: 100%; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 12px; color: var(--text-2); white-space: nowrap; }
.deploy-arrow { flex: none; color: var(--text-3); font-size: 12px; font-style: normal; }
.deploy-step.deploy-on { border-color: color-mix(in srgb, var(--brand) 34%, var(--border)); color: var(--brand); background: var(--brand-light); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 650; text-overflow: ellipsis; }

/* ---- 数据库 ---- */
.db-demo { display: flex; align-items: center; gap: 10px; width: 100%; }
.db-table { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size:12px; }
.db-title { display: block; padding: 4px 9px; background: var(--bg-soft); border-bottom: 1px solid var(--border-light); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color: var(--text-2); }
.db-grid { display: grid; grid-template-columns: 24px 1fr 1fr; }
.db-th { padding: 3px 9px; font-weight: 600; color: var(--text); background: var(--bg-soft); border-bottom: 1px solid var(--border-light); font-size:12px; }
.db-td { padding: 3px 9px; color: var(--text-2); border-bottom: 1px solid var(--border-light); }
.db-crud { display: flex; flex-direction: column; gap: 4px; }
.db-op { font-size: 12px; padding: 2px 8px; border-radius: 4px; background: var(--brand-light); color: var(--brand); border: 1px solid var(--brand); text-align: center; }
.db-anat { background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; font-size: 12px; }
.db-tname { display: block; padding: 6px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--bg-soft); border-bottom: 1px solid var(--border-light); color: var(--text-2); }
.db-row { display: flex; }
.db-cell { flex: 1; padding: 5px 10px; border-bottom: 1px solid var(--border-light); color: var(--text-2); }
.db-head .db-cell { font-weight: 600; color: var(--text); background: var(--bg-soft); }

/* ---- Git 专区 · 原理可视化（gitflow-*：四段流水线 + 命令 + 人话注解，tooling foundations module/19/20 的 Git 条目 demo 共用） ---- */
.gitflow { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 100%; }
.gitflow-track { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; }
.gitflow-node { flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; color: var(--text-3); text-align: center; }
.gitflow-node b { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.gitflow-node.on { border-color: var(--brand); background: var(--brand-light); }
.gitflow-node.on b { color: var(--brand); }
.gitflow-node.dim { opacity: .5; }
.gitflow-node.free { flex: none; padding-left: 10px; padding-right: 10px; }
.gitflow-sub { font-size: 12px; color: var(--text-3); line-height: 1.35; }
.gitflow-arrow { flex: none; align-self: center; display: flex; flex-direction: column; align-items: center; gap: 1px; color: var(--border); font-size: 13px; line-height: 1.1; }
.gitflow-arrow small { font-size: 12px; color: var(--text-3); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.gitflow-arrow.on { color: var(--brand); font-weight: 700; }
.gitflow-arrow.on small { color: var(--brand); }
.gitflow-dots { display: flex; gap: 3px; justify-content: center; align-items: center; min-height: 10px; }
.gitflow-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.gitflow-dots i.on { background: var(--brand); }
.gitflow-dots i.new { background: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.gitflow-dots i.green { background: #16a34a; }
.gitflow-cmd { background: #1f2430; border-radius: 6px; padding: 6px 10px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; color: #fff; white-space: nowrap; overflow-x: auto; }
.gitflow-cmd b { color: #4ade80; font-weight: 400; }
.gitflow-cmd i { color: #8a91a0; font-style: normal; }
.gitflow-note { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.gitflow-note b { color: var(--text-2); }
/* 分支线图（branch / merge） */
.gitflow-br { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
.gitflow-br-row { display: flex; align-items: center; font-size: 12px; }
.gitflow-br-tag { flex: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-2); background: var(--bg-soft); border: 1px solid var(--border-light); border-radius: 5px; padding: 1px 7px; margin-right: 6px; white-space: nowrap; }
.gitflow-br-tag.green { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.gitflow-br-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--brand); }
.gitflow-br-dot.green { background: #16a34a; }
.gitflow-br-dot.merge { background: #8250df; box-shadow: 0 0 0 2px #ede9fe; }
.gitflow-br-line { flex: 1; min-width: 10px; height: 2px; background: var(--border); }
.gitflow-br-line.green { background: #bbf7d0; }
.gitflow-br-pad { flex: none; }
.gitflow-br-cap { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.gitflow-br-cap b { color: var(--text-2); }
/* 两栏对比（diff 左右 / worktree 双目录） */
.gitflow-cols { display: flex; gap: 8px; }
.gitflow-col { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-2); }
.gitflow-col.on { border-color: var(--brand); background: var(--brand-light); }
.gitflow-col-h { font-size: 12px; font-weight: 600; color: var(--text-2); }
.gitflow-line { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; padding: 1px 6px; border-radius: 3px; color: var(--text-2); overflow-x: auto; white-space: nowrap; }
.gitflow-line.del { background: #ffebe9; color: #d1242f; }
.gitflow-line.add { background: #dafbe1; color: #1a7f37; }
/* 通用小盒与按钮感（PR 卡 / 仓库盒） */
.gitflow-box { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
.gitflow-box.on { border-color: var(--brand); background: var(--brand-light); }
.gitflow-btn { display: inline-block; background: #1f883d; color: #fff; border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.gitflow-tag { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--brand); background: var(--brand-light); border: 1px solid var(--brand); border-radius: 5px; padding: 0 7px; }
.gitflow-tag.green { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }

/* domains/platform/app-foundations.css */
/* app foundations module：前端 / 后端宏观概念卡 */
.stack-map {
  display: flex; flex-direction: column; gap: 9px; width: 100%; max-width: 310px;
  color: var(--text); font-size: 12px;
}
.dh-demo .stack-map { max-width: 720px; gap: 14px; font-size: 14px; }
.stack-map * { box-sizing: border-box; }
.stack-window {
  overflow: hidden; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); box-shadow: 0 7px 20px rgba(29, 33, 41, .06);
}
.stack-window-bar {
  display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px;
  border-bottom: 1px solid var(--border-light); background: var(--bg-soft);
}
.stack-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }
.stack-window-bar span {
  min-width: 0; flex: 1; margin-left: 4px; overflow: hidden; color: var(--text-3);
  font-size: 11px; text-align: center; text-overflow: ellipsis; white-space: nowrap;
}
.stack-front-nav { display: flex; align-items: center; justify-content: space-between; padding: 7px 10px; }
.stack-front-nav b { font-size: 11px; letter-spacing: .7px; }
.stack-front-nav span { color: var(--text-3); font-size: 11px; }
.stack-front-page {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(62px, .8fr);
  gap: 12px; align-items: center; padding: 10px; background: var(--bg-soft);
}
.stack-front-page > span { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
.stack-front-page small { color: var(--brand); font-size: 11px; }
.stack-front-page strong { color: var(--text); font-size: 12px; line-height: 1.25; }
.stack-front-page em { color: var(--text-3); font-size: 11px; font-style: normal; line-height: 1.5; }
.stack-front-page > span > b { padding: 4px 7px; border-radius: 5px; background: var(--brand); color: #fff; font-size: 11px; }
.stack-front-page > i {
  display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 8px;
  border: 1px solid var(--border-light); border-radius: 7px; background: var(--bg);
  box-shadow: 0 4px 12px rgba(29, 33, 41, .06);
}
.stack-front-page > i::before { content: "UI"; color: var(--text-2); font-size: 11px; font-style: normal; font-weight: 700; }
.stack-front-page u { display: block; height: 5px; border-radius: 99px; background: var(--bg-hover); text-decoration: none; }
.stack-front-page u:nth-child(2) { width: 76%; }
.stack-front-page u:nth-child(3) { width: 56%; background: color-mix(in srgb, var(--brand) 22%, var(--bg)); }
.stack-layer-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.stack-layer-row span {
  display: flex; min-width: 0; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 4px; border: 1px solid var(--border-light); border-radius: 6px;
  background: var(--bg); color: var(--text-3); font-size: 11px; white-space: nowrap;
}
.stack-layer-row b { color: var(--text); font-size: 11px; }

.stack-map-back {
  padding: 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); box-shadow: 0 7px 20px rgba(29, 33, 41, .06);
}
.stack-request, .stack-response {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 7px 8px;
  border: 1px solid var(--border-light); border-radius: 7px; background: var(--bg-soft);
}
.stack-request > span { color: var(--text-3); font-size: 11px; }
.stack-request > b, .stack-response > b {
  padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--brand) 12%, var(--bg));
  color: var(--brand); font-size: 11px;
}
.stack-request code, .stack-response code {
  min-width: 0; overflow: hidden; color: var(--text-2); font-size: 11px;
  text-overflow: ellipsis; white-space: nowrap;
}
.stack-request > i, .stack-response > i { margin-left: auto; color: var(--text-3); font-size: 11px; font-style: normal; white-space: nowrap; }
.stack-back-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 5px; }
.stack-back-pipeline > span {
  display: flex; min-width: 0; min-height: 58px; flex-direction: column; justify-content: center; gap: 3px;
  padding: 7px; border: 1px solid var(--border-light); border-radius: 7px; background: var(--bg);
}
.stack-back-pipeline > span > i {
  display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center;
  border-radius: 50%; background: color-mix(in srgb, var(--brand) 10%, var(--bg));
  color: var(--brand); font-size: 11px; font-style: normal;
}
.stack-back-pipeline b { overflow: hidden; color: var(--text); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.stack-back-pipeline small { color: var(--text-3); font-size: 11px; line-height: 1.3; }
.stack-back-pipeline > em { color: var(--text-3); font-size: 11px; font-style: normal; }
.stack-response { flex-direction: row-reverse; }
.stack-response > i { margin: 0 auto 0 0; }

/* 详情页不是卡片缩略图：同步放大内容密度，而不只是拉宽外框。 */
.dh-demo .stack-window { border-radius: 12px; }
.dh-demo .stack-window-bar { height: 30px; gap: 6px; padding: 0 11px; }
.dh-demo .stack-window-bar i { width: 7px; height: 7px; }
.dh-demo .stack-window-bar span { margin-left: 7px; font-size: 11px; }
.dh-demo .stack-front-nav { padding: 11px 16px; }
.dh-demo .stack-front-nav b { font-size: 12px; letter-spacing: 1px; }
.dh-demo .stack-front-nav span { font-size: 11px; }
.dh-demo .stack-front-page {
  grid-template-columns: minmax(0, 1.25fr) minmax(120px, .75fr);
  gap: 22px; padding: 18px;
}
.dh-demo .stack-front-page > span { gap: 7px; }
.dh-demo .stack-front-page small { font-size: 12px; }
.dh-demo .stack-front-page strong { font-size: 19px; }
.dh-demo .stack-front-page em { font-size: 11px; }
.dh-demo .stack-front-page > span > b { padding: 7px 11px; border-radius: 7px; font-size: 11px; }
.dh-demo .stack-front-page > i { gap: 8px; padding: 14px; border-radius: 10px; }
.dh-demo .stack-front-page > i::before { font-size: 11px; }
.dh-demo .stack-front-page u { height: 7px; }
.dh-demo .stack-layer-row { gap: 8px; }
.dh-demo .stack-layer-row span { gap: 6px; padding: 9px 7px; border-radius: 8px; font-size: 11px; }
.dh-demo .stack-layer-row b { font-size: 11px; }

.dh-demo .stack-map-back { gap: 14px; padding: 18px; border-radius: 12px; }
.dh-demo .stack-request,
.dh-demo .stack-response { gap: 10px; padding: 11px 14px; border-radius: 9px; }
.dh-demo .stack-request > span { font-size: 11px; }
.dh-demo .stack-request > b,
.dh-demo .stack-response > b { padding: 3px 7px; border-radius: 5px; font-size: 11px; }
.dh-demo .stack-request code,
.dh-demo .stack-response code { font-size: 11px; }
.dh-demo .stack-request > i,
.dh-demo .stack-response > i { font-size: 11px; }
.dh-demo .stack-back-pipeline { gap: 9px; }
.dh-demo .stack-back-pipeline > span {
  min-height: 94px; gap: 5px; padding: 12px; border-radius: 9px;
}
.dh-demo .stack-back-pipeline > span > i { width: 22px; height: 22px; font-size: 11px; }
.dh-demo .stack-back-pipeline b { font-size: 13px; }
.dh-demo .stack-back-pipeline small { font-size: 12px; line-height: 1.45; }
.dh-demo .stack-back-pipeline > em { font-size: 12px; }

.frontend-anat {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  width: min(100%, 530px);
}
.frontend-anat-part {
  display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 10px;
  border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg);
}
.frontend-anat-part b { color: var(--text); font-size: 11px; }
.frontend-anat-part small { color: var(--text-3); font-size: 11px; line-height: 1.4; }
.frontend-anat-part.structure { border-top: 2px solid #e07a5f; }
.frontend-anat-part.style { border-top: 2px solid var(--brand); }
.frontend-anat-part.behavior { border-top: 2px solid #4d9b73; }
.frontend-anat-screen {
  grid-column: 1 / -1; display: flex; min-height: 66px; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
}
.frontend-anat-screen::before {
  content: ""; align-self: stretch; height: 13px; border-bottom: 1px solid var(--border-light);
  background: radial-gradient(circle at 9px 6px, var(--border) 0 2px, transparent 2.5px);
}
.frontend-anat-screen small { color: var(--brand); font-size: 11px; }
.frontend-anat-screen b { color: var(--text); font-size: 12px; }
.frontend-anat-screen i { width: 64px; height: 5px; border-radius: 99px; background: var(--brand); }
/* 基础概念的 use / don't 配图：用可读数据和状态解释文案。 */
.foundation-scene {
  display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 7px;
}
.foundation-scene-head {
  color: var(--text-3); font-size: 10px; font-weight: 700; letter-spacing: .5px;
}
.foundation-note { color: var(--text-3); font-size: 11px; line-height: 1.45; }
.foundation-flow {
  display: flex; min-width: 0; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap;
}
.foundation-arrow { color: var(--text-3); font-size: 11px; }
.foundation-step {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg);
  color: var(--text-2); font-size: 11px; font-weight: 600; white-space: nowrap;
}
.foundation-step.blue, .foundation-box.blue {
  border-color: var(--border); background: var(--bg); color: var(--brand);
}
.foundation-step.green, .foundation-box.green {
  border-color: var(--border); background: var(--bg); color: var(--green);
}
.foundation-step.orange, .foundation-box.orange {
  border-color: var(--border); background: var(--bg); color: #c65d08;
}
.foundation-step.red, .foundation-box.red {
  border-color: var(--border); background: var(--bg); color: var(--red);
}
.foundation-boxes {
  display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 6px;
}
.foundation-box {
  display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 7px 8px;
  border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
}
.foundation-box small, .foundation-compare small { color: var(--text-3); font-size: 10px; font-weight: 500; }
.foundation-box b {
  color: currentColor; font-size: 11px; font-weight: 650; line-height: 1.35;
  overflow-wrap: anywhere;
}
.foundation-code {
  display: flex; width: 100%; min-width: 0; flex-direction: column; gap: 3px; padding: 8px 10px;
  overflow: hidden; border: 1px solid #243044; border-radius: 7px; background: #111827;
  color: #d5def0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px;
}
.foundation-code span { overflow-wrap: anywhere; }
.foundation-code em { color: #8390a7; font-style: normal; }
.foundation-code b { color: #9cc2ff; font-weight: 650; }
.foundation-code b.success { color: #79d6a3; }
.foundation-code b.danger { color: #ff9f9f; }
.foundation-compare {
  display: grid; width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch; gap: 6px;
}
.foundation-compare > span {
  display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 3px;
  padding: 7px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg);
}
.foundation-compare > span.green,
.foundation-compare > span.red { border-color: var(--border); background: var(--bg); }
.foundation-compare > span.green b { color: var(--green); }
.foundation-compare > span.red b { color: var(--red); }
.foundation-compare b {
  color: var(--text); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere;
}
.foundation-compare > i { align-self: center; color: var(--text-3); font-size: 11px; font-style: normal; }

/* 典型使用场景中的完整界面，比 use / don't 配图更接近真实产品。 */
.foundation-scene-ui {
  width: min(100%, 720px); margin: 0 auto; overflow: hidden;
  border: 0; border-radius: 0; background: var(--bg);
}
.scene-shot:has(.foundation-scene-ui) .sc-bar { display: none; }
.scene-shot:has(.foundation-scene-ui) .sc-body { min-height: 0; padding: 0; }
.foundation-scene-ui-head {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 16px;
  border-bottom: 1px solid var(--border-light); background: var(--bg-soft);
}
.foundation-scene-ui-head span {
  color: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
}
.foundation-scene-ui-head b { color: var(--text); font-size: 14px; }
.foundation-scene-ui-body {
  display: flex; min-height: 96px; align-items: center; justify-content: center; padding: 16px;
}
.foundation-scene-ui-foot {
  padding: 9px 16px; border-top: 1px solid var(--border-light);
  color: var(--text-3); font-size: 11px; line-height: 1.5;
}
.foundation-scene-ui .foundation-boxes,
.foundation-scene-ui .foundation-compare,
.foundation-scene-ui .foundation-code { max-width: 620px; }
.foundation-scene-ui .foundation-box { min-height: 52px; justify-content: center; }
.foundation-scene-ui .foundation-box small,
.foundation-scene-ui .foundation-compare small { font-size: 11px; }
.foundation-scene-ui .foundation-box b,
.foundation-scene-ui .foundation-compare b { font-size: 12px; }
.foundation-scene-ui .foundation-step { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.foundation-scene-ui .foundation-code { padding: 12px 14px; font-size: 11px; line-height: 1.55; }
.foundation-ui-hero {
  display: flex; max-width: 520px; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left;
}
.foundation-ui-hero > .foundation-ui-kicker { color: var(--brand); font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.foundation-ui-hero h3 { margin: 0; color: var(--text); font-size: 22px; line-height: 1.2; }
.foundation-ui-hero p { margin: 0; color: var(--text-2); font-size: 12px; }
.foundation-ui-form {
  display: flex; width: min(100%, 440px); flex-direction: column; align-items: stretch; gap: 9px;
}
.foundation-ui-field { display: flex; flex-direction: column; gap: 4px; }
.foundation-ui-field > span { color: var(--text-2); font-size: 11px; }
.foundation-ui-field > b {
  min-height: 34px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--bg); color: var(--text); font-size: 12px; font-weight: 500;
}
.foundation-ui-field.error > b {
  border-color: color-mix(in srgb, var(--red) 55%, var(--border));
  background: var(--red-light); color: var(--red);
}
.foundation-ui-action {
  display: inline-flex; min-height: 32px; align-items: center; justify-content: center; align-self: flex-start;
  padding: 6px 12px; border: 1px solid transparent; border-radius: 7px;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 650;
}
.foundation-ui-action.red { background: var(--red); }
.foundation-ui-action.neutral { border-color: var(--border); background: var(--bg); color: var(--text-2); }

@media (max-width: 720px) {
  .stack-front-page { grid-template-columns: minmax(0, 1fr) 72px; }
  .stack-back-pipeline { grid-template-columns: 1fr; }
  .stack-back-pipeline > em { display: none; }
  .stack-back-pipeline > span { min-height: 48px; }
  .frontend-anat { grid-template-columns: 1fr; }
  .frontend-anat-screen { grid-column: 1; }
  .foundation-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foundation-scene-ui-head { padding: 10px 12px; }
  .foundation-scene-ui-body { min-height: 84px; padding: 12px; }
  .foundation-scene-ui-foot { padding: 8px 12px; }
  .foundation-ui-hero h3 { font-size: 18px; }
}

/* ---- Serverless：请求触发函数 ---- */
.sl-demo { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.sl-io {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.sl-io small { color: var(--text-3); font-size: 10px; }
.sl-io b { color: var(--text-2); font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sl-arrow { color: var(--text-3); font-size: 12px; font-style: normal; }
.sl-fn {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--border));
  border-radius: 8px;
  background: var(--brand-light);
}
.sl-fn b { color: var(--brand); font-size: 12px; }
.sl-fn small { color: var(--text-3); font-size: 10px; }
.sl-note { flex-basis: 100%; color: var(--text-3); font-size: 11px; text-align: center; }

/* ---- 后端框架：请求经过的三段骨架 ---- */
.fw-demo,
.route-demo,
.sql-demo,
.val-demo,
.auth-demo,
.az-demo {
  display: grid;
  gap: 10px;
  width: 100%;
  max-width: 360px;
}
.fw-pipe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 4px;
}
.fw-pipe > i,
.fw-anat > i,
.val-anat > i,
.auth-anat > i,
.auth-flow > i {
  align-self: center;
  color: var(--text-3);
  font-size: 12px;
  font-style: normal;
}
.fw-step,
.fw-anat-step {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 7px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg);
  text-align: center;
}
.fw-step small,
.fw-anat-step small { color: var(--text-3); font-size: 10px; }
.fw-step b,
.fw-anat-step b { color: var(--text); font-size: 12px; }
.fw-step em {
  color: var(--text-3);
  font-size: 10px;
  font-style: normal;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.fw-step.on,
.fw-anat-step.on {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--border));
  background: var(--brand-light);
}
.fw-step.on b,
.fw-anat-step.on b { color: var(--brand); }
.fw-note,
.route-note {
  color: var(--text-3);
  font-size: 11px;
  text-align: center;
  line-height: 1.4;
}
.fw-anat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.fw-variant {
  color: var(--text-2);
  font-size: 12px;
}

/* ---- 路由：方法 + 路径 → 处理函数 ---- */
.route-board {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.route-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: var(--bg-soft);
}
.route-row.on {
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  background: color-mix(in srgb, var(--brand-light) 55%, var(--bg));
}
.route-row b,
.m-get, .m-post, .m-patch, .m-del {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 20px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .02em;
}
.route-row b.m-get, .m-get { background: #16a34a; }
.route-row b.m-post, .m-post { background: var(--brand); }
.m-patch { background: #d97706; }
.m-del { background: #dc2626; }
.route-row code {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font: 600 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route-row span { color: var(--text-3); font-size: 11px; white-space: nowrap; }
.route-anat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.route-piece {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
}
.route-piece.path { color: var(--text); background: var(--bg-soft); }
.route-piece.query { color: var(--text-3); background: var(--bg-soft); }

/* ---- SQL：语句命中表格行 ---- */
.sql-demo { max-width: 320px; }
.sql-query {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #243044;
  border-radius: 10px;
  background: #171a22;
  color: #dbe4ff;
  font: 500 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: left;
}
.sql-query b { color: #93c5fd; font-weight: 700; }
.sql-query.compact { padding: 8px 10px; font-size: 11px; }
.sql-bridge {
  display: flex;
  justify-content: center;
}
.sql-bridge span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--brand);
  background: var(--brand-light);
  font-size: 11px;
  font-weight: 650;
}
.sql-table {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  font-size: 12px;
}
.sql-head,
.sql-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr;
}
.sql-head span,
.sql-row span {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
}
.sql-head span {
  color: var(--text-3);
  background: var(--bg-soft);
  font-size: 11px;
  font-weight: 700;
}
.sql-row span { color: var(--text-2); }
.sql-row:last-child span { border-bottom: 0; }
.sql-row.hit span {
  color: var(--text);
  background: color-mix(in srgb, var(--brand) 10%, var(--bg));
  font-weight: 650;
}
.sql-row.dim span { color: var(--text-3); opacity: .72; }
.sql-anat { display: grid; gap: 8px; width: min(100%, 320px); }
.sql-variant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
}

/* ---- 数据校验：字段通过 / 失败 ---- */
.val-form {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.val-form label {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--bg-soft);
}
.val-form label > span { color: var(--text-3); font-size: 11px; }
.val-form label > b {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.val-form label > i {
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.val-form label.ok { border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.val-form label.ok > i { color: color-mix(in srgb, var(--green) 80%, var(--text)); }
.val-form label.bad {
  border-color: color-mix(in srgb, var(--red) 34%, var(--border));
  background: color-mix(in srgb, var(--red) 6%, var(--bg));
}
.val-form label.bad > b,
.val-form label.bad > i { color: #b42318; }
.val-gate {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--red) 7%, var(--bg));
  border: 1px solid color-mix(in srgb, var(--red) 22%, var(--border));
  text-align: center;
}
.val-gate small { color: var(--text-3); font-size: 10px; }
.val-gate strong { color: #b42318; font-size: 12px; }
.val-anat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.val-piece,
.auth-piece,
.az-piece {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 650;
}
.val-piece.rules,
.auth-piece.on { border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); color: var(--brand); background: var(--brand-light); }
.val-piece.ok,
.auth-piece.ok { border-color: color-mix(in srgb, var(--green) 30%, var(--border)); color: color-mix(in srgb, var(--green) 78%, var(--text)); background: color-mix(in srgb, var(--green) 8%, var(--bg)); }
.val-piece.bad { border-color: color-mix(in srgb, var(--red) 30%, var(--border)); color: #b42318; background: color-mix(in srgb, var(--red) 6%, var(--bg)); }
.val-or { color: var(--text-3); font-size: 11px; }

/* ---- 身份认证：登录卡 + 三步 ---- */
.auth-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 5%, transparent);
}
.auth-card label {
  display: grid;
  gap: 4px;
}
.auth-card label > span { color: var(--text-3); font-size: 11px; }
.auth-card label > b {
  min-height: 32px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  background: var(--bg-soft);
  font-size: 12px;
  font-weight: 500;
}
.auth-card button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--brand);
  font-size: 12px;
  font-weight: 700;
  cursor: default;
}
.auth-flow,
.auth-anat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.auth-flow span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  color: var(--text-3);
  background: var(--bg);
  font-size: 11px;
  font-weight: 650;
}
.auth-flow span.on { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); background: var(--brand-light); }
.auth-flow span.ok { color: color-mix(in srgb, var(--green) 78%, var(--text)); border-color: color-mix(in srgb, var(--green) 28%, var(--border)); background: color-mix(in srgb, var(--green) 8%, var(--bg)); }
.auth-variant {
  color: var(--text-2);
  font-size: 12px;
}
.auth-variant code {
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- 权限控制：允许 / 拒绝矩阵 ---- */
.az-who {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-soft);
}
.az-who small { color: var(--text-3); font-size: 11px; }
.az-who b { color: var(--text); font-size: 12px; }
.az-matrix {
  display: grid;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.az-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--bg-soft);
  font-size: 12px;
}
.az-row span { color: var(--text-2); }
.az-row em {
  min-width: 40px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  text-align: center;
}
.az-row em.ok {
  color: color-mix(in srgb, var(--green) 78%, var(--text));
  background: color-mix(in srgb, var(--green) 10%, var(--bg));
}
.az-row em.no {
  color: #b42318;
  background: color-mix(in srgb, var(--red) 8%, var(--bg));
}
.az-anat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.az-can { color: var(--text-3); font-size: 11px; }
.az-piece.action { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 28%, var(--border)); background: var(--brand-light); }
.az-piece.resource { color: color-mix(in srgb, var(--green) 72%, var(--text)); border-color: color-mix(in srgb, var(--green) 28%, var(--border)); background: color-mix(in srgb, var(--green) 8%, var(--bg)); }
.az-variant {
  color: var(--text-2);
  font-size: 12px;
}
.az-variant.mono {
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dh-demo .fw-demo,
.dh-demo .route-demo,
.dh-demo .sql-demo,
.dh-demo .val-demo,
.dh-demo .auth-demo,
.dh-demo .az-demo { max-width: 420px; }
.dh-demo .fw-step { min-height: 78px; padding: 12px 10px; }
.dh-demo .sql-query { font-size: 13px; padding: 14px 16px; }
.dh-demo .auth-card { padding: 16px; }

@media (max-width: 720px) {
  .fw-demo,
  .route-demo,
  .sql-demo,
  .val-demo,
  .auth-demo,
  .az-demo {
    max-width: 100%;
  }
  .fw-pipe {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .fw-pipe > i { justify-self: center; transform: rotate(90deg); }
  .fw-step { min-height: 0; }
  .route-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .route-row span {
    grid-column: 2;
    white-space: normal;
  }
  .sql-query { font-size: 11px; padding: 10px; }
  .sql-head,
  .sql-row { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); }
  .val-form label {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 4px 8px;
  }
  .val-form label > i {
    grid-column: 2;
    justify-self: start;
  }
  .auth-card { padding: 10px; }
  .auth-flow { gap: 4px; }
  .auth-flow span { font-size: 10px; padding: 3px 6px; }
  .az-who { flex-wrap: wrap; }
  .dh-demo .fw-step { min-height: 0; padding: 10px 8px; }
}