/* ============================================================
   奇乐多 qile.ai · 生产样式 v3 极简（2026-11-08 二轮）
   ------------------------------------------------------------
   依据：本项目 std/00-元素块总索引.html（English ui-standard-202611
   完整拷贝）——铁律：前端元素一律用标准件（en-*）+ 语义 token；
   本文件 = spec.css「token 体系 + 标准件层」的生产切片（spec.css
   头注「永不部署」，故切片落地）+ qile 页面级样式（仅页面特有，
   禁止重复定义标准件类）。
   v3 极简口径：页面只有顶栏 / slogan+主按钮 / 三功能 / 备案号 +
   登录与账户两弹层。消费标准件：BC-01 en-btn / BC-07 en-input /
   MD-01 en-mask+en-modal / MD-05 登录弹层编排 / MD-04 账户卡。
   ============================================================ */

/* ========== 语义 Token（亮）——与 std/spec.css 同名同值 ========== */
:root {
  /* 品牌色阶：logo 红 #ff3938（2026-11-09 全站换红，蓝紫退役） */
  --brand-50:  #fdeff0;  --brand-100: #fbe0e0; --brand-200: #f7c6c7;
  --brand-300: #f29b9c; --brand-400: #fb7272; --brand-500: #ff3938;
  --brand-600: #f5302f; --brand-700: #d92221; --brand-800: #b01c1b;
  --brand-900: #861615;

  --background: #f8f1f2;  --muted: #f6f4f5;
  --card: #ffffff;        --popover: #ffffff;
  --sidebar: #f2e5e6;

  --foreground: #241417;      --muted-foreground: #6e5a5d;
  --card-foreground: #241417; --popover-foreground: #241417;
  --accent-foreground: #241417;

  --primary: var(--brand-600);
  --primary-foreground: #ffffff;
  --secondary: #221417;            --secondary-foreground: #ffffff;
  --accent: #f5e9ea;               --input: #efe3e4;
  --border: #e8dcdc;               --ring: var(--brand-700);
  --brand-text: var(--brand-800);

  --destructive: #ef4444;  --destructive-btn: #dc2626;
  --destructive-foreground: #ffffff;  --danger-fg: #b91c1c;
  --success: #13b15a;      --success-fg: #0a6b34;  --success-btn: #0a6b34;
  --warning: #d97706;      --warning-fg: #a34a08;

  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "Segoe UI", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", ui-monospace, "Roboto Mono", Consolas, monospace;
  --text-xs: 11px;   --text-sm: 12.5px; --text-base: 14px; --text-md: 15px;
  --text-lg: 17px;   --text-xl: 20px;   --text-2xl: 24px;  --text-3xl: 30px;
  --lh-tight: 1.25;  --lh-normal: 1.5;  --lh-loose: 1.7;
  --fw-normal: 400;  --fw-medium: 500;  --fw-semibold: 600; --fw-bold: 700;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px;

  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(47, 55, 120, 0.08);
  --shadow-md: 0 4px 12px rgba(47, 55, 120, 0.10);
  --shadow-lg: 0 12px 32px rgba(47, 55, 120, 0.16);

  --z-overlay: 60; --z-modal: 70; --z-toast: 90;

  --ctl-sm: 32px; --ctl-md: 38px; --ctl-lg: 44px;

  --dur-fast: 120ms; --dur-base: 200ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========== 标准件层（std/spec.css §标准件，生产切片） ========== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-size: var(--text-base);
  line-height: var(--lh-normal);
}
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* --- 按钮（BC-01） --- */
.en-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: var(--radius-md); font-family: inherit; font-size: var(--text-md); font-weight: var(--fw-medium);
  border: 1px solid transparent; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast); }
.en-btn:active { transform: scale(.97); }
.en-btn.lg { height: var(--ctl-lg); padding: 0 20px; font-size: var(--text-md); }
.en-btn.md { height: var(--ctl-md); padding: 0 16px; font-size: var(--text-base); }
.en-btn.sm { height: var(--ctl-sm); padding: 0 12px; font-size: var(--text-sm); border-radius: var(--radius-sm); }
.en-btn.primary { background: var(--primary); color: var(--primary-foreground); }
.en-btn.primary:hover { filter: brightness(1.06); text-decoration: none; }
.en-btn.outline { background: var(--card); border-color: var(--border); color: var(--foreground); }
.en-btn.outline:hover { background: var(--accent); text-decoration: none; }
.en-btn.ghost { background: transparent; color: var(--foreground); }
.en-btn.ghost:hover { background: var(--accent); text-decoration: none; }
.en-btn:disabled, .en-btn.loading { opacity: .5; pointer-events: none; }

