/* ==========================================================================
   css/index/content.css
   用途：首页（Hero / 卖点 / 信任指标 / 热门商品）
   （由 Blade 内联样式抽取，M12 静态资源分离，2026-09-17）
   ========================================================================== */

    .hero { padding:64px 0 15px; background:
        radial-gradient(1000px 380px at 12% -10%, rgba(61,123,255,.34), transparent 60%),
        radial-gradient(800px 320px at 92% 0%, rgba(124,58,237,.26), transparent 62%); }
    .hero h1 { font-size:44px; line-height:1.2; margin:0 0 14px; letter-spacing:-.5px; }
    .hero h1 em { font-style:normal; color:var(--primary); }
    .hero p.lead { color:var(--muted); font-size:17px; max-width:640px; margin:0 0 22px; }
    .hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
    .badges { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
    .badge { font-size:12px; color:var(--muted); border:1px solid var(--line);
        border-radius:999px; padding:5px 12px; background:rgba(255,255,255,.02); }
    section.block { padding:15px 0; }
    .section-head { margin-bottom:26px; }
    .section-head h2 { font-size:26px; margin:0 0 6px; }
    .section-head p { color:var(--muted); margin:0; font-size:14px; }
    .metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
    .metric { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
        padding:20px; }
    .metric b { display:block; font-size:24px; margin-bottom:4px; }
    .metric span { color:var(--muted); font-size:13px; }
    .cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
    .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
        padding:20px; display:flex; flex-direction:column; gap:10px; }
    .card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .card h3 { font-size:18px; margin:0; }
    .tag { font-size:11px; padding:3px 9px; border-radius:999px;
        background:rgba(61,123,255,.16); color:#9dc0ff; border:1px solid rgba(61,123,255,.3); }
    .points { list-style:none; margin:0; padding:0; color:var(--muted); font-size:13px; }
    .points li { padding:3px 0 3px 18px; position:relative; }
    .points li:before { content:"✓"; position:absolute; left:0; color:var(--success); }
    .price-row { display:flex; align-items:baseline; gap:10px; margin-top:auto; }
    .price { font-size:22px; font-weight:700; color:#fff; }
    .price-old { color:var(--muted); text-decoration:line-through; font-size:13px; }
    .off { color:var(--success); font-size:12px; }
    .features { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
    .feature { border:1px solid var(--line); border-radius:var(--radius); padding:18px;
        background:linear-gradient(180deg, rgba(255,255,255,.03), transparent); }
    .feature b { display:block; margin-bottom:6px; }
    .feature span { color:var(--muted); font-size:13px; }
    /* M40：空态居中（列表页 / 区块无数据） */
    .empty { color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius); padding:22px; text-align:center; }
    @media (max-width:900px) {
        .hero h1 { font-size:32px; }
        .metrics, .cards, .features { grid-template-columns:1fr; }
    }

    /* -------------------------------------------------------------------------
       M67：首页品牌卡片（LOGO + 名称 + 热门徽标 + 分类 · 商品数 + 卖点前 2 条 + 起价）
       ------------------------------------------------------------------------- */
    .brand-card .brand-head { display:flex; align-items:center; gap:8px; min-width:0; }
    .brand-card .brand-icon { width:50px; height:50px; border-radius:7px; object-fit:contain;
        background:rgba(255,255,255,.05); padding:3px; flex:0 0 auto; }
    .brand-card .brand-initial { width:26px; height:26px; border-radius:7px; flex:0 0 auto;
        display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600;
        color:#9dc0ff; background:rgba(61,123,255,.16); text-transform:uppercase; }
    .brand-card h3 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .brand-meta { color:var(--muted); font-size:12.5px; }
    .brand-from { color:var(--muted); font-size:12px; display: none;}

    /* -------------------------------------------------------------------------
       M72：品牌卡片内容固定为 ICON + 名称 + 价格（现价 / 市场价 / 优惠）+ 查看详情
       （首页与列表页共用 .brand-card；列表页首字占位为 .brand-card-initial）
       ------------------------------------------------------------------------- */
    .brand-card .brand-card-initial { width:40px; height:40px; border-radius:10px; flex:0 0 auto;
        display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:600;
        color:#9dc0ff; background:rgba(61,123,255,.16); text-transform:uppercase; }
    .brand-card .price-row { flex-wrap:wrap; align-items:baseline; gap:6px 10px; }
    .brand-card .price-market { color:var(--muted); font-size:12.5px; text-decoration: line-through var(--muted) 1px solid;  }
    .brand-card .off { color:var(--success); font-size:12.5px; }
    .brand-card > .btn { align-self:flex-start; }
    /* 列表页分页条（服务端分页，保留筛选条件） */
    #brand-pager { display:flex; align-items:center; justify-content:center; gap:14px;
        flex-wrap:wrap; padding:22px 0 6px; }
    #brand-pager .btn[aria-disabled="true"] { opacity:.45; pointer-events:none; }

    /* -------------------------------------------------------------------------
       M72：品牌页「第三方服务」免责声明（brand-metrics 下方固定文案）
       ------------------------------------------------------------------------- */
    .brand-disclaimer { margin-top: 5px; border:1px dashed var(--line);
        border-radius:var(--radius); color:var(--muted); font-size:12.5px; line-height:1.7; }
    .brand-disclaimer p { margin:0; }

/* ==========================================================================
   css/index/content.css
   用途：商品列表页
   （由 Blade 内联样式抽取，M12 静态资源分离，2026-09-17）
   ========================================================================== */

    .page-head { padding:44px 0 24px; }  /* border-bottom:1px solid var(--line);*/
    .breadcrumb { color:var(--muted); font-size:13px; margin-bottom:12px; }
    .breadcrumb a:hover { color:var(--text); }
    .page-head h1 { font-size:30px; margin:0 0 8px; }
    .page-head p { color:var(--muted); margin:0; font-size:14px; }
    .toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
        padding:22px 0; }
    .tabs { display:flex; flex-wrap:wrap; gap:8px; }
    .tab { border:1px solid var(--line); border-radius:999px; padding:6px 15px; font-size:13px;
        color:var(--muted); }
    .tab:hover { color:var(--text); border-color:var(--primary); }
    .tab.active { background:var(--primary); border-color:var(--primary); color:#fff; }
    .search { display:flex; gap:8px; }
    .search input { background:var(--bg-soft); border:1px solid var(--line); border-radius:999px;
        padding:8px 16px; color:var(--text); min-width:220px; outline:none; font-size:14px; }
    .search input:focus { border-color:var(--primary); }
    .count { color:var(--muted); font-size:13px; padding-bottom:14px; }
    .cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
    .card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
        padding:20px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s; }
    .card:hover { border-color:rgba(145, 238, 69, 0.98);background: linear-gradient(150deg, rgba(145, 238, 69, 0.1), rgba(255, 255, 255, 0.035));box-shadow: rgba(98, 232, 82, 0.14) 0px 0px 24px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; transform: translateY(-2px);}
    .card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .card h3 { font-size:18px; margin:0; }
    .tag { font-size:11px; padding:3px 9px; border-radius:999px;
        background:rgba(61,123,255,.16); color:#9dc0ff; border:1px solid rgba(61,123,255,.3); }
    .points { list-style:none; margin:0; padding:0; color:var(--muted); font-size:13px; }
    .points li { padding:3px 0 3px 18px; position:relative; }
    .points li:before { content:"✓"; position:absolute; left:0; color:var(--success); }
    .price-row { display:flex; align-items:baseline; gap:10px; margin-top:auto; }
    .price { font-size:22px; font-weight:700; color:#fff; }
    .price-old { color:var(--muted); text-decoration:line-through; font-size:13px; }
    .off { color:var(--success); font-size:12px; }
    .empty { color:var(--muted); border:1px dashed var(--line); border-radius:var(--radius); padding:26px; text-align:center; }
    @media (max-width:900px) { .cards { grid-template-columns:1fr; } }

/* ==========================================================================
   css/index/content.css
   用途：商品详情页（套餐 / FAQ / 评价 / 相关推荐）
   （由 Blade 内联样式抽取，M12 静态资源分离，2026-09-17）
   ========================================================================== */

    .wrap { padding:36px 0 12px; }
    .breadcrumb { color:var(--muted); font-size:13px; margin-bottom:18px; }
    .breadcrumb a:hover { color:var(--text); }
    .layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:26px; align-items:start; }
    .panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; }
    /* 无卡片容器：用于商品详情页「标题 + 套餐」区块 —— 去掉统一背景框与背景色 */
    .panel-plain { background:transparent; border:0; border-radius:0; padding:0; }
    .brand-line { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .brand-line h1 { font-size:26px; margin:0; }
    .tag { font-size:11px; padding:3px 9px; border-radius:999px;
        background:rgba(61,123,255,.16); color:#9dc0ff; border:1px solid rgba(61,123,255,.3); }
    .subtitle { color:var(--muted); font-size:14px; margin:0 0 6px; }
    .meta { color:var(--muted); font-size:12px; }
    /* 套餐：一行 3 个（窄屏自动降为 2 列 / 1 列，见文件末尾媒体查询） */
    .plans { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:14px; align-items:stretch; }
    .plan { border:1px solid var(--line); border-radius:var(--radius); padding:16px; cursor:pointer; height:100%;
        display:flex; flex-direction:column; gap:8px; transition:border-color .2s, background .2s; }
    .plan:hover { border-color:var(--mainColor); }
    .plan.selected { border-color:var(--mainColor);  }
    .plan-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .plan-name { font-weight:600; }
    .plan-price { font-size:19px; font-weight:700; color:#fff; }
    .plan-old { color:var(--muted); text-decoration:line-through; font-size:12px; margin-left:8px; }
    .points { list-style:none; margin:0; padding:0; color:var(--muted); font-size:13px; }
    .points li { padding:2px 0 2px 18px; position:relative; }
    .points li:before { content:"✓"; position:absolute; left:0; color:var(--success); }
    .tabs-block { margin-top:26px; }
    .tabs-head { display:flex; gap:8px; border-bottom:1px solid var(--line); margin-bottom:16px; }
    .tabs-head a { padding:8px 14px; font-size:14px; color:var(--muted); border-bottom:2px solid transparent; }
    .tabs-head a.active { color:var(--text); border-color:var(--mainColor); }
    .faq-item { border-bottom:1px solid var(--line); padding:12px 0; }
    .faq-item summary { cursor:pointer; font-weight:600; font-size:14px; }
    .faq-item p { color:var(--muted); font-size:13px; margin:8px 0 0; }
    /* 右侧下单区：多个独立卡片堆叠，由容器承担吸顶（M20 结构调整） */
    .buy-col { position:sticky; top:84px; align-self:start; }
    .buy { }
    .panel-title { margin:0 0 10px; font-size:15px; }
    .buy .price-big { font-size:30px; font-weight:700; color:#fff; }
    .buy .price-old { color:var(--muted); text-decoration:line-through; font-size:13px; margin-left:10px; }
    .buy .off { color:var(--success); font-size:12px; }
    .buy .btn { width:100%; text-align:center; margin-top:14px; padding:12px; border-radius:10px; }
    .buy .tip { color:var(--muted); font-size:12px; margin-top:10px; line-height:1.6; }
    /* 右侧下单面板（M20）：分块标题、表单宽度与总计 */
    .buy-block { border-top:1px solid var(--line); margin-top:14px; padding-top:12px; }
    .buy-title { margin:0 0 8px; font-size:14px; }
    .buy .field { margin:0; }
    .buy input[type="text"], .buy input[type="number"], .buy select { width:100%; }
    .buy .total-line { display:flex; justify-content:space-between; gap:10px; margin-top:10px; color:var(--muted); font-size:13px; }
    .buy .amount { font-size:22px; font-weight:700; color:#fff; margin:6px 0 0; }
    /* 表单控件样式（M20 补充）：统一 .input 类 + .field 内的输入框 / 下拉框
       注意：优惠码输入框与数量输入框并不在 .field 容器内，故必须有独立的 .input 类规则 */
    .field label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
    .input, .field input[type="text"], .field input[type="number"], .field input[type="email"], .field select {
        background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; box-sizing:border-box;
        padding:10px 12px; color:var(--text); font-size:14px; outline:none; transition:border-color .2s;
    }
    .input:focus, .field input:focus, .field select:focus { border-color:var(--primary); }
    .field input, .field select { width:100%; }
    /* 数量与总计卡片：三行左右对齐（M20 补充） */
    .buy-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .buy-row + .buy-row { margin-top:12px; }
    .buy-row .buy-label { color:var(--muted); font-size:13px; white-space:nowrap; }
    .buy-row .buy-value { font-size:22px; font-weight:700; color:#fff; }
    .qty-ctrl { display:flex; align-items:center; gap:8px; }
    .qty-ctrl input { width:72px; text-align:center; }
    .qty-ctrl .btn { width:40px; flex:0 0 40px; margin:0; padding:8px 0; text-align:center; }
    /* 结算页（M21）：套餐行 / 充值信息两列 / 支付方式图标 / 券选择 */
    .item-row { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .item-row .item-name { font-weight:600; }
    .item-row .item-price { color:#fff; font-weight:700; }
    .acc-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:10px; }
    .acc-cell { background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; padding:10px 12px; }
    .acc-label { color:var(--muted); font-size:12px; margin-bottom:4px; }
    .acc-value { color:var(--text); font-size:14px; word-break:break-all; }
    .pay-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
    .pay-item { display:flex; align-items:center; gap:8px; padding:10px 12px; border:1px solid var(--line);
        border-radius:10px; background:var(--card); color:var(--text); cursor:pointer; text-align:left; font-size:14px; }
    .pay-item.active { border-color:var(--primary); background:rgba(61,123,255,.08); }
    .pay-item img { width:26px; height:26px; object-fit:contain; }
    .pay-item .pay-icon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px;
        border-radius:50%; background:rgba(61,123,255,.16); color:#9dc0ff; font-size:13px; font-weight:600; }
    .pay-item .pay-tip { color:var(--muted); font-size:12px; }
    .coupon-option { display:flex; align-items:center; gap:8px; padding:8px 0; font-size:13px; cursor:pointer; }
    .coupon-option.disabled { opacity:.55; cursor:not-allowed; }
    .coupon-option .opt-gain { margin-left:auto; color:var(--success); }
    @media (max-width:900px) { .acc-grid { grid-template-columns:minmax(0,1fr); } }
    .metrics { display:flex; gap:18px; margin-top:16px; color:var(--muted); font-size:12px; flex-wrap:wrap; }
    .related { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    @media (max-width:1200px) { .related { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:760px) { .related { grid-template-columns:minmax(0,1fr); } }

    .review { border-bottom:1px solid var(--line); padding:12px 0; font-size:13px; }
    .review .score { color:var(--warn); }
    .review .meta { margin-top:4px; }
    .empty { color:var(--muted); font-size:13px; }
    @media (max-width:900px) { .layout { grid-template-columns:1fr; } .related { grid-template-columns:1fr 1fr; } }
    /* 套餐列数自适应：一行 3 个 → 2 个 → 1 个 */
    @media (max-width:1200px) { .plans { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    @media (max-width:760px) { .plans { grid-template-columns:minmax(0,1fr); } }

/* ---------------------------------------------------------------------------
   M47：移动端下单优化 —— 底部操作条（详情页 / 结算页 / 支付页共用）
        详情页的下单区（优惠券 / 充值信息 / 数量与总计）在窄屏改造为「底部抽屉」
   --------------------------------------------------------------------------- */
.mobile-bar { display: none; }
.drawer-mask { display: none; }
.drawer-head { display: none; }

@media (max-width:900px) {
    /* 底部操作条：随时可改数量 / 填写信息 / 立即下单 */
    .mobile-bar { display: flex; position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 52;
        align-items: center; justify-content: space-between; gap: 10px;
        padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
        background: rgba(11,16,32,.96); border-top: 1px solid var(--line);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
    .mobile-bar .mb-info { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
    .mobile-bar .mb-total { font-size: 19px; font-weight: 700; color: #fff; }
    .mobile-bar .mb-sub { color: var(--muted); font-size: 12px; white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
    .mobile-bar .mb-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .mobile-bar .btn { padding: 9px 14px; font-size: 13px; cursor: pointer; }
    .mobile-bar .btn.ghost { border: 1px solid var(--line); background: transparent; }
    body { padding-bottom: 78px; }

    /* M48（结算页手机端精简）：隐藏「订单统计」与「交付说明」两卡
       —— 应付金额 / 数量已在底部操作条呈现，下单入口为底部条「立即购买」，
          避免首屏被重复信息占满（桌面端不受影响） */
    .checkout-stats, .checkout-delivery { display: none; }

    /* 详情页下单区 → 底部抽屉（默认收起，点底部条「填写信息」或数量/总计展开） */
    .buy-col { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 62; margin: 0;
        max-height: 84vh; overflow-y: auto;
        padding: 12px 14px calc(86px + env(safe-area-inset-bottom, 0px));
        background: var(--bg); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
        box-shadow: 0 -18px 40px rgba(0,0,0,.5);
        transform: translateY(106%); transition: transform .28s ease; }
    .buy-col.open { transform: translateY(0); }
    .buy-col .panel { background: transparent; border: 0; padding: 0; margin: 0; }
    .buy-col .panel + .panel { margin-top: 14px !important; border-top: 1px solid var(--line); padding-top: 12px; }
    .drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .drawer-head span { font-weight: 700; font-size: 15px; }
    .drawer-close { background: transparent; border: 0; color: var(--muted); font-size: 24px;
        line-height: 1; cursor: pointer; }
    .drawer-mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 58; background: rgba(6,10,20,.62); }
    .drawer-mask.open { display: block; }
}

/* ---------------------------------------------------------------------------
   M49：结算页 / 支付页两列网格的窄屏适配
        这两页原先以**内联 style** 写死 `minmax(0,1.4fr) minmax(0,1fr)`；
        内联样式优先级高于样式表，媒体查询无法覆盖（手机端会挤成两列）。
        现抽为 .grid-split 类：桌面端保持 1.4 : 1 两列，手机端（≤900px）单列铺满
   --------------------------------------------------------------------------- */
.grid-split { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
@media (max-width:900px) { .grid-split { grid-template-columns: minmax(0,1fr); } }

/* ---------------------------------------------------------------------------
   M53：品牌页区块（品牌 → 商品 → 套餐）
        「模式 / 类型」的标题字样来自品牌自身配置（.filter-label 文本由服务端输出）
   M56：品牌区块改用**无卡片容器**（视图为 class="panel panel-plain"），
        原 .brand-panel 卡片样式（边框 / 圆角 / 卡片底色 / 内边距）已移除，
        仅保留区块间距；id="brand-panel" 只作结构锚点，不产生视觉样式。
   --------------------------------------------------------------------------- */
#brand-panel { margin:0 0 22px; }
.brand-head { display:flex; gap:14px; align-items:flex-start; }
.brand-logo { width:100px; height:100px; border-radius:12px; flex:0 0 auto; object-fit:cover; }
.brand-name { margin:0 0 6px; font-size:24px; }
.brand-intro { margin:0 0 8px; color:var(--muted); font-size:13px; }
.brand-metrics { display:flex; gap:14px; color:var(--muted); font-size:12px; flex-wrap:wrap; display:none; }
/* M54：品牌卖点（一行多条，移动端自动换行） */
.brand-points { display:flex; flex-wrap:wrap; gap:6px 18px; margin:12px 0 0; padding:0; list-style:none;
    color:var(--muted); font-size:13px; }
.brand-points li { position:relative; padding-left:16px; }
.brand-points li::before { content:'✓'; position:absolute; left:0; color:var(--success); font-weight:700; }
/* M55：品牌页「商品 card」网格（由原 SKU 转来的独立商品） */
.brand-goods { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
.brand-good { display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--card); }
.brand-good:hover { border-color:var(--mainColor); }
.brand-good.active { border-color:var(--mainColor); }
/* M55：品牌页「商品 SKU card」网格（1 / 3 / 6 个月等规格） */
.brand-skus { margin-top:12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.brand-sku { display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--card); }
@media (max-width:900px) {
    .brand-goods, .brand-skus { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
}
.brand-filters { margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.filter-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.filter-label { font-size:12px; min-width:52px; }
.chip { border:1px solid var(--line); background:var(--card); border-radius:10px; padding:15px 18px; font-size:13px; color:#ffffff; font-weight:600; }
.chip:hover { border-color:var(--mainColor); color:var(--text); }
.chip.active { border-color:var(--mainColor); background:var(--card);  }
/* M56：M53 遗留的 flex 版本（.brand-goods / .brand-good / .brand-skus / .brand-sku 的单列布局）
   会因**书写顺序在后**覆盖 M55 的网格版本，导致「商品 card / 商品 SKU card」退化为单列，故移除；
   仅保留网格版本所需的间距与卡片内部文字样式。 */
.brand-goods, .brand-skus { margin-top:14px; }
.brand-good-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand-good-name { font-weight:700; color: #fff; }
.brand-good-price { color:#fff; font-weight:700; }
.sku-name { font-size:13px; }
.sku-tags { display:flex; gap:6px; }
.sku-tag { font-style:normal; font-size:11px; color:#9dc0ff; background:rgba(61,123,255,.16);
    border-radius:999px; padding:2px 8px; }
.sku-price { margin-left:auto; color:#fff; font-weight:700; font-size:13px; }
.sku-buy { padding:6px 12px; font-size:12px; }
@media (max-width:900px) {
    .sku-price { margin-left:0; }
    .sku-buy { margin-left:auto; }
}

/* ==========================================================================
   css/index/content.css
   用途：政策页
   （由 Blade 内联样式抽取，M12 静态资源分离，2026-09-17）
   ========================================================================== */

    .page-head { padding:34px 0 10px; }
    .crumbs { color:var(--muted); font-size:13px; margin-bottom:10px; }
    .crumbs a:hover { color:var(--text); }
    .page-head h1 { font-size:26px; margin:0 0 8px; }
    .page-head .subtitle { color:var(--muted); margin:0; }
    .policy-layout { display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; padding:18px 0 40px; }
    .policy-nav { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:14px; height:max-content; }
    .policy-nav h4 { margin:0 0 10px; font-size:13px; color:var(--text); }
    .policy-nav a { display:block; padding:7px 8px; border-radius:9px; font-size:13px; color:var(--muted); }
    .policy-nav a:hover { background:rgba(255,255,255,.04); color:var(--text); }
    .policy-nav a.active { background:rgba(61,123,255,.16); color:#cfe0ff; }
    .prose { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:26px 28px; }
    .prose p { margin:0 0 16px; color:#d7ddf0; }
    .updated { color:var(--muted); font-size:12px; margin-top:14px; }
    @media (max-width:900px) { .policy-layout { grid-template-columns:minmax(0,1fr); } }

/* ==========================================================================
   css/index/content.css
   用途：帮助中心
   （由 Blade 内联样式抽取，M12 静态资源分离，2026-09-17）
   ========================================================================== */

    .page-head { padding:34px 0 6px; }
    .page-head h1 { font-size:26px; margin:0 0 8px; }
    .page-head p { color:var(--muted); margin:0; }
    .tools { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:18px 0 6px; }
    .tools input[type=search] { flex:1 1 260px; min-width:200px; padding:10px 14px; border-radius:999px;
        border:1px solid var(--line); background:var(--card); color:var(--text); }
    .tabs { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 20px; }
    .tabs a { border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13px; color:var(--muted); }
    .tabs a.active, .tabs a:hover { border-color:var(--primary); color:#cfe0ff; }
    .cat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
    .cat-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:16px; }
    .cat-card h4 { margin:0 0 6px; font-size:14px; }
    .cat-card p { margin:0; color:var(--muted); font-size:12.5px; }
    .cat-card .count { color:var(--primary); font-size:12px; margin-top:8px; }
    /* .list { display:grid; gap:12px; } */
    .item { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:16px 18px; }
    .item h3 { margin:0 0 6px; font-size:15px; }
    .item h3 a:hover { color:#cfe0ff; }
    .item p { margin:0; color:var(--muted); font-size:13px; }
    .item .meta { color:var(--muted); font-size:12px; margin-top:8px; }
    .empty { border:1px dashed var(--line); border-radius:var(--radius); padding:28px; text-align:center; color:var(--muted); }
    .pager { display:flex; gap:10px; justify-content:center; margin:26px 0 10px; color:var(--muted); font-size:13px; }
    @media (max-width:900px) { .cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ==========================================================================
   css/index/content.css
   用途：文章详情
   （由 Blade 内联样式抽取，M12 静态资源分离，2026-09-17）
   ========================================================================== */

    .page-head { padding:34px 0 10px; }
    .crumbs { color:var(--muted); font-size:13px; margin-bottom:10px; }
    .crumbs a:hover { color:var(--text); }
    .page-head h1 { font-size:26px; margin:0 0 8px; }
    .page-head .summary { color:var(--muted); margin:0; }
    .article-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:28px; padding:18px 0 40px; }
    .prose { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:26px 28px; }
    .prose p { margin:0 0 16px; color:#d7ddf0; }
    .tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
    .tags span { border:1px solid var(--line); border-radius:999px; padding:3px 10px; font-size:12px; color:var(--muted); }
    .side { border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:16px; height:max-content; }
    .side h4 { margin:0 0 10px; font-size:13px; }
    .side a { display:block; padding:7px 0; font-size:13px; color:var(--muted); }
    .side a:hover { color:var(--text); }
    @media (max-width:900px) { .article-layout { grid-template-columns:minmax(0,1fr); } }

    /* ---------------------------------------------------------------------
       M39：商品「热门」徽标
       由 ai_product.is_hot 字段驱动（取代原 tags「热门」标签），
       文案由语言包 common.label.hot 提供（热门 / Hot / Хит）。
       --------------------------------------------------------------------- */
    .tag-hot {
        background: linear-gradient(135deg, rgba(255,138,76,.22), rgba(255,64,129,.22));
        color:#ffb37a;
        border-color:rgba(255,138,76,.45);
    }

/* ---------------------------------------------------------------------------
   M58：品牌列表与品牌页（品牌分类 1–2 级 / 商品 / 商品 SKU，全部 JS 交互）
   --------------------------------------------------------------------------- */
/* 列表页品牌卡片 */
.brand-card-head { display:flex; align-items:center; gap:10px; }
.brand-card-icon { width:40px; height:40px; border-radius:10px; flex:0 0 auto; object-fit:cover; }
.brand-card-intro { color:var(--muted); font-size:13px; margin:6px 0 0; }
.price-from { color:var(--muted); font-size:12px; display:none }
/* 品牌页「已选：商品 · 规格」 */
.brand-picked { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    font-size:13px; color:var(--text); }
.brand-picked .picked-label { color:var(--muted); }
.brand-picked .picked-goods { font-weight:700; }
.brand-picked .picked-sep { color:var(--muted); }
.brand-picked .picked-sku { color:#9dc0ff; }
/* 品牌分类胶囊改为按钮 */
/*#brand-filters button.chip { cursor:pointer; background:transparent; font:inherit; }*/
/*#brand-filters button.chip.active { border-color:var(--mainColor); background: var(--card); }*/
/*#brand-filters button.chip[hidden] { display:none; }*/
/* 按商品预渲染的详情 / FAQ 区块 */
.goods-block[hidden] { display:none; }
#brand-goods .brand-good[hidden] { display:none; }
#buy-panel .empty { text-align:center; }

/* ---------------------------------------------------------------------------
   M60：品牌页分类 / 商品 / SKU 展示优化
   ① 分类选项换行显示、默认选中第一项、不显示「全部」与 0 商品分类（渲染层控制）
   ② 商品 card 一行三个，展示名称 + 起价 + 卖点（M113 起完整展示全部卖点；无 SKU 时给出提示）
   ③ 商品 SKU 每项左右显示名称与价格
   --------------------------------------------------------------------------- */
/* 分类筛选：一级 / 二级分行，选项自动换行 */
.filter-row { display:flex; align-items:center; }
#brand-filters .filter-row { flex-wrap:wrap; }
#brand-filters .filter-row + .filter-row { margin-top:8px; }
/* 商品 card：一行 3 个，纵向排布名称 / 价格 / 卖点 */
#brand-goods.brand-goods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; align-items:stretch; }
button.brand-good { display:flex; flex-direction:column; align-items:stretch; gap:6px; text-align:left; height:100%; font:inherit; }
.brand-good-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.brand-good-name { font-weight:700; }
.brand-good-price { color:var(--success); font-weight:700; font-size:20px; white-space:nowrap; }
.brand-good-points { display:flex; flex-direction:column; gap:2px; }
.brand-good-point { color:var(--muted); font-size:12px; line-height:1.5; }
.brand-good-nosku { color:#ffb37a; font-size:12px; }
/* 商品 SKU：左侧名称、右侧价格
   说明：该按钮同时带 .plan 类（商品详情页套餐样式，曾以 column 排布），
   故此处显式声明 flex-direction:row，避免被同特异性的 .plan 规则影响为上下两行 */
.brand-sku { display:flex; align-items:center; justify-content:space-between; flex-direction:row; gap:10px; }
.brand-sku .sku-name { font-weight:600; color: #fff; }
.brand-sku .sku-price { margin-left:auto; color:var(--success); font-weight:700; font-size:20px; white-space:nowrap; }
@media (max-width:1200px) {
    #brand-goods.brand-goods { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
    #brand-goods.brand-goods { grid-template-columns:minmax(0,1fr); }
    #brand-filters .filter-row { gap:6px; }
}

/* ---------------------------------------------------------------------------
   M61：品牌级「筛选项名称」（filter-label，多语言）
   ① 名称（label）**独占一行**，选项（chips）另起一行并自动换行；
   ② 商品区 / 商品 SKU 区标题（.section-label）同样独占一行；
      所选商品无 SKU 时 JS 会给标题加 hidden，故此处兜底 [hidden] 不显示。
   --------------------------------------------------------------------------- */
.filter-label { display:block; width:100%; font-size:13px; font-weight:600; }
#brand-filters .filter-row { flex-direction:column; align-items:flex-start; gap:6px; }
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; }
#brand-filters .filter-row .filter-label { margin-bottom:2px; }
.section-label { margin:14px 0 8px; color:var(--text); font-size:13px; }
.section-label[hidden] { display:none; }
#brand-sku-label { margin-top:16px; }

/* ---------------------------------------------------------------------------
   M62：商品 SKU 按「选中商品」显示
   `.brand-skus` 自身声明了 `display:grid`，作者样式的 display 会**覆盖 UA 的
   `[hidden] { display:none }`**，导致品牌页把**所有商品**的 SKU 同时显示出来
   （如 chatai：3 个商品 × 3 档 SKU = 9 项）。
   故此处显式声明隐藏（与 M60 的 `.goods-block[hidden]` / `.brand-good[hidden]` 同一处理）。
   --------------------------------------------------------------------------- */
.brand-skus[hidden],
.brand-skus .brand-sku[hidden] { display:none; }

/* ---------------------------------------------------------------------------
   M63：确认页（checkout）商品名与 SKU 名同栏
   `#product-name`（商品名）与 `#sku-name`（SKU 名）现同处 `.item-name`，
   需按行内弹性排列（不换行、基线对齐），`.item-sep` 作为分隔符弱化显示。
   --------------------------------------------------------------------------- */
.item-row .item-name { display:inline-flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.item-row .item-name .item-sep { color:var(--muted); }

/* ---------------------------------------------------------------------------
   M64：品牌行（结算页 checkout / 支付页 payment）
   ① 不再显示「品牌」标签文案，仅展示品牌名（+ 品牌 LOGO）；
   ② 品牌名**靠左**（与卡片内容左边界对齐），LOGO 在名称左侧；
   ③ LOGO 缺失时隐藏图片（`[hidden]` 需显式兜底，见 M62 经验）。
   --------------------------------------------------------------------------- */
.brand-line { display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:0 0 6px; }
.brand-line .brand-logo { width:22px; height:22px; border-radius:6px; object-fit:cover; flex:0 0 auto; }
.brand-line .brand-logo[hidden] { display:none; }
.brand-line #brand-name { font-weight:600; }

/* ---------------------------------------------------------------------------
   M65：推荐品牌（原「商品推荐位」改为「品牌推荐位」）
   M107：卡片**与首页推荐位一致**（`.card.brand-card`：ICON / 首字占位 + 名称 +
        价格（现价 · 市场价 · 优惠幅度）+ 查看详情），**一行最多 3 个**。
        卡片本体为 `<a>`，故补 `text-decoration:none` 与 CTA 左对齐。
   --------------------------------------------------------------------------- */
.brand-reco { display:flex; flex-direction:column; gap:10px; text-decoration:none; }

.brand-recos { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }

.brand-reco:hover h3 { color:#cfe0ff; }

/* 窄屏：一行最多 3 个 → 2 个 → 1 个 */
@media (max-width:900px) {
    .brand-recos { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

@media (max-width:640px) {
    .brand-recos { grid-template-columns:minmax(0, 1fr); }
}

/*---------------------------------------------------------------------------
   1. 桌面端：卡片背景色、圆角、内边
   ---------------------------------------------------------------------------
*/
@media (max-width:900px) {
    .card_custom{
        background:none;
        border:none;
        padding:0px;
    }
}


.goods-block img{
    width: 100%;
}

/* ---------------------------------------------------------------------------
   M92：充值信息字段类型（多行文本 / 数字 / 图片上传）与「提示支持 HTML」
   ① textarea 字段可纵向拉伸；
   ② 提示（tips）由后台运营以 HTML 录入，此处兜底行距与段落/列表/链接样式；
   ③ image 字段：按钮 + 状态文案 + 本地预览缩略图；
   ④ 只读展示（结算页 / 支付页 / 订单详情）中的图片字段渲染为缩略图。
   --------------------------------------------------------------------------- */
.field textarea.input { resize: vertical; min-height: 78px; line-height: 1.6; }
.field .hint { line-height: 1.65; }
.field .hint p { margin: 4px 0; }
.field .hint a { text-decoration: underline; }
.field .hint ul { margin: 4px 0 4px 18px; }
.field-image { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field-image .img-status { font-size: 12px; }
.field-image .img-preview { flex: 1 1 100%; }
.field-image .img-preview img { display: block; max-width: 200px; max-height: 200px; border-radius: 8px; border: 1px solid var(--line); }
.acc-img { display: inline-block; }
.acc-img img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }

/* ---------------------------------------------------------------------------
   M106：筛选行 `hidden` 必须显式兜底
   —— 作者样式 `#brand-filters .filter-row { display:flex }`（特异性 1,1,0,0）
      会覆盖 UA 的 `[hidden] { display:none }`，导致 `hidden="hidden"` 元素仍然显示
      （与 M62 的 P-117「.brand-skus 的 display:grid 覆盖 [hidden]」同类）。
   --------------------------------------------------------------------------- */
#brand-filters .filter-row[hidden],
#brand-filters .filter-row[hidden] .filter-label,
#brand-filters .filter-row[hidden] .filter-chips,
#brand-filters .filter-row[hidden] .chip { display: none; }

/* 其它容器内的筛选行 / 选项行同样兜底（无 ID 前缀，特异性低于上面按 ID 的规则） */
.filter-row[hidden] { display: none; }
.filter-chips[hidden] { display: none; }