/* RK Store UI static-site styles. Generated by npm run build:docs. */
/* ============================================================
 * 天合人康 · 店长端 · 移动 B 端 UI 设计 Token
 * 来源：人康店长端设计规范 2.0 PDF + Pencil .pen 设计稿
 * ============================================================ */

:root {
  /* ---------- 色彩 Color ---------- */
  /* 主色 */
  --color-primary:           #2580F0;
  --color-primary-dark:      #1A6BC9;
  --color-primary-light:     #E8F2FE;

  /* 辅助色 */
  --color-warning:           #FFA405;   /* 橙 - 提示/未操作 */
  --color-success:           #28B57F;   /* 绿 - 成功 */
  --color-danger:            #F76161;   /* 红 - 危险/删除 */

  /* 文本 */
  --color-text-primary:      #333333;   /* 一级 - 标题、主内容 */
  --color-text-secondary:    #666666;   /* 二级 - 次要内容 */
  --color-text-tertiary:     #999999;   /* 三级 - 辅助、说明 */
  --color-text-placeholder:  #BBBBBB;
  --color-text-disabled:     #CCCCCC;
  --color-text-white:        #FFFFFF;

  /* 背景 */
  --color-bg-card:           #FFFFFF;
  --color-bg-page:           #F5F7FA;
  --color-bg-disabled:       #E5E5E5;
  --color-bg-mask:           rgba(0,0,0,0.3);

  /* 边框 */
  --color-border:            #E5E5E5;
  --color-border-light:      #F0F0F0;

  /* ---------- 字体 Typography ---------- */
  --font-family-cn:          'PingFang SC', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'HarmonyOS Sans', sans-serif;
  --font-family-en:          'HarmonyOS Sans', Inter, -apple-system, BlinkMacSystemFont, sans-serif;

  /* 字号（pt @1x，对应 CSS px @2x 时 ×2） */
  --font-size-title-lg:      22px;  /* 大标题 */
  --font-size-title-md:      18px;  /* 副标题 */
  --font-size-title-sm:      16px;  /* 次标题 */
  --font-size-body:          14px;  /* 正文 */
  --font-size-caption:       12px;  /* 辅助文字 */

  /* 字重 */
  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-bold:        600;

  /* 行高 */
  --line-height-tight:       1.3;
  --line-height-normal:      1.5;

  /* ---------- 圆角 Radius ---------- */
  --radius-sm:               4px;   /* 卡片、标签 */
  --radius-md:               8px;   /* 按钮标准 */
  --radius-lg:               16px;  /* 大卡片 */
  --radius-circle:           999px; /* 胶囊、圆形 */

  /* ---------- 间距 Spacing ---------- */
  --spacing-xs:              4px;
  --spacing-sm:              8px;
  --spacing-md:              12px;  /* 水平/垂直标准 */
  --spacing-lg:              16px;
  --spacing-xl:              24px;
  --spacing-xxl:             30px;  /* 水平/垂直 大间距 */

  /* ---------- 阴影 Shadow ---------- */
  --shadow-card:             0 2px 8px rgba(0,0,0,0.04);
  --shadow-popover:          0 4px 16px rgba(0,0,0,0.12);
  --shadow-modal:            0 8px 32px rgba(0,0,0,0.16);

  /* ---------- 尺寸 Size ---------- */
  --navbar-height:           44px;
  --tabbar-height:           56px;
  --button-height-lg:        48px;
  --button-height-md:        40px;
  --button-height-sm:        32px;
  --input-height:            40px;
}

/* ---------- 全局重置 ---------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-family-cn);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea { font-family: inherit; outline: none; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }


/* ============================================================
 * 天合人康 · 店长端 · 移动 B 端 UI 组件库
 * 命名约定：rk-{组件}  rk-{组件}--{修饰符}
 * ============================================================ */

/* ============================================================
 * 0. iconfont 公共图标类
 * 用法：<svg class="icon"><use xlink:href="#icon-search"/></svg>
 * 颜色由父级 color 控制；尺寸用 font-size 控制 (1em × 1em)
 * ============================================================ */
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  flex-shrink: 0;
}

/* ============================================================
 * 1. 手机外壳（仅展示页用）
 * ============================================================ */
.rk-phone {
  width: 375px;
  min-height: 667px;
  margin: 0 auto;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ============================================================
 * 2. NavBar 顶部导航栏
 * ============================================================ */
.rk-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--navbar-height);
  padding: 0 12px;
  background: var(--color-primary);
  color: var(--color-text-white);
}
.rk-navbar--light {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
}
.rk-navbar__back { font-size: 20px; line-height: 1; cursor: pointer; }
.rk-navbar__title { font-size: var(--font-size-title-sm); font-weight: var(--font-weight-medium); }
.rk-navbar__right { font-size: var(--font-size-body); cursor: pointer; }

/* ============================================================
 * 3. TabBar 底部导航栏
 * ============================================================ */
.rk-tabbar {
  display: flex;
  height: var(--tabbar-height);
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border-light);
}
.rk-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 0;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.rk-tabbar__item--active { color: var(--color-primary); }
.rk-tabbar__icon { font-size: 20px; line-height: 1; }
.rk-tabbar__label { font-size: 11px; }

/* ============================================================
 * 4. Button
 * ============================================================ */
.rk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--button-height-md);
  padding: 0 24px;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  transition: opacity .15s, background .15s;
}
.rk-btn:active { opacity: .85; }

.rk-btn--primary { background: var(--color-primary); color: var(--color-text-white); }
.rk-btn--secondary {
  background: var(--color-bg-card);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.rk-btn--disabled {
  background: var(--color-bg-disabled);
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.rk-btn--block { display: flex; width: 100%; }
.rk-btn--sm { height: var(--button-height-sm); padding: 0 12px; font-size: var(--font-size-body); }
.rk-btn--lg { height: var(--button-height-lg); }
.rk-btn--pill { border-radius: var(--radius-circle); }

.rk-btn-group { display: flex; gap: var(--spacing-md); }
.rk-btn-group .rk-btn { flex: 1; }

/* ============================================================
 * 5. Input 输入框
 * ============================================================ */
.rk-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--input-height);
  padding: 0 14px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
}
.rk-input:focus-within { border-color: var(--color-primary); }
.rk-input__icon { color: var(--color-text-tertiary); font-size: 14px; display: inline-flex; align-items: center; }
.rk-input__icon svg { width: 16px; height: 16px; display: block; }
.rk-input__field {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: inherit;
  color: inherit;
}
.rk-input__field::placeholder { color: var(--color-text-placeholder); }
.rk-input__clear { color: var(--color-text-tertiary); cursor: pointer; }

