/* 海博预测页面样式——全部 class 加 hbp- 前缀，避免跟主题 hyboox-x 自己的
 * .hx- 样式互相污染。
 *
 * 2026-11-06 对齐可交互原型（reference/prototype.html）视觉——配色/圆角/
 * 卡片阴影/间距直接照抄原型里用的具体数值，不是沿用主题的 --brand 红/
 * --plus-editor-add 绿那两个 token 了（原型的红#C8102E、绿#0B7A3E跟主题
 * 自己的红#CB0202、绿#00BA7C数值不同——按本轮指令"配色以原型为准，冲突
 * 报告"，这里选了原型的具体数值，冲突已经在回复里报告过）。ink/ink-2
 * 两个文字色原型用的#0F1419/#536471，跟主题--light-ink/--light-ink-2
 * 刚好一样，不是巧合是真没冲突，这两个继续走var(--ink,...)跟主题联动
 * （含自动深色模式），只有红/绿/蓝（海博预测强调色）这几个原型专有色
 * 改成写死的值——原型本身没有深色模式设计，这几个强调色在深色模式下
 * 暂时沿用同一套值，不是遗漏，是没有设计依据去造一套新的。
 */

:root {
  --hbp-up: #C8102E;        /* 原型：涨/看涨/红 */
  --hbp-up-dark: #A50E26;   /* 原型：看涨徽标深色文字 */
  --hbp-down: #0B7A3E;      /* 原型：跌/看跌/绿（按钮/文字用） */
  --hbp-down-chart: #1E9E5A; /* 原型：实盘图跌色/大众比例条跌色用的稍亮绿 */
  --hbp-down-dark: #0B5D30; /* 原型：看跌徽标深色文字 */
  --hbp-up-soft: #FDE8EB;
  --hbp-down-soft: #E7F5EC;
  --hbp-blue: #1D4ED8;      /* 海博预测强调色 */
  --hbp-blue-ref: #2563EB;  /* 走势图基准虚线 */
  --hbp-blue-bg: #F5F8FF;
  --hbp-blue-border: #BFD3FB;
  --hbp-blue-80: #C9DAFB;   /* 区间条80%段 */
  --hbp-blue-50: #5B8DEF;   /* 区间条50%段 */
  --hbp-field: #F7F7F8;
  --hbp-field-2: #F0F1F3;
  --hbp-border: #E6E8EB;
  --hbp-border-2: #D4D8DD;
  --hbp-ink-3: #8B949E;
  --hbp-ink-4: #3D4752;
  --hbp-free-bg: #FFF8E6; --hbp-free-ink: #7A4B00;
  --hbp-paid-bg: #FFF1F3; --hbp-paid-ink: #A50E26;
  --hbp-locked-bg: #F0F1F3; --hbp-locked-ink: #3D4752;
}

.hbp-app, .hbp-app * {
  box-sizing: border-box;
}

