/* ==========================================================================
   班务管理（行规分体系）页面样式
   --------------------------------------------------------------------------
   约定（见 docs/FRONTEND-CONTRACT.md）：
   · 页面只使用既有类名（components.css / pages.css）；本文件只补充
     「现有类名无法表达」的样式，统一使用 `bhv-` 前缀，禁止新建其它前缀。
   · 颜色 / 间距 / 圆角 / 阴影一律使用 tokens.css 的 CSS 变量，
     因此浅色与深色主题自动适配，无需 `[data-theme]` 分支。
   · 不新增 animation / keyframes：动效由框架（animations.css）统一提供。

   类名前缀清单：
     .bhv-score          行规分大字（表格中的总分，等宽数字 + 正绿负红）
       --up / --down / --zero
     .bhv-timeline-score 日行规时间线里靠右对齐的分值（时间 · 原因 · 分值）
     .bhv-wheel          幸运大转盘占位页的居中大卡片与其中内容
       .bhv-wheel__hero / __icon / __title / __sub / __desc
     .bhv-switch         「加分 / 扣分」容器页顶部的「单次 / 批量」切换区
       .bhv-switch__tabs（tab 条容器）/ __hint（一句话说明）
     .bhv-panel          容器页中承载内联表单的插槽（垂直排列若干卡片）
   ========================================================================== */

/* --------------------------------------------------------------------------
   行规分大字（正绿负红）
   表格中的行规分需要比普通数字更醒目，score-pill 是「徽标」而不是「数值」，
   因此单独提供一个大字号数值样式。
   -------------------------------------------------------------------------- */
.bhv-score {
  display: inline-block;
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.bhv-score--up { color: var(--success); }
.bhv-score--down { color: var(--danger); }
.bhv-score--zero { color: var(--text-tertiary); font-weight: 600; }

/* --------------------------------------------------------------------------
   日行规变动：每个时间线节点右侧的分值
   .timeline__head 是 flex 容器，把分值推到最右侧即可形成
   「时间 · 原因 · 分值」的单行结构。
   -------------------------------------------------------------------------- */
.bhv-timeline-score { margin-left: auto; }

/* --------------------------------------------------------------------------
   幸运大转盘（开发中占位）
   居中大卡片 + 品牌色图标底座，现有类名没有「居中英雄卡片」这一形态。
   -------------------------------------------------------------------------- */
.bhv-wheel {
  max-width: 640px;
  margin: var(--space-6) auto 0;
  text-align: center;
}

.bhv-wheel__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4) var(--space-6);
}

.bhv-wheel__icon {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-full);
  background: var(--bg-active);
  color: var(--brand-500);
  border: 2px dashed color-mix(in srgb, var(--brand-400) 42%, transparent);
  box-shadow: var(--shadow-brand);
}

.bhv-wheel__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--text-primary);
}

.bhv-wheel__sub {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-secondary);
}

.bhv-wheel__desc {
  max-width: 46ch;
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--text-tertiary);
}

/* 深色主题下品牌色底需要更明显的对比度（tokens 的 --bg-active 在深色下略淡） */
[data-theme='dark'] .bhv-wheel__icon {
  background: color-mix(in srgb, var(--brand-500) 22%, transparent);
  border-color: color-mix(in srgb, var(--brand-400) 55%, transparent);
}

/* ==========================================================================
   日行规变动：竖向时间线（v4 追加）
   --------------------------------------------------------------------------
   类名：
     .bhv-timeline               竖向时间线容器（ol）
     .bhv-timeline__item         单个节点（li）：竖线由 ::before 绘制
     .bhv-timeline__dot          圆点（独立 span）：--add 绿色 / --deduct 红色
     .bhv-timeline__body         圆点右侧内容
     .bhv-timeline__head         单行结构：时间 · 原因 · 操作人 +（靠右）分值
     .bhv-timeline__time / __sep / __reason / __operator / __meta
     .bhv-timeline-score--up / --down  分值正绿负红（基础 .bhv-timeline-score 见上方）

   颜色一律使用 tokens 变量（含 --success-soft / --danger-soft 在深色主题下已重定义），
   因此浅色与深色主题都正常，无需 [data-theme] 分支。
   ========================================================================== */
.bhv-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0 0 0 var(--space-6);
  list-style: none;
}

.bhv-timeline__item { position: relative; }

/* 竖线：每个节点从自己圆点下方连到下一个节点，最后一项不画 */
.bhv-timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6) + 5px);
  top: 14px;
  bottom: calc(-1 * var(--space-4));
  width: 2px;
  border-radius: var(--radius-full);
  background: var(--border-default);
}

