/* 邀请有礼分享弹窗样式（单滚动区 + 大圆角修正版）
   本轮修正（针对「弹窗底部内容看不全」）：
   1. 高度口径只保留一份。上一版把外层 .v-dialog 的 overflow 改成 hidden 来消灭第二条滚动条，
      但外层仍保留 Vuetify 默认的高度上限（max-height: calc(100% - 48px)），
      于是同时存在两套互相打架的口径：外层可用高度 = 视口 − 48 − 上下内边距，
      卡片自身上限却是 视口 − 32。卡片高度一旦落在两者之间，超出部分就被外层静默裁掉，
      而外层不是滚动容器 → 弹窗底部（活动规则、我的邀请、推广计划）永远滚不出来。
      现在外层只承担「居中 + 四周留白」：不限高、不裁切；高度与滚动只由卡片说了算，
      因此既不会出现第二条滚动条，也不会再丢内容。
   2. 新增滚动提示：内容超出时在滚动区底部压一层极淡的白色渐隐（.is-scrollable 且未滚到底），
      提示「下面还有内容」，滚到底自动消失；滚动条本身依旧隐藏（外观口径不变）。
   3. 四个圆角一律由卡片本体承担并强制 24px，且卡片 overflow:hidden 兜住内部内容，
      滚动条不再压住圆角，任何屏幕、任何浏览器下四角都是大圆角。
   4. 其余视觉口径保持不变：实色白卡 + 实色细边、实色浅灰主视觉（无渐变、不锁宽）、
      浅底胶囊徽标、微渐变主按钮、底部圆角矩形按钮；
      身份差异提示（.invite-dialog-notice）：推广员身份不适用邀请奖励码力时的浅底圆角说明。
   作用域限定在 .invite-dialog-content / .invite-dialog-* 内，不影响其它弹窗与页面。 */

/* 1. 弹窗外层：只负责居中与四周留白，不设高度上限、不裁切内容（高度口径与滚动交给卡片） */
.v-dialog.invite-dialog-content { padding: 16px !important; margin: 0 !important; max-height: none !important; overflow: visible !important; background: transparent !important; border-radius: 24px !important; box-shadow: none !important; }
/* 遮罩层兜底：极端情况下（可视区比卡片更矮）仍可在遮罩层内滚动，且不显示滚动条，避免出现第二条滚动条 */
.v-dialog__content:has(> .v-dialog.invite-dialog-content) { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
.v-dialog__content:has(> .v-dialog.invite-dialog-content)::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }

/* 2. 卡片：实色白底 + 实色细边 + 24px 大圆角；高度跟随可视视口，圆角不被滚动条压平 */
.v-dialog.invite-dialog-content .v-card.invite-dialog-card {
  --invite-qr: 152px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
  border: 1px solid #ececf0;
  border-radius: 24px !important;
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(15, 23, 42, .34), 0 2px 8px -6px rgba(15, 23, 42, .12);
  overflow: hidden !important;
}
@supports (height: 100dvh) {
  .v-dialog.invite-dialog-content .v-card.invite-dialog-card { max-height: calc(100dvh - 32px); }
}

/* 3. 唯一滚动容器：隐藏滚动条外观，滚轮 / 手指滑动仍可滚动全部内容 */
.invite-dialog-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.invite-dialog-scroll::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none; }
/* 滚动提示：内容超出且未滚到底时，底部压一层极淡白色渐隐，明确「下面还有内容」；
   滚到底（.is-at-end）自动消失，避免最后一屏看起来被压白。提示层不接收点击。 */
.invite-dialog-scroll.is-scrollable:not(.is-at-end)::after { content: ''; position: sticky; bottom: 0; display: block; height: 30px; margin-top: -30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 78%); pointer-events: none; }

.invite-dialog-head { padding: 16px 16px 0; }

