/**
 * invite-web 公共布局 / 组件 —— 对齐 user-app-v2「style-liuliang / 流量引擎」最新主题
 *
 * 组件形态参照 v2 公共组件 + figma fileKey awkRQG9HhK1dCsox6j0yi1：
 *   按钮 ← UiButton（primary 红实底 r-tile / cta 红实底 r-tile-lg+shadow-fab / ghost 描边）
 *   卡片 ← UiCard（elevated 白底 + shadow-card 极柔阴影 + r-card 12px 圆角）
 *   输入 ← UiInput（灰底 #f5f5f5 + 极弱 input-border + r-input 8px + focus 红边）
 *   复选 ← UiCheckbox（brand-pri accent，自动跟随主红 #ef4444）
 */

/* ───────── 页面骨架 ───────── */
.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
}

/* ───────── 顶栏 ───────── */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) var(--s-6);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-sub);
}
.app-header__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.app-header__logo {
  display: block;
  width: 32px;
  height: 32px;
  /* liuliang r-chip 4px 太硬，logo 用 r-tile 12px 让方块更柔和 */
  border-radius: var(--r-tile);
  object-fit: contain;
}
.app-header__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-pri);
}
.app-header__hint {
  font-size: var(--fs-caption);
  color: var(--text-tert);
}

/* ───────── 主体 ───────── */
.app-main {
  flex: 1;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ───────── 卡片（← UiCard elevated） ───────── */
.card {
  background: var(--bg-surface);
  border-radius: var(--r-tile);
  box-shadow: var(--shadow-card);
  padding: var(--s-6);
}
/* feature 卡：页面视觉焦点（邀请人 / 码主 hero 卡）—— 主蓝渐变 + 反白字 */
.card--feature {
  background: linear-gradient(135deg, var(--brand-pri) 0%, var(--brand-pri-pressed) 100%);
  box-shadow: var(--shadow-elevated);
  color: var(--text-inverse);
}
.card__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-pri);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.card--feature .card__title {
  color: var(--text-inverse);
}
.card__sub {
  font-size: var(--fs-body);
  color: var(--text-sec);
  line-height: var(--lh-loose);
}
.card--feature .card__sub {
  color: rgba(255, 255, 255, 0.82);
}

/* ───────── 按钮（← UiButton） ───────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  height: 44px;
  padding: 0 var(--s-6);
  border-radius: var(--r-tile);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  font-family: inherit;
  transition:
    background var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard),
    box-shadow var(--duration-fast) var(--easing-standard),
    opacity var(--duration-fast) var(--easing-standard),
    transform var(--duration-fast) var(--easing-standard);
  user-select: none;
}
.btn:active {
  transform: scale(0.98);
  opacity: 0.92;
}
/* primary：主蓝底 + 反白字 + 主蓝染阴影 —— 表单提交 / 标准操作 */
.btn--primary {
  background: var(--brand-pri);
  color: var(--text-inverse);
  box-shadow: var(--shadow-fab-blue);
}
.btn--primary:active {
  background: var(--brand-pri-pressed);
}
/* cta：红实底 + 大圆角 + 红染浮起阴影 —— 关键转化锚点（立即注册 / 下载安装包）
   liuliang 不用暖橙渐变 pill，统一红实底 r-tile-lg 16px；与 primary 区分仅在
   font-weight semibold + shadow-fab 浮起阴影更明显，符合 figma 流量引擎主 CTA 体例 */
