/* ============================================================
   BAOAN Design System — szr 站点专用品牌样式
   部署路径: /common/brand.css (szr 托管根)
   接入站: szr (C 端深色品牌风)
   ------------------------------------------------------------
   剪裁说明：原全站共享 brand.css 含 .bao-switch 家族（紫色风），
   但 neirong.html 已在本地以 Figtree 粉色风定义 .bao-switch，
   且 <link> 在本地 <style> 之后加载（cascade 后加载覆盖先加载），
   若保留会将其覆盖为紫色 → 视觉回退。故此处剔除 .bao-switch 家族，
   仅保留设计 token 与未被 neirong 用到的共享工具类，消除 404 且无副作用。
   后续 szr 新页面若需 .bao-switch，应像 neirong 一样本地定义。
   ============================================================ */

:root {
  /* 色彩 Tokens */
  --bao-bg:        #0d0d16;              /* 页面背景深色 */
  --bao-bg-card:   #14142a;              /* 卡片 */
  --bao-bg-hover:  #1c1c33;             /* hover/弹层 */
  --bao-purple:    #8b5cf6;             /* 品牌紫 */
  --bao-purple-dk: #7c5cf6;             /* 渐变深紫 */
  --bao-lime:      #a3e635;             /* 品牌青柠 */
  --bao-pink:      #ff6b6b;             /* 强调粉（危险/点缀） */
  --bao-teal:      #4ecdc4;             /* 信息青（成功） */
  --bao-amber:     #f59e0b;             /* 琥珀（警示） */
  --bao-text:      #e8e8ef;             /* 主文字 */
  --bao-text-body: #b8b8cc;             /* 正文 */
  --bao-text-sub:  #9a9ab0;             /* 辅助文字 */
  --bao-text-dim:  #5a5a75;             /* 弱化文字 */
  --bao-border:        rgba(184,143,255,0.15);
  --bao-border-strong: rgba(184,143,255,0.3);
  --bao-grad: linear-gradient(90deg, var(--bao-purple-dk), var(--bao-purple));

  /* 圆角 / 字体 */
  --bao-radius-sm: 8px;
  --bao-radius-md: 12px;
  --bao-radius-lg: 16px;
  --bao-radius-pill: 999px;
  --bao-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ===== 卡片 ===== */
.bao-card {
  background: var(--bao-bg-card);
  border: 1px solid var(--bao-border);
  border-radius: var(--bao-radius-md);
  padding: 20px;
  transition: transform .2s, border-color .2s;
}
.bao-card:hover { border-color: var(--bao-border-strong); }

/* ===== 按钮 ===== */
.bao-btn {
  display: inline-block; padding: 9px 18px; border-radius: var(--bao-radius-sm);
  border: 1px solid var(--bao-border); background: transparent;
  color: var(--bao-text-sub); font-size: 13px; cursor: pointer; text-decoration: none;
  transition: all .2s;
}
.bao-btn:hover { color: #fff; border-color: rgba(163,230,53,0.5); }
.bao-btn.primary { background: var(--bao-grad); color: #fff; border-color: transparent; font-weight: 600; }

/* ===== 文本 ===== */
.bao-h1 { font-size: 28px; font-weight: 800; color: var(--bao-text); }
.bao-h2 { font-size: 16px; font-weight: 700; color: var(--bao-lime); letter-spacing: 1px; }
.bao-body { font-size: 13.5px; color: var(--bao-text-body); line-height: 1.9; }
.bao-sub { font-size: 12px; color: var(--bao-text-sub); }

/* ===== 输入框 ===== */
.bao-input {
  width: 100%; padding: 10px 14px; border-radius: var(--bao-radius-sm);
  background: var(--bao-bg-hover); border: 1px solid var(--bao-border);
  color: var(--bao-text); font-size: 14px; outline: none;
}
.bao-input:focus { border-color: var(--bao-purple); }

/* ===== 标签 ===== */
.bao-tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--bao-radius-pill);
  font-size: 11px; color: var(--bao-lime); background: rgba(163,230,53,0.1);
  border: 1px solid rgba(163,230,53,0.3);
}

/* ===== 站内导航（备用，neirong 当前用 .ft-nav 本地样式） ===== */
.bao-nav {
  display: flex; gap: 4px; padding: 8px 16px;
  background: var(--bao-bg-card); border-bottom: 1px solid var(--bao-border);
  flex-wrap: wrap;
}
.bao-nav .bn {
  padding: 6px 14px; border-radius: var(--bao-radius-sm);
  font-size: 13px; color: var(--bao-text-sub); text-decoration: none;
}
.bao-nav .bn:hover { color: #fff; }
.bao-nav .bn.cur { background: var(--bao-grad); color: #fff; }

/* ===== 亮色点缀（渐变文字替换用） ===== */
.bao-accent-grad { background: var(--bao-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }