/* ============================================================
   账号弹窗（点顶栏头像弹出）
   2026-10-09 重做：老板要「简洁大气、没必要的信息不出现」。
   2026-10-09 再改：老板要**横向**圆角矩形 —— 左宣传 / 右表单，
     且不许为了看全内容上下滑动。
   ============================================================

   ★ 结构决定能不能退出登录（这是重做的头号原因）：
     .adlg__box  是 flex **行**，**整体滚动被关掉**（overflow:hidden）；
     .adlg__main 右栏是 flex 列（头 / 内容 / 底栏）；
     .adlg__bd   内容区自己滚（flex:1 + min-height:0）；
     .adlg__acts 操作条 flex:none 常驻在底部，**永远在可视区里**。
     上一版把「修改密码 / 退出登录」当普通内容塞在 .adlg__bd 末尾，
     内容一长就被顶到可视区外面 —— 矮窗口下表现就是「点了头像没有退出登录」。
     ⚠ 别再把操作按钮放回内容流。回归断言见 smoke.mjs「账号弹窗」一组。

   ★ 横向布局下"不滚动"怎么做到（老板抱怨的原文是"还要上下滑动"）：
     横排把**宽度**让给了右栏 —— 表单标签变窄、文字换行变少，
     注册屏从"竖版挤成一条"变成"右侧一屏放得下"（原来要滚 3 屏，现在 1 屏）。
     配套三件事，缺一件就会退回滚动：
       ① .adlg__box 用 flex **行**，左栏 flex:none 定宽，右栏 flex:1；
       ② 左栏内容**只读**且高度自洽，永不撑高弹窗；
       ③ 内容区仍保留 overflow-y:auto 作为**兜底**（超矮窗口仍能滚到退出登录，
          而不是把按钮彻底藏起来 —— 这两件事不能二选一）。
   ============================================================ */

.adlg { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.adlg[hidden] { display: none; }
.adlg__ovl {
  position: absolute; inset: 0;
  background: rgba(16, 32, 27, 0.44);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity var(--t-base);
}
.adlg.is-on .adlg__ovl { opacity: 1; }

.adlg__box {
  position: relative; width: 100%; max-width: 1040px;
  /* 🔴 尺寸是「内容决定」的（2026-10-09 老板第二次强调）：
     原话「右侧部分是不能放置太多内容的，不允许滚动的。你完全可以加大左侧的宽度」。
     做法就是**把弹窗整体加宽、左栏也加宽**，让右侧拿到足够的一屏空间 ——
     而不是靠缩字号或让用户滚。右栏可用宽 ≈ 1040 − 380 = 660px。
     高度封顶仍在视口内，操作条永远露在外面。 */
  max-height: min(660px, calc(100vh - 40px));
  display: flex; flex-direction: row;   /* ← 横排：左宣传 + 右表单 */
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--ink-150);
  border-radius: var(--r-xl);
  box-shadow: 0 20px 60px rgba(10, 46, 39, 0.22), 0 2px 8px rgba(10, 46, 39, 0.08);
  opacity: 0; transform: translateY(12px) scale(0.985);
  transition: opacity var(--t-base), transform var(--t-base);
}
.adlg.is-on .adlg__box { opacity: 1; transform: none; }

/* ---------- 左栏：宣传与权益（只读，永不撑高弹窗） ---------- */
.adlg__side {
  flex: none; width: 380px;   /* 加宽到 380：老板要求把空间让给左栏，右栏才放得下不滚 */
  display: flex; flex-direction: column;
  padding: var(--sp-7) var(--sp-6);
  background:
    radial-gradient(120% 80% at 12% 8%, rgba(255, 255, 255, 0.13), transparent 62%),
    linear-gradient(158deg, var(--brand-800), var(--brand-600) 78%, var(--brand-500));
  color: var(--white);
}
.adlg__side__brand { display: flex; align-items: center; gap: 10px; }
/* 🔴 圆角 22%＝图标自身 rx 28/128；size 必须与下面的 36px 一致，否则被裁一圈。 */
.adlg__mark {
  width: 36px; height: 36px; flex: none; display: block; overflow: hidden;
  border-radius: 22%; line-height: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
}
.adlg__mark svg { display: block; }
.adlg__side__pitch { margin-top: var(--sp-8); }
.adlg__side__lead {
  margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight); letter-spacing: 0.02em; color: var(--white);
}
.adlg__side__feats { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.adlg__side__feats li {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.9); line-height: var(--lh-normal);
}
.adlg__side__feats svg { flex: none; color: rgba(255, 255, 255, 0.72); }
.adlg__side__foot {
  margin-top: auto; padding-top: var(--sp-6);
  font-size: var(--fs-2xs); color: rgba(255, 255, 255, 0.62); line-height: var(--lh-normal);
}