.btn--cta {
  background: var(--brand-pri);
  color: var(--text-inverse);
  border-radius: var(--r-tile-lg);
  box-shadow: var(--shadow-fab);
  font-weight: var(--fw-semibold);
}
.btn--cta:active {
  background: var(--brand-pri-pressed);
}
/* ghost：白底 + 主品牌色字 + 描边 —— 次要操作（返回 / 复制链接 / 去下载） */
.btn--ghost {
  background: var(--bg-surface);
  color: var(--brand-pri);
  border: 1px solid var(--border-pri);
}
.btn--block {
  width: 100%;
}
.btn--sm {
  height: 32px;
  font-size: var(--fs-caption);
  padding: 0 var(--s-4);
  /* liuliang r-chip 4px 偏硬，行内小按钮用 r-input 8px 跟 field 圆角呼应 */
  border-radius: var(--r-input);
}
/* 禁用态（v2 统一：次级底 + 禁用字 + 无阴影） */
.btn:disabled {
  background: var(--bg-surface-2);
  color: var(--text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}
.btn:disabled:active {
  transform: none;
  opacity: 1;
}
/* loading 态——::before 是转圈 spinner，与按钮文字按 .btn 自带的 inline-flex+gap 自然并排 */
.btn.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.btn.is-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.btn--block.is-loading::before {
  width: 16px;
  height: 16px;
}

/* ───────── 表单（← UiInput） ───────── */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.field__label {
  font-size: var(--fs-caption);
  color: var(--text-sec);
  font-weight: var(--fw-medium);
}
/* 必填标记（label 内联红色 *）*/
.field__required {
  color: var(--state-danger);
  margin-left: 4px;
}
.field__row {
  display: flex;
  align-items: stretch;
  gap: var(--s-3);
  /* liuliang figma 257:864 实测：输入框灰底 + 极弱描边，聚焦时换红边 */
  background: var(--bg-input);
  border: 1px solid var(--input-border);
  border-radius: var(--r-input);
  padding: 0 var(--s-4);
  transition: border-color var(--duration-fast) var(--easing-standard);
}
.field__row:focus-within {
  border-color: var(--brand-pri);
}
.field__row.is-error {
  border-color: var(--state-danger);
}
/* 只读字段（邀请码 / 串联码回填）—— 浅灰底 + 极弱描边 + 副文色,表示"已锁定"
   2026-05-22 修：原方案用 --brand-pri-soft + --brand-pri 主色调，在 liuliang 红主题
   下(brand-pri-soft = #feecec 实红弱底 + 红边)会被误读成 error 状态(邀请码持续标红)。
   readonly 标准 UX 语义是"已锁定中性灰"，与品牌色解耦避免视觉混淆。 */
.field__row--readonly {
  background: var(--bg-input);
  border-color: var(--input-border);
}
.field__row--readonly .field__input {
  color: var(--text-sec);
  cursor: default;
}
/* field__row 内嵌的小按钮（获取验证码 / 显示密码）垂直居中留白：6 + 32 + 6 = 44 对齐输入区 */
.field__row .btn--sm {
  margin: 6px 0;
  align-self: center;
}
.field__input {
  flex: 1;
  height: 44px;
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--fs-body);
  color: var(--text-pri);
}
.field__input::placeholder {
  /* liuliang figma 真值 #cccccc，比 text-tert #999999 更弱便于区分占位与已输入 */
  color: var(--input-placeholder);
}
.field__suffix {
  display: flex;
  align-items: center;
  font-size: var(--fs-body);
  color: var(--text-sec);
}
/* 区号后缀分隔线（如 +86 |） */
.field__suffix--divider {
  padding-right: var(--s-3);
  border-right: 1px solid var(--border-sub);
}
.field__hint {
  font-size: var(--fs-caption);
  color: var(--text-tert);
  line-height: var(--lh-normal);
}
.field__error {
  font-size: var(--fs-caption);
  color: var(--state-danger);
  min-height: 16px;
}

/* ───────── 复选（← UiCheckbox，brand-pri accent） ───────── */
.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-caption);
  color: var(--text-sec);
  line-height: var(--lh-normal);
}
.checkbox input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--brand-pri);
  flex-shrink: 0;
}
.checkbox a {
  color: var(--text-brand);
}

/* ───────── 邀请人 / 上级信息行 ───────── */
.inviter {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.inviter__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--brand-pri-soft);
  color: var(--brand-pri);
  display: grid;
  place-items: center;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}
.inviter__main {
  flex: 1;
}
.inviter__name {
  font-size: var(--fs-h3);
  color: var(--text-pri);
  font-weight: var(--fw-semibold);
}
.inviter__phone {
  font-size: var(--fs-body);
  color: var(--text-sec);
  margin-top: var(--s-1);
}
.inviter__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--brand-pri-soft);
  color: var(--brand-pri);
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  margin-top: var(--s-2);
}
/* feature 卡（主蓝底）内的 inviter —— 反白配色 */
.card--feature .inviter__avatar {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-inverse);
}
.card--feature .inviter__name {
  color: var(--text-inverse);
}
.card--feature .inviter__phone {
  color: rgba(255, 255, 255, 0.72);
}
.card--feature .inviter__badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-inverse);
}

