/* ============================================================
   StartRide 官网 · 新页公用样式（文档中心 / 更新日志 / 服务器状态）
   依赖 styles.css 的变量与基础组件（导航、页脚、按钮、容器）
   ============================================================ */

/* ===== 页头（三页共用） ===== */
.pg-head {
  padding: 92px 0 34px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pg-head .kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  color: var(--accent-2); text-transform: uppercase;
}
.pg-head .kicker::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.pg-head h1 {
  margin: 16px 0 10px;
  font-size: clamp(30px, 4.2vw, 50px);
  font-weight: 700; letter-spacing: -0.018em; line-height: 1.12;
}
.pg-head h1 .grad {
  background: linear-gradient(94deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pg-head p.lead {
  max-width: 660px; font-size: 14.5px; line-height: 1.9; color: var(--muted);
}
.pg-head .head-meta {
  margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.6px;
}

/* ===== 文档两栏 ===== */
.doc-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 56px;
  padding: 54px 0 96px;
  align-items: start;
}
.doc-toc {
  position: sticky; top: 88px;
  border-left: 1px solid var(--border);
  padding-left: 18px;
}
.doc-toc .toc-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px;
  color: var(--dim); text-transform: uppercase; margin-bottom: 14px;
}
.doc-toc a {
  display: block; font-size: 13px; color: var(--muted);
  padding: 5px 0; line-height: 1.6;
  border-left: 2px solid transparent; margin-left: -20px; padding-left: 18px;
  transition: color 0.25s, border-color 0.25s;
}
.doc-toc a:hover { color: var(--text); }
.doc-toc a.on { color: var(--accent-2); border-left-color: var(--accent); }
.doc-toc .toc-sep { height: 1px; background: var(--border); margin: 14px 0; }

.doc-body { min-width: 0; max-width: 780px; }
.doc-body > section { padding-bottom: 46px; }
.doc-body h2 {
  font-size: 23px; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 16px; padding-top: 6px;
  scroll-margin-top: 92px;
  display: flex; align-items: baseline; gap: 12px;
}
.doc-body h2 .no {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--accent); letter-spacing: 1px; flex: none;
}
.doc-body h3 {
  font-size: 16.5px; font-weight: 650; margin: 28px 0 10px;
  letter-spacing: -0.005em;
}
.doc-body p { font-size: 14.5px; line-height: 1.95; color: var(--muted); margin: 0 0 14px; }
.doc-body p strong, .doc-body li strong { color: var(--text); font-weight: 650; }
.doc-body a.inline { color: var(--accent-2); border-bottom: 1px solid rgba(111,177,255,0.35); }
.doc-body a.inline:hover { border-bottom-color: var(--accent-2); }
.doc-body ul, .doc-body ol { margin: 0 0 16px; padding-left: 22px; }
.doc-body li { font-size: 14.5px; line-height: 1.95; color: var(--muted); margin-bottom: 7px; }
.doc-body li::marker { color: var(--dim); }
.doc-body code {
  font-family: var(--mono); font-size: 12.5px;
  background: rgba(148,163,184,0.09);
  border: 1px solid var(--border);
  border-radius: 4px; padding: 1.5px 6px; color: #c9d3e0;
}
.doc-body pre {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 16px 18px; overflow-x: auto; margin: 0 0 18px;
}
.doc-body pre code {
  background: none; border: none; padding: 0;
  font-size: 12.5px; line-height: 1.8; color: #b9c4d2;
}

/* 步骤 */
ol.steps { list-style: none; padding: 0; counter-reset: st; }
ol.steps > li {
  counter-increment: st; position: relative;
  padding: 0 0 22px 44px; margin: 0;
}
ol.steps > li::before {
  content: counter(st, decimal-leading-zero);
  position: absolute; left: 0; top: 3px;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  border: 1px solid var(--border-2); border-radius: 50%;
  width: 26px; height: 26px; display: grid; place-items: center;
}
ol.steps > li::after {
  content: ""; position: absolute; left: 13px; top: 32px; bottom: 4px;
  width: 1px; background: var(--border);
}
ol.steps > li:last-child::after { display: none; }
ol.steps > li b { display: block; color: var(--text); font-size: 15px; font-weight: 650; margin-bottom: 5px; }

