/* ==========================================================================
 * opc-plans.css — OPC 套餐卡组件样式（商城页 / 驾驶舱介绍页共用）
 * 来源：/plan/index.html 抽出，狼哥 2026-09-19
 * 作用域：全部限制在 .opc-plans 容器内，不污染宿主页面
 * ========================================================================== */

.opc-plans{
  --bg:#f7f8fa; --card:#fff; --line:#e8eaef; --tx1:#1a1d24; --tx2:#4a5160; --tx3:#8b93a3;
  --brand:#3b6ef5; --gold:#f0a020; --gold-d:#c47f10; --gold-bg:rgba(240,160,32,.08);
  --red:#e5484d; --grn:#2fbf71; --r:14px;
  color:var(--tx1);
  font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.opc-plans *{box-sizing:border-box}

/* ===== 版本套餐（4 列） =====
 * ⚠️ 两种宿主写法都要支持（狼哥 09-20 踩坑补充）：
 *   ① 嵌套：<div class="opc-plans"><div class="plans">   → .opc-plans .plans 生效
 *   ② 同元素：<div class="plans opc-plans">              → .opc-plans.plans 生效
 *   只写后代选择器时，②这种写法会静默退化成块级堆叠（卡片竖排、占满整行）。 */
.opc-plans .plans,
.opc-plans.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.opc-plans .pl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;position:relative}
/* ★ 2026-09-25 狼哥：套餐卡浅色版补 hover 动效（原来只有深色版有 → 浅色 hover 无反馈）*/
.opc-plans .pl{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.opc-plans .pl:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,30,60,.14);border-color:var(--brand)}
/* 合伙人卡（.pt）同款 hover */
.opc-plans .pt{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.opc-plans .pt:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,30,60,.14)}
.opc-plans .pl.hot{border:2px solid var(--brand);box-shadow:0 8px 28px rgba(59,110,245,.10)}
.opc-plans .pl .top{padding:22px 20px 16px;border-bottom:1px solid var(--line);position:relative}
.opc-plans .pl .nm{font-size:19px;font-weight:800;letter-spacing:-.2px;line-height:1.25;padding-right:76px}
.opc-plans .pl .ds{font-size:12.5px;color:var(--tx3);margin-top:5px;min-height:36px;line-height:1.5}
.opc-plans .ribbon{position:absolute;top:0;right:16px;color:#fff;font-size:11px;font-weight:700;padding:3px 10px;border-radius:0 0 8px 8px}
.opc-plans .ribbon.b{background:var(--brand)}
.opc-plans .ribbon.g{background:var(--gold)}

.opc-plans .pr{display:flex;align-items:baseline;gap:1px;margin-top:12px;flex-wrap:wrap}
.opc-plans .pr .c{font-size:13px;font-weight:700;color:var(--gold-d)}
.opc-plans .pr .v{font-size:30px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;color:var(--gold-d)}
.opc-plans .pr .u{font-size:12px;color:var(--tx3);margin-left:3px}
.opc-plans .pr .tag{font-size:10px;font-weight:700;background:rgba(240,160,32,.14);color:var(--gold-d);padding:1px 6px;border-radius:4px;margin-left:6px;align-self:center}
.opc-plans .og{font-size:12px;color:var(--tx3);margin-top:2px}
.opc-plans .og s{color:var(--tx3)}
.opc-plans .yq{margin-top:6px;font-size:11.5px;color:#c47a00;background:#fff8e8;border:1px solid #ffe3ad;border-radius:7px;padding:5px 8px;line-height:1.5;text-align:center}
.opc-plans .yq b{color:#a85f00;font-weight:700}

.opc-plans .rows{padding:6px 20px 0;flex:1}
.opc-plans .row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dashed #f0f2f5}
.opc-plans .row:last-child{border-bottom:none}
.opc-plans .row .k{font-size:12.5px;color:var(--tx3);flex:none;white-space:nowrap;line-height:1.5}
.opc-plans .row .v{font-size:13.5px;font-weight:700;flex:1;min-width:0;text-align:right;line-height:1.5}
.opc-plans .row .v .vl{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.opc-plans .row .s{font-size:11px;color:var(--tx3);font-weight:400;display:block;margin-top:3px;line-height:1.45;white-space:nowrap}
/* ★ 2026-09-20 修：补 white-space:nowrap（介绍页 .wbpl-wrap .row .s 本来就有）
   缺这条 → 「每月可调换 1 次，原模块数据保留」在商城页被挤成 2 行 */
.opc-plans .row.hl{background:var(--gold-bg);margin:0 -20px;padding:10px 20px;border-bottom:1px solid rgba(240,160,32,.18)}
.opc-plans .row.hl .k{color:var(--gold-d);font-weight:700}
.opc-plans .row.hl .v{color:var(--gold-d);font-size:14px}
.opc-plans .chk{color:var(--grn);font-weight:800;font-size:14px}
.opc-plans .crs{color:var(--tx3);font-weight:700;font-size:13px}

.opc-plans .pl .foot{padding:16px 20px 20px}
.opc-plans .btn{width:100%;padding:11px;border:none;border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;background:var(--brand);color:#fff;transition:.15s}
.opc-plans .btn:hover{filter:brightness(1.06)}
.opc-plans .btn.gh{background:#f2f4f8;color:var(--tx3);cursor:default}

.opc-plans .q{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  background:#eceff4;color:var(--tx3);font-size:10.5px;font-weight:700;cursor:pointer;flex:none;transition:.15s;user-select:none}
.opc-plans .q:hover,.opc-plans .q.on{background:var(--brand);color:#fff}

/* ===== 合伙人（3 列） =====
 * ⚠️ 同时支持两种宿主写法（同 .plans 的坑）：
 *   ① 嵌套：<div class="opc-plans"><div class="pt-wrap"> → .opc-plans .pt-wrap
 *   ② 同元素：<div class="pt-wrap opc-plans">            → .opc-plans.pt-wrap */
.opc-plans .pt-wrap,
.opc-plans.pt-wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.opc-plans .pt{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;position:relative}
.opc-plans .pt.hot{border:2px solid var(--gold);box-shadow:0 8px 28px rgba(240,160,32,.12)}
.opc-plans .pt .top{padding:22px 20px 18px;border-bottom:1px solid var(--line);position:relative}
.opc-plans .pt .nm{font-size:20px;font-weight:800;letter-spacing:-.3px;line-height:1.25;margin-bottom:7px;padding-right:76px}
.opc-plans .pt .ds{font-size:13px;color:var(--tx2);line-height:1.5;margin-bottom:16px;font-weight:500}
.opc-plans .pt .rows{flex:1;display:flex;flex-direction:column;padding:2px 20px 0}
.opc-plans .pt .rows .sec:last-child{flex:1}
.opc-plans .pt .foot{padding:16px 20px 20px}

.opc-plans .cabline{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.opc-plans .cabline .cv{font-size:13px;font-weight:700}
.opc-plans .cabline .ct{font-size:11px;font-weight:700;background:var(--gold-bg);color:var(--gold-d);padding:1px 7px;border-radius:5px}

.opc-plans .sec{padding:11px 12px;border-radius:10px;margin:0 -12px 6px;position:relative}
.opc-plans .sec:last-child{margin-bottom:0}
.opc-plans .sec.sec-hk{background:#eef5ff}
.opc-plans .sec.sec-biz{background:#fdf4e8}
.opc-plans .sec.sec-learn{background:#f0f7f2}
.opc-plans .sec.sec-svc{background:#f5f1fb}
.opc-plans .sec.sec-prod{background:#f4f6f9}
.opc-plans .sec .st{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--gold-d);margin-bottom:7px}
.opc-plans .sec .st svg{width:14px;height:14px;flex:none;fill:currentColor}
.opc-plans .sec-hk .st svg{color:#3b6ef5}
.opc-plans .sec-biz .st svg{color:#d9901a}
.opc-plans .sec-learn .st svg{color:#2fbf71}
.opc-plans .sec-svc .st svg{color:#8b5cf6}
.opc-plans .sec-prod .st svg{color:#5b6b80}
.opc-plans .sec .it{font-size:13px;font-weight:700;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.opc-plans .sec .it .badge{font-size:11px;font-weight:700;background:var(--gold-bg);color:var(--gold-d);padding:1px 7px;border-radius:5px}

/* ★ 2026-09-25 狼哥：代运营时长 / 分成 加扫光动效 + 加粗强调（全档） */
.opc-plans .sec .it .badge.hl-sweep{position:relative;overflow:hidden;font-weight:800}
.opc-plans .sec .it .badge.hl-sweep b{font-weight:900;letter-spacing:.2px}
.opc-plans .sec .it .badge.hl-sweep::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg);animation:opcSweep 2.6s ease-in-out infinite}
@keyframes opcSweep{0%{left:-60%}55%{left:130%}100%{left:130%}}
@media (prefers-reduced-motion: reduce){.opc-plans .sec .it .badge.hl-sweep::after{animation:none;display:none}}

.opc-plans .sec .de{font-size:11px;color:var(--tx3);margin-top:3px;line-height:1.55}
.opc-plans .sec .kv{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:3px 0}
.opc-plans .sec .kv span:first-child{color:var(--tx2)}
.opc-plans .sec .kv span:last-child{font-weight:700;text-align:right}

/* ===== 气泡 ===== */
.opc-plans .pop{position:fixed;z-index:9998;max-width:290px;background:#20242e;color:#fff;font-size:12.5px;line-height:1.7;
  padding:11px 13px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.24);display:none;font-weight:400;text-align:left}
.opc-plans .pop.on{display:block}
.opc-plans .pop::before{content:'';position:absolute;width:9px;height:9px;background:#20242e;transform:rotate(45deg)}
.opc-plans .pop.below::before{top:-4px;left:var(--ax,20px)}
.opc-plans .pop.above::before{bottom:-4px;left:var(--ax,20px)}
.opc-plans .pop .tipChn{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.opc-plans .pop .tipChn span{display:flex;align-items:center;gap:7px}
.opc-plans .pop .tipChn img{width:16px;height:16px;border-radius:4px}

/* ===== 支付弹窗 ===== */
.opc-plans .mask,body>.mask{position:fixed;inset:0;background:rgba(16,19,26,.5);backdrop-filter:blur(3px);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.opc-plans .mask.on,body>.mask.on{display:flex}
.opc-plans .modal,body>.mask .modal{background:#fff;border-radius:18px;width:100%;max-width:440px;max-height:92vh;overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.opc-plans .mh,body>.mask .mh{padding:22px 24px 0;display:flex;justify-content:space-between;align-items:flex-start}
.opc-plans .mh .t,body>.mask .mh .t{font-size:17px;font-weight:800}
.opc-plans .mh .t small,body>.mask .mh .t small{display:block;font-size:12px;font-weight:400;color:var(--tx3);margin-top:3px}
.opc-plans .mx,body>.mask .mx{border:none;background:#f2f4f8;width:28px;height:28px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--tx2);line-height:1;flex:none}
.opc-plans .mb,body>.mask .mb{padding:18px 24px 24px}
.opc-plans .cyc,body>.mask .cyc{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:16px}
.opc-plans .cyc:empty,body>.mask .cyc:empty{display:none}
.opc-plans .cyc button,body>.mask .cyc button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:11px 4px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--tx1);transition:.15s;line-height:1.4}
.opc-plans .cyc button small{display:block;font-size:10.5px;font-weight:600;color:var(--gold-d);margin-top:2px}
.opc-plans .cyc button.on{border-color:var(--brand);background:rgba(59,110,245,.05);color:var(--brand)}
.opc-plans .cyc button.on small{color:var(--brand)}

.opc-plans .gift,body>.mask .gift{display:flex;align-items:center;gap:8px;background:linear-gradient(90deg,#fff8e8,#fffdf6);border:1px solid #ffe3ad;border-radius:8px;padding:8px 10px;margin-bottom:10px}
.opc-plans .gift,body>.mask .gift .gt{font-size:12px;font-weight:700;color:#a85f00;white-space:nowrap}
.opc-plans .gift,body>.mask .gift .gd{font-size:12px;color:#8a6a2a}
.opc-plans .gift,body>.mask .gift .gd b{color:#c47a00}

.opc-plans .bill,body>.mask .bill{border:1px solid var(--line);border-radius:11px;padding:14px 15px;margin-bottom:16px}
.opc-plans .bill,body>.mask .bill .r{display:flex;justify-content:space-between;font-size:13px;padding:5px 0}
.opc-plans .bill,body>.mask .bill .r span:first-child{color:var(--tx2)}
.opc-plans .bill,body>.mask .bill .r .save{color:var(--grn);font-weight:700}
.opc-plans .bill,body>.mask .bill .r.tt{border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;font-weight:800;font-size:15px}
.opc-plans .bill,body>.mask .bill .r.tt span:last-child{color:var(--gold-d);font-size:19px;font-variant-numeric:tabular-nums}
.opc-plans .paytime,body>.mask .paytime{font-size:12px;color:var(--tx3);text-align:center;margin:-6px 0 14px}
.opc-plans .agree,body>.mask .agree{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--tx2);line-height:1.6;margin-bottom:16px}
.opc-plans .agree,body>.mask .agree input{margin-top:3px;width:15px;height:15px;accent-color:var(--brand);flex:none;cursor:pointer}
.opc-plans .agree,body>.mask .agree a{color:var(--brand);text-decoration:none}
.opc-plans .agree,body>.mask .agree a:hover{text-decoration:underline}
.opc-plans .pay,body>.mask .pay{display:flex;align-items:center;justify-content:space-between;gap:14px}
.opc-plans .pay,body>.mask .pay .amt{font-size:12px;color:var(--tx3)}
.opc-plans .pay,body>.mask .pay .amt b{display:block;font-size:22px;color:var(--gold-d);font-weight:800;font-variant-numeric:tabular-nums}
.opc-plans .pay,body>.mask .pay button{border:none;background:var(--brand);color:#fff;padding:12px 34px;border-radius:11px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit}
.opc-plans .pay,body>.mask .pay button:disabled{background:#c9d0dd;cursor:not-allowed}

/* ===== 响应式 ===== */
@media(max-width:1080px){
  .opc-plans .plans,
  .opc-plans.plans{grid-template-columns:repeat(2,1fr)}
  .opc-plans .pt-wrap,
  .opc-plans.pt-wrap{grid-template-columns:1fr}
}
@media(max-width:620px){
  .opc-plans .plans,
  .opc-plans.plans{grid-template-columns:1fr}
  .opc-plans .pl .nm,.opc-plans .pt .nm{padding-right:0}
}

/* ===== ★ 2026-09-20 修：气泡 #pop 挂在 body 上（不在 .opc-plans 内）=====
   原规则 .opc-plans .pop 匹配不到 → display:none 永远不显示
   （症状：商城/介绍页的问号悬浮都不出文字）
   兜底：用 ID 选择器（优先级高于类），无论 pop 挂在哪都能生效 */
#pop{position:fixed;z-index:9999;max-width:290px;background:#20242e;color:#fff;font-size:12.5px;line-height:1.7;
  padding:11px 13px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.24);display:none;font-weight:400;text-align:left}
#pop.on{display:block}
#pop::before{content:'';position:absolute;width:9px;height:9px;background:#20242e;transform:rotate(45deg)}
#pop.below::before{top:-4px;left:var(--ax,20px)}
#pop.above::before{bottom:-4px;left:var(--ax,20px)}
#pop .tipChn{display:flex;flex-direction:column;gap:7px;margin-top:7px}
#pop .tipChn span{display:flex;align-items:center;gap:7px}
#pop .tipChn img{width:16px;height:16px;border-radius:4px}

/* ==========================================================================
 * ★★ 深色皮肤（dark）· 2026-09-20 狼哥：商城页/介绍页都是深色底，卡片要跟深色
 * 来源：介绍页 introduction/dashboard.html 内联的 .wbpl-wrap 深色覆盖（09-19 写的）
 *       —— 那次只写进了介绍页，组件里没有 → 商城页接了组件还是白卡（本段就是补这个）
 *
 * 用法（两种任选）：
 *   ① 容器加类：<div class="opc-plans opc-dark">      ← 推荐
 *   ② 深色容器内自动继承：.dark / [data-theme="dark"] 内的 .opc-plans
 *
 * 说明：变量层（--card/--line/--tx1…）能覆盖的走变量，
 *      组件里写死色值的地方才用 !important 兜（与介绍页原写法一致）
 * ========================================================================== */

/* ---- ① 变量层：一次改掉 90% 的颜色 ---- */
.opc-plans.opc-dark,
.dark .opc-plans,
[data-theme="dark"] .opc-plans{
  --card:rgba(255,255,255,.045);
  --line:rgba(53,198,255,.20);
  --tx1:#e8f2ff;
  --tx2:rgba(224,240,255,.82);
  --tx3:rgba(200,225,250,.62);
  --brand:#35c6ff;
  --gold:#ffd176;
  --gold-d:#f5b942;
  --gold-bg:rgba(245,185,66,.10);
  --grn:#3ddc84;
  --bg:transparent;
  color:var(--tx1);
}

/* ---- ② 版本卡（.pl） ---- */
.opc-plans.opc-dark .pl,
.dark .opc-plans .pl,
[data-theme="dark"] .opc-plans .pl{
  background:var(--card)!important;border:1px solid var(--line)!important;backdrop-filter:blur(8px)}
.opc-plans.opc-dark .pl:hover,
.dark .opc-plans .pl:hover,
[data-theme="dark"] .opc-plans .pl:hover{
  transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.5)!important;border-color:rgba(53,198,255,.45)!important}
.opc-plans.opc-dark .pl.hot,
.dark .opc-plans .pl.hot,
[data-theme="dark"] .opc-plans .pl.hot{
  border:2px solid #35c6ff!important;box-shadow:0 10px 34px rgba(53,198,255,.22)!important;background:rgba(53,198,255,.07)!important}
.opc-plans.opc-dark .pl .top,
.dark .opc-plans .pl .top,
[data-theme="dark"] .opc-plans .pl .top{border-bottom:1px solid var(--line)!important}
.opc-plans.opc-dark .ribbon,
.dark .opc-plans .ribbon,
[data-theme="dark"] .opc-plans .ribbon{background:linear-gradient(135deg,#35c6ff,#2169c7)!important;color:#06111f!important}
.opc-plans.opc-dark .pl .nm,
.dark .opc-plans .pl .nm,
[data-theme="dark"] .opc-plans .pl .nm{color:#fff!important}
.opc-plans.opc-dark .pl .ds,
.dark .opc-plans .pl .ds,
[data-theme="dark"] .opc-plans .pl .ds{color:rgba(200,225,250,.62)!important}

/* ---- ③ 价格 / 原价 / 年付提示 ---- */
.opc-plans.opc-dark .pr .c,.opc-plans.opc-dark .pr .v,
.dark .opc-plans .pr .c,.dark .opc-plans .pr .v,
[data-theme="dark"] .opc-plans .pr .c,[data-theme="dark"] .opc-plans .pr .v{color:var(--gold)!important}
.opc-plans.opc-dark .pr .u,
.dark .opc-plans .pr .u,
[data-theme="dark"] .opc-plans .pr .u{color:rgba(200,225,250,.62)!important}
.opc-plans.opc-dark .pr .tag,
.dark .opc-plans .pr .tag,
[data-theme="dark"] .opc-plans .pr .tag{background:rgba(245,185,66,.16)!important;color:var(--gold)!important}
.opc-plans.opc-dark .og,
.dark .opc-plans .og,
[data-theme="dark"] .opc-plans .og{color:rgba(200,225,250,.55)!important}
.opc-plans.opc-dark .og s,
.dark .opc-plans .og s,
[data-theme="dark"] .opc-plans .og s{color:rgba(200,225,250,.45)!important}
.opc-plans.opc-dark .og .save,
.dark .opc-plans .og .save,
[data-theme="dark"] .opc-plans .og .save{color:#3ddc84!important}
.opc-plans.opc-dark .yq,
.dark .opc-plans .yq,
[data-theme="dark"] .opc-plans .yq{
  background:rgba(245,185,66,.10)!important;border:1px solid rgba(245,185,66,.28)!important;color:var(--gold)!important}
.opc-plans.opc-dark .yq b,
.dark .opc-plans .yq b,
[data-theme="dark"] .opc-plans .yq b{color:#ffd176!important}

/* ---- ④ 权益行（.row / .hl）---- */
.opc-plans.opc-dark .row,
.dark .opc-plans .row,
[data-theme="dark"] .opc-plans .row{border-bottom:1px dashed rgba(53,198,255,.16)!important}
.opc-plans.opc-dark .row .k,
.dark .opc-plans .row .k,
[data-theme="dark"] .opc-plans .row .k{color:rgba(200,225,250,.62)!important}
.opc-plans.opc-dark .row .v,
.dark .opc-plans .row .v,
[data-theme="dark"] .opc-plans .row .v{color:#e8f2ff!important}
.opc-plans.opc-dark .row .s,
.dark .opc-plans .row .s,
[data-theme="dark"] .opc-plans .row .s{color:rgba(200,225,250,.5)!important}
.opc-plans.opc-dark .row.hl,
.dark .opc-plans .row.hl,
[data-theme="dark"] .opc-plans .row.hl{
  background:rgba(245,185,66,.08)!important;border-bottom:1px solid rgba(245,185,66,.2)!important}
.opc-plans.opc-dark .row.hl .k,
.dark .opc-plans .row.hl .k,
[data-theme="dark"] .opc-plans .row.hl .k{color:var(--gold)!important}
.opc-plans.opc-dark .row.hl .v,
.dark .opc-plans .row.hl .v,
[data-theme="dark"] .opc-plans .row.hl .v{color:#ffd176!important}
.opc-plans.opc-dark .chk,
.dark .opc-plans .chk,
[data-theme="dark"] .opc-plans .chk{color:#3ddc84!important}
.opc-plans.opc-dark .crs,
.dark .opc-plans .crs,
[data-theme="dark"] .opc-plans .crs{color:rgba(200,225,250,.5)!important}

/* ---- ⑤ 按钮 ---- */
.opc-plans.opc-dark .btn,
.dark .opc-plans .btn,
[data-theme="dark"] .opc-plans .btn{background:linear-gradient(135deg,#35c6ff,#2169c7)!important;color:#06111f!important}
.opc-plans.opc-dark .btn:hover,
.dark .opc-plans .btn:hover,
[data-theme="dark"] .opc-plans .btn:hover{filter:none!important;background:linear-gradient(135deg,#5fd6ff,#2a7de0)!important;opacity:.92}
.opc-plans.opc-dark .btn.gh,
.dark .opc-plans .btn.gh,
[data-theme="dark"] .opc-plans .btn.gh{background:rgba(255,255,255,.07)!important;color:rgba(200,225,250,.5)!important;cursor:default}
.opc-plans.opc-dark .btn.gh:hover,
.dark .opc-plans .btn.gh:hover,
[data-theme="dark"] .opc-plans .btn.gh:hover{background:rgba(255,255,255,.07)!important}
.opc-plans.opc-dark .pl.hot .btn,
.dark .opc-plans .pl.hot .btn,
[data-theme="dark"] .opc-plans .pl.hot .btn{background:linear-gradient(135deg,#ffd176,#f5a623)!important;color:#251505!important}

/* ---- ⑥ 问号 ---- */
.opc-plans.opc-dark .q,
.dark .opc-plans .q,
[data-theme="dark"] .opc-plans .q{background:rgba(53,198,255,.14)!important;color:rgba(200,225,250,.7)!important}
.opc-plans.opc-dark .q:hover,.opc-plans.opc-dark .q.on,
.dark .opc-plans .q:hover,.dark .opc-plans .q.on,
[data-theme="dark"] .opc-plans .q:hover,[data-theme="dark"] .opc-plans .q.on{background:#35c6ff!important;color:#06111f!important}

/* ---- ⑦ 气泡（挂在 body 上的 #pop，用 .opc-dark 宿主判定不到 → 用 body 类兜）---- */
body.opc-dark-host #pop,
body.opc-dark-host #mallPlanPop{background:#0d2244!important;border:1px solid rgba(53,198,255,.3)!important;color:#e8f2ff!important}
body.opc-dark-host #pop::before,
body.opc-dark-host #mallPlanPop::before{background:#0d2244!important}

/* ---- ⑧ 支付弹窗（深色）---- */
body.opc-dark-host .opc-plans .modal,
.opc-plans.opc-dark .modal{background:#0d2244!important;border:1px solid rgba(53,198,255,.28)!important}
.opc-plans.opc-dark .mh{border-bottom:1px solid rgba(53,198,255,.16)!important}
.opc-plans.opc-dark .mh .t{color:#fff!important}
.opc-plans.opc-dark .mh .t small{color:rgba(200,225,250,.6)!important}
.opc-plans.opc-dark .mx{background:rgba(255,255,255,.06)!important;color:rgba(200,225,250,.7)!important}
.opc-plans.opc-dark .cyc button{background:rgba(255,255,255,.04)!important;border-color:rgba(53,198,255,.22)!important;color:rgba(224,240,255,.8)!important}
.opc-plans.opc-dark .cyc button small{color:rgba(200,225,250,.55)!important}
.opc-plans.opc-dark .cyc button.on{border-color:#35c6ff!important;background:rgba(53,198,255,.14)!important;color:#fff!important}
.opc-plans.opc-dark .cyc button.on small{color:#35c6ff!important}
.opc-plans.opc-dark .gift{background:rgba(245,185,66,.1)!important;border:1px solid rgba(245,185,66,.25)!important}
.opc-plans.opc-dark .gift .gt{color:#ffd176!important}
.opc-plans.opc-dark .gift .gd{color:rgba(224,240,255,.75)!important}
.opc-plans.opc-dark .gift .gd b{color:#ffd176!important}
.opc-plans.opc-dark .bill{border-color:rgba(53,198,255,.14)!important;background:rgba(255,255,255,.035)!important}
.opc-plans.opc-dark .bill .r span:first-child{color:rgba(224,240,255,.75)!important}
.opc-plans.opc-dark .bill .r.tt{border-top-color:rgba(53,198,255,.2)!important;color:#fff!important}
.opc-plans.opc-dark .bill .r.tt span:last-child{color:#ffd176!important}
.opc-plans.opc-dark .bill .r .save{color:#3ddc84!important}
.opc-plans.opc-dark .paytime{color:rgba(200,225,250,.5)!important}
.opc-plans.opc-dark .pay .amt{color:rgba(200,225,250,.7)!important}
.opc-plans.opc-dark .pay .amt b{color:#ffd176!important}

/* ---- ⑨ 合伙人卡（.pt / .sec）---- */
.opc-plans.opc-dark .pt,
.dark .opc-plans .pt,
[data-theme="dark"] .opc-plans .pt{background:var(--card)!important;border:1px solid var(--line)!important}
.opc-plans.opc-dark .pt .top,
.dark .opc-plans .pt .top,
[data-theme="dark"] .opc-plans .pt .top{border-bottom:1px solid var(--line)!important}
.opc-plans.opc-dark .pt .nm,
.dark .opc-plans .pt .nm,
[data-theme="dark"] .opc-plans .pt .nm{color:#fff!important}
.opc-plans.opc-dark .pt .ds,
.dark .opc-plans .pt .ds,
[data-theme="dark"] .opc-plans .pt .ds{color:rgba(200,225,250,.62)!important}
.opc-plans.opc-dark .sec,
.dark .opc-plans .sec,
[data-theme="dark"] .opc-plans .sec{background:rgba(255,255,255,.035)!important}
.opc-plans.opc-dark .sec.sec-hk,
.dark .opc-plans .sec.sec-hk,
[data-theme="dark"] .opc-plans .sec.sec-hk{background:rgba(53,198,255,.08)!important}
.opc-plans.opc-dark .sec.sec-biz,
.dark .opc-plans .sec.sec-biz,
[data-theme="dark"] .opc-plans .sec.sec-biz{background:rgba(245,185,66,.07)!important}
.opc-plans.opc-dark .sec.sec-learn,
.dark .opc-plans .sec.sec-learn,
[data-theme="dark"] .opc-plans .sec.sec-learn{background:rgba(61,220,132,.07)!important}
.opc-plans.opc-dark .sec.sec-svc,
.dark .opc-plans .sec.sec-svc,
[data-theme="dark"] .opc-plans .sec.sec-svc{background:rgba(139,92,246,.09)!important}
.opc-plans.opc-dark .sec.sec-prod,
.dark .opc-plans .sec.sec-prod,
[data-theme="dark"] .opc-plans .sec.sec-prod{background:rgba(255,255,255,.04)!important}
.opc-plans.opc-dark .sec .it,
.dark .opc-plans .sec .it,
[data-theme="dark"] .opc-plans .sec .it{color:#e8f2ff!important}
.opc-plans.opc-dark .sec .de,
.dark .opc-plans .sec .de,
[data-theme="dark"] .opc-plans .sec .de{color:rgba(200,225,250,.55)!important}
.opc-plans.opc-dark .sec .kv span:first-child,
.dark .opc-plans .sec .kv span:first-child,
[data-theme="dark"] .opc-plans .sec .kv span:first-child{color:rgba(200,225,250,.7)!important}
.opc-plans.opc-dark .sec .kv span:last-child,
.dark .opc-plans .sec .kv span:last-child,
[data-theme="dark"] .opc-plans .sec .kv span:last-child{color:#e8f2ff!important}
.opc-plans.opc-dark .cabline .cv,
.dark .opc-plans .cabline .cv,
[data-theme="dark"] .opc-plans .cabline .cv{color:#e8f2ff!important}

/* ===== ★ 2026-09-21 修复：弹窗挂在 body 下，选择器 .opc-plans .X 匹配不到 =====
   JS 把 #mask/#pop append 到 document.body（避免被父容器 overflow 裁剪），
   但原 CSS 全写成 .opc-plans .mask（要求是 .opc-plans 后代）→ 一条都不生效 →
   弹窗 display:none/position:fixed 全失效 → 裸露在文档流末尾（页面底部残留）。
   修法：补 body > .mask 兼容 + 补全深色皮肤（商城页/介绍页深色底）。 */

/* 深色皮肤：弹窗外壳 */
body.opc-dark-host > .mask{background:rgba(4,12,26,.72)}
body.opc-dark-host > .mask .modal{background:#0d2244;border:1px solid rgba(53,198,255,.28)}
body.opc-dark-host > .mask .mh{border-bottom:1px solid rgba(53,198,255,.16)}
body.opc-dark-host > .mask .mh .t{color:#fff}
body.opc-dark-host > .mask .mh .t small{color:rgba(200,225,250,.6)}
body.opc-dark-host > .mask .mx{background:rgba(255,255,255,.06);color:rgba(200,225,250,.7)}
body.opc-dark-host > .mask .mx:hover{background:rgba(255,255,255,.14);color:#fff}
body.opc-dark-host > .mask .cyc button{background:rgba(255,255,255,.04);border-color:rgba(53,198,255,.22);color:rgba(224,240,255,.8)}
body.opc-dark-host > .mask .cyc button small{color:rgba(200,225,250,.55)}
body.opc-dark-host > .mask .cyc button.on{border-color:#35c6ff;background:rgba(53,198,255,.14);color:#fff}
body.opc-dark-host > .mask .cyc button.on small{color:#35c6ff}
body.opc-dark-host > .mask .bill{background:rgba(255,255,255,.035);border-color:rgba(53,198,255,.14)}
body.opc-dark-host > .mask .bill .r span:first-child{color:rgba(224,240,255,.75)}
body.opc-dark-host > .mask .bill .r span:last-child{color:#fff}
body.opc-dark-host > .mask .bill .r.total .amt,
body.opc-dark-host > .mask .bill .r.total b{color:#35c6ff}
body.opc-dark-host > .mask .paytime{color:rgba(200,225,250,.6)}
body.opc-dark-host > .mask .pay .amt{color:rgba(224,240,255,.75)}
body.opc-dark-host > .mask .pay .amt b{color:#fff}
body.opc-dark-host > .mask .agree{color:rgba(200,225,250,.7)}
body.opc-dark-host > .mask .agree a{color:#7fd0ff}
body.opc-dark-host > .mask .gift{background:rgba(245,185,66,.1);border:1px solid rgba(245,185,66,.25)}
body.opc-dark-host > .mask .gift .gt{color:#ffd176}
body.opc-dark-host > .mask .gift .gd{color:rgba(224,240,255,.75)}
body.opc-dark-host > .mask .gift .gd b{color:#ffd176}
/* 主按钮（去支付）：深色下必须是高对比蓝→青渐变 */
body.opc-dark-host > .mask .pay button,
body.opc-dark-host > .mask #mBtn{background:linear-gradient(135deg,#1e6fd0,#35c6ff);color:#fff;border:none;box-shadow:0 6px 18px rgba(53,198,255,.28)}
body.opc-dark-host > .mask .pay button:disabled,
body.opc-dark-host > .mask #mBtn:disabled{background:rgba(255,255,255,.08);color:rgba(200,225,250,.45);box-shadow:none}

/* ==== [SWIPE-MOBILE-BEGIN] 手机端套餐卡横向滑动 · 狼哥2026-09-22 ==== */
/* 判据：只作用手机端（≤640px），桌面端零影响。
   锚点 .opc-plans（三页都有）→ 一个补丁，商城/合伙人/驾驶舱同时生效。
   !important：压过各页面自己的 grid 断点（商城是 3 层选择器，权重更高）。 */
@media (max-width: 640px) {

  /* ① 容器：grid → 横向滚动条 */
  .opc-plans,
  .opc-plans .plans,
  .opc-plans.plans,
  .opc-plans .pt-wrap,
  .opc-plans.pt-wrap {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* 滚动区左右出血，卡片可贴到屏幕边沿 */
    margin-left: -18px !important;
    margin-right: -18px !important;
    padding: 4px 18px 14px !important;
    /* 隐藏滚动条（保留滑动能力） */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* 外层容器（商城 .opc-plans 是 flex 容器本身）防止被拉伸 */
    align-items: stretch;
  }
  .opc-plans::-webkit-scrollbar,
  .opc-plans .plans::-webkit-scrollbar,
  .opc-plans.plans::-webkit-scrollbar,
  .opc-plans .pt-wrap::-webkit-scrollbar,
  .opc-plans.pt-wrap::-webkit-scrollbar { display: none !important; }

  /* ② 卡片：固定宽 78vw + 吸附点（两种卡片类 .pl / .pt 都覆盖） */
  .opc-plans .pl,
  .opc-plans .pt,
  .opc-plans > .pl,
  .opc-plans > .pt,
  .opc-plans .plans > .pl,
  .opc-plans.plans > .pl,
  .opc-plans .pt-wrap > .pt,
  .opc-plans.pt-wrap > .pt {
    flex: 0 0 78vw !important;
    max-width: 78vw !important;
    width: 78vw !important;
    scroll-snap-align: start;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
  }

  /* ③ 排除页面里的 .pop 占位容器（真正的气泡 #pop 挂在 body 上）
        否则它会被当成 flex 子项，占位撑开 */
  .opc-plans > .pop,
  .opc-plans .pop {
    display: none !important;
    position: absolute !important;
    flex: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* ④ 触屏上 hover 位移无意义 → 关掉（避免「滑完卡片还飘」） */
  .opc-plans .pl:hover,
  .opc-plans .pt:hover { transform: none !important; }

  /* ⑤ 商城特例：外层 .prod-block 有 16px 内边距 → 负 margin 加大，
        保证卡片能贴到屏幕边沿、露出下一张（否则只露 10px 看不出可滑） */
  .cockpit-plans .cockpit-plan-cards .plans,
  .cockpit-plans .cockpit-plan-cards > .plans {
    margin-left: -34px !important;
    margin-right: -34px !important;
    padding-left: 34px !important;
    padding-right: 34px !important;
  }

  /* ⑥ 最后一张右侧留白，避免贴边 */
  .opc-plans .pl:last-child,
  .opc-plans .pt:last-child { margin-right: 4px; }
}
/* ==== [SWIPE-MOBILE-END] ==== */

/* ==== [FIX-0922-BEGIN] ==== */
/* ★ 2026-09-22 狼哥反馈：驾驶舱套餐卡底部按钮太窄（90px / 卡 276px）
 *
 * 真因（实测非猜）：
 *   宿主页面有全局 `.foot{max-width:1200px;margin:0 auto;padding:0 24px}`（页面页脚样式），
 *   `.opc-plans` 组件内的 `.foot` 被它命中 → `margin:0 auto` 在 flex 子项上
 *   【吸收剩余空间】→ 子项退化为「按内容宽度」(shrink-to-fit) 而不是 stretch
 *   → .foot 只剩 133px（按钮 content 93px）→ 按钮 `width:100%` 也只能填 93px。
 *
 * 修法：把组件自己的 .foot 显式撑满 + 清掉继承来的 auto margin / max-width。
 * （用 !important 是因为宿主页面的 `.foot` 有的带 !important，且组件要保证跨宿主一致）
 */
.opc-plans .pl .foot,
.opc-plans .pt .foot,
.opc-plans > .pl > .foot,
.opc-plans > .pt > .foot,
.opc-plans .plans > .pl > .foot,
.opc-plans.plans > .pl > .foot,
.opc-plans .pt-wrap > .pt > .foot,
.opc-plans.pt-wrap > .pt > .foot {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* 按钮本身也保底撑满（防宿主其它 .btn 规则干扰） */
.opc-plans .pl .foot > .btn,
.opc-plans .pt .foot > .btn {
  width: 100% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* ★ 2026-09-22 商城页「不确定先选哪个？」—— `.strip b{color:var(--blue-900)}` 是深蓝，
 *   而该条在深色主题下底色是 rgba(14,36,71,.62)（深底）→ 深字贴深底 = 看不见。
 *   这里只做「深色宿主」下的兜底覆盖（浅色页不受影响）。*/
/* ★ 宿主深色标记有两个：`.opc-dark`（组件自己的皮肤类）和 `body.opc-dark-host`
 *   （官网深色页给 body 打的标记，商城页用的就是这个）→ 两个都要覆盖 */
.opc-dark .strip b,
.dark .strip b,
[data-theme="dark"] .strip b,
body.opc-dark-host .strip b {
  color: #eaf3ff !important;
}
.opc-dark .strip .txt,
.dark .strip .txt,
[data-theme="dark"] .strip .txt,
body.opc-dark-host .strip .txt {
  color: #c7d6e8 !important;
}
/* ==== [FIX-0922-END] ==== */