/* ───────── 规则列表（注册即享 / 链式接力规则 / FAQ） ───────── */
.rule-list {
  display: flex;
  flex-direction: column;
}
.rule {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) 0;
  border-top: 1px solid var(--divider);
}
.rule:first-child {
  border-top: none;
  padding-top: 0;
}
.rule__num {
  width: 24px;
  height: 24px;
  /* liuliang 序号徽标走 r-pill 圆形（figma 04 我的 35:37 实测体例）*/
  border-radius: var(--r-pill);
  background: var(--brand-pri-soft);
  color: var(--brand-pri);
  display: grid;
  place-items: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 2px;
}
.rule__title {
  font-size: var(--fs-body);
  color: var(--text-pri);
  font-weight: var(--fw-semibold);
}
.rule__desc {
  font-size: var(--fs-caption);
  color: var(--text-sec);
  margin-top: 2px;
  line-height: var(--lh-normal);
}

/* ───────── loading / banner ───────── */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) 0;
  color: var(--text-tert);
  font-size: var(--fs-caption);
}
.loading__dot {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-sub);
  border-top-color: var(--brand-pri);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.banner {
  /* r-chip 4px 偏硬，banner 这种带 padding 的提示用 r-input 8px 更柔和 */
  border-radius: var(--r-input);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  display: flex;
  gap: var(--s-3);
}
.banner--warn {
  background: var(--state-warning-bg);
  color: var(--state-warning);
}
.banner--error {
  background: var(--state-danger-bg);
  color: var(--state-danger);
}
.banner--info {
  background: var(--state-info-bg);
  color: var(--state-info);
}

/* ───────── 底部 ───────── */
.app-footer {
  padding: var(--s-6);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-tert);
  line-height: var(--lh-normal);
}
.app-footer a {
  color: var(--text-sec);
}

/* ───────── Toast ───────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  background: rgba(31, 41, 55, 0.94);
  color: var(--text-inverse);
  font-size: var(--fs-caption);
  padding: var(--s-3) var(--s-5);
  /* r-chip 4px 偏硬，toast 用 r-input 8px 让胶囊状提示更柔和 */
  border-radius: var(--r-input);
  max-width: 80%;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.toast.is-show {
  opacity: 1;
}

/* ───────── 遮罩 ───────── */
.mask {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: grid;
  place-items: center;
  padding: var(--s-6);
  z-index: 100;
}
.mask__panel {
  background: var(--bg-surface);
  /* liuliang 守卫弹窗体例 r-dialog 24px（figma 303:2081 / 307:3775 实测）*/
  border-radius: var(--r-dialog);
  width: 100%;
  max-width: 360px;
  padding: var(--s-7);
  text-align: center;
}
.mask__title {
  font-size: var(--fs-h2);
  color: var(--text-pri);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--s-4);
}
.mask__desc {
  font-size: var(--fs-body);
  color: var(--text-sec);
  line-height: var(--lh-loose);
  margin-bottom: var(--s-6);
}

/* ───────── 工具类 ───────── */
.text-center {
  text-align: center;
}
.text-muted {
  color: var(--text-sec);
}
/* 居中标题（替代 inline justify-content:center） */
.card__title--center {
  justify-content: center;
}
/* 警示标题（下载页「请在浏览器中打开」） */
.card__title--warn {
  color: var(--state-warning);
}
/* 主体垂直居中（404 页） */
.app-main--center {
  justify-content: center;
}
/* 注脚小字（替代页面里的 inline 小字号 style） */
.note {
  font-size: var(--fs-caption);
  color: var(--text-sec);
  line-height: var(--lh-normal);
}
.note--break {
  word-break: break-all;
}
/* 表单纵向布局（替代 register form 的 inline flex） */
.form-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  margin-top: var(--s-6);
}
/* 下载页 App logo */
.download-logo {
  width: 96px;
  height: 96px;
  border-radius: var(--r-tile);
  object-fit: contain;
  display: block;
  margin: var(--s-3) auto var(--s-5);
}
/* 下载页 App 名标题 */
.download-appname {
  font-size: var(--fs-h1);
  color: var(--text-pri);
  font-weight: var(--fw-bold);
  margin-bottom: var(--s-2);
}
/* 404 错误码大字 */
.error-code {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  color: var(--text-pri);
}
/* 间距工具类（class 名沿用旧体例，值映射到新间距档以保持视觉稳定） */
.mt-2 {
  margin-top: var(--s-3);  /* 8px */
}
.mt-3 {
  margin-top: var(--s-4);  /* 12px */
}
.mt-4 {
  margin-top: var(--s-5);  /* 16px */
}
.mt-5 {
  margin-top: var(--s-6);  /* 20px */
}