.bhv-timeline__item:last-child::before { display: none; }

/* 圆点：与竖线居中对齐（容器左侧 padding 24px + 5px 线位） */
.bhv-timeline__dot {
  position: absolute;
  left: calc(-1 * var(--space-6) + 2px);
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--text-tertiary);
  box-shadow: 0 0 0 3px var(--bg-muted);
}

.bhv-timeline__dot--add {
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}

.bhv-timeline__dot--deduct {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.bhv-timeline__body { min-width: 0; }

.bhv-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.bhv-timeline__time {
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
}

.bhv-timeline__sep { color: var(--text-tertiary); }

.bhv-timeline__reason {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  word-break: break-word;
}

.bhv-timeline__operator {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.bhv-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* 靠右的分值：正绿负红（.bhv-timeline-score 的 margin-left:auto 见上方定义） */
.bhv-timeline-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.bhv-timeline-score--up { color: var(--success); }
.bhv-timeline-score--down { color: var(--danger); }

/* 移动端：竖线左侧留白收窄，避免正文被挤压 */
@media (max-width: 600px) {
  .bhv-timeline { padding-left: var(--space-5); }
  .bhv-timeline__item::before { left: calc(-1 * var(--space-5) + 5px); }
  .bhv-timeline__dot { left: calc(-1 * var(--space-5) + 2px); }
}

/* ==========================================================================
   学生端「我的行规分」：顶部大卡与统计条（v4.1 追加）
   --------------------------------------------------------------------------
   类名：
     .bhv-self-hero__value        行规分总分：复用 .score-hero__value 的超大字号，
                                  这里只把「品牌渐变」换成语义色 —— 正绿、负红、零中性
       --up / --down / --zero
     .bhv-self-hero__note         大卡下方的说明条（整行占满：左侧图标 + 小字说明）
     .bhv-self-hero__note-icon
     .bhv-self-stat--up / --down  统计卡脚注里的「合计 +15 / -2.5」

   明细时间线与违规列表分别复用 .bhv-timeline*（见上）与既有 .activity-item，
   这里不重复定义。
   ========================================================================== */
.bhv-self-hero__value {
  /* 覆盖 .score-hero__value 的渐变文字（渐变无法表达「正绿负红」的语义） */
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--text-primary);
}

.bhv-self-hero__value--up { color: var(--success); }
.bhv-self-hero__value--down { color: var(--danger); }
.bhv-self-hero__value--zero { color: var(--text-secondary); }

.bhv-self-hero__note {
  display: flex;
  flex-basis: 100%;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--text-secondary);
}

.bhv-self-hero__note-icon {
  display: inline-flex;
  margin-top: 2px;
  color: var(--brand-500);
}

/* 统计卡脚注：加分合计绿色、扣分合计红色 */
.bhv-self-stat--up { color: var(--success); }
.bhv-self-stat--down { color: var(--danger); }

/* ==========================================================================
   「加分 / 扣分」容器页：单次 / 批量切换区（v4.1 追加）
   --------------------------------------------------------------------------
   用户反馈后新增的结构：加分、扣分各占一个导航项目，点进去再分「单次 / 批量」。
   容器页顶部是 .tabs 构件的 tab 条（点击走 SPA 路由跳转），下方面板内联渲染
   对应表单页的节点。
   类名：
     .bhv-switch        切换区根容器（卡片 body）：tab 条 + 说明文字，纵向排布
     .bhv-switch__tabs  tab 条所在行（窄屏可换行，避免 tab 挤出卡片）
     .bhv-switch__hint  一句话说明（单次 / 批量各适合什么场景）
     .bhv-panel         内联表单插槽：垂直排列「结果卡 + 表单卡」，与各表单页内部
                        使用的 .col.gap-4 视觉一致
   ========================================================================== */