/* 提示框 */
.note {
  border-left: 2px solid var(--accent);
  background: rgba(61,139,255,0.055);
  padding: 14px 18px; margin: 0 0 20px; border-radius: 0 6px 6px 0;
}
.note.warn { border-left-color: #f0b35e; background: rgba(240,179,94,0.055); }
.note.bad  { border-left-color: #e06a6a; background: rgba(224,106,106,0.05); }
.note .n-t {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 7px;
}
.note.warn .n-t { color: #f0b35e; }
.note.bad  .n-t { color: #e58b8b; }
.note p:last-child { margin-bottom: 0; }
.note p { font-size: 14px; }

/* 键位 */
.kbd {
  display: inline-block; font-family: var(--mono); font-size: 11.5px;
  border: 1px solid var(--border-2); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 7px; color: var(--text);
  background: var(--bg-2); margin: 0 2px;
}

/* 表格 */
.doc-table { width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 14px; }
.doc-table th, .doc-table td {
  text-align: left; padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--border); vertical-align: top;
}
.doc-table th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--dim);
  padding-bottom: 9px; white-space: nowrap;
}
.doc-table td { color: var(--muted); line-height: 1.8; }
.doc-table td:first-child { color: var(--text); font-weight: 550; white-space: nowrap; }

/* ===== 文档中心索引 ===== */
.doc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 44px; }
.doc-card {
  display: block; padding: 22px 0 20px;
  border-top: 1px solid var(--border);
  transition: border-color 0.3s;
}
.doc-card:hover { border-top-color: var(--accent); }
.doc-card .dc-k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--dim);
}
.doc-card h3 {
  font-size: 17px; font-weight: 650; margin: 9px 0 7px;
  color: var(--text); transition: color 0.25s;
}
.doc-card:hover h3 { color: var(--accent-2); }
.doc-card p { font-size: 13.5px; color: var(--muted); line-height: 1.85; margin: 0 0 10px; }
.doc-card .dc-m { font-family: var(--mono); font-size: 11px; color: var(--dim); }

.doc-search {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-2); padding: 0 14px; margin: 30px 0 10px;
  max-width: 480px;
}
.doc-search input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-family: var(--font); font-size: 14px;
  padding: 13px 0;
}
.doc-search input::placeholder { color: var(--dim); }
.doc-search span { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.doc-empty { display: none; color: var(--dim); font-size: 13.5px; padding: 14px 0; }

/* ===== 更新日志 ===== */
.log-item { border-top: 1px solid var(--border); padding: 26px 0 24px; }
.log-item:first-of-type { border-top-color: var(--border-2); }
.log-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.log-ver { font-family: var(--mono); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.log-ver .latest {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 1.6px;
  color: var(--accent-2); border: 1px solid rgba(111,177,255,0.35);
  border-radius: 20px; padding: 2px 9px; margin-left: 10px; vertical-align: 2px;
}
.log-date { font-family: var(--mono); font-size: 11.5px; color: var(--dim); letter-spacing: 0.5px; }
.log-title { font-size: 16.5px; font-weight: 650; margin: 12px 0 12px; }
.log-item ul { list-style: none; padding: 0; margin: 0; }
.log-item li {
  position: relative; padding-left: 18px; font-size: 14px;
  line-height: 1.9; color: var(--muted); margin-bottom: 6px;
}
.log-item li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

/* ===== 服务器状态 ===== */
.st-live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.8px;
  color: var(--muted);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.dot.ok { background: #46c98a; box-shadow: 0 0 0 0 rgba(70,201,138,0.5); animation: pulse 2.4s infinite; }
.dot.off { background: #e06a6a; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(70,201,138,0.45); }
  70% { box-shadow: 0 0 0 7px rgba(70,201,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(70,201,138,0); }
}

.stat-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-2);
}
.stat-cell { padding: 24px 22px 22px 0; border-bottom: 1px solid var(--border); }
.stat-cell .s-l {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--dim); margin-bottom: 12px;
}
.stat-cell .s-v {
  font-family: var(--mono); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-cell .s-v small { font-size: 14px; font-weight: 500; color: var(--dim); margin-left: 5px; }
.stat-cell .s-n { font-size: 12.5px; color: var(--dim); margin-top: 9px; line-height: 1.7; }

.room-list { border-top: 1px solid var(--border-2); }
.room-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 132px 118px 96px;
  align-items: center; gap: 16px;
  padding: 15px 0; border-bottom: 1px solid var(--border);
}
.room-row.head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--dim); padding: 11px 0;
}
.room-name { font-size: 14.5px; color: var(--text); font-weight: 550; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-mode { font-family: var(--mono); font-size: 12px; color: var(--accent-2); }
.room-num { font-family: var(--mono); font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.room-share {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  border: 1px solid var(--border-2); border-radius: 20px;
  padding: 5px 13px; background: none; cursor: pointer; justify-self: end;
  transition: color 0.25s, border-color 0.25s;
}
.room-share:hover { color: var(--accent-2); border-color: var(--accent); }
.room-empty { padding: 40px 0; text-align: center; color: var(--dim); font-size: 14px; }
.room-empty b { display: block; color: var(--muted); font-weight: 600; margin-bottom: 8px; font-size: 15px; }

.bar-wrap { margin-top: 6px; }
.bar-row { display: grid; grid-template-columns: 86px minmax(0,1fr) 52px; align-items: center; gap: 14px; margin-bottom: 11px; }
.bar-row .b-l { font-size: 13px; color: var(--muted); }
.bar-row .b-t { height: 4px; background: rgba(148,163,184,0.12); border-radius: 3px; overflow: hidden; }
.bar-row .b-f { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 0; transition: width 0.9s cubic-bezier(0.16,1,0.3,1); }
.bar-row .b-v { font-family: var(--mono); font-size: 12px; color: var(--dim); text-align: right; }

/* ===== 分享卡弹层 ===== */
.share-mask {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4,6,9,0.78); backdrop-filter: blur(8px);
  display: none; place-items: center; padding: 24px;
  overflow-y: auto;
}
.share-mask.on { display: grid; }
.share-box {
  width: min(430px, 100%);
  background: var(--bg-2); border: 1px solid var(--border-2); border-radius: 14px;
  padding: 26px; position: relative; margin: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.share-box .x {
  position: absolute; top: 14px; right: 16px; cursor: pointer;
  color: var(--dim); font-size: 20px; line-height: 1; background: none; border: none;
}
.share-box .x:hover { color: var(--text); }
.share-box h3 { font-size: 17px; font-weight: 650; margin: 0 0 4px; }
.share-box .sub { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 1px; margin-bottom: 16px; }
.qr-hold { margin: 0 0 16px; }
.qr-hold canvas {
  display: block; width: 100%; height: auto; max-width: 330px;
  margin: 0 auto; border-radius: 12px; border: 1px solid var(--border);
}
.share-info { border-top: 1px solid var(--border); padding-top: 16px; margin-bottom: 18px; }
.share-info div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; font-size: 13.5px; }
.share-info span { color: var(--dim); }
.share-info b { color: var(--text); font-weight: 600; font-family: var(--mono); font-size: 13px; }
.share-acts { display: flex; gap: 10px; }
.share-acts .btn { flex: 1; text-align: center; justify-content: center; }
.share-done { font-size: 12.5px; color: #46c98a; text-align: center; margin-top: 12px; min-height: 18px; }

/* ===== 响应式 ===== */
.lower-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; margin-top: 52px; }
@media (max-width: 1080px) {
  .lower-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 1080px) {
  .doc-layout { grid-template-columns: 1fr; gap: 0; }
  .doc-toc {
    position: static; border-left: none; padding-left: 0;
    border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 34px;
  }
  .doc-toc a { display: inline-block; margin-left: 0; padding-left: 0; padding-right: 16px; border-left: none; }
  .doc-toc a.on { border-left: none; color: var(--accent-2); }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pg-head { padding: 74px 0 26px; }
  .doc-body > section { padding-bottom: 34px; }
  .doc-cards { grid-template-columns: 1fr; }
  .room-row { grid-template-columns: minmax(0,1fr) 92px; row-gap: 10px; padding: 16px 0; }
  .room-row.head { display: none; }
  .room-num { justify-self: start; }
  .room-share { grid-column: 2; }
  .doc-table { font-size: 13px; }
  .share-box { padding: 22px 18px; }
  .qr-hold canvas { max-width: 100%; }
}

/* ===== 文档中心（2026-10-10 建立） ===== */
.docs-nav {
  position: sticky; top: 88px;
  max-height: calc(100vh - 120px); overflow-y: auto;
  border-left: 1px solid var(--border); padding-left: 18px;
}
.docs-nav::-webkit-scrollbar { width: 4px; }
.docs-nav::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.docs-nav .dn-grp { margin-bottom: 22px; }
.docs-nav .dn-grp:last-child { margin-bottom: 0; }
.docs-nav .toc-title {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px;
  color: var(--dim); text-transform: uppercase; margin-bottom: 10px;
}
.docs-nav a {
  display: block; font-size: 13px; color: var(--muted);
  padding: 5px 0 5px 16px; line-height: 1.55;
  border-left: 2px solid transparent; margin-left: -20px;
  transition: color 0.25s, border-color 0.25s;
}
.docs-nav a:hover { color: var(--text); }
.docs-nav a.on { color: var(--accent-2); border-left-color: var(--accent); }
.docs-nav .dn-sub a { font-size: 12.5px; color: var(--dim); }
.docs-nav .dn-sub a:hover { color: var(--muted); }
.docs-nav .dn-sub a.on { color: var(--accent-2); }
.docs-nav .doc-toc {
  position: static; border-left: none; padding-left: 0; margin: 0;
}
.docs-nav .dn-sep { height: 1px; background: var(--border); margin: 0 0 22px; }

.dc-group {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 2px; text-transform: uppercase; color: var(--dim);
  margin: 38px 0 2px;
}
.doc-body.wide { max-width: none; }

@media (max-width: 1080px) {
  .doc-layout { grid-template-columns: 1fr; gap: 0; padding-top: 34px; }
  .docs-nav {
    position: static; max-height: none; overflow: visible;
    border-left: none; padding-left: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px; margin-bottom: 34px;
  }
  .docs-nav .dn-grp { margin-bottom: 14px; }
  .docs-nav a {
    display: inline-block; margin-left: 0; border-left: none;
    padding: 4px 16px 4px 0; font-size: 12.5px;
  }
  .docs-nav a.on { border-left: none; }
  .docs-nav .doc-toc { margin: 0; }
}
/* 窄屏：表格首列不再强制不换行（长句首列会撑破 390 宽度） */
@media (max-width: 760px) {
  .doc-table th, .doc-table td:first-child { white-space: normal; }
}

/* ===== 文档中心 v2（2026-10-11：全站改名「文档」+ BeamNG 式结构） ===== */
.pg-crumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.6px;
  color: var(--dim); margin-bottom: 18px;
}
.pg-crumb a { color: var(--dim); transition: color 0.25s; }
.pg-crumb a:hover { color: var(--accent-2); }
.pg-crumb span { color: #39414f; }
.pg-crumb em { font-style: normal; color: var(--muted); }

.doc-pager {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-top: 18px; padding-top: 34px;
  border-top: 1px solid var(--border);
}
.doc-pager a {
  display: block; border: 1px solid var(--border); border-radius: 10px;
  padding: 15px 18px; transition: border-color 0.25s, background 0.25s;
}
.doc-pager a:hover { border-color: var(--accent); background: rgba(61,139,255,0.05); }
.doc-pager .k {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--dim); margin-bottom: 7px;
}
.doc-pager b { font-size: 14.5px; font-weight: 600; color: var(--text); }
.doc-pager .nx { text-align: right; }
.doc-pager .ph { border: 1px dashed var(--border); border-radius: 10px; }

