/* ============================================================
   会议微站 H5 模板 · 统一样式表 (style.css)
   风格：蓝白简洁 · 基于「源力」设计系统色板
   依赖：Bootstrap 5.3 (CDN) + Bootstrap Icons (CDN)
   说明：所有页面共用此文件，请勿在页面内写 <style>
   ============================================================ */

/* ---------- 1. 设计令牌（源力色板） ---------- */
:root {
  /* 主题色 */
  --yl-primary: #1664ff;
  --yl-primary-hover: #0055ff;
  --yl-primary-active: #0046cc;
  --yl-primary-light: #f3f7ff;
  --yl-primary-lighter: #ebf1ff;
  --yl-primary-soft: #ccddff;

  /* 中性文本 */
  --yl-text-strong: #0c0d0e;
  --yl-text-regular: #1d2129;
  --yl-text-secondary: #4e5969;
  --yl-text-muted: #86909c;
  --yl-text-disabled: #c9cdd4;
  --yl-text-placeholder: #c9cdd4;

  /* 背景 / 容器 */
  --yl-bg: #ffffff;
  --yl-bg-page: #f4f6f9;
  --yl-bg-soft: #f7f9fb;
  --yl-bg-fill: #f1f4f8;
  --yl-surface: #ffffff;

  /* 边框 */
  --yl-border: #e1e4e8;
  --yl-border-light: #eaedf1;
  --yl-divider: #f0f2f5;

  /* 状态色 */
  --yl-success: #2a814b;
  --yl-warning: #bd7e00;
  --yl-danger: #d7312a;
  --yl-success-bg: #e2f5eb;
  --yl-warning-bg: #fdf3de;
  --yl-danger-bg: #feeced;

  /* 圆角 */
  --yl-radius-sm: 4px;
  --yl-radius-md: 8px;
  --yl-radius-lg: 12px;
  --yl-radius-pill: 9999px;

  /* 阴影 */
  --yl-shadow-1: 0 1px 2px 0 rgba(12,13,14,.05);
  --yl-shadow-2: 0 2px 6px 0 rgba(12,13,14,.08);
  --yl-shadow-float: 0 8px 24px -4px rgba(12,13,14,.12), 0 4px 10px 0 rgba(12,13,14,.06);

  /* 字体 */
  --yl-font: "PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;

  /* 间距 */
  --yl-gap: 16px;

  /* —— 覆盖 Bootstrap 主题变量，使 .btn-primary / 链接等自动套用源力蓝 —— */
  --bs-primary: #1664ff;
  --bs-primary-rgb: 22,100,255;
  --bs-body-bg: #ffffff;
  --bs-body-color: #1d2129;
  --bs-body-font-family: var(--yl-font);
  --bs-border-color: #e1e4e8;
  --bs-link-color: #1664ff;
  --bs-link-hover-color: #0055ff;
  --bs-primary-bg-subtle: #f3f7ff;
  --bs-primary-border-subtle: #ccddff;
}

