/* ============================================================
   咸鱼社区 brand.css —— 品牌挂点组件样式
   依赖：style.css（设计 token + 基础组件）
   引入：须在 layout_header.php 中位于 style.css 之后
         <link rel="stylesheet" href="/static/css/brand.css?v=1">
   ============================================================ */

/* ------------------------------------------------------------
   1. 面包屑 .crumbs
   小字灰色，链接 hover 主色；「›」分隔符由模板文本提供
   ------------------------------------------------------------ */
.crumbs {
  font-size: var(--fs-sm);
  color: var(--n-500);
  margin-bottom: var(--sp-3);
  line-height: 1.6;
}
.crumbs a {
  color: var(--n-500);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.crumbs a:hover { color: var(--c-primary); }

/* ------------------------------------------------------------
   2. 举报链接 .report-link
   小字灰色，hover 变红提示危险操作
   ------------------------------------------------------------ */
.report-link {
  font-size: 12px;
  color: var(--n-400);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.report-link:hover { color: var(--c-err); }

/* ------------------------------------------------------------
   3. 影视条目徽章 .tag-movie
   橙色描边 + 软底胶囊；hover 变实底（品牌橙做奖励/强调）
   ------------------------------------------------------------ */
.tag-movie {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 11px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  text-decoration: none;
  color: #8a5410;
  background: var(--c-accent-soft);
  border: 1px solid rgba(255, 159, 39, .45);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.tag-movie:hover {
  color: var(--c-accent-ink);
  background: linear-gradient(135deg, var(--c-accent-bright), var(--c-accent-deep));
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}

/* ------------------------------------------------------------
   4. @提及 .mention
   主色加粗 + 淡底圆角（主色 = 交互，可点击感）
   ------------------------------------------------------------ */
.mention {
  font-weight: 700;
  color: var(--c-primary);
  background: var(--c-primary-soft);
  padding: 0 5px;
  border-radius: var(--r-xs);
}

/* ------------------------------------------------------------
   5. 外链图片屏蔽占位 .bb-img-blocked
   虚线框灰色小字块
   ------------------------------------------------------------ */
.bb-img-blocked {
  display: inline-block;
  padding: 12px 16px;
  border: 1.5px dashed var(--n-300);
  border-radius: var(--r-sm);
  background: var(--n-100);
  color: var(--n-500);
  font-size: 12px;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   6. 头像框体系 .avatar-fr + [data-frame]
   实现：渐变 background + 2px padding 露边 + 圆角 50%，
   内层 .avatar（圆形）坐进框中。
   · ocean  海洋：蓝渐变
   · sunset 落日：橙红渐变
   · koi    锦鲤：金色 + 微光
   ------------------------------------------------------------ */
.avatar-fr {
  display: inline-block;
  padding: 2px;
  border-radius: 50%;
  line-height: 0;
  vertical-align: middle;
}
.avatar-fr .avatar { vertical-align: top; }

.avatar-fr[data-frame="ocean"] {
  background: linear-gradient(135deg, #4dabf7, var(--c-primary));
}
.avatar-fr[data-frame="sunset"] {
  background: linear-gradient(135deg, var(--c-accent-bright), #ff5e3a);
}
.avatar-fr[data-frame="koi"] {
  background: linear-gradient(135deg, #ffd700, var(--c-accent), #ffd700);
  box-shadow: 0 0 6px rgba(255, 215, 0, .55);
}

/* ------------------------------------------------------------
   7. 徽章归一：.tag-top / .tag-best / .tag-lock
   与 .badge-group / .badge-title 统一为「描边 + 软底」胶囊语言，
   覆盖 style.css 的实底渐变版本（本文件须后于 style.css 加载）。
   语义色保留：置顶红 / 精华橙 / 锁定灰
   ------------------------------------------------------------ */
.tag-top, .tag-best, .tag-lock {
  display: inline-flex;
  align-items: center;
  padding: 1.5px 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 2px;
  border: 1px solid currentColor;
  background: transparent;
}
.tag-top  { color: var(--c-err);  background: var(--c-err-soft); }
.tag-best { color: #8a5410;       background: var(--c-accent-soft); }
.tag-lock { color: var(--n-500);  background: var(--n-100); }

/* ------------------------------------------------------------
   8. 空状态吉祥物 .empty-state img.mascot
   场景约定：空状态默认 sleep；签到/奖励成功 cheer；
   一般占位 idle。轻浮动动效，尊重 reduced-motion。
   ------------------------------------------------------------ */
.empty-state img.mascot {
  width: 96px;
  height: auto;
  opacity: .85;
  display: block;
  margin: 0 auto var(--sp-2);
  animation: mascot-float 3.2s ease-in-out infinite;
}
@keyframes mascot-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .empty-state img.mascot { animation: none; }
}

/* ------------------------------------------------------------
   9. .stat-bar 品牌渐变微调
   style.css 原为 120deg 深蓝渐变；按品牌规范统一改为 135°
   （所有渐变统一 135° 左上→右下），并把末端收束到主色靛蓝，
   让统计条与按钮/链接的交互色同源。
   ------------------------------------------------------------ */
.stat-bar {
  background: linear-gradient(135deg, #1e2a4f 0%, #2c3a6e 55%, #3f55b0 100%);
}