.doc-sec {
  display: grid; grid-template-columns: 186px minmax(0, 1fr); gap: 0 40px;
  border-top: 1px solid var(--border); padding: 28px 0 10px;
}
.doc-sec:first-of-type { border-top-color: var(--border-2); }
.doc-sec .ds-l { position: sticky; top: 88px; align-self: start; }
.doc-sec .ds-k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--dim);
}
.doc-sec .ds-t { font-size: 16px; font-weight: 650; margin: 8px 0 7px; color: var(--text); }
.doc-sec .ds-n { font-size: 12.5px; color: var(--dim); line-height: 1.75; }
.doc-sec .doc-cards { gap: 0 40px; }
.doc-body h2.hub-h { margin-bottom: 0; }

@media (max-width: 1080px) {
  .doc-sec { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .doc-sec .ds-l { position: static; margin-bottom: 14px; }
}
@media (max-width: 760px) {
  .doc-pager { grid-template-columns: 1fr; }
  .doc-pager .nx { text-align: left; }
}

/* ===== 文档全文搜索（2026-10-11） ===== */
.dn-search {
  position: relative; margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.dn-search input {
  width: 100%; box-sizing: border-box;
  background: #0d1014; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-family: inherit; font-size: 12.5px;
  padding: 8px 30px 8px 11px; outline: none; transition: border-color 0.25s;
}
.dn-search input::placeholder { color: var(--dim); }
.dn-search input:focus { border-color: var(--accent); }
.dn-search .dn-k {
  position: absolute; right: 9px; top: 8px;
  font-family: var(--mono); font-size: 10.5px; color: var(--dim);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 5px; line-height: 1.3; pointer-events: none;
}
.dn-search input:focus + .dn-k { opacity: 0.35; }

.sr-wrap { max-width: 880px; }
.sr-bar {
  display: flex; align-items: stretch; gap: 10px; margin-bottom: 12px;
}
.sr-bar .sb-in {
  position: relative; flex: 1 1 auto; min-width: 0;
}
.sr-bar input {
  width: 100%; box-sizing: border-box;
  background: #0d1014; border: 1px solid var(--border-2); border-radius: 10px;
  color: var(--text); font-family: inherit; font-size: 15px;
  padding: 14px 42px 14px 16px; outline: none; transition: border-color 0.25s;
}
.sr-bar input::placeholder { color: var(--dim); }
.sr-bar input:focus { border-color: var(--accent); }
.sr-bar .sb-k {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 11px; color: var(--dim);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px;
  pointer-events: none;
}
.sr-bar button {
  flex: 0 0 auto; background: var(--accent); color: #fff; border: 0;
  border-radius: 10px; padding: 0 22px; font-family: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; transition: opacity 0.25s;
}
.sr-bar button:hover { opacity: 0.86; }

.sr-meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.4px;
  color: var(--dim); padding-bottom: 6px;
}
.sr-meta b { color: var(--accent-2); font-weight: 600; }

.sr-doc { border-top: 1px solid var(--border); padding: 20px 0 8px; }
.sr-doc:first-of-type { border-top-color: var(--border-2); }
.sr-doc-h {
  display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
  margin-bottom: 12px;
}
.sr-doc-h .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--dim);
}
.sr-doc-h a { font-size: 15px; font-weight: 650; color: var(--text); }
.sr-doc-h a:hover { color: var(--accent-2); }

.sr-item {
  display: block; border: 1px solid var(--border); border-radius: 10px;
  padding: 13px 16px; margin-bottom: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.sr-item:hover, .sr-item.on {
  border-color: var(--accent); background: rgba(61, 139, 255, 0.06);
}
.sr-item .t { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.sr-item .x {
  display: block; font-size: 13px; color: var(--muted);
  line-height: 1.78; margin-top: 6px;
}
.sr-item mark {
  background: rgba(61, 139, 255, 0.24); color: var(--accent-2);
  border-radius: 3px; padding: 0 2px;
}

.sr-empty {
  border: 1px dashed var(--border); border-radius: 10px;
  padding: 26px 22px; color: var(--muted); font-size: 13.5px; line-height: 1.85;
}
.sr-empty b { color: var(--text); }
.sr-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sr-quick button {
  background: transparent; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-family: inherit; font-size: 12.5px;
  padding: 6px 14px; cursor: pointer; transition: all 0.25s;
}
.sr-quick button:hover { border-color: var(--accent); color: var(--accent-2); }
.sr-tips { margin-top: 34px; }

.doc-search-tip {
  font-size: 12.5px; color: var(--dim); margin: 8px 0 0;
  font-family: var(--mono); letter-spacing: 0.3px;
}
@media (max-width: 620px) {
  .sr-bar { flex-wrap: wrap; }
  .sr-bar button { padding: 12px 18px; width: 100%; }
  .sr-bar .sb-k { display: none; }
}


/* ===== SR-PAGES-GLASS v1 (2026-10-16) =====
   子页独有件：代码块 / 引用块 / 搜索 / 分页 / 侧栏。
   本表在 styles.css 之后加载，因此只在 styles.css 定义的件不用在这里重复；
   这里只覆盖「本表前文已经定义过」的件——同特异性下后加载者胜。 */

/* ---- 1. 正文里的代码：圆润 + 柔影 ---- */
.doc-body code{ border-radius: 8px; }
.doc-body pre{
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 44px -30px rgba(0,0,0,.9);
}
.kbd{ border-radius: 8px; }

/* ---- 2. 引用块：保留左侧蓝竖线的编辑式形态，只把右侧圆角放宽 ---- */
.note{ border-radius: 0 12px 12px 0; }

/* ---- 3. 搜索框与结果：可点的做胶囊，条目做圆角块 ---- */
.doc-search{ border-radius: 999px; }
.dn-search input{ border-radius: 12px; }
.dn-search .dn-k{ border-radius: 6px; }
.sr-bar input{ border-radius: 12px; }
.sr-bar .sb-k{ border-radius: 6px; }
.sr-bar button{ border-radius: 999px; }
.sr-item{ border-radius: 16px; }
.sr-empty{ border-radius: 14px; }

/* ---- 4. 分页 / 分享 / 房间卡 ---- */
.doc-pager a, .doc-pager .ph{ border-radius: 999px; }
.share-box{ border-radius: 20px; }
.room-share{ border-radius: 999px; }
.log-ver .latest{ border-radius: 999px; }
.qr-hold canvas{ border-radius: 14px; }

/* ---- 5. 进度条圆头 ---- */
.bar-row .b-t{ border-radius: 999px; }

/* ---- 6. 搜索 / 条目的柔影 ---- */
.doc-search, .share-box, .sr-item{
  box-shadow: 0 22px 54px -34px rgba(0,0,0,.88), inset 0 1px 0 rgba(255,255,255,.05);
  transition: box-shadow .5s cubic-bezier(.16,1,.3,1),
              border-color .5s cubic-bezier(.16,1,.3,1);
}

/* ---- 7. 文档侧栏内部滚动条：同样做成细圆玻璃（照参考站做法） ---- */
.docs-nav{ scrollbar-width: thin; scrollbar-color: rgba(126,152,178,.70) transparent; }
.docs-nav::-webkit-scrollbar{ width: 6px; }
.docs-nav::-webkit-scrollbar-track{ background: transparent; }
.docs-nav::-webkit-scrollbar-thumb{
  background-image: linear-gradient(180deg, rgba(188,208,228,.66), rgba(96,122,148,.34));
  background-color: rgba(126,152,178,.60);
  border-radius: 999px;
  min-height: 36px;
}
.docs-nav::-webkit-scrollbar-thumb:hover{
  background-color: rgba(61,139,255,.78);
  background-image: linear-gradient(180deg, rgba(208,232,255,.72), rgba(61,139,255,.34));
}


/* ===== SR-PAGES-GLASS v2 (2026-10-16) =====
   文档中心 / 服务器状态 / 更新日志 正文里的内部件：侧栏项、文档卡、表格行、
   统计格、房间行。全部只在桌面档生效——窄屏保持原有紧凑排版，
   避免两列网格与表格被挤出横溢（参考站的 scrollbar-gutter 已踩过一次）。 */
@media (min-width: 961px) {

/* ---- 8. 文档侧栏项：直角竖线 → 圆角玻璃胶囊（.on 保留内嵌蓝竖线） ---- */
.docs-nav a{
  margin-left: -18px;
  padding: 7px 12px 7px 14px;
  border-radius: 11px;
  margin-bottom: 2px;
  transition: color .28s, background .32s, box-shadow .32s, border-color .28s;
}
.docs-nav a:hover{
  color: var(--text);
  background: linear-gradient(170deg, rgba(255,255,255,.085), rgba(255,255,255,.028));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.docs-nav a.on{
  color: var(--accent-2);
  border-left-color: var(--accent);
  background: linear-gradient(170deg, rgba(61,139,255,.20), rgba(61,139,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 26px -18px rgba(61,139,255,.8);
}

/* ---- 9. 文档卡：上分隔线列表 → 圆角玻璃卡 ---- */
.doc-cards{ gap: 16px; }
.doc-sec .doc-cards{ gap: 16px; }
.doc-card{
  border: 1px solid rgba(255,255,255,.09);
  border-top-color: rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 20px 22px;
  background: linear-gradient(170deg, rgba(255,255,255,.055), rgba(255,255,255,.016) 62%, rgba(255,255,255,.038));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 58px -38px rgba(0,0,0,.95);
  transition: border-color .45s cubic-bezier(.16,1,.3,1),
              box-shadow .45s cubic-bezier(.16,1,.3,1),
              transform .45s cubic-bezier(.16,1,.3,1);
}
.doc-card:hover{
  border-color: rgba(61,139,255,.42);
  transform: translateY(-3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px -40px rgba(0,0,0,1);
}

/* ---- 10. 正文表格：行悬停圆角玻璃（首末格补内边距，圆角才有呼吸） ---- */
table tbody tr{ transition: background .3s; }
table th:first-child, table td:first-child{ padding-left: 12px; }
table th:last-child, table td:last-child{ padding-right: 12px; }
table tbody tr:hover td{
  background: linear-gradient(170deg, rgba(255,255,255,.058), rgba(255,255,255,.016) 58%, rgba(255,255,255,.040));
}
table tbody tr td:first-child{ border-radius: 12px 0 0 12px; }
table tbody tr td:last-child{ border-radius: 0 12px 12px 0; }

/* ---- 11. 服务器状态：统计格 → 圆角玻璃卡 ---- */
.stat-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  border-top: none;
}
.stat-cell{
  padding: 20px 20px 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.016) 62%, rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 22px 52px -36px rgba(0,0,0,.92);
}

/* ---- 12. 服务器状态房间行 / 更新日志版本块：悬停圆角玻璃 ---- */
.room-row, .log-item{
  border-radius: 14px;
  transition: background .35s cubic-bezier(.16,1,.3,1);
}
.room-row:hover{
  background: linear-gradient(170deg, rgba(255,255,255,.058), rgba(255,255,255,.016) 58%, rgba(255,255,255,.040));
}
.log-item{ padding: 24px 18px 22px; }
.log-item:hover{
  background: linear-gradient(170deg, rgba(255,255,255,.058), rgba(255,255,255,.016) 58%, rgba(255,255,255,.040));
}

}  /* /@media min-width 961 */

/* ===== SR-PAGES-GLASS v3 (2026-10-16) 液态玻璃：文档 / 服务器 / 日志的正文内部件 =====
   本表在 styles.css 之后加载，所以这里的规则对「本表前文定义过的件」必定生效。
   只改面 / 边 / 模糊 / 内高光；v2 段的圆角与排版一律保留。 */

/* ---- 1. 代码块：实底 → 玻璃（保留语法高亮的前景色，不动） ---- */
.doc-body pre{
  background:
    linear-gradient(170deg, rgba(255,255,255,.045), rgba(255,255,255,.012) 62%, rgba(255,255,255,.03)),
    rgba(11,15,20,.62);
  border-color: rgba(255,255,255,.10);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 22px 54px -34px rgba(0,0,0,.95);
}

/* ---- 2. 引用块：蓝淡底 → 蓝玻璃（.warn/.bad 的语义色不动，权重更高） ---- */
.note{
  background:
    linear-gradient(90deg, rgba(61,139,255,.13), rgba(61,139,255,.035) 70%, rgba(61,139,255,.07)),
    rgba(11,15,20,.40);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ---- 3. 文档卡 / 服务器统计格：v2 已给玻璃面，这里补上模糊 ---- */
.doc-card, .stat-cell{
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 26px 64px -40px rgba(0,0,0,1);
}

/* ---- 4. 搜索框与结果条目 ---- */
.doc-search{
  background:
    linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.018) 62%, rgba(255,255,255,.042)),
    rgba(12,16,22,.52);
  border-color: rgba(255,255,255,.115);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.sr-item{
  background:
    linear-gradient(170deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 62%, rgba(255,255,255,.035)),
    rgba(12,16,22,.34);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.sr-item:hover, .sr-item.on{
  background:
    linear-gradient(170deg, rgba(61,139,255,.16), rgba(61,139,255,.05) 62%, rgba(61,139,255,.11)),
    rgba(12,16,22,.38);
}

/* ---- 5. 分享框（二维码容器本身保持白底，扫码对比度优先） ---- */
.share-box{
  background:
    linear-gradient(170deg, rgba(255,255,255,.06), rgba(255,255,255,.018) 62%, rgba(255,255,255,.042)),
    rgba(11,15,20,.58);
  border-color: rgba(255,255,255,.115);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 30px 80px -40px rgba(0,0,0,1);
}

/* ---- 6. 房间行 / 版本块 / 分页：悬停时也走玻璃 ---- */
.room-row:hover, .log-item:hover, .doc-pager a:hover{ backdrop-filter: blur(14px) saturate(150%); }

/* ---- 7. 兜底 ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .doc-body pre, .share-box{ background: rgba(11,15,20,.94); }
  .doc-search{ background: rgba(12,16,22,.92); }
  .doc-card, .stat-cell{ background: rgba(12,16,22,.94); }
}