/* ---------- 2. 基础重置 / 全局 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--yl-font);
  color: var(--yl-text-regular);
  background: var(--yl-bg-page);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  font-size: 15px;
  line-height: 1.5;
  /* 桌面端居中、两侧留灰边，手机宽度恒定 */
  display: flex;
  justify-content: center;
  min-height: 100vh;
}
a { color: var(--yl-primary); text-decoration: none; }
a:active { opacity: .7; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

/* ---------- 3. 移动端画框（核心：宽度锁定） ---------- */
/* 手机端满宽；桌面端最大 414px 居中，带阴影模拟手机 */
.app-frame {
  width: 100%;
  max-width: 414px;
  min-height: 100vh;
  background: var(--yl-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(12,13,14,.04), 0 8px 40px rgba(12,13,14,.10);
  overflow: hidden;
}
@media (min-width: 480px) {
  .app-frame { margin: 0; border-radius: 0; min-height: 100vh; }
}
.app-frame__body {
  flex: 1 1 auto;
  width: 100%;
  padding: 16px;
  overflow-y: auto;
}
.app-frame__body--tight { padding: 0; }
.app-frame__body--has-bar { padding-top: 0; }

/* ---------- 4. 顶部导航栏 ---------- */
.app-bar {
  height: 52px;
  display: flex;
  align-items: center;
  position: relative;
  background: var(--yl-bg);
  border-bottom: 1px solid var(--yl-border-light);
  padding: 0 12px;
  flex: 0 0 auto;
  z-index: 10;
}
.app-bar--primary { background: var(--yl-primary); border-bottom-color: transparent; }
.app-bar--primary .app-bar__title,
.app-bar--primary .app-bar__icon { color: #fff; }
.app-bar__back {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--yl-text-strong);
  background: transparent; border: 0; cursor: pointer;
  font-size: 20px; line-height: 1;
}
.app-bar__title {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 17px; font-weight: 600; color: var(--yl-text-strong);
  max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-bar__right {
  margin-left: auto;
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--yl-primary);
}
.app-bar__right .btn-link { --bs-btn-color: var(--yl-primary); }

/* ---------- 5. 按钮（在 Bootstrap 基础上定制） ---------- */
.btn { border-radius: var(--yl-radius-md); font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--yl-primary);
  --bs-btn-border-color: var(--yl-primary);
  --bs-btn-hover-bg: var(--yl-primary-hover);
  --bs-btn-hover-border-color: var(--yl-primary-hover);
  --bs-btn-active-bg: var(--yl-primary-active);
  --bs-btn-active-border-color: var(--yl-primary-active);
  --bs-btn-disabled-bg: var(--yl-primary);
  --bs-btn-disabled-border-color: var(--yl-primary);
}
.btn-primary:disabled, .btn-primary.disabled { opacity: .5; }
.btn-outline-primary {
  --bs-btn-color: var(--yl-primary);
  --bs-btn-border-color: var(--yl-primary);
  --bs-btn-hover-bg: var(--yl-primary);
  --bs-btn-hover-border-color: var(--yl-primary);
  --bs-btn-active-bg: var(--yl-primary);
  --bs-btn-active-border-color: var(--yl-primary);
}
.btn-light {
  --bs-btn-bg: var(--yl-bg-fill);
  --bs-btn-border-color: var(--yl-bg-fill);
  --bs-btn-color: var(--yl-text-regular);
  --bs-btn-hover-bg: #e6eaf0;
  --bs-btn-active-bg: #dde2e9;
}
.btn-link { --bs-btn-color: var(--yl-primary); text-decoration: none; }
.btn-block { width: 100%; }
.btn-lg { padding: 12px 16px; font-size: 16px; border-radius: var(--yl-radius-lg); }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* ---------- 6. 表单 ---------- */
.form-label {
  font-size: 14px; color: var(--yl-text-secondary); margin-bottom: 6px;
  font-weight: 500;
}
.form-label .req { color: var(--yl-danger); margin-left: 2px; }
.form-control, .form-select {
  border-radius: var(--yl-radius-md);
  border: 1px solid var(--yl-border);
  padding: 10px 12px;
  font-size: 15px;
  color: var(--yl-text-strong);
  background-color: var(--yl-bg);
}
.form-control::placeholder, .form-select { color: var(--yl-text-placeholder); }
.form-control:focus, .form-select:focus {
  border-color: var(--yl-primary);
  box-shadow: 0 0 0 3px rgba(22,100,255,.12);
}
.form-control:disabled, .form-control[readonly] {
  background-color: var(--yl-bg-fill); color: var(--yl-text-muted);
}
.form-text { font-size: 12px; color: var(--yl-text-muted); }
.is-invalid ~ .form-text,
.form-error { color: var(--yl-danger); font-size: 12px; margin-top: 4px; }

/* 带图标的输入框 */
.input-icon { position: relative; }
.input-icon .form-control { padding-left: 40px; }
.input-icon .input-icon__lead {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--yl-text-muted); font-size: 18px; line-height: 1;
}
.input-icon .input-icon__tail {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--yl-text-muted); font-size: 16px; background: transparent; border: 0; padding: 4px;
}
.input-group .btn { border-radius: var(--yl-radius-md); }

/* 验证码行 */
.code-row { display: flex; gap: 10px; }
.code-row .form-control { flex: 1 1 auto; }
.code-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* 协议勾选 */
.form-check-label { font-size: 13px; color: var(--yl-text-secondary); }
.form-check-input:checked { background-color: var(--yl-primary); border-color: var(--yl-primary); }
.form-check-input:focus { border-color: var(--yl-primary); box-shadow: 0 0 0 3px rgba(22,100,255,.12); }