/* ============================================================
 * 6. Switch 开关
 * ============================================================ */
.rk-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: #D5D5D5;
  border-radius: var(--radius-circle);
  transition: background .2s;
  cursor: pointer;
}
.rk-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.rk-switch--on { background: var(--color-primary); }
.rk-switch--on::after { transform: translateX(20px); }

/* ============================================================
 * 7. Checkbox / Radio
 * ============================================================ */
.rk-checkbox, .rk-radio {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg-card);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}
.rk-checkbox { border-radius: 4px; }
.rk-radio { border-radius: 50%; }

.rk-checkbox--checked { background: var(--color-primary); border-color: var(--color-primary); }
.rk-checkbox--checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.rk-radio--checked { border-color: var(--color-primary); }
.rk-radio--checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* ============================================================
 * 8. Stepper 步进器
 * ============================================================ */
.rk-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.rk-stepper__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.rk-stepper__btn--plus { color: var(--color-primary); }
.rk-stepper__value {
  width: 40px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-body);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  font-family: var(--font-family-en);
}

/* ============================================================
 * 9. Tab 下划线 Tab
 * ============================================================ */
.rk-tabs {
  display: flex;
  gap: 32px;
  padding: 0 16px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-light);
}
.rk-tabs__item {
  position: relative;
  padding: 12px 0;
  font-size: var(--font-size-title-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.rk-tabs__item--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}
.rk-tabs__item--active::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
}

/* ============================================================
 * 10. Tab 胶囊式
 * ============================================================ */
.rk-tabs-pill { display: flex; gap: 12px; flex-wrap: wrap; }
.rk-tabs-pill__item {
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-card);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
  cursor: pointer;
}
.rk-tabs-pill__item--active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ============================================================
 * 11. Segment 分段控制
 * ============================================================ */
.rk-segment {
  display: inline-flex;
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  overflow: hidden;
}
.rk-segment__item {
  padding: 8px 28px;
  font-size: var(--font-size-body);
  color: var(--color-primary);
  background: var(--color-bg-card);
  cursor: pointer;
}
.rk-segment__item--active {
  background: var(--color-primary);
  color: var(--color-text-white);
}

/* ============================================================
 * 12. Search 搜索框
 * ============================================================ */
.rk-search { display: flex; gap: 8px; align-items: center; }
.rk-search .rk-input { flex: 1; }
.rk-search__btn {
  height: var(--input-height);
  padding: 0 18px;
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  cursor: pointer;
}

/* ============================================================
 * 13. Select 下拉选择
 * ============================================================ */
.rk-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--input-height);
  padding: 0 14px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
  cursor: pointer;
}
.rk-select__value { color: var(--color-text-primary); }
.rk-select__value--placeholder { color: var(--color-text-placeholder); }
.rk-select__arrow { color: var(--color-text-tertiary); font-size: 10px; }

/* ============================================================
 * 14. List 列表
 * ============================================================ */
.rk-list {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rk-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-light);
}
.rk-list__item:last-child { border-bottom: none; }

/* 单行 / 双行 */
.rk-list__main { flex: 1; min-width: 0; }
.rk-list__title { font-size: 15px; color: var(--color-text-primary); }
.rk-list__desc { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }

/* 右侧 */
.rk-list__extra { display: flex; align-items: center; gap: 6px; color: var(--color-text-tertiary); font-size: 13px; }
.rk-list__arrow::after { content: '›'; font-size: 16px; color: var(--color-text-tertiary); }

/* 带头像 */
.rk-list__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-light);
  flex-shrink: 0;
}

/* ============================================================
 * 15. Pagination 分页
 * ============================================================ */
.rk-pagination { display: flex; align-items: center; gap: 16px; }
.rk-pagination__link {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  text-decoration: underline;
  cursor: pointer;
}
.rk-pagination__count {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}
.rk-pagination__btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.rk-pagination__btn-text {
  padding: 6px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  cursor: pointer;
}

/* ============================================================
 * 16. Card 卡片基础
 * ============================================================ */
.rk-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 16px;
}

/* 统计卡 - 三列横排 */
.rk-stats { display: flex; gap: 12px; }
.rk-stats__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  height: 80px;
  border-radius: var(--radius-md);
  color: var(--color-text-white);
}
.rk-stats__item--primary { background: var(--color-primary); }
.rk-stats__item--warning { background: var(--color-warning); }
.rk-stats__item--success { background: var(--color-success); }
.rk-stats__item--danger { background: var(--color-danger); }
.rk-stats__num { font-family: var(--font-family-en); font-size: 24px; font-weight: var(--font-weight-bold); }
.rk-stats__label { font-size: 11px; }

/* 用户卡 */
.rk-user-card { display: flex; flex-direction: column; gap: 12px; }
.rk-user-card__top { display: flex; align-items: center; gap: 12px; }
.rk-user-card__avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary-light); }
.rk-user-card__info { flex: 1; }
.rk-user-card__name { font-size: var(--font-size-title-sm); font-weight: var(--font-weight-medium); }
.rk-user-card__tag { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.rk-tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-circle);
  font-size: 10px;
}
.rk-user-card__meta { color: var(--color-text-tertiary); font-size: 11px; }

.rk-user-card__data { display: flex; }
.rk-user-card__data-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  gap: 4px;
}
.rk-user-card__data-item:not(:last-child) { border-right: 1px solid var(--color-border-light); }
.rk-user-card__data-value { font-family: var(--font-family-en); font-size: 20px; font-weight: var(--font-weight-bold); }
.rk-user-card__data-label { font-size: 12px; color: var(--color-text-tertiary); }

