/* ============================================================
   驭声汽车影音 —— 设计体系 v2「声学暗夜」
   深空蓝黑基底 × 电光蓝渐变 × 琥珀金价格
   8px 间距节奏 · 14px 卡片圆角 · 三层面板景深
   ============================================================ */
:root{
  /* 背景三层景深 */
  --bg:#070a10; --panel:#0f141d; --panel2:#141a26; --panel3:#1a2130;
  /* 线框 */
  --line:#1e2635; --line2:#2a3550;
  /* 文字 */
  --text:#eef2fa; --muted:#93a0b8; --dim:#5d6a82;
  /* 品牌 */
  --blue:#3b82f6; --blue2:#22d3ee; --gold:#ffb020; --red:#ff5c6c; --green:#2bd894; --violet:#9d8cff;
  --grad:linear-gradient(135deg,#3b82f6 0%,#22d3ee 100%);
  --grad-soft:linear-gradient(135deg,rgba(59,130,246,.16),rgba(34,211,238,.10));
  --ring:0 0 0 3px rgba(59,130,246,.18);
  /* 形状 */
  --radius:14px; --radius-sm:10px; --radius-lg:18px;
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --shadow-glow:0 8px 28px rgba(59,130,246,.30);
  /* 字体 */
  --fz-xs:12px; --fz-sm:13px; --fz-md:14px; --fz-lg:16px; --fz-xl:20px; --fz-2xl:24px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:var(--fz-md);line-height:1.65;
  background-image:radial-gradient(1100px 480px at 78% -140px,rgba(59,130,246,.075),transparent 62%),
                   radial-gradient(900px 420px at 8% -120px,rgba(34,211,238,.05),transparent 60%);
  background-repeat:no-repeat;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:var(--fz-md);color:var(--text);background:var(--panel3);border:1px solid var(--line2);border-radius:var(--radius-sm);padding:10px 13px;outline:none;width:100%;transition:border-color .18s,box-shadow .18s}
input:focus,textarea:focus,select:focus{border-color:var(--blue);box-shadow:var(--ring)}
::placeholder{color:var(--dim)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#263149;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#31405f}
::selection{background:rgba(59,130,246,.35)}

.container{max-width:1200px;margin:0 auto;padding:0 16px}
.container.wide{max-width:1440px}
.page-loading{padding:88px 0;text-align:center;color:var(--muted)}

/* ===== 顶栏 ===== */
.topbar{position:sticky;top:0;z-index:100;background:rgba(7,10,16,.86);backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:20px;height:66px;max-width:1200px;margin:0 auto;padding:0 16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:1px;white-space:nowrap}
.logo .mark{width:35px;height:35px;border-radius:10px;background:var(--grad);display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px rgba(59,130,246,.5)}
.logo .mark svg{width:20px;height:20px}
.logo em{font-style:normal;color:var(--blue2)}
.nav-links{display:flex;gap:4px;flex:1}
.nav-links a{position:relative;padding:8px 14px;border-radius:var(--radius-sm);color:var(--muted);font-size:14.5px;white-space:nowrap;transition:.18s}
.nav-links a:hover{color:var(--text);background:var(--panel2)}
.nav-links a.on{color:#fff;background:var(--grad-soft)}
.nav-links a.on::after{content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:1px;background:var(--grad)}
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:22px;padding:6px 15px;width:232px;transition:.18s}
.topbar-search:focus-within{border-color:var(--blue);box-shadow:var(--ring)}
.topbar-search input{background:none;border:none;padding:2px 0;font-size:13px}
.topbar-icons{display:flex;align-items:center;gap:6px}
.icon-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 10px;border-radius:var(--radius-sm);color:var(--muted);font-size:11px;transition:.18s}
.icon-btn:hover{color:var(--text);background:var(--panel2)}
.icon-btn svg{width:20px;height:20px}
.badge{position:absolute;top:0;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--red);color:#fff;font-size:10px;line-height:16px;text-align:center;padding:0 4px;box-shadow:0 0 10px rgba(255,92,108,.5)}
.user-chip{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:22px;padding:4px 13px 4px 4px;cursor:pointer;font-size:13px;transition:.18s}
.user-chip:hover{border-color:var(--line2);background:var(--panel3)}
.avatar{width:26px;height:26px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--radius-sm);padding:10px 22px;font-size:var(--fz-md);font-weight:600;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 4px 18px rgba(59,130,246,.38)}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 22px rgba(59,130,246,.5)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{background:var(--panel3);border:1px solid var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue2);background:var(--panel2)}
.btn-danger{background:rgba(255,92,108,.13);color:var(--red);border:1px solid rgba(255,92,108,.4)}
.btn-danger:hover{background:rgba(255,92,108,.22)}
.btn-gold{background:linear-gradient(135deg,#ffb020,#ff8a00);color:#221500;box-shadow:0 4px 16px rgba(255,150,20,.3)}
.btn-gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-sm{padding:5px 13px;font-size:12.5px;border-radius:8px}
.btn-lg{padding:14px 36px;font-size:16px;border-radius:12px}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

/* ===== 区块 ===== */
.section{margin-top:52px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.sec-head h2{font-size:22px;font-weight:800;letter-spacing:1px;position:relative;padding-left:15px}
.sec-head h2::before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:4px;border-radius:2px;background:var(--grad);box-shadow:0 0 12px rgba(59,130,246,.55)}
.sec-head .more{color:var(--muted);font-size:13px;transition:.18s}
.sec-head .more::after{content:' ›';color:var(--dim)}
.sec-head .more:hover{color:var(--blue2)}
/* 视频专区标题：手机端显示"讲解视频" */
.tt-m{display:none}

/* ===== Banner 轮播 ===== */
.banner-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)}
.banner-track{display:flex;transition:transform .5s ease}
.banner-item{flex:0 0 100%;position:relative;aspect-ratio:1200/380}
.banner-item img{width:100%;height:100%;object-fit:cover}
.banner-item::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,14,.55) 0%,transparent 46%)}
.banner-item .cap{position:absolute;left:6%;bottom:15%;max-width:55%;z-index:1}
.banner-item .cap b{display:block;font-size:31px;font-weight:800;text-shadow:0 2px 14px rgba(0,0,0,.75);letter-spacing:2px}
.banner-item .cap span{display:inline-block;margin-top:6px;color:#cfe4ff;font-size:13.5px;background:rgba(10,16,26,.5);border:1px solid rgba(120,170,255,.25);backdrop-filter:blur(6px);padding:3px 12px;border-radius:999px;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.banner-dots{position:absolute;bottom:13px;right:20px;display:flex;gap:7px;z-index:1}
.banner-dots i{width:22px;height:4px;border-radius:2px;background:rgba(255,255,255,.32);cursor:pointer;transition:.2s}
.banner-dots i.on{background:var(--blue2);box-shadow:0 0 10px rgba(34,211,238,.7)}
.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(5,8,14,.5);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;opacity:0;transition:.2s;z-index:1}
.banner-wrap:hover .banner-arrow{opacity:1}
.banner-arrow:hover{background:var(--blue);border-color:var(--blue)}