/* ============================================================================
 * 可点击 field 触发器（行政区划 / 国家区号 等浮层选择型字段）
 *
 * 形态：宿主仍走 .field__row 灰底胶囊 + 圆角；内嵌 .field__trigger 作 button
 *      占满；右侧 .field__trigger-icon 单字符 chevron `›`（不引图标库）。
 *
 * 参考：user-app-v2 pages/auth/register.vue `.p-register__region-trigger`。
 * ============================================================================ */
.field__trigger {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: var(--text-pri);
  font-size: var(--fs-body);
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.field__trigger:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.field__trigger-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.field__trigger-placeholder {
  flex: 1;
  color: var(--input-placeholder);
  font-size: var(--fs-body);
}
.field__trigger-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: var(--s-3);
  color: var(--text-tert);
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

/* ============================================================================
 * 底部 sheet 浮层（行政区划 picker，参考 user-app-v2 RegionPickerSheet）
 *
 * 结构：[backdrop 全屏遮罩] + [sheet 半屏面板 从底滑入]
 *   .region-sheet-backdrop  遮罩 + 点击关闭
 *   .region-sheet           面板（半屏 70vh，顶部 r-dialog 24px 圆角）
 *   .region-sheet__grabber  顶部小灰条（移动端体例，提示可下拉关闭）
 *   .region-sheet__header   标题 + 关闭 X
 *   .region-sheet__tabs     3 tab 进度条（省 / 市 / 区）
 *   .region-sheet__list     单列纵向 scroll 列表
 *   .region-sheet__item     单条 region 选项
 *   .region-sheet__placeholder 空 / loading 文案
 * ============================================================================ */
.region-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s var(--easing-decelerated);
}
.region-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.region-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 480px;
  height: 70vh;
  max-height: 600px;
  background: var(--bg-surface);
  border-radius: var(--r-dialog) var(--r-dialog) 0 0;
  z-index: 101;
  display: flex;
  flex-direction: column;
  transition: transform 0.32s var(--easing-decelerated);
  box-shadow: var(--shadow-modal);
  /* 防止键盘 / 滚动条引发面板挤压 */
  overflow: hidden;
}
.region-sheet.is-open {
  transform: translate(-50%, 0);
}

.region-sheet__grabber {
  width: 36px;
  height: 4px;
  background: var(--border-sub);
  border-radius: var(--r-pill);
  margin: 8px auto;
  flex-shrink: 0;
}

.region-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-5) var(--s-4);
  flex-shrink: 0;
  border-bottom: 1px solid var(--divider);
}
.region-sheet__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-pri);
}
.region-sheet__close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-sec);
  font-size: 22px;
  line-height: 1;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.region-sheet__close:active {
  background: var(--bg-surface-2);
}

.region-sheet__tabs {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.region-sheet__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-4) var(--s-3);
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  min-height: 56px;
}
.region-sheet__tab.is-active::after {
  content: '';
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 0;
  height: 2px;
  background: var(--brand-pri);
  border-radius: 1px;
}
.region-sheet__tab.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
.region-sheet__tab-label {
  font-size: var(--fs-caption);
  color: var(--text-sec);
  line-height: var(--lh-tight);
}
.region-sheet__tab.is-active .region-sheet__tab-label {
  color: var(--brand-pri);
}
.region-sheet__tab-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-pri);
  margin-top: 2px;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.region-sheet__tab.is-active .region-sheet__tab-value {
  color: var(--brand-pri);
  font-weight: var(--fw-bold);
}

.region-sheet__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-surface);
}
.region-sheet__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-bottom: 1px solid var(--divider);
  font-size: var(--fs-body);
  color: var(--text-pri);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing-standard);
  padding: 0 var(--s-7);
  text-align: center;
}
.region-sheet__item:active {
  background: var(--brand-pri-soft);
}
.region-sheet__item.is-active {
  background: var(--brand-pri-soft);
  color: var(--brand-pri);
  font-weight: var(--fw-bold);
}
.region-sheet__item-check {
  position: absolute;
  right: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-pri);
  font-weight: var(--fw-bold);
}

.region-sheet__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 160px;
  font-size: var(--fs-body);
  color: var(--text-tert);
  padding: var(--s-6) var(--s-5);
  text-align: center;
}