/* ---------- 7. 列表式表单（iOS 风格资料卡） ---------- */
.field-list {
  background: var(--yl-bg);
  border-radius: var(--yl-radius-lg);
  overflow: hidden;
  box-shadow: var(--yl-shadow-1);
}
.field-list .field-cell { border-bottom: 1px solid var(--yl-divider); }
.field-list .field-cell:last-child { border-bottom: 0; }
.field-cell {
  display: flex; align-items: center;
  min-height: 52px; padding: 12px 16px; gap: 12px;
  background: var(--yl-bg);
}
.field-cell__label {
  flex: 0 0 auto; width: 88px; font-size: 15px; color: var(--yl-text-regular);
}
.field-cell__label .req { color: var(--yl-danger); }
.field-cell__control {
  flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--yl-text-strong);
  border: 0; background: transparent; text-align: right;
}
.field-cell__control::placeholder { color: var(--yl-text-placeholder); text-align: right; }
.field-cell__control:focus { outline: none; }
.field-cell__value { flex: 1 1 auto; text-align: right; color: var(--yl-text-strong); font-size: 15px; }
.field-cell__placeholder { flex: 1 1 auto; text-align: right; color: var(--yl-text-placeholder); font-size: 15px; }
.field-cell__chevron { color: var(--yl-text-disabled); font-size: 16px; }
.field-cell--static .field-cell__value { color: var(--yl-text-secondary); }

/* 卡片分组标题 */
.section-title {
  font-size: 13px; color: var(--yl-text-muted); font-weight: 500;
  padding: 18px 4px 8px; letter-spacing: .2px;
}

/* ---------- 8. 卡片 ---------- */
.card {
  border: 1px solid var(--yl-border-light);
  border-radius: var(--yl-radius-lg);
  box-shadow: var(--yl-shadow-1);
}
.card-body { padding: 16px; }
.card-title { font-size: 16px; font-weight: 600; color: var(--yl-text-strong); margin-bottom: 8px; }

/* 信息块 */
.info-block { background: var(--yl-bg-soft); border-radius: var(--yl-radius-md); padding: 12px 14px; font-size: 13px; color: var(--yl-text-secondary); line-height: 1.6; }
.info-block--primary { background: var(--yl-primary-light); color: #0046cc; }

/* ---------- 9. 个人中心 · 用户头部 ---------- */
.user-card {
  background: linear-gradient(135deg, var(--yl-primary) 0%, #2f7bff 100%);
  color: #fff; padding: 24px 18px 20px; border-radius: 0 0 var(--yl-radius-lg) var(--yl-radius-lg);
}
.user-card__avatar {
  width: 56px; height: 56px; border-radius: var(--yl-radius-pill);
  background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 600; color: #fff; flex: 0 0 auto;
}
.user-card__name { font-size: 18px; font-weight: 600; }
.user-card__meta { font-size: 13px; opacity: .9; margin-top: 2px; }
.user-card .row { align-items: center; }

/* 功能宫格 */
.func-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 4px 4px; }
.func-grid--cols3 { grid-template-columns: repeat(3, 1fr); }
.func-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 4px; border-radius: var(--yl-radius-md); cursor: pointer;
  text-align: center;
}
.func-item:active { background: var(--yl-primary-light); }
.func-item__icon {
  width: 44px; height: 44px; border-radius: var(--yl-radius-md);
  background: var(--yl-primary-light); color: var(--yl-primary);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.func-item__label { font-size: 12px; color: var(--yl-text-regular); }

/* 列表菜单 */
.menu-list { background: var(--yl-bg); border-radius: var(--yl-radius-lg); overflow: hidden; box-shadow: var(--yl-shadow-1); }
.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--yl-divider);
  cursor: pointer; background: var(--yl-bg);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:active { background: var(--yl-bg-soft); }
.menu-item__icon { width: 24px; color: var(--yl-primary); font-size: 19px; text-align: center; flex: 0 0 auto; }
.menu-item__text { flex: 1 1 auto; font-size: 15px; color: var(--yl-text-regular); }
.menu-item__value { font-size: 13px; color: var(--yl-text-muted); }
.menu-item__chevron { color: var(--yl-text-disabled); font-size: 16px; }