/* ===== 分类导航 ===== */
.cat-grid{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:20px}
/* 分类条：PC 端长条形胶囊（图标文字内嵌），无下方注释 */
.cat-cell{background:none;border:0;border-radius:12px;padding:0;text-align:center;cursor:pointer;transition:.18s;min-width:0}
.cat-cell:hover .ico{border-color:var(--blue);box-shadow:0 8px 22px rgba(59,130,246,.3);transform:translateY(-2px)}
.cat-cell .ico{width:auto;min-width:118px;height:46px;padding:0 24px;border-radius:12px;background:linear-gradient(160deg,#1b2436,#121a28);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--blue2);letter-spacing:1px;transition:.18s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.cat-cell b{display:none}

/* ===== 商品卡片 ===== */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.p-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.2s;position:relative}
.p-card::after{content:'';position:absolute;inset:0;border-radius:var(--radius);box-shadow:inset 0 0 0 1px transparent;transition:.2s;pointer-events:none}
.p-card:hover{transform:translateY(-4px);border-color:var(--line2);box-shadow:var(--shadow)}
.p-card:hover::after{box-shadow:inset 0 0 0 1px rgba(59,130,246,.35)}
.p-card .thumb{position:relative;aspect-ratio:1/1;background:#0a0e15;overflow:hidden}
.p-card .thumb img{width:100%;height:100%;object-fit:cover;transition:.35s}
.p-card:hover .thumb img{transform:scale(1.06)}
.p-card .tag{position:absolute;top:10px;left:10px;background:rgba(5,8,14,.66);backdrop-filter:blur(5px);border:1px solid rgba(255,214,120,.32);color:#ffd76a;font-size:11px;padding:2px 9px;border-radius:999px}
.p-card .vtag{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:4px;background:rgba(59,130,246,.88);color:#fff;font-size:11px;padding:3px 10px;border-radius:999px;backdrop-filter:blur(4px)}
.p-card .vtag::before{content:'';width:0;height:0;border-left:7px solid #fff;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.p-card .info{padding:13px 15px 15px}
.p-card .name{font-size:14.5px;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px;line-height:1.45}
.p-card:hover .name{color:var(--blue2)}
.p-card .sub{color:var(--muted);font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-card .price-row{display:flex;align-items:baseline;gap:8px;margin-top:10px}
.price{color:var(--gold);font-weight:800;font-size:18px;text-shadow:0 0 18px rgba(255,176,32,.25)}
.price::first-letter{font-size:12px}
.price small{font-size:12px;font-weight:700}
.market{color:var(--dim);font-size:12px;text-decoration:line-through}
.sales{color:var(--muted);font-size:11.5px;margin-left:auto}

/* ===== 视频种草卡 ===== */
.vzone{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.v-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.2s}
.v-card:hover{border-color:var(--blue);box-shadow:0 10px 26px rgba(59,130,246,.22);transform:translateY(-3px)}
.v-card .cover{position:relative;aspect-ratio:16/10;background:#0a0e15}
.v-card .cover img{width:100%;height:100%;object-fit:cover}
.v-card .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.v-card .play i{width:46px;height:46px;border-radius:50%;background:rgba(59,130,246,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 0 26px rgba(59,130,246,.65);transition:.2s}
.v-card:hover .play i{transform:scale(1.12)}
.v-card .play i::before{content:'';border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.v-card .vinfo{padding:13px 15px}
.v-card .vinfo b{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.v-card .vinfo .price{font-size:15px;margin-top:4px}
.dy-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#25f4ee;background:rgba(37,244,238,.09);border:1px solid rgba(37,244,238,.32);padding:1px 8px;border-radius:999px;margin-right:6px}

/* ===== 服务保障条 ===== */
.svc-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:52px}
.svc-cell{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;transition:.2s}
.svc-cell:hover{border-color:var(--line2);box-shadow:var(--shadow)}
.svc-cell .si{width:44px;height:44px;border-radius:12px;background:var(--grad-soft);border:1px solid rgba(59,130,246,.35);display:flex;align-items:center;justify-content:center;color:var(--blue2);font-size:17px;font-weight:800;flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.svc-cell b{display:block;font-size:14.5px}
.svc-cell span{display:block;font-size:12px;color:var(--muted)}

/* ===== 商品详情页 ===== */
.breadcrumb{color:var(--dim);font-size:12.5px;margin:20px 0 16px}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--blue2)}
.pd-layout{display:grid;grid-template-columns:520px 1fr;gap:36px}
.pd-media{position:relative}
.pd-media .player{border-radius:var(--radius);overflow:hidden;background:#04060a;border:1px solid var(--line);position:relative;box-shadow:var(--shadow)}
/* 所有播放器实例必须有定位+裁剪：否则内部 .zoom（220%+scale）会相对视口定位铺满全屏（2026-09-17 分节视频溢出事故） */
.player{position:relative;overflow:hidden;background:#04060a}
.player.v-horizontal{aspect-ratio:16/9}
.player.v-vertical{aspect-ratio:9/16;max-height:620px;margin:0 auto;max-width:calc(620px*9/16)}
.player.v-square{aspect-ratio:1/1}
.player iframe{width:100%;height:100%;border:0;display:block;background:#000}
.player video{width:100%;height:100%;border:0;display:block;object-fit:contain;background:#000}
/* 抖音开放播放器页面在 <800px 小视口下内部布局塌陷（视频锚在角落）：
   方案：iframe 视口放大 220%（≈847px，进入播放器正常渲染档位），
   再用 scale(0.4545)=1/2.2 把整页渲染结果等比缩回容器——画面完整无裁剪、恰好铺满居中。
   若想调画面大小：同步改 width/height 百分比与 scale 值（scale = 100/百分比）。 */
.player .zoom{position:absolute;left:0;top:0;width:220%;height:220%;transform:scale(0.4545);transform-origin:0 0}
/* 关键：iframe 父容器必须显式占满 .player（aspect-ratio 定高），否则 iframe 百分比高度失效塌成 150px → 黑屏有声 */
#pd-player-body{width:100%;height:100%}
.player-tools{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:5}
.player-tools button{background:rgba(5,8,14,.6);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:11.5px;padding:4px 11px;border-radius:8px;backdrop-filter:blur(5px)}
.player-tools button.on{background:var(--blue);border-color:var(--blue)}
.video-tabs{display:flex;gap:8px;margin-top:11px;flex-wrap:wrap}
.video-tabs button{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 13px;font-size:12.5px;color:var(--muted);transition:.18s}
.video-tabs button:hover{color:var(--text)}
.video-tabs button.on{color:#fff;background:rgba(59,130,246,.2);border-color:var(--blue)}
.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:13px}
.gallery img{aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1.5px solid var(--line);cursor:pointer;transition:.18s}
.gallery img:hover{border-color:var(--line2)}
.gallery img.on{border-color:var(--blue);box-shadow:0 0 12px rgba(59,130,246,.35)}
.pd-info h1{font-size:22px;font-weight:700;line-height:1.5}
.pd-info .subtitle{color:var(--muted);font-size:13.5px;margin-top:6px}
.pd-price-card{background:linear-gradient(135deg,#131c2e,#101623);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;margin:16px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.pd-price-card .price{font-size:31px}
.pd-price-card .sales{color:var(--muted);font-size:12.5px;margin-left:auto}
.sku-block{margin:15px 0}
.sku-block .lab{font-size:13px;color:var(--muted);margin-bottom:9px}
.sku-opts{display:flex;gap:9px;flex-wrap:wrap}
.sku-opts button{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 16px;font-size:13px;color:var(--text);transition:.18s}
.sku-opts button:hover{border-color:var(--line2)}
.sku-opts button.on{border-color:var(--blue);color:var(--blue2);background:rgba(59,130,246,.12);box-shadow:var(--ring)}
.qty-row{display:flex;align-items:center;gap:14px;margin:16px 0}
.stepper{display:flex;align-items:center;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.stepper button{width:36px;height:36px;background:var(--panel3);font-size:16px;color:var(--muted);transition:.18s}
.stepper button:hover{color:var(--text);background:var(--panel2)}
.stepper input{width:54px;text-align:center;border:none;border-radius:0;background:var(--panel2);padding:6px 4px}
.pd-actions{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap}
.pd-serv{color:var(--muted);font-size:12.5px;display:flex;gap:16px;flex-wrap:wrap;border-top:1px dashed var(--line);padding-top:15px}
.pd-tabs{margin-top:40px}
.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px;overflow-x:auto}
.tab-bar button{padding:12px 19px;color:var(--muted);font-size:14.5px;border-bottom:2px solid transparent;white-space:nowrap;transition:.18s}
.tab-bar button:hover{color:var(--text)}
.tab-bar button.on{color:#fff;border-color:var(--blue);text-shadow:0 0 14px rgba(34,211,238,.4)}
/* 点击商品图：图片层覆盖视频（与视频等宽对齐，1:1 图比 16:9 视频高 → 底部顺延向下覆盖） */
.pd-img-cover{position:absolute;top:0;left:0;width:100%;z-index:45}
.pd-img-cover img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:#04060a;cursor:zoom-out}
.pd-cover-close{position:absolute;top:10px;right:10px;z-index:2;background:rgba(5,8,14,.65);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:12px;padding:5px 13px;border-radius:8px;backdrop-filter:blur(5px);cursor:pointer}
.pd-cover-close:hover{background:var(--blue);border-color:var(--blue)}
/* ===== 商品页：视频下方 商品图（左50%，点击覆盖视频看大图） ===== */
.pd-strip{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:26px}
.strip-lab{font-size:13px;color:var(--muted);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.strip-lab::before{content:'';width:3px;height:14px;background:var(--grad);border-radius:2px}
.strip-imgs-row{display:flex;gap:9px}
.strip-imgs-row img{width:calc((100% - 36px)/5);aspect-ratio:1/1;object-fit:cover;border-radius:10px;border:1.5px solid var(--line);cursor:pointer;transition:.18s;background:var(--panel)}
.strip-imgs-row img:hover{border-color:var(--line2)}
.strip-imgs-row img.on{border-color:var(--blue);box-shadow:0 0 12px rgba(59,130,246,.35)}
.rel-card{flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;text-align:center;padding-bottom:9px;transition:.18s;cursor:pointer}
.rel-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.rel-card img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.rel-price{display:block;margin-top:6px;color:var(--gold);font-weight:800;font-size:12.5px;text-shadow:0 0 14px rgba(255,176,32,.2)}
.rel-price small{font-size:10.5px;margin-right:1px}
/* 搭配推荐：参数表格下方，单行满屏（10 个小卡，间距收紧） */
.rel-full-row{display:flex;gap:10px}
.rel-full-row .rel-card{flex:1;min-width:0}
/* ===== 商品页改版：六类目吸顶导航 + 纵向分节 ===== */
.pd-nav{display:flex;gap:4px;background:rgba(8,11,18,.94);border:1px solid var(--line);border-radius:12px;margin-top:30px;padding:5px;overflow-x:auto}
.pd-nav button{padding:10px 18px;color:var(--muted);font-size:14px;border-radius:9px;white-space:nowrap;transition:.18s}
.pd-nav button:hover{color:var(--text)}
.pd-nav button.on{color:#fff;background:var(--grad);box-shadow:0 2px 14px rgba(59,130,246,.35)}
.pd-sec{margin-top:28px;scroll-margin-top:132px}
.sec-t{font-size:17px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.sec-t::before{content:'';width:4px;height:17px;background:var(--grad);border-radius:2px}
/* 参数：紧凑多行表格（不换行、不加粗、少占空间，PC 一行两组） */
.params-tbl{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.pt-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);border-bottom:1px solid var(--line)}
.pt-row:last-child{border-bottom:none}
.pt-row:nth-child(odd){background:var(--panel2)}
.pt-k,.pt-v{padding:7px 14px;font-size:13px;font-weight:400;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-k{color:var(--muted);border-right:1px solid var(--line)}
.pt-v{color:var(--text)}
.pd-detail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;line-height:2;color:#d5dceb}
/* 图文图片集（关于安装/关于售后等专题） */
.pd-mset{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-top:14px}
.mset-t{margin:0 0 12px;font-size:15px;color:var(--text);display:flex;align-items:center;gap:8px}
.mset-t::before{content:'';width:4px;height:15px;border-radius:2px;background:var(--blue2);display:inline-block}
.mset-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.mset-imgs img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
@media (max-width:760px){.mset-imgs{grid-template-columns:repeat(2,1fr)}.pd-mset{padding:12px 13px}}
/* 页头自定义 Logo */
.logo-img{height:30px;max-width:150px;object-fit:contain;display:block}
@media (max-width:760px){
  /* 手机端商品页：标题 → 视频/图片展示层 → 商品图 → 价格 → 规格/数量/按钮（display:contents 跨容器统一排序） */
  .pd-container{display:flex;flex-direction:column}
  .pd-container .pd-layout,.pd-container .pd-info,.pd-container .pd-strip{display:contents}
  .pd-container .breadcrumb{order:0}
  .pd-container .pd-info h1{order:1}
  .pd-container .pd-info .subtitle{order:2}
  .pd-container .pd-media{order:3;margin-top:12px}
  .pd-container .pd-strip-imgs{order:4;margin-top:14px}
  .pd-container .pd-price-card{order:5}
  .pd-container .sku-block{order:6}
  .pd-container .qty-row{order:7}
  .pd-container .pd-actions{order:8}
  .pd-container .pd-serv{order:9}
  /* 手机端图片覆盖层：底边与视频对齐（1:1 图比 16:9 视频高，顶部向上顺延覆盖） */
  .pd-img-cover{top:auto;bottom:0}
  .pd-container .pd-nav{order:10}
  .pd-container .pd-sections{order:11;display:flex;flex-direction:column}
  /* 手机端分节交换：商品介绍在前，搭配推荐在后（五节全显式排序） */
  .pd-container #sec-params{order:0}
  .pd-container #sec-detail{order:1}
  .pd-container #sec-related{order:2}
  .pd-container #sec-qa{order:3}
  .pd-container #sec-reviews{order:4}
  /* 手机端：数量与操作按钮紧凑化（三小钮一行 + 购买钮整行） */
  .qty-row{gap:10px;margin:10px 0}
  .qty-row>span{font-size:12px}
  .stepper button{width:30px;height:30px;font-size:14px}
  .stepper input{width:44px;padding:4px 2px}
  .pd-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
  .pd-actions .btn{padding:8px 6px;font-size:12.5px;border-radius:9px}
  .pd-actions #btn-buy{grid-column:1/-1;padding:10px 14px;font-size:14.5px}
  .pd-serv{gap:10px;font-size:11px;padding-top:10px}
  /* 价格卡边框高度缩减 30%（上下内边距 12px→8px） */
  .pd-price-card{padding:8px 14px;margin:12px 0 10px}
  .pd-strip{margin-top:0}
  .pd-strip{grid-template-columns:1fr;gap:16px;margin-top:16px}
  .pt-k,.pt-v{padding:6px 10px;font-size:12px}
  .strip-imgs-row{gap:6px}
  .strip-imgs-row img{width:calc((100% - 24px)/5);border-radius:8px}
  .rel-full-row{gap:6px;overflow-x:auto;scrollbar-width:none}
  .rel-full-row::-webkit-scrollbar{display:none}
  .rel-full-row .rel-card{flex:0 0 88px}
  .rel-card{padding-bottom:6px}
  .rel-price{font-size:11.5px;margin-top:4px}
  .pd-nav{border-radius:10px}
}
.qa-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;margin-bottom:11px}
.qa-item .q{display:flex;gap:8px;align-items:flex-start}
.qa-item .q .qm{color:var(--blue2);font-weight:800;flex:none}
.qa-item .a{margin-top:9px;padding:11px 13px;background:rgba(59,130,246,.07);border-left:2px solid var(--blue);border-radius:0 9px 9px 0;color:#c8d4ea;font-size:13.5px}
.qa-item .am{color:var(--dim);font-size:12px;margin-top:7px}
.review-item{border-bottom:1px solid var(--line);padding:15px 2px}
.stars{color:var(--gold);font-size:13px;letter-spacing:2px}
.ask-box{display:flex;gap:10px;margin-top:15px}
.ask-box textarea{flex:1;min-height:44px;resize:vertical}

/* ===== 社区 ===== */
.board-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:20px}
.board-tabs button{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:7px 19px;color:var(--muted);font-size:13.5px;white-space:nowrap;transition:.18s}
.board-tabs button:hover{color:var(--text);border-color:var(--line2)}
.board-tabs button.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 3px 14px rgba(59,130,246,.35)}
.post-card{display:flex;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;margin-bottom:13px;cursor:pointer;transition:.2s}
.post-card:hover{border-color:var(--line2);box-shadow:var(--shadow);transform:translateY(-2px)}
.post-card .pc-main{flex:1;min-width:0}
.post-card h3{font-size:16px;font-weight:700;margin-bottom:6px}
.post-card .pc-txt{color:var(--muted);font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card .pc-meta{display:flex;gap:16px;color:var(--dim);font-size:12px;margin-top:11px;align-items:center}
.post-card .pc-meta b{color:var(--muted);font-weight:500}
.post-card .pc-imgs{display:flex;gap:6px;margin-top:11px}
.post-card .pc-imgs img{width:96px;height:72px;object-fit:cover;border-radius:9px;border:1px solid var(--line)}
.post-detail{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px 32px}
.post-detail h1{font-size:22px;margin-bottom:10px}
.post-detail .pd-meta{color:var(--dim);font-size:12.5px;display:flex;gap:14px;margin-bottom:19px;flex-wrap:wrap}
.post-detail .pd-content{white-space:pre-wrap;line-height:1.9;color:#d5dceb;font-size:15px}
.post-detail .pd-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:19px 0}
.post-detail .pd-imgs img{border-radius:10px;border:1px solid var(--line)}
.post-rel{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#141d2e,#111723);border:1px solid var(--line2);border-radius:var(--radius);padding:15px;margin-top:19px;cursor:pointer;transition:.2s}
.post-rel:hover{border-color:var(--blue);box-shadow:0 8px 24px rgba(59,130,246,.18)}
.post-rel img{width:74px;height:74px;border-radius:10px;object-fit:cover}
.post-actions{display:flex;gap:12px;margin-top:21px}
.comment-item{border-bottom:1px solid var(--line);padding:14px 2px}
.comment-item .ca{color:var(--blue2);font-size:13px;font-weight:600}
.comment-item .ct{font-size:14px;margin:4px 0}
.comment-item .cd{color:var(--dim);font-size:12px}

/* ===== 购物车 / 订单 ===== */
.page-title{font-size:23px;font-weight:800;margin:28px 0 20px;letter-spacing:1px}
.cart-item,.order-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:17px 19px;margin-bottom:13px;transition:.18s}
.cart-item:hover,.order-card:hover{border-color:var(--line2)}
.cart-row{display:flex;align-items:center;gap:14px}
.cart-row .check{width:19px;height:19px;accent-color:var(--blue);flex:none;cursor:pointer}
.cart-row img{width:76px;height:76px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.cart-row .ci-name{font-weight:600;font-size:14.5px}
.cart-row .ci-spec{color:var(--muted);font-size:12px;margin-top:3px}
.cart-row .ci-right{margin-left:auto;text-align:right}
.order-head{display:flex;justify-content:space-between;color:var(--dim);font-size:12.5px;margin-bottom:13px}
.order-items{display:flex;flex-direction:column;gap:11px}
.oi-row{display:flex;gap:12px;align-items:center}
.oi-row img{width:64px;height:64px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.oi-row .oi-name{font-size:14px;font-weight:600}
.oi-row .oi-spec{color:var(--muted);font-size:12px}
.oi-row .oi-right{margin-left:auto;text-align:right;font-size:13px}
.order-foot{display:flex;justify-content:space-between;align-items:center;margin-top:15px;padding-top:14px;border-top:1px dashed var(--line);flex-wrap:wrap;gap:10px}
.status-pill{font-size:13px;font-weight:700;padding:3px 13px;border-radius:999px}
.st-pending_pay{color:var(--gold);background:rgba(255,176,32,.1)}
.st-pending_ship{color:var(--blue2);background:rgba(34,211,238,.1)}
.st-shipped{color:var(--violet);background:rgba(157,140,255,.12)}
.st-completed{color:var(--green);background:rgba(43,216,148,.1)}
.st-canceled,.st-refunded{color:var(--muted);background:var(--panel3)}
.tab-line{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab-line a{padding:11px 18px;color:var(--muted);border-bottom:2px solid transparent;font-size:14px;white-space:nowrap;transition:.18s}
.tab-line a:hover{color:var(--text)}
.tab-line a.on{color:#fff;border-color:var(--blue)}
.empty{padding:76px 0;text-align:center;color:var(--dim)}
.empty .eico{font-size:42px;margin-bottom:13px;opacity:.5}

/* ===== 结算页 ===== */
.co-block{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:19px 21px;margin-bottom:15px}
.co-block h3{font-size:15.5px;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center}
.addr-list .addr-item{border:1px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:10px;cursor:pointer;display:flex;gap:10px;align-items:center;transition:.18s}
.addr-item:hover{border-color:var(--line2)}
.addr-item.on{border-color:var(--blue);background:rgba(59,130,246,.07);box-shadow:var(--ring)}
.addr-item .ad-tag{font-size:11px;color:var(--blue2);border:1px solid rgba(34,211,238,.4);border-radius:5px;padding:0 7px}
.pay-opts{display:flex;gap:12px;flex-wrap:wrap}
.pay-opt{flex:1;min-width:170px;border:1px solid var(--line);border-radius:11px;padding:15px 17px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:.18s}
.pay-opt:hover{border-color:var(--line2)}
.pay-opt.on{border-color:var(--blue);background:rgba(59,130,246,.08);box-shadow:var(--ring)}
.pay-opt .pico{width:37px;height:37px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex:none}
.co-total{display:flex;justify-content:flex-end;align-items:center;gap:18px;margin-top:8px}

/* ===== 收银台 ===== */
.cashier{text-align:center;padding:14px 0}
.cashier .amount{font-size:33px;color:var(--gold);font-weight:800;margin:8px 0 17px;text-shadow:0 0 26px rgba(255,176,32,.3)}
.cashier img.qr{margin:0 auto 11px;background:#fff;padding:10px;border-radius:13px;width:220px;height:220px}
.mock-panel{background:linear-gradient(160deg,#15223c,#101727);border:1px solid var(--line2);border-radius:var(--radius);padding:28px 32px}
.mock-tag{display:inline-block;background:rgba(255,176,32,.14);color:var(--gold);border:1px solid rgba(255,176,32,.4);font-size:12px;border-radius:999px;padding:2px 11px;margin-bottom:11px}

/* ===== IM ===== */
.im-page{display:flex;flex-direction:column;height:calc(100vh - 66px - 120px);min-height:480px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:20px 0}
.im-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.im-row{display:flex;gap:10px;max-width:78%}
.im-row.me{align-self:flex-end;flex-direction:row-reverse}
.im-row .bubble{background:var(--panel3);border:1px solid var(--line);border-radius:13px;padding:10px 15px;font-size:14px;max-width:100%;word-break:break-word;white-space:pre-wrap}
.im-row.me .bubble{background:rgba(59,130,246,.2);border-color:rgba(59,130,246,.4)}
.im-row .bubble img{max-width:220px;border-radius:9px;margin:2px 0}
.im-prod-card{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:8px;cursor:pointer;min-width:220px}
.im-prod-card img{width:48px;height:48px;border-radius:8px;object-fit:cover}
.im-prod-card b{font-size:13px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.im-prod-card .price{font-size:14px}
.im-input{border-top:1px solid var(--line);padding:13px 15px;background:var(--panel2)}
.im-tools{display:flex;gap:6px;margin-bottom:9px}
.im-tools button{background:var(--panel3);border:1px solid var(--line);border-radius:8px;padding:4px 12px;font-size:12.5px;color:var(--muted);transition:.18s}
.im-tools button:hover{color:var(--blue2);border-color:var(--blue)}
.im-send-row{display:flex;gap:10px}
.im-send-row input{flex:1}
.emoji-pop{position:absolute;bottom:110px;left:16px;background:var(--panel3);border:1px solid var(--line2);border-radius:11px;padding:10px;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;box-shadow:var(--shadow);z-index:10}
.emoji-pop button{font-size:19px;padding:4px;border-radius:7px}
.emoji-pop button:hover{background:var(--panel2)}
.im-hint{color:var(--dim);font-size:12px;margin-top:8px}

/* ===== 个人中心 ===== */
.profile-layout{display:grid;grid-template-columns:220px 1fr;gap:18px;margin:24px 0 44px}
.profile-side{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:21px;height:fit-content}
.profile-side .u-card{text-align:center;padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:11px}
.profile-side .u-card .avatar{width:58px;height:58px;margin:0 auto 11px;font-size:22px}
.profile-side nav a{display:block;padding:10px 15px;border-radius:9px;color:var(--muted);font-size:14px;margin-bottom:2px;transition:.18s}
.profile-side nav a:hover{color:var(--text);background:var(--panel2)}
.profile-side nav a.on{background:var(--grad-soft);color:var(--blue2)}
.msg-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;margin-bottom:11px;display:flex;gap:12px;align-items:center}
.msg-item.unread{border-left:3px solid var(--blue)}
.msg-item .mi-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);flex:none;box-shadow:0 0 8px rgba(59,130,246,.7)}

/* ===== 弹窗 / Toast ===== */
.modal-mask{position:fixed;inset:0;background:rgba(3,5,9,.74);backdrop-filter:blur(4px);z-index:950;display:flex;align-items:center;justify-content:center;padding:18px}
.modal{background:var(--panel);border:1px solid var(--line2);border-radius:16px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow);animation:pop .18s ease}
.modal.modal-lg{max-width:760px}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:17px 21px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);z-index:2}
.modal-head b{font-size:16px}
.modal-head .x{color:var(--muted);font-size:20px;padding:2px 9px}
.modal-head .x:hover{color:var(--text)}
.modal-body{padding:19px 21px}
.modal-foot{padding:15px 21px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}
#toast-root{position:fixed;top:78px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--panel3);border:1px solid var(--line2);color:var(--text);padding:10px 24px;border-radius:11px;font-size:13.5px;box-shadow:var(--shadow);animation:pop .2s ease}
.toast.ok{border-color:rgba(43,216,148,.5)}
.toast.err{border-color:rgba(255,92,108,.55)}

/* ===== 页脚 ===== */
.footer{margin-top:60px;border-top:1px solid var(--line);background:#060910;position:relative}
.footer::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.45),transparent)}
.footer-inner{max-width:1200px;margin:0 auto;padding:38px 16px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.footer h4{font-size:15px;margin-bottom:13px;color:var(--text)}
.footer p,.footer a{color:var(--muted);font-size:13px;line-height:2.05}
.footer a:hover{color:var(--blue2)}
.footer .copy{border-top:1px solid var(--line);text-align:center;color:var(--dim);font-size:12px;padding:15px}
.footer .admin-link{color:var(--dim);font-size:12px}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.uploader{display:flex;gap:8px;flex-wrap:wrap}
.up-box{width:74px;height:74px;border:1px dashed var(--line2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--dim);cursor:pointer;font-size:24px;background:var(--panel2);transition:.18s}
.up-box:hover{border-color:var(--blue);color:var(--blue2)}
.up-item{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.up-item img{width:100%;height:100%;object-fit:cover}
.up-item .rm{position:absolute;top:0;right:0;background:rgba(5,8,14,.65);color:#fff;width:20px;height:20px;font-size:12px;line-height:20px;text-align:center;border-radius:0 0 0 9px}

/* ===== 悬浮在线咨询 ===== */
.imw-fab{position:fixed;right:22px;bottom:26px;z-index:900;width:54px;height:54px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;font-size:23px;cursor:pointer;box-shadow:0 6px 26px rgba(59,130,246,.5);display:flex;align-items:center;justify-content:center;transition:.18s}
.imw-fab:hover{transform:scale(1.07)}
.imw-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid var(--bg,#0a0e15)}
.imw-panel{position:fixed;right:22px;bottom:92px;z-index:901;width:250px;height:330px;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);box-shadow:0 18px 54px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden}
#im-widget.open .imw-panel{display:flex}
/* 输入咨询时恢复原尺寸 */
#im-widget.big .imw-panel{width:340px;height:480px}
/* 整体隐藏态：面板+悬浮球都收起，仅保留右缘小拉手 */
#im-widget.hidden .imw-panel,#im-widget.hidden .imw-fab{display:none!important}
.imw-hidetab{display:none;position:fixed;right:0;top:62%;z-index:899;width:24px;height:72px;border:1px solid var(--line);border-right:0;border-radius:9px 0 0 9px;background:var(--panel);color:var(--muted);font-size:15px;cursor:pointer;box-shadow:-4px 4px 14px rgba(0,0,0,.3);align-items:center;justify-content:center;padding:0}
#im-widget.hidden .imw-hidetab{display:flex}
.imw-hidetab:hover{color:var(--blue2)}
.imw-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:linear-gradient(135deg,#16223a,#0d1424);border-bottom:1px solid var(--line);flex:none}
.imw-shop{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;min-width:0}
.imw-shop b{white-space:nowrap}
.imw-name{color:var(--dim);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imw-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex:none}
.imw-actions{display:flex;gap:6px}
.imw-actions button{width:26px;height:26px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#cfd8e6;cursor:pointer;font-size:13px;line-height:1}
.imw-actions button:hover{background:rgba(255,255,255,.14);color:#fff}
.imw-msgs{flex:1;overflow-y:auto;padding:12px;background:var(--bg,#0a0e15);display:flex;flex-direction:column;gap:10px}
/* 悬浮窗较窄：消息行放宽占比，商品卡可收缩不顶边 */
.imw-msgs .im-row{max-width:94%}
.imw-msgs .im-prod-card{min-width:0;max-width:100%}
.imw-msgs .im-prod-card img{width:42px;height:42px}
.imw-img{max-width:180px;max-height:150px;border-radius:9px;display:block;cursor:zoom-in}
.imw-welcome{text-align:center;color:var(--dim);font-size:12.5px;line-height:2;padding:40px 10px}
.pd-detail img{max-width:100%;height:auto;border-radius:9px;display:block;margin:10px auto}
.imw-tip{margin:10px 12px;padding:9px 13px;background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.35);border-radius:10px;color:var(--muted);font-size:12.5px;line-height:1.8;text-align:left}
.imw-tip b{color:var(--blue2)}
.imw-login{text-align:center;padding:56px 20px;color:var(--muted);font-size:13px;line-height:1.9}
.imw-login .ico{font-size:34px;margin-bottom:10px}
.imw-login .btn{margin-top:14px}
.imw-prodbar{display:flex;align-items:center;gap:8px;padding:7px 12px;background:rgba(59,130,246,.1);border-top:1px solid var(--line);font-size:12px;color:var(--muted);flex:none}
.imw-prodbar button{margin-left:auto;background:var(--blue);border:0;color:#fff;font-size:11.5px;padding:5px 11px;border-radius:7px;cursor:pointer}
.imw-prodbar button:hover{background:var(--blue2)}
.imw-input{border-top:1px solid var(--line);padding:8px 10px 10px;position:relative;flex:none;background:var(--panel)}
.imw-tools{display:flex;gap:4px;margin-bottom:6px}
.imw-tools button{background:none;border:0;font-size:16px;cursor:pointer;padding:3px 7px;border-radius:7px;line-height:1}
.imw-tools button:hover{background:rgba(255,255,255,.08)}
.imw-sendrow{display:flex;gap:8px}
.imw-sendrow input{flex:1;background:var(--bg,#0a0e15);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:13px;padding:8px 11px;outline:none;transition:.18s}
.imw-sendrow input:focus{border-color:var(--blue);box-shadow:var(--ring)}
.imw-send{background:var(--grad);border:0;color:#fff;border-radius:9px;padding:0 17px;font-size:13px;cursor:pointer;font-weight:600}
.imw-send:hover{filter:brightness(1.1)}
.imw-emoji{position:absolute;bottom:calc(100% - 4px);left:10px;right:10px;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:0 -8px 26px rgba(0,0,0,.4);display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;z-index:5}
.imw-emoji button{background:none;border:0;font-size:19px;cursor:pointer;padding:3px;border-radius:7px}
.imw-emoji button:hover{background:rgba(255,255,255,.08)}
/* 手机端：聊天窗半屏化（顶部保留页面导航），不再全屏遮挡 */
@media (max-width:600px){
  .imw-panel{right:0;left:0;top:auto;bottom:0;width:100%;height:56vh;border-radius:16px 16px 0 0;border:0;box-shadow:0 -10px 40px rgba(0,0,0,.5)}
  #im-widget.big .imw-panel{width:100%;height:76vh}
  .imw-nav{display:flex;gap:6px;padding:7px 10px;border-bottom:1px solid var(--line);background:var(--panel2);flex:none}
  .imw-nav button{flex:1;background:var(--panel3);border:1px solid var(--line);border-radius:9px;padding:6px 2px;font-size:12px;color:var(--muted);white-space:nowrap}
  .imw-nav button:active{color:var(--blue2);border-color:var(--blue)}
  .imw-fab{right:8px;top:23vh;bottom:auto;width:46px;height:46px;font-size:20px}
  .imw-emoji{grid-template-columns:repeat(6,1fr);bottom:100%}
}

/* ===== 响应式（H5） ===== */
@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(3,1fr)}
  .vzone{grid-template-columns:repeat(2,1fr)}
  .cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .pd-layout{grid-template-columns:1fr}
  .svc-strip{grid-template-columns:repeat(2,1fr)}
  .profile-layout{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .topbar-search{display:none}
  .banner-item{aspect-ratio:750/300}
  .banner-item .cap b{font-size:20px}
  .section{margin-top:36px}
  .svc-strip{margin-top:36px}
}
@media (max-width:600px){
  .grid-4,.grid-3{grid-template-columns:repeat(2,1fr)}
  .cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px 5px}
  /* 手机端：压缩版块上下留白，分类区尤其收紧 */
  .section{margin-top:26px}
  .sec-head{margin-bottom:12px}
  .sec-cats{margin-top:14px}
  .sec-cats .sec-head{margin-bottom:9px}
  /* 手机端视频专区标题显示"讲解视频" */
  .tt-pc{display:none}
  .tt-m{display:inline}
  /* 手机端分类：只留图标框，隐藏名称文字 */
  /* 手机端分类：长方形胶囊（高=字号×3，fit-content 按文字收缩，左右内边距 3px） */
  .cat-cell{display:flex;justify-content:center;padding:0}
  .cat-cell .ico{width:fit-content;min-width:0;height:3em;font-size:13px;line-height:1;padding:0 8px;border-radius:9px;letter-spacing:0}
  .cat-cell b{display:none}
  .svc-strip{grid-template-columns:1fr 1fr;gap:8px}
  .footer-inner{grid-template-columns:1fr}
  .pd-layout{gap:18px}
  .pd-price-card .price{font-size:24px}
  .post-detail{padding:18px}
  .modal{max-width:100%}
  .im-page{height:calc(100vh - 62px - 60px)}
  .topbar-inner{gap:8px;height:54px}
  .logo{font-size:16px}
  .icon-btn span{display:none}
  .grid{gap:9px}
  .sec-head h2{font-size:18px}
  .page-title{font-size:20px}
  .banner-item .cap span{display:none}
}

/* ================= 直播带货模块 ================= */
/* 手机端：首页广告下方入口 */
.live-entry{margin-top:16px}
.le-card{display:flex;align-items:center;gap:12px;background:linear-gradient(120deg,#1a1030,#3b0d5c 60%,#7a1230);border:1px solid rgba(255,90,160,.35);border-radius:14px;padding:14px 16px;cursor:pointer;transition:.18s}
.le-card:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(160,30,110,.3)}
.le-ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#ff4d8d,#ff8a3d);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.le-txt{flex:1;min-width:0}
.le-txt b{display:block;color:#fff;font-size:15px}
.le-txt span{color:rgba(255,255,255,.65);font-size:12px}
.le-go{color:#ff8ab0;font-size:13px;flex:none}
/* PC 端隐藏首页入口（PC 用左下角浮窗） */
@media (min-width:761px){ .live-entry{display:none} }

/* PC 左下角浮窗（宽度 ≤200px） */
#live-float{position:fixed;left:14px;bottom:14px;z-index:900;width:180px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);cursor:pointer;overflow:hidden;transition:.18s}
#live-float:hover{transform:translateY(-2px);border-color:#ff4d8d}
#live-float .lf-card{padding:14px 12px;text-align:center}
#live-float .lf-ico{font-size:26px}
#live-float .lf-card b{display:block;color:var(--text);font-size:13.5px;margin-top:6px}
#live-float .lf-card span{color:var(--muted);font-size:11.5px}
#live-float .lf-live{position:relative;height:96px;background:#04060a}
#live-float .lf-live img{width:100%;height:100%;object-fit:cover;opacity:.9}
#live-float .lf-dot{position:absolute;left:8px;top:8px;background:rgba(220,20,80,.9);color:#fff;font-size:10.5px;padding:2px 8px;border-radius:20px}
#live-float .lf-t{display:block;padding:8px 10px 0;color:var(--text);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#live-float .lf-v{display:block;padding:2px 10px 10px;color:var(--muted);font-size:11px;text-align:center}

/* PC 居中弹窗（页面 50%） */
#live-modal{position:fixed;inset:0;z-index:950;background:rgba(3,6,12,.72);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
#live-modal .lm-box{width:50vw;height:64vh;min-width:640px;min-height:420px;background:var(--panel);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5)}
#live-modal .lm-head{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--line)}
#live-modal .lm-head b{color:var(--text)}
#live-modal .lm-x{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer}
#live-modal .lm-x:hover{color:var(--text)}
#live-modal .lm-body{flex:1;overflow:auto;padding:16px}
#live-modal .lm-grid{grid-template-columns:repeat(2,1fr)}

/* 手机端隐藏 PC 浮窗（手机用首页入口） */
@media (max-width:760px){ #live-float{display:none} }

/* 直播广场 */
.live-plaza .lp-head{display:flex;align-items:baseline;gap:14px;margin:6px 0 14px}
.live-plaza .lp-head h2{color:var(--text);font-size:22px}
.live-plaza .lp-sub{color:var(--muted);font-size:13px}
.lp-tabs{display:flex;gap:8px;margin-bottom:16px}
.lp-tabs button{background:var(--panel);border:1px solid var(--line);color:var(--muted);padding:7px 18px;border-radius:20px;cursor:pointer;font-size:13px;transition:.15s}
.lp-tabs button.on{background:linear-gradient(120deg,#ff4d8d,#ff8a3d);border-color:transparent;color:#fff;font-weight:600}
.live-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.live-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;transition:.18s}
.live-card:hover{border-color:#ff4d8d;transform:translateY(-2px);box-shadow:0 8px 24px rgba(220,30,90,.18)}
.lc-cover{position:relative;aspect-ratio:16/10;background:#04060a}
.lc-cover img{width:100%;height:100%;object-fit:cover}
.lc-status{position:absolute;left:8px;top:8px;font-size:11px;padding:2.5px 9px;border-radius:20px;color:#fff}
.st-living{background:linear-gradient(120deg,#ff2d6f,#ff5a3d);animation:livePulse 1.6s infinite}
.st-other{background:rgba(20,26,40,.85)}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.75}}
.lc-hot{position:absolute;right:8px;top:8px;background:rgba(5,8,14,.7);color:#ffd9e4;font-size:11px;padding:2.5px 8px;border-radius:20px}
.lc-info{padding:10px 12px 12px}
.lc-info b{display:block;color:var(--text);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-info span{color:var(--muted);font-size:12px}

/* 直播间 */
.live-room{display:grid;grid-template-columns:1fr 340px;gap:18px;margin-top:10px}
.lr-main{min-width:0}
.lr-player{position:relative;border-radius:var(--radius);overflow:hidden;background:#04060a;border:1px solid var(--line);aspect-ratio:16/9}
.lr-player video{width:100%;height:100%;object-fit:cover;display:block}
.lr-offline{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;background:repeating-linear-gradient(45deg,#0a0e18 0 14px,#0d1220 14px 28px)}
.lr-top{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:3}
.lr-live-dot{background:linear-gradient(120deg,#ff2d6f,#ff5a3d);color:#fff;font-size:12px;padding:3px 11px;border-radius:20px}
.lr-viewers{background:rgba(5,8,14,.65);color:#dbe4f5;font-size:12px;padding:3px 11px;border-radius:20px;backdrop-filter:blur(4px)}
.lr-fs{margin-left:auto;background:rgba(5,8,14,.65);color:#dbe4f5;border:none;font-size:12.5px;padding:4px 12px;border-radius:20px;cursor:pointer;backdrop-filter:blur(4px)}
.lr-fs:hover{background:rgba(20,30,50,.85);color:#fff}
.lr-player:fullscreen{border-radius:0;border:none}
.lr-player:fullscreen video{object-fit:contain}
.lr-like{margin-left:auto;background:rgba(5,8,14,.65);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:12.5px;padding:4px 12px;border-radius:20px;cursor:pointer;backdrop-filter:blur(4px);transition:.15s}
.lr-like:hover{background:#ff4d8d;border-color:#ff4d8d}
.lr-title-row{display:flex;align-items:baseline;gap:12px;margin:12px 2px 8px}
.lr-title-row h1{color:var(--text);font-size:18px;margin:0}
.lr-streamer{color:var(--muted);font-size:12.5px}
.lr-danmaku-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;height:300px}
.lr-dm-list{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:7px}
.lr-dm{font-size:13px;color:var(--text);line-height:1.5;word-break:break-all}
.lr-dm b{color:#7fb0ff;margin-right:7px;font-weight:600}
.lr-dm.pinned{background:rgba(255,77,141,.1);border:1px solid rgba(255,77,141,.3);border-radius:8px;padding:6px 10px}
.lr-sys{color:var(--muted);font-size:12px}
.lr-dm-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.lr-dm-input input{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:8px 12px;color:var(--text);font-size:13px;outline:none}
.lr-dm-input input:focus{border-color:var(--blue)}
.lr-dm-input button{background:linear-gradient(120deg,#ff4d8d,#ff8a3d);border:none;color:#fff;border-radius:9px;padding:0 18px;cursor:pointer;font-size:13px}
.lr-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.lr-sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.lr-sec h3{color:var(--text);font-size:14.5px;margin:0 0 10px;display:flex;align-items:center;gap:8px}
.lr-sec h3 .lr-cnt{color:var(--muted);font-size:12px;font-weight:400}
.lr-product{display:flex;gap:10px;padding:9px;border:1px solid var(--line);border-radius:10px;margin-bottom:9px;position:relative;align-items:center}
.lr-product.pinned{border-color:rgba(255,138,61,.55)}
.lr-product.explaining{border-color:#ff4d8d;box-shadow:0 0 10px rgba(255,45,111,.25)}
.lr-pin,.lr-exp{position:absolute;top:-7px;right:8px;font-size:10px;padding:1px 8px;border-radius:8px;color:#fff}
.lr-pin{background:#ff8a3d}
.lr-exp{background:#ff2d6f;animation:livePulse 1.6s infinite}
.lr-product img{width:64px;height:64px;object-fit:cover;border-radius:9px;flex:none;background:#0a0e18}
.lrp-info{flex:1;min-width:0}
.lrp-info b{display:block;color:var(--text);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.lrp-price span{color:var(--gold);font-weight:800;font-size:14px}
.lrp-price small{color:var(--muted);text-decoration:line-through;font-size:11px;margin-left:6px}
.lrp-price em{font-style:normal;background:rgba(255,45,111,.15);color:#ff6b9d;font-size:10px;padding:1px 6px;border-radius:6px;margin-left:6px}
.lrp-price em.sk{background:rgba(255,138,61,.18);color:#ffb35c}
.lrp-ops{display:flex;flex-direction:column;gap:6px;flex:none}
.lr-coupon{display:flex;align-items:center;gap:10px;border:1px dashed rgba(255,77,141,.5);border-radius:10px;padding:9px 12px;margin-bottom:9px}
.lcv{flex:none;text-align:center;padding-right:12px;border-right:1px dashed rgba(255,77,141,.4)}
.lcv b{display:block;color:#ff5a8d;font-size:17px;font-weight:800}
.lcv span{color:var(--muted);font-size:10.5px}
.lci{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px}
.lci b{color:var(--text);font-size:12.5px}
.lci button{background:#ff2d6f;border:none;color:#fff;border-radius:16px;padding:5px 13px;font-size:12px;cursor:pointer}
.lci button:disabled{opacity:.45;cursor:not-allowed}
/* 讲解弹窗 */
.live-explain img{width:100%;max-height:320px;object-fit:contain;border-radius:10px;background:#04060a;margin-bottom:12px}
.lex-row{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.ex-price{color:var(--gold);font-size:22px;font-weight:800}
.ex-origin{color:var(--muted);text-decoration:line-through;font-size:13px}
.ex-seckill{background:rgba(255,138,61,.18);color:#ffb35c;font-size:12.5px;padding:3px 10px;border-radius:8px}
.ex-livep{background:rgba(255,45,111,.15);color:#ff6b9d;font-size:12.5px;padding:3px 10px;border-radius:8px}
.lex-note{color:var(--muted);font-size:13px;line-height:1.7;margin-bottom:14px}
.lex-ops{display:flex;gap:10px}
.lex-ops .btn{flex:1}
/* 竖屏直播/录播：播放器 9:16 收窄居中；广场竖屏卡片封面改竖版 */
.lr-player.v-vertical{max-width:430px;margin:0 auto;aspect-ratio:9/16}
.live-card.vertical .lc-cover{aspect-ratio:9/12}

/* 手机端直播间 */
@media (max-width:760px){
  .live-room{grid-template-columns:1fr}
  .live-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  #live-modal .lm-box{width:92vw;height:70vh;min-width:0;min-height:0}
  .lr-dm-list{height:200px}
  .lr-dm-box{height:260px}
  .lr-player.v-vertical{max-width:100%;aspect-ratio:9/14}
}

/* ============ 首页视频讲解（独立模块）+ 视频内容页 ============ */
.vs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.vs-card{cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s}
.vs-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.35);border-color:rgba(59,130,246,.5)}
.vs-card .cover{position:relative;width:100%;aspect-ratio:16/9;background:#04060a;overflow:hidden}
.vs-card.vs-v .cover{aspect-ratio:9/16}
.vs-card .cover img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9}
.vs-card .cover video{width:100%;height:100%;object-fit:cover;display:block}
.vs-card .cover .zoom{position:absolute;left:0;top:0;transform-origin:0 0}
.vs-card .cover .zoom iframe{width:100%;height:100%;border:0;display:block;background:#000;pointer-events:none}
.vs-card .cover .cover-mask{position:absolute;inset:0;z-index:3}
.vs-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(59,130,246,.85);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(59,130,246,.5)}
.vs-card .play i{display:block;width:0;height:0;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.vs-card .dy-badge{position:absolute;top:9px;left:9px;background:rgba(0,0,0,.65);color:#fff;font-size:10.5px;padding:2px 8px;border-radius:20px;letter-spacing:1px}
.vs-card>b{display:block;padding:10px 12px 13px;font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:760px){
  .vs-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .vs-card>b{font-size:12.5px;padding:8px 9px 10px}
  .vs-card .play{width:36px;height:36px}
  .vs-card .play i{border-left-width:12px;border-top-width:7px;border-bottom-width:7px}
}

/* 视频内容页 */
.sv-wrap{max-width:980px}
.sv-back{display:inline-block;margin:16px 0 12px;color:var(--muted);font-size:13.5px}
.sv-back:hover{color:var(--text)}
.sv-stage{display:flex;justify-content:center}
.sv-player{position:relative;overflow:hidden;background:#04060a;border-radius:var(--radius);width:100%;aspect-ratio:16/9}
.sv-player iframe{width:100%;height:100%;border:0;display:block;background:#000}
.sv-player .zoom{position:absolute;left:0;top:0;transform-origin:0 0}
.sv-stage.sv-v .sv-player{width:auto;width:min(420px,100%);aspect-ratio:9/16;max-height:76vh}
.sv-player video{width:100%;height:100%;display:block;object-fit:contain}
.sv-title{font-size:19px;margin:16px 0 10px;color:var(--text);display:flex;align-items:center;gap:9px}
.sv-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:4px 0 8px;border-bottom:1px solid var(--line)}
.sv-pos{color:var(--muted);font-size:13px}
.sv-cd{color:var(--muted);font-size:12.5px}
.sv-cd b{color:var(--blue2);font-size:15px}
.sv-cd a{color:var(--blue2);margin-left:5px;cursor:pointer}
@media (max-width:760px){
  .sv-title{font-size:16px}
  .sv-stage.sv-v .sv-player{max-height:72vh}
}