/* v9.css — 09 组件层：邀请码申请（B1：邀请码行双态按钮 + 发码/耗尽弹窗）+ 客服入口锚点（B2 浮标/面板已退役，见 v11.css）。
   参考稿：docs/前端参考/2026-07-17-09邀请码申请与客服入口与报告呈现修复/（登录页 v5 + 09 主页面交付说明）。
   tokens 无对应值的 v5 新色在此登记局部令牌（不散落写死）；CSP 禁 inline style，动态一律 class。 */

:root {
  /* —— 09 局部令牌（登录页交付说明 v5 §5）—— */
  --inv-well-bg: #F0FAF4;        /* 码井底 */
  --inv-well-line: #7ACB9C;      /* 码井虚线 */
  --inv-qr-bg: #F7F9FA;          /* 二维码占位底 */
  --inv-qr-line: #D6DBE0;        /* 二维码占位虚线 */
  --inv-mask: rgba(14, 14, 28, .42);  /* 弹窗遮罩 */
  --inv-copied-bg: #E7F5EC;      /* 已复制态底 */
  --inv-copied-ink: #0A9A45;     /* 已复制态字（= --green-d） */
}

/* ============ B1 · 注册页邀请码行（输入框 flex:1 + 申请按钮，间距 8） ============ */
.invite-row { display: flex; gap: 8px; align-items: stretch; }
.invite-row .input { flex: 1; min-width: 0; }
.invite-claim {
  flex: none; height: 44px; padding: 0 18px;
  border: 1px solid var(--green); border-radius: 14px; background: var(--bg);
  color: var(--green); font-size: 13.5px; font-weight: var(--fw-bold);
  cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.invite-claim:hover { background: var(--green-soft); }
.invite-claim.is-used { background: var(--green); color: #fff; }        /* 已申请 ·「已使用」（v5 双态） */
.invite-claim.is-used:hover { background: var(--green-d); }
.invite-claim.is-loading { opacity: .6; pointer-events: none; }

/* ============ B1 · 申请弹窗（遮罩 + 白卡 r20 max-w352；入场 dlgIn .24s） ============ */
.inv-dlg {
  position: fixed; inset: 0; z-index: 190;   /* lightbox(200) 之下：弹窗内二维码可再放大 */
  display: flex; align-items: center; justify-content: center; padding: var(--sp-7);
  background: var(--inv-mask); animation: inv-fade .2s ease both;
}
.inv-card {
  position: relative; width: 100%; max-width: 352px;
  background: var(--bg); border-radius: 20px; padding: 26px 22px 22px; text-align: center;
  box-shadow: var(--sh-pop); animation: inv-in .24s cubic-bezier(.2, .8, .3, 1) both;
}
.inv-x {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px;
  border: 0; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; border-radius: var(--r-sm);
}
.inv-x:hover { color: var(--ink); background: var(--soft); }
.inv-title { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--ink); }
.inv-sub { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-3); }
.inv-well {
  margin-top: 16px; height: 58px; border-radius: 14px;
  background: var(--inv-well-bg); border: 1.5px dashed var(--inv-well-line);
  display: grid; place-items: center;
  font-size: 24px; font-weight: var(--fw-extrabold); letter-spacing: .18em; text-indent: .18em;
  color: var(--green-d); font-variant-numeric: tabular-nums;
}
.inv-copy {
  margin-top: 14px; width: 100%; height: 40px; border: 0; border-radius: 12px;
  background: var(--green); color: #fff; font-size: 13.5px; font-weight: var(--fw-extrabold); cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.inv-copy:hover { background: var(--green-d); }
.inv-copy.is-copied { background: var(--inv-copied-bg); color: var(--inv-copied-ink); }   /* 1.6s 后 JS 还原 */
.inv-msg { margin-top: 8px; font-size: var(--fs-sm); color: var(--red); }   /* 弹窗内联提示（复制失败等） */
.inv-qr { margin: 16px auto 2px; width: 180px; height: 180px; }
.inv-qr img { width: 100%; height: 100%; object-fit: contain; border: 1px solid var(--line-2); border-radius: 16px; cursor: zoom-in; }
.inv-qr .sp-qr-empty { border-radius: 16px; }

@keyframes inv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes inv-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ============ B2 · 客服入口锚点（浮标+侧栏面板已随暗色迭代退役 → v11.css 二维码 dock/弹窗；
   本层保留：.support-root 锚点（v11 按视口档覆盖 bottom）+ .sp-qr-empty（邀请码弹窗与后台二维码分区复用） ============ */
.support-root { position: absolute; right: 20px; bottom: 20px; z-index: 20; }
.sp-qr-empty {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: var(--inv-qr-bg); border: 1.5px dashed var(--inv-qr-line); border-radius: 12px;
  color: var(--ink-3); font-size: var(--fs-sm);
}

/* ============ B3 · 后台「客服二维码」分区 ============ */
.sq-row { display: flex; gap: var(--sp-8); align-items: flex-start; flex-wrap: wrap; margin-top: var(--sp-5); }
.sq-preview { width: 180px; height: 180px; flex: none; }
.sq-preview .sq-img { width: 100%; height: 100%; object-fit: contain; border: 1px solid var(--line-2); border-radius: 12px; background: var(--bg); }
.sq-preview .sp-qr-empty { border-radius: 12px; }
.sq-meta { flex: 1; min-width: 240px; font-size: var(--fs-base); color: var(--ink-2); }
.sq-meta > p + p { margin-top: var(--sp-2); }
.sq-tip { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--ink-3); line-height: var(--lh-relaxed); }
.sq-form { display: flex; gap: var(--sp-5); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-5); }
.sq-form .admin-field { margin: 0; }

/* 窄屏（≤720，与 mobile.css 断点一致）：dock 抬到输入区（composer）之上，不遮发送键（09 浮标位沿用） */
@media (max-width: 720px) {
  .support-root { right: 14px; bottom: 196px; }   /* 375 实测 composer 顶缘 ~631，留 ≥12px 间距 */
}