/* 商品卡 */
.rk-goods {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.rk-goods__img {
  width: 100%;
  aspect-ratio: 1;
  background: var(--color-primary-light);
}
.rk-goods__info { padding: 10px; }
.rk-goods__title {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin-bottom: 6px;
}
.rk-goods__price-row { display: flex; align-items: flex-end; gap: 6px; }
.rk-goods__price {
  font-family: var(--font-family-en);
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
}
.rk-goods__price-old {
  font-family: var(--font-family-en);
  font-size: 11px;
  color: var(--color-text-tertiary);
  text-decoration: line-through;
}

/* ============================================================
 * 17. Dialog 对话框
 * ============================================================ */
.rk-mask {
  position: fixed;
  inset: 0;
  background: var(--color-bg-mask);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.rk-dialog {
  width: 280px;
  background: var(--color-bg-card);
  border-radius: 12px;
  overflow: hidden;
}
.rk-dialog__body {
  padding: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.rk-dialog__icon {
  width: 48px;
  height: 48px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 22px;
}
.rk-dialog__title { font-size: var(--font-size-title-sm); font-weight: var(--font-weight-medium); }
.rk-dialog__desc { font-size: var(--font-size-body); color: var(--color-text-secondary); line-height: var(--line-height-normal); }
.rk-dialog__btns {
  display: flex;
  border-top: 1px solid var(--color-border-light);
}
.rk-dialog__btn {
  flex: 1;
  padding: 14px;
  text-align: center;
  font-size: var(--font-size-title-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.rk-dialog__btn:not(:first-child) { border-left: 1px solid var(--color-border-light); }
.rk-dialog__btn--primary { color: var(--color-primary); font-weight: var(--font-weight-medium); }

/* ============================================================
 * 18. Toast
 * ============================================================ */
.rk-toast {
  display: inline-flex;
  padding: 12px 20px;
  background: rgba(0,0,0,0.8);
  color: var(--color-text-white);
  border-radius: var(--radius-md);
  font-size: var(--font-size-body);
}
.rk-toast--block {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  width: 120px;
  height: 120px;
  justify-content: center;
}
.rk-toast__icon {
  width: 36px;
  height: 36px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* ============================================================
 * 19. Popover
 * ============================================================ */
.rk-popover {
  width: 240px;
  padding: 16px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}
.rk-popover__text { font-size: var(--font-size-body); color: var(--color-text-primary); }
.rk-popover__btns { display: flex; justify-content: flex-end; gap: 16px; margin-top: 12px; align-items: center; }
.rk-popover__cancel { font-size: var(--font-size-body); color: var(--color-text-secondary); cursor: pointer; }
.rk-popover__confirm {
  padding: 4px 12px;
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
  cursor: pointer;
}

/* ============================================================
 * 20. Empty 空状态
 * ============================================================ */
.rk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 16px 40px;
  color: var(--color-text-tertiary);
}
/* 插画位 —— 推荐 160-180px，主色 #DDD-#EEE 灰阶 + 装饰 */
.rk-empty__illustration {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-empty__illustration svg,
.rk-empty__illustration img { width: 100%; height: 100%; display: block; object-fit: contain; }
/* 旧版 __icon 类保留向后兼容 */
.rk-empty__icon { font-size: 64px; opacity: .5; }
.rk-empty__text {
  font-size: var(--font-size-body);
  color: var(--color-text-tertiary);
  text-align: center;
  line-height: 1.5;
}
.rk-empty__hint {
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: -8px;
}

/* ============================================================
 * 通用工具类
 * ============================================================ */
.rk-row { display: flex; align-items: center; }
.rk-col { display: flex; flex-direction: column; }
.rk-space-between { justify-content: space-between; }
.rk-center { justify-content: center; align-items: center; }
.rk-flex-1 { flex: 1; }
.rk-gap-xs { gap: var(--spacing-xs); }
.rk-gap-sm { gap: var(--spacing-sm); }
.rk-gap-md { gap: var(--spacing-md); }
.rk-gap-lg { gap: var(--spacing-lg); }
.rk-gap-xl { gap: var(--spacing-xl); }

.rk-text-primary { color: var(--color-text-primary); }
.rk-text-secondary { color: var(--color-text-secondary); }
.rk-text-tertiary { color: var(--color-text-tertiary); }
.rk-text-brand { color: var(--color-primary); }
.rk-text-danger { color: var(--color-danger); }
.rk-text-success { color: var(--color-success); }
.rk-text-warning { color: var(--color-warning); }

/* ============================================================
 * 21. Form Item 表单项（左 label 右 value）—— 来源：预约直播页
 * ============================================================ */
.rk-form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-light);
}
.rk-form-item:last-child { border-bottom: none; }
.rk-form-item__label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.rk-form-item__required::after {
  content: '*';
  color: var(--color-danger);
  font-family: var(--font-family-en);
  margin-left: 2px;
}
.rk-form-item__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  text-align: right;
}
.rk-form-item__value--placeholder { color: var(--color-text-placeholder); }
.rk-form-item__value--link { color: var(--color-primary); }
.rk-form-item__arrow::after {
  content: '›';
  color: var(--color-text-tertiary);
  font-size: 14px;
}
/* 表单项下方 hint 提示文字 */
.rk-form-hint {
  padding: 4px 16px 12px;
  background: var(--color-bg-card);
  font-size: 12px;
  color: var(--color-text-tertiary);
  line-height: var(--line-height-normal);
}

/* 表单组（多个 form-item 合成的卡片） */
.rk-form-group {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ============================================================
 * 22. Inline Radio Group 横向单选（是 / 否）—— 来源：预约直播表单
 * ============================================================ */
.rk-radio-group { display: inline-flex; gap: 24px; align-items: center; }
.rk-radio-group__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  cursor: pointer;
}

/* ============================================================
 * 23. Notice Banner 信息提示条 —— 来源：关联直播页
 * ============================================================ */
.rk-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #FEEFEF;
  font-size: 13px;
  color: var(--color-danger);
}
.rk-notice__icon {
  width: 14px;
  height: 14px;
  background: var(--color-danger);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.rk-notice--warning { background: #FFF6E6; color: var(--color-warning); }
.rk-notice--warning .rk-notice__icon { background: var(--color-warning); }
.rk-notice--info { background: var(--color-primary-light); color: var(--color-primary); }
.rk-notice--info .rk-notice__icon { background: var(--color-primary); }

/* ============================================================
 * 24. Action Card 大入口按钮 —— 来源：录制直播视频页底部
 * ============================================================ */
.rk-action-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.rk-action-card--warning { background: var(--color-warning); }
.rk-action-card--success { background: var(--color-success); }
.rk-action-card__icon {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.2);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.rk-action-card__icon svg { width: 18px; height: 18px; display: block; }
.rk-action-card__label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
}

/* ============================================================
 * 25. Status Corner Tag 卡片右上角状态徽章 —— 来源：直播记录卡片
 * ============================================================ */
.rk-card-with-tag { position: relative; overflow: hidden; }
.rk-status-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 11px;
  border-radius: 0 8px 0 8px;
}
.rk-status-tag--corner {
  position: absolute;
  top: 0;
  right: 0;
}
.rk-status-tag--primary { background: var(--color-primary-light); color: var(--color-primary); }
.rk-status-tag--warning { background: #FFF1DD; color: var(--color-warning); }
.rk-status-tag--success { background: #E0F5EC; color: var(--color-success); }
.rk-status-tag--danger { background: #FDE9E9; color: var(--color-danger); }
.rk-status-tag--gray { background: #F0F0F0; color: var(--color-text-tertiary); }

/* 文字状态色（用于行内状态标记，如"・进行中"） */
.rk-status-text { font-size: 12px; }
.rk-status-text--running { color: var(--color-success); }
.rk-status-text--pending { color: var(--color-text-tertiary); }
.rk-status-text--reject { color: var(--color-danger); }
.rk-status-text--pass { color: var(--color-success); }

/* ============================================================
 * 26. Date Group Header 列表日期分组标题 —— 来源：直播记录页
 * ============================================================ */
.rk-date-header {
  padding: 12px 4px 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ============================================================
 * 27. Card Action Bar 卡片底部辅助按钮组 —— 来源：直播记录卡片
 * ============================================================ */
.rk-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.rk-card-action-btn {
  padding: 5px 12px;
  background: var(--color-primary);
  color: var(--color-text-white);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.rk-card-action-btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

/* ============================================================
 * 28. Bottom Fixed Bar 底部固定按钮容器 —— 来源：所有创建页底部
 * ============================================================ */
.rk-bottom-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 12px;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom)) 16px;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border-light);
}
.rk-bottom-bar .rk-btn { flex: 1; }
/* 双按钮 / 单按钮自适应 */

/* ============================================================
 * 29. NavBar with Close X 关闭按钮 —— 来源：创建直播二级页
 * ============================================================ */
.rk-navbar__left {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.rk-navbar__close::before {
  content: '✕';
  font-size: 18px;
}
.rk-navbar__more::after {
  content: '⋯';
  font-size: 20px;
  letter-spacing: -2px;
}

/* ============================================================
 * 30. List with Right Radio 列表项右侧带圆形单选 —— 来源：关联直播页
 * ============================================================ */
.rk-list--selectable .rk-list__item { cursor: pointer; }
.rk-list--selectable .rk-list__item:hover { background: var(--color-bg-page); }
/* 已存在 .rk-radio，配合 .rk-list__extra 使用即可 */

/* ============================================================
 * 31. Page Section 页面分块容器（白底卡片 + 边距）
 * ============================================================ */
.rk-page-section {
  background: var(--color-bg-card);
  margin-bottom: 8px;
  /* 内部自行控制 padding */
}

/* ============================================================
 * 32. Long Content Box 长文本框（直播详情违禁词记录区）
 * ============================================================ */
.rk-content-box {
  background: var(--color-bg-card);
  padding: 16px;
  border-radius: var(--radius-md);
}
.rk-content-box__title {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}
.rk-content-box__time {
  font-family: var(--font-family-en);
  font-size: 12px;
  color: var(--color-text-tertiary);
  margin-top: 12px;
}
.rk-content-box__text {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: var(--line-height-normal);
  margin-top: 4px;
}

/* ============================================================
 * ★ v1.2 工作台与订单组件（来源：工作表 / 直播详情 / 批量发送积分 / 门店要货）
 * ============================================================ */

/* ---------- 33. Feature Card 工作台功能入口大卡 ---------- */
.rk-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 36px 16px 28px;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  cursor: pointer;
  aspect-ratio: 1;
}
/* 图标本身 —— 无背景色块，主色填充，约 72×72 */
.rk-feature-card__icon {
  position: relative;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.rk-feature-card__icon svg { width: 100%; height: 100%; display: block; }
/* 状态点缀（右下角红色感叹号） */
.rk-feature-card__icon[data-status="warning"]::after {
  content: '!';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  background: var(--color-danger);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-family: var(--font-family-en);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-feature-card__icon[data-status="check"]::after {
  content: '✓';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  background: var(--color-success);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-feature-card__label {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

/* 工作台网格容器 */
.rk-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* ---------- 34. Info Row 信息详情行（key: value） ---------- */
.rk-info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  line-height: 1.5;
}
.rk-info-row__label { color: var(--color-text-secondary); flex-shrink: 0; }
.rk-info-row__value { color: var(--color-text-primary); }
.rk-info-row--inline { display: inline-flex; gap: 4px; }

/* 多列信息行（左右两组 key: value） */
.rk-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 24px;
}

/* ---------- 35. FAB 浮动操作按钮（右下圆形） ---------- */
.rk-fab {
  position: fixed;
  right: 16px;
  bottom: 80px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  box-shadow: 0 4px 12px rgba(37,128,240,0.4);
  cursor: pointer;
  opacity: 0.92;
}
.rk-fab:hover { opacity: 1; }
.rk-fab--absolute { position: absolute; }

/* ---------- 36. Floating Hint 浮动小气泡按钮（左下"返回上一页"） ---------- */
.rk-floating-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-bg-card);
  border-radius: var(--radius-circle);
  font-size: 12px;
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-popover);
  cursor: pointer;
}

/* ---------- 37. Selection Bar 选择栏（已选 X 人 / 全选） ---------- */
.rk-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-body);
}
.rk-selection-bar__count { color: var(--color-text-primary); }
.rk-selection-bar__all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---------- 38. Deletable List Item 可删除列表项 ---------- */
.rk-deletable-list { background: var(--color-bg-card); border-radius: var(--radius-md); overflow: hidden; }
.rk-deletable-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border-light);
}
.rk-deletable-list__item:last-child { border-bottom: none; }
.rk-deletable-list__main { flex: 1; }
.rk-deletable-list__del {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-tertiary);
  cursor: pointer;
}
.rk-deletable-list__del::before { content: '🗑'; font-size: 14px; }