/* 左栏的「注册即送 1 张安评券」（2026-10-09 老板定：从右侧表单挪到左栏）。
   为什么挪：赠券是**平台给新人的好处**，属于"为什么要来这个平台"的一部分，
   和左侧那四条权益是同一类信息；摆在右侧表单上方会打断"手机号→验证码→密码"
   的填写节奏，还让人误以为要先领券才能注册。
   2026-10-09 二次定：「要高亮、起宣传作用」—— 深绿底上放一块暖金卡：
   整栏其余部分都是绿 / 白字，只有这一块换成亮金底 + 金色描边 + 外发光，
   视线第一眼就落上去；文字随之转深色（金底上用白字会糊）。 */
.adlg__side__gift {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #FFFAF0, var(--accent-100));
  border: 1px solid var(--accent-500);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 12px 26px -12px rgba(0, 0, 0, 0.5);
}
.adlg__side__gift__k {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-2xs); color: var(--accent-700);
}
.adlg__side__gift__v {
  display: block; margin-top: 2px;
  font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--brand-800);
}
.adlg__side__gift__f {
  display: block; margin-top: 4px;
  font-size: var(--fs-2xs); color: var(--ink-600); line-height: var(--lh-normal);
}

/* ---------- 右栏：头 + 内容 + 常驻操作条（纵向 flex 列） ---------- */
.adlg__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

/* 头：只留品牌名 + 关闭（副标题属于「没必要的信息」） */
.adlg__hd {
  flex: none;
  display: flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 var(--sp-6);
  border-bottom: 1px solid var(--ink-100);
  background: var(--white);
  color: var(--ink-900);
}
/* 左栏已有大字品牌名，右侧只留一个弱化的同名 —— 窄屏掉左栏时它就是唯一的品牌标识 */
.adlg__name--sm {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  letter-spacing: 0.02em; color: var(--ink-500);
}
.adlg__name { font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: 0.02em; }
.adlg__x {
  margin-left: auto; width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-400); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.adlg__x:hover { background: var(--ink-100); color: var(--ink-900); }

/* ---------- 内容区：唯一可以滚的地方（超矮窗口的兜底） ---------- */
.adlg__bd {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: var(--sp-6) var(--sp-7) var(--sp-5);
  overscroll-behavior: contain;
}
.adlg__h { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--ink-900); }

/* ---------- 操作条：常驻，不随内容滚走 ---------- */
.adlg__acts {
  flex: none;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-7);
  border-top: 1px solid var(--ink-150);
  background: var(--ink-50);
}
.adlg__acts[hidden] { display: none; }

/* ---------- 表单 ---------- */
.adlg__form { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.adlg__f { display: block; }
.adlg__f__b {
  display: flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 14px;
  background: var(--white); border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.adlg__f__b > svg { color: var(--ink-400); flex: none; }
.adlg__f__b:focus-within { border-color: var(--brand-500); box-shadow: var(--sh-focus); }
.adlg__f__b:focus-within > svg { color: var(--brand-500); }
.adlg__f__b input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
  font-family: inherit; font-size: var(--fs-base); color: var(--ink-900);
}
.adlg__f__b input::placeholder { color: var(--ink-300); }
.adlg__f__b input:disabled { color: var(--ink-500); }

/* 只读输入框（被邀请人的邀请码）。
   🔴 关键：视觉上必须和旁边手机号那栏**一模一样** —— 同样的边框、同样高度、
      同样的字号。唯一区别是文字略深一点（因为它已经有值了）。
      原来用高亮卡片显示，老板明确否掉了："我不希望这样"——
      高亮等于在视觉上喊"这里有特殊情况"，用户会以为漏填了什么、
      或者以为这栏能改。无感就是无感，别加戏。 */
.adlg__f__b.is-locked {
  background: var(--ink-50);
  border-style: dashed;
  border-color: var(--ink-200);
}
.adlg__f__b.is-locked input {
  color: var(--ink-600);
  cursor: default;
  /* readonly 的 input 默认就是不可编辑，这里只是让鼠标指针如实反映 */
}
.adlg__f__b.is-locked input:focus { outline: none; }

/* 密码明文开关（眼睛） */
.adlg__eye {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px; margin-right: -6px;
  border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--ink-400);
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}
.adlg__eye:hover { color: var(--brand-600); background: var(--brand-50); }
.adlg__eye:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.adlg__send {
  flex: none; height: 32px; padding: 0 12px;
  border: 1px solid var(--brand-100); background: var(--brand-50);
  border-radius: var(--r-md); cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--brand-700);
  font-variant-numeric: tabular-nums;
  transition: background var(--t-fast);
}
.adlg__send:hover:not(:disabled) { background: var(--brand-100); }
.adlg__send:disabled { color: var(--ink-400); background: var(--ink-50); border-color: var(--ink-150); cursor: default; }