/* --- 输入（BC-07） --- */
.en-input { display: flex; flex-direction: column; gap: 4px; }
.en-input label { font-size: var(--text-sm); color: var(--muted-foreground); }
.en-input .ctl { display: flex; align-items: center; height: var(--ctl-lg); padding: 0 12px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 16px; color: var(--foreground); gap: var(--space-2); }
.en-input .ctl:focus-within { border-color: var(--ring); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 25%, transparent); }
.en-input .ctl input { border: none; outline: none; background: transparent; flex: 1; font: inherit; color: inherit; font-size: 16px; }
.en-input .ctl.err { border-color: var(--destructive-btn); }
.en-input .msg { font-size: var(--text-xs); color: var(--muted-foreground); }
.en-input .msg.err { color: var(--danger-fg); }

/* --- 弹层三原语（MD-01/02/03） --- */
.en-mask { position: fixed; inset: 0; background: rgba(16, 18, 36, 0.55); z-index: var(--z-overlay); }
.en-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 420px); max-height: 82vh; overflow: auto;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); z-index: var(--z-modal); padding: var(--space-5); }
.en-modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.en-modal-head h4 { margin: 0; font-size: var(--text-md); font-weight: var(--fw-semibold); }
.en-x { border: none; background: var(--muted); color: var(--muted-foreground); width: 32px; height: 32px;
  border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  position: relative; }
.en-x::before { content: ""; position: absolute; inset: -6px; }
.en-x:hover { background: var(--accent); color: var(--foreground); }

/* --- 键值行（CD-07，MD-04 账户卡用） --- */
.en-kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) 0; border-bottom: 1px dashed var(--border); font-size: var(--text-base); }
.en-kv:last-child { border-bottom: none; }
.en-kv .k { color: var(--muted-foreground); font-size: var(--text-sm); flex: none; }
.en-kv .v { font-weight: var(--fw-medium); text-align: right; overflow-wrap: anywhere; }

/* --- toast（SH-15） --- */
.en-toast { position: fixed; left: 50%; top: var(--space-5); transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-2); background: var(--popover); color: var(--foreground);
  border: 1px solid var(--border); border-left: 3px solid var(--foreground); border-radius: var(--radius-md);
  padding: var(--space-3); box-shadow: var(--shadow-lg); font-size: var(--text-sm);
  z-index: var(--z-toast); max-width: min(88vw, 420px); }
.en-toast.ok { border-left-color: var(--success); }
.en-toast.err { border-left-color: var(--destructive-btn); }

/* ========== qile 页面级样式（仅页面特有） ========== */
.wrap { max-width: 1020px; margin: 0 auto; padding: 0 var(--space-5); }

/* 顶栏：logo + 账户入口（一行，无导航链接） */
.top { border-bottom: 1px solid var(--border); }
.top-in { max-width: 1020px; margin: 0 auto; padding: 0 var(--space-5);
  display: flex; align-items: center; justify-content: space-between; height: 56px; }
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--foreground); }
.brand:hover { text-decoration: none; }
.brand-logo { width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--brand-600); color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: var(--fw-bold); font-size: var(--text-sm); }
.brand b { font-size: var(--text-base); }

/* Hero：slogan + 唯一主按钮（居中） */
.hero { text-align: center; padding: var(--space-12) var(--space-4) var(--space-10); }
.hero h1 { font-size: var(--text-3xl); font-weight: var(--fw-bold); line-height: 1.3;
  margin: 0 0 var(--space-5); letter-spacing: .01em; }
.hero-sub { margin: 0 0 var(--space-5); font-size: var(--text-sm); color: var(--muted-foreground); }

/* 三功能（极简罗列，无卡片） */
.feat { max-width: 1020px; margin: 0 auto; padding: 0 var(--space-5) var(--space-12);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.feat h3 { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: var(--fw-semibold);
  display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border); }