/* ---------- 10. 步骤条 ---------- */
.steps { display: flex; align-items: center; padding: 16px 8px; }
.step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.step__dot {
  width: 24px; height: 24px; border-radius: var(--yl-radius-pill);
  background: var(--yl-bg-fill); color: var(--yl-text-muted);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  z-index: 2;
}
.step__label { font-size: 12px; color: var(--yl-text-muted); }
.step--active .step__dot { background: var(--yl-primary); color: #fff; }
.step--active .step__label { color: var(--yl-primary); font-weight: 500; }
.step--done .step__dot { background: var(--yl-primary); color: #fff; }
.step--done .step__label { color: var(--yl-text-regular); }
.step::after {
  content: ""; position: absolute; top: 12px; left: 50%; width: 100%; height: 2px;
  background: var(--yl-bg-fill); z-index: 1;
}
.step:last-child::after { display: none; }
.step--done::after { background: var(--yl-primary); }

/* ---------- 11. 底部操作栏 ---------- */
.action-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 16px; background: var(--yl-bg);
  border-top: 1px solid var(--yl-border-light);
  flex: 0 0 auto; z-index: 10;
}
.action-bar__price { flex: 1 1 auto; }
.action-bar__price .num { font-size: 20px; font-weight: 700; color: var(--yl-danger); }
.action-bar__price .unit { font-size: 12px; color: var(--yl-text-muted); }
.action-bar .btn { flex: 0 0 auto; }
.action-bar .btn--grow { flex: 1 1 auto; }

/* ---------- 12. 底部弹窗（选择省市 / 选择职称） ---------- */
.sheet-scrim {
  position: absolute; inset: 0; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(12,13,14,.40);
  z-index: 100;
  animation: fade-in .18s ease;
}
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--yl-bg);
  border-radius: var(--yl-radius-lg) var(--yl-radius-lg) 0 0;
  z-index: 101;
  max-height: 70%;
  display: flex; flex-direction: column;
  animation: slide-up .22s ease;
}
.sheet__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--yl-divider); flex: 0 0 auto;
}
.sheet__title { font-size: 15px; font-weight: 600; color: var(--yl-text-strong); }
.sheet__close { background: transparent; border: 0; color: var(--yl-text-muted); font-size: 20px; line-height: 1; }
.sheet__body { padding: 8px 0; overflow-y: auto; flex: 1 1 auto; }
.sheet__option {
  padding: 13px 16px; font-size: 15px; color: var(--yl-text-regular);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.sheet__option:active { background: var(--yl-bg-soft); }
.sheet__option--active { color: var(--yl-primary); font-weight: 600; }
.sheet__option--active::after { content: "\F26E"; font-family: "bootstrap-icons"; }

/* 级联选择（省/市/区县） */
.cascade { display: flex; height: 280px; }
.cascade__col { flex: 1 1 33.333%; overflow-y: auto; }
.cascade__col + .cascade__col { border-left: 1px solid var(--yl-divider); }
.cascade__option { padding: 12px 8px; font-size: 13px; color: var(--yl-text-regular); cursor: pointer; text-align: center; }
.cascade__option:active { background: var(--yl-bg-soft); }
.cascade__option--active { color: var(--yl-primary); font-weight: 600; background: var(--yl-primary-light); }

/* 标签组（职称筛选等） */
.tag-group { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px; }
.tag-chip {
  padding: 8px 16px; border-radius: var(--yl-radius-pill);
  background: var(--yl-bg-fill); color: var(--yl-text-regular); font-size: 13px;
  border: 1px solid transparent; cursor: pointer;
}
.tag-chip--active { background: var(--yl-primary-light); color: var(--yl-primary); border-color: var(--yl-primary-soft); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- 13. 结果 / 成功态 ---------- */
.result-state { text-align: center; padding: 56px 24px 24px; }
.result-state__icon {
  width: 72px; height: 72px; border-radius: var(--yl-radius-pill);
  margin: 0 auto 16px; display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.result-state--success .result-state__icon { background: var(--yl-success-bg); color: var(--yl-success); }
.result-state__title { font-size: 19px; font-weight: 600; color: var(--yl-text-strong); margin-bottom: 6px; }
.result-state__desc { font-size: 14px; color: var(--yl-text-muted); }

/* ---------- 14. 协议正文 ---------- */
.agreement-body { font-size: 14px; line-height: 1.8; color: var(--yl-text-secondary); }
.agreement-body h2 { font-size: 16px; font-weight: 600; color: var(--yl-text-strong); margin: 18px 0 8px; }
.agreement-body p { margin: 0 0 10px; }
.agreement-body .lead { color: var(--yl-text-regular); }

/* ---------- 15. 通用工具类 ---------- */
.text-muted-2 { color: var(--yl-text-muted) !important; }
.text-secondary-2 { color: var(--yl-text-secondary) !important; }
.text-primary-2 { color: var(--yl-primary) !important; }
.bg-soft { background: var(--yl-bg-soft) !important; }
.fw-semi { font-weight: 600; }
.divider { height: 1px; background: var(--yl-divider); border: 0; margin: 12px 0; }
.gap-stack > * + * { margin-top: 12px; }
.mt-section { margin-top: 20px; }
.rounded-lg { border-radius: var(--yl-radius-lg); }
.brand-logo {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--yl-text-strong);
}
.brand-logo__mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--yl-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.brand-logo--light { color: #fff; }
.brand-logo--light .brand-logo__mark { background: rgba(255,255,255,.2); }

/* 徽标 */
.badge-soft { background: var(--yl-primary-light); color: var(--yl-primary); font-weight: 500; border-radius: var(--yl-radius-sm); }
.badge-soft--success { background: var(--yl-success-bg); color: var(--yl-success); }
.badge-soft--warning { background: var(--yl-warning-bg); color: var(--yl-warning); }

/* 价格行 */
.price { color: var(--yl-danger); font-weight: 700; }
.price__sym { font-size: 13px; }
.price__int { font-size: 20px; }

/* 表格（订单明细等） */
.detail-table { width: 100%; font-size: 14px; }
.detail-table td { padding: 9px 0; vertical-align: top; }
.detail-table td:first-child { color: var(--yl-text-muted); width: 96px; }
.detail-table td:last-child { color: var(--yl-text-strong); text-align: right; }

/* ---------- 16. 登录相关 ---------- */
.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--yl-divider);
  margin: 0 -4px;
  padding: 0 12px;
}
.login-tab {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: 0;
  color: var(--yl-text-secondary);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: color .2s;
}
.login-tab--active {
  color: var(--yl-primary);
  font-weight: 600;
}
.login-tab--active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--yl-primary);
}