.adlg__go {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  height: 46px; margin-top: var(--sp-2);
  border: 0; border-radius: var(--r-lg); cursor: pointer;
  background: var(--brand-700); color: var(--white);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: 0.02em;
  transition: background var(--t-fast);
}
.adlg__go:hover:not(:disabled) { background: var(--brand-600); }
.adlg__go:disabled { background: var(--ink-300); cursor: default; }

/* 底部一行切换（登录 ↔ 注册），不做卡片、不加框 */
.adlg__alt {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--ink-500);
}
.adlg__alt button {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--brand-700);
}
.adlg__alt button:hover { text-decoration: underline; }

/* ---------- 注册页的专属邀请码 ---------- */
.adlg__iv {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--sp-5); padding: 11px 14px;
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg);
}
.adlg__iv__k {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); color: var(--brand-700);
}
.adlg__iv__k svg { color: var(--brand-500); }
.adlg__iv__v {
  margin-left: auto;
  font-family: var(--font-mono); font-size: var(--fs-lg); font-weight: var(--fw-bold);
  letter-spacing: 2px; color: var(--brand-800);
}
.adlg__iv__r {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--brand-600); cursor: pointer; transition: background var(--t-fast);
}
.adlg__iv__r:hover { background: var(--brand-100); }
/* 被邀请人只读态：与服务端记下的邀请人绑定，**不给手填**。
   视觉上要比可填的输入框更"实"，让用户一眼看出这一格不用他管。 */
.adlg__iv--locked { background: var(--brand-100); border-color: var(--brand-400); }
.adlg__iv__v--ro { font-size: var(--fs-md); color: var(--brand-700); }
.adlg__iv__h { margin: 6px 2px 0; font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }
.adlg__dev {
  margin: -4px 2px 0; font-size: var(--fs-xs); color: var(--warn-700); line-height: 1.5;
}
.adlg__dev b { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: 1px; }

/* ---------- 提示条 ---------- */
.adlg__notice {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px; margin-top: var(--sp-4);
  border-radius: var(--r-md); font-size: var(--fs-xs); line-height: 1.55;
}
.adlg__notice svg { flex: none; margin-top: 1px; }
.adlg__notice--ok { background: var(--ok-100); color: var(--ok-700); }
.adlg__notice--warn { background: var(--warn-100); color: var(--warn-700); }
.adlg__notice--danger { background: var(--danger-100); color: var(--danger-700); }
.adlg__notice--info { background: var(--info-100); color: var(--info-700); }