.feat h3 svg { flex: none; color: var(--brand-600); }
.feat p { margin: 0; font-size: var(--text-sm); color: var(--muted-foreground); line-height: var(--lh-loose); }
.feat p.safe + p.safe { margin-top: 10px; }   /* 账号安全保障 a/b/c：段距（行距不变） */

/* 平台/Agent 图标阵列（品牌色块+官方 logo / 描边圆环+logo 或首字母） */
.pf-list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-2); margin-top: var(--space-3); }
.pf { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 58px; }
.pf svg { display: block; }
.pf svg text { font-family: var(--font-sans); }
.pf-plat svg { color: #fff; }          /* logo path fill=currentColor 取 color */
.pf-ring svg { color: var(--brand-700); }
.pf i { font-style: normal; font-size: var(--text-xs); color: var(--muted-foreground);
  white-space: nowrap; }

/* 稍后开放的平台：统一灰底（不用 grayscale——它按亮度转灰，橙/红/蓝深浅不一）+ 悬停提示气泡 + 点击 toast（app.js 委托） */
.pf.soon { cursor: pointer; position: relative; }
.pf.soon .pf-plat rect { fill: #c3c9d9; }
.pf.soon::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%); padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-xs);
  white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s ease; pointer-events: none; }
.pf.soon:hover::after, .pf.soon:focus-visible::after { opacity: 1; visibility: visible; }

/* 区块标题（成为VIP 等） */
.sec-title { max-width: 1020px; margin: 0 auto var(--space-5); padding: 0 var(--space-5);
  font-size: var(--text-xl); font-weight: var(--fw-bold); text-align: center; letter-spacing: .01em; }

/* 充值三档（月 / 季 8 折 / 年 7 折）——整卡可点 */
.plans { max-width: 1020px; margin: 0 auto; padding: 0 var(--space-5) var(--space-12);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.plan { display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4); cursor: pointer; font-family: inherit;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast); }
.plan:hover { border-color: var(--ring); text-decoration: none; }
.plan:active { transform: scale(.97); }
.plan .pn { font-size: var(--text-sm); color: var(--muted-foreground); }
.plan .amt { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--foreground); }
.plan .amt small { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--muted-foreground); }
.plan .sub { font-size: var(--text-xs); color: var(--muted-foreground); min-height: 16px; }

/* 底部：仅备案号 */
.beian { text-align: center; padding: var(--space-5) var(--space-4); border-top: 1px solid var(--border); }
.beian a { font-size: var(--text-xs); color: var(--muted-foreground); }

/* MD-05 登录弹层编排（壳=en-modal；恒浅色口径） */
.login-form { display: grid; gap: var(--space-3); }
.login-form .ctl .en-btn { flex: none; }
.acct-legal { font-size: var(--text-xs); color: var(--muted-foreground); text-align: center; margin: var(--space-2) 0 0; line-height: var(--lh-loose); }
.acct-plans { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.acct-plans .en-btn { flex: 1; }
.plans-note { font-size: var(--text-xs); color: var(--muted-foreground); text-align: center; margin: var(--space-2) 0 0; }
.acct-foot { margin-top: var(--space-2); }
.hidden { display: none !important; }
.en-kv .v.mono { font-family: var(--font-mono); letter-spacing: .03em; }

/* 更新日志页（长文） */
.doc { padding: var(--space-8) 0 var(--space-12); }
.doc h1 { font-size: var(--text-2xl); font-weight: var(--fw-semibold); margin: var(--space-2) 0 var(--space-4); }
.doc .doc-nav { font-size: var(--text-xs); color: var(--muted-foreground); margin: 0; }
.doc .log-item { border-top: 1px solid var(--border); padding: var(--space-4) 0; }
.doc .log-item .date { font-size: var(--text-xs); color: var(--muted-foreground); font-family: var(--font-mono); }
.doc .log-item h3 { font-size: var(--text-md); font-weight: var(--fw-semibold); margin: var(--space-1) 0; }
.doc .log-item p { font-size: var(--text-sm); color: var(--muted-foreground); margin: 0; max-width: 60em; }

/* 404 */
.center-page { text-align: center; padding: var(--space-12) var(--space-4); }
.center-page h1 { font-size: var(--text-3xl); margin: 0 0 var(--space-2); }
.center-page p { color: var(--muted-foreground); margin: 0 0 var(--space-5); }
.center-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .feat { grid-template-columns: 1fr; gap: var(--space-5); }
  .plans { grid-template-columns: 1fr; gap: var(--space-3); }
}

