/* ==========================================================================
   GORE-TEX® 电商资源平台 — 站点样式
   设计语言对标 gore-tex.com：黑白高对比、大写加粗标题、克制的红色点缀、
   大量留白、卡片栅格、全宽 hero。
   ========================================================================== */
:root {
  /* 品牌 tokens（redesign-notes §2 对齐） */
  --ink: #0e0e10;       /* 深色区 / 近黑 */
  --ink-surface: #16161a; /* 略浅的深色面（卡片/分层） */
  --ink-2: #3c3c3c;     /* 中性文字（既有用法，勿改为近黑） */
  --ink-3: #6f6f6f;     /* 次要文字 */
  --paper: #ffffff;
  --paper-2: #f6f6f4;
  --line: #e6e6e2;
  --text: #1a1a1c;      /* 正文 */
  --text-2: #6b6b6b;    /* 次要文字（=ink-3 同义） */
  --accent: #C8102E;    /* GORE-TEX 红 */
  --ok: #1a7f37;
  --warn: #b54708;
  --no: #c8102e;
  --maxw: 1180px;
  --hd-h: 64px;
  --vtabs-h: 52px;
  --radius: 10px;
  --font: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* 注册商标符号统一：正体、上标、缩小（reg() 包裹的 ® 都走这里） */
.reg-i { font-style: normal !important; letter-spacing: 0; } /* Noto Sans 的 ® 字形自带上标版式，勿再缩放/位移 */
html { scroll-behavior: smooth; scrollbar-gutter: stable; } /* 始终预留竖滚动条空间：避免有/无滚动条的页面间切换时横向位移 */
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  display: flex; flex-direction: column; min-height: 100dvh; /* sticky footer：短页面也把 footer 压到底部 */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- 头部 ---------- */
.hd {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.hd-in {
  max-width: var(--maxw); margin: 0 auto; height: var(--hd-h);
  display: flex; align-items: center; gap: 28px; padding: 0 20px;
}
.brand { display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.brand-logo { width: 32px; height: 32px; object-fit: contain; }
.brand-mark {
  font-weight: 900; font-size: 19px; letter-spacing: 0.01em; color: var(--ink);
}
.brand-mark i { font-style: normal; }
.brand-sub {
  font-size: 11px; color: var(--text-2); letter-spacing: 0.24em; font-weight: 700;
  text-transform: uppercase; padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--line);
}
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  position: relative;
  font-size: 13.5px; font-weight: 600; padding: 8px 13px; border-radius: 6px;
  color: var(--text-2); transition: color 0.15s;
  letter-spacing: 0.01em;
}
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); font-weight: 700; }
.nav a.on::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px;
}
.hd-right { display: flex; align-items: center; gap: 10px; }
.client-chip {
  font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; letter-spacing: 0.05em; white-space: nowrap;
}
.client-chip.strategy { background: var(--accent); }

/* 右上角用户头像 + 下拉 */
.user-menu{ position:relative; }
.av-btn{ width:34px; height:34px; border-radius:50%; border:0; overflow:hidden; padding:0; cursor:pointer; background:var(--ink); display:block; flex:none; transition:box-shadow .15s, transform .1s; }
.av-btn:hover{ box-shadow:0 4px 14px -6px rgba(0,0,0,.45); }
.av-btn:active{ transform:scale(.94); }
.av-btn img, .av-lg img, .prof-av-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.av-ini{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:var(--ink); color:#fff; font-size:14px; font-weight:800; line-height:1; }
.av-lg{ background:var(--ink); }
.av-pop{ position:absolute; right:0; top:calc(100% + 10px); width:236px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 24px 60px -24px rgba(0,0,0,.45); padding:8px; z-index:200; }
.av-pop-head{ display:flex; align-items:center; gap:11px; padding:10px 10px 12px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.av-lg{ width:42px; height:42px; flex:none; border-radius:50%; overflow:hidden; display:block; }
.av-id{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.av-id b{ font-size:14px; font-weight:900; color:var(--ink); line-height:1.2; }
.av-id span{ font-size:11.5px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.av-role{ align-self:flex-start; font-style:normal; font-size:10.5px; font-weight:800; color:var(--accent); background:rgba(200,16,46,.09); padding:1px 8px; border-radius:999px; margin-top:2px; }
.av-item{ display:block; width:100%; text-align:left; border:0; background:transparent; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:700; color:var(--text); cursor:pointer; }
.av-item:hover{ background:var(--paper-2); }
.av-item.av-danger{ color:var(--accent); }

/* 我的 / 个人中心（页面式，非弹窗） */
.acc-card{ display:flex; align-items:center; gap:28px; border:1px solid var(--line); border-radius:16px; background:#fff; padding:28px 32px; max-width:560px; }
.acc-av{ position:relative; flex:none; width:96px; height:96px; border-radius:50%; overflow:hidden; cursor:pointer; border:1px solid var(--line); }
.acc-av-img{ display:block; width:100%; height:100%; }
.acc-av-img .av-ini{ font-size:34px; }
.acc-av-edit{ position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.55); color:#fff; font-size:10.5px; font-weight:700; text-align:center; padding:5px 0; }
.prof-dl{ margin:0; display:grid; grid-template-columns:76px 1fr; row-gap:13px; column-gap:16px; }
.prof-dl dt{ font-size:12px; font-weight:800; color:var(--text-2); }
.prof-dl dd{ margin:0; font-size:13.5px; font-weight:700; color:var(--ink); word-break:break-all; }
.uform{ display:flex; flex-direction:column; gap:12px; max-width:400px; }
.uform input{ width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:13px; font-family:inherit; }
.uform input:focus{ outline:none; border-color:var(--accent); }
.uform-msg{ margin:0; font-size:12px; font-weight:700; color:var(--accent); min-height:16px; }
.uform-msg.ok{ color:var(--ok); }
.act-body{ min-height:80px; max-width:640px; }
/* 头像裁剪器 */
.crop-modal{ position:fixed; inset:0; z-index:400; background:rgba(14,14,16,.55); display:flex; align-items:center; justify-content:center; padding:24px; }
.crop-card{ width:min(352px,100%); background:#fff; border-radius:18px; padding:24px 26px 26px; box-shadow:0 30px 80px -20px rgba(0,0,0,.55); }
.crop-h{ font-size:16px; font-weight:900; color:var(--ink); margin:0 0 16px; text-align:center; }
.crop-stage{ position:relative; width:300px; height:300px; margin:0 auto; overflow:hidden; border-radius:12px; background:#141416; touch-action:none; cursor:grab; user-select:none; }
.crop-stage:active{ cursor:grabbing; }
.crop-stage img{ position:absolute; max-width:none; pointer-events:none; }
.crop-ring{ position:absolute; left:0; top:0; width:300px; height:300px; border-radius:50%; box-shadow:0 0 0 9999px rgba(0,0,0,.5); border:2px solid rgba(255,255,255,.85); pointer-events:none; }
.crop-zoomrow{ display:flex; align-items:center; gap:12px; margin:18px 2px 2px; color:var(--text-2); font-weight:800; font-size:15px; }
.crop-zoomrow input[type=range]{ flex:1; accent-color:var(--accent); }
.crop-tip{ font-size:11.5px; color:var(--text-2); text-align:center; margin:8px 0 16px; }
.crop-actions{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.crop-actions .btn{ justify-content:center; }
.act-empty{ text-align:center; color:var(--text-2); font-size:13px; padding:30px 0; }
.act-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.act-list li{ display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:10px; padding:11px 2px; border-bottom:1px solid var(--line); }
.act-list li:last-child{ border-bottom:0; }
.act-t{ font-size:10.5px; font-weight:800; text-align:center; padding:3px 0; border-radius:6px; }
.act-t.act-download{ color:var(--accent); background:rgba(200,16,46,.09); }
.act-t.act-view{ color:var(--blue,#1f5fb0); background:rgba(31,95,176,.09); }
.act-n{ font-size:13px; font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.act-ts{ font-size:11px; color:var(--text-2); white-space:nowrap; }
.burger { display: none; flex-direction: column; gap: 4px; background: none; border: 0; padding: 8px; }
.burger span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }

.drawer {
  display: none; position: fixed; top: var(--hd-h); left: 0; right: 0; z-index: 99;
  background: #fff; border-bottom: 1px solid var(--line);
  flex-direction: column; padding: 8px 0 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}
.drawer.open { display: flex; }
.drawer a { padding: 12px 24px; font-weight: 600; border-bottom: 1px solid var(--paper-2); }

/* ---------- 通用版式 ---------- */
.app { min-height: 60vh; flex: 1 0 auto; } /* 占满剩余高度，将 footer 推到视口底部 */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.section.alt { background: var(--paper-2); }

.kicker {
  font-size: 12px; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 14px;
}
h1.title {
  font-size: clamp(30px, 5vw, 52px); font-weight: 900; letter-spacing: -0.01em;
  line-height: 1.12; text-wrap: balance;
}
h2.title {
  font-size: clamp(22px, 3.2vw, 34px); font-weight: 900; letter-spacing: 0;
  line-height: 1.2; margin-bottom: 8px;
}
/* 按产品选素材标题：字号缩小并保持一行显示（长科技名不折行） */
h2.title.title-onerow { font-size: clamp(17px, 2vw, 24px); white-space: nowrap; }
/* 左栏科技名：缩小字号，每种科技只占一行 */
.side-nav-2 .side-sublink { font-size: 12px; white-space: nowrap; }
/* 素材卡标题：字号统一 + 单行显示，四张卡标题同一水平高度（网站模式；演示模式不动） */
body:not(.deck-on) .pack-name { font-size: 12px; white-space: nowrap; }
/* 主图与标题页：各模块高度=02（JS 设 min-height）；03 内容垂直居中；04 编号略靠上；空描述不占位 */
.req-fit .demo-shell .gtx-demo .p7-step-icons { position: relative; align-items: center; } /* 内容垂直居中 */
.req-fit .demo-shell .gtx-demo .p7-step-icons .dlrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin-top: 0; } /* 下载按钮不撑高内容 → 编号与文字块居中对齐 */
.req-fit .demo-shell .gtx-demo .p7-step-tech { position: relative; align-items: center; }
/* 04 的外链按钮绝对定位（不撑高内容）→ 内容只剩标题一行，菱形与文字精确居中对齐 */
.req-fit .demo-shell .gtx-demo .p7-step-tech .dlrow { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); margin-top: 0; }
.req-fit .demo-shell .gtx-demo .p7-step-tech .txt i:empty { display: none; }
.sub { color: var(--ink-3); font-size: 15px; max-width: 720px; margin-top: 14px; }
.sec-head { margin-bottom: 30px; }
.sec-head .kicker { margin-bottom: 10px; }
.sec-head .en {
  font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-2);
  font-weight: 700; margin-top: 6px;
}

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-3); padding: 18px 0 0; }
.crumbs a { color: var(--ink-2); font-weight: 600; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: 0.5; }

/* ---------- Hero ---------- */
.hero {
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(200,16,46,0.5), transparent 70%);
  pointer-events: none;
}
.hero-in { max-width: var(--maxw); margin: 0 auto; padding: 92px 20px 84px; position: relative; }
.hero .kicker { color: #ff5f76; }
.hero h1 { color: #fff; }
.hero .sub { color: rgba(255,255,255,0.78); font-size: 16px; }
.hero-cta { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; font-weight: 800; font-size: 14px;
  letter-spacing: 0.06em; border: 2px solid transparent; transition: 0.18s;
}
.btn-primary { background: #fff; color: var(--ink); }
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn-ghost { border-color: rgba(255,255,255,0.45); color: #fff; }
.btn-ghost:hover { border-color: #fff; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--accent); }
.btn-line { border-color: var(--line); color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--ink); }

.hero-note {
  margin-top: 40px; padding: 14px 18px; border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.82); font-size: 13px;
  max-width: 680px; border-radius: 0 8px 8px 0;
}

/* ---------- 复用页面头带 .sec-hero（每个一级页面）---------- */
.sec-hero {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  min-height: clamp(220px, 34vh, 360px);
  display: flex; align-items: flex-end;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sec-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
.sec-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0.45) 0%, rgba(10,10,12,0.6) 55%, rgba(10,10,12,0.88) 100%);
}
.sec-hero.is-dark { background: var(--ink); }
.sec-hero.is-dark::after {
  content: ""; position: absolute; right: -120px; top: -140px; width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(200,16,46,0.4), transparent 70%); pointer-events: none; z-index: 0;
}
.sec-hero-in {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: clamp(40px, 6vw, 64px) 20px clamp(34px, 5vw, 52px);
}
.sec-hero-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.66); margin-bottom: 16px;
}
.sec-hero-h1 {
  font-size: clamp(28px, 4.4vw, 46px); font-weight: 900; letter-spacing: -0.015em;
  line-height: 1.08; color: #fff; margin: 0; text-shadow: 0 2px 28px rgba(0,0,0,0.35);
}
.sec-hero-lead {
  font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.82);
  max-width: 720px; margin: 16px 0 0;
}

/* ---------- 品类按钮（首页一级入口） ---------- */
.cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.cat-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; background: #fff; transition: 0.18s; overflow: hidden; display: block;
}
.cat-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.06); }
.cat-card .ic { font-size: 30px; }
.cat-card .cat-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }
.cat-card b { display: block; font-size: 20px; font-weight: 900; margin-top: 12px; }
.cat-card .en { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.cat-card p { font-size: 13px; color: var(--ink-3); margin-top: 10px; line-height: 1.55; min-height: 3.1em; }
.cat-card .go { position: absolute; right: 18px; top: 22px; font-weight: 900; color: var(--ink-3); transition: 0.18s; }
.cat-card:hover .go { color: var(--accent); transform: translateX(3px); }
.cat-card.planned { opacity: 0.62; }
.cat-card.planned:hover { transform: none; box-shadow: none; border-color: var(--line); }
.tag-soon {
  display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 10px;
  border-radius: 999px; background: var(--paper-2); color: var(--ink-3); margin-top: 10px;
}

/* ---------- 入口大卡 ---------- */
.entry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.entry-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff;
  display: flex; flex-direction: column; gap: 8px; transition: 0.18s;
}
.entry-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.06); }
.entry-card .no { font-size: 12px; font-weight: 900; color: var(--accent); letter-spacing: 0.2em; }
.entry-card b { font-size: 19px; font-weight: 900; }
.entry-card p { font-size: 13px; color: var(--ink-3); flex: 1; }
.entry-card .more { font-size: 13px; font-weight: 800; color: var(--ink); }
.entry-card:hover .more { color: var(--accent); }