/* ---------- 账号中心 ---------- */
.adlg__me { display: flex; flex-direction: column; align-items: center; text-align: center; }
.adlg__av {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--r-full);
  background: linear-gradient(150deg, var(--brand-700), var(--brand-500));
  color: var(--white); font-size: var(--fs-xl); font-weight: var(--fw-semibold);
  box-shadow: 0 6px 16px rgba(15, 76, 63, 0.22);
}
.adlg__av--warn { background: linear-gradient(150deg, var(--warn-700), var(--warn-500)); }
.adlg__nm { margin-top: var(--sp-3); font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--ink-900); }
.adlg__sub {
  margin-top: 3px; max-width: 100%; font-size: var(--fs-xs); color: var(--ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adlg__pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: var(--sp-3); }
.adlg__pill {
  padding: 3px 10px; border-radius: var(--r-full);
  background: var(--ink-100); color: var(--ink-600);
  font-size: var(--fs-2xs); font-weight: var(--fw-medium);
}
.adlg__pill--adm { background: var(--accent-100); color: var(--accent-700); }
.adlg__pill--mem { background: var(--brand-50); color: var(--brand-700); }
.adlg__pill--vip { background: var(--brand-100); color: var(--brand-800); }
.adlg__pill--free { background: var(--ink-100); color: var(--ink-500); }

/* 邀请码卡：账号中心里最该被看见的一块（分享即得额度） */
.adlg__inv {
  margin-top: var(--sp-5); padding: var(--sp-4) var(--sp-5);
  background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg);
}
.adlg__inv__k {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); color: var(--brand-700);
}
.adlg__inv__k svg { color: var(--brand-500); }
.adlg__inv__row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.adlg__inv__v {
  font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--fw-bold);
  letter-spacing: 3px; color: var(--brand-900);
}
.adlg__inv__c {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--brand-100); background: var(--white);
  border-radius: var(--r-md); cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--brand-700);
  transition: background var(--t-fast);
}
.adlg__inv__c:hover { background: var(--brand-100); }
.adlg__inv__f { margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-600); line-height: 1.5; }
.adlg__inv__f b { color: var(--brand-700); }

/* 升级入口（2026-10-09 从内容流移到常驻操作条）——
   与「修改密码 / 退出登录」同一行：金底靠左、占 1.4 份宽度，视觉上就是这一条里的主行动。 */
.adlg__up2 {
  flex: 1.4 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; border: 0; border-radius: var(--r-lg); cursor: pointer;
  background: linear-gradient(120deg, var(--accent-500), var(--accent-600));
  color: #2b2410; font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: filter var(--t-fast);
}
.adlg__up2:hover:not(:disabled) { filter: brightness(1.06); }
.adlg__up2:disabled { opacity: .6; cursor: default; }

.adlg__blk {
  margin: var(--sp-5) 0 0; font-size: var(--fs-sm); color: var(--danger-700); line-height: 1.7;
}