/* ---------- 39. Chip Tab 横向滚动筛选标签 ---------- */
.rk-chip-scroll {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--color-bg-card);
  scrollbar-width: none;
}
.rk-chip-scroll::-webkit-scrollbar { display: none; }
.rk-chip {
  padding: 6px 12px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
}
.rk-chip--active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ---------- 40. Bottom Form 底部表单区（输入 + 原因 + CTA） ---------- */
.rk-bottom-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px calc(20px + env(safe-area-inset-bottom)) 16px;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border-light);
}
.rk-bottom-form__row {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.rk-bottom-form__label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.rk-bottom-form__input {
  flex: 1;
  padding: 8px 12px;
  background: var(--color-bg-page);
  border-radius: 4px;
  font-family: var(--font-family-en);
  font-size: 14px;
  color: var(--color-text-primary);
}
.rk-bottom-form__reason {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}
.rk-bottom-form__reason--filled { color: var(--color-danger); }
.rk-bottom-form__reason--empty { color: var(--color-text-placeholder); }

/* ---------- 41. Status Grid 日期 × 时段 勾选矩阵 ---------- */
.rk-status-grid {
  display: grid;
  gap: 0;
  background: var(--color-bg-card);
  padding: 12px;
  border-radius: var(--radius-md);
  font-size: 11px;
}
.rk-status-grid__row { display: contents; }
.rk-status-grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.rk-status-grid__cell--head { color: var(--color-text-tertiary); font-size: 10px; }
.rk-status-grid__cell--check { color: var(--color-success); font-size: 14px; }
.rk-status-grid__cell--cross { color: var(--color-danger); font-size: 14px; }
.rk-status-grid__cell--na { color: var(--color-text-disabled); }
.rk-status-grid__row-label {
  font-size: 11px;
  color: var(--color-text-secondary);
  padding: 0 8px 0 0;
}

/* ---------- 42. Order Card 订单卡片 ---------- */
.rk-order-card {
  position: relative;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 12px;
  overflow: hidden;
}
.rk-order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--color-border-light);
}
.rk-order-card__status {
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
}
.rk-order-card__user {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.rk-order-card__price {
  font-family: var(--font-family-en);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  color: var(--color-danger);
}
.rk-order-card__meta {
  font-size: 12px;
  color: var(--color-text-tertiary);
  padding: 6px 0;
}
.rk-order-card__meta-copy {
  margin-left: 8px;
  color: var(--color-primary);
  cursor: pointer;
}
.rk-order-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border-light);
}
.rk-order-card__more {
  font-size: 12px;
  color: var(--color-text-tertiary);
  cursor: pointer;
}