.input-icon--split .form-control {
  padding-right: 110px;
}
.input-icon--split .captcha-img {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 90px;
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: var(--yl-bg-fill);
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-icon--split .captcha-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}
.input-icon--split .captcha-btn:disabled {
  background: var(--yl-bg-fill);
  border-color: var(--yl-border-light);
  color: var(--yl-text-muted);
}

/* ---------- 17. 第三方登录（微信等） ---------- */
.login-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0 18px; color: var(--yl-text-muted); font-size: 12px;
}
.login-divider::before, .login-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--yl-divider);
}
.social-login { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.social-login__btn {
  width: 100%; max-width: 260px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--yl-radius-pill);
  background: #07c160; color: #fff; font-size: 15px; font-weight: 500;
  border: 0; cursor: pointer;
}
.social-login__btn:active { opacity: .88; }
.social-login__btn .bi { font-size: 19px; }
.social-login__row { display: flex; align-items: center; justify-content: center; gap: 24px; }
.social-login__icon {
  width: 44px; height: 44px; border-radius: var(--yl-radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--yl-bg-fill); color: var(--yl-text-secondary); font-size: 22px; cursor: pointer;
}
.social-login__icon--wechat { background: #07c160; color: #fff; }

/* ---------- 17. 报名费可选项 ---------- */
.fee-option {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--yl-border); border-radius: var(--yl-radius-md);
  background: var(--yl-bg); cursor: pointer; width: 100%; text-align: left;
}
.fee-option + .fee-option { margin-top: 10px; }
.fee-option:active { background: var(--yl-bg-soft); }
.fee-option--active { border-color: var(--yl-primary); background: var(--yl-primary-light); box-shadow: 0 0 0 1px var(--yl-primary) inset; }
.fee-option__main { flex: 1 1 auto; min-width: 0; }
.fee-option__name { font-size: 15px; font-weight: 600; color: var(--yl-text-strong); }
.fee-option__desc { font-size: 12px; color: var(--yl-text-muted); margin-top: 2px; }
.fee-option__price { flex: 0 0 auto; font-size: 18px; font-weight: 700; color: var(--yl-danger); }
.fee-option__check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: var(--yl-radius-pill);
  border: 1px solid var(--yl-text-disabled); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}
.fee-option--active .fee-option__check { background: var(--yl-primary); border-color: var(--yl-primary); }

/* ---------- 18. 可选卡片（酒店 / 房型，点击整卡即选中） ---------- */
.pick-card {
  position: relative; border: 1px solid var(--yl-border); border-radius: var(--yl-radius-lg);
  background: var(--yl-bg); padding: 14px 16px; cursor: pointer; width: 100%; text-align: left;
}
.pick-card + .pick-card { margin-top: 10px; }
.pick-card:active { background: var(--yl-bg-soft); }
.pick-card--active { border-color: var(--yl-primary); box-shadow: 0 0 0 1px var(--yl-primary) inset, var(--yl-shadow-1); }
.pick-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pick-card__title { font-size: 15px; font-weight: 600; color: var(--yl-text-strong); }
.pick-card__meta { font-size: 12px; color: var(--yl-text-muted); margin-top: 4px; }
.pick-card__row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.pick-card__check {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: var(--yl-radius-pill);
  border: 1px solid var(--yl-text-disabled); display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}
.pick-card--active .pick-card__check { background: var(--yl-primary); border-color: var(--yl-primary); }
.pick-card--active .pick-card__check::after { content: "\F26E"; font-family: "bootstrap-icons"; font-size: 12px; }