/* ---------- 操作条里的两个按钮 ---------- */
.adlg__ghost,
.adlg__out {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 42px; border-radius: var(--r-lg); cursor: pointer;
  font-family: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.adlg__ghost {
  border: 1px solid var(--ink-200); background: var(--white); color: var(--ink-700);
}
.adlg__ghost:hover:not(:disabled) { border-color: var(--ink-400); color: var(--ink-900); }
.adlg__out {
  border: 1px solid var(--danger-100); background: var(--white); color: var(--danger-600);
}
.adlg__out:hover:not(:disabled) { background: var(--danger-100); border-color: var(--danger-500); }
.adlg__ghost:disabled, .adlg__out:disabled { color: var(--ink-400); cursor: default; }

/* ============================================================
   账号中心 · 分区折叠（2026-10-09 老板报「内容太多、阅读压力大」）
   ------------------------------------------------------------
   做法不是"删内容"（券明细、次数徽章、邀请链接都是用户真需要的），
   而是**默认收起、点标题展开** —— 首屏只留身份 + 三个入口 + 开通会员。
   🔴 不做展开动画：动画会让弹窗高度跳变，老板明确反感页面抖动。
   ============================================================ */
.adlg__sec { margin-top: var(--sp-3); border: var(--border); border-radius: var(--r-lg); background: var(--white); }
.adlg__sec__hd {
  width: 100%;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 11px var(--sp-4);
  border: 0; border-radius: var(--r-lg); background: transparent; cursor: pointer;
  font-family: inherit; color: var(--ink-700); text-align: left;
  transition: background var(--t-fast);
}
.adlg__sec__hd:hover { background: var(--ink-50); }
.adlg__sec__t {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.adlg__sec__t svg { color: var(--brand-500); }
/* 右侧数字用 tabular-nums，避免"1 张→2 张"时数字左右跳 */
.adlg__sec__b { margin-left: auto; display: flex; align-items: center; }
.adlg__sec__b .tk__n { margin: 0; font-size: var(--fs-sm); }
.adlg__sec__hd > svg:last-child { color: var(--ink-400); transition: transform var(--t-fast); }
.adlg__sec.is-open .adlg__sec__hd > svg:last-child { transform: rotate(180deg); }
.adlg__sec__bd { padding: 0 var(--sp-4) var(--sp-4); }
.adlg__sec__bd[hidden] { display: none; }
/* 展开后内部各块自己补上间距（原来靠块级 margin 撑开，折叠后那份 margin 会顶到标题上） */
.adlg__sec__bd > .tk,
.adlg__sec__bd > .qb__list,
.adlg__sec__bd > .adlg__inv { margin-top: var(--sp-2); }
.adlg__sec__bd > .adlg__inv { padding: var(--sp-3) var(--sp-4); }

/* ============================================================
   安评券 + 次数徽章（2026-10-09 安评券机制）
   为什么在这里而不是 members.css：这两块只在**账号中心弹窗**里出现，
   放进会员管理页的样式表会让两个语义缠在一起（改一处崩另一处）。
   ============================================================ */

/* --- 次数徽章（定稿第一节）---
   四态：充足灰 / 剩1黄 / 用尽红 / 不限。
   🔴 「用尽」这条是铁律：按钮必须同时置灰禁用，不许点了才报错。 */
.qb {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.qb--ok { background: var(--ink-100); color: var(--ink-600); }
.qb--low { background: var(--warn-100); color: var(--warn-700); }
.qb--out { background: var(--danger-100); color: var(--danger-700); }
.qb--unlimit { background: var(--brand-50); color: var(--brand-700); }

/* 账号中心里的徽章汇总列表 */
.qb__t {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.qb__list { list-style: none; margin: 0; padding: 0; }
.qb__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: 7px 0; border-bottom: 1px solid var(--ink-100);
}
.qb__row:last-child { border-bottom: 0; }
.qb__nm { font-size: var(--fs-xs); color: var(--ink-700); }

/* --- 安评券卡片 --- */
.tk {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  border: var(--border);
  border-radius: var(--r-md);
  background: var(--ink-50);
}
.tk__hd { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.tk__t { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.tk__n { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--brand-700); font-variant-numeric: tabular-nums; }
.tk__n.is-warn { color: var(--warn-700); }
.tk__sub { margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--ink-500); line-height: var(--lh-normal); }
.tk__warn {
  display: flex; align-items: center; gap: 6px;
  margin-top: var(--sp-2); padding: 5px 8px;
  border-radius: var(--r-sm);
  background: var(--warn-100); color: var(--warn-700);
  font-size: var(--fs-2xs);
}
.tk__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; }
.tk__row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--sp-2); align-items: center;
  padding: 5px 0; border-bottom: 1px dashed var(--ink-100);
  font-size: var(--fs-2xs);
}
.tk__row:last-child { border-bottom: 0; }
.tk__no { font-family: var(--font-mono); color: var(--ink-600); overflow-wrap: anywhere; }
.tk__src { color: var(--ink-500); white-space: nowrap; }
.tk__exp { color: var(--ink-500); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk__st { padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.tk__st--unused { background: var(--ok-100); color: var(--ok-700); }
.tk__st--used { background: var(--ink-100); color: var(--ink-500); }
.tk__st--expired { background: var(--danger-100); color: var(--danger-700); }
.tk__empty { margin-top: var(--sp-3); font-size: var(--fs-2xs); color: var(--ink-400); }
.tk__buy { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: var(--border); }
.tk__agree { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-2xs); color: var(--ink-600); line-height: var(--lh-normal); cursor: pointer; }
.tk__agree input { margin-top: 3px; }
.tk__prices { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.tk__p {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border: var(--border); border-radius: var(--r-sm);
  background: var(--ink-100); color: var(--ink-700);
  font-size: var(--fs-2xs); cursor: pointer;
}
.tk__p b { font-size: var(--fs-sm); color: var(--brand-700); font-variant-numeric: tabular-nums; }
.tk__p:hover { border-color: var(--brand-500); background: var(--brand-50); }
.tk__p.is-cur { border-color: var(--brand-500); background: var(--brand-50); }
.tk__tip { margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--ink-400); line-height: var(--lh-normal); }

/* 邀请链接要比码长得多，允许换行也不许撑破弹窗 */
.adlg__inv__v--link { font-family: var(--font-mono); font-size: var(--fs-2xs); word-break: break-all; }

/* ============================================================
   窄屏降级：左栏是"锦上添花"，表单一被压扁就是本末倒置
   ------------------------------------------------------------
   阈值 680px 的由来：左栏 268 + 右栏最小可用 ~340 + 弹窗自身留白 ~40 ≈ 650。
   取 680 留一点余量。低于此值直接隐藏左栏，.adlg__box 退回单列
   （右栏本来就是 flex 列，隐藏左栏后它自动撑满，不需要另写一套布局）。
   🔴 隐藏左栏后 .adlg__name--sm（右侧那个弱化品牌名）成为唯一品牌标识，
      所以它在窄屏下要重新变实 —— 见下方规则。
   ============================================================ */
/* 左栏加宽到 380 之后，中窄屏要**更早**把左栏收起来 —— 否则右栏被挤窄，
   内容放不下又开始滚，等于白改。这一段必须排在 680px 那段之前（后写的规则覆盖前面的）。 */
@media (max-width: 980px) {
  .adlg__box { max-width: 620px; }
  .adlg__side { display: none; }
  .adlg__name--sm {
    font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ink-900);
  }
}
@media (max-width: 680px) {
  .adlg { padding: 12px; }
  .adlg__box { max-width: 480px; max-height: min(620px, calc(100vh - 24px)); }
  .adlg__side { display: none; }
  .adlg__name--sm {
    font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--ink-900);
  }
  .adlg__bd { padding: var(--sp-5) var(--sp-5) var(--sp-4); }
  .adlg__acts { padding: var(--sp-3) var(--sp-5); }
}