/* 主视觉：实色浅灰块，无渐变、无艺术图形；宽度自适应，不再锁定比例 */
.invite-dialog-hero { position: relative; padding: 22px 20px 24px; border-radius: 20px; background: #f5f5f6; }
.invite-dialog-hero-inner { position: relative; z-index: 2; }
.invite-dialog-close { position: absolute !important; top: 10px; right: 10px; z-index: 3; color: #71717a !important; }

/* 浅底胶囊标签：淡色底衬托深色文字，取代高饱和色块 */
.invite-dialog-badge { display: inline-block; padding: 7px 15px; border-radius: 999px; background: #eeeffe; color: #4338ca; font-size: 13.5px; font-weight: 700; box-shadow: inset 0 0 0 1px #dfe2fd; }
.invite-dialog-title { margin: 14px 0 8px; font-size: 34px; font-weight: 800; line-height: 1.15; letter-spacing: -.6px; color: #18181b; }
/* 副标题单行展示：配合顶部区块不锁宽度，避免末尾单字换行 */
.invite-dialog-sub { margin: 0; font-size: 17px; font-weight: 600; color: #8b90a3; white-space: nowrap; }

/* 内容区：流式块布局（手机端区块顺序对调依赖它不是滚动容器） */
.invite-dialog-body { display: flex; flex-direction: column; padding: 18px 24px 6px; }
.invite-dialog-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 36px 10px; text-align: center; }

.invite-dialog-steps-title { font-size: 15px; font-weight: 600; color: #71717a; }
.invite-dialog-steps { margin: 12px 0 0; padding: 0; list-style: none; }
.invite-dialog-step { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 15.5px; line-height: 1.5; font-weight: 500; color: #18181b; }
.invite-dialog-step-badge { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 28px; height: 28px; margin-top: 1px; border-radius: 10px; background: #efeff1; color: #18181b; }
.invite-dialog-step-text { min-width: 0; }
.invite-dialog-progress { margin: 4px 0 14px; font-size: 14px; color: #8b90a3; }
/* 身份差异提示：推广员邀请不发放码力奖励时的浅底圆角说明 */
.invite-dialog-progress.invite-dialog-notice { margin: 0 0 14px; padding: 8px 12px; border-radius: 12px; background: #eef2ff; color: #4338ca; font-weight: 600; box-shadow: inset 0 0 0 1px #dfe2fd; }

.invite-dialog-share { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 20px; background: #f6f6f7; box-shadow: 0 16px 36px -30px rgba(15, 23, 42, .7); }
.invite-dialog-share-qr { flex: 0 0 auto; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 12px 28px -18px rgba(15, 23, 42, .4); }
.invite-dialog-qr-box { display: flex; align-items: center; justify-content: center; width: var(--invite-qr); height: var(--invite-qr); }
.invite-dialog-qr-box canvas, .invite-dialog-qr-box img { display: block; width: 100% !important; height: 100% !important; border-radius: 8px; }
.invite-dialog-share-side { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.invite-dialog-link-row { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e4e4e7; }
.invite-dialog-link-icon { color: #a1a1aa !important; }
.invite-dialog-link { min-width: 0; font-size: 12.5px; line-height: 1.6; color: #3f3f46; word-break: break-all; }

/* 主按钮：同色系微渐变 + 1px 内描边高光 */
.invite-dialog-cta.v-btn { min-height: 46px !important; border-radius: 14px !important; background: linear-gradient(180deg, #2c2c33 0%, #15151a 100%) !important; color: #fff !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: .2px; text-transform: none !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 16px 30px -18px rgba(24, 24, 27, .9); }
.invite-dialog-cta.v-btn:hover { background: linear-gradient(180deg, #38383f 0%, #1c1c22 100%) !important; }
.invite-dialog-cta.v-btn--disabled { background: linear-gradient(180deg, #dcdce1 0%, #cdcdd4 100%) !important; box-shadow: none !important; }
.invite-dialog-qr-tip { margin-top: 10px; font-size: 12px; line-height: 1.6; color: #8b90a3; text-align: center; }
.invite-dialog-qr-tip--warn { color: #b45309; }

.invite-dialog-code-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 10px 10px 14px; border-radius: 16px; background: #f6f6f7; box-shadow: inset 0 0 0 1px #ececf0; }
.invite-dialog-label { font-size: 12.5px; color: #8b90a3; }
.invite-dialog-code { flex: 1; min-width: 0; font-size: 19px; font-weight: 800; letter-spacing: .12em; color: #18181b; }
.invite-dialog-text-btn.v-btn { font-weight: 600 !important; letter-spacing: .2px; text-transform: none !important; color: #3f3f46 !important; }
.invite-dialog-actions { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 6px; }

/* 自动复制被浏览器限制时的手动复制区：内容默认全选，用户按 Ctrl+C / 长按即可拿走 */
.invite-dialog-manual { margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; background: #fffbeb; box-shadow: inset 0 0 0 1px #fcd34d; }
.invite-dialog-manual-tip { margin-bottom: 8px; font-size: 12.5px; line-height: 1.6; color: #b45309; }
.invite-dialog-manual input { font-size: 13px; color: #4b5563; }

.invite-dialog-foot { padding: 6px 24px 18px; text-align: center; }
.invite-dialog-terms { border: 0; padding: 6px 2px; background: transparent; font-size: 13.5px; color: #52525b; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.invite-dialog-terms:hover { color: #18181b; }
.invite-dialog-terms:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; border-radius: 6px; }
.invite-dialog-rules { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: #f6f6f7; text-align: left; }
.invite-dialog-rules ul { margin: 0; padding-left: 16px; }
.invite-dialog-rules li { font-size: 12.5px; line-height: 1.85; color: #52525b; }
/* 规则末条留出一点底部间距，展开后与「我的邀请 / 推广计划」按钮之间不挤在一起 */
.invite-dialog-rules li:last-child { margin-bottom: 2px; }

/* 底部入口：圆角矩形按钮（浅底 + 实色细边），取代原文字链 */
.invite-dialog-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; }
.invite-dialog-foot-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 22px; border: 1px solid #e4e4e7; border-radius: 14px; background: #f7f7f8; color: #3f3f46; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.invite-dialog-foot-btn:hover { background: #fff; border-color: #d4d4d8; color: #18181b; }
.invite-dialog-foot-btn:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }

/* 手机端：卡片居中 + 四周留白 + 四角同样 24px 圆角；参与说明与分享区顺序对调，
   让二维码与「复制链接」在首屏完整可见；高度跟随可视视口，内容内部滚动且不显示滚动条。 */
@media (max-width: 600px) {
  .v-dialog.invite-dialog-content { padding: 12px !important; }
  .v-dialog.invite-dialog-content .v-card.invite-dialog-card { --invite-qr: 112px; max-height: calc(100vh - 24px); }
  @supports (height: 100dvh) {
    .v-dialog.invite-dialog-content .v-card.invite-dialog-card { max-height: calc(100dvh - 24px); }
  }

  .invite-dialog-head { padding: 12px 12px 0; }
  .invite-dialog-hero { padding: 18px 16px 20px; border-radius: 18px; }
  .invite-dialog-title { font-size: 24px; letter-spacing: -.3px; }
  .invite-dialog-sub { font-size: 13.5px; }
  .invite-dialog-body { padding: 16px 14px 4px; }
  .invite-dialog-how { order: 2; }
  .invite-dialog-share-block { order: 1; }
  .invite-dialog-share { padding: 14px; gap: 12px; border-radius: 18px; }
  .invite-dialog-share-qr { padding: 8px; border-radius: 14px; }
  .invite-dialog-cta.v-btn { min-height: 44px !important; font-size: 14.5px !important; }
  .invite-dialog-code { font-size: 17px; }
  .invite-dialog-step { font-size: 15px; margin-bottom: 12px; }
  .invite-dialog-progress { margin-bottom: 14px; }
  .invite-dialog-progress.invite-dialog-notice { padding: 8px 10px; }
  .invite-dialog-foot { padding: 4px 14px 16px; }
  .invite-dialog-foot-btn { flex: 1 1 0; min-width: 0; padding: 0 14px; }
  /* 手机端渐隐提示略矮，避免遮住最后一屏的文字 */
  .invite-dialog-scroll.is-scrollable:not(.is-at-end)::after { height: 24px; margin-top: -24px; }
}

@media (max-width: 380px) {
  .v-dialog.invite-dialog-content .v-card.invite-dialog-card { --invite-qr: 96px; }
  .invite-dialog-title { font-size: 22px; }
}
@media (max-width: 340px) {
  .invite-dialog-sub { font-size: 12.5px; }
}
/* 窗口偏矮时压缩留白与标题，减少滚动量；滚动本身由卡片内部滚动区承担，底部内容依旧可达 */
@media (max-height: 720px) {
  .invite-dialog-hero { padding: 16px 18px 18px; }
  .invite-dialog-title { font-size: 26px; }
  .invite-dialog-step { font-size: 15px; margin-bottom: 10px; }
  .invite-dialog-body { padding: 14px 22px 4px; }
  .invite-dialog-foot { padding-bottom: 14px; }
  .invite-dialog-rules li { line-height: 1.75; }
}
@media (prefers-reduced-motion: reduce) {
  .invite-dialog-cta.v-btn { box-shadow: none; }
}