/* ---------- 43. Product Row 商品行（图 + 名 + 规格） ---------- */
.rk-product-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}
.rk-product-row__img {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-page);
  flex-shrink: 0;
}
.rk-product-row__info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rk-product-row__name {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.3;
}
.rk-product-row__sku {
  font-family: var(--font-family-en);
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.rk-product-row__spec {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.rk-product-row__qty {
  align-self: flex-start;
  font-family: var(--font-family-en);
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* ============================================================
 * ★ v1.7 新增（来源：门店要货 / 私聊数据 / 问题详情 / 机器人打工报告 /
 *               门店清票 / 筛选页 / 借货申请详情）
 * ============================================================ */

/* ---------- 44. Balance Card 余额卡（蓝色渐变） ----------
 *   用法：团队余额展示，右侧黄色"充值"按钮
 *   <div class="rk-balance-card">
 *     <div class="rk-balance-card__main">
 *       <span class="rk-balance-card__team">重庆团队</span>
 *       <span class="rk-balance-card__label">余额：</span>
 *       <span class="rk-balance-card__amount">¥99999999.00</span>
 *     </div>
 *     <button class="rk-balance-card__action">充值</button>
 *   </div>
 */
.rk-balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(90deg, #6FB1FE 0%, #2580F0 100%);
  border-radius: var(--radius-md);
  color: var(--color-text-white);
}
.rk-balance-card__main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
}
.rk-balance-card__team { font-size: var(--font-size-body); margin-right: 8px; }
.rk-balance-card__label { font-size: var(--font-size-body); }
.rk-balance-card__amount {
  font-family: var(--font-family-en);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
}
.rk-balance-card__action {
  padding: 6px 18px;
  background: var(--color-warning);
  color: var(--color-text-white);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-body);
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------- 45. Section Title 蓝色竖条 + 标题 ----------
 *   用法：业务页面分组标题（用户分层 / 商品名称 等）
 *   <div class="rk-section-title">用户分层</div>
 *   <div class="rk-section-title">商品名称：<span class="rk-section-title__sub">三月份借货商品</span></div>
 */
.rk-section-title {
  position: relative;
  padding: 4px 0 4px 10px;
  font-size: var(--font-size-title-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.rk-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 2px;
}
.rk-section-title__sub { font-weight: var(--font-weight-regular); }

/* ---------- 46. Stats Card 双格白底统计卡 ----------
 *   不同于 rk-stats（彩色实心）；这是白底，左右两个数字+标签+底部辅助行
 *   <div class="rk-stats-card">
 *     <div class="rk-stats-card__item">
 *       <div class="rk-stats-card__label">主动跟进</div>
 *       <div class="rk-stats-card__value">128 <span class="rk-stats-card__unit">人</span></div>
 *       <div class="rk-stats-card__hint">顾客已回复：56人</div>
 *     </div>
 *     <div class="rk-stats-card__item">…</div>
 *   </div>
 */
.rk-stats-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  gap: 16px;
}
.rk-stats-card__item { display: flex; flex-direction: column; gap: 4px; }
.rk-stats-card__label { font-size: 13px; color: var(--color-text-secondary); }
.rk-stats-card__value {
  font-family: var(--font-family-en);
  font-size: 24px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}
.rk-stats-card__unit { font-size: 12px; font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.rk-stats-card__hint { font-size: 12px; color: var(--color-text-tertiary); margin-top: 2px; }

/* ---------- 47. Task Stats 任务统计卡（已完成/未完成 + 跳转箭头） ----------
 *   带左侧蓝色 icon 圆 + 大数字 + 右侧 ›
 *   <div class="rk-task-stats">
 *     <div class="rk-task-stats__item rk-task-stats__item--active">
 *       <div class="rk-task-stats__head">
 *         <span class="rk-task-stats__icon">✓</span>
 *         <span class="rk-task-stats__label">已完成任务</span>
 *       </div>
 *       <div class="rk-task-stats__row">
 *         <div class="rk-task-stats__num">4</div>
 *         <div class="rk-task-stats__arrow">›</div>
 *       </div>
 *     </div>
 *     <div class="rk-task-stats__item">…</div>
 *   </div>
 */
.rk-task-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rk-task-stats__item {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}
.rk-task-stats__item--active {
  background: var(--color-primary-light);
  outline: 1px solid rgba(37,128,240,0.2);
}
.rk-task-stats__head { display: flex; align-items: center; gap: 6px; }
.rk-task-stats__icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 13px;
}
.rk-task-stats__icon svg { width: 16px; height: 16px; }
.rk-task-stats__label { font-size: 13px; color: var(--color-text-secondary); }
.rk-task-stats__row { display: flex; align-items: center; justify-content: space-between; }
.rk-task-stats__num {
  font-family: var(--font-family-en);
  font-size: 26px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.rk-task-stats__arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(37,128,240,0.18);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

/* ---------- 48. AI Summary 容器 ✨AI智能总结 ----------
 *   <div class="rk-ai-summary">
 *     <div class="rk-ai-summary__head">
 *       <svg class="icon"><use xlink:href="#icon-sparkle"/></svg>
 *       <span>AI智能总结</span>
 *     </div>
 *     <div class="rk-ai-summary__block">
 *       <div class="rk-ai-summary__block-title">简报</div>
 *       <div class="rk-ai-summary__block-text">…</div>
 *     </div>
 *   </div>
 */
.rk-ai-summary {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rk-ai-summary__head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}
.rk-ai-summary__head svg { color: var(--color-primary); font-size: 18px; }
.rk-ai-summary__block {
  background: var(--color-bg-page);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rk-ai-summary__block-title { font-size: 13px; font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.rk-ai-summary__block-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}
/* 私聊数据"AI智能总结：xxx" 紧贴卡片底部的灰条 */
.rk-ai-summary-foot {
  background: var(--color-bg-page);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ---------- 49. Collapse 折叠 section ----------
 *   <div class="rk-collapse">
 *     <div class="rk-collapse__head">
 *       <span class="rk-collapse__dot rk-collapse__dot--success"></span>
 *       <span class="rk-collapse__title">客户关键信息提取（共5位）</span>
 *       <span class="rk-collapse__toggle">收起 ∧</span>
 *     </div>
 *     <div class="rk-collapse__body">…</div>
 *   </div>
 */
.rk-collapse__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
}
.rk-collapse__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  flex-shrink: 0;
}
.rk-collapse__dot--success { background: var(--color-success); }
.rk-collapse__dot--danger { background: var(--color-danger); }
.rk-collapse__dot--primary { background: var(--color-primary); }
.rk-collapse__title { flex: 1; font-size: 13px; font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.rk-collapse__toggle {
  font-size: 12px;
  color: var(--color-primary);
  cursor: pointer;
}
.rk-collapse__body { margin-top: 8px; }

/* ---------- 50. Inline Number Link 蓝色下划线锚点数字 ----------
 *   "<a class="rk-link-num">10位</a>客户向您转账，记得查收"
 */
.rk-link-num {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---------- 51. Info Table 类表格行（客户姓名 / 关键信息 / 操作） ----------
 *   <div class="rk-info-table">
 *     <div class="rk-info-table__head">
 *       <div class="rk-info-table__col">客户姓名</div>
 *       <div class="rk-info-table__col">关键信息</div>
 *       <div class="rk-info-table__col rk-info-table__col--action">操作</div>
 *     </div>
 *     <div class="rk-info-table__row">
 *       <div class="rk-info-table__col">客户A(昵称..</div>
 *       <div class="rk-info-table__col">已购磷虾油小单、翻单意向</div>
 *       <div class="rk-info-table__col rk-info-table__col--action">
 *         <a class="rk-link">立即沟通</a>
 *       </div>
 *     </div>
 *   </div>
 */
.rk-info-table {
  display: flex;
  flex-direction: column;
}
.rk-info-table__head, .rk-info-table__row {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  font-size: 12px;
}
.rk-info-table__head {
  color: var(--color-text-tertiary);
  font-size: 12px;
}
.rk-info-table__row { color: var(--color-text-primary); }
.rk-info-table__row + .rk-info-table__row { border-top: 1px dashed var(--color-border-light); }
.rk-info-table__col { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-info-table__col--action { text-align: right; }
.rk-link {
  color: var(--color-primary);
  cursor: pointer;
  font-size: 12px;
}

/* ---------- 52. List Head 列标题行 ----------
 *   私聊数据详情 顶部的 "用户姓名 / 私聊次数/回复率 / 标注状态"
 *   <div class="rk-list-head">
 *     <span>用户姓名</span><span>私聊次数/回复率</span><span>标注状态</span>
 *   </div>
 */
.rk-list-head {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: transparent;
}

/* ---------- 53. Chat Row 私聊数据列表项 ----------
 *   <div class="rk-chat-row">
 *     <div class="rk-chat-row__top">
 *       <img class="rk-chat-row__avatar" src="…">
 *       <div class="rk-chat-row__info">
 *         <div class="rk-chat-row__name">张三</div>
 *         <div class="rk-chat-row__phone">158****8765 <svg class="icon"><use xlink:href="#icon-phone"/></svg></div>
 *       </div>
 *       <div class="rk-chat-row__stat">3次/60%</div>
 *       <a class="rk-link">立即沟通</a>
 *     </div>
 *     <div class="rk-ai-summary-foot">AI智能总结：…</div>
 *   </div>
 */
.rk-chat-row {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.rk-chat-row__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
}
.rk-chat-row__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-light);
  flex-shrink: 0;
}
.rk-chat-row__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rk-chat-row__name { font-size: 14px; font-weight: var(--font-weight-medium); color: var(--color-text-primary); }
.rk-chat-row__phone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-family-en);
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.rk-chat-row__phone svg { color: var(--color-primary); font-size: 14px; }
.rk-chat-row__stat {
  flex: 1;
  text-align: center;
  font-family: var(--font-family-en);
  font-size: 13px;
  color: var(--color-text-primary);
}

/* ---------- 54. Comm Row 联系人行（问题详情）----------
 *   头像 + 姓名 + 时间 + 右侧"立即沟通" ghost 按钮
 *   <div class="rk-comm-row">
 *     <img class="rk-comm-row__avatar" src="…">
 *     <div class="rk-comm-row__info">
 *       <div class="rk-comm-row__name">张鑫鑫鑫鑫（昵称昵称昵称..）</div>
 *       <div class="rk-comm-row__time">01-16 12:12:12</div>
 *     </div>
 *     <button class="rk-btn rk-btn--ghost rk-btn--sm">立即沟通</button>
 *   </div>
 */
.rk-comm-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border-light);
}
.rk-comm-row:last-child { border-bottom: none; }
.rk-comm-row__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary-light);
  flex-shrink: 0;
}
.rk-comm-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rk-comm-row__name {
  font-size: 13px;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rk-comm-row__time {
  font-family: var(--font-family-en);
  font-size: 12px;
  color: var(--color-text-tertiary);
}

/* ---------- 55. Ghost Button 蓝色描边小按钮 ----------
 *   "立即沟通""关闭"
 */
.rk-btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-weight: var(--font-weight-regular);
}
.rk-btn--ghost:active { background: var(--color-primary-light); opacity: 1; }