/* ---------- 规则红线区 ---------- */
.rules-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.rule-item {
  display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; align-items: flex-start;
}
.rule-item .lv {
  flex: 0 0 auto; font-size: 11px; font-weight: 900; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 4px; margin-top: 2px; white-space: nowrap;
}
.lv-must { background: var(--ink); color: #fff; }
.lv-ban { background: var(--accent); color: #fff; }
.lv-sug { background: var(--paper-2); color: var(--ink-2); }
.rule-item p { font-size: 13.5px; line-height: 1.6; }
.rule-item .grp { display: block; font-size: 11px; font-weight: 800; color: var(--ink-3); letter-spacing: 0.12em; margin-bottom: 3px; }

/* ---------- 步骤卡（基础要求列表 / 使用说明） ---------- */
.step-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.step-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden;
  display: flex; flex-direction: column; transition: 0.18s;
}
.step-card:hover { border-color: var(--ink); box-shadow: 0 10px 26px rgba(0,0,0,0.06); transform: translateY(-3px); }
.step-card .sc-top { padding: 22px 22px 0; }
.step-card .sc-num { font-size: 13px; font-weight: 900; color: var(--accent); letter-spacing: 0.15em; }
.step-card b { font-size: 19px; font-weight: 900; display: block; margin-top: 6px; }
.step-card .en { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.step-card p { padding: 10px 22px 18px; font-size: 13px; color: var(--ink-3); flex: 1; }
.step-card .sc-foot {
  padding: 14px 22px; border-top: 1px solid var(--paper-2); font-size: 13px; font-weight: 800;
  display: flex; justify-content: space-between; align-items: center;
}
.step-card:hover .sc-foot { color: var(--accent); }
.badge-demo {
  font-size: 11px; font-weight: 800; color: var(--accent); border: 1px solid currentColor;
  padding: 2px 9px; border-radius: 999px; letter-spacing: 0.08em;
}

/* ---------- 科技选择 / 节点页 ---------- */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tech-card {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff;
  transition: 0.18s; display: block; position: relative;
}
.tech-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.06); }
.badge {
  display: inline-block; font-size: 11px; font-weight: 900; letter-spacing: 0.1em;
  padding: 3px 11px; border-radius: 4px;
}
.badge-black { background: var(--ink); color: #fff; }
.badge-white { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.tech-card b { display: block; font-size: 18px; font-weight: 900; margin-top: 12px; }
.tech-card .tg { font-size: 13px; color: var(--ink-2); margin-top: 6px; font-weight: 600; }
.tech-card p { font-size: 12.5px; color: var(--ink-3); margin-top: 10px; }

.boundary {
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
  background: #fff; padding: 18px 20px; margin: 18px 0; font-size: 13.5px;
}
.weather-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wchip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line); background: #fff;
}
.wchip.ok { border-color: rgba(26,127,55,0.4); color: var(--ok); }
.wchip.limit { border-color: rgba(181,71,8,0.4); color: var(--warn); }
.wchip.no { border-color: var(--no); color: var(--no); background: rgba(200,16,46,0.07); text-decoration: line-through; text-decoration-color: #111; text-decoration-thickness: 2px; }
/* 天气图形图标（Lucide 线性）：随状态色 */
.wchip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wchip .wm { font-style: normal; font-size: 11px; font-weight: 900; margin-left: 1px; }
.sell-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.schip { font-size: 13px; font-weight: 800; padding: 6px 14px; border-radius: 6px; background: var(--ink); color: #fff; }

/* ---------- 素材卡 ---------- */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.asset-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden;
  display: flex; flex-direction: column;
}
.asset-card .ac-thumb {
  height: 120px; background: repeating-linear-gradient(135deg, var(--paper-2) 0 14px, #ececea 14px 28px);
  display: flex; align-items: center; justify-content: center; color: var(--ink-3);
  font-size: 12px; letter-spacing: 0.12em; font-weight: 700; position: relative;
}
.asset-card .ac-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ac-kind {
  position: absolute; left: 12px; top: 12px; font-size: 10px; font-weight: 900; letter-spacing: 0.1em;
  background: rgba(10,10,10,0.82); color: #fff; padding: 3px 9px; border-radius: 4px;
}
.asset-card .ac-body { padding: 16px 18px 6px; flex: 1; }
.asset-card b { font-size: 15.5px; font-weight: 800; display: block; }
.asset-card .st { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.asset-card .note { font-size: 12px; color: var(--warn); margin-top: 6px; }
.ac-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 18px 0; }
.tag-mode { font-size: 11px; font-weight: 800; color: var(--ink-2); background: var(--paper-2); padding: 3px 9px; border-radius: 4px; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 18px 0; }
.chch {
  font-size: 11px; font-weight: 700; padding: 2.5px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-2); background: #fff;
}
.asset-card .ac-foot { padding: 14px 18px 16px; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 13.5px;
  padding: 11px 16px; border-radius: 8px; transition: 0.16s; border: 0;
  letter-spacing: 0.02em;
}
.dl-btn:hover { filter: brightness(1.08); }
.dl-btn.ghost { background: #fff; color: var(--ink-3); border: 1.5px dashed var(--line); }
.dl-btn.ghost:hover { color: var(--ink); border-color: var(--ink-3); background: #fff; }
.dl-btn svg { width: 15px; height: 15px; }

.owner-head { display: flex; align-items: center; gap: 12px; margin: 34px 0 16px; }
.owner-head h3 { font-size: 19px; font-weight: 900; }
.owner-head .ln { flex: 1; height: 1px; background: var(--line); }

/* ---------- 通用区块卡（brand blocks / live / care） ---------- */
.block-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.bcard { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: #fff; }
.bcard b { font-size: 16px; font-weight: 900; display: block; margin-bottom: 8px; }
.bcard p { font-size: 13.5px; color: var(--ink-2); }
.bcard.rule { display: flex; gap: 14px; align-items: flex-start; }
.bcard.rule .rn { font-size: 18px; font-weight: 900; color: var(--accent); }
.bcard.note { background: var(--ink); color: #fff; border-color: var(--ink); }
.bcard.note b { color: #fff; }
.bcard.note p { color: rgba(255,255,255,0.8); }

/* ==========================================================================
   资产库 —— 左侧粘性章节导航 + 右侧内容面板（GORE-TEX ONE Integration Guidelines 气质）
   ========================================================================== */
.brand-layout {
  max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px;
  align-items: start;
}
/* 左侧粘性章节导航 */
.side-nav {
  position: sticky; top: calc(var(--hd-h) + 24px);
  align-self: start;
}
/* 视觉子页（含「视觉」二级标签条）：左栏粘性下移到标签条之下，避免被盖住 */
body.has-vtabs .side-nav { top: calc(var(--hd-h) + var(--vtabs-h) + 18px); }
.side-nav {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line); padding-right: 16px;
}
.side-nav-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: 0.2em;
  color: var(--text-2); text-transform: uppercase; margin-bottom: 14px;
}
.side-link {
  display: block; position: relative;
  padding: 11px 12px 11px 14px; margin-left: -2px;
  border-left: 2px solid transparent;
  text-decoration: none; color: var(--text);
  transition: color .15s, border-color .15s, background .15s;
}
.side-link .sl-cn { display: block; font-size: 13px; font-weight: 700; line-height: 1.35; }
.side-link .sl-en {
  display: block; margin-top: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-2);
}
.side-link:hover { color: var(--accent); background: var(--paper-2); }
.side-link.on { border-left-color: var(--accent); color: var(--accent); background: var(--paper-2); border-radius: 0 8px 8px 0; }
.side-link.on .sl-cn { font-weight: 900; }
.side-link.on .sl-en { color: var(--accent); }
.side-nav .sl-en { display: none; } /* 左栏目录条目不显示英文 */
/* 视觉规范（基础要求）一屏：填满视口，示范在右侧面板内滚动，整页不滚 */
.req-fit .section{ padding:0; }
/* 按产品选素材 / LOGO 与科技素材：内容与二级标签条的间距对齐基础要求页 */
.vtabs ~ .section,
.live-wrap .section,
.svc-wrap .section,
.acc-wrap .section{ padding-top:clamp(8px,1vh,12px); }
.vtabs ~ .section .side-nav,
.live-wrap .side-nav,
.svc-wrap .side-nav,
.acc-wrap .side-nav{ padding-top:14px; }
.req-fit .brand-layout{ height:calc(100dvh - var(--hd-h) - var(--vtabs-h)); align-items:stretch;
  padding-top:clamp(8px,1vh,12px); padding-bottom:clamp(8px,1vh,14px); }
.req-fit .side-nav{ position:static; top:auto; overflow-y:auto; padding-top:14px; } /* 菜单下移，与中间栏内容顶部对齐 */
/* 一屏布局下 side-nav 的 overflow 会裁掉负边距红条 → 边距归零，让元素自身的 border-left 正常显示（与其它页一致） */
.req-fit .side-nav .side-link{ margin-left:0; padding-right:36px; } /* 右侧留出圆环位置 */
/* 基础要求左栏：每项右侧小圆环进度（进页 10s 填满变绿） */
.req-ring{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; pointer-events:none; }
.req-ring svg{ width:100%; height:100%; transform:rotate(-90deg); display:block; }
.req-ring .rr-bg{ fill:none; stroke:var(--line); stroke-width:2.5; }
.req-ring .rr-fg{ fill:none; stroke:var(--ok); stroke-width:2.5; stroke-linecap:round; stroke-dasharray:56.5; stroke-dashoffset:56.5; }
.req-ring-full .rr-fg{ stroke-dashoffset:0; }
.req-ring-empty .rr-fg{ stroke-dashoffset:56.5; }
.req-ring-active .rr-fg{ stroke-dashoffset:56.5; } /* 进行中但未开始（说明还在）→ 空、不动 */
.req-ring-active.req-ring-run .rr-fg{ animation:rrFill 15s linear forwards; } /* 点「开始查看」后才填充 */
@keyframes rrFill{ from{ stroke-dashoffset:56.5; } to{ stroke-dashoffset:0; } }
/* 视觉标签条：未读完基础要求时，素材两项锁定 + 灰色三角感叹号 */
.vtab-locked{ position:relative; display:inline-flex; align-items:center; gap:6px; padding:0 12px; height:100%; font-size:14px; font-weight:700; color:var(--text-2); opacity:.6; cursor:not-allowed; border-bottom:2px solid transparent; }
/* 即时 tooltip（替代有延迟的原生 title） */
.vtab-locked::after{ content:"请先阅读完基础要求"; position:absolute; top:100%; left:50%; transform:translateX(-50%); margin-top:8px; white-space:nowrap; background:var(--ink); color:#fff; font-size:12px; font-weight:600; padding:7px 11px; border-radius:8px; box-shadow:0 8px 22px -8px rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .1s; z-index:120; }
.vtab-locked:hover::after{ opacity:1; }
.vtab-warn{ display:inline-flex; align-items:center; width:15px; height:15px; color:#9b988f; }
.vtab-warn svg{ width:100%; height:100%; }
/* 基础要求 进入说明（高亮左栏 + 气泡：一句话 + 开始查看） */
.req-intro{ position:fixed; inset:0; z-index:300; }
.req-intro-spot{ position:fixed; border-radius:12px; box-shadow:0 0 0 9999px rgba(10,10,12,.55); pointer-events:none; }
.req-intro-tip{ position:fixed; width:300px; max-width:calc(100vw - 24px); background:#fff; border-radius:14px; padding:20px; box-shadow:0 20px 48px -16px rgba(0,0,0,.45); }
.req-intro-t{ margin:0; font-size:15px; font-weight:800; line-height:1.6; color:var(--text); }
.req-intro-go{ margin-top:18px; background:var(--accent); color:#fff; border:none; border-radius:999px; padding:11px 26px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:opacity .15s; }
.req-intro-go:hover{ opacity:.92; }

/* 直播大使 / 主播 名录卡片 */
.host-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:18px; }
.host-card{ display:flex; flex-direction:column; text-align:left; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper); cursor:pointer; padding:0; transition:border-color .15s, transform .15s, box-shadow .15s; }
.host-card:hover{ border-color:var(--accent); transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(0,0,0,.3); }
.host-photo{ display:block; width:100%; height:0; padding-bottom:125%; background:#eee center top/cover; } /* padding 撑高(4:5)：不依赖 aspect-ratio，微信内置浏览器也能显示 */
.host-meta{ display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; }
.host-name{ font-size:13.5px; font-weight:900; color:var(--text); }
.host-role{ font-size:11px; color:var(--text-2); line-height:1.4; }
.host-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:3px; }
.host-tags i{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--accent); background:rgba(200,16,46,.08); padding:2px 8px; border-radius:999px; }
.host-go{ padding:0 15px 13px; font-size:12px; font-weight:800; color:var(--accent); }
/* 主播详情弹窗 */
.host-modal{ position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(10,10,12,.55); }
.hm-card{ position:relative; width:min(680px,100%); max-height:88vh; overflow:auto; overscroll-behavior:contain; background:#fff; border-radius:18px; box-shadow:0 30px 80px -20px rgba(0,0,0,.55); }
/* 弹窗打开时锁住背景页滚动 */
html.modal-lock{ overflow:hidden; }
.hm-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:rgba(0,0,0,.06); cursor:pointer; font-size:15px; z-index:2; }
.hm-close:hover{ background:rgba(0,0,0,.12); }
.hm-top{ display:flex; gap:20px; padding:26px 28px 18px; }
@media (max-width:560px){ .hm-top{ flex-direction:column; } }
.hm-photo{ flex:none; width:140px; height:175px; border-radius:12px; background:#eee center top/cover; }
.hm-head{ min-width:0; }
.hm-name{ font-size:22px; font-weight:900; color:var(--text); }
.hm-en{ font-style:normal; font-size:14px; font-weight:700; color:var(--text-2); margin-left:6px; }
.hm-role{ margin-top:6px; font-size:13px; color:var(--text-2); }
.hm-metaline{ margin-top:8px; font-size:12.5px; color:var(--text-2); }
.hm-tags{ margin-top:10px; display:flex; flex-wrap:wrap; gap:6px; }
.hm-tags span{ font-size:11px; font-weight:700; color:var(--accent); background:rgba(200,16,46,.08); padding:3px 9px; border-radius:999px; }
.hm-body{ padding:6px 28px 26px; }
.hm-sect{ margin-top:18px; }
.hm-h{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--text-2); margin-bottom:8px; }
.hm-intro,.hm-brands{ margin:0; font-size:14px; line-height:1.75; color:var(--text); }
.hm-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hm-chip{ font-size:12.5px; font-weight:700; color:var(--text); background:var(--paper-2); border:1px solid var(--line); padding:6px 12px; border-radius:999px; }
.hm-block{ margin-top:10px; }
.hm-block b{ font-size:13.5px; font-weight:900; color:var(--text); }
.hm-block p{ margin:4px 0 0; font-size:13px; line-height:1.7; color:var(--text-2); }
.hm-links{ display:flex; flex-wrap:wrap; gap:10px; }
.hm-links a{ font-size:13px; font-weight:800; color:var(--accent); text-decoration:none; border:1px solid var(--line); padding:7px 14px; border-radius:999px; }
.hm-links a:hover{ border-color:var(--accent); }
.hm-rec{ margin-top:18px; font-size:13px; font-weight:800; color:var(--warn); }
/* 直播道具清单 */
.propcat{ margin-bottom:6px; }
.prop-catnote{ margin:-8px 0 2px; font-size:12.5px; color:var(--text-2); }
.propsub{ margin-top:16px; }
.propsub-h{ font-size:13.5px; font-weight:800; color:var(--text); margin-bottom:10px; }
.propsub-note{ font-weight:600; color:var(--text-2); font-size:11.5px; margin-left:8px; }
.prop-empty{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; border:1px dashed var(--line); border-radius:8px; color:var(--text-2); font-size:12px; font-weight:700; background:repeating-linear-gradient(45deg,#f6f6f4,#f6f6f4 9px,#efefef 9px,#efefef 18px); }
/* ===== 全站图片查看统一交互：悬停=放大镜光标，图上不叠图标，点击弹出大图（网站模式） ===== */
body:not(.deck-on) .pack-prev .pack-play[data-kind="image"]{ top:0; left:0; transform:none; width:100%; height:100%; border-radius:0; background:transparent; cursor:zoom-in; }
body:not(.deck-on) .pack-prev .pack-play[data-kind="image"]:hover{ background:transparent; transform:none; }
body:not(.deck-on) .pack-prev .pack-play[data-kind="image"] svg{ display:none; }
body:not(.deck-on) .pack-refbtn{ cursor:zoom-in; }
body:not(.deck-on) .pack-refzoom{ display:none !important; }
body:not(.deck-on) .qa-m-img{ cursor:zoom-in; }

/* ===== 直播道具/水箱页（卡片复用「功能/科技素材」pack 样式，无自定义卡） ===== */
.tank-note{ margin:-8px 0 16px; font-size:12.5px; color:var(--text-2); }
/* 直播道具页：图片大图查看器不显示下载按钮（视频保留） */
body.live-props-page .pack-viewer-box:has(img) .pack-vdl{ display:none; }
/* 清洁保养（图文并茂） */
.care-why{ display:grid; grid-template-columns:minmax(0,40%) 1fr; gap:0; align-items:stretch; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; margin-bottom:24px; box-shadow:0 10px 30px -22px rgba(0,0,0,.25); }
.care-why-fig img{ width:100%; height:100%; min-height:250px; object-fit:cover; display:block; }
.care-why-txt{ padding:28px 32px; align-self:center; }
.care-why-txt h4{ margin:0 0 14px; font-size:18px; font-weight:900; color:var(--ink); padding-bottom:11px; border-bottom:2px solid var(--accent); display:inline-block; }
.care-why-txt p{ margin:0 0 10px; font-size:13px; line-height:1.8; color:var(--text-2); }
.care-why-txt p:last-child{ margin-bottom:0; }
/* 保养方法一句提示 */
.care-lead{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--text-2); background:var(--paper-2); border-radius:10px; padding:11px 15px; margin:0 0 16px; }
.care-dot{ flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent); }
/* 保养方法：步骤图文卡 */
.care-table{ display:grid; gap:14px; }
.care-row{ display:grid; grid-template-columns:120px 1fr; align-items:center; gap:22px; padding:18px 22px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.care-row:hover{ border-color:#dcdcd7; box-shadow:0 10px 26px -20px rgba(0,0,0,.2); }
.care-row-ic{ display:flex; align-items:center; justify-content:center; height:104px; background:var(--paper-2); border-radius:12px; padding:10px; }
.care-row-ic img{ max-width:100%; max-height:100%; object-fit:contain; display:block; mix-blend-mode:multiply; }
.care-row-tx b{ display:flex; align-items:center; gap:9px; font-size:15px; font-weight:900; color:var(--ink); margin-bottom:8px; }
.care-row-tx b::before{ counter-increment:care; content:counter(care,decimal-leading-zero); flex:none; width:24px; height:24px; border-radius:7px; background:var(--accent); color:#fff; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
.care-table{ counter-reset:care; }
.care-row-tx p{ margin:0; font-size:13px; line-height:1.8; color:var(--text-2); }
/* 鞋款：注意事项（图 + 编号列表） */
.care-notice{ display:grid; grid-template-columns:minmax(0,40%) 1fr; align-items:stretch; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 10px 30px -22px rgba(0,0,0,.25); }
.care-notice-fig img{ width:100%; height:100%; min-height:300px; object-fit:cover; display:block; }
.care-notice-tx{ padding:28px 32px; align-self:center; }
.care-notice-tx b{ display:inline-block; font-size:16px; font-weight:900; color:var(--ink); margin-bottom:16px; padding-bottom:11px; border-bottom:2px solid var(--accent); }
.care-list{ margin:0; padding:0; list-style:none; counter-reset:cl; display:flex; flex-direction:column; gap:12px; }
.care-list li{ position:relative; padding-left:34px; font-size:13px; line-height:1.7; color:var(--text-2); }
.care-list li::before{ counter-increment:cl; content:counter(cl); position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:rgba(200,16,46,.1); color:var(--accent); font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.care-vids{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)) !important; max-width:340px; }
@media (max-width:760px){ .care-why,.care-notice{ grid-template-columns:1fr; } .care-why-txt,.care-notice-tx{ padding:22px; } .care-row{ grid-template-columns:88px 1fr; gap:16px; padding:16px; } .care-row-ic{ height:80px; } }
/* 售后服务 */
.as-card{ margin-top:clamp(40px,8vh,96px); max-width:560px; border:1px solid var(--line); border-radius:18px; background:#fff; padding:36px 40px 40px; text-align:center; box-shadow:0 16px 40px -26px rgba(0,0,0,.28); }
.as-logo{ width:104px; height:auto; display:block; margin:0 auto 18px; }
.as-card h3{ font-size:18px; font-weight:900; color:var(--ink); margin:0 0 12px; }
.as-lead{ font-size:13px; line-height:1.8; color:var(--text-2); margin:0 auto 22px; max-width:420px; }
.as-rows{ display:flex; flex-direction:column; gap:12px; text-align:left; border-top:1px solid var(--line); padding-top:22px; }
.as-row{ display:grid; grid-template-columns:80px 1fr; align-items:center; gap:16px; }
.as-k{ font-size:11px; font-weight:800; letter-spacing:.12em; color:var(--text-2); }
.as-v{ display:flex; flex-wrap:wrap; gap:8px 22px; align-items:baseline; }
.as-v b{ font-size:17px; font-weight:900; color:var(--accent); letter-spacing:.02em; }
.as-v b i{ font-style:normal; font-size:11px; font-weight:700; color:var(--text-2); margin-left:5px; }
.as-row:last-child .as-v b{ font-size:14px; color:var(--ink); }
/* 实验室素材·测试介绍卡：描述整段展示 */
.lab-tests{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important; gap:13px; } /* 与功能/科技素材同尺寸的小卡 */
.lab-tests .pack-it-body b{ white-space:normal; }
.lab-tests .pack-it-body i{ display:block; margin-top:5px; font-size:12px; line-height:1.7; color:var(--g1); white-space:normal; overflow:visible; }
/* 背板上排 / 底板下排，一一对应 */
.pack-items.tank-boards{ grid-template-columns:repeat(4,1fr); }
.tank-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:18px; }
.tank-spec-card{ background:var(--paper-2); border-radius:14px; padding:18px 20px; }
.tank-spec-card i{ display:block; font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.16em; color:var(--text-2); margin-bottom:7px; }
.tank-spec-card b{ display:block; font-size:15px; font-weight:900; color:var(--ink); line-height:1.4; }
.tank-spec-card p{ margin:5px 0 0; font-size:12px; color:var(--text-2); }
.tank-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tank-step-grp{ border:1px solid var(--line); border-radius:14px; padding:18px 20px; background:#fff; }
.tank-step-grp > b{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:900; color:var(--ink); margin-bottom:11px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.ts-n{ flex:none; width:26px; height:26px; border-radius:8px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.tank-step-grp ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.tank-step-grp li{ font-size:12.5px; line-height:1.65; color:var(--text); }
.tank-step-grp li::marker{ color:var(--accent); font-weight:800; }
@media (max-width:900px){ .tank-steps,.tank-specs{ grid-template-columns:1fr; } .pack-items.tank-boards{ grid-template-columns:repeat(2,1fr); } }
.tank-spec{ list-style:none; margin:2px 0 14px; padding:0; display:flex; flex-direction:column; gap:5px; }
.tank-spec li{ font-size:13px; line-height:1.6; color:var(--text); padding-left:15px; position:relative; }
.tank-spec li::before{ content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.prop-vids{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; max-width:760px; margin-top:6px; }
.prop-vtile{ display:flex; flex-direction:column; gap:8px; }
.prop-vtile .pack-prev{ border:1px solid var(--line); border-radius:10px; aspect-ratio:16/10; background:#f4f5f6; }
.prop-vtile > b{ font-size:13px; font-weight:800; color:var(--ink); text-align:center; }
.hm-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.hm-thumb{ height:0; padding-bottom:133.33%; border:none; border-radius:10px; background:#eee center top/cover; cursor:zoom-in; transition:transform .15s, box-shadow .15s; }
.hm-thumb:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -14px rgba(0,0,0,.4); }
/* 微信内置浏览器(X5 老内核)不支持 aspect-ratio → 纯背景图容器会塌成 0 高、图片不显示；这里用 padding 撑高兜底（仅无 aspect-ratio 支持的浏览器生效，现代浏览器不变） */
@supports not (aspect-ratio: 1 / 1) {
  .prop-empty{ height:0; padding-bottom:100%; }
  .cat-card .cat-img{ height:180px; }                   /* 含 img，给兜底高度 */
  .pack-prev{ min-height:150px; }
  .pack-prev > img{ height:auto; }
}
.req-fit .brand-panel{ min-height:0; display:flex; flex-direction:column; }
.req-fit .brand-panel .sec-head{ flex:none; margin-bottom:14px; }
.req-fit .demo-shell{ flex:1; min-height:0; min-width:0; overflow-x:hidden; overflow-y:auto; background:transparent; padding:0; border:0; border-radius:0; }
.req-fit .demo-shell .gtx-demo{ transform-origin:top left; padding-top:0; }
/* 仅网站：压掉示范头部上方留白 */
.req-fit .demo-shell .gtx-demo .gtx-demo-head{ margin-bottom:14px; }
/* 仅网站：去掉示范内重复的标题块（左侧目录已有页名）。gtx-control-title=搜索/分类/搜索词；sphead=详情/店铺首页/专题页 */
.req-fit .demo-shell .gtx-demo .gtx-control-title,
.req-fit .demo-shell .gtx-demo .sphead,
.req-fit .demo-shell .gtx-demo .gtx-principle,
.req-fit .demo-shell .gtx-demo .sg6-status{ display:none; }
/* 仅网站：两栏布局(标注列+手机)右栏改为刚好包住手机并左对齐，消除中右大空隙（仅 f5v4/p7/c11，不影响 ispec/sg6 等其它布局） */
.req-fit .gtx-demo .gtx-demo-body.f5v4,
.req-fit .gtx-demo .gtx-demo-body.p7-demo,
.req-fit .gtx-demo .gtx-demo-body.c11-demo{ grid-template-columns:minmax(0,360px) auto; justify-content:start; gap:clamp(20px,2vw,32px); }
/* 仅网站：左栏(标注列)字号调小，关键词行允许换行，避免窄列溢出（4 级选择器盖过 demos.css 变体规则） */
.req-fit .demo-shell .gtx-demo .gtx-control-title b{ font-size:15px; }
.req-fit .demo-shell .gtx-demo .txt b,
.req-fit .demo-shell .gtx-demo .rrow .rt b{ font-size:13px; line-height:1.25; white-space:nowrap; } /* 标题+「必要/酌情使用」标签保持一行，不换行 */
/* Noto Sans 的 ® 字形自带上标版式，再叠 vertical-align:super 会顶得过高 → 回到基线 */
.req-fit .demo-shell .gtx-demo .reg{ font-size:1em; vertical-align:baseline; line-height:0; }
/* 搜索结果页：三块等高（行高取最高的 01），02/03 内容在行内垂直居中 */
.req-fit .demo-shell .gtx-demo .f5v4-steps{ display:grid; grid-auto-rows:1fr; }
.req-fit .demo-shell .gtx-demo .f5v4-step,
.req-fit .demo-shell .gtx-demo .f5v4-step:has(.gtx-guide-host){ padding-bottom:16px; align-content:center; align-items:start; } /* 内容块整体居中，菱形编号与标题顶对齐 */
.req-fit .demo-shell .gtx-demo .txt i,
.req-fit .demo-shell .gtx-demo .rrow .rt i{ font-size:11.5px; }
.req-fit .demo-shell .gtx-demo .rrow .rt{ font-size:13px; }
.req-fit .demo-shell .gtx-demo .rrow{ position:relative; min-height:64px; padding:12px 8px 12px 0; align-items:center; } /* 各行统一间距：上下 12px + 统一最小行高 */
/* 详情/店铺首页/专辑 等 ispec 页：下载按钮移到行右下角，标题/内容真正垂直居中、不被撑高留白 */
.req-fit .demo-shell .gtx-demo .rrow .dlrow{ position:absolute; right:8px; bottom:6px; margin-top:0; }
/* 仅网站：给挂了"点击"提示的那一项(每页第一项)留出底部空间，提示不再压到分隔线/下一行 */
.req-fit .demo-shell .gtx-demo .f5v4-step:has(.gtx-guide-host),
.req-fit .demo-shell .gtx-demo .p7-step:has(.gtx-guide-host),
.req-fit .demo-shell .gtx-demo .c11-step:has(.gtx-guide-host),
.req-fit .demo-shell .gtx-demo .sg6-step:has(.gtx-guide-host),
.req-fit .demo-shell .gtx-demo .rrow:has(.gtx-guide-host){ padding-bottom:44px; } /* 第一行(点击提示行)调大一点，其余行随等行高网格与之一致 */
/* 主图与标题页：01(点击提示行)不再额外加高——高度已由 JS min-height 对齐 02；内容居中 */
.req-fit .demo-shell .gtx-demo .p7-step:has(.gtx-guide-host){ padding-bottom:clamp(11px,1.6vw,14px); align-items:center; }
/* 01 的下载按钮同样绝对定位（不拉低文字块中心）→ 菱形编号与右侧文字垂直居中对齐 */
.req-fit .demo-shell .gtx-demo .p7-step-logo{ position:relative; }
.req-fit .demo-shell .gtx-demo .p7-step-logo .dlrow{ position:absolute; right:8px; top:50%; transform:translateY(-50%); margin-top:0; }
/* ispec 各行等高：行高统一取最高的第一行；按钮脱离网格、固定在面板左下（否则会被拉伸成通栏/占一整行） */
.req-fit .demo-shell .gtx-demo .p8-elev{ display:grid; grid-auto-rows:1fr; position:relative; padding-bottom:64px; }
.req-fit .demo-shell .gtx-demo .p8-elev > .gtx-case-btn{ position:absolute; left:0; bottom:8px; margin-top:0; }
/* 「查看真实案例」按钮：按页面缩放比反向缩放，各页视觉大小一致 */
.req-fit .demo-shell .gtx-demo .gtx-case-btn{ transform:scale(calc(1 / var(--fit-s, 1))); transform-origin:left center; }
.req-fit .demo-shell .gtx-demo .kwline{ font-size:10.5px; white-space:normal; }
.req-fit .demo-shell .gtx-demo .kw{ font-size:10.5px; }
/* 去掉中间栏(控制列)的米色背景与边框 */
.req-fit .demo-shell .gtx-demo .f5v4-control,
.req-fit .demo-shell .gtx-demo .p7-control,
.req-fit .demo-shell .gtx-demo .c11-control,
.req-fit .demo-shell .gtx-demo .p8-elev,
.req-fit .demo-shell .gtx-demo .sg6-panel{ background:transparent; border-color:transparent; padding-left:0; padding-right:0; padding-top:0; } /* 顶部内边距归零：中间栏内容整体上移 */
.req-fit .req-pager{ flex:none; margin-top:14px; }
.req-fit .gx-unlockbar{ flex:none; margin-top:14px; }
body.req-screen .ft{ display:none; }
@media (max-width:900px){
  .req-fit .brand-layout{ height:auto; }
  .req-fit .demo-shell{ flex:none; }
  body.req-screen .ft{ display:block; }
}
/* 右侧内容面板 */
.brand-panel { min-width: 0; }
/* LOGO应用规范 / 功能·科技素材 / 实验室素材 / 清洁保养 / 直播 各子页标题：字号统一（与「按产品选素材」一致） */
.vtabs ~ .section .brand-panel .sec-head .title,
.live-wrap .brand-panel .sec-head .title,
.svc-wrap .brand-panel .sec-head .title,
.acc-wrap .brand-panel .sec-head .title { font-size: clamp(17px, 2vw, 24px); font-weight: 900; letter-spacing: 0; }
/* 大标题上方留白稍大一些（视觉 + 直播 + 客服 + 我的一致） */
.vtabs ~ .section .brand-panel,
.live-wrap .brand-panel,
.svc-wrap .brand-panel,
.acc-wrap .brand-panel { padding-top: 20px; }
/* 功能/科技素材下载卡不再显示格式（仅命中带下载按钮的卡；不碰直播道具规格与实验室概括文字） */
body:not(.deck-on) .pack-item-foot:has(.pack-itdl) .pack-it-body i { display: none; }
.pack-it-body i:empty { display: none; }
.brand-panel .sec-head { margin-bottom: 22px; }
.brand-panel .block-grid { margin-bottom: 8px; }
.brand-panel .bcard { display: flex; flex-direction: column; }

/* 窄屏：左导航塌成横向滚动 chip 行，置于内容之上 */
@media (max-width: 860px) {
  .brand-layout { grid-template-columns: 1fr; gap: 22px; }
  .side-nav {
    position: static; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-right: 0; border-bottom: 1px solid var(--line);
    padding: 0 0 12px; gap: 8px; scrollbar-width: none;
  }
  .side-nav::-webkit-scrollbar { display: none; }
  .side-nav-kicker { display: none; }
  .side-link {
    flex: 0 0 auto; margin-left: 0; padding: 9px 14px;
    border-left: 0; border: 1px solid var(--line); border-radius: 999px;
    white-space: nowrap; background: #fff;
  }
  .side-link .sl-en { display: none; }
  .side-link .sl-cn { font-size: 13.5px; }
  .side-link.on { border-color: var(--accent); background: var(--accent); color: #fff; }
  .side-link.on .sl-cn { font-weight: 800; color: #fff; }
}

/* ==========================================================================
   客服问答 · 话术库 —— 帮助中心式（浏览索引 + 聚焦答案弹窗）
   网站与演示模式共用同一套类名；本块同时被 site.css 加载到两个界面。
   ========================================================================== */
/* 区头右上角的次级下载按钮（与 sec-head 同行） */
.qa-sechead-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.qa-pdfbtn-sm {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; margin-top: 4px;
  border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 8px; padding: 8px 14px; font-size: 13px; font-weight: 700;
  text-decoration: none; transition: border-color .15s, color .15s, background .15s;
}
.qa-pdfbtn-sm:hover { border-color: var(--accent); color: var(--accent); }

/* 工具条：搜索 + 分类 chips + 结果计数 */
.qa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 22px; }
.qa-search {
  display: inline-flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 340px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 0 14px;
  transition: border-color .15s, box-shadow .15s;
}
.qa-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,16,46,.08); }
.qa-search-ic { font-size: 13px; opacity: .55; flex: 0 0 auto; }
.qa-search input { flex: 1; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; padding: 10px 0; color: var(--ink); }
.qa-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.qa-chip {
  appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.qa-chip:hover { border-color: var(--ink-3); }
.qa-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.qa-result { font-size: 12.5px; color: var(--ink-3); font-weight: 600; margin-left: auto; }

/* 分类块：分类头 → 可选 sub 小标题 → 卡片网格 */
.qa-catsec { margin-bottom: 26px; }
.qa-catsec[hidden] { display: none; }
.qa-cathd { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.qa-cathd b { font-size: 16px; font-weight: 800; letter-spacing: .02em; }
.qa-cathd .qa-count {
  font-size: 12px; color: var(--ink-3); font-weight: 700;
  background: var(--paper-2); border-radius: 999px; padding: 1px 9px;
}
.qa-cathd .ln { flex: 1; height: 1px; background: var(--line); }
.qa-subhd { font-size: 12.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .06em; margin: 16px 0 9px; text-transform: none; }
.qa-subhd[hidden] { display: none; }

.qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.qa-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-height: 96px;
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; cursor: pointer; font: inherit; color: var(--ink);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.qa-card[hidden] { display: none; }
.qa-card:hover { border-color: var(--accent); box-shadow: 0 10px 24px rgba(0,0,0,.07); transform: translateY(-2px); }
.qa-card-q {
  font-weight: 600; font-size: 14px; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.qa-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qa-tag { font-size: 11px; font-weight: 700; color: var(--ink-3); background: var(--paper-2); border-radius: 5px; padding: 2px 7px; }
.qa-tag-img { color: var(--accent); background: rgba(200,16,46,.07); }
.qa-card-go { font-size: 12.5px; color: var(--ink-3); font-weight: 600; transition: color .15s, transform .15s; }
.qa-card:hover .qa-card-go { color: var(--accent); transform: translateX(2px); }
.qa-noresult { color: var(--ink-3); font-size: 14px; padding: 24px 0; text-align: center; }
.qa-noresult[hidden] { display: none; }

/* —— 答案弹窗（聚焦阅读层） —— */
.qa-modal {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(8,8,8,.55); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 28px;
  animation: qaFade .18s ease;
}
@keyframes qaFade { from { opacity: 0; } to { opacity: 1; } }
.qa-m-card {
  position: relative; background: #fff; border-radius: 14px; padding: 26px 28px;
  width: 100%; max-width: 960px; max-height: 90vh; overflow: auto;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.qa-m-close {
  position: absolute; top: 16px; right: 18px; appearance: none; border: 0; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); color: var(--ink-2);
  font-size: 15px; font-weight: 800; line-height: 1; transition: background .15s, color .15s;
}
.qa-m-close:hover { background: var(--accent); color: #fff; }
.qa-m-kicker { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: .12em; text-transform: uppercase; }
.qa-m-title { font-size: 20px; font-weight: 800; line-height: 1.35; margin: 8px 0 18px; padding-right: 30px; }
.qa-m-body { display: block; }
.qa-m-two { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
.qa-m-figure { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; }
.qa-m-img {
  display: block; width: 100%; max-height: 64vh; object-fit: contain;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
}
.qa-m-text { min-width: 0; max-height: 64vh; overflow: auto; }
.qa-m-textonly { max-width: 70ch; }
.qa-m-answer { white-space: pre-line; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }
.qa-m-actions { margin-top: 16px; }
.qa-empty { color: var(--ink-3); font-style: italic; font-size: 14px; }
.qa-copy {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer;
  padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2);
  transition: background .15s, border-color .15s, color .15s;
}
.qa-copy:hover { background: var(--paper-2); border-color: var(--ink-3); }
.qa-copy.copied { border-color: var(--ok, #1a7f37); background: #e7f4ec; color: var(--ok, #1a7f37); }
.qa-copy .qa-copy-lab::after { content: "复制答案"; }
.qa-copy.copied .qa-copy-lab::after { content: "已复制"; }
.qa-dl { font-size: 12.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.qa-dl:hover { text-decoration: underline; }
.qa-m-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.qa-m-nav button {
  appearance: none; border: 1px solid var(--line); background: #fff; color: var(--ink-2);
  border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.qa-m-nav button:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); }
.qa-m-nav button[disabled] { opacity: .4; cursor: default; }
.qa-m-pos { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }

@media (max-width: 760px) {
  .qa-m-two { grid-template-columns: 1fr; gap: 18px; }
  .qa-m-text, .qa-m-img { max-height: none; }
}

/* ---------- 直播 ---------- */
.tier-note {
  display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: var(--radius);
  background: var(--paper-2); font-size: 13.5px; margin-bottom: 26px;
}
.tier-note b { color: var(--accent); }
.live-flow { counter-reset: lf; display: grid; gap: 12px; }
.lf-step {
  display: flex; gap: 16px; padding: 18px 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff; align-items: flex-start;
}
.lf-step::before {
  counter-increment: lf; content: counter(lf, decimal-leading-zero);
  font-size: 19px; font-weight: 900; color: var(--accent); line-height: 1.2;
}
.lf-step b { display: block; font-size: 15px; font-weight: 900; }
.lf-step p { font-size: 13px; color: var(--ink-3); margin-top: 4px; }

/* ---------- 直播·日常 vs 活动 对照框架（参照 PPT slide3） ---------- */
.cards3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
/* 两栏面板：用 subgrid 让两边的「页眉 / 支持 / 品牌需提供」三行对齐——中间分隔线与底部线两边齐平 */
.lf-frame { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 0 20px; }
@media (max-width: 760px) { .lf-frame { grid-template-columns: 1fr; grid-template-rows: none; } }
.lf-pane { grid-row: span 3; display: grid; grid-template-rows: subgrid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
@media (max-width: 760px) { .lf-pane { grid-row: auto; grid-template-rows: none; } }
.lf-pane-h {
  background: #fff; color: var(--ink); font-weight: 800; font-size: 15px;
  padding: 14px 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.lf-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; padding: 3px 10px; border-radius: 999px; }
.lf-tag.all { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line); }
.lf-tag.strat { background: var(--accent); color: #fff; }
.lf-pane-body { display: grid; grid-template-columns: 1fr; gap: 0; flex: 1; }
.lf-col { padding: 16px 18px 18px; }
.lf-col + .lf-col { border-top: 1px solid var(--line); }
.lf-col-h { font-size: 13px; font-weight: 900; color: var(--accent); margin-bottom: 12px; }
.lf-col-h i { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); margin-top: 3px; }
.lf-brand .lf-col-h { color: var(--ink); }
.lf-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.lf-list li { display: grid; gap: 2px; padding-left: 18px; position: relative; }
.lf-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
.lf-support .lf-list li::before { background: var(--ok); }
.lf-list li b { font-size: 13px; font-weight: 800; }
.lf-list li span { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.lf-pane.locked .lf-pane-h { opacity: 0.7; }
.lf-locked { padding: 40px 24px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.lf-locked b { font-size: 16px; font-weight: 900; }
.lf-locked p { font-size: 13px; color: var(--ink-3); margin-top: 10px; line-height: 1.7; }

/* 品牌大使卡 */
.amb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.amb-card { display: flex; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: #fff; }
.amb-av { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 17px; }
.amb-body b { font-size: 16px; font-weight: 900; }
.amb-body p { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; line-height: 1.65; }

/* 赠品卡 */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.gift-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; background: #fff; text-align: center; }
.gift-ic { font-size: 34px; }
.gift-card b { display: block; font-size: 15px; font-weight: 900; margin-top: 10px; }
.gift-card p { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

/* ---------- 资料库 ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.doc-card {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff;
  transition: 0.18s; display: block;
}
.doc-card:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.06); }
.doc-card img { aspect-ratio: 16/9; object-fit: cover; width: 100%; border-bottom: 1px solid var(--line); }
.doc-card .dc-body { padding: 18px 20px; }
.doc-card b { font-size: 16.5px; font-weight: 900; }
.doc-card .st { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }

.viewer { background: var(--ink); border-radius: var(--radius); overflow: hidden; }
.viewer-stage { position: relative; }
.viewer-stage img { width: 100%; }
.viewer-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; color: #fff;
}
.viewer-bar .vb-pg { font-weight: 800; font-size: 13px; letter-spacing: 0.08em; }
.vbtn {
  background: rgba(255,255,255,0.12); color: #fff; border: 0; border-radius: 8px;
  padding: 9px 18px; font-weight: 800; font-size: 13px;
}
.vbtn:hover { background: var(--accent); }
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 16px 16px; }
.thumbs img {
  height: 56px; border-radius: 4px; opacity: 0.55; cursor: pointer; flex: 0 0 auto;
  border: 2px solid transparent;
}
.thumbs img.on { opacity: 1; border-color: var(--accent); }

/* ---------- demo 页容器 ---------- */
.demo-shell { background: var(--paper-2); border-radius: var(--radius); padding: clamp(12px, 3vw, 36px); }
/* 页面外层已有标题与简介，隐藏组件内重复的标题区，仅保留右侧操作提示 */
.demo-shell .gtx-demo-head-main, .dslide-demo .gtx-demo-head-main { display: none; }
.demo-shell .gtx-demo .gtx-demo-head, .dslide-demo .gtx-demo .gtx-demo-head {
  justify-content: flex-end; border-bottom: 0; padding-bottom: 0; margin-bottom: 10px;
}
.demo-steps { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.demo-steps .ds {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 16px 18px;
}
.demo-steps .ds b { font-size: 14px; font-weight: 900; display: block; }
.demo-steps .ds p { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.req-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* ---------- 页脚（极简：菱形 + GORE-TEX® 标识） ---------- */
.ft { background: var(--ink); color: #fff; margin-top: 80px; }
.ft-in {
  max-width: var(--maxw); margin: 0 auto; padding: 40px 20px 38px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.ft-logo { width: 40px; height: 40px; object-fit: contain; opacity: 0.92; }
.ft-brand { font-weight: 900; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.ft-brand i { font-style: normal; }

/* ---------- 在线表单 ---------- */
.mode-btn {
  font-size: 12.5px; font-weight: 700; padding: 7px 15px; border-radius: 999px;
  background: transparent; color: var(--ink); border: 1.5px solid var(--ink);
  white-space: nowrap; letter-spacing: 0.04em;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.mode-btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.gtx-form { display: grid; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; background: #fff; }
.gtx-form .ff label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.gtx-form .ff input, .gtx-form .ff textarea, .gtx-form .ff select {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 14px; background: #fff;
}
.gtx-form .ff textarea { min-height: 92px; resize: vertical; }
.gtx-form .ff input:focus, .gtx-form .ff textarea:focus, .gtx-form .ff select:focus { outline: none; border-color: var(--ink); }
.form-msg { font-size: 13px; color: var(--ink-3); min-height: 1.2em; }
.form-msg.err { color: var(--accent); font-weight: 700; }
.form-done { text-align: center; padding: 30px 10px; }
.form-done b { font-size: 19px; color: var(--ok); }
.form-done p { color: var(--ink-3); margin: 12px 0 22px; font-size: 13.5px; }

/* ---------- 登录门禁 ---------- */
body.gate-on .hd, body.gate-on .ft { display: none; }
.gate {
  position: fixed; inset: 0; z-index: 200; background: var(--ink);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.gate::after {
  content: ""; position: absolute; right: -120px; top: -120px; width: 460px; height: 460px;
  background: radial-gradient(closest-side, rgba(200,16,46,0.45), transparent 70%); pointer-events: none;
}
.gate-card {
  position: relative; z-index: 1; width: 380px; max-width: 100%;
  background: #fff; border-radius: 16px; padding: 42px 38px 30px;
  display: flex; flex-direction: column; gap: 14px;
}
.gate-logo { width: 86px; height: 86px; object-fit: contain; margin: -6px auto 4px; display: block; }
.gate-brand { font-weight: 900; font-size: 22px; letter-spacing: 0.02em; text-align: center; }
.gate-brand i { font-style: normal; }
.gate-card .gate-sub { text-align: center; }
.gate-sub { font-size: 12px; color: var(--ink-3); letter-spacing: 0.22em; font-weight: 700; margin: -6px 0 10px; }
.gate-card input {
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 9px; font-size: 14.5px; font-family: inherit;
}
.gate-card input:focus { outline: none; border-color: var(--ink); }
.gate-err { color: var(--accent); font-size: 13px; font-weight: 700; min-height: 1.2em; margin: 0; }
.gate-foot { font-size: 10.5px; color: var(--ink-3); line-height: 1.6; margin-top: 8px; }

/* ---------- 占位 / 状态 ---------- */
.loading { padding: 80px 20px; text-align: center; color: var(--ink-3); font-weight: 600; letter-spacing: 0.15em; }
.empty { padding: 40px; text-align: center; color: var(--ink-3); border: 1.5px dashed var(--line); border-radius: var(--radius); }

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .nav { display: none; }
  .burger { display: flex; }
  .section { padding: 40px 0; }
  .hero-in { padding: 64px 20px 56px; }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .cat-card p { display: none; }
  .cat-card { padding: 18px 16px; }
  .cat-card b { font-size: 17px; }
  .brand-sub { display: none; }
  .rules-board { grid-template-columns: 1fr; }
}

/* 手机端提示：暂未适配，请在电脑上观看（≤640px 显示，覆盖全站） */
.mgate { display: none; }
@media (max-width: 640px) {
  .mgate {
    display: flex; position: fixed; inset: 0; z-index: 99999;
    align-items: center; justify-content: center; text-align: center;
    padding: 28px; background: #fff; border-top: 4px solid var(--accent);
  }
  .mgate-card { max-width: 320px; }
  .mgate-logo { width: 124px; height: auto; margin: 0 auto 26px; display: block; }
  .mgate-ic { font-size: 44px; line-height: 1; margin-bottom: 18px; }
  .mgate-h { font-size: 21px; font-weight: 800; color: var(--ink); margin: 0 0 12px; letter-spacing: .01em; }
  .mgate-p { font-size: 14px; line-height: 1.7; color: var(--ink-2); margin: 0; }
  /* 提示展示时锁住背后滚动 */
  body:has(.mgate) { overflow: hidden; }
}

/* ==========================================================================
   首页改版 · 引导式落地页（redesign-gtx-one）
   暗色 hero + 搜索 + 角色入口卡片 + 使用指南弹窗
   ========================================================================== */

/* ---------- 影像化 Hero（cinematic）---------- */
.home-hero {
  position: relative;
  color: #fff;
  overflow: hidden;
  min-height: clamp(460px, 64vh, 680px);
  display: flex; align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.home-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(10,10,12,0.66) 0%, rgba(10,10,12,0.74) 55%, rgba(10,10,12,0.9) 100%),
    url(/assets/site/brand/hero-fabric.jpg);
  background-size: cover; background-position: center;
}
.home-hero-in {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
  padding: clamp(64px, 10vw, 120px) 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.home-hero-logo {
  width: clamp(58px, 7vw, 76px); height: auto;
  margin-bottom: 28px;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.5));
}
.home-hero-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.66); margin-bottom: 22px;
}
.home-hero-h1 {
  font-size: clamp(34px, 5.6vw, 58px); font-weight: 900; letter-spacing: -0.015em;
  line-height: 1.06; color: #fff; margin: 0;
  text-shadow: 0 2px 30px rgba(0,0,0,0.35);
}
.home-hero-en {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-top: 16px;
}
.home-hero-lead {
  font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,0.82);
  max-width: 600px; margin: 24px auto 0;
}

/* 搜索 pill —— 玻璃质感，浮在照片上 */
.home-search {
  position: relative; width: 100%; max-width: 540px; margin: 36px auto 0;
}
.home-search-ic {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  font-size: 16px; opacity: 0.7; pointer-events: none;
}
.home-search input {
  width: 100%; height: 56px;
  padding: 0 22px 0 52px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  color: #fff; font-size: 15.5px; font-family: inherit;
  transition: 0.18s;
}
.home-search input::placeholder { color: rgba(255,255,255,0.6); }
.home-search input:focus {
  outline: none;
  border-color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.16);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
}
.home-search input::-webkit-search-cancel-button { filter: invert(0.85); }

.home-hero-acts {
  margin-top: 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
}
.home-guide-btn {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  color: #fff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px; padding: 12px 26px; transition: 0.18s;
}
.home-guide-btn:hover { filter: brightness(1.1); }
.home-scroll-link {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.78);
  letter-spacing: 0.04em; transition: 0.15s;
}
.home-scroll-link:hover { color: #fff; }

/* ---------- 影像化角色入口卡片 ---------- */
.home-roles { padding: clamp(56px, 8vw, 96px) 0; }
.home-roles-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.home-roles-head { text-align: center; margin-bottom: clamp(32px, 4vw, 48px); }
.home-roles-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.home-roles-title {
  font-size: clamp(24px, 3vw, 34px); font-weight: 900; letter-spacing: -0.01em;
  color: var(--ink); margin: 0;
}
.role-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.role-card {
  position: relative; display: block;
  aspect-ratio: 10 / 13;
  border-radius: 12px; overflow: hidden;
  background-color: #15151a;
  background-size: cover; background-position: center;
  transition: transform 0.5s cubic-bezier(.2,.8,.3,1);
  isolation: isolate;
}
.role-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: inherit; background-size: cover; background-position: center;
  transition: transform 0.6s cubic-bezier(.2,.8,.3,1);
}
.role-card .role-card-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,12,0.05) 0%, rgba(10,10,12,0.25) 45%, rgba(10,10,12,0.84) 100%);
  transition: 0.3s;
}
.role-card:hover { transform: translateY(-4px); }
.role-card:hover::before { transform: scale(1.06); }
.role-card:hover .role-card-shade {
  background: linear-gradient(180deg, rgba(10,10,12,0.1) 0%, rgba(10,10,12,0.35) 45%, rgba(10,10,12,0.9) 100%);
}
.role-card-idx {
  position: absolute; top: 16px; left: 18px; z-index: 2;
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.85);
}
.role-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding: 22px 20px 22px;
  color: #fff;
}
.role-card-en {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: 7px;
}
.role-card-t { font-size: 18px; font-weight: 900; letter-spacing: 0.01em; color: #fff; }
.role-card-d {
  font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.8); margin-top: 9px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.role-card:hover .role-card-d { max-height: 80px; opacity: 1; }
.role-card-go {
  margin-top: 14px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.05em;
  color: #fff; transition: 0.15s;
}
.role-card:hover .role-card-go { color: var(--accent); }

.role-second {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: center;
  padding-top: 26px; border-top: 1px solid var(--line);
}
.role-second a {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); transition: 0.15s;
}
.role-second a:hover { color: var(--accent); }

/* ---------- 影像化收尾横幅 ---------- */
.home-band {
  position: relative; overflow: hidden;
  min-height: clamp(280px, 36vw, 420px);
  display: flex; align-items: center; justify-content: center; text-align: center;
  background-image:
    linear-gradient(180deg, rgba(10,10,12,0.6), rgba(10,10,12,0.7)),
    url(/assets/site/brand/climbing.jpg);
  background-size: cover; background-position: center;
}
.home-band-in { position: relative; z-index: 1; padding: 40px 24px; }
.home-band-kicker {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 16px;
}
.home-band-line {
  font-size: clamp(22px, 3.4vw, 36px); font-weight: 900; letter-spacing: -0.01em;
  color: #fff; margin: 0; text-shadow: 0 2px 30px rgba(0,0,0,0.4);
}

/* ---------- 使用指南弹窗 ---------- */
.guide-ov {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(10,10,12,0.6);
  backdrop-filter: blur(6px);
  animation: guideFade 0.18s ease;
}
@keyframes guideFade { from { opacity: 0; } to { opacity: 1; } }
.guide-card {
  position: relative; width: 100%; max-width: 440px;
  background: #fff; border-radius: 16px;
  padding: 36px 34px 30px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  animation: guidePop 0.2s cubic-bezier(.2,.8,.3,1);
}
@keyframes guidePop { from { transform: translateY(10px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.guide-skip {
  position: absolute; top: 18px; right: 20px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  background: none; border: 0; padding: 4px 6px; transition: 0.15s;
}
.guide-skip:hover { color: var(--ink); }
.guide-step-no {
  font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.guide-h { font-size: 21px; font-weight: 900; color: var(--ink); margin: 0 0 12px; letter-spacing: 0.01em; }
.guide-p { font-size: 14.5px; line-height: 1.75; color: var(--ink-2); margin: 0; }
.guide-dots { display: flex; gap: 8px; margin: 24px 0 22px; }
.guide-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line); transition: 0.2s; }
.guide-dot.on { background: var(--accent); width: 22px; }
.guide-acts { display: flex; gap: 12px; }
.guide-acts .btn { flex: 1; justify-content: center; padding: 12px 18px; }
.guide-acts .btn[disabled] { opacity: 0.4; cursor: default; }
.guide-acts .btn-line[disabled]:hover { border-color: var(--line); }

/* ---------- 落地页响应式 ---------- */
@media (max-width: 1080px) {
  .role-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .role-grid { grid-template-columns: 1fr; }
  .role-card { aspect-ratio: 16 / 10; }
  .role-card-d { max-height: 80px; opacity: 1; }
  .home-hero-acts { flex-direction: column; gap: 14px; }
  .guide-card { padding: 30px 24px 26px; }
}

/* ============ 悬浮全站目录（醒目品牌红 FAB + 暗色高级面板，对齐演示模式目录） ============ */
.map-dock{ position:fixed; right:28px; bottom:30px; z-index:200; display:block; }
body.deck-on .map-dock{ display:none !important; }   /* 演示模式隐藏 */
body.home-bare .map-dock{ display:none; }            /* 首页不显示快速菜单 */
body.req-locked .smg-lock{ opacity:.5; }             /* 未读完基础要求：素材分组灰显 */
body.req-locked .smg-lock h4::after{ content:"🔒"; margin-left:6px; font-size:11px; }

/* 醒目的圆形 FAB：品牌红 + 呼吸光环，引人注目 */
.map-fab{
  position:relative; z-index:2;
  width:58px; height:58px; border:none; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; font:inherit;
  box-shadow:0 12px 30px rgba(200,16,46,.42);
  transition:background .16s, transform .16s, box-shadow .16s;
}
.map-fab::before{ content:""; position:absolute; inset:0; border-radius:50%; animation:fabPulse 2.6s ease-out infinite; }
@keyframes fabPulse{ 0%{ box-shadow:0 0 0 0 rgba(200,16,46,.45); } 70%{ box-shadow:0 0 0 16px rgba(200,16,46,0); } 100%{ box-shadow:0 0 0 0 rgba(200,16,46,0); } }
@media (prefers-reduced-motion: reduce){ .map-fab::before{ animation:none; } }
.map-fab:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 18px 40px rgba(200,16,46,.5); }
.map-fab svg{ position:absolute; transition:opacity .18s, transform .18s; }
.map-fab .map-fab-ic-close{ opacity:0; transform:rotate(-45deg) scale(.7); }
.map-dock.open .map-fab{ background:var(--ink); box-shadow:0 12px 30px rgba(0,0,0,.34); }
.map-dock.open .map-fab::before{ animation:none; }
.map-dock.open .map-fab .map-fab-ic-open{ opacity:0; transform:rotate(45deg) scale(.7); }
.map-dock.open .map-fab .map-fab-ic-close{ opacity:1; transform:none; }
/* 悬停提示标签 */
.map-fab::after{
  content:attr(data-tip); position:absolute; right:70px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--ink); color:#fff; font-size:12px; font-weight:800; letter-spacing:.1em;
  padding:7px 13px; border-radius:8px; white-space:nowrap; pointer-events:none;
  opacity:0; transition:opacity .15s, transform .15s; box-shadow:0 6px 18px rgba(0,0,0,.22);
}
.map-fab:hover::after{ opacity:1; transform:translateY(-50%) translateX(0); }
.map-dock.open .map-fab::after{ opacity:0; }

/* 点击外部关闭的遮罩 */
.site-map-scrim{ position:fixed; inset:0; z-index:1; background:rgba(10,10,12,.22); opacity:0; transition:opacity .2s; }
.map-dock.open .site-map-scrim{ opacity:1; }

/* 暗色高级弹出面板（锚定 FAB 上方，气质对齐演示模式目录）*/
.site-map{
  position:absolute; right:0; bottom:76px; z-index:2; width:304px; max-height:78vh;
  display:flex; flex-direction:column;
  background:var(--ink); color:#fff; border-radius:16px;
  box-shadow:0 30px 64px -18px rgba(0,0,0,.6); overflow:hidden; transform-origin:bottom right;
  opacity:0; transform:translateY(12px) scale(.95); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.map-dock.open .site-map{ opacity:1; transform:none; pointer-events:auto; }
.site-map-head{ flex:none; display:flex; align-items:center; gap:10px; padding:16px 18px 13px; border-bottom:1px solid rgba(255,255,255,.12); }
.site-map-head::before{ content:""; width:18px; height:18px; flex:none; background:url(/assets/site/gt-brand.svg) center/contain no-repeat; }
.site-map-t{ font-weight:900; font-size:14px; letter-spacing:.04em; color:#fff; }
.site-map-t i{ font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.24em; color:rgba(255,255,255,.45); margin-left:8px; }
.site-map-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:6px 8px 10px; }
/* 章节分组 */
.smg{ padding:7px 0 4px; }
.smg + .smg{ border-top:1px solid rgba(255,255,255,.08); }
.smg h4{ margin:6px 12px 4px; font-size:10px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.site-map-body a{
  display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:8px;
  color:rgba(255,255,255,.8); font-size:13.5px; font-weight:600; text-decoration:none; line-height:1.35;
  transition:background .14s, color .14s;
}
.site-map-body a::before{ content:""; width:5px; height:5px; flex:none; border-radius:50%; background:var(--accent); opacity:0; transition:opacity .14s; }
.site-map-body a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.site-map-body a:hover::before{ opacity:1; }
.site-map-body a.smg-grp{ font-weight:800; color:#fff; }
.site-map-body a.smg-grp::before{ display:none; }
.site-map-body a.smg-sub{ padding:6px 14px 6px 38px; font-size:12.5px; color:rgba(255,255,255,.62); }
.site-map-body a.smg-sub::before{ display:none; }
/* 暗色面板滚动条 */
.site-map-body::-webkit-scrollbar{ width:8px; }
.site-map-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px; }

/* ============ 下载门槛弹窗（首次必看使用规范） ============ */
.dlgate{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,12,.55); backdrop-filter:blur(3px); padding:24px; }
.dlgate-card{ background:#fff; width:100%; max-width:660px; max-height:86vh; border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.dlgate-head{ padding:24px 28px 16px; border-bottom:1px solid var(--line); }
.dlgate-kicker{ display:block; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.dlgate-title{ margin:7px 0 0; font-size:21px; font-weight:900; color:var(--text); }
.dlgate-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:20px 28px; }
.dlgate-lead{ margin:0 0 16px; font-size:13.5px; color:var(--text-2); line-height:1.7; }
.dlg-step{ padding:13px 16px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:var(--paper-2); }
.dlg-step b{ display:block; font-size:14px; font-weight:800; color:var(--text); margin-bottom:4px; }
.dlg-step p{ margin:0; font-size:13px; color:var(--text-2); line-height:1.7; }
.dlgate-foot{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 28px; border-top:1px solid var(--line); background:#fff; flex-wrap:wrap; }
.dlgate-pdf{ font-size:12.5px; font-weight:700; color:var(--text-2); text-decoration:none; }
.dlgate-pdf:hover{ color:var(--accent); }
.dlgate-acts{ display:flex; gap:10px; align-items:center; }
.dlgate-cancel{ background:none; border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font:inherit; font-size:13px; font-weight:700; color:var(--text-2); cursor:pointer; }
.dlgate-cancel:hover{ border-color:var(--ink-3, #888); color:var(--text); }
.dlgate-ok{ background:var(--accent); color:#fff; border:none; border-radius:999px; padding:10px 22px;
  font:inherit; font-size:13px; font-weight:800; cursor:pointer; transition:opacity .15s, background .15s; }
.dlgate-ok:disabled{ background:#cfcfcc; color:#fff; cursor:default; }

/* ============ 使用手册页 ============ */
.guide-card{ display:block; text-decoration:none; transition:border-color .15s, transform .15s; }
.guide-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.guide-card .role-card-en{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.16em; color:var(--text-2); margin-bottom:6px; }
.guide-card b{ display:block; font-size:15px; color:var(--text); }
.guide-card p{ margin:6px 0 10px; font-size:12.5px; color:var(--text-2); line-height:1.6; }
.guide-go{ font-size:12px; font-weight:800; color:var(--accent); }
.guide-pdf-row{ margin-top:14px; }
.guide-pdf{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:999px;
  background:var(--accent); color:#fff; font-weight:800; font-size:13.5px; text-decoration:none; transition:opacity .15s; }
.guide-pdf:hover{ opacity:.9; }

/* ============ 首页：影院级 HERO + 角色入口（视觉 / 直播 / 客服） ============ */
/* 首页：彻底隐藏 header / footer（裸页门户，导航靠磁贴 + 浮动菜单） */
body.home-bare .hd, body.home-bare .ft{ display:none; }

/* 首页顶部细行：品牌 logo + 演示模式入口（补回被隐藏 header 的两件事） */
.home-top{ display:flex; align-items:center; gap:16px; padding-top:clamp(22px,3vw,38px); }
.home-logo{ height:clamp(42px,4.4vw,60px); width:auto; }

/* 首页页眉（编辑式·无大图，左对齐，磁贴为主角） */
.home-head{ margin:clamp(26px,3.4vw,42px) 0 clamp(26px,3.4vw,42px); }
.home-head-kicker{
  font-size:clamp(11px,1.2vw,12px); font-weight:800; letter-spacing:.26em; text-transform:uppercase; color:var(--accent);
}
.home-head-title{
  margin:14px 0 0; font-size:clamp(38px,5.4vw,64px); font-weight:900; line-height:1.04; letter-spacing:.01em; color:var(--text);
}

/* 角色入口区 */
.roles2{ padding: clamp(40px,5vw,72px) 0 clamp(56px,7vw,96px); background:var(--paper); }
.roles2-wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.roles2-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(18px,2.4vw,30px); }
.roles2-grid .rtile{ flex:1 1 280px; max-width:380px; }
@media (max-width: 860px){ .roles2-grid .rtile{ flex-basis:100%; max-width:none; } }

/* 首页一屏铺满（无 header/footer，内容撑满视口，磁贴填充剩余高度，不滚动） */
body.home-bare .app{ min-height:100dvh; display:flex; flex-direction:column; }
body.home-bare .roles2{ flex:1; display:flex; flex-direction:column; padding:0 0 clamp(22px,3vw,40px); }
body.home-bare .roles2-wrap{ flex:1; display:flex; flex-direction:column; width:100%; }
body.home-bare .home-head{ margin:clamp(16px,2.4vw,30px) 0 clamp(18px,2.6vw,32px); }
body.home-bare .roles2-grid{ flex:1; align-items:flex-start; }
body.home-bare .roles2-grid .rtile{ aspect-ratio:auto; min-height:0; height:clamp(220px,48vh,440px); }
/* 矮屏：压缩首页留白，保证一屏不滚动 */
@media (max-height:640px){
  body.home-bare .home-top{ padding-top:14px; }
  body.home-bare .home-head{ margin:12px 0 12px; }
  body.home-bare .home-logo{ height:36px; }
  body.home-bare .roles2-grid .rtile{ height:clamp(180px,40vh,300px); }
}

/* 首页可切换背景（雪山 AVIF 轮播）+ 深底前景 + 玻璃磁贴 */
body.home-bare .roles2{ position:relative; background:#0a0a0c; }
.home-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.home-bg-im{ position:absolute; inset:0; background:center/cover no-repeat; opacity:0; transition:opacity 1.4s ease; will-change:opacity; }
.home-bg-im.is-on{ opacity:1; }
.home-bg-shade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,9,12,.56) 0%, rgba(8,9,12,.30) 38%, rgba(8,9,12,.74) 100%); }
body.home-bare .roles2-wrap{ position:relative; z-index:2; }
body.home-bare .home-head-kicker{ color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.6); }
body.home-bare .home-head-title{ color:#fff; text-shadow:0 4px 28px rgba(0,0,0,.5), 0 1px 6px rgba(0,0,0,.5); }
body.home-bare .home-logo{ filter:drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
/* 深背景上的照片卡片：仅加强阴影做分离 */
body.home-bare .rtile{ box-shadow:0 26px 64px -30px rgba(0,0,0,.85); }

.rtile{
  position:relative; display:block; aspect-ratio:4/5; min-height:340px; border-radius:18px; overflow:hidden;
  text-decoration:none; isolation:isolate;
  box-shadow:0 16px 40px -22px rgba(0,0,0,.55); transition:transform .26s ease, box-shadow .26s ease;
}
.rtile-img{
  position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  transition:transform .55s cubic-bezier(.2,.6,.2,1);
}
.rtile:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -24px rgba(0,0,0,.6); }
.rtile:hover .rtile-img{ transform:scale(1.07); }
.rtile-shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,10,12,.08) 0%, rgba(10,10,12,.34) 48%, rgba(10,10,12,.90) 100%);
}
.rtile-en{
  position:absolute; z-index:2; top:22px; left:24px;
  font-size:11px; font-weight:800; letter-spacing:.24em; color:rgba(255,255,255,.85);
}
.rtile-main{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:26px 24px 28px; color:#fff; }
.rtile-t{ display:block; font-size:clamp(26px,2.6vw,32px); font-weight:900; letter-spacing:.02em; }
.rtile-go{
  display:inline-block; margin-top:14px; font-size:13px; font-weight:800; letter-spacing:.04em; color:#fff;
  transition:color .16s, transform .16s;
}
.rtile:hover .rtile-go{ color:#ff5f76; transform:translateX(3px); }

/* 「视觉」二级标签条（粘在 header 下方） */
.vtabs{ position:sticky; top:var(--hd-h); z-index:90; background:rgba(255,255,255,.96); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.vtabs-in{ max-width:var(--maxw); margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:22px; height:var(--vtabs-h); }
.vtabs-label{ flex:none; font-size:13px; font-weight:900; color:var(--text); text-decoration:none; }
.vtabs-label:hover{ color:var(--accent); }
.vtabs-label i{ font-style:normal; font-size:10px; font-weight:800; letter-spacing:.18em; color:var(--text-2); margin-left:7px; }
.vtabs-nav{ display:flex; align-items:center; gap:2px; height:100%; overflow:visible; }
.vtabs-grp{ flex:none; align-self:center; font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--text-2); padding:0 6px 0 8px; }
.vtabs-div{ flex:none; align-self:center; width:1px; height:18px; background:var(--line); margin:0 8px; }
.vtab{ display:flex; align-items:center; white-space:nowrap; padding:0 12px; height:100%; font-size:14px; font-weight:700; color:var(--text-2); text-decoration:none; border-bottom:2px solid transparent; transition:color .15s, border-color .15s; }
.vtab:hover{ color:var(--text); }
.vtab.on{ color:var(--accent); border-bottom-color:var(--accent); font-weight:800; }

/* 视觉 hub 子分类卡 */
.hub-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 820px){ .hub-grid{ grid-template-columns: 1fr; } }
.hub-card{ display:block; border:1px solid var(--line); border-radius: 12px; padding: 24px 22px 20px; background:#fff;
  text-decoration:none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.hub-card:hover{ border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 16px 32px -20px rgba(0,0,0,.3); }
.hub-idx{ font-size: 12px; font-weight: 900; color: var(--accent); }
.hub-en{ display:block; font-size: 10.5px; font-weight: 800; letter-spacing:.16em; color: var(--text-2); margin-top: 10px; }
.hub-t{ display:block; font-size: 18.5px; font-weight: 900; color: var(--text); margin-top: 4px; }
.hub-d{ font-size: 13px; color: var(--text-2); line-height: 1.7; margin: 9px 0 14px; }
.hub-go{ font-size: 13px; font-weight: 800; color: var(--accent); }

/* ============ 两级左导航（按产品：品类 → 科技）============ */
.side-nav-2 .side-grp { margin-bottom: 6px; }
.side-grp-h .sl-cn { font-weight: 800; }
/* 直播分组标题（日常直播支持 / 直播活动支持） */
.side-grp-t { padding: 4px 12px 8px; font-size: 12.5px; font-weight: 900; letter-spacing: .02em; color: var(--text); }
.side-nav-2 .side-grp + .side-grp .side-grp-t { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
/* 产品页左栏：当前品类标题不抢"选中"高亮（去掉灰底块/红边/红字），真正的选中由子项红条表示 */
.side-nav-2 .side-grp-h.on { background: transparent; border-left-color: transparent; }
.side-nav-2 .side-grp-h.on .sl-cn { color: var(--text); }
.side-nav-2 .side-grp-h.on .sl-en { color: var(--text-2); }
.side-sub { margin: 2px 0 6px; }
.side-sublink {
  display: block; padding: 6px 12px 6px 32px; font-size: 13px; line-height: 1.4;
  color: var(--text-2); text-decoration: none; border-left: 2px solid transparent;
  transition: color .14s, border-color .14s, background .14s; border-radius: 0 6px 6px 0;
}
.side-sublink:hover { color: var(--text); background: var(--paper-2); }
.side-sublink.on { color: var(--accent); border-left-color: var(--accent); font-weight: 700; background: var(--paper-2); }
/* 窄屏：两级导航也走横向 chip 行（沿用 side-nav 的响应式），科技子项缩进取消 */
@media (max-width: 860px) {
  .side-nav-2 .side-sub { display: flex; flex-wrap: wrap; gap: 6px; }
  .side-sublink { padding: 5px 12px; border: 1px solid var(--line); border-left-width: 1px; border-radius: 999px; }
  .side-sublink.on { border-color: var(--accent); }
}

/* footer 版权行 */
.ft-copy { margin: 10px 0 0; font-size: 11.5px; color: var(--text-2); line-height: 1.6; max-width: 640px; }

/* footer：极简 + 矮（覆盖前面规则）*/
.ft { background: var(--ink); color: #fff; margin-top: 56px; padding: 12px 22px 13px; text-align: center; }
.ft-copy { margin: 0; max-width: none; font-size: 11px; line-height: 1.5; color: rgba(255,255,255,.42); }

/* ============ 首次必看门禁页（基础要求 Guidelines Gate）============ */
body.gate-on .map-dock{ display:none !important; }
.gguide{ min-height:100dvh; display:flex; align-items:flex-start; justify-content:center; background:var(--paper-2); padding:clamp(20px,5vh,56px) 20px; }
.gguide-card{ background:#fff; width:100%; max-width:800px; border-radius:18px; box-shadow:0 30px 80px -24px rgba(0,0,0,.3);
  display:flex; flex-direction:column; max-height:calc(100dvh - 64px); overflow:hidden; }
.gguide-head{ display:flex; gap:16px; align-items:flex-start; padding:26px 32px 18px; border-bottom:1px solid var(--line); }
.gguide-logo{ width:46px; height:46px; flex:none; }
.gguide-kicker{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.gguide-title{ font-size:clamp(19px,2.6vw,25px); font-weight:900; margin:7px 0 0; color:var(--text); line-height:1.3; }
.gguide-sub{ font-size:13px; color:var(--text-2); margin:9px 0 0; line-height:1.7; }
.gguide-body{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:22px 32px; }
.gguide-h2{ font-size:13px; font-weight:900; letter-spacing:.04em; color:var(--text); margin:2px 0 13px; padding-left:10px; border-left:3px solid var(--accent); }
.gg-rules{ display:grid; gap:10px; margin-bottom:26px; }
.gg-rule{ display:flex; gap:12px; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:var(--paper-2); }
.gg-lv{ flex:none; height:fit-content; font-size:10px; font-weight:800; padding:2px 8px; border-radius:5px; color:#fff; letter-spacing:.04em; }
.gg-lv-req{ background:var(--accent); } .gg-lv-no{ background:#0e0e10; } .gg-lv-rec{ background:#8a8a86; }
.gg-rule b{ font-size:13.5px; color:var(--text); } .gg-rule p{ margin:4px 0 0; font-size:12.5px; color:var(--text-2); line-height:1.65; }
.gg-pages{ list-style:none; padding:0; margin:0 0 16px; display:grid; gap:6px; }
.gg-pages li{ display:flex; align-items:baseline; gap:10px; padding:9px 14px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-weight:700; color:var(--text); }
.gg-pages .gg-no{ font-size:11px; font-weight:900; color:var(--accent); flex:none; }
.gg-pages i{ font-style:normal; font-size:11px; font-weight:600; letter-spacing:.1em; color:var(--text-2); margin-left:auto; }
.gguide-note{ font-size:12px; color:var(--text-2); margin:6px 0 0; line-height:1.6; }
.gguide-foot{ flex:none; padding:16px 32px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; background:#fff; }
.gguide-ok{ background:var(--accent); color:#fff; border:none; border-radius:999px; padding:13px 32px; font:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:opacity .15s, background .15s; }
.gguide-ok:disabled{ background:#cfcfcc; cursor:default; }

/* ============ 「先读基础要求」提示 + 解锁条 ============ */
.rfgate{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(10,10,12,.55); backdrop-filter:blur(3px); }
.rfgate-card{ background:#fff; width:100%; max-width:420px; border-radius:16px; padding:30px 28px 24px; text-align:center;
  box-shadow:0 30px 70px -22px rgba(0,0,0,.4); }
.rfgate-ic{ font-size:34px; line-height:1; }
.rfgate-h{ margin:14px 0 0; font-size:18px; font-weight:900; color:var(--text); }
.rfgate-p{ margin:10px 0 0; font-size:13px; color:var(--text-2); line-height:1.75; }
.rfgate-acts{ display:flex; gap:10px; justify-content:center; margin-top:22px; }
.rfgate-cancel{ background:none; border:1px solid var(--line); border-radius:999px; padding:11px 20px; font:inherit; font-size:13px; font-weight:700; color:var(--text-2); cursor:pointer; }
.rfgate-cancel:hover{ color:var(--text); border-color:var(--text-2); }
.rfgate-go{ background:var(--accent); color:#fff; border-radius:999px; padding:11px 22px; font-size:13px; font-weight:800; text-decoration:none; }
.rfgate-go:hover{ opacity:.9; }

.gx-unlockbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  margin-top:26px; padding:16px 20px; border-radius:12px; background:var(--ink); color:#fff; }
.gx-unlocktxt{ font-size:13.5px; font-weight:700; color:rgba(255,255,255,.9); }
.gx-unlock{ background:var(--accent); color:#fff; border:none; border-radius:999px; padding:11px 22px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; transition:opacity .15s; }
.gx-unlock:hover{ opacity:.9; }
.gx-unlocked{ font-size:13.5px; font-weight:800; color:#fff; }
.gx-progress{ font-size:14px; font-weight:800; color:#fff; }
.gx-progress b{ font-size:16px; color:#fff; }
.gx-unlockhint{ font-size:12px; font-weight:600; color:rgba(255,255,255,.6); }
.gx-unlockbar.gx-done{ background:var(--ok); }
/* 左栏已读标记 */
.sl-done{ font-style:normal; color:var(--ok); font-weight:900; font-size:12px; margin-left:6px; }
.side-link.on .sl-done{ color:var(--accent); }

/* ============ 使用向导（单面板：一句话 + 几个按钮）============ */
.guide-kicker{ font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.guide-lead{ margin:10px 0 0; font-size:14px; color:var(--text-2); line-height:1.7; }
.guide-btns{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.guide-btn{ display:flex; align-items:center; justify-content:center; padding:13px 14px; border-radius:10px;
  border:1px solid var(--line); background:#fff; color:var(--text); font-size:14px; font-weight:700; text-decoration:none;
  transition:border-color .14s, transform .14s; }
.guide-btn:hover{ border-color:var(--accent); transform:translateY(-1px); }
.guide-btn.primary{ grid-column:1 / -1; background:var(--accent); color:#fff; border-color:var(--accent); font-weight:800; }
.guide-btn.primary:hover{ opacity:.92; }
.site-map-body a.sm-guide{ color:var(--accent); font-weight:800; }
.site-map-body a.sm-guide::before{ background:var(--accent); opacity:1; }

/* ============ 首访 on-page 引导（coachmark：高亮真实元素 + 指示气泡）============ */
.tour-scrim{ position:fixed; inset:0; z-index:1000; cursor:pointer; }
.tour-spot{ position:fixed; z-index:1001; border-radius:10px; pointer-events:none;
  box-shadow:0 0 0 9999px rgba(10,10,12,.62); outline:2px solid rgba(255,255,255,.95); outline-offset:0;
  transition:top .26s ease, left .26s ease, width .26s ease, height .26s ease; }
.tour-tip{ position:fixed; z-index:1002; width:300px; max-width:calc(100vw - 24px);
  background:#fff; border-radius:13px; padding:16px 18px; box-shadow:0 20px 48px -16px rgba(0,0,0,.45);
  transition:top .26s ease, left .26s ease; }
.tour-t{ font-size:15px; font-weight:900; color:var(--text); }
.tour-p{ margin:7px 0 0; font-size:13px; color:var(--text-2); line-height:1.65; }
.tour-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:15px; }
.tour-dots{ display:flex; gap:6px; }
.tour-dot{ width:6px; height:6px; border-radius:50%; background:var(--line); }
.tour-dot.on{ background:var(--accent); }
.tour-acts{ display:flex; gap:6px; align-items:center; }
.tour-skip{ background:none; border:none; font:inherit; font-size:12px; color:var(--text-2); cursor:pointer; padding:6px 8px; }
.tour-skip:hover{ color:var(--text); }
.tour-next{ background:var(--accent); color:#fff; border:none; border-radius:999px; padding:9px 18px; font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
.tour-next:hover{ opacity:.92; }
.tour-num{ font-size:11px; font-weight:800; letter-spacing:.08em; color:var(--accent); margin-bottom:6px; }
.tour-back{ background:none; border:1px solid var(--line); border-radius:999px; font:inherit; font-size:12px; color:var(--text-2); cursor:pointer; padding:8px 13px; }
.tour-back:hover{ color:var(--text); border-color:var(--text-2); }
.tour-arrow{ position:absolute; width:14px; height:14px; background:#fff; transform:rotate(45deg); }
.tour-tip.on-bottom .tour-arrow{ top:-6px; }
.tour-tip.on-top .tour-arrow{ bottom:-6px; }
.tour-tip.on-right .tour-arrow{ left:-6px; }
.tour-tip.on-left .tour-arrow{ right:-6px; }