* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; touch-action:manipulation; }
:root{
  --brand:#185FA5; --brand-d:#0C447C; --brand-l:#E6F1FB;
  --ink:#1a1d23; --ink2:#5f6368; --ink3:#9aa0a6;
  --line:#e8eaed; --bg:#f2f3f5; --bg-l:#f7f9fc;
  --gold:#B8860B; --gold-l:#FAEEDA;
  --green:#0F6E56; --green-l:#E1F5EE;
  --red:#A32D2D;
  /* ---- 营销面色板（2026-09-18 I 版）：与 js/poster.js 的 BRAND 同源，改色两边一起改 ----
     规矩：底用墨黑系、强调色**只用金**、文字三级灰阶。新增营销页一律引这些变量。 */
  --vp-ink:#0C1019;          /* 封面底 */
  --vp-ink-2:#0A0D14;        /* 封面底渐深端 */
  --vp-ink-panel:#121722;    /* 内容屏底 */
  --vp-gold:#D4AF37;
  --vp-gold-l:#E8C86A;
  --vp-gold-d:#C9962E;
  --vp-on-gold:#1A1405;      /* 金底上的字：深棕，不是白 */
  --vp-gold-rgb:212,175,55;  /* 供 rgba(var(--vp-gold-rgb),.2) 这类透明度用法 */
  --vp-t1:#F2F5FA;           /* 标题 */
  --vp-t2:#A8B3C7;           /* 正文 */
  --vp-t3:#6E7A90;           /* 脚注 */
  /* ================= 显示刻度表（2026-09-19 J 版）=================
     规矩：新增/修改样式一律引下面这些变量，别再写死数值。
     实测改前：圆角 22 种、阴影 11 种、灰 38 种 —— 人眼读不出层级，
     观感「每个地方都对、就是不成体系」。
     要调全站观感（更圆/更淡/更松），只改这一块，改完立即全站生效。 */
  --r-xs:6px;    /* 极小元素：进度条 / 小圆点 */
  --r-sm:10px;   /* 小元素：chip / 小标签 / logo 块 */
  --r-md:14px;   /* 中容器：按钮 / 输入框 / tab 条 */
  --r-lg:18px;   /* 大卡片：内容卡 / 英雄区 / 轮播 */
  --r-pill:999px;/* 药丸：徽标 / 胶囊按钮 */
  --sh-1:0 1px 3px rgba(20,22,26,.045);   /* 普通卡片 */
  --sh-2:0 2px 10px rgba(20,22,26,.07);   /* 浮起：票 / 面板 */
  --sh-3:0 8px 26px rgba(20,22,26,.14);   /* 强调：浮标 / 弹层 */
  --fs-1:10px; --fs-2:11px; --fs-3:12px; --fs-4:13px; --fs-5:14px;
  --fs-6:16px; --fs-7:18px; --fs-8:22px; --fs-9:28px; --fs-10:44px;
  /* 语义「线」与「面」—— 三个变量顶掉原来二十多种一次性灰 */
  --bg2:#eef0f3;      /* 比页底再深一档的填充 */
  --line2:#dfe2e6;    /* 比 --line 再深一档的分隔 */
  --brand-b:#c9d8ea;  /* 主色描边 */
  --green-b:#bfe8d9;  /* 成功色描边 */
  --gold-b:#efdcb8;   /* 会员金描边 */
  --red-l:#FCEBEB;    /* 危险色浅底 */
  --red-b:#F7C1C1;    /* 危险色描边 */
  /* 紧迫提示（K 版新增）：只给「名额将满」这一类用，别拿它做普通强调色 */
  --warn:#c2571b;
}
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  background:var(--line); color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 8px; min-height:100vh;
  overscroll-behavior:none; touch-action:manipulation;
}
.page-title{ font-size:16px; color:var(--ink); margin-bottom:10px; text-align:center; }
.page-title b{ color:var(--brand-d); }
.demo-hint{ font-size:13px; color:var(--ink3); margin-top:10px; text-align:center; line-height:1.7; }
.demo-hint b{ color:var(--ink); }