.bhv-switch {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bhv-switch__tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.bhv-switch__hint {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.75;
  color: var(--text-tertiary);
}

.bhv-switch__hint b {
  font-weight: 600;
  color: var(--text-secondary);
}

.bhv-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* ==========================================================================
   转盘管理：列表里的奖项概览 + 奖项编辑器（v4.6 追加）
   --------------------------------------------------------------------------
   类名：
     .bhv-wheel-prizes              列表「奖项与概率」单元格（概览 + 「等 N 项」）
       .bhv-wheel-prizes__head      第一行：奖项数量徽标
       .bhv-wheel-prizes__line      第二行：最多 3 项的概率概览（超出换行）
       .bhv-wheel-prizes__more      「等 N 项」小字
     .bhv-prize-editor              奖项编辑器根容器（同时是 .field，错误提示走 .field__error）
     .bhv-prize-list                奖项行容器（纵向排列，超长时可滚动）
     .bhv-prize-row                 单个奖项行（卡片刻线 + 浅底）
       .bhv-prize-row__head         行标题：序号 + 实时概率 + 删除按钮
       .bhv-prize-row__index        序号徽标
       .bhv-prize-row__prob         实时换算出的概率百分比（权重为 0 时 .is-zero 变灰）
       .bhv-prize-row__remove       删除该行的图标按钮
       .bhv-prize-row__fields       字段网格（名称 / 类型 / 权重，或按类型显示的额外字段）
       .bhv-prize-row__cell         一个字段（含 label 与补充说明）
         --wide                     跨两列（券下拉、自定义备注用）
       .bhv-prize-row__label        字段名
       .bhv-prize-row__note         字段下方的浅色补充说明
       .bhv-prize-row__extra        按奖项类型渲染的字段区
     .bhv-prize-warn                总权重为 0 时的红色提示（默认 .hidden）
     .bhv-prize-hint                「谢谢惠顾」这类无需额外字段的说明条

   颜色与间距一律使用 tokens 变量，因此浅色 / 深色主题都正常，无需 [data-theme] 分支。
   ========================================================================== */
.bhv-wheel-prizes {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.bhv-wheel-prizes__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bhv-wheel-prizes__line {
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--text-secondary);
  word-break: break-word;
}

.bhv-wheel-prizes__more {
  margin-left: var(--space-1);
  color: var(--text-tertiary);
}

.bhv-prize-editor {
  gap: var(--space-2);
}

.bhv-prize-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: 52vh;
  overflow-y: auto;
}

.bhv-prize-row {
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.bhv-prize-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.bhv-prize-row__index {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.bhv-prize-row__prob {
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand-500);
}

.bhv-prize-row__prob.is-zero {
  font-weight: 600;
  color: var(--text-tertiary);
}

.bhv-prize-row__remove {
  margin-left: auto;
  color: var(--text-tertiary);
}

.bhv-prize-row__remove:hover {
  color: var(--danger);
  background: var(--danger-soft);
}

.bhv-prize-row__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
}

.bhv-prize-row__cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.bhv-prize-row__cell--wide {
  grid-column: 1 / -1;
}

.bhv-prize-row__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-secondary);
}

.bhv-prize-row__note {
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-tertiary);
}

.bhv-prize-row__extra {
  min-width: 0;
}

.bhv-prize-warn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--danger-soft);
  border-radius: var(--radius-sm);
  background: var(--danger-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--danger);
}

.bhv-prize-hint {
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--text-tertiary);
}

/* 移动端：概率概览与奖项字段都收成单列，避免横向挤压 */
@media (max-width: 600px) {
  .bhv-prize-list {
    max-height: none;
  }

  .bhv-prize-row__fields {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   学生端「幸运大转盘」：盘面 / 抽奖按钮 / 结果卡 / 余额（v4.6 追加）
   --------------------------------------------------------------------------
   类名：
     .bhv-spin                  转盘区网格（左：盘面 + 操作；右：余额与奖项一览）
       __stage / __board        舞台与「定尺寸」盘面容器（指针、盘面、中心转轴都定位在它里面）
       __disc / __canvas        盘面（JS 用 inline transform 旋转）与画布
       __pointer                12 点方向的指针（不跟随盘面旋转）
       __hub / __hub-icon / __hub-text             中心转轴（抽完后在这里显示中奖奖项名）
         __hub-text--win / --thanks                中奖 / 谢谢惠顾的语气色
       __controls / __hint / __tip                 操作区：抽奖按钮、次数提示、规则提示
       __side / __side-block / __side-label / __side-value / __side-title
       __legend / __legend-item / __legend-dot / __legend-label / __legend-extra
     .bhv-spin-wallet           页头右上角的行规分余额（大号数字）
       __icon / __text / __label / __value / __unit
     .bhv-spin-result           抽奖结果卡（--win 中奖 / --thanks 谢谢惠顾）
       __icon / __body / __title / __text / __actions
     .bhv-spin-up               抽奖记录表里「加分券 +N 分」的文字色

   颜色 / 间距 / 圆角 / 阴影一律使用 tokens.css 的变量，浅色与深色主题都自动适配；
   盘面扇区的颜色在 canvas 里由 JS 按奖项类型给定（canvas 读不到 CSS 变量），不在本文件。
   不新增 @keyframes：旋转由 JS 写 inline transition，结果卡复用框架的 .anim-pop。
   ========================================================================== */
.bhv-spin-tabs:empty {
  display: none;
}

.bhv-spin {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  align-items: start;
  gap: var(--space-6);
}

.bhv-spin__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

/* 定尺寸容器：指针、盘面、中心转轴都以它为定位基准，因此三者永远同心 */
.bhv-spin__board {
  position: relative;
  width: min(420px, 78vw);
  aspect-ratio: 1 / 1;
}

.bhv-spin__disc {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  transform-origin: 50% 50%;
  will-change: transform;
}

.bhv-spin__canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
}

.bhv-spin__pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 24px solid var(--brand-500);
  filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.3));
}

