/* =======================================================
 * doc.css · 文档页样式（隐私政策 / 用户协议）
 * =======================================================
 * 依赖：theme.css / components.css
 * ======================================================= */


/* =====================================================
 * 主区域
 * ===================================================== */

.doc-stage {
  flex: 1;
  padding-bottom: var(--sp-10);
  color: var(--fg-1);
  font-size: var(--fs-md);
  line-height: 1.8;
}


/* =====================================================
 * 文档元信息
 * ===================================================== */

.doc-meta {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border-left: 2px solid var(--border-gold);
  background: rgba(245, 197, 66, 0.04);
  border-radius: var(--r-sm);
  line-height: 1.6;
}


/* =====================================================
 * 标题
 * ===================================================== */

.doc-stage h2 {
  font-size: var(--fs-lg);
  color: var(--fg-0);
  font-weight: 600;
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-0);
  letter-spacing: 0.5px;
}

.doc-stage h3 {
  font-size: var(--fs-base);
  color: var(--gold-0);
  font-weight: 500;
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.5px;
}


/* =====================================================
 * 正文
 * ===================================================== */

.doc-stage p {
  margin-bottom: var(--sp-4);
}

.doc-stage b,
.doc-stage strong {
  color: var(--fg-0);
  font-weight: 500;
}


/* =====================================================
 * 列表
 * ===================================================== */

.doc-stage ul {
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.doc-stage li {
  margin-bottom: var(--sp-2);
  position: relative;
}

.doc-stage ul li::marker {
  color: var(--gold-0);
}


/* =====================================================
 * 行内代码
 * ===================================================== */

.doc-stage code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--r-sm);
  color: var(--gold-0);
}


/* =====================================================
 * 结尾署名
 * ===================================================== */

.doc-foot {
  margin-top: var(--sp-10);
  text-align: right;
  font-size: var(--fs-sm);
  color: var(--fg-2);
  font-style: italic;
  letter-spacing: 1px;
}


/* =====================================================
 * 架构图
 * =====================================================
 * "关于本站"页里展示技术架构的 ASCII 图。
 * 等宽字体 + 深色背景 + 圆角。
 * --------------------------------------------------- */

.arch-diagram {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--fg-1);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-1);
  border-left: 2px solid var(--border-gold);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  overflow-x: auto;
  white-space: pre;
}


/* =====================================================
 * 服务器状态卡片
 * =====================================================
 * "关于本站"页展示板子实时状态。
 * --------------------------------------------------- */

.server-card {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  margin: var(--sp-5) 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.03) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color 0.2s;
}

.server-card:hover {
  border-color: var(--border-gold);
}

/* 顶部金线装饰 */
.server-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
}

/* 卡片头部 */
.server-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  color: var(--fg-1);
  margin-bottom: var(--sp-4);
  letter-spacing: 0.5px;
}

.server-mark {
  color: var(--gold-0);
  font-size: 14px;
  text-shadow: 0 0 8px rgba(245, 197, 66, 0.5);
}

.server-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fg-3);
  margin-left: auto;
  transition: background 0.3s;
}

.server-dot.ok   { background: var(--cyan); box-shadow: 0 0 8px rgba(78, 205, 196, 0.6); }
.server-dot.err  { background: var(--danger); }
.server-dot.warn { background: var(--warn); }

/* 数据行 */
.server-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-2) 0;
}

.server-label {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  letter-spacing: 0.5px;
}

.server-value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg-0);
}

.server-value.server-big {
  font-size: var(--fs-lg);
  color: var(--gold-0);
  font-weight: 600;
}

/* 分隔线 */
.server-divider {
  border-top: 1px dashed var(--border-0);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
}

/* 底部更新时间 */
.server-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border-0);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  text-align: right;
  font-family: var(--font-mono);
}