/* ---------- 56. Filter Bar 顶部筛选条 ----------
 *   左侧 filter icon + 多个 dropdown + 右侧"更新数据"
 *   <div class="rk-filter-bar">
 *     <div class="rk-filter-bar__left">
 *       <svg class="icon"><use xlink:href="#icon-filter"/></svg>
 *       <span class="rk-filter-bar__dropdown">10月<span class="rk-filter-bar__arrow">▼</span></span>
 *       <span class="rk-filter-bar__dropdown">已清票<span class="rk-filter-bar__arrow">▼</span></span>
 *     </div>
 *     <a class="rk-action-text"><svg class="icon"><use xlink:href="#icon-refresh"/></svg>更新数据</a>
 *   </div>
 */
.rk-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--color-bg-card);
  gap: 8px;
}
.rk-filter-bar__left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.rk-filter-bar__left > svg { color: var(--color-primary); font-size: 16px; flex-shrink: 0; }
.rk-filter-bar__dropdown {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-primary);
  cursor: pointer;
}
.rk-filter-bar__arrow { font-size: 9px; color: var(--color-text-tertiary); }

/* ---------- 57. Action Text 文字+图标按钮（更新数据 / 编辑 / 添加等） ---------- */
.rk-action-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-primary);
  cursor: pointer;
}
.rk-action-text svg { font-size: 14px; }