/* 矮窗口（横向空间够但高度不够，如笔记本 768px 高 + 浏览器占位）：
   左栏内容按比例缩短，避免它反过来把弹窗顶高。 */
@media (max-height: 620px) {
  .adlg__side__pitch { margin-top: var(--sp-6); }
  .adlg__side__feats { gap: var(--sp-3); margin-top: var(--sp-4); }
  .adlg__side__feats li:nth-child(n + 4) { display: none; }
  .adlg__side__foot { padding-top: var(--sp-4); }
}

/* ============================================================
   个人中心（2026-10-09 老板定：点头像弹出的就是个人中心）
   ------------------------------------------------------------
   三条要求，各对应一段：
     ① 展示**个人权益** —— .pc__sec / .pc__perks
     ② 会员、尊享要**凸显身份**、与普通用户明显不同 —— .pc__head--vip / --svip
     ③ 「我的邀请链接」必须**明显、不折叠** —— .pc__invite（自带强调底色）
   配色只用令牌：免费=中性、会员=暖金铜（accent）、尊享=深底描金。
   ============================================================ */

.pc__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  border: var(--border);
  background: var(--white);
}
.pc__av {
  flex: none;
  width: 46px; height: 46px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  background: var(--ink-100); color: var(--ink-600);
}
.pc__who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pc__nm {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--ink-900);
}
.pc__acct {
  font-size: var(--fs-xs); color: var(--ink-500);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.pc__tier {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  padding: 2px var(--sp-2); border-radius: var(--r-full);
  background: var(--ink-100); color: var(--ink-600);
}

/* 免费档：中性 */
.pc__head--free .pc__av { background: var(--ink-100); color: var(--ink-600); }
/* 会员：暖金铜 —— 一眼看出"付费身份" */
.pc__head--vip {
  background: linear-gradient(135deg, var(--accent-100), #FFFDF7 62%);
  border-color: var(--accent-300);
}
.pc__head--vip .pc__av { background: linear-gradient(150deg, var(--accent-500), var(--accent-700)); color: var(--white); }
.pc__head--vip .pc__tier { background: var(--accent-500); color: var(--white); }
/* 尊享：深底描金 —— 与会员再拉开一档 */
.pc__head--svip {
  background: linear-gradient(135deg, var(--brand-900), var(--ink-900) 70%);
  border-color: var(--accent-500);
}
.pc__head--svip .pc__nm { color: var(--white); }
.pc__head--svip .pc__acct { color: var(--accent-300); }
.pc__head--svip .pc__av { background: linear-gradient(150deg, var(--accent-300), var(--accent-600)); color: var(--brand-900); }
.pc__head--svip .pc__tier { background: var(--accent-300); color: var(--brand-900); }
.pc__head--svip .adlg__pill--adm,
.pc__head--svip .adlg__pill--mem { background: rgba(255, 255, 255, .14); color: var(--white); }

/* 三格事实条：有效期 / 设备 / 券 */
/* 三格事实条现在**长在身份卡里**（右侧），不再是独立一块 —— 省一条的高度。
   min-width:0 + flex 允许它在窄屏被压缩而不会把身份卡顶破。 */
.pc__facts {
  margin-left: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
  flex: 1 1 auto; min-width: 0; max-width: 60%;
}
.pc__fact {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border: var(--border-soft); border-radius: var(--r-md);
  background: var(--ink-50); min-width: 0;
}
.pc__fact i { font-style: normal; font-size: var(--fs-2xs); color: var(--ink-400); }
.pc__fact b {
  font-size: var(--fs-xs); color: var(--ink-800); font-weight: var(--fw-semibold);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pc__fact.is-warn b { color: var(--warn-700); }

/* 我的权益 */
.pc__sec {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: var(--border); border-radius: var(--r-lg); background: var(--white);
}
.pc__sec__t {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-800);
}
.pc__sec__t svg { color: var(--brand-500); }
.pc__sec__t em { margin-left: auto; font-style: normal; font-size: var(--fs-2xs); color: var(--ink-400); }
.pc__perks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px var(--sp-4); margin-top: var(--sp-3); padding: 0; list-style: none;
}
.pc__perks li {
  display: flex; align-items: flex-start; gap: 5px;
  font-size: var(--fs-xs); color: var(--ink-600); line-height: 1.5; min-width: 0;
}
.pc__perks li svg { flex: none; margin-top: 2px; color: var(--ok-600); }
.pc__hint {
  display: flex; align-items: flex-start; gap: 5px; margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px dashed var(--line-200);
  font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.6;
}

/* 我的邀请链接：常显 + 强调（老板：要明显，不能折叠） */
.pc__invite {
  margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--brand-400); border-radius: var(--r-lg);
  background: var(--brand-50);
}
.pc__invite__t {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand-800);
}
.pc__invite__t svg { color: var(--brand-600); }
.pc__invite__t .qb { margin-left: auto; }
.pc__invite__sub { margin-top: 4px; font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.5; }
.pc__invite .adlg__inv { margin-top: var(--sp-2); }