.phone{
  /* 2026-09-07：去掉「手机模型」装饰（黑框/圆角/阴影），宽屏设备(>430px)只保留居中限宽内容区。
     避免真实客户在 iPad / 电脑微信 / 手机横屏打开时看到「模拟手机框」（截图带框、显原型感）。
     真机(≤430px)由下方 media query 仍全屏，完全不受影响。 */
  width:390px; max-width:100vw; height:820px; background:var(--bg);
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}
@media (max-width:430px){
  body{ padding:0; height:100vh; height:100dvh; min-height:0; overflow:hidden; align-items:stretch; justify-content:center; }
  .phone{ width:100vw; height:100vh; height:100dvh; border-radius:0; border:none; box-shadow:none; }
  .page-title,.demo-hint,.statusbar{ display:none !important; }
}
.statusbar{
  /* 2026-09-07：仿真状态栏（9:41 / 刘海 / 信号电池）属于「手机模型」装饰，一并隐藏，
     避免宽屏设备上露出原型感。HTML 结构保留，仅不渲染。 */
  height:32px; background:#fff; display:none; align-items:center; justify-content:space-between;
  padding:0 20px; font-size:12px; font-weight:600; color:var(--ink); flex-shrink:0;
  position:relative; z-index:5;
}
.statusbar .notch{ position:absolute; left:50%; transform:translateX(-50%); top:4px; width:90px; height:20px; background:#14161a; border-radius:var(--r-md); }
.statusbar .sb-right{ display:flex; align-items:center; gap:5px; }
.sb-right svg{ display:block; }

.app{ flex:1; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.view{ position:absolute; inset:0; display:flex; flex-direction:column; background:var(--bg); transition:opacity .18s ease; }
.view.off-r,.view.off-l{ opacity:0; pointer-events:none; }

.navbar{
  background:#fff; padding:10px 16px 12px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.navbar .brand{ display:flex; align-items:center; gap:8px; }
.navbar .logo{ width:30px; height:30px; border-radius:var(--r-sm); background:linear-gradient(135deg,#185FA5,#3f7fd0); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; }
.navbar .brand .t1{ font-size:15px; font-weight:700; }
.navbar .brand .t2{ font-size:10px; color:var(--ink3); }
.navbar .nav-act{ display:flex; align-items:center; gap:6px; }
.icon-btn{ width:32px; height:32px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; }
.icon-btn svg{ display:block; }
.role-chip{ font-size:10px; padding:3px 8px; border-radius:var(--r-sm); background:var(--gold-l); color:#8a6a1a; font-weight:600; }

.scroll{ flex:1; overflow-y:auto; overflow-x:hidden; padding:16px 16px 96px; }
.scroll::-webkit-scrollbar{ display:none; }

.hero{
  /* position:relative 保留（早期给右上角 .d-kind 用的，现在已弃用）——
     留着不花钱，将来要在 hero 上挂任何绝对定位的角标/浮层也不需要再补。 */
  position:relative;
  background:linear-gradient(135deg,#0C447C,#2a6fb8); border-radius:var(--r-lg); padding:16px; color:#fff; margin-bottom:12px; text-align:center;
}
.hero .h1{ font-size:17px; font-weight:700; }
.hero .h2{ font-size:11px; opacity:.85; margin-top:3px; }
.hero .stats{ display:flex; gap:16px; margin-top:12px; }
.hero .stat .n{ font-size:16px; font-weight:700; }
.hero .stat .l{ font-size:10px; opacity:.8; }
.hero .cta{ margin-top:12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:none; cursor:pointer; border-radius:var(--r-md); font-size:13px; font-weight:600;
  padding:10px 16px; transition:transform .1s ease;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--brand); color:#fff; }
.btn-gold{ background:linear-gradient(135deg,#c9962e,#a3741b); color:#fff; }
.btn-ghost{ background:#fff; color:var(--brand); border:1px solid var(--brand-b); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 12px; font-size:12px; border-radius:var(--r-sm); }
.btn-plain{ background:transparent; color:var(--brand); }

.section-t{ font-size:15px; font-weight:700; margin:4px 2px 10px; display:flex; align-items:center; justify-content:space-between; }
.section-t .more{ font-size:11px; color:var(--ink3); font-weight:400; }

.post-card{ background:#fff; border-radius:var(--r-lg); padding:16px; margin-bottom:12px; box-shadow:var(--sh-1); }
.post-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.avatar{ width:40px; height:40px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; flex-shrink:0; }
.avatar.boss{ background:linear-gradient(135deg,#0C447C,#3f7fd0); }
.p-name{ font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; }
.p-name .vip{ font-size:9px; background:var(--gold-l); color:#8a6a1a; padding:1px 6px; border-radius:var(--r-sm); font-weight:600; }
.p-name .p-top{ font-size:9px; background:var(--brand-l); color:#3a4a9f; padding:1px 6px; border-radius:var(--r-sm); font-weight:700; margin-left:4px; }
.p-name .p-feat{ font-size:9px; background:var(--gold); color:#fff; padding:1px 6px; border-radius:var(--r-sm); font-weight:700; margin-left:4px; }
.feed-tabs{ display:flex; background:#fff; border-radius:var(--r-md); padding:4px; margin-bottom:12px; box-shadow:var(--sh-1); }
.feed-tabs .ftab{ flex:1; text-align:center; font-size:13px; font-weight:600; color:var(--ink2); padding:8px 0; border-radius:var(--r-sm); }
.feed-tabs .ftab.on{ background:var(--brand); color:#fff; }
.feed-tabs .ftab .cnt{ font-size:10px; font-weight:500; opacity:.75; margin-left:2px; }
.admin-bar{ background:var(--brand-l); border:1px dashed var(--brand-b); border-radius:var(--r-md); padding:10px 12px; margin-top:12px; }
.admin-bar .ab-t{ font-size:11px; color:#3a4a9f; font-weight:700; margin-bottom:8px; }
.admin-bar .ab-row{ display:flex; gap:8px; }
.p-title{ font-size:11px; color:var(--ink2); margin-top:2px; }
.p-time{ font-size:10px; color:var(--ink3); margin-top:2px; }
.post-body .pt{ font-size:14px; font-weight:600; margin-bottom:6px; line-height:1.5; }
.post-body .pc{ font-size:13px; color:var(--ink2); line-height:1.7; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.video-thumb{ position:relative; border-radius:var(--r-md); overflow:hidden; height:150px; background:linear-gradient(135deg,#22304a,#3b4a66); display:flex; align-items:center; justify-content:center; margin-bottom:10px; }
.channels-card{ display:flex; align-items:center; gap:10px; background:var(--brand-l); border:1px solid var(--brand-b); border-radius:var(--r-md); padding:10px 12px; margin-bottom:10px; }
.channels-card.compact{ padding:8px 10px; margin-bottom:8px; }
.channels-card .ch-logo{ width:38px; height:38px; border-radius:var(--r-sm); background:linear-gradient(135deg,#07C160,#06ad56); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.channels-card.compact .ch-logo{ width:32px; height:32px; font-size:13px; }
.channels-card .ch-info{ flex:1; min-width:0; }
.channels-card .ch-name{ font-size:12.5px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.channels-card .ch-sub{ font-size:10px; color:var(--ink2); margin-top:2px; }
.channels-card .ch-arr{ color:var(--ink3); font-size:18px; flex-shrink:0; }
/* ---- 首页轮播图（banner swiper）---- */
.banner-sw{ position:relative; border-radius:var(--r-lg); overflow:hidden; margin-bottom:12px; background:#111; user-select:none; -webkit-user-select:none; }
.bn-track{ display:flex; width:100%; transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.bn-slide{ flex:0 0 100%; position:relative; aspect-ratio:750/320; padding:16px 16px 14px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; cursor:pointer; }
.bn-tag{ position:absolute; top:12px; left:14px; display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-pill); letter-spacing:1px; background:rgba(0,0,0,.28); backdrop-filter:blur(4px); }
.bn-tag .dot{ width:6px; height:6px; border-radius:50%; background:#fff; animation:lvblink 1.2s infinite; }
.bn-tag.hot{ background:#ff3b5c; }
.bn-kicker{ font-size:10.5px; font-weight:600; letter-spacing:2px; opacity:.85; margin-bottom:4px; }
.bn-title{ font-size:17px; font-weight:800; line-height:1.25; text-shadow:0 1px 6px rgba(0,0,0,.25); }
.bn-sub{ font-size:11px; opacity:.88; margin-top:4px; }
.bn-cta{ display:inline-flex; align-items:center; gap:4px; align-self:flex-start; margin-top:9px; background:rgba(255,255,255,.95); color:var(--ink); font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:var(--r-pill); }
.bn-cta.gold{ background:linear-gradient(135deg,#ffd76e,#ffb02e); color:#5c3a0e; }
.bn-price{ position:absolute; right:14px; bottom:14px; background:rgba(0,0,0,.32); backdrop-filter:blur(4px); border-radius:var(--r-sm); padding:5px 10px; text-align:right; }
.bn-price .p{ font-size:14px; font-weight:800; color:#ffd76e; }
.bn-price .m{ font-size:9px; opacity:.8; margin-top:1px; }
.bn-dots{ position:absolute; right:14px; top:12px; display:flex; gap:5px; z-index:3; }
.bn-dot{ width:5px; height:5px; border-radius:var(--r-xs); background:rgba(255,255,255,.45); transition:all .3s; cursor:pointer; }
.bn-dot.on{ width:14px; background:#fff; }
@keyframes bnIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.bn-slide .bn-title,.bn-slide .bn-sub,.bn-slide .bn-cta{ animation:bnIn .5s .05s both; }

.live-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(135deg,#2b1a4e,#4a2b7a 55%,#7a3fa0); color:#fff; padding:14px 14px 12px; margin-bottom:12px; }
.live-card .lv-badge{ display:inline-flex; align-items:center; gap:5px; background:#ff3b5c; font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); letter-spacing:1px; }
.live-card .lv-badge .dot{ width:6px; height:6px; border-radius:50%; background:#fff; animation:lvblink 1.2s infinite; }
@keyframes lvblink{ 0%,100%{opacity:1;} 50%{opacity:.2;} }
.live-card .lv-title{ font-size:15px; font-weight:700; margin:9px 0 3px; }
.live-card .lv-sub{ font-size:11px; opacity:.85; line-height:1.5; }
.live-card .lv-meta{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:10.5px; opacity:.9; }
.live-card .lv-btn{ position:absolute; right:12px; bottom:12px; background:#ffd54a; color:#5a3d00; font-size:12px; font-weight:700; padding:7px 14px; border-radius:var(--r-pill); border:none; }
.live-card .lv-btn.done{ background:rgba(255,255,255,.18); color:#fff; }
.match-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(135deg,#0c3b2e,#0F6E56 55%,#1D9E75); color:#fff; padding:14px 14px 12px; margin-bottom:12px; cursor:pointer; }

/* ================== 拓圈AI 聊天 ================== */
.ai-card{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:linear-gradient(135deg,#0a1f4d,#123a8f 50%,#3b6fe0); color:#fff; padding:14px 14px 12px; margin-bottom:12px; cursor:pointer; }
.ai-card .mc-badge{ background:#7fd4ff; color:#052a63; }
.ai-card .mc-btn{ background:#fff; color:#123a8f; }
.ai-hero{ background:linear-gradient(135deg,#0a1f4d,#123a8f 60%,#3b6fe0); border-radius:var(--r-md); padding:12px 14px; color:#fff; margin-bottom:10px; }
.ai-hero .t{ font-size:13.5px; font-weight:800; display:flex; align-items:center; gap:7px; }
.ai-hero .s{ font-size:10.5px; opacity:.82; margin-top:4px; line-height:1.5; }
.ai-hero .pills{ display:flex; gap:6px; margin-top:9px; flex-wrap:wrap; }
.ai-hero .pill{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); font-size:10px; padding:3px 9px; border-radius:var(--r-pill); }
.ai-chip{ flex:1; text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 4px; cursor:pointer; }
.ai-chip .e{ font-size:16px; }
.ai-chip .n{ font-size:10.5px; font-weight:700; color:var(--ink); margin-top:3px; }
.ai-msg{ display:flex; gap:8px; margin-bottom:12px; }
.ai-msg .ava{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#123a8f,#3b6fe0); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.ai-msg .bub{ max-width:78%; border-radius:var(--r-xs) var(--r-md) var(--r-md) var(--r-md); background:#fff; border:1px solid var(--line); padding:10px 12px; font-size:12px; line-height:1.7; color:var(--ink); }
.ai-msg.me{ flex-direction:row-reverse; }
.ai-msg.me .ava{ background:linear-gradient(135deg,#0F6E56,#1D9E75); }
.ai-msg.me .bub{ background:var(--green-l); border-color:var(--green-b); border-radius:var(--r-md) var(--r-xs) var(--r-md) var(--r-md); }
.ai-bub-title{ font-weight:800; font-size:12px; color:#123a8f; margin-bottom:5px; }
.ai-bub-sec{ font-weight:700; font-size:11.5px; color:var(--ink); margin-top:7px; }
.ai-act{ display:block; text-align:center; background:var(--brand-l); border:1px solid var(--brand-b); color:#123a8f; font-size:11.5px; font-weight:700; border-radius:var(--r-sm); padding:8px 0; margin-top:9px; cursor:pointer; }
.ai-typing{ display:inline-flex; gap:4px; padding:4px 2px; }
.ai-typing i{ width:6px; height:6px; border-radius:50%; background:#8aa5d8; animation:aityp 1.2s infinite; }
.ai-typing i:nth-child(2){ animation-delay:.2s; } .ai-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes aityp{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }
.ai-inputbar{ position:absolute; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--line); padding:9px 12px calc(9px + env(safe-area-inset-bottom)); display:flex; gap:8px; align-items:center; z-index:5; }
.ai-inputbar input{ flex:1; border:1.5px solid var(--line); border-radius:var(--r-pill); padding:9px 14px; font-size:12.5px; outline:none; background:var(--bg); font-family:inherit; }
.ai-inputbar input:focus{ border-color:#3b6fe0; background:#fff; }
.ai-inputbar button{ width:40px; height:40px; border-radius:50%; border:none; background:linear-gradient(135deg,#123a8f,#3b6fe0); color:#fff; font-size:15px; cursor:pointer; flex-shrink:0; }
.match-card .mc-badge{ display:inline-flex; align-items:center; gap:5px; background:#ffd54a; color:#5a3d00; font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--r-pill); letter-spacing:1px; }
.match-card .mc-title{ font-size:15px; font-weight:700; margin:9px 0 3px; }
.match-card .mc-sub{ font-size:11px; opacity:.85; line-height:1.5; }
.match-card .mc-meta{ display:flex; align-items:center; gap:10px; margin-top:10px; font-size:10.5px; opacity:.9; }
.match-card .mc-btn{ position:absolute; right:12px; bottom:12px; background:#fff; color:#0F6E56; font-size:12px; font-weight:700; padding:7px 14px; border-radius:var(--r-pill); border:none; }
.m-res{ border:1px solid var(--line); border-radius:var(--r-lg); padding:13px; margin-bottom:10px; background:#fff; }
.m-res .rate{ font-size:10px; font-weight:700; color:#0F6E56; background:var(--green-l); padding:2px 8px; border-radius:var(--r-pill); }
.video-thumb .play{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,.6); }
.video-thumb .play svg{ margin-left:2px; }
.video-thumb .dur{ position:absolute; right:10px; bottom:8px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; padding:2px 7px; border-radius:var(--r-xs); }
.video-thumb .tag{ position:absolute; left:10px; top:8px; background:rgba(0,0,0,.4); color:#fff; font-size:10px; padding:2px 7px; border-radius:var(--r-xs); }
.post-foot{ display:flex; align-items:center; gap:14px; margin-top:4px; }
.foot-item{ display:flex; align-items:center; gap:4px; font-size:11px; color:var(--ink3); }
.foot-item svg{ display:block; }
.foot-sp{ flex:1; }
.unlock-bar{
  margin-top:12px; background:var(--brand-l); border:1px solid var(--brand-b); border-radius:var(--r-md); padding:12px;
  display:flex; align-items:center; gap:10px;
}
.unlock-bar .lock{ width:36px; height:36px; border-radius:var(--r-sm); background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.unlock-bar .u-t{ font-size:12px; font-weight:600; color:var(--brand-d); }
.unlock-bar .u-s{ font-size:10px; color:var(--ink2); margin-top:2px; }
.unlock-bar .u-acts{ margin-left:auto; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.unlock-bar .u-acts .u-price{ font-size:12px; font-weight:700; color:#c9962e; }
.contact-box{
  margin-top:12px; background:var(--green-l); border:1px solid var(--green-b); border-radius:var(--r-md); padding:12px;
  display:flex; align-items:center; gap:10px;
}
.contact-box .c-t{ font-size:13px; font-weight:700; color:var(--green); }
.contact-box .c-s{ font-size:12px; color:var(--ink2); margin-top:2px; word-break:break-all; }
.contact-box .c-wx{ font-size:14px; font-weight:700; color:var(--green); background:#fff; padding:4px 10px; border-radius:var(--r-sm); margin-left:auto; border:1px solid var(--green-b); }
.wx-copy{ display:flex; align-items:center; gap:6px; }

.post-detail{ padding:14px; }
.d-title{ font-size:17px; font-weight:700; line-height:1.5; margin:12px 2px 8px; }
.d-content{ font-size:14px; color:var(--ink2); line-height:1.8; margin-bottom:12px; white-space:pre-wrap; }
.d-video{ position:relative; border-radius:var(--r-lg); overflow:hidden; height:190px; background:linear-gradient(135deg,#22304a,#3b4a66); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.d-video .play{ width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,.6); cursor:pointer; }
.d-video .play svg{ margin-left:2px; }
.d-video .dur{ position:absolute; right:12px; bottom:10px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; padding:2px 8px; border-radius:var(--r-xs); }
.video-player-demo{ position:absolute; inset:0; background:#0e1623; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; font-size:13px; gap:8px; }
.video-player-demo .bar{ width:180px; height:3px; background:#2a3a52; border-radius:var(--r-xs); }
.video-player-demo .bar i{ display:block; height:100%; width:38%; background:#fff; border-radius:var(--r-xs); }
.d-block{ background:#fff; border-radius:var(--r-lg); padding:14px; box-shadow:var(--sh-1); }
/* 沙龙详情页：各信息块之间留缝隙，不连成一片（相邻 margin 自动合并，块间净距 10px） */
#salonDetail .d-block{ margin-top:10px; }

.tag-row{ display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 2px; }
.tag{ font-size:10px; padding:3px 9px; border-radius:var(--r-sm); background:var(--bg); color:var(--ink2); }

/* VIP page */
.vip-hero{ background:linear-gradient(135deg,#5c3a0e,#a3741b); border-radius:var(--r-lg); padding:18px; color:#fff; text-align:center; margin-bottom:12px; }
.vip-hero .v1{ font-size:13px; opacity:.9; }
.vip-hero .v2{ font-size:30px; font-weight:800; margin:6px 0 2px; }
.vip-hero .v3{ font-size:11px; opacity:.85; }
.vip-card{ background:#fff; border-radius:var(--r-lg); padding:14px; margin-bottom:12px; }
.vip-card .vt{ font-size:14px; font-weight:700; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
.vip-item{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line); }
.vip-item:last-child{ border-bottom:none; }
.vip-item .ic{ width:30px; height:30px; border-radius:var(--r-sm); background:var(--gold-l); color:#8a6a1a; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.vip-item .vt2{ font-size:13px; font-weight:600; }
.vip-item .vs2{ font-size:11px; color:var(--ink2); margin-top:2px; }

/* publish */
.pub-box{ background:#fff; border-radius:var(--r-lg); padding:14px; }
.pub-box label{ font-size:11px; color:var(--ink3); display:block; margin:12px 0 6px; }
.pub-box label:first-child{ margin-top:0; }
.pub-input{ width:100%; border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; font-size:13px; outline:none; background:var(--bg-l); }
.pub-input:focus{ border-color:var(--brand); background:#fff; }
textarea.pub-input{ resize:none; height:90px; line-height:1.6; }
.pub-type{ display:flex; gap:8px; }
.pub-type .pt-chip{ flex:1; text-align:center; padding:9px 0; border-radius:var(--r-sm); background:var(--bg); font-size:12px; cursor:pointer; border:1px solid transparent; }
.pub-type .pt-chip.on{ background:var(--brand-l); border-color:var(--brand); color:var(--brand-d); font-weight:600; }
.pub-preview{ margin-top:12px; }

/* mine */
.mine-head{ position:relative; background:linear-gradient(135deg,#0C447C,#2a6fb8); border-radius:var(--r-lg); padding:18px; color:#fff; display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.mine-head .avatar{ width:54px; height:54px; font-size:22px; }
.mine-head .m-n{ font-size:16px; font-weight:700; }
.mine-head .m-s{ font-size:11px; opacity:.85; margin-top:3px; }
.mine-head .m-badge{ margin-left:auto; text-align:center; background:rgba(255,255,255,.15); border-radius:var(--r-md); padding:8px 12px; }
.mine-head .m-badge .n{ font-size:17px; font-weight:800; }
.mine-head .m-badge .l{ font-size:9px; opacity:.85; }
.mine-card{ background:#fff; border-radius:var(--r-lg); padding:14px; margin-bottom:12px; }
.mine-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:13px; }
.mine-row:last-child{ border-bottom:none; }
.mine-row .ic{ width:30px; height:30px; border-radius:var(--r-sm); background:var(--bg); display:flex; align-items:center; justify-content:center; }
.mine-row .arr{ margin-left:auto; color:var(--ink3); }

/* tabbar */
.tabbar{
  position:absolute; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--line);
  display:flex; z-index:20; padding-bottom:8px;
}
.tabbar .tab{ flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 0 4px; cursor:pointer; color:var(--ink3); font-size:11px; }
.tabbar .tab.on{ color:var(--brand); }
/* 20260920H：入口已对客户隐藏 → 老板/超管仍看得见，但标灰并带「隐」角标（不然他自己也找不着） */
.tabbar .tab.is-hid{ position:relative; opacity:.55; }
.tabbar .tab.is-hid::after{ content:'隐'; position:absolute; top:4px; left:50%; margin-left:8px;
  font-size:9px; line-height:1; padding:2px 3px; border-radius:3px; background:#98a0aa; color:#fff; }
.tabbar .tab svg{ display:block; }

/* 会员开通悬浮按钮（v=20260919G · 香老板二次拍板：挪到屏幕「左缘 + 垂直中部」）：
   28×88 贴左边（left:0），只露一条金边；不要横排长杠 —— 他认的是这种"书签感"。
   ⚠️ 垂直位置用 top:56% + translateY(-50%)：跟滚动内容脱钩（卡片有几张都不影响它），
      也方便以后一句话微调（改成 45% 就上移，别再去算 bottom 像素）。
   金走营销面色板 --vp-gold（与 poster.js / 会员页同源），字色 --vp-on-gold（深棕，不是白）。
   z-index 26：要盖住 .tabbar(20)，但必须低于 .mask(40) —— 否则弹层盖不住它。
   竖排靠 4 个 .fab-t 各占一行（不用 writing-mode：老 WebView 支持不齐）。 */
.vip-fab{
  position:absolute; left:0; top:56%; transform:translateY(-50%); z-index:26; width:28px; height:88px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:var(--vp-gold); color:var(--vp-on-gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0; box-shadow:var(--sh-2);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.vip-fab .fab-cr{ width:12px; height:11px; display:block; fill:currentColor; }
.vip-fab .fab-t, .more-fab .fab-t{ font-size:var(--fs-2); font-weight:500; line-height:1.15; }
.vip-fab:active, .more-fab:active{ opacity:.85; }
/* 已开通会员的身份牌（v=20260919M）：黑底金字，跟「未开通」的金底行动按钮反过来了 ——
   一个是「你已是会员」的标识（优越感），一个是「快来开通」的召唤，别做成一样。 */
.vip-fab.is-vip{ background:var(--vp-on-gold); color:var(--vp-gold); }
/* 避让态：滚动经过卡片操作按钮时淡化让位（不设 pointer-events:none —— 用户想点仍点得到，
   只是不抢「立即报名」的视线）。不加 transition：瞬时切换，不要"眼前有东西在动" */
.vip-fab.dim, .more-fab.dim{ opacity:.25; }

/* ---- 「查看更多沙龙」书签（v=20260920C，详情页专用）----
   香老板提的场景：**很多老板是被直接发一期海报/链接来的**，他不知道我们还有别的场次；
   详情页左上角那个返回箭头只对"从列表点进来"的人有意义，直链进来的人根本不会去按。
   所以挂一枚和会员书签**同材质、同位置**的贴边书签，点一下回沙龙列表。
   ⚠️ 为什么位置能直接复用 left:0 / top:56%：会员书签只在 salons/circle/bosses 显示
      （VIP_FAB_VIEWS 不含 'salon'），两个**永不同屏** —— 不会叠在一起。
   ⚠️ 6 个字比会员书签多 2 个：line-height 收到 1.1、gap 1px、上下 padding 6px，
      整条 ≈ 90px，和会员书签(88px)基本齐平，两条书签看起来是"一套的"。
   ⚠️ 金色沿用营销面色板 --vp-gold（与会员书签同源）：这一族的识别点就是"贴边 + 金"，
      详情页的主 CTA 是蓝色 btn-primary，金不会跟它抢"这是要点的按钮"的视线。 */
.more-fab{
  position:absolute; left:0; top:56%; transform:translateY(-50%); z-index:26; width:28px;
  padding:6px 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:var(--vp-gold); color:var(--vp-on-gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0; box-shadow:var(--sh-2);
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.more-fab .fab-t{ line-height:1.1; }
/* modals */
.mask{ position:absolute; inset:0; background:rgba(0,0,0,.45); z-index:40; display:none; align-items:flex-end; justify-content:center; }
.mask.show{ display:flex; }
.sheet{
  background:#fff; width:100%; border-radius:0; padding:16px 18px 24px;
  transform:translateY(100%); transition:transform .28s ease; max-height:100%; height:100%; overflow-y:auto; position:relative;
}
.mask.show .sheet{ transform:translateY(0); }
.sheet .grab{ display:none; }
/* 全屏页面的固定悬浮返回按钮（左上角 · 不随内容滚动 · 与视图页返回箭头风格一致） */
.sheet-x{ position:fixed; top:12px; left:10px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:60; }
.sheet .s-t{ font-size:15px; font-weight:700; text-align:center; margin-bottom:4px; }
.sheet .s-s{ font-size:11px; color:var(--ink3); text-align:center; margin-bottom:14px; }
/* 20261011Y 修「老板名片编辑页下面半屏空白」：sheet 撑满时内容区只有 62vh，
   剩余高度露出一大片白 —— 改成 flex 纵向布局，标题固定、表单区吃掉剩余高度并滚动。
   （不用魔法数字，标题换行/不同屏高都不会错位） */
#bossEditSheet{ display:flex; flex-direction:column; overflow:hidden; }
#bossEditBody{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
/* 升单登记 · 双 Tab */
.upsell-tab{ flex:1; text-align:center; padding:9px 0; font-size:12.5px; font-weight:600; border-radius:var(--r-sm); cursor:pointer; color:var(--ink2); background:transparent; user-select:none; }
.upsell-tab-on{ background:#fff; color:#0C447C; font-weight:700; box-shadow:var(--sh-1); }
.pay-box{ background:var(--bg-l); border-radius:var(--r-lg); padding:14px; margin-bottom:12px; }
.pay-box .p-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:6px 0; }
.pay-box .p-row .k{ color:var(--ink2); }
.pay-box .p-row .v{ font-weight:600; }
.pay-box .p-row .v.big{ font-size:19px; font-weight:800; color:var(--red); }
.pay-wx{ display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px; margin-bottom:12px; }
.pay-wx .wx-logo{ width:26px; height:26px; border-radius:var(--r-xs); background:#07C160; display:flex; align-items:center; justify-content:center; }
.pay-wx .t{ font-size:13px; font-weight:600; }
.pay-wx .s{ font-size:10px; color:var(--ink3); }
.pay-wx .chk{ margin-left:auto; width:18px; height:18px; border-radius:50%; border:1.5px solid #07C160; background:#07C160; display:flex; align-items:center; justify-content:center; }
.paying{ display:none; flex-direction:column; align-items:center; justify-content:center; padding:26px 0 16px; }
.paying.show{ display:flex; }
.spinner{ width:42px; height:42px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--brand); animation:spin 0.8s linear infinite; margin-bottom:14px; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.pay-done{ display:none; flex-direction:column; align-items:center; padding:20px 0 14px; }
.pay-done.show{ display:flex; }
.pay-done .ok{ width:56px; height:56px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.pay-done .t{ font-size:15px; font-weight:700; }
.pay-done .s{ font-size:11px; color:var(--ink3); margin-top:4px; }

.share-card{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); margin-bottom:14px; background:#fff;
}
.share-card .sc-head{ background:linear-gradient(135deg,#0C447C,#2a6fb8); color:#fff; padding:14px; }
.share-card .sc-head .a{ font-size:12px; font-weight:700; }
.share-card .sc-head .b{ font-size:10px; opacity:.85; margin-top:3px; }
.share-card .sc-body{ padding:14px; font-size:13px; color:var(--ink2); line-height:1.7; }
.share-card .sc-body b{ color:var(--ink); }
.share-card .sc-foot{ background:var(--bg); padding:8px 14px; font-size:10px; color:var(--ink3); display:flex; justify-content:space-between; }

/* demo console */
.console{
  position:fixed; right:18px; bottom:24px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.console .panel{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-3); width:260px; padding:16px;
  display:none; border:1px solid var(--line);
}
.console .panel.show{ display:block; }
.console .panel .c-t{ font-size:13px; font-weight:700; margin-bottom:8px; color:var(--ink); }
.role-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.role-grid .rc{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:9px 6px; text-align:center; cursor:pointer; font-size:12px; background:var(--bg-l);
}
.role-grid .rc.on{ border-color:var(--brand); background:var(--brand-l); color:var(--brand-d); font-weight:600; }
.role-grid .rc .rl{ font-size:10px; color:var(--ink3); margin-top:2px; }
.console .c-acts{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.console .c-btn{ border:1px solid var(--line); background:#fff; border-radius:var(--r-sm); padding:9px; font-size:12px; cursor:pointer; color:var(--ink); }
.console .c-btn.danger{ color:var(--red); border-color:var(--red-b); }
.console .fab{
  width:50px; height:50px; border-radius:50%; background:#14161a; color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-3); border:none;
}

.toast{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); background:rgba(20,22,26,.88); color:#fff;
  font-size:13px; padding:10px 18px; border-radius:var(--r-md); z-index:70; display:none; max-width:80%; text-align:center;
}
.toast.show{ display:block; animation:tp .3s ease; }
@keyframes tp{ from{ opacity:0; transform:translate(-50%,-44%);} to{ opacity:1; transform:translate(-50%,-50%);} }

.member-tip{ font-size:10px; color:var(--ink3); text-align:center; padding:8px 0 2px; }
.empty{ text-align:center; color:var(--ink3); font-size:12px; padding:40px 0; }
.empty .e-big{ font-size:30px; margin-bottom:10px; color:var(--ink3); }

/* salon */
.salon-card{ background:#fff; border-radius:var(--r-lg); padding:14px; margin-bottom:12px; box-shadow:var(--sh-1); }
.salon-cover{ position:relative; border-radius:var(--r-md); height:140px; overflow:hidden; margin-bottom:12px; background:linear-gradient(135deg,#0C447C,#2a6fb8); display:flex; align-items:center; }
.salon-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.salon-cover .s-title-overlay{ position:absolute; bottom:0; left:0; right:0; padding:40px 12px 10px; background:linear-gradient(transparent, rgba(0,0,0,.65)); color:#fff; font-size:13px; font-weight:700; text-align:center; }
.salon-cover .s-info-card{ display:flex; align-items:center; width:100%; height:100%; padding:14px 16px; box-sizing:border-box; color:#fff; }
.salon-cover .s-info-card .s-left{ flex:1; display:flex; flex-direction:column; gap:5px; }
.salon-cover .s-info-card .s-left .s-line{ font-size:13px; font-weight:600; line-height:1.4; text-shadow:0 1px 3px rgba(0,0,0,.25); }
.salon-cover .s-info-card .s-left .s-title-line{ font-size:18px; font-weight:800; line-height:1.3; }
.salon-cover .s-info-card .s-right{ text-align:right; padding-left:10px; }
.salon-cover .s-info-card .s-right .s-big{ font-size:30px; font-weight:800; line-height:1; }
.salon-cover .s-info-card .s-right .s-sub{ font-size:11px; opacity:.9; margin-top:3px; }
.salon-cover .s-tag{ position:absolute; left:10px; top:10px; background:rgba(0,0,0,.4); color:#fff; font-size:10px; padding:2px 8px; border-radius:var(--r-sm); }
.salon-cover .s-status{ position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.4); color:#fff; font-size:10px; padding:2px 8px; border-radius:var(--r-sm); z-index:2; }
/* 名额紧张态（K 版）：白底 + 暖色字，在绿色封面上最跳，只在「仅剩 N 人」时出现 */
.s-status.hot{background:#fff;color:var(--warn);font-weight:700;}
/* v=20261017A：活动类型色条（沙龙 / 游学）—— 贴卡片右上角。
   四个角的归属：左上「已有 N 人报名」／右上【类型】／右下「报名中 · 限 N 人」／底部标题区。
   ⛔ 别做成半透明白底胶囊：封面图底色不固定，彩色块在任意照片上都不保证可读；
      现在是实色贴边条（右侧贴死、只有左端圆角），像一张贴纸，任何封面上都清楚。 */
.salon-cover .s-kind{ position:absolute; top:10px; right:0; z-index:3; height:21px; line-height:21px;
  padding:0 10px 0 13px; border-radius:11px 0 0 11px; color:#fff; font-size:11px; font-weight:700; letter-spacing:.5px;
  box-shadow:0 1px 4px rgba(0,0,0,.18); }
.salon-cover .s-kind.salon{ background:#185FA5; }
.salon-cover .s-kind.tour{ background:#0F6E56; }
.salon-cover .s-kind.course{ background:#BA7517; }
/* ⛔ 20261026A 起详情页 hero 不再挂类型色条（.d-kind 已弃用，规则已删）。
   类型改由 hero 整块渐变承担：沙龙蓝 / 游学墨绿，见 js/salon.js 里的 heroBg。
   改动动机：深绿方块贴在蓝色渐变卡上属于撞色，方角还顶着卡片 16px 圆角，是纯视觉噪音。 */
/* 报名页/凭证页里的类型小条（行内，不贴边） */
.kind-inline{ display:inline-flex; align-items:center; height:19px; padding:0 9px; border-radius:9.5px;
  color:#fff; font-size:10.5px; font-weight:700; vertical-align:middle; }
.kind-inline.salon{ background:#185FA5; }
.kind-inline.tour{ background:#0F6E56; }
.kind-inline.course{ background:#BA7517; }
/* 游学流程时间轴（v=20261017A）：行首写了 HH:MM 的条目渲染成左竖线 + 时间加粗 */
.tour-tl{ border-left:2px solid #d9ece5; padding-left:13px; margin:2px 0 0 3px; }
.tour-tl-item{ position:relative; padding-bottom:11px; }
.tour-tl-item:last-child{ padding-bottom:0; }
.tour-tl-item::before{ content:''; position:absolute; left:-18px; top:5px; width:8px; height:8px; border-radius:50%; background:#0F6E56; }
.tour-time{ font-size:12.5px; font-weight:800; color:#0F6E56; }
.tour-txt{ font-size:12px; color:var(--ink2); line-height:1.7; }
/* 线下课用同一套时间轴，只换色（琥珀）—— 课程安排常写 HH:MM，排版跟游学流程完全一致 */
.tour-tl.course{ border-left-color:#f2e0c0; }
.tour-tl.course .tour-tl-item::before{ background:#BA7517; }
.tour-tl.course .tour-time{ color:#a3741b; }
.salon-info .s-title{ font-size:14px; font-weight:700; line-height:1.45; }
.salon-info .s-meta{ font-size:11px; color:var(--ink2); margin-top:6px; line-height:1.8; }
.salon-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px; }
/* v=20261027ZL 老板端沙龙卡的操作按钮行（报名/编辑/复制/删除）。
   他 2026-10-28 问「复制和删除中间隔这么长是什么艺术」—— 根因是 .salon-cta{margin-left:auto}
   这个老规矩（当年 footer 只有「价格 + 报名按钮」两个元素，靠它把报名按钮推到右边）。
   现在一行 4 个按钮，剩余空间全被那一个 auto 吃掉 → 中间一大片空白。
   ⭐ 操作行改成紧凑靠左、统一 8px 间隔；按钮多了允许换行，不再靠 auto 硬推。 */
.salon-foot.is-actions{ justify-content:flex-start; gap:6px; flex-wrap:wrap; }
/* 4 个按钮要在 375 屏（内容宽 315px）单行放下：.btn-sm 默认左右各 12px、图标间距 6px，
   实测 4 个加起来 304px，加 8px 间距就溢出 13px → 删除被挤到第二行。
   这里收紧到 9px / 4px，总宽压到 ~272px，单行稳。⛔ 改文案时先量宽度。 */
.salon-foot.is-actions .btn-sm{ padding:6px 9px; }
.salon-foot.is-actions .btn{ gap:4px; }
.salon-price .p1{ font-size:14px; color:var(--brand); font-weight:600; }
.salon-price .p1 s{ font-size:11px; color:var(--ink3); font-weight:400; margin-left:5px; }
.salon-price .p2{ font-size:10px; color:var(--ink3); margin-top:2px; }
/* 「开会员立省 ¥X」可点进会员页（v=20260919D，v=20261010N 去掉下划线）。
   他明确要求不划线 —— 可点提示改由「主色 + 加粗 + › 箭头」承担，别再改回 underline。 */
.salon-price .p2-link{ color:var(--brand); font-weight:600; }
.salon-cta{ margin-left:auto; }
/* 报名人数 chip（v=20261010E）：左上角，避开右下角的名额状态角标 */
.salon-cover .s-count{ position:absolute; left:10px; top:10px; background:rgba(0,0,0,.42); color:#fff; font-size:10px; padding:3px 8px; border-radius:var(--r-sm); z-index:2; }
/* 有封面时（v=20261010H）：封面图多半是活动海报、图底部自带一行文字，
   原先把标题居中压在底部、名额状态角标也压在右下 → 长标题直接和角标叠在一起。
   改成三行结构：标题单独占底部的上一行（左对齐、单行省略），
   下面一行左侧放报名人数、右侧放名额状态，各占一边不打架。 */
/* v=20261010K：内容从两行变三行（标题/日期/地址），底部内边距收紧到 11px 与右下角标同行；
   渐变加浓到 .88 并前移到 62%，保证三行文字压在图亮部也读得清。 */
.salon-cover.has-cover .s-title-overlay{ bottom:0; padding:46px 12px 11px; text-align:left; background:linear-gradient(transparent, rgba(0,0,0,.88) 62%); }
/* 标题 / meta 各自单行省略（省略号要放在内层，放 overlay 上会把第二行整条裁掉） */
/* v=20261010K：13px → 17px（他反馈「小到快看不见」）。对齐无封面信息卡的 18px 标题，
   两者切换时字号不跳。 */
.salon-cover.has-cover .s-t-title{ font-size:17px; font-weight:800; line-height:1.32; text-shadow:0 1px 4px rgba(0,0,0,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.salon-cover.has-cover .s-t-meta{ font-size:11.5px; font-weight:500; opacity:.88; line-height:1.5; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* v=20261010L：地址行（左下角，原在右上角 chip）。max-width 给右下角「报名中 · 限 N 人」让位，
   长地址（如「深圳市龙华区民治大道…」）自动省略号，不会跟角标叠字。
   ⚠️ 124px 不是拍脑袋：角标实测最宽 94px（「报名中 · 限 30 人」）+ 右边距 12px + 安全间距 6px，
      再留 12px 容错。写成 92px 时实测地址行右边界 254 / 角标左边界 252 → 叠了 2px。 */
.salon-cover .s-t-place{ font-size:11.5px; font-weight:600; opacity:.94; line-height:1.5; margin-top:2px; max-width:calc(100% - 124px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 有封面时（20261010J）图片满宽：卡片自带 14px 内边距，封面图被四周白边"框小"了，
   看着不够饱满。改为图片顶到卡片边缘（顶部圆角与卡片一致），
   价格 / 按钮区再把左右内边距补回来。高度按常见封面比例 1.93:1 取 176px
   （卡片内容宽约 340px），比原来的 140px 不再压扁。 */
.salon-card.has-cover{ padding:0; }
.salon-card.has-cover .salon-cover{ margin:0; border-radius:var(--r-lg) var(--r-lg) 0 0; height:176px; }
.salon-card.has-cover .salon-foot{ margin-top:0; padding:12px 14px 14px; }
/* 四角分布：左上「已有 N 人报名」／右上「📍城市」／右下「报名中 · 限 N 人」／底部标题+日期 */
.salon-cover.has-cover .s-count{ top:10px; bottom:auto; left:12px; }
.salon-cover.has-cover .s-status{ top:auto; bottom:9px; right:12px; }
/* v=20261010K：.s-city（右上角城市 chip）已废弃 —— 地址改由 .s-t-place 承担。 */
/* 往期回顾：紧凑列表，不喧宾夺主 */
.past-head{ display:flex; align-items:baseline; justify-content:space-between; font-size:13px; font-weight:700; color:var(--ink); margin:20px 0 10px; padding:0 2px; }
.past-list{ background:#fff; border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden; }
.past-card{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:0.5px solid var(--line); cursor:pointer; }
.past-card:last-child{ border-bottom:none; }
.past-card:active{ background:var(--bg); }
.past-date{ font-size:11px; color:var(--ink3); font-weight:600; flex-shrink:0; width:36px; }
.past-main{ flex:1; min-width:0; }
.past-title{ font-size:13px; font-weight:600; color:var(--ink); line-height:1.4; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.past-sub{ font-size:11px; color:var(--ink3); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.past-arrow{ font-size:18px; color:var(--ink3); flex-shrink:0; line-height:1; }

/* ticket-card (凭证列表 — 门票券样式) */
.ticket-card {
  background: #fff;
  border-radius: var(--r-lg);
  margin-bottom: 14px;
  overflow: hidden;
  box-shadow: var(--sh-2);
  cursor: pointer;
  display: flex;
  align-items: stretch;
}
.ticket-card .tkc-date {
  color: #fff;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  flex-shrink: 0;
  text-align: center;
}
.ticket-card .tkc-date .day {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.ticket-card .tkc-date .mon {
  font-size: 11px;
  opacity: .9;
  margin-top: 3px;
}
.ticket-card .tkc-date .week {
  font-size: 9px;
  opacity: .75;
  margin-top: 2px;
}
.ticket-card .tkc-main {
  flex: 1;
  min-width: 0;
  padding: 12px 10px 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.ticket-card .tkc-main::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  border-left: 1px dashed rgba(0,0,0,.12);
}
.ticket-card .tkc-info {
  flex: 1;
  min-width: 0;
  padding-left: 10px;
}
.ticket-card .tkc-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 5px;
}
.ticket-card .tkc-meta {
  font-size: 11px;
  color: var(--ink2);
  line-height: 1.7;
}
.ticket-card .tkc-btn {
  flex-shrink: 0;
  margin-left: 10px;
}
.ticket-card .tkc-btn button {
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: 12px;
  white-space: nowrap;
}

/* ticket-list group */
.ticket-group{ margin-bottom: 8px; }
.ticket-group-title{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px 10px; font-size: 14px; font-weight: 700; color: var(--ink);
  cursor: pointer; user-select: none;
}
.ticket-group-title .arrow{
  font-size: 12px; color: var(--ink3); transition: transform .2s;
}
.ticket-group-title.collapsed .arrow{ transform: rotate(-90deg); }
.ticket-group-body{ transition: max-height .25s ease, opacity .2s; overflow: hidden; }
.ticket-group-body.collapsed{ max-height: 0; opacity: 0; }
.ticket-group-body.open{ max-height: 2000px; opacity: 1; }
/* v=20261027ZQ：已结束 / 已退款 收起后「一行一张凭证」——
   他 10-28：「全部噼里啪啦这么长一串」，一屏 7 张卡片换成 7 行。
   点整行仍进详情，凭证内容一个字没少。 */
.tk-row{
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 10px; padding: 9px 12px; margin-bottom: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); cursor: pointer;
}
.tk-row:active{ background: #f2f3f5; }
.tk-row-d{ font-size: 11.5px; color: var(--ink3); font-weight: 700; flex: none; min-width: 40px; }
.tk-row-t{ flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-row-s{ flex: none; font-size: 11px; font-weight: 700; }
.tk-row-s.red{ color: var(--red); }
.tk-row-s.gray{ color: var(--ink3); }
.tk-row-a{ flex: none; color: var(--ink3); font-size: 15px; line-height: 1; }

/* v=20261027ZR 沙龙/游学 类型标：两类都标，但只有游学上色（灰做底，一屏一个强调色）
   v=20261028H：加线下课。全站类型色统一 —— 沙龙蓝(卡片)/灰(凭证)、游学墨绿、线下课琥珀。 */
.tk-kind{ display: inline-flex; align-items: center; flex: none; height: 16px; padding: 0 6px;
  border-radius: 8px; font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle; margin-right: 5px; }
.tk-kind.salon{ background: #f0f1f3; color: #8a8a8a; }
.tk-kind.tour{ background: #e6f7ef; color: #0F6E56; }
.tk-kind.course{ background: #FFF3E0; color: #a3741b; }
/* 顶部类型筛选：手里的票有两种以上类型时才出现 */
.tk-filter{ display: flex; gap: 6px; margin: 0 4px 9px; }
.tkf{ padding: 5px 12px; border-radius: 14px; font-size: 11.5px; font-weight: 700;
  background: #fff; color: #6b6b6b; border: 1px solid #e6e7eb; cursor: pointer; }
.tkf.on{ background: #0C447C; color: #fff; border-color: #0C447C; }

/* ticket */
.ticket{ background:#fff; border-radius:var(--r-lg); overflow:hidden; margin:4px 2px 16px; box-shadow:var(--sh-2); }
.ticket .tk-head{ background:linear-gradient(135deg,#0C447C,#2a6fb8); color:#fff; padding:14px; display:flex; align-items:center; justify-content:space-between; }
.ticket .tk-head .a{ font-size:18px; font-weight:800; text-align:center; }
.ticket .tk-head .b{ font-size:10px; opacity:.85; margin-top:4px; text-align:center; }
.ticket .tk-body{ padding:16px; }
.ticket .tk-title{ font-size:15px; font-weight:700; line-height:1.5; }
.ticket .tk-meta{ font-size:11px; color:var(--ink2); margin-top:8px; line-height:1.9; }
.ticket .tk-code{ display:flex; align-items:center; gap:14px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--line); }
.ticket .qr{ width:84px; height:84px; background:var(--bg); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ticket .tk-num{ font-size:12px; color:var(--ink2); line-height:2; }
.ticket .tk-num b{ color:var(--ink); font-size:14px; letter-spacing:2px; }

/* course */
.course-card{ background:#fff; border-radius:var(--r-lg); padding:14px; margin-bottom:12px; box-shadow:var(--sh-1); display:flex; gap:12px; }
.course-cover{ width:92px; height:92px; border-radius:var(--r-md); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; font-weight:800; position:relative; }
.course-cover .cc-tag{ position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.4); color:#fff; font-size:9px; padding:1px 6px; border-radius:var(--r-xs); }
.course-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.course-info .c-title{ font-size:14px; font-weight:700; line-height:1.45; }
.course-info .c-meta{ font-size:11px; color:var(--ink2); margin-top:5px; line-height:1.7; }
.course-foot{ margin-top:auto; display:flex; align-items:center; }
.course-price .p1{ font-size:14px; font-weight:800; color:#c9962e; }
.course-price .p1.free{ color:var(--green); }
.course-price .p2{ font-size:10px; color:var(--ink3); margin-top:2px; }
.lesson-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.lesson-row:last-child{ border-bottom:none; }
.lesson-row .l-ic{ width:30px; height:30px; border-radius:50%; background:var(--brand-l); color:var(--brand); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lesson-row .l-ic.lock{ background:var(--bg); color:var(--ink3); }
.lesson-row .l-t{ font-size:13px; flex:1; line-height:1.4; }
.lesson-row .l-dur{ font-size:11px; color:var(--ink3); flex-shrink:0; }
.trial-chip{ font-size:9px; background:var(--green-l); color:var(--green); padding:1px 6px; border-radius:var(--r-sm); margin-left:6px; font-weight:600; }
.replay-chip{ font-size:9px; background:var(--gold-l); color:#8a6a1a; padding:1px 6px; border-radius:var(--r-sm); margin-left:6px; font-weight:600; }

/* distro */
.distro-hero{ background:linear-gradient(135deg,#534AB7,#7a6fd0); border-radius:var(--r-lg); padding:16px; color:#fff; margin-bottom:12px; }
.distro-hero .h1{ font-size:16px; font-weight:700; }
.distro-hero .h2{ font-size:11px; opacity:.85; margin-top:3px; }
/* v=20261019C：佣金比例改成小胶囊 —— 原来挤在 h2 一行里被截断，且看不出「通用/定向」 */
.distro-hero .h-rates{ display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.distro-hero .h-rate{ font-size:10.5px; font-weight:700; line-height:1; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.16); color:#fff; }
.distro-hero .d-stats{ display:flex; gap:0; margin-top:14px; background:rgba(255,255,255,.12); border-radius:var(--r-md); padding:10px 0; }
.distro-hero .d-stats .ds{ flex:1; text-align:center; border-right:1px solid rgba(255,255,255,.18); }
.distro-hero .d-stats .ds:last-child{ border-right:none; }
.distro-hero .d-stats .n{ font-size:16px; font-weight:800; }
.distro-hero .d-stats .l{ font-size:9.5px; opacity:.85; margin-top:2px; }
/* v=20261016C：四格（加「待打款」）→ 每格更窄，数字降一档防溢出；四格均可点跳佣金明细 */
.distro-hero .d-stats.is4 .n{ font-size:14px; letter-spacing:-.3px; }
.distro-hero .d-stats.is4 .l{ font-size:9px; margin-top:3px; }
.distro-hero .d-stats .ds{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
.distro-hero .d-stats .ds:active{ background:rgba(255,255,255,.14); }
.dist-goods{ background:#fff; border-radius:var(--r-lg); padding:14px; margin-bottom:12px; }
.dist-goods .dg-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.dist-goods .dg-row:last-child{ border-bottom:none; }
.dist-goods .dg-ic{ width:38px; height:38px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.dist-goods .dg-info{ flex:1; min-width:0; }
.dist-goods .dg-t{ font-size:13px; font-weight:600; }
.dist-goods .dg-s{ font-size:10.5px; color:var(--ink2); margin-top:3px; }
.dist-goods .dg-s b{ color:#c9962e; }
.dist-record{ display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:12px; }
.dist-record.dist-card{ background:var(--bg-l); border-radius:var(--r-sm); padding:10px 12px; border-bottom:none; margin-bottom:8px; }
.dist-record.dist-card:last-child{ margin-bottom:0; }
.dist-record.dist-card:active{ background:var(--bg); }
.dist-record:last-child{ border-bottom:none; }
.dist-record .dr-ic{ width:30px; height:30px; border-radius:var(--r-sm); background:var(--bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.dist-record .dr-info{ flex:1; min-width:0; }
.dist-record .dr-t{ font-size:12.5px; font-weight:600; }
.dist-record .dr-s{ font-size:10px; color:var(--ink3); margin-top:2px; }
.dist-record .dr-amt{ font-size:14px; font-weight:800; color:var(--green); }
.dist-record .dr-amt.pending{ color:#c9962e; }
.dist-chip{ font-size:9px; padding:2px 7px; border-radius:var(--r-sm); font-weight:600; white-space:nowrap; }
.dist-chip.ok{ background:var(--green-l); color:var(--green); }
.dist-chip.wait{ background:var(--gold-l); color:#8a6a1a; }
/* v=20261019C：提现记录（分销员对账单） */
.po-card{ background:#fff; border-radius:var(--r-lg); padding:13px 14px; margin-bottom:10px; cursor:pointer; }
.po-card:active{ background:#fafafa; }
.po-top{ display:flex; align-items:center; gap:8px; }
.po-amt{ font-size:18px; font-weight:800; color:var(--ink1); line-height:1.25; }
.po-meta{ font-size:10.5px; color:var(--ink3); margin-top:3px; line-height:1.5; }
.po-chip{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; flex-shrink:0; }
.po-chip.wait{ background:#f1ecff; color:#6b3fa0; }
.po-chip.paid{ background:var(--green-l); color:var(--green); }
.po-arrow{ font-size:15px; color:var(--ink3); transform:rotate(90deg); flex-shrink:0; }
.po-arrow.up{ transform:rotate(-90deg); }
.po-detail{ margin-top:11px; padding-top:10px; border-top:1px solid var(--line); }
.po-row{ display:flex; justify-content:space-between; font-size:11.5px; line-height:1.9; }
.po-row .k{ color:var(--ink2); }
.po-item{ display:flex; align-items:center; gap:7px; font-size:11.5px; line-height:1.7; padding:2px 0; }
.po-kind{ font-size:9.5px; font-weight:700; color:var(--ink2); background:var(--bg); border-radius:4px; padding:1px 5px; flex-shrink:0; }
.po-it-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink1); }
.po-it-amt{ font-weight:700; color:#a3741b; flex-shrink:0; }
.po-it-amt.off{ color:#9aa0a6; text-decoration:line-through; }
.poster-link{ background:var(--bg); border:1px dashed var(--line2); border-radius:var(--r-sm); padding:9px 12px; font-size:12px; color:var(--brand-d); font-weight:600; letter-spacing:.5px; text-align:center; margin-top:10px; }

/* ===== 老板工作台 ===== */
/* 报表蓝卡 v2（2026-09-07）：主指标大 + 副指标小卡，流水与收入 + 数据报表通用 */
.bd-hero-v2{ background:linear-gradient(135deg,#0C447C,#2a6fb8); border-radius:var(--r-lg); padding:18px 18px 14px; color:#fff; margin-bottom:12px; }
.bd-hero-v2 .h-label{ font-size:11px; opacity:.8; letter-spacing:.5px; }
.bd-hero-v2 .h-row{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.bd-hero-v2 .h-main{ font-size:30px; font-weight:700; line-height:1.2; }
.bd-hero-v2 .h-trend{ display:inline-block; font-size:11px; padding:3px 8px; border-radius:var(--r-xs); background:rgba(159,225,203,.22); color:var(--green-b); vertical-align:middle; }
.bd-hero-v2 .h-sub-grid{ display:flex; gap:8px; margin-top:14px; }
.bd-hero-v2 .h-sub{ flex:1; background:rgba(255,255,255,.1); border-radius:var(--r-sm); padding:8px 10px; min-width:0; }
.bd-hero-v2 .h-sub .l{ font-size:11px; opacity:.78; }
.bd-hero-v2 .h-sub .n{ font-size:17px; font-weight:700; line-height:1.3; margin-top:2px; }
.bd-hero-v2 .h-sub.warn .l{ color:#FAC775; }
.bd-hero-v2 .h-sub.bad .l{ color:var(--red-b); }
.bd-hero{ background:linear-gradient(135deg,#0C447C,#2a6fb8); border-radius:var(--r-lg); padding:16px 14px; color:#fff; margin-bottom:12px; }
.bd-hero .h1{ font-size:16px; font-weight:800; }
.bd-hero .h2{ font-size:10.5px; opacity:.85; margin-top:2px; }
.bd-grid{ display:flex; margin-top:12px; background:rgba(255,255,255,.12); border-radius:var(--r-md); padding:10px 0; }
.bd-cell{ flex:1; text-align:center; border-right:1px solid rgba(255,255,255,.18); }
.bd-cell:last-child{ border-right:none; }
.bd-cell .n{ font-size:16px; font-weight:800; }
.bd-cell .l{ font-size:9.5px; opacity:.85; margin-top:2px; }
.bd-todo{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.bd-todo:last-child{ border-bottom:none; }
.bd-todo .ti{ width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.bd-todo .tt{ flex:1; font-size:12.5px; font-weight:600; }
.bd-todo .ts{ font-size:10.5px; color:var(--ink3); margin-top:2px; }
.bd-rev{ display:flex; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.bd-rev:last-child{ border-bottom:none; }
.bd-rev .ri{ width:28px; height:28px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; margin-right:10px; }
.bd-rev .rt{ flex:1; font-size:12px; font-weight:600; }
.bd-rev .rs{ font-size:10px; color:var(--ink3); margin-top:1px; }
.bd-rev .ra{ font-size:14px; font-weight:800; color:var(--green); text-align:right; }
.bd-rev .ra .rview{ display:inline-block; font-size:10.5px; color:var(--brand); background:#e6f1fb; border-radius:var(--r-xs); padding:3px 8px 3px 9px; margin-left:6px; font-weight:700; vertical-align:middle; }
.bd-rev.clickable{ cursor:pointer; transition:background .12s; border-radius:var(--r-sm); padding-left:6px; padding-right:6px; margin-left:-6px; margin-right:-6px; }
.bd-rev.clickable:hover{ background:var(--bg-l); }
.bd-rev.clickable:active{ background:var(--line); }
.bd-rev.pend{ background:var(--gold-l); border-radius:var(--r-sm); padding-left:6px; padding-right:6px; margin-left:-6px; margin-right:-6px; border-bottom-color:transparent; }
.bd-rev.pend.clickable:hover{ background:var(--gold-l); }
/* ZW：收入类型图标配色（🎫 沙龙 / 🤝 引荐 / 👑 会员），状态不再改图标 */
.bd-rev .ri.k-salon{ background:#e6f1fb; color:#1a6fb5; }
.bd-rev .ri.k-refer{ background:var(--brand-l); color:#6b46c1; }
.bd-rev .ri.k-member{ background:var(--gold-l); color:#a3741b; }
/* 已退款：整行灰化（右侧红色「已退款」文字照常显示） */
.bd-rev.refunded{ opacity:.62; }
.bd-rev.refunded .ra{ color:var(--ink3); }
.bd-rev .elapsed{ font-size:9.5px; color:#c2571b; font-weight:700; margin-top:2px; }
.bd-rev .rpay{ display:inline-block; font-size:10.5px; color:#0F6E56; background:#E1F5EE; border-radius:var(--r-xs); padding:3px 8px; margin-top:4px; font-weight:700; cursor:pointer; border:none; }
.bd-rev .rpay:active{ background:var(--green-b); }
.bd-bar{ height:5px; border-radius:var(--r-xs); background:var(--bg); overflow:hidden; margin-top:5px; }
.bd-bar i{ display:block; height:100%; border-radius:var(--r-xs); background:linear-gradient(90deg,#0C447C,#2a6fb8); }

/* ===== 流水与收入 2.0 (2026-09-07 M)：时间区间 chips / 筛选 chips / 柱状图带值 ===== */
.fin-period-row{ display:flex; align-items:center; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 0 4px; scrollbar-width:none; }
.fin-period-row::-webkit-scrollbar{ display:none; }
.fin-period-row .pc{ flex-shrink:0; font-size:11.5px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink2); cursor:pointer; white-space:nowrap; font-weight:600; }
.fin-period-row .pc.act{ background:var(--brand); color:#fff; border-color:var(--brand); }
.fin-period-row .pc.sel{ background:var(--gold-l); color:#8a5a00; border-color:#f0c264; }
.fin-period-row .custombox{ display:none; flex-shrink:0; gap:4px; align-items:center; }
.fin-period-row .custombox.show{ display:flex; }
.fin-period-row .custombox input{ font-size:11px; padding:4px 6px; border:1.5px solid var(--line); border-radius:var(--r-sm); outline:none; background:#fff; width:108px; }
.fin-chart-wrap{ padding:10px 0 4px; }
.fin-chart{ display:flex; align-items:flex-end; gap:3px; height:78px; }
.fin-chart .bar{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; cursor:pointer; position:relative; }
.fin-chart .bar .b{ width:100%; background:var(--line2); border-radius:var(--r-xs) var(--r-xs) 0 0; min-height:3px; }
.fin-chart .bar.has .b{ background:#0C447C; }
.fin-chart .bar.peak .b{ background:linear-gradient(180deg,#2a6fb8,#0C447C); box-shadow:0 0 0 1px rgba(12,68,124,.15); }
.fin-chart .bar .d{ font-size:9px; color:var(--ink3); margin-top:3px; line-height:1; font-weight:600; }
.fin-chart .bar .a{ font-size:10px; color:var(--ink); margin-top:2px; line-height:1; font-weight:700; }
.fin-chart .bar.peak .a{ color:var(--brand-d); }
.fin-chart-tt{ font-size:10px; color:var(--ink3); margin-top:2px; text-align:center; min-height:14px; }
.fin-chart-sum{ font-size:11px; color:var(--ink2); margin-top:6px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px; }
.fin-chart-sum .sa{ font-weight:800; color:var(--ink); font-size:13px; }

.fin-filter{ background:#fff; border-radius:var(--r-md); padding:11px 12px 12px; margin:0 0 12px; border:1px solid var(--line); }
.fin-filter .ft{ font-size:11.5px; font-weight:700; color:var(--ink2); margin-bottom:6px; margin-top:8px; display:flex; align-items:center; justify-content:space-between; }
.fin-filter .ft:first-child{ margin-top:0; }
.fin-filter .ft .tog{ font-size:10.5px; color:var(--brand); cursor:pointer; font-weight:600; }
.fin-filter .ft .tog .arr{ display:inline-block; transition:transform .12s; }
.fin-filter .ft .tog.open .arr{ transform:rotate(180deg); }
.fin-filter .fr{ display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.fin-filter .fr::-webkit-scrollbar{ display:none; }
.fin-filter .fc{ flex-shrink:0; font-size:11.5px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink2); cursor:pointer; white-space:nowrap; font-weight:600; }
.fin-filter .fc.act{ background:var(--brand); color:#fff; border-color:var(--brand); }
.fin-filter .fc.warn.act{ background:#d97706; border-color:#d97706; }
.fin-filter .adva{ display:none; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); }
.fin-filter .adva.open{ display:block; }
.fin-filter .adva .field{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.fin-filter .adva .field:first-child{ margin-top:0; }
.fin-filter .adva .field .lb{ font-size:11px; color:var(--ink2); width:64px; flex-shrink:0; }
.fin-filter .adva select,
.fin-filter .adva input{ flex:1; min-width:0; font-size:12px; padding:7px 9px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; outline:none; }
.fin-filter .adva .field.row{ flex-wrap:wrap; }
.fin-filter .adva .field.row .lb{ width:auto; }
.fin-filter .adva .field.row select,
.fin-filter .adva .field.row input{ flex:1 1 0; min-width:130px; }
/* 高级筛选 · 搜索选择器（沙龙主题 / 分销渠道） */
.fin-filter .adva .fin-pick-box{ flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:12px; padding:7px 9px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; cursor:pointer; }
.fin-filter .adva .fin-pick-box .v{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fin-filter .adva .fin-pick-box .v.placeholder{ color:var(--ink3); }
.fin-filter .adva .fin-pick-box .arr{ color:var(--ink3); font-size:11px; flex-shrink:0; }
.fin-pick-item{ display:flex; align-items:center; padding:11px 10px; border-radius:var(--r-sm); font-size:13px; cursor:pointer; }
.fin-pick-item:active{ background:var(--bg); }
.fin-pick-item.on{ background:var(--brand-l); color:var(--brand); font-weight:700; }
.fin-chosen{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 14px 0; font-size:11.5px; color:var(--ink2); }
.fin-chosen .lb{ color:var(--ink3); font-weight:600; margin-right:2px; }
.fin-chosen .ch{ display:inline-flex; align-items:center; gap:3px; background:#e6f1fb; color:var(--brand-d); border-radius:999px; padding:3px 4px 3px 9px; font-weight:600; }
.fin-chosen .ch .x{ font-size:13px; color:var(--brand); cursor:pointer; padding:0 4px; line-height:1; font-weight:700; }
.fin-chosen .ch .x:hover{ color:#791F1F; }
.fin-chosen .clr{ background:transparent; color:var(--ink3); border:none; padding:3px 8px; font-size:11px; cursor:pointer; font-weight:600; }

.fin-chosen .clr:hover{ color:#791F1F; }

.tbl tr.rowlink.tag-pending{ background:var(--gold-l); }
.tbl tr.rowlink.tag-pending:hover{ background:var(--gold-l); }
.tbl tr.rowlink.tag-pending td:first-child{ border-left:3px solid #d97706; }
.tbl .tag-pending{ background:var(--gold-l); color:#a3741b; }
.tbl .tag-paid{ background:#E1F5EE; color:#0F6E56; }
.tbl .tag-refund{ background:var(--red-l); color:#c2571b; }
.tbl .tag{ display:inline-block; font-size:10px; padding:2px 8px; border-radius:var(--r-sm); font-weight:700; }
/* 2026-09-11 ZB：分销员业绩看板独立页样式 */
.ds-stat{ background:var(--bg-l); border-radius:var(--r-sm); padding:11px 12px; }
.ds-stat .ds-n{ font-size:20px; font-weight:700; color:var(--ink); line-height:1.2; }
.ds-stat .ds-n.ds-red{ color:#A32D2D; }
.ds-stat .ds-n.ds-green{ color:#0F6E56; }
.ds-stat .ds-u{ font-size:12px; color:var(--ink3); font-weight:500; }
.ds-stat .ds-l{ font-size:11px; color:var(--ink3); margin-top:4px; }
.ds-stat-sm{ background:var(--bg-l); border-radius:var(--r-sm); padding:10px 11px; }
.ds-stat-sm .ds-sm-l{ font-size:11px; color:var(--ink3); }
.ds-stat-sm .ds-sm-n{ font-size:15px; font-weight:700; color:var(--ink); margin-top:3px; }
.ds-record{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; background:var(--bg-l); border-radius:var(--r-sm); }
.ds-record .ds-rec-name{ font-size:13px; font-weight:600; }
.ds-record .ds-rec-sub{ font-size:11px; color:var(--ink3); margin-top:2px; }
.ds-record .ds-rec-amt{ font-size:14px; font-weight:700; color:#0F6E56; flex-shrink:0; margin-left:8px; }
/* 2026-09-11 ZE：业绩明细「加载更多」+ 报名详情底部入口 */
.ds-loadmore{ margin-top:4px; text-align:center; font-size:12.5px; font-weight:600; color:#534AB7; background:var(--brand-l); border-radius:var(--r-sm); padding:11px 0; cursor:pointer; }
.ds-loadmore-end{ text-align:center; font-size:10.5px; color:var(--ink3); padding:9px 0 2px; }
.ds-detail-btn{ margin-top:12px; text-align:center; font-size:13.5px; font-weight:600; color:#fff; background:#534AB7; border-radius:var(--r-md); padding:13px 0; cursor:pointer; }
/* 2026-09-11 ZC：业绩明细点开的报名详情（全屏页） */
.ds-detail-head{ display:flex; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:14px; }
.ds-detail-av{ width:42px; height:42px; border-radius:50%; background:var(--brand-l); color:#1a5f9f; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:700; flex-shrink:0; margin-right:11px; }
.ds-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:2px 12px; }
.ds-kv{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--bg-l); }
.ds-kv:last-child{ border-bottom:none; }
.ds-kv-k{ font-size:12.5px; color:var(--ink3); flex-shrink:0; }
.ds-kv-v{ font-size:12.5px; color:var(--ink); text-align:right; word-break:break-all; line-height:1.5; }

/* 业绩看板时间筛选 chip · 2026-09-11 */
.chip{ display:inline-flex; align-items:center; padding:5px 11px; border-radius:999px; background:#fff; border:1px solid var(--line); font-size:11.5px; font-weight:600; color:var(--ink2); cursor:pointer; user-select:none; }
.chip.on{ background:var(--brand-l); border-color:var(--brand); color:var(--brand-d); }
.chip:active{ opacity:0.7; }


/* ========== 20260915E 佣金总览卡（分销员 · 佣金明细页顶部） ==========
   四格常驻显示各状态金额，格子可点即筛选；当前选中格高亮（金框）。 */
.dcm-sum{ display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:2px 12px 0; }
.dcm-sum-cell{ background:var(--bg-l); border:1px solid transparent; border-radius:var(--r-sm); padding:9px 11px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.dcm-sum-cell.on{ background:var(--gold-l); border-color:#E8C874; }
.dcm-sum-k{ font-size:11px; color:var(--ink2); font-weight:600; }
.dcm-sum-cell.on .dcm-sum-k{ color:#8a6410; }
.dcm-sum-v{ font-size:17px; font-weight:800; letter-spacing:-.2px; margin-top:3px; white-space:nowrap; }
.dcm-sum-cell:active{ opacity:0.72; }
/* v=20261016C：5 格（加「待打款」）→ 最后一格占满整行，不留半格空白 */
.dcm-sum-cell.wide{ grid-column:span 2; }
.dcm-sum-foot{ margin:8px 12px 0; padding:7px 10px; background:var(--bg); border-radius:var(--r-sm); font-size:11px; color:var(--ink2); line-height:1.65; }
.dcm-sum-foot b{ color:var(--ink); font-weight:700; }


/* ========== 20260915F 首页运营位（广告横滑位） ==========
   手动横滑、不自动轮播（香老板禁动画/特效）；卡片占 80% 宽，右侧自然露出下一张一角 = 可滑提示。
   图片统一 2.4:1 裁切（后台建议 1200x500），任何比例的图都不会把版面撑歪。
   前缀 hbn- 与上面历史遗留的 .bn-*（旧版首页轮播死代码）区分开，避免撞名。 */
.hbn-wrap{ padding:12px 0 2px; }
.hbn-track{ display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:2px 14px 4px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.hbn-track::-webkit-scrollbar{ display:none; }
.hbn-card{ flex:0 0 80%; scroll-snap-align:start; position:relative; background:#fff;
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); cursor:pointer; }
.hbn-card:active{ opacity:.86; }
.hbn-thumb{ position:relative; width:100%; }
.hbn-thumb::before{ content:''; display:block; padding-top:41.67%; }   /* 2.4:1 固定比例 */
.hbn-thumb img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--bg); }
.hbn-cap{ position:absolute; left:0; right:0; bottom:0; padding:24px 12px 9px;
  background:linear-gradient(transparent, rgba(0,0,0,.62)); color:#fff; pointer-events:none; }
.hbn-t{ font-size:13.5px; font-weight:700; line-height:1.35; }
.hbn-s{ font-size:11px; opacity:.92; margin-top:2px; line-height:1.35; }
.hbn-dots{ display:flex; justify-content:center; gap:5px; padding:8px 0 0; }
.hbn-dots i{ width:5px; height:5px; border-radius:var(--r-xs); background:rgba(0,0,0,.16); display:block; }
.hbn-dots i.on{ background:var(--brand); width:14px; }

/* ==================== 会员圈子（v=20260915K · 前缀 ccl-，避开历史 .bn-* 撞名） ==================== */
.ccl-cats{ display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px; scrollbar-width:none; }
.ccl-cats::-webkit-scrollbar{ display:none; }
.ccl-cats .chip{ flex:0 0 auto; }
.ccl-gate{ display:flex; align-items:center; gap:10px; background:var(--green-l); border:1px solid var(--green-b); border-radius:var(--r-md); padding:11px 12px; margin:12px 12px 0; cursor:pointer; }
.ccl-fab{ position:absolute; right:14px; bottom:84px; z-index:6; display:flex; align-items:center; gap:5px; background:linear-gradient(135deg,#0F6E56,#2ecc71); color:#fff; font-size:12.5px; font-weight:700; padding:9px 15px; border-radius:999px; box-shadow:0 4px 14px rgba(15,110,86,.32); cursor:pointer; }
.ccl-fab:active{ transform:scale(.96); }
.ccl-card{ background:#fff; border-radius:var(--r-md); padding:12px; margin:12px 12px 0; position:relative; cursor:pointer; }
.ccl-pin{ position:absolute; top:-1px; right:12px; font-size:9.5px; color:#a3741b; background:var(--gold-l); border-radius:0 0 var(--r-sm) var(--r-sm); padding:2px 8px; font-weight:700; }
.ccl-head{ display:flex; align-items:center; gap:10px; }
.ccl-body{ font-size:13.5px; line-height:1.78; color:var(--ink); margin-top:10px; word-break:break-word; }
.ccl-detail-body{ font-size:15px; line-height:1.85; color:var(--ink); margin-top:12px; word-break:break-word; }
.ccl-biz{ font-size:11px; color:var(--ink2); background:var(--bg-l); border-radius:var(--r-sm); padding:7px 10px; margin-top:10px; line-height:1.6; }
.ccl-imgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-top:10px; }
.ccl-imgs img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-sm); background:var(--bg2); display:block; }
.ccl-video{ display:flex; align-items:center; gap:8px; margin-top:10px; background:var(--gold-l); border:1px solid var(--gold-b); border-radius:var(--r-sm); padding:9px 11px; font-size:12px; color:#8a6a1a; font-weight:600; cursor:pointer; }
.ccl-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; font-size:11px; color:var(--ink3); }
.ccl-chip{ font-size:9.5px; padding:2px 8px; border-radius:var(--r-sm); font-weight:700; flex-shrink:0; }
.ccl-more{ text-align:center; font-size:12px; color:var(--brand); padding:14px 0 30px; cursor:pointer; font-weight:600; }
.ccl-end{ text-align:center; font-size:10.5px; color:var(--line2); padding:16px 0 66px; }
.ccl-footbar{ padding:10px 12px; background:#fff; border-top:1px solid var(--line); flex-shrink:0; }
.ccl-idcard{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:var(--r-md); padding:12px; margin-bottom:12px; }
.ccl-pick{ display:flex; flex-wrap:wrap; gap:8px; }
.ccl-pick-i{ position:relative; width:74px; height:74px; }
.ccl-pick-i img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-sm); background:var(--bg2); display:block; }
.ccl-pick-i span{ position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:11px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ccl-pick-add{ width:74px; height:74px; border:1.5px dashed var(--line2); border-radius:var(--r-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; cursor:pointer; }
.ccl-agree{ display:flex; gap:8px; align-items:flex-start; font-size:11px; color:var(--ink2); line-height:1.7; padding:2px; cursor:pointer; }
.ccl-box{ width:16px; height:16px; border-radius:var(--r-xs); border:1.5px solid var(--line2); flex-shrink:0; margin-top:1px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#fff; font-weight:700; }
.ccl-box.on{ background:#0F6E56; border-color:#0F6E56; }
.ccl-quota{ display:flex; align-items:center; gap:10px; background:var(--green-l); border-radius:var(--r-md); padding:11px 12px; margin:12px 12px 0; }


/* ================= 会员落地页（黑金 · v=20260918G） =================
   香老板 09-18 拍板：要「独立网站那种高级感」，10 屏一屏一屏往下滚。
   技术上一行没另开页面 —— 登录 / JSAPI 支付 / ?d= 锁粉 / ?vip=1 深链全是现成的。
   ⚠️ 不要给这里加动画/转场（香老板明确禁止花哨特效），质感靠配色与留白做。 */
#v-vip { background: var(--vp-ink-2); }
#v-vip .vp-navbar { background: var(--vp-ink-2); border-bottom: 1px solid rgba(var(--vp-gold-rgb),.16); }
#v-vip .vp-navbar .icon-btn { background: rgba(255,255,255,.06); }
#v-vip .vp-navt { font-size: 14px; font-weight: 700; color: var(--vp-t1); letter-spacing: .5px; }
#vipScroll { background: var(--vp-ink-2); padding: 0 0 34px; }

.vp-eyebrow { font-size: 11.5px; letter-spacing: 2.5px; color: rgba(var(--vp-gold-rgb),.78); font-weight: 700; margin-bottom: 15px; }
.vp-hero { padding: 34px 22px 30px; background: radial-gradient(130% 62% at 84% 0%, rgba(var(--vp-gold-rgb),.17), rgba(var(--vp-gold-rgb),0) 62%), linear-gradient(180deg,var(--vp-ink) 0%,var(--vp-ink-2) 100%); }
.vp-h1 { margin: 0; font-size: 27px; line-height: 1.3; font-weight: 800; color: var(--vp-t1); letter-spacing: .5px; }
.vp-h1 span { color: var(--vp-gold); }
.vp-pricerow { display: flex; align-items: baseline; gap: 2px; margin: 17px 0 9px; }
.vp-pricerow .c { font-size: 19px; color: var(--vp-gold); font-weight: 700; }
.vp-pricerow b { font-size: 44px; line-height: 1; color: var(--vp-gold-l); font-weight: 800; letter-spacing: -1px; }
.vp-pricerow .u { font-size: 13px; color: var(--vp-t3); margin-left: 5px; }
.vp-herosub { font-size: 12.5px; line-height: 1.8; color: var(--vp-t2); margin-bottom: 15px; }
.vp-heroval { font-size: 13px; line-height: 1.85; color: var(--vp-t2); margin: 0 0 22px; }
.vp-heroval b { color: var(--vp-gold-l); }
.vp-herometa { font-size: 11.5px; line-height: 1.85; color: var(--vp-t3); margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.06); }

.vp-cta { display: block; width: 100%; border: none; border-radius: var(--r-md); padding: 15px 0; font-size: 15px; font-weight: 800; color: var(--vp-on-gold); background: linear-gradient(135deg,var(--vp-gold-l),var(--vp-gold-d)); box-shadow: 0 6px 20px rgba(201,150,46,.26); letter-spacing: 1px; }
.vp-cta:active { opacity: .85; }
.vp-cta.ghost { background: transparent; color: var(--vp-gold-l); border: 1px solid rgba(var(--vp-gold-rgb),.5); box-shadow: none; font-size: 14px; padding: 13px 0; }
.vp-ctanote { font-size: 11.5px; line-height: 1.7; color: var(--vp-t3); margin-top: 10px; }

.vp-sec { position: relative; padding: 30px 22px 26px; border-top: 1px solid rgba(255,255,255,.06); }
.vp-no { font-size: 11px; letter-spacing: 2px; color: rgba(var(--vp-gold-rgb),.5); font-weight: 700; margin-bottom: 11px; }
.vp-h2 { margin: 0 0 14px; font-size: 19px; line-height: 1.45; font-weight: 700; color: var(--vp-t1); }
.vp-p { font-size: 13px; line-height: 1.85; color: var(--vp-t2); margin: 0 0 10px; }
.vp-p b { color: var(--vp-gold-l); font-weight: 600; }
.vp-p.sm { font-size: 12px; }
.vp-fine { font-size: 11px; line-height: 1.75; color: var(--vp-t3); margin-top: 12px; }

.vp-pain { list-style: none; margin: 0; padding: 0; }
.vp-pain li { position: relative; font-size: 13px; line-height: 1.8; color: var(--vp-t2); padding: 11px 12px 11px 35px; border-bottom: 1px solid rgba(255,255,255,.05); }
.vp-pain li:before { content: '×'; position: absolute; left: 11px; top: 11px; width: 17px; height: 17px; line-height: 17px; text-align: center; border-radius: 50%; background: rgba(224,86,86,.15); color: #E05656; font-size: 11px; font-weight: 700; }

.vp-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.vp-g4 { border: 1px solid rgba(255,255,255,.08); background: var(--vp-ink-panel); border-radius: var(--r-md); padding: 13px; }
.vp-g4 .n { font-size: 11px; color: rgba(var(--vp-gold-rgb),.6); font-weight: 700; }
.vp-g4 .t { font-size: 13px; font-weight: 700; color: var(--vp-t1); margin: 5px 0 6px; }
.vp-g4 .d { font-size: 11.5px; line-height: 1.72; color: var(--vp-t3); }

.vp-res { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.vp-rc { border: 1px solid rgba(var(--vp-gold-rgb),.18); background: var(--vp-ink-panel); border-radius: var(--r-md); padding: 14px; }
.vp-rc .nm { font-size: 14px; font-weight: 700; color: var(--vp-t1); }
.vp-rc .tk { display: inline-block; font-size: 11px; color: var(--vp-gold-l); border: 1px solid rgba(var(--vp-gold-rgb),.32); border-radius: var(--r-pill); padding: 2px 9px; margin-left: 7px; vertical-align: 1px; }
.vp-rc .ds { font-size: 12.5px; line-height: 1.78; color: var(--vp-t2); margin-top: 9px; }
.vp-res-empty { font-size: 12px; line-height: 1.8; color: var(--vp-t3); border: 1px dashed rgba(255,255,255,.12); border-radius: var(--r-md); padding: 16px; text-align: center; }

.vp-tag { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; border-radius: var(--r-pill); padding: 5px 12px; margin: 4px 0 12px; }
.vp-tag.on { color: var(--vp-ink-2); background: var(--vp-gold); }
.vp-tag.soon { color: var(--vp-t2); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.vp-bn { border-left: 2px solid rgba(var(--vp-gold-rgb),.5); background: var(--vp-ink-panel); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 13px 14px; margin-bottom: 10px; }
.vp-bn .h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.vp-bn .h i { font-style: normal; font-size: 10.5px; color: var(--vp-ink-2); background: var(--vp-gold); border-radius: var(--r-xs); padding: 2px 6px; font-weight: 700; flex-shrink: 0; }
.vp-bn .h b { font-size: 13.5px; color: var(--vp-t1); }
.vp-bn p { font-size: 12.5px; line-height: 1.82; color: var(--vp-t2); margin: 0; }
.vp-bn p b { color: var(--vp-gold-l); font-weight: 600; }
.vp-bn.soon { border-left-color: rgba(255,255,255,.2); }
.vp-bn.soon .h i { background: rgba(255,255,255,.15); color: var(--vp-t1); }

.vp-rules { margin: 0; padding: 0; list-style: none; counter-reset: vpr; }
.vp-rules li { counter-increment: vpr; position: relative; font-size: 12.5px; line-height: 1.85; color: var(--vp-t2); padding: 9px 0 9px 27px; border-bottom: 1px solid rgba(255,255,255,.05); }
.vp-rules li:before { content: counter(vpr) '.'; position: absolute; left: 0; color: var(--vp-gold); font-weight: 700; font-size: 12px; }
.vp-rules li b { color: var(--vp-gold-l); }

.vp-faq { border: 1px solid rgba(255,255,255,.08); background: var(--vp-ink-panel); border-radius: var(--r-md); padding: 13px 14px; margin-bottom: 9px; }
.vp-faq .q { font-size: 13px; font-weight: 700; color: var(--vp-t1); margin-bottom: 6px; }
.vp-faq .a { font-size: 12.5px; line-height: 1.8; color: var(--vp-t2); }

.vp-final { text-align: center; background: radial-gradient(120% 70% at 50% 100%, rgba(var(--vp-gold-rgb),.15), rgba(var(--vp-gold-rgb),0) 62%); padding-bottom: 34px; }
.vp-final .vp-h2 { font-size: 23px; margin-bottom: 10px; }
.vp-final .vp-p { margin-bottom: 20px; }
.vp-final .vp-fine { margin-top: 14px; }

.vp-done .vp-doneic { width: 54px; height: 54px; border-radius: 50%; background: rgba(52,199,123,.15); color: #34C77B; font-size: 27px; line-height: 54px; text-align: center; margin: 4px auto 15px; }
.vp-step { border: 1px solid rgba(255,255,255,.08); background: var(--vp-ink-panel); border-radius: var(--r-md); padding: 14px; margin-bottom: 11px; }
.vp-step .sh { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.vp-step .sh i { font-style: normal; font-size: 10.5px; color: var(--vp-ink-2); background: var(--vp-gold); border-radius: var(--r-xs); padding: 2px 6px; font-weight: 700; }
.vp-step .sh b { font-size: 13.5px; color: var(--vp-t1); }
.vp-qr { text-align: center; }
.vp-qr img { width: 156px; height: 156px; border-radius: var(--r-sm); display: block; margin: 0 auto 9px; background: #fff; object-fit: cover; }
.vp-donenote { border-radius: var(--r-md); background: rgba(var(--vp-gold-rgb),.07); border: 1px solid rgba(var(--vp-gold-rgb),.24); padding: 12px 14px; font-size: 12px; line-height: 1.95; color: var(--vp-gold-l); margin-top: 3px; }

.vp-status { margin: 14px 22px 0; border-radius: var(--r-md); border: 1px solid rgba(var(--vp-gold-rgb),.3); background: rgba(var(--vp-gold-rgb),.07); padding: 13px 14px; font-size: 12.5px; line-height: 1.85; color: var(--vp-gold-l); }
.vp-status b { color: var(--vp-t1); }

/* ===== 20260918H · 会员落地页「模块被后台关掉」 =====
   用 class 而不是 inline style：第 10 屏（支付成功）的显隐由 renderVip 用
   style.display 控制，只有 !important 才能保证「后台关了」这个意图不被它覆盖。 */
.vp-off { display: none !important; }

/* ===== 20260918H · 会员落地页编辑页的「显示 / 已隐藏」开关 ===== */
.vpp-sw{flex-shrink:0;font-size:10.5px;color:#0F6E56;background:var(--green-l);border:1px solid var(--green-b);border-radius:var(--r-sm);padding:3px 10px;cursor:pointer;}
.vpp-sw.off{color:var(--ink3);background:var(--bg);border-color:var(--line2);}

/* ===== 20261013D · 沙龙详情页底部固定操作栏 =====
   香老板参照的活动页做法：往下拉时「票价 / 生成海报 / 立即报名」常驻屏幕底部不动，
   不用再拉到最底才看得到报名口。
   ⚠️ width 必须与 .phone 一致（宽屏 390px；真机 ≤430px 时 100vw），
      否则宽屏上底栏会比内容区宽、两边露白。
   ⚠️ 详情页 #v-salon 本身**没有**底部 Tab（tabbar 只写在列表页内部），所以贴 bottom:0 不打架；
      .scroll 自带的 padding-bottom:96px 正好给本栏让位，不用再改内边距。 */
.salon-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  width:390px; max-width:100vw; margin:0 auto; box-sizing:border-box;
  /* ⚠️ justify-content:space-between 是必需的：主按钮改固定宽度（flex:0 0 auto）后
     不再自动撑开，少了这句「票价+按钮」会整组挤到左边、右边空一大片
     （20261013G 就是这么翻车的，他截图为证）。票价贴左、按钮贴右，中间留白由它撑开。 */
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:#fff; border-top:1px solid var(--line); box-shadow:var(--sh-2);
}
@media (max-width:430px){ .salon-bar{ width:100vw; } }
/* v=20261013G（香老板选方案 A）：按钮**收窄**、右对齐、两侧留白 —— 不撑满整行。
   上一版让主按钮 flex:1 撑满右侧，结果成了一条 290px 大蓝条压着「¥100/门票」一小坨，
   头重脚轻（他原话「太长了，太丑」）。⚠️ 别再把 :only-child{flex:1} 加回来。 */
.salon-bar .sb-l{ flex-shrink:0; min-width:56px; }
.salon-bar .sb-p{ font-size:var(--fs-7); font-weight:800; color:var(--ink); line-height:1.15; }
.salon-bar .sb-s{ font-size:var(--fs-2); color:var(--ink3); margin-top:2px; }
.salon-bar .sb-r{ flex:0 0 auto; display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.salon-bar .sb-poster{
  flex-shrink:0; background:var(--bg); color:var(--ink2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:10px 12px; font-size:var(--fs-3); font-weight:700;
  cursor:pointer; font-family:inherit; line-height:1;
}
.salon-bar .sb-main{
  flex:0 0 auto; width:148px; text-align:center; background:var(--brand); color:#fff; border:none;
  border-radius:var(--r-pill); padding:12px 0; font-size:var(--fs-5); font-weight:800;
  cursor:pointer; font-family:inherit; line-height:1;
}
.salon-bar .sb-main.is-off{ background:#d9dbe0; }

/* ===== 老板工作台改版（v=20261019I）=====
   ⚠️ 前缀用 wd- 不用 bd-：.bd-todo/.bd-grid/.bd-cell/.bd-rev 已被老板端旧 hero 与流水列表占用，别混。 */
.wd-todo{ background:#fff; border:0.5px solid #f0d9d9; border-radius:14px; overflow:hidden; margin-bottom:10px; box-shadow:var(--sh-1); }
.wd-todo-hd{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px 8px; font-size:12px; color:var(--ink3); }
.wd-todo-row{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-top:0.5px solid var(--line); }
.wd-todo-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.wd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.wd-cell{ background:#fff; border:0.5px solid var(--line); border-radius:14px; padding:14px 12px; cursor:pointer; box-shadow:var(--sh-1); }
.wd-cell:active{ background:var(--bg-l,#f7f8fa); }
.wd-cell-n{ font-size:14px; color:var(--ink); margin-top:10px; font-weight:500; }
.wd-cell-s{ font-size:11.5px; color:var(--ink3); margin-top:2px; }
.wd-more{ background:#fff; border:0.5px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--sh-1); }
.wd-more-hd{ display:flex; align-items:center; gap:10px; padding:13px 14px; cursor:pointer; }
.wd-row{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-top:0.5px solid var(--line); }
.wd-pin{ font-size:11.5px; border:0.5px solid var(--line); border-radius:999px; padding:3px 9px; white-space:nowrap; cursor:pointer; }


/* ===== 「我的」页改版（v=20261019K）：白底分组 + 线性图标 + 状态胶囊 ===== */
.mn-group{ margin-bottom:14px; }
.mn-gt{ font-size:11.5px; font-weight:700; color:var(--ink3); letter-spacing:.5px; padding:0 4px 7px; }
.mn-card{ background:#fff; border:0.5px solid var(--line); border-radius:14px; padding:3px 14px; }
.mn-row{ display:flex; align-items:center; gap:11px; padding:12px 0; border-bottom:0.5px solid var(--line); cursor:pointer; font-size:13.5px; color:var(--ink); }
.mn-row:last-child{ border-bottom:none; }
.mn-row .ic{ width:32px; height:32px; border-radius:9px; background:#f4f5f7; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mn-row .nm{ flex:1; min-width:0; }
.mn-row .mn-tag{ font-size:11px; color:var(--ink3); flex-shrink:0; max-width:38%; text-align:right; }
.mn-row .arr{ color:#c8ccd2; font-size:15px; flex-shrink:0; }
/* 头部：蓝色渐变 hero → 白底身份卡（与老板工作台同一套语言） */
.mine-head{ background:#fff; border:0.5px solid var(--line); border-radius:16px; padding:16px 14px; color:var(--ink); }


/* ===== 沙龙列表卡：横版紧凑（v=20261019L）=====
   一张卡 124px 高，一屏 3 场。封面从顶部横幅改成左侧 104 方块，元素一个不减。
   ⛔ 只作用于 .salon-card.is-row —— 详情页与其它复用 .salon-card 的位置不受影响。 */
.salon-card.is-row{ padding:10px; margin-bottom:9px; display:flex; align-items:stretch; gap:10px; }
.salon-card.is-row .sc-thumb{ position:relative; width:104px; height:104px; border-radius:10px; overflow:hidden; flex-shrink:0; }
.salon-card.is-row .sc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.salon-card.is-row .sc-kind{ position:absolute; left:6px; top:6px; z-index:2; background:rgba(255,255,255,.92); color:#2c2c2a; font-size:10px; font-weight:700; padding:2px 6px; border-radius:5px; }
.salon-card.is-row .sc-kind.tour{ background:#0F6E56; color:#fff; }
.salon-card.is-row .sc-kind.course{ background:#BA7517; color:#fff; }
.salon-card.is-row .sc-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.salon-card.is-row .sc-title{ font-size:13.5px; font-weight:700; line-height:1.35; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* v=20261026A：进度条整行已删（.sc-bar* 规则随之移除）。meta 行改成左右两段：
   左边时间地点可截断，右边「仅剩 N 人」永远不被挤掉。 */
.salon-card.is-row .sc-meta{ font-size:11px; color:var(--ink3); margin-top:4px; display:flex; align-items:center; gap:6px; }
.salon-card.is-row .sc-meta-t{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.salon-card.is-row .sc-seat{ flex-shrink:0; font-size:10.5px; font-weight:700; color:#BA7517; white-space:nowrap; }
.salon-card.is-row .sc-foot{ display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:6px; }
.salon-card.is-row .sc-price{ font-size:15px; font-weight:800; color:var(--ink); }
.salon-card.is-row .sc-price-s{ font-size:10px; color:var(--ink3); text-decoration:line-through; }

/* 预告视频按钮（v=20261019M）：白底细描边，比「报名」弱一档，不抢主按钮 */
.salon-card.is-row .sc-vid{ display:flex; align-items:center; justify-content:center; gap:3px; height:24px; padding:0 7px; border:0.5px solid #e3e5e8; border-radius:7px; background:#fff; color:#5f6368; font-size:11px; cursor:pointer; flex-shrink:0; white-space:nowrap; }
.salon-card.is-row .sc-vid:active{ background:#f4f5f7; }
/* 已报名场次：只留 ▶ 图标，24px 淡底方块 —— 否则会把「凭证」挤成竖排；无边框是不跟「凭证」抢描边 */
.salon-card.is-row .sc-vid.is-icon{ width:24px; height:24px; padding:0; border:0; border-radius:6px; background:#f1f2f4; }
.salon-card.is-row .sc-vid.is-icon:active{ background:#e6e8ec; }
/* 底行按钮一律不换行、不被压扁（v=20261019M） */
.salon-card.is-row .sc-foot .btn{ white-space:nowrap; flex-shrink:0; }