.bhv-spin__hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 31%;
  aspect-ratio: 1 / 1;
  padding: var(--space-2);
  transform: translate(-50%, -50%);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
  text-align: center;
  pointer-events: none;
}

.bhv-spin__hub-icon {
  display: inline-flex;
  color: var(--brand-500);
}

.bhv-spin__hub-text {
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.bhv-spin__hub-text--win {
  color: var(--success);
}

.bhv-spin__hub-text--thanks {
  color: var(--text-tertiary);
}

.bhv-spin__controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(420px, 78vw);
}

.bhv-spin__hint {
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  text-align: center;
}

/* 规则 / 失败提示：始终占一行高度，避免文案变化时按钮下方跳动 */
.bhv-spin__tip {
  margin: 0;
  min-height: 1.7em;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--text-tertiary);
  text-align: center;
}

.bhv-spin__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.bhv-spin__side-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.bhv-spin__side-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.bhv-spin__side-value {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.bhv-spin__side-value--sm {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-secondary);
}

.bhv-spin__side-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.bhv-spin__legend {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bhv-spin__legend-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.bhv-spin__legend-item .badge {
  margin-left: auto;
}

/* 与扇区同色的色点：颜色由 JS 通过 --bhv-spin-dot 赋值 */
.bhv-spin__legend-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--bhv-spin-dot, var(--brand-500));
}

.bhv-spin__legend-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.bhv-spin__legend-extra {
  flex-basis: 100%;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

/* ---------- 页头右上角的行规分余额 ---------- */
.bhv-spin-wallet {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--tint-brand),
    var(--bg-surface);
  box-shadow: var(--shadow-xs);
}

.bhv-spin-wallet__icon {
  display: inline-flex;
  color: var(--brand-500);
}

.bhv-spin-wallet__text {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.bhv-spin-wallet__label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.bhv-spin-wallet__value {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.bhv-spin-wallet__unit {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ---------- 抽奖结果卡（中奖 / 谢谢惠顾） ---------- */
.bhv-spin-result-host:empty {
  display: none;
}

.bhv-spin-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-muted);
}

.bhv-spin-result--win {
  border-color: color-mix(in srgb, var(--success) 34%, transparent);
  background: var(--success-soft);
}

.bhv-spin-result__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  box-shadow: var(--shadow-xs);
  color: var(--text-tertiary);
}

.bhv-spin-result--win .bhv-spin-result__icon {
  color: var(--success);
}

.bhv-spin-result__body {
  flex: 1 1 240px;
  min-width: 0;
}

.bhv-spin-result__title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.bhv-spin-result--win .bhv-spin-result__title {
  color: var(--success);
}

.bhv-spin-result__text {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.bhv-spin-result__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ---------- 抽奖记录表里的加分结果 ---------- */
.bhv-spin-up {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--success);
}

/* 窄屏：盘面与侧栏改成上下排列（盘面在上，余额与奖项一览在下） */
@media (max-width: 960px) {
  .bhv-spin {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .bhv-spin__hub-text {
    font-size: 11px;
  }

  .bhv-spin-wallet {
    width: 100%;
    justify-content: center;
  }
}

[data-theme='dark'] .bhv-spin-wallet__icon,
[data-theme='dark'] .bhv-spin__hub-icon {
  color: var(--brand-400);
}

/* 减少动态效果：旋转交给 JS 直接落位，这里再兜一层（框架已把 transition-duration 压到 1ms） */
@media (prefers-reduced-motion: reduce) {
  .bhv-spin__disc {
    transition: none !important;
  }
}