/* 窄屏：权益改单列，事实条改两列 */
@media (max-width: 640px) {
  .pc__perks { grid-template-columns: minmax(0, 1fr); }
  .pc__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 个人中心里的邀请链接是**完整 URL**（不是 6 位邀请码），不能沿用「大字 + 宽字距」那套：
   那是给短码设计的，放整条链接会把行撑爆、并把「复制」按钮挤成竖排两行（实测踩到）。 */
.pc__invite .adlg__inv__row { align-items: center; flex-wrap: wrap; }
.pc__invite .adlg__inv__v {
  flex: 1 1 220px; min-width: 0;
  font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0;
  line-height: 1.5; word-break: break-all;
}
.pc__invite .adlg__inv__c { flex: none; white-space: nowrap; margin-left: 0; }

/* ---------- 左栏的「我的权益」（个人中心态，2026-10-09 从右栏搬来） ----------
   深底白字 + 金色勾选：左栏是品牌深绿底，权益清单直接用它自己的配色，
   不引入新色。搬过来的理由见 account.js: sideHTML() 的注释。 */
.sdp { margin-top: var(--sp-7); min-height: 0; }
.sdp__t {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--white);
}
.sdp__t svg { color: var(--accent-300); flex: none; }
.sdp__t em {
  margin-left: auto; font-style: normal; font-size: var(--fs-2xs);
  padding: 2px var(--sp-2); border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.16); color: var(--white);
}
.sdp__l {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}
.sdp__l li {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: var(--fs-xs); line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.sdp__l li svg { flex: none; margin-top: 2px; color: var(--accent-300); }
.sdp__hint {
  display: flex; align-items: flex-start; gap: 5px;
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--fs-2xs); line-height: 1.6; color: rgba(255, 255, 255, 0.62);
}

/* ---------- 「注册/购买即表示同意《服务协议》《隐私政策》」 ----------
   2026-10-09 上线前加。必须是**真能点开的按钮**，不能只写一行小字：
   写了却不给看等于没告知。走 data-adlg-act="open-terms"（先关弹窗再跳路由）。 */
.adlg__legal {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs); color: var(--ink-500); line-height: 1.7;
  text-align: center;
}
.adlg__legal-b {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-2xs); color: var(--brand-700);
  text-decoration: underline; text-underline-offset: 2px;
}
.adlg__legal-b:hover { color: var(--brand-800); }

/* 演示账号在个人中心/侧栏的身份标签：暖色，与"会员/尊享"的金色区分开 ——
   它表达的是"这是体验身份"，不是"这是付费档"。 */
.adlg__pill--demo { background: var(--warn-100); color: var(--warn-700); }