/* ============================================================
   卜卜点点 · base.css
   基础层：字体声明 + 重置 + 品牌图形原语 + 组件库
   依赖：tokens.css
   ============================================================ */

/* ---------- 字体（自托管子集，缺失时自动回退系统字体） ---------- */
@font-face {
  font-family: "BBD KuaiLe";
  src: url("../assets/fonts/bbd-kuaile.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 重置 ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bbd-bg);
  color: var(--bbd-text);
  font-family: var(--bbd-font-text);
  font-size: var(--bbd-fs-body);
  line-height: var(--bbd-lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--bbd-dur-base) var(--bbd-ease-standard),
              color var(--bbd-dur-base) var(--bbd-ease-standard);
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--bbd-text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible {
  outline: var(--bbd-stroke-lg) solid var(--bbd-action-focus);
  outline-offset: 2px;
  border-radius: var(--bbd-radius-xs);
}
::selection { background: var(--bbd-red-200); color: var(--bbd-ink-900); }

/* ============================================================
   A. 品牌图形原语
   ============================================================ */

/* A1. 手绘抖动边框 —— 用非对称圆角模拟手绘方框 */
.bbd-wobble {
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
}
.bbd-wobble--soft {
  border-radius: 225px 12px 200px 14px / 14px 200px 12px 225px;
}
/* 可调抖动幅度的三层版本，用于大小不同的容器 */
.bbd-wobble--lg {
  border-radius: 60px 22px 55px 20px / 20px 58px 22px 60px;
}

/* A2. 描边 —— 品牌识别核心：黑线 + 平涂 */
.bbd-ink      { border: var(--bbd-stroke-md) solid var(--bbd-ink-900); }
.bbd-ink--lg  { border-width: var(--bbd-stroke-lg); }
.bbd-ink--sm  { border-width: var(--bbd-stroke-sm); }

/* A3. 贴纸阴影 */
.bbd-sticker     { box-shadow: var(--bbd-shadow-sticker); }
.bbd-sticker--sm { box-shadow: var(--bbd-shadow-sticker-sm); }
.bbd-sticker--red  { box-shadow: var(--bbd-shadow-sticker-pink); }
.bbd-sticker--navy { box-shadow: var(--bbd-shadow-sticker-navy); }

/* A4. 纸纹底 */
.bbd-paper {
  position: relative;
  background-color: var(--bbd-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
/* 纸纹浮层，可叠加在任意色块上 */
.bbd-grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

/* A5. 妈妈裙圆点 */
.bbd-dots {
  background-image: radial-gradient(var(--bbd-dot) 3.2px, transparent 3.4px);
  background-size: 22px 22px;
  background-position: 0 0;
}
/* A6. 半调网点（绘本印刷感） */
.bbd-halftone {
  background-image: radial-gradient(var(--bbd-ink-900) 1.4px, transparent 1.5px);
  background-size: 7px 7px;
  opacity: .16;
}

/* A7. 高亮划重点（手绘荧光笔） */
.bbd-mark {
  background-image: linear-gradient(transparent 58%, var(--bbd-yellow-200) 58%, var(--bbd-yellow-200) 94%, transparent 94%);
  padding: 0 .12em;
}
.bbd-mark--red {
  background-image: linear-gradient(transparent 58%, var(--bbd-red-200) 58%, var(--bbd-red-200) 94%, transparent 94%);
}

/* A8. 角色图片容器：白底图用 multiply 融入浅色背景 */
.bbd-figure {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}
[data-theme="night"] .bbd-figure {
  /* 深色底上 multiply 会把角色乘暗到看不见，
     所以夜间模式统一把角色转为「暖纸底板卡」，让白底变成有意的画框。 */
  mix-blend-mode: normal;
  background: #FBF7EE;
  padding: 7%;
  border-radius: var(--bbd-radius-md);
  filter: brightness(.95) saturate(.97);
}
.bbd-figure--light { mix-blend-mode: normal; }

/* A8b. 深色底上的角色必须置于浅色底板之上
       —— multiply 融合的前提是底板比角色亮。 */
.bbd-plate {
  display: grid; place-items: center;
  border-radius: var(--bbd-radius-circle);
  background: var(--bbd-surface);
  overflow: hidden;
}
[data-theme="night"] .bbd-plate { background: #FBF7EE; }
.bbd-plate--paper { background: var(--bbd-bg); }
.bbd-plate--sm { border-radius: var(--bbd-radius-lg); }

/* A8b. 中英／中文与数字之间的呼吸间隙（0.25em） */
.mx { margin-inline: .125em; }

/* A9. 品牌文字 */.bbd-wordmark {
  font-family: var(--bbd-font-display);
  letter-spacing: var(--bbd-ls-brand);
  line-height: 1;
}
.bbd-display { font-family: var(--bbd-font-display); font-weight: 400; line-height: var(--bbd-lh-tight); letter-spacing: 0; }
.bbd-num { font-family: var(--bbd-font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* A10. 角色待机动画 */
@keyframes bbd-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-3px) scale(1.012); }
}
@keyframes bbd-hop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  30%      { transform: translateY(-14%) scaleY(1.04); }
  60%      { transform: translateY(0) scaleY(.96); }
}
@keyframes bbd-sway {
  0%, 100% { transform: rotate(-2.2deg); }
  50%      { transform: rotate(2.2deg); }
}
@keyframes bbd-pop {
  0%   { transform: scale(.86); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.bbd-anim-breathe { animation: bbd-breathe 4s var(--bbd-ease-soft) infinite; }
.bbd-anim-sway    { animation: bbd-sway 3.4s var(--bbd-ease-soft) infinite; }
.bbd-anim-hop     { animation: bbd-hop var(--bbd-dur-lazy) var(--bbd-ease-bounce); }
.bbd-anim-pop     { animation: bbd-pop var(--bbd-dur-slow) var(--bbd-ease-bounce); }

/* A11. 涂鸦装饰线 / 分隔 */
.bbd-dash {
  border: 0;
  border-top: var(--bbd-stroke-md) dashed var(--bbd-line);
}
.bbd-squiggle {
  height: 10px;
  background-repeat: repeat-x;
  background-size: 60px 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10'%3E%3Cpath d='M0 5c7.5-5 15 5 22.5 5S37.5 0 45 0s7.5 5 15 5' fill='none' stroke='%23EF5B4B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ============================================================
   B. 布局工具
   ============================================================ */
.u-container { width: 100%; max-width: var(--bbd-container); margin-inline: auto; padding-inline: var(--bbd-gutter); }
.u-narrow    { max-width: var(--bbd-container-narrow); margin-inline: auto; }
.u-stack > * + * { margin-top: var(--bbd-space-4); }
.u-stack-sm > * + * { margin-top: var(--bbd-space-2); }
.u-stack-lg > * + * { margin-top: var(--bbd-space-5); }
.u-row { display: flex; align-items: center; gap: var(--bbd-space-3); }
.u-row--between { justify-content: space-between; }
.u-row--wrap { flex-wrap: wrap; }
.u-center { display: flex; align-items: center; justify-content: center; }
.u-grid { display: grid; gap: var(--bbd-space-5); }
.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-mono { font-family: var(--bbd-font-num); font-variant-numeric: tabular-nums; }
.u-muted { color: var(--bbd-text-secondary); }
.u-faint { color: var(--bbd-text-tertiary); }
.u-center-text { text-align: center; }

/* 文字语义类 */
.t-display { font-family: var(--bbd-font-display); font-size: var(--bbd-fs-display); line-height: var(--bbd-lh-tight); }
.t-h1 { font-family: var(--bbd-font-display); font-size: var(--bbd-fs-h1); line-height: var(--bbd-lh-tight); }
.t-h2 { font-family: var(--bbd-font-display); font-size: var(--bbd-fs-h2); line-height: var(--bbd-lh-snug); }
.t-h3 { font-size: var(--bbd-fs-h3); font-weight: var(--bbd-fw-bold); line-height: var(--bbd-lh-snug); }
.t-h4 { font-size: var(--bbd-fs-h4); font-weight: var(--bbd-fw-bold); line-height: var(--bbd-lh-snug); }
.t-body { font-size: var(--bbd-fs-body); line-height: var(--bbd-lh-base); }
.t-body-lg { font-size: var(--bbd-fs-body-lg); line-height: var(--bbd-lh-base); }
.t-cap { font-size: var(--bbd-fs-caption); color: var(--bbd-text-secondary); }
.t-label { font-size: var(--bbd-fs-body-sm); font-weight: var(--bbd-fw-bold); letter-spacing: var(--bbd-ls-wide); }

/* ============================================================
   C. 组件库
   ============================================================ */

/* ---------- C1. 按钮 ---------- */
.bbd-btn {
  --_bg: var(--bbd-action-primary);
  --_fg: #fff;
  --_bd: var(--bbd-ink-900);
  --_sh: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bbd-space-2);
  min-height: var(--bbd-tap-base);
  padding: 0 var(--bbd-space-5);
  border: var(--bbd-stroke-md) solid var(--_bd);
  border-radius: var(--bbd-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  font-size: 20px;
  font-weight: var(--bbd-fw-bold);
  font-family: var(--bbd-font-text);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--bbd-dur-fast) var(--bbd-ease-bounce),
              background-color var(--bbd-dur-fast) var(--bbd-ease-standard),
              box-shadow var(--bbd-dur-fast) var(--bbd-ease-standard),
              color var(--bbd-dur-fast) var(--bbd-ease-standard);
  box-shadow: var(--_sh);
  user-select: none;
}
.bbd-btn:hover  { background: var(--bbd-action-primary-hover); transform: translate(-1px,-2px); box-shadow: var(--bbd-shadow-sticker-sm); }
.bbd-btn:active { background: var(--bbd-action-primary-active); transform: translate(2px,2px); box-shadow: none; }
.bbd-btn[disabled], .bbd-btn[aria-disabled="true"] {
  background: var(--bbd-ink-100); color: var(--bbd-text-disabled);
  border-color: var(--bbd-ink-200); box-shadow: none; cursor: not-allowed; transform: none;
}

.bbd-btn--secondary { --_bg: var(--bbd-action-secondary); }
.bbd-btn--secondary:hover { background: var(--bbd-navy-600); }
.bbd-btn--secondary:active { background: var(--bbd-navy-700); }

.bbd-btn--ghost { --_bg: transparent; --_fg: var(--bbd-ink-900); }
.bbd-btn--ghost:hover  { background: var(--bbd-red-50); }
.bbd-btn--ghost:active { background: var(--bbd-red-100); transform: translate(2px,2px); box-shadow: none; }

.bbd-btn--quiet {
  --_bg: transparent; --_fg: var(--bbd-text-secondary); --_bd: transparent;
  font-size: var(--bbd-fs-body); font-weight: var(--bbd-fw-medium);
}
.bbd-btn--quiet:hover { background: var(--bbd-ink-100); color: var(--bbd-ink-900); transform: none; box-shadow: none; }

.bbd-btn--danger { --_bg: var(--bbd-alert); }
.bbd-btn--danger:hover { background: #B03A26; }

.bbd-btn--pill-yellow { --_bg: var(--bbd-yellow-300); --_fg: var(--bbd-ink-900); }
.bbd-btn--pill-yellow:hover { background: var(--bbd-yellow-400); }

.bbd-btn--sm { min-height: 36px; padding: 0 var(--bbd-space-4); font-size: var(--bbd-fs-body-sm); gap: 6px; }
.bbd-btn--lg { min-height: var(--bbd-tap-kid); padding: 0 var(--bbd-space-6); font-size: 22px; }
.bbd-btn--block { display: flex; width: 100%; }
.bbd-btn--icon { padding: 0; width: var(--bbd-tap-base); min-width: var(--bbd-tap-base); }
.bbd-btn--icon.bbd-btn--sm { width: 36px; min-width: 36px; }
.bbd-btn--icon.bbd-btn--lg { width: var(--bbd-tap-kid); min-width: var(--bbd-tap-kid); }

.bbd-btn__ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- C2. 卡片 ---------- */
.bbd-card {
  position: relative;
  background: var(--bbd-surface);
  border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  border-radius: var(--bbd-radius-lg);
  padding: var(--bbd-space-5);
}
.bbd-card--soft  { border-color: var(--bbd-line); box-shadow: var(--bbd-shadow-sm); }
.bbd-card--flat  { border-color: transparent; box-shadow: none; background: var(--bbd-surface-alt); }
.bbd-card--stick { box-shadow: var(--bbd-shadow-sticker); border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; }
.bbd-card--brand { background: var(--bbd-surface-brand); border-color: var(--bbd-red-500); }
.bbd-card--navy  { background: var(--bbd-navy-500); border-color: var(--bbd-navy-500); color: #fff; }
.bbd-card--navy .bbd-card__title, .bbd-card--navy .u-muted { color: rgba(255,255,255,.82); }
.bbd-card--pad-lg { padding: var(--bbd-space-6); }
.bbd-card--pad-none { padding: 0; overflow: hidden; }
.bbd-card__title { font-size: var(--bbd-fs-h3); font-weight: var(--bbd-fw-bold); line-height: var(--bbd-lh-snug); }
.bbd-card__meta  { font-size: var(--bbd-fs-caption); color: var(--bbd-text-secondary); }
.bbd-card--hover { transition: transform var(--bbd-dur-base) var(--bbd-ease-bounce), box-shadow var(--bbd-dur-base) var(--bbd-ease-standard); cursor: pointer; }
.bbd-card--hover:hover { transform: translate(-2px,-4px); box-shadow: var(--bbd-shadow-sticker); }

/* ---------- C3. 标签 / 徽章 ---------- */
.bbd-tag {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 12px;
  border-radius: var(--bbd-radius-pill);
  background: var(--bbd-ink-100);
  color: var(--bbd-ink-700);
  font-size: var(--bbd-fs-caption); font-weight: var(--bbd-fw-bold);
  white-space: nowrap;
}
.bbd-tag--red    { background: var(--bbd-red-100); color: var(--bbd-red-700); }
.bbd-tag--navy   { background: var(--bbd-navy-100); color: var(--bbd-navy-600); }
.bbd-tag--yellow { background: var(--bbd-yellow-100); color: #7A5C0F; }
.bbd-tag--good   { background: var(--bbd-good-bg); color: #2F6B3D; }
.bbd-tag--warn   { background: var(--bbd-warn-bg); color: #8A5F14; }
.bbd-tag--rest   { background: var(--bbd-rest-bg); color: #3B5A85; }
.bbd-tag--alert  { background: var(--bbd-alert-bg); color: #96331F; }
.bbd-tag--lock   { background: var(--bbd-lock-bg); color: #5A5474; }
.bbd-tag--outline { background: transparent; border: var(--bbd-stroke-sm) solid var(--bbd-ink-900); color: var(--bbd-ink-900); }

.bbd-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--bbd-radius-pill);
  background: var(--bbd-red-500); color: #fff;
  font-size: var(--bbd-fs-micro); font-weight: var(--bbd-fw-bold);
  border: var(--bbd-stroke-sm) solid var(--bbd-surface);
}
.bbd-dot-badge { position: relative; }
.bbd-dot-badge::after {
  content: ""; position: absolute; top: -2px; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bbd-red-500); border: 2px solid var(--bbd-surface);
}

/* ---------- C4. 头像 / 角色 ---------- */
.bbd-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  background: var(--bbd-surface-alt); object-fit: cover; overflow: hidden;
}
.bbd-avatar--sm { width: 32px; height: 32px; }
.bbd-avatar--lg { width: 64px; height: 64px; }
.bbd-avatar--kid { border-width: var(--bbd-stroke-lg); }
.bbd-avatar-stack { display: flex; }
.bbd-avatar-stack > * + * { margin-left: -12px; }

/* 角色贴纸位（角色图 + 圆形/气泡底） */
.bbd-char {
  display: inline-flex; align-items: flex-end; justify-content: center;
  border-radius: var(--bbd-radius-circle);
  background: var(--bbd-red-50);
  overflow: hidden;
}
.bbd-char img { width: 88%; mix-blend-mode: multiply; }

/* 气泡 */
.bbd-bubble {
  position: relative;
  background: var(--bbd-surface);
  border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  border-radius: var(--bbd-radius-lg);
  padding: var(--bbd-space-3) var(--bbd-space-4);
  font-size: var(--bbd-fs-body);
}
.bbd-bubble::after {
  content: ""; position: absolute; left: 26px; bottom: -11px;
  width: 14px; height: 14px;
  background: var(--bbd-surface);
  border-right: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  border-bottom: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  transform: rotate(45deg) skew(6deg,6deg);
  border-bottom-right-radius: 4px;
}
.bbd-bubble--red { background: var(--bbd-red-500); color: #fff; border-color: var(--bbd-red-700); }
.bbd-bubble--red::after { background: var(--bbd-red-500); border-color: var(--bbd-red-700); }

/* ---------- C5. 表单 ---------- */
.bbd-field { display: block; }
.bbd-field__label {
  display: block; margin-bottom: var(--bbd-space-2);
  font-size: var(--bbd-fs-body-sm); font-weight: var(--bbd-fw-bold); color: var(--bbd-text-secondary);
}
.bbd-input {
  width: 100%; min-height: var(--bbd-tap-base);
  padding: 0 var(--bbd-space-4);
  background: var(--bbd-surface);
  border: var(--bbd-stroke-md) solid var(--bbd-line);
  border-radius: var(--bbd-radius-md);
  font-size: var(--bbd-fs-body-lg);
  color: var(--bbd-text);
  transition: border-color var(--bbd-dur-fast) var(--bbd-ease-standard), box-shadow var(--bbd-dur-fast);
}
.bbd-input::placeholder { color: var(--bbd-text-tertiary); }
.bbd-input:hover { border-color: var(--bbd-ink-400); }
.bbd-input:focus {
  outline: none; border-color: var(--bbd-red-500);
  box-shadow: 0 0 0 4px var(--bbd-red-100);
}
.bbd-input--kid { min-height: var(--bbd-tap-kid); font-size: 20px; border-radius: var(--bbd-radius-lg); }
.bbd-input--error { border-color: var(--bbd-alert); box-shadow: 0 0 0 4px var(--bbd-alert-bg); }
.bbd-field__hint { margin-top: 6px; font-size: var(--bbd-fs-caption); color: var(--bbd-text-tertiary); }
.bbd-field__error { margin-top: 6px; font-size: var(--bbd-fs-caption); color: var(--bbd-alert); display: flex; gap: 6px; align-items: flex-start; }

/* 开关 */
.bbd-switch {
  --_w: 60px; --_h: 34px;
  position: relative; display: inline-flex; align-items: center;
  width: var(--_w); height: var(--_h); flex: none;
  background: var(--bbd-ink-200);
  border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  border-radius: var(--bbd-radius-pill);
  cursor: pointer; padding: 0; appearance: none;
  transition: background-color var(--bbd-dur-base) var(--bbd-ease-bounce);
}
.bbd-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(var(--_h) - 8px); height: calc(var(--_h) - 8px);
  background: #fff; border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  border-radius: 50%;
  transition: transform var(--bbd-dur-base) var(--bbd-ease-bounce);
}
.bbd-switch:checked { background: var(--bbd-good); }
.bbd-switch:checked::after { transform: translateX(calc(var(--_w) - var(--_h))); }
.bbd-switch--kid { --_w: 74px; --_h: 42px; }

/* 复选 / 单选 */
.bbd-check { display: inline-flex; align-items: center; gap: var(--bbd-space-3); cursor: pointer; font-size: var(--bbd-fs-body-lg); }
.bbd-check input { appearance: none; flex: none; margin: 0;
  width: 28px; height: 28px; background: var(--bbd-surface);
  border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  border-radius: var(--bbd-radius-sm); cursor: pointer; position: relative;
  transition: background-color var(--bbd-dur-fast);
}
.bbd-check input[type="radio"] { border-radius: 50%; }
.bbd-check input:checked { background: var(--bbd-red-500); }
.bbd-check input:checked::after {
  content: ""; position: absolute; left: 8px; top: 3px;
  width: 7px; height: 13px;
  border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(42deg);
}
.bbd-check input[type="radio"]:checked::after {
  left: 6px; top: 6px; width: 12px; height: 12px;
  border: 3px solid #fff; border-radius: 50%; transform: none;
}
.bbd-check--kid input { width: 32px; height: 32px; }

/* 滑杆 */
.bbd-range { appearance: none; width: 100%; height: 34px; background: transparent; cursor: pointer; }
.bbd-range::-webkit-slider-runnable-track {
  height: 14px; border-radius: var(--bbd-radius-pill);
  background: var(--bbd-ink-100); border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
}
.bbd-range::-webkit-slider-thumb {
  appearance: none; width: 30px; height: 30px; margin-top: -10px;
  border-radius: 50%; background: var(--bbd-red-500);
  border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
}
.bbd-range::-moz-range-track { height: 14px; border-radius: 999px; background: var(--bbd-ink-100); border: 2px solid var(--bbd-ink-900); }
.bbd-range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--bbd-red-500); border: 2px solid var(--bbd-ink-900); }

/* ---------- C6. 进度 / 奖励 ---------- */
.bbd-progress {
  height: 20px; border-radius: var(--bbd-radius-pill);
  background: var(--bbd-ink-100); border: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  overflow: hidden;
}
.bbd-progress__bar {
  height: 100%; background: var(--bbd-red-500);
  border-right: var(--bbd-stroke-md) solid var(--bbd-ink-900);
  transition: width var(--bbd-dur-lazy) var(--bbd-ease-out);
}
.bbd-progress--good .bbd-progress__bar { background: var(--bbd-good); }
.bbd-progress--yellow .bbd-progress__bar { background: var(--bbd-yellow-300); }
.bbd-progress--striped .bbd-progress__bar {
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.35) 0 8px, transparent 8px 18px);
}

/* 进度环 */
.bbd-ring { --_p: 0; --_size: 96px; --_w: 11px; position: relative; width: var(--_size); height: var(--_size); flex: none; }
.bbd-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bbd-ring__track { fill: none; stroke: var(--bbd-ink-100); stroke-width: var(--_w); }
.bbd-ring__val   { fill: none; stroke: var(--bbd-red-500); stroke-width: var(--_w); stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--_p)); transition: stroke-dashoffset var(--bbd-dur-lazy) var(--bbd-ease-out); }
.bbd-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.bbd-ring--good .bbd-ring__val { stroke: var(--bbd-good); }
.bbd-ring--rest .bbd-ring__val { stroke: var(--bbd-rest); }
.bbd-ring--yellow .bbd-ring__val { stroke: var(--bbd-yellow-400); }

/* 星星 */
.bbd-stars { display: inline-flex; gap: 4px; }
.bbd-stars svg { width: 26px; height: 26px; }
.bbd-stars .on  path { fill: var(--bbd-yellow-300); stroke: var(--bbd-ink-900); }
.bbd-stars .off path { fill: var(--bbd-ink-100); stroke: var(--bbd-ink-300); }

/* ---------- C7. 反馈 ---------- */
.bbd-callout {
  display: flex; gap: var(--bbd-space-3);
  padding: var(--bbd-space-4);
  border-radius: var(--bbd-radius-lg);
  border: var(--bbd-stroke-md) solid;
  font-size: var(--bbd-fs-body);
}
.bbd-callout--info    { background: var(--bbd-rest-bg); border-color: var(--bbd-rest); color: #2C4A73; }
.bbd-callout--good    { background: var(--bbd-good-bg); border-color: var(--bbd-good); color: #295C36; }
.bbd-callout--warn    { background: var(--bbd-warn-bg); border-color: var(--bbd-warn); color: #7A5312; }
.bbd-callout--gently  { background: var(--bbd-yellow-50); border-color: var(--bbd-yellow-300); color: #6B5510; }
.bbd-callout--alert   { background: var(--bbd-alert-bg); border-color: var(--bbd-alert); color: #8A2E1C; }
.bbd-callout__ico { flex: none; width: 28px; height: 28px; }

.bbd-toast {
  display: inline-flex; align-items: center; gap: var(--bbd-space-3);
  padding: var(--bbd-space-3) var(--bbd-space-5);
  background: var(--bbd-ink-900); color: #fff;
  border-radius: var(--bbd-radius-pill);
  font-size: var(--bbd-fs-body); font-weight: var(--bbd-fw-medium);
  box-shadow: var(--bbd-shadow-lg);
}
.bbd-toast--light { background: var(--bbd-surface); color: var(--bbd-text); border: var(--bbd-stroke-md) solid var(--bbd-ink-900); }
.bbd-toast--good  { background: var(--bbd-good); }

/* 空状态 */
.bbd-empty { text-align: center; padding: var(--bbd-space-7) var(--bbd-space-5); }
.bbd-empty__char { width: 132px; margin: 0 auto var(--bbd-space-4); }
.bbd-empty__title { font-family: var(--bbd-font-display); font-size: var(--bbd-fs-h3); margin-bottom: var(--bbd-space-2); }

/* ---------- C8. 导航 ---------- */
.bbd-tabs { display: flex; gap: var(--bbd-space-2); background: var(--bbd-ink-100); padding: 5px; border-radius: var(--bbd-radius-pill); border: var(--bbd-stroke-md) solid var(--bbd-ink-900); }
.bbd-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 9px 20px; border-radius: var(--bbd-radius-pill);
  font-size: var(--bbd-fs-body); font-weight: var(--bbd-fw-bold); color: var(--bbd-text-secondary);
  transition: background-color var(--bbd-dur-fast) var(--bbd-ease-standard), color var(--bbd-dur-fast);
}
.bbd-tab:hover { color: var(--bbd-ink-900); }
.bbd-tab[aria-selected="true"] { background: var(--bbd-surface); color: var(--bbd-ink-900); box-shadow: var(--bbd-shadow-xs); }

.bbd-nav { display: flex; align-items: center; gap: var(--bbd-space-2); }
.bbd-nav a {
  padding: 9px 16px; border-radius: var(--bbd-radius-pill); text-decoration: none;
  color: var(--bbd-text-secondary); font-weight: var(--bbd-fw-medium); font-size: var(--bbd-fs-body);
  transition: background-color var(--bbd-dur-fast), color var(--bbd-dur-fast);
}
.bbd-nav a:hover { background: var(--bbd-ink-100); color: var(--bbd-ink-900); }
.bbd-nav a[aria-current="page"] { background: var(--bbd-ink-900); color: #fff; }

/* TabBar（小程序） */
.bbd-tabbar {
  display: flex; background: var(--bbd-surface);
  border-top: var(--bbd-stroke-md) solid var(--bbd-ink-900);
}
.bbd-tabbar__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 7px; font-size: var(--bbd-fs-micro); font-weight: var(--bbd-fw-bold);
  color: var(--bbd-text-tertiary); text-decoration: none;
}
.bbd-tabbar__item[aria-current="page"] { color: var(--bbd-red-600); }
.bbd-tabbar__item svg { width: 26px; height: 26px; }

/* 面包屑 / 步骤 */
.bbd-steps { display: flex; align-items: center; gap: var(--bbd-space-2); flex-wrap: wrap; }
.bbd-step { display: inline-flex; align-items: center; gap: 8px; font-size: var(--bbd-fs-body-sm); color: var(--bbd-text-tertiary); font-weight: var(--bbd-fw-bold); }
.bbd-step__dot {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--bbd-ink-100); border: var(--bbd-stroke-md) solid var(--bbd-line);
  font-size: 13px;
}
.bbd-step[data-state="done"] { color: var(--bbd-good); }
.bbd-step[data-state="done"] .bbd-step__dot { background: var(--bbd-good); border-color: var(--bbd-good); color: #fff; }
.bbd-step[data-state="current"] { color: var(--bbd-ink-900); }
.bbd-step[data-state="current"] .bbd-step__dot { background: var(--bbd-red-500); border-color: var(--bbd-ink-900); color: #fff; }
.bbd-step__bar { width: 28px; height: 2px; background: var(--bbd-line); }

/* ---------- C9. 数据 / 表格 ---------- */
.bbd-stat { display: flex; flex-direction: column; gap: 2px; }
.bbd-stat__num { font-family: var(--bbd-font-num); font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.bbd-stat__unit { font-size: var(--bbd-fs-body-sm); color: var(--bbd-text-secondary); }
.bbd-stat__label { font-size: var(--bbd-fs-caption); color: var(--bbd-text-secondary); }

.bbd-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--bbd-fs-body-sm); }
.bbd-table th, .bbd-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--bbd-line); vertical-align: top; }
.bbd-table th { font-weight: var(--bbd-fw-bold); color: var(--bbd-text-secondary); background: var(--bbd-surface-alt); }

/* ---------- C10. 遮罩层 ---------- */
.bbd-overlay {
  position: fixed; inset: 0; background: var(--bbd-overlay);
  display: grid; place-items: center; z-index: var(--bbd-z-modal);
  padding: var(--bbd-space-4);
}
.bbd-dialog {
  width: min(440px, 100%); background: var(--bbd-surface);
  border: var(--bbd-stroke-lg) solid var(--bbd-ink-900);
  border-radius: var(--bbd-radius-xl);
  padding: var(--bbd-space-6); box-shadow: var(--bbd-shadow-lg);
}
.bbd-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--bbd-z-drawer);
  background: var(--bbd-surface);
  border-top: var(--bbd-stroke-lg) solid var(--bbd-ink-900);
  border-radius: var(--bbd-radius-xl) var(--bbd-radius-xl) 0 0;
  padding: var(--bbd-space-5) var(--bbd-space-5) var(--bbd-space-6);
}
.bbd-sheet__grip { width: 44px; height: 5px; border-radius: 999px; background: var(--bbd-ink-300); margin: 0 auto var(--bbd-space-4); }

/* ---------- C11. 手机 / 设备外壳（用于范例展示） ---------- */
.bbd-phone {
  width: 340px; flex: none;
  border: 9px solid var(--bbd-ink-900);
  border-radius: 42px;
  background: var(--bbd-bg);
  overflow: hidden;
  box-shadow: var(--bbd-shadow-lg);
  position: relative;
}
.bbd-phone__notch {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 116px; height: 22px; background: var(--bbd-ink-900);
  border-radius: 0 0 14px 14px; z-index: 5;
}
.bbd-phone__screen { height: 660px; overflow-y: auto; overflow-x: hidden; background: var(--bbd-bg); }
.bbd-phone__screen::-webkit-scrollbar { width: 0; }

.bbd-device {
  width: 300px; flex: none; padding: 26px 24px;
  background: var(--bbd-surface);
  border: var(--bbd-stroke-lg) solid var(--bbd-ink-900);
  border-radius: 38% 38% 30% 30% / 26% 26% 22% 22%;
  box-shadow: var(--bbd-shadow-md);
}

/* ---------- C13. 主题切换器 / 眉标（规范文档与范例页共用） ---------- */
.doc-theme {
  display: inline-flex; gap: 3px; padding: 3px;
  border-radius: var(--bbd-radius-pill);
  background: var(--bbd-ink-100); border: 1px solid var(--bbd-ink-200);
}
.doc-theme button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 5px 11px; border-radius: var(--bbd-radius-pill);
  font-size: 12px; font-weight: var(--bbd-fw-bold); color: var(--bbd-text-secondary);
  font-family: var(--bbd-font-text);
  transition: background-color var(--bbd-dur-fast), color var(--bbd-dur-fast);
}
.doc-theme button[aria-pressed="true"] { background: var(--bbd-surface); color: var(--bbd-ink-900); box-shadow: var(--bbd-shadow-xs); }

.doc-top__spacer { flex: 1; }

.chapter__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--bbd-font-num); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; color: var(--bbd-red-600); margin-bottom: 10px;
}
.chapter__kicker::before { content: ""; width: 22px; height: 3px; background: var(--bbd-red-500); border-radius: 2px; }

/* ---------- C14. 色彩卡（规范展示用） ---------- */
.bbd-swatch { border-radius: var(--bbd-radius-md); border: var(--bbd-stroke-sm) solid rgba(26,26,26,.12); }
.bbd-chip { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-family: var(--bbd-font-num); }
.bbd-chip__box { height: 62px; border-radius: var(--bbd-radius-sm); border: 1px solid rgba(26,26,26,.1); }