/* ---------- 58. Search with Category 分类下拉 + 搜索输入 + 搜索按钮 ----------
 *   <div class="rk-search-cat">
 *     <div class="rk-search-cat__category">商品名称<span class="rk-search-cat__arrow">▼</span></div>
 *     <div class="rk-input rk-search-cat__input">
 *       <span class="rk-input__icon"><svg class="icon"><use xlink:href="#icon-search"/></svg></span>
 *       <input class="rk-input__field" placeholder="…">
 *       <span class="rk-input__clear"><svg class="icon"><use xlink:href="#icon-close"/></svg></span>
 *     </div>
 *     <button class="rk-search__btn">搜索</button>
 *   </div>
 */
.rk-search-cat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rk-search-cat__category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: var(--input-height);
  padding: 0 12px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.rk-search-cat__arrow { font-size: 9px; color: var(--color-text-tertiary); }
.rk-search-cat__input { flex: 1; min-width: 0; }

/* ---------- 59. Filter Tags 大尺寸筛选标签（用户分层 / 好友类型）----------
 *   <div class="rk-filter-tags">
 *     <button class="rk-filter-tag rk-filter-tag--active">全部用户</button>
 *     <button class="rk-filter-tag">新注册用户</button>
 *     …
 *   </div>
 */
.rk-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.rk-filter-tag {
  flex: 0 0 calc((100% - 24px) / 3);
  padding: 10px 8px;
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
  border-radius: 4px;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
}
.rk-filter-tag--active { background: var(--color-primary); color: var(--color-text-white); }
.rk-filter-tag--disabled { color: var(--color-text-disabled); pointer-events: none; }

/* ---------- 60. Checkbox Box 多选容器（带边框 + 右下角"已选 X 项"）----------
 *   <div class="rk-checkbox-box">
 *     <div class="rk-checkbox-grid">
 *       <label class="rk-check-item"><span class="rk-checkbox rk-checkbox--checked"></span>员工XXXX</label>
 *       <label class="rk-check-item"><span class="rk-checkbox"></span>员工XXXX</label>
 *       …
 *     </div>
 *     <div class="rk-checkbox-box__hint">可多选, 已选<span class="rk-text-brand">2</span>项</div>
 *   </div>
 */