.hbp-app {
  --hbp-bg: var(--bg, #FFFFFF);
  --hbp-bg-elev: var(--bg-elev, #FFFFFF);
  --hbp-ink: var(--ink, #0F1419);
  --hbp-ink-2: var(--ink-2, #536471);
  --hbp-line: var(--line, #EFF3F4);
  --hbp-font: var(--font-stack, "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif);

  max-width: 1180px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  font-family: var(--hbp-font);
  color: var(--hbp-ink);
  background: var(--hbp-bg);
  font-size: 15px;
  line-height: 1.5;
}

.hbp-body { background: var(--bg, #FFFFFF); margin: 0; }

/* -------------------------------------------------- header -------------------------------------------------- */

.hbp-header {
  display: none; /* 原型没有独立header——标题/切换挂在投票卡顶部一行，见.hbp-vote-head */
}

/* -------------------------------------------------- layout: 投票卡在最上，下面两栏 -------------------------------------------------- */

.hbp-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hbp-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}

.hbp-trend-card { flex: 999 1 560px; min-width: 0; }
.hbp-live-trend-card { flex: 1 1 320px; min-width: 0; }
.hbp-tickets-card { flex: 1 1 320px; min-width: 0; }
.hbp-my-stats-card { flex: 1 1 320px; min-width: 0; }
.hbp-leaderboard-card { flex: 1 1 320px; min-width: 0; }

/* -------------------------------------------------- 我的战绩 / 排行榜 -------------------------------------------------- */

.hbp-cert-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ffd45e, #ff9d3d);
  color: #3a2200;
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
}
.hbp-my-stats-badge { margin-bottom: 10px; }
.hbp-my-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.hbp-my-stat-item { display: flex; flex-direction: column; gap: 2px; }
.hbp-my-stat-label { font-size: 12px; color: var(--hbp-ink-3); }
.hbp-my-stat-value { font-size: 16px; font-weight: 700; }
.hbp-my-stat-value.is-up { color: var(--hbp-up); }
.hbp-my-stat-value.is-down { color: var(--hbp-down); }

.hbp-leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
.hbp-leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hbp-border);
}
.hbp-leaderboard-row:last-child { border-bottom: none; }
.hbp-leaderboard-rank { width: 22px; text-align: center; font-weight: 800; color: var(--hbp-ink-3); }
.hbp-leaderboard-name { flex: 1; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.hbp-leaderboard-return { font-weight: 700; }
.hbp-leaderboard-return.is-up { color: var(--hbp-up); }
.hbp-leaderboard-return.is-down { color: var(--hbp-down); }
.hbp-leaderboard-ticket-count { font-size: 12px; color: var(--hbp-ink-3); }

.hbp-invite-card { flex: 1 1 320px; min-width: 0; }
.hbp-invite-rule { font-size: 13px; color: var(--hbp-ink-2); line-height: 1.5; margin: 0 0 12px; }
.hbp-invite-code-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.hbp-invite-code {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
  background: var(--hbp-field);
  border-radius: 10px;
  padding: 6px 14px;
  font-variant-numeric: tabular-nums;
}
.hbp-invite-badge { margin-bottom: 10px; }
.hbp-invite-stats { display: flex; gap: 18px; flex-wrap: wrap; }
.hbp-invite-stat { display: flex; flex-direction: column; gap: 2px; }
.hbp-invite-stat-label { font-size: 12px; color: var(--hbp-ink-3); }
.hbp-invite-stat-value { font-size: 16px; font-weight: 700; }

.hbp-discussion-card { flex: 1 1 320px; min-width: 0; }
.hbp-discussion-list { display: flex; flex-direction: column; gap: 12px; max-height: 420px; overflow-y: auto; }
.hbp-discussion-row { display: flex; flex-direction: column; gap: 2px; }
.hbp-discussion-head { display: flex; align-items: baseline; gap: 8px; }
.hbp-discussion-name { font-size: 13px; font-weight: 700; color: var(--hbp-ink-2); }
.hbp-discussion-time { font-size: 11px; color: var(--hbp-ink-3); }
.hbp-discussion-content { font-size: 14px; line-height: 1.5; word-break: break-word; white-space: pre-wrap; }
.hbp-discussion-delete { font-size: 12px; color: var(--hbp-ink-3); background: none; border: none; cursor: pointer; padding: 0; align-self: flex-start; }
.hbp-discussion-compose { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.hbp-discussion-input {
  flex: 1;
  min-width: 0;
  resize: none;
  border: 1px solid var(--hbp-border);
  border-radius: 10px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--hbp-ink);
  background: var(--hbp-field);
}
/* .hbp-discussion-send 复用 .hbp-primary-btn（红底白字按钮样式），但
 * .hbp-primary-btn 本身是 width:100% 设计给独占一行的提交按钮用的
 * （登录弹窗/改投确认弹窗那种场景）——这里是横排在输入框右边，
 * width:100% 会把自己的 flex-basis 撑到整行宽度，把同一行 flex:1 的
 * 输入框挤压到只剩个位数像素宽（真实验证过的bug：输入框只剩22px宽，
 * 看起来像点不进去/打不了字，实际是能点到但窄到没法用）。
 * .hbp-primary-btn 这条规则在文件里定义得比这里晚，单类选择器选择器
 * 特异性又相同，级联顺序会让后面那条赢——加 .hbp-discussion-compose
 * 这层父选择器把特异性提高一级，不依赖文件里两条规则谁先谁后。 */
.hbp-discussion-compose .hbp-discussion-send { width: auto; flex: none; min-height: 40px; padding: 0 18px; }
.hbp-discussion-login-hint { font-size: 13px; color: var(--hbp-ink-3); margin-top: 10px; }

/* -------------------------------------------------- cards -------------------------------------------------- */

.hbp-card {
  background: var(--hbp-bg-elev);
  border: 1px solid var(--hbp-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(15, 20, 25, 0.06);
}

.hbp-vote-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }

.hbp-card-title { font-size: 16px; font-weight: 800; margin: 0; }

/* -------------------------------------------------- vote card head: 徽标 + 标题 + 周期切换 -------------------------------------------------- */

.hbp-vote-head {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.hbp-badge {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--hbp-up);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hbp-vote-head-text {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hbp-meta { font-size: 13px; color: var(--hbp-ink-2); }

.hbp-question {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.25;
}

.hbp-horizon-switch {
  display: flex;
  gap: 4px;
  background: var(--hbp-field-2);
  padding: 4px;
  border-radius: 10px;
}

.hbp-horizon-btn {
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--hbp-ink-2);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}

.hbp-horizon-btn.is-active {
  background: var(--hbp-bg-elev);
  color: var(--hbp-ink);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* -------------------------------------------------- 基准/当前/积分/倒计时 一行 -------------------------------------------------- */

.hbp-basis-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--hbp-ink-2);
}

.hbp-basis-row b { color: var(--hbp-ink); font-variant-numeric: tabular-nums; }

.hbp-current-info, .hbp-points-info { display: inline-flex; align-items: center; gap: 4px; }
/* 2026-11-06：用户反馈这条信息行里的"当前"价数字不够突出，跟侧栏"实盘"
 * 小卡片那个大字号数字（.hbp-live-trend-big-price）同样的处理方式——单独
 * 加大这一个元素的字号，不碰图表坐标轴字号（这条信息行本来就不含图表，
 * 跟那边"不要动图表坐标轴字号"的顾虑不冲突，这里单纯是行内文字放大）。
 * 字号没有照搬28px那么大——这里是跟"基准价/休市/我的积分"同一行内联展示
 * 的次级信息条，不是独立卡片的主视觉，太大会把整行撑得不协调。 */
[data-hbp-current-price] { font-size: 20px; font-weight: 800; }
[data-hbp-current-price].is-up { color: var(--hbp-up); }
[data-hbp-current-price].is-down { color: var(--hbp-down-chart); }
.hbp-current-change.is-up { color: var(--hbp-up); font-weight: 700; }
.hbp-current-change.is-down { color: var(--hbp-down-chart); font-weight: 700; }
.hbp-market-phase { color: var(--hbp-ink-3); }

.hbp-countdown-row {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hbp-countdown-label { font-size: 13px; color: var(--hbp-ink-2); }

.hbp-countdown-value {
  min-width: 104px;
  box-sizing: border-box;
  padding: 6px 14px;
  border-radius: 999px;
  border: 3px solid var(--hbp-ink);
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--hbp-ink);
}

.hbp-countdown-value.is-urgent { border-color: var(--hbp-up); color: var(--hbp-up); }

.hbp-prompt { font-size: 15px; color: var(--hbp-ink-4); line-height: 1.6; }

/* -------------------------------------------------- vote buttons -------------------------------------------------- */

.hbp-vote-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.hbp-vote-btn {
  min-height: 84px;
  border-radius: 16px;
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
  border: 2px solid transparent;
}

.hbp-vote-sub { font-size: 13px; font-weight: 600; }

.hbp-vote-up { color: #fff; border-color: var(--hbp-up); background: var(--hbp-up); }
.hbp-vote-down { color: #fff; border-color: var(--hbp-down); background: var(--hbp-down); }

/* 未投票时按钮是实心的（原型：没投过=实心，点一下就投）；已投票后，
   未选中的那个变成描边空心，选中的那个加外圈高亮；锁定后两个都变灰。 */
.hbp-vote-up.is-outline { background: #fff; color: var(--hbp-up); }
.hbp-vote-down.is-outline { background: #fff; color: var(--hbp-down); }

.hbp-vote-up.is-selected { box-shadow: 0 0 0 5px rgba(200, 16, 46, 0.18); }
.hbp-vote-down.is-selected { box-shadow: 0 0 0 5px rgba(11, 122, 62, 0.18); }

.hbp-vote-btn.is-locked {
  cursor: not-allowed;
  background: var(--hbp-field-2);
  color: var(--hbp-ink-3);
  border-color: var(--hbp-border);
}
.hbp-vote-btn.is-locked.is-mine { outline: 2px dashed var(--hbp-ink-3); outline-offset: -8px; }

/* -------------------------------------------------- 改投规则提示条（chip） -------------------------------------------------- */

.hbp-change-info {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1.5;
  display: inline-block;
}

.hbp-change-info.is-free { background: var(--hbp-free-bg); color: var(--hbp-free-ink); }
.hbp-change-info.is-paid { background: var(--hbp-paid-bg); color: var(--hbp-paid-ink); }
.hbp-change-info.is-locked { background: var(--hbp-locked-bg); color: var(--hbp-locked-ink); }
.hbp-change-info.is-none { background: var(--hbp-field); color: var(--hbp-ink-2); font-weight: 600; }

.hbp-recharge-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--hbp-up);
  background: #fff;
  color: var(--hbp-up);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.hbp-ticket-status {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.hbp-ticket-status-line { flex: 1 1 260px; font-size: 13px; color: var(--hbp-ink-2); line-height: 1.6; margin: 0; }

.hbp-link-btn {
  min-height: 40px;
  padding: 0 8px;
  border: none;
  background: none;
  color: var(--hbp-ink-2);
  text-decoration: underline;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.hbp-link-btn.is-danger { color: var(--hbp-up); }

.hbp-next-period-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  border: 2px solid var(--hbp-up);
  background: #fff;
  color: var(--hbp-up);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

/* -------------------------------------------------- 揭晓区：大众 + 海博预测 两张并排小卡 -------------------------------------------------- */

.hbp-reveal-card { padding: 0; border: none; box-shadow: none; background: transparent; }

.hbp-reveal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.hbp-crowd, .hbp-model {
  flex: 1 1 300px;
  min-width: 0;
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hbp-crowd { background: var(--hbp-field); }
.hbp-model { background: var(--hbp-blue-bg); border: 1px solid var(--hbp-blue-border); }

.hbp-crowd-head, .hbp-model-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.hbp-crowd-title { font-size: 14px; font-weight: 800; }
.hbp-crowd-people { font-size: 12px; color: var(--hbp-ink-2); }

.hbp-crowd-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--hbp-border);
}

.hbp-crowd-bar-up { background: var(--hbp-up); }
.hbp-crowd-bar-down { background: var(--hbp-down-chart); flex: 1; }

.hbp-crowd-pcts { display: flex; justify-content: space-between; font-size: 15px; font-weight: 800; }
.hbp-crowd-pcts .is-up { color: var(--hbp-up); }
.hbp-crowd-pcts .is-down { color: #0B7A3E; }

.hbp-crowd-text { font-size: 14px; color: var(--hbp-ink); line-height: 1.6; margin: 0; }

.hbp-model-title { font-size: 14px; font-weight: 800; color: var(--hbp-blue); }
.hbp-model-updated { font-size: 12px; font-weight: 400; color: var(--hbp-ink-2); margin-left: 4px; }
.hbp-model-prob { font-size: 22px; font-weight: 800; }

.hbp-model-band-track {
  position: relative;
  height: 22px;
}

.hbp-model-band-axis {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--hbp-border);
}

.hbp-model-band-80, .hbp-model-band-50 {
  position: absolute;
  top: 7px;
  height: 8px;
  border-radius: 4px;
}

.hbp-model-band-80 { background: var(--hbp-blue-80); }
.hbp-model-band-50 { background: var(--hbp-blue-50); }

.hbp-model-band-center {
  position: absolute;
  top: 3px;
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background: var(--hbp-blue);
}

.hbp-model-band-ref {
  position: absolute;
  top: 0;
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--hbp-up);
}

.hbp-model-band-dot {
  position: absolute;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--hbp-ink);
  transform: translateX(-50%);
}

.hbp-model-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.hbp-model-stat { display: flex; flex-direction: column; gap: 2px; }
.hbp-model-stat-label { font-size: 12px; color: var(--hbp-ink-2); }
.hbp-model-stat-value { font-size: 14px; font-weight: 800; }
.hbp-model-stat-value.is-80 { font-weight: 700; color: var(--hbp-ink-4); }

.hbp-model-note { font-size: 12px; color: var(--hbp-ink-2); line-height: 1.5; margin: 0; }
.hbp-model-pending { font-size: 13px; color: var(--hbp-ink-2); margin: 0; }

/* -------------------------------------------------- 盯盘卡 -------------------------------------------------- */

.hbp-trend-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.hbp-trend-asof { font-size: 12px; color: var(--hbp-ink-2); margin-left: auto; }

.hbp-vote-chart-wrap { position: relative; }

.hbp-vote-chart-legend {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--hbp-ink-2);
  margin-bottom: 8px;
}

.hbp-vote-chart-legend-item { display: inline-flex; align-items: center; gap: 5px; }

.hbp-vote-chart-dot {
  width: 10px;
  height: 2px;
  border-radius: 1px;
  display: inline-block;
}

.hbp-vote-chart-dot-dashed {
  background: repeating-linear-gradient(to right, #2563EB 0 3px, transparent 3px 6px);
}

.hbp-vote-chart-locked {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: var(--hbp-field);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 16px;
}

.hbp-vote-chart-locked-title { font-size: 16px; font-weight: 800; }
.hbp-vote-chart-locked-sub { font-size: 13px; color: var(--hbp-ink-2); }

.hbp-trend-status {
  font-size: 13px;
  color: var(--hbp-ink-2);
  background: var(--hbp-field);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 0 0 10px;
}

.hbp-trend-chart {
  width: 100%;
  aspect-ratio: 660 / 280;
}

.hbp-trend-chart-sm { aspect-ratio: 320 / 200; }

/* 2026-11-06：实盘小卡片当前价——用户反馈图表自己画的价格轴标签不够
 * 突出，另开一个大字号DOM元素展示同一个数字（见hbp-app.js
 * makeTrendChartController的bigPriceEl参数），不依赖canvas文字。 */
.hbp-live-trend-big-price {
  display: block;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--hbp-ink);
  margin: 2px 0 10px;
}
.hbp-live-trend-big-price.is-up { color: var(--hbp-up); }
.hbp-live-trend-big-price.is-down { color: var(--hbp-down-chart); }

/* -------------------------------------------------- 往期 + 时间线 + 规则 -------------------------------------------------- */

.hbp-history-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.hbp-history-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--hbp-field-2);
  border-radius: 999px;
  padding: 6px 12px;
}

.hbp-history-label { font-size: 13px; color: var(--hbp-ink-2); }

.hbp-history-dot {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.hbp-history-dot.is-up { background: var(--hbp-up); }
.hbp-history-dot.is-down { background: var(--hbp-down-chart); }
.hbp-history-dot.is-flat { background: var(--hbp-ink-3); }

.hbp-history-empty { font-size: 13px; color: var(--hbp-ink-2); }

.hbp-timeline-block {
  border-top: 1px solid var(--hbp-border);
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hbp-timeline-title { font-size: 15px; font-weight: 700; }

.hbp-timeline-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hbp-timeline-step { display: flex; flex-direction: column; gap: 6px; }

.hbp-timeline-dotline { display: flex; align-items: center; gap: 6px; }

.hbp-timeline-dot {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--hbp-border-2);
}
.hbp-timeline-dot.is-done { background: var(--hbp-ink); border-color: var(--hbp-ink); }
.hbp-timeline-dot.is-current { border: 3px solid var(--hbp-up); }

.hbp-timeline-line { flex: 1; height: 2px; background: var(--hbp-border); }
.hbp-timeline-line.is-done { background: var(--hbp-ink); }

.hbp-timeline-label { font-size: 14px; font-weight: 600; }
.hbp-timeline-label.is-current { font-weight: 800; color: var(--hbp-up); }
.hbp-timeline-time { font-size: 12px; color: var(--hbp-ink-2); }

.hbp-rules-toggle {
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--hbp-border);
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--hbp-ink);
  cursor: pointer;
  width: 100%;
}

.hbp-rules-toggle-hint { font-size: 14px; font-weight: 400; color: var(--hbp-ink-2); }

.hbp-rules-text { margin: 0; padding: 12px 0; font-size: 14px; color: var(--hbp-ink-4); line-height: 1.7; }

/* -------------------------------------------------- tickets card (取代原型的讨论区) -------------------------------------------------- */

.hbp-ticket-item {
  border: 1px solid var(--hbp-border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}

.hbp-ticket-item:last-child { margin-bottom: 0; }

.hbp-ticket-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.hbp-ticket-direction { font-weight: 700; font-size: 14px; }
.hbp-ticket-direction.hbp-dir-up { color: var(--hbp-up); }
.hbp-ticket-direction.hbp-dir-down { color: var(--hbp-down); }

.hbp-ticket-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hbp-field-2);
  color: var(--hbp-ink-2);
}

.hbp-ticket-badge.is-win { background: var(--hbp-up-soft); color: var(--hbp-up-dark); }
.hbp-ticket-badge.is-lose { background: var(--hbp-down-soft); color: var(--hbp-down-dark); }

.hbp-ticket-meta { font-size: 12px; color: var(--hbp-ink-2); margin: 2px 0 0; }
.hbp-ticket-return-note { font-size: 11px; color: var(--hbp-ink-2); margin-top: 2px; }
.hbp-tickets-empty { color: var(--hbp-ink-2); font-size: 13px; }
.hbp-ticket-appeal-note { font-size: 12px; color: var(--hbp-blue); margin: 4px 0 0; }
.hbp-ticket-appeal-btn { font-size: 12px; margin-top: 4px; }
.hbp-ticket-appeal-compose { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.hbp-ticket-appeal-compose .hbp-primary-btn { align-self: flex-end; min-height: 34px; padding: 0 14px; font-size: 13px; }

/* -------------------------------------------------- footer -------------------------------------------------- */

.hbp-footer { margin-top: 16px; font-size: 12px; color: var(--hbp-ink-3); text-align: center; }
.hbp-footer p { margin: 4px 0; }
.hbp-attribution a { color: var(--hbp-ink-2); }

/* -------------------------------------------------- modal -------------------------------------------------- */

.hbp-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

@media (min-width: 701px) { .hbp-modal-scrim { align-items: center; } }

.hbp-modal {
  background: var(--hbp-bg-elev);
  border-radius: 16px 16px 0 0;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  position: relative;
}

@media (min-width: 701px) { .hbp-modal { border-radius: 16px; } }

.hbp-modal-title { font-size: 17px; margin: 0 0 4px; }
.hbp-modal-sub { font-size: 13px; color: var(--hbp-ink-2); margin: 0 0 16px; }

.hbp-modal-close {
  position: absolute; top: 14px; right: 14px; border: none; background: none;
  font-size: 20px; color: var(--hbp-ink-2); cursor: pointer; line-height: 1;
}

.hbp-field-row { margin-bottom: 10px; display: flex; gap: 8px; }

.hbp-input {
  flex: 1; border: 1px solid var(--hbp-border-2); background: var(--hbp-field);
  border-radius: 10px; padding: 11px 12px; font-size: 15px; color: var(--hbp-ink);
  font-family: inherit; min-width: 0;
}

.hbp-field-error { color: var(--hbp-up); font-size: 12px; margin: -4px 0 10px; }

.hbp-primary-btn {
  width: 100%; border: none; background: var(--hbp-up); color: #fff; font-weight: 800;
  font-size: 15px; padding: 12px; border-radius: 10px; cursor: pointer; font-family: inherit;
}
.hbp-primary-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.hbp-secondary-btn {
  border: 1px solid var(--hbp-border-2); background: var(--hbp-bg-elev); color: var(--hbp-ink);
  font-size: 13px; font-weight: 700; padding: 0 12px; border-radius: 10px; cursor: pointer;
  white-space: nowrap; font-family: inherit;
}
.hbp-secondary-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.hbp-confirm-actions { display: flex; gap: 10px; }
.hbp-confirm-actions .hbp-secondary-btn, .hbp-confirm-actions .hbp-primary-btn { flex: 1; }

/* -------------------------------------------------- toast -------------------------------------------------- */

.hbp-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--hbp-ink); color: var(--hbp-bg); border-radius: 10px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; max-width: 90vw; font-size: 13px; z-index: 1100;
}
.hbp-toast p { margin: 0; }
.hbp-toast-close { border: none; background: none; color: inherit; font-size: 16px; cursor: pointer; line-height: 1; }
.hbp-toast [data-hbp-toast-retry] { color: inherit; text-decoration: underline; }

[hidden] { display: none !important; }

/* -------------------------------------------------- responsive -------------------------------------------------- */

@media (max-width: 700px) {
  .hbp-app { padding: 12px 14px 32px; }
  .hbp-vote-card { padding: 16px; }
  .hbp-card { padding: 16px; border-radius: 16px; }
  .hbp-question { font-size: 19px; }
  .hbp-countdown-row { margin-left: 0; width: 100%; }
  .hbp-vote-btn { min-height: 72px; font-size: 19px; }
  .hbp-timeline-steps { gap: 6px; }
}