/* MD-06 充值确认 + 协议勾选行（协议 v1.0，2026-11-08） */
.agree-row { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-xs);
  color: var(--muted-foreground); line-height: var(--lh-loose); cursor: pointer; user-select: none; }
.agree-row input { margin: 3px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--brand-600); cursor: pointer; }
.agree-row strong, .agree-row b { color: var(--danger-fg); font-weight: var(--fw-semibold); }
.pay-confirm { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.pay-warn { background: #fff8ec; border: 1px solid #f2ddb3; border-left: 3px solid var(--warning);
  border-radius: var(--radius-md); padding: var(--space-3); margin: var(--space-3) 0; }
.pay-warn p { margin: 0 0 6px; font-size: var(--text-xs); line-height: var(--lh-loose); color: #5c4a26; }
.pay-warn p:last-child { margin-bottom: 0; }
.pay-warn b { color: #8a4a00; }
#pay-confirm { width: 100%; margin-top: var(--space-3); }
.beian-links { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--muted-foreground); }
.beian-links a { color: var(--muted-foreground); }

/* ========== F7 v1.3 分享减免（2026-11-08）：入口行 + 右下角微信聊天 UI 标准对话框 ==========
   铁律口径：标准件复用 en-x/en-btn（站内其余处），本对话框按用户指令采用微信聊天 UI 标准——
   微信色值为组件级常量（--wx-*，仅本段作用域）：聊天底 #EDEDED / 我方气泡绿 #95EC69 配深字 /
   对方气泡白 / 导航与输入条 #F7F7F7 / 官方按钮绿 #07C160；间距/圆角/字号仍走语义 token。 */
.plan.cut .amt { color: var(--brand-700); }
.plan .sub s { opacity: .7; }

.share-chat {
  --wx-chat-bg: #ededed;   --wx-bar-bg: #f7f7f7;
  --wx-green: #95ec69;     --wx-btn: #07c160;
  --wx-ink: #191919;       --wx-ink-sub: #7f7f7f;
  --wx-bubble-r: 8px;      --wx-avatar-r: 6px;
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 60;
  width: min(92vw, 380px); height: min(76vh, 580px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--wx-chat-bg);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-md); color: var(--wx-ink); }

/* 导航条：微信浅底深字 + 细分割线 */
.chat-head { display: flex; align-items: center; gap: var(--space-2); flex: none;
  padding: var(--space-2) var(--space-3);
  background: var(--wx-bar-bg); border-bottom: 1px solid #e0e0e0; }
.wx-avatar { width: 36px; height: 36px; border-radius: var(--wx-avatar-r); flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: var(--fw-semibold); }
.wx-avatar.bot { background: #fff; border: 1px solid #ececec; }  /* Q 字标：白底红字（logo 同源） */
.wx-avatar.me { background: #d9d9d9; color: #576b95; }
.chat-head .wx-avatar { width: 32px; height: 32px; font-size: var(--text-sm); }
.chat-title { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-title b { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--wx-ink); }
.chat-title small { font-size: var(--text-xs); color: var(--wx-ink-sub); }
.chat-x { display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--radius-full);
  background: transparent; color: var(--wx-ink-sub); cursor: pointer; }
.chat-x:hover { background: #ececec; color: var(--wx-ink); }

/* 消息流：微信 EDEDED 底 */
.chat-body { flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  gap: var(--space-3); padding: var(--space-3);
  background: var(--wx-chat-bg); }
.chat-time { margin: 0; align-self: center; font-size: var(--text-xs);
  color: #b2b2b2; }
.msg-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.msg-row.from-user { flex-direction: row; justify-content: flex-end; }
.chat-msg { position: relative; max-width: calc(100% - 92px); padding: var(--space-2) var(--space-3);
  border-radius: var(--wx-bubble-r); font-size: var(--text-md); line-height: 1.55;
  word-break: break-word; }
.chat-msg.from-bot { align-self: flex-start; background: #ffffff;
  border-top-left-radius: 3px; }
.chat-msg.from-bot::before { content: ""; position: absolute; left: -5px; top: 13px;
  border: 5px solid transparent; border-right-color: #ffffff; border-left: none; }
.chat-msg.from-user { background: var(--wx-green); color: var(--wx-ink);
  border-top-right-radius: 3px; }
.chat-msg.from-user::before { content: ""; position: absolute; right: -5px; top: 13px;
  border: 5px solid transparent; border-left-color: var(--wx-green); border-right: none; }
.chat-msg ol { margin: var(--space-1) 0 0; padding-left: 18px; color: #4c4c4c; }
.chat-msg b { font-weight: var(--fw-semibold); color: var(--wx-ink); }
.chat-copy-msg { max-width: calc(100% - 60px); }
.chat-copy-text { margin: var(--space-2) 0; padding: var(--space-2);
  background: #f2f2f2; border-radius: 4px; color: var(--wx-ink);
  font-size: var(--text-sm); }
.chat-copy-note { display: block; margin-top: var(--space-2);
  color: var(--muted-foreground); font-size: var(--text-xs); line-height: var(--lh-loose); }
.wx-btn { display: inline-flex; align-items: center; justify-content: center;
  height: 30px; padding: 0 14px; border: none; border-radius: 5px;
  background: var(--wx-btn); color: #ffffff; font-size: var(--text-sm);
  font-weight: var(--fw-medium); cursor: pointer; }
.wx-btn:active { opacity: .85; }
.chat-example { background: #ffffff; border-radius: var(--wx-bubble-r);
  border-top-left-radius: 3px; padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); position: relative; max-width: calc(100% - 92px); }
.chat-example::before { content: ""; position: absolute; left: -5px; top: 13px;
  border: 5px solid transparent; border-right-color: #ffffff; border-left: none; }
.chat-example summary { color: #576b95; cursor: pointer; }
.chat-example img { width: 100%; margin-top: var(--space-2); border-radius: 4px; }
.chat-note { margin: 0; align-self: center; max-width: 92%; text-align: center;
  font-size: var(--text-xs); color: #b2b2b2; line-height: var(--lh-loose); }
.chat-msg img { max-width: 100%; max-height: 200px; border-radius: 4px; display: block; }
.chat-msg.verdict-ok { background: #ffffff; border-top-left-radius: 3px; color: var(--wx-ink); }
.chat-msg.verdict-ok b { color: var(--success-fg); }
.chat-msg.verdict-err { background: #ffffff; color: #c0392b; }
.chat-msg.typing { color: #b2b2b2; }

/* 输入条：微信桌面式 浅底 + 白色圆角输入框 + ➕ + 绿色发送 */
.chat-input { flex: none; display: flex; flex-direction: column;
  background: var(--wx-bar-bg); border-top: 1px solid #e0e0e0;
  padding: 0 var(--space-2) var(--space-2); }
.chat-attach { display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-1) 0; }
.chat-attach img { height: 48px; max-width: 130px; object-fit: cover;
  border-radius: 4px; }
.chat-attach button { display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; padding: 0; border: none; border-radius: var(--radius-full);
  background: #c8c8c8; color: #fff; cursor: pointer; flex: none; }
.chat-input-row { display: flex; align-items: flex-end; gap: var(--space-2);
  padding-top: var(--space-2); }
.chat-box { flex: 1; min-height: 36px; max-height: 92px; overflow-y: auto;
  padding: var(--space-2) var(--space-3); border: none; border-radius: 5px;
  background: #ffffff; outline: none;
  font-size: var(--text-md); color: var(--wx-ink); cursor: text; }
.chat-box:focus, .chat-box.drag { background: #ffffff; box-shadow: 0 0 0 1.5px var(--wx-btn) inset; }
.chat-box:empty::before { content: attr(data-ph); color: #b2b2b2; pointer-events: none; }
.chat-plus, .chat-send { display: flex; align-items: center; justify-content: center;
  flex: none; border: none; cursor: pointer; }
.chat-plus { width: 32px; height: 32px; padding: 0; border-radius: 5px;
  background: #ffffff; color: #4c4c4c; }
.chat-plus:hover { color: var(--wx-btn); }
.chat-send { height: 32px; padding: 0 14px; border-radius: 5px;
  background: var(--wx-btn); color: #fff; font-size: var(--text-sm);
  font-weight: var(--fw-medium); }
.chat-send:disabled { background: #d9d9d9; color: #fff; cursor: default; }

#pay-discount-row, #acct-share-row { cursor: pointer; }
#pay-discount-row .v, #acct-share-row .v { text-decoration: underline dotted; }

/* ---- F7 v1.4 邀请收益弹层（MD-07）：邀请码卡/待领已领合计/好友列表脱敏/逐笔领取 ---- */
.ref-modal { width: min(420px, calc(100vw - 32px)); }
.ref-loading, .ref-empty { color: var(--muted-foreground); font-size: var(--text-sm);
  text-align: center; padding: var(--space-4) 0; }
.ref-top { border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: var(--space-3); margin-bottom: var(--space-3); background: var(--muted, #f7f8fa); }
.ref-code-row { display: flex; align-items: center; gap: var(--space-2); }
.ref-code-row span { font-size: var(--text-sm); color: var(--muted-foreground); }
.ref-code-row b { font-family: var(--font-mono); font-size: var(--text-md);
  letter-spacing: .08em; color: var(--foreground); }
.ref-code-row .en-btn { margin-left: auto; }
.ref-tip { font-size: var(--text-xs); color: var(--muted-foreground);
  margin: var(--space-2) 0 0; line-height: 1.6; }
.ref-totals { display: flex; gap: var(--space-4); margin-top: var(--space-2); }
.ref-totals span { font-size: var(--text-sm); color: var(--muted-foreground); }
.ref-totals b { color: var(--brand-600); font-size: var(--text-md); margin-left: 2px; }
.ref-note { font-size: var(--text-xs); color: var(--muted-foreground);
  margin: 0 0 var(--space-2); }
.ref-friends { display: flex; flex-direction: column; gap: var(--space-2);
  max-height: 46vh; overflow-y: auto; }
.ref-friend { border: 1px solid var(--border); border-radius: var(--radius, 10px);
  padding: var(--space-2) var(--space-3); }
.rf-head { display: flex; justify-content: space-between; align-items: baseline; }
.rf-head .mono { font-family: var(--font-mono); letter-spacing: .05em;
  font-weight: var(--fw-medium); }
.rf-reg { font-size: var(--text-xs); color: var(--muted-foreground); }
.rf-order { display: flex; justify-content: space-between; align-items: center;
  font-size: var(--text-sm); padding: 6px 0 0; border-top: 1px dashed var(--border);
  margin-top: 6px; }
.rf-order:first-of-type { border-top: none; margin-top: 2px; padding-top: 2px; }
.rf-earn { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-600);
  font-weight: var(--fw-medium); }
.rf-earn .en-btn { padding: 2px 12px; }
.st-issued { font-style: normal; font-size: var(--text-xs); color: var(--muted-foreground); }
.st-void { font-style: normal; font-size: var(--text-xs); color: #c0392b; }
#acct-ref-row { cursor: pointer; }
#acct-ref-row .v { text-decoration: underline dotted; }

/* ---- F7 v1.4 定价卡分享箭头条：箭头+文字一体、可点击、减免越多色彩越突出 ---- */
.plan { padding-bottom: var(--space-3); }
.share-cta { display: inline-flex; align-items: center; gap: 5px;
  margin-top: var(--space-1); padding: 5px 13px; border-radius: 999px;
  font-size: var(--text-sm); font-weight: var(--fw-semibold);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: transform .12s ease, box-shadow .12s ease; }
.share-cta .cta-arrow { animation: cta-dip 1.8s ease-in-out infinite; }
@keyframes cta-dip { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
.share-cta:hover { transform: translateY(1px); }
.share-cta:active { transform: translateY(2px) scale(.97); }
/* 三档：减免越多色彩越突出（¥10 浅描边 → ¥25 浅实底 → ¥50 品牌红实底） */
.share-cta.lv1 { color: #c81e1e; background: #fdeeee; border: 1px solid #f6c9c9; }
.share-cta.lv2 { color: #b01a1a; background: #fbd9d9; border: 1px solid #f2a8a8;
  box-shadow: 0 1px 4px rgba(255, 57, 56, .14); }
.share-cta.lv3 { color: #fff; background: #ff3938; border: 1px solid #e22524;
  box-shadow: 0 2px 8px rgba(255, 57, 56, .38); }
.share-cta.done { background: var(--muted, #f2f3f5); border-color: var(--border);
  color: var(--muted-foreground); box-shadow: none; }
.share-cta.done .cta-arrow { animation: none; }
@media (hover: none) { .share-cta:hover { transform: none; } }