.rk-checkbox-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 12px 8px;
  position: relative;
}
.rk-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.rk-check-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-primary);
  cursor: pointer;
  min-width: 0;
}
.rk-check-item > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rk-checkbox-box__hint {
  text-align: right;
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-tertiary);
}

/* 同样适用于无边框（直接放在筛选页 section 里） */
.rk-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rk-checkbox-list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

/* ---------- 61. Date Range 日期范围 ----------
 *   <div class="rk-date-range">
 *     <svg class="icon"><use xlink:href="#icon-calendar"/></svg>
 *     <span>2025.01.12-2025.03.24</span>
 *     <span class="rk-date-range__arrow">▼</span>
 *   </div>
 */
.rk-date-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-family: var(--font-family-en);
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
}
.rk-date-range svg { color: var(--color-text-secondary); font-size: 16px; }
.rk-date-range__arrow { font-size: 9px; color: var(--color-text-tertiary); }

/* ---------- 62. Goods Form Card 要货商品卡 ----------
 *   完整样例见 SKILL.md。结构：商品行 + 分隔 + 数量表单 + 仓库行
 *   <div class="rk-goods-form rk-card">
 *     <div class="rk-product-row">…</div>
 *     <div class="rk-goods-form__divider"></div>
 *     <div class="rk-goods-form__qty-label">填写需要的数量：</div>
 *     <div class="rk-goods-form__qty-row">
 *       <div class="rk-radio-group">
 *         <label class="rk-radio-group__item"><span class="rk-radio rk-radio--checked"></span>整箱要货</label>
 *         <label class="rk-radio-group__item"><span class="rk-radio"></span>拆箱要货</label>
 *       </div>
 *       <div class="rk-stepper">…</div>
 *     </div>
 *     <div class="rk-goods-form__total">商品数量：共 1 箱 5 袋</div>
 *     <div class="rk-warehouse-row">
 *       <span class="rk-warehouse-row__label">优先发货仓：</span>
 *       <div class="rk-warehouse-row__main">
 *         <span>石家庄铜冶仓</span>
 *         <span class="rk-stock-num">>999</span>
 *       </div>
 *       <a class="rk-link">查看其他仓库 ›</a>
 *     </div>
 *   </div>
 */
.rk-goods-form { display: flex; flex-direction: column; gap: 12px; }
.rk-goods-form__divider { height: 1px; background: var(--color-border-light); margin: 4px 0; }
.rk-goods-form__qty-label { font-size: 13px; color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
.rk-goods-form__qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rk-goods-form__total {
  text-align: right;
  font-size: 12px;
  color: var(--color-text-tertiary);
}
.rk-warehouse-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-light);
  font-size: 13px;
}
.rk-warehouse-row__label { color: var(--color-text-secondary); }
.rk-warehouse-row__main { flex: 1; display: inline-flex; align-items: center; gap: 8px; color: var(--color-text-primary); }
.rk-stock-num {
  font-family: var(--font-family-en);
  color: var(--color-success);
  font-size: 13px;
}

/* ---------- 63. Cart Bar 底部购物车 + CTA ----------
 *   <div class="rk-cart-bar">
 *     <div class="rk-cart-bar__cart">
 *       <svg class="icon"><use xlink:href="#icon-cart"/></svg>
 *       <span class="rk-cart-bar__badge">3</span>
 *     </div>
 *     <button class="rk-btn rk-btn--primary rk-cart-bar__cta">去报单</button>
 *   </div>
 */
.rk-cart-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)) 16px;
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-border-light);
}
.rk-cart-bar__cart {
  position: relative;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--color-text-primary);
}
.rk-cart-bar__badge {
  position: absolute;
  top: 0;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-danger);
  color: #fff;
  border-radius: 999px;
  font-family: var(--font-family-en);
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-cart-bar__cta { flex: 1; }

/* ---------- 64. Clear Card 门店清票卡 ----------
 *   红色"应退仓""退仓总成本"重点信息行
 *   结构：rk-card-with-tag + rk-status-tag--corner + rk-product-row + 信息行
 *   危险色信息行用 rk-info-row + value--danger
 */
.rk-info-row__value--danger {
  font-family: var(--font-family-en);
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}
.rk-info-row--danger .rk-info-row__label,
.rk-info-row--danger .rk-info-row__value {
  color: var(--color-danger);
  font-weight: var(--font-weight-medium);
}

/* 角标固定到卡片左上 */
.rk-status-tag--corner-tl {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px 0 8px 0;
}

/* ---------- 65. Device Hint 安全区适配提示条 ----------
 *   <div class="rk-device-hint">根据手机适配显示</div>
 *   橙色背景小条 + 黑色 home-indicator 占位
 */
.rk-device-hint {
  display: inline-block;
  padding: 4px 8px;
  background: var(--color-warning);
  color: var(--color-text-white);
  font-size: 11px;
  border-radius: 0 4px 4px 0;
}

/* ---------- 66. Notice with Info Icon Banner（蓝色信息提示）----------
 *   已存在 .rk-notice--info；此处补强（自带 i 圆形图标）
 *   <div class="rk-notice rk-notice--info">
 *     <span class="rk-notice__icon">i</span>
 *     <span>高频问题1: 10位客户向您转账，记得查收</span>
 *   </div>
 *   ⇒ 已通过 §23 实现，无新增类
 */

/* ---------- 67. Question Mark Hint ⓘ 图标按钮 ----------
 *   "机器人等级：初级 ⓘ" 末尾的圆形问号
 */
.rk-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  color: var(--color-text-tertiary);
  font-size: 12px;
  cursor: pointer;
}
.rk-help-icon svg { width: 14px; height: 14px; }


/* 无框架/渐进迁移入口：保留现有 rk-* 原子类与业务组件样式。 */
/* 输入区域在聚焦后保持静态边框，避免出现额外的内描边。 */
.rk-input:focus-within { border-color: var(--color-border); box-shadow: none; outline: none; }
.rk-input__field,
.rk-input__field:focus,
.rk-input__field:focus-visible { border: 0; outline: none; box-shadow: none; }