.page-privacy .privacy-hero {
  padding-bottom: clamp(24px, 3.4vw, 44px);
}

.page-privacy .privacy-hero-frame {
  max-width: 66ch;
}

.page-privacy .privacy-hero .eyebrow {
  color: var(--c-cyan);
  letter-spacing: .22em;
  font-size: var(--fs-micro);
}

.page-privacy .privacy-hero h1 {
  margin: 14px 0 18px;
  line-height: 1.08;
}

.page-privacy .privacy-hero .lede {
  color: var(--c-text);
  line-height: 1.8;
  max-width: 58ch;
}

.page-privacy .privacy-hero-note {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--c-purple);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.page-privacy .privacy-hero-media {
  margin: clamp(26px, 4vw, 46px) 0 0;
  border: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}

.page-privacy .privacy-hero-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-purple), var(--c-cyan) 55%, var(--c-orange));
  opacity: .9;
}

.page-privacy .privacy-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-privacy .divider {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 0;
}

.page-privacy .privacy-body {
  padding-top: clamp(30px, 4.6vw, 58px);
}

.page-privacy .privacy-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.page-privacy .privacy-index {
  border: 1px solid var(--c-line);
  background: var(--c-panel);
  padding: 16px 16px 18px;
}

.page-privacy .privacy-index-title {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  color: var(--c-muted);
}

.page-privacy .privacy-index-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.page-privacy .privacy-index-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  color: var(--c-muted);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.page-privacy .privacy-index-list a:hover,
.page-privacy .privacy-index-list a:focus-visible {
  color: var(--c-text);
  border-left-color: var(--c-purple);
  background: rgba(139, 92, 246, .12);
}

.page-privacy .privacy-index-num {
  flex: none;
  font-size: var(--fs-micro);
  color: var(--c-purple);
  letter-spacing: .08em;
}

.page-privacy .privacy-article {
  border-top: 1px solid var(--c-line);
  padding-top: clamp(22px, 3.2vw, 38px);
  margin-top: clamp(30px, 4.4vw, 54px);
  scroll-margin-top: calc(var(--header-h) + 28px);
}

.page-privacy .privacy-article:first-child {
  margin-top: 0;
  border-top-color: var(--c-purple);
}

.page-privacy .privacy-article-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--c-line);
  margin-bottom: 16px;
}

.page-privacy .privacy-article-head .section-title {
  margin: 0;
}

.page-privacy .privacy-num {
  flex: none;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  padding: 3px 7px;
  border: 1px solid var(--c-line);
  color: var(--c-muted);
}

.page-privacy #collect .privacy-article-head { border-left-color: var(--c-cyan); }
.page-privacy #collect .privacy-num { color: var(--c-cyan); border-color: rgba(34, 211, 238, .45); }

.page-privacy #use .privacy-article-head { border-left-color: var(--c-purple); }
.page-privacy #use .privacy-num { color: var(--c-purple); border-color: rgba(139, 92, 246, .5); }

.page-privacy #rights .privacy-article-head { border-left-color: var(--c-orange); }
.page-privacy #rights .privacy-num { color: var(--c-orange); border-color: rgba(251, 146, 60, .45); }

.page-privacy #cookies .privacy-article-head { border-left-color: var(--c-green); }
.page-privacy #cookies .privacy-num { color: var(--c-green); border-color: rgba(52, 211, 153, .45); }

.page-privacy #security .privacy-article-head { border-left-color: var(--c-amber); }
.page-privacy #security .privacy-num { color: var(--c-amber); border-color: rgba(245, 158, 11, .45); }

.page-privacy .privacy-article p {
  max-width: 68ch;
  color: var(--c-muted);
  line-height: 1.85;
  margin: 0 0 14px;
}

.page-privacy .privacy-article p a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, .45);
}

.page-privacy .privacy-article p a:hover,
.page-privacy .privacy-article p a:focus-visible {
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}

.page-privacy .privacy-list {
  list-style: none;
  margin: 18px 0 18px;
  padding: 0;
  max-width: 72ch;
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.page-privacy .privacy-list li {
  background: var(--c-panel);
  padding: 14px 16px;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--c-muted);
  transition: background var(--t-fast);
}

.page-privacy .privacy-list li:hover {
  background: var(--c-panel-2);
}

.page-privacy .privacy-list li strong {
  display: block;
  margin-bottom: 5px;
  color: var(--c-text);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: .01em;
}

.page-privacy .privacy-help {
  margin-top: clamp(24px, 3.2vw, 36px);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-orange);
  background: var(--c-panel);
  padding: clamp(18px, 2.6vw, 28px);
  max-width: 72ch;
}

.page-privacy .privacy-help-title {
  color: var(--c-text) !important;
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0 0 8px !important;
  line-height: 1.4;
}

.page-privacy .privacy-help-text {
  margin-bottom: 18px !important;
}

.page-privacy .privacy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 560px) {
  .page-privacy .privacy-index-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .page-privacy .privacy-layout {
    grid-template-columns: 216px minmax(0, 1fr);
  }

  .page-privacy .privacy-index {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-privacy .privacy-index-list {
    grid-template-columns: 1fr;
  }

  .page-privacy .privacy-articles {
    max-width: 860px;
  }
}

@media (min-width: 1180px) {
  .page-privacy .privacy-layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 64px;
  }

  .page-privacy .privacy-hero-frame {
    max-width: 72ch;
  }
}
<<<END>>>

<main id="main-content" class="page-privacy">

  <div class="wrap">
    <nav class="breadcrumbs" aria-label="面包屑导航">
      <a href="/">首页</a>
      <span class="breadcrumbs-sep" aria-hidden="true">/</span>
      <span aria-current="page">数据与隐私</span>
    </nav>
  </div>

  <section class="section privacy-hero" data-section>
    <div class="wrap">
      <div class="privacy-hero-frame">
        <p class="eyebrow mono">PRIVACY / 数据与隐私</p>
        <h1 class="display-1">在第一娱乐中心，您的信息被怎样收集与保护</h1>
        <p class="lede">从打开页面到进入分区，一些必要的信息会被记录下来，用来让内容归位、让服务稳定、让账号不被冒用。这一页把收集范围、使用目的、您可以提出的请求逐条讲清楚，遇到不明白的地方，也能找到对应的处理入口。</p>
        <p class="text-muted privacy-hero-note">本说明同时适用于网页端与 Android、iOS 移动端应用。</p>
      </div>

      <figure class="media media--21x9 privacy-hero-media">
        <img src="{zhanqunpic:h:400w:1200}" width="1200" height="400" alt="深黑底色上的抽象数据保护网格与锁形霓虹光轨">
      </figure>
    </div>
  </section>

  <div class="wrap"><hr class="divider"></div>

  <section class="section privacy-body">
    <div class="wrap privacy-layout">

      <aside class="privacy-index" aria-label="章节索引">
        <p class="privacy-index-title mono">索引 / INDEX</p>
        <ol class="privacy-index-list">
          <li><a href="#collect"><span class="privacy-index-num mono">01</span><span>我们收集哪些信息</span></a></li>
          <li><a href="#use"><span class="privacy-index-num mono">02</span><span>这些信息用来做什么</span></a></li>
          <li><a href="#rights"><span class="privacy-index-num mono">03</span><span>您可以行使的权利</span></a></li>
          <li><a href="#cookies"><span class="privacy-index-num mono">04</span><span>Cookie 与同类技术</span></a></li>
          <li><a href="#security"><span class="privacy-index-num mono">05</span><span>信息安全与联系</span></a></li>
        </ol>
      </aside>

      <div class="privacy-articles">

        <article class="privacy-article" id="collect" data-section>
          <header class="privacy-article-head">
            <span class="privacy-num mono">01</span>
            <h2 class="section-title">我们收集哪些信息</h2>
          </header>
          <p>我们只处理服务运行必需的部分，不做与娱乐内容浏览无关的采集。下面几类信息会在您使用过程中产生。</p>
          <ul class="privacy-list">
            <li>
              <strong>账号与登录凭证</strong>
              注册时填写的昵称、登录标识，以及用于身份校验的口令。口令以加密形式保存，任何环节都不会以明文形式展示。
            </li>
            <li>
              <strong>设备与运行环境</strong>
              机型、操作系统版本、应用版本号、系统语言与时区。这些数据帮助我们判断加载异常是否与特定机型或版本有关。
            </li>
            <li>
              <strong>内容偏好与使用记录</strong>
              您进入过的一级分区、功能点击位置、页面停留时长。它们决定了下次打开时哪些板块排得更靠前。
            </li>
            <li>
              <strong>网络与运行日志</strong>
              IP 地址、省份级别的粗略位置、访问时间与错误日志。这类信息主要用于排查加载失败和异常请求。
            </li>
            <li>
              <strong>您主动提供的内容</strong>
              通过客服邮箱、电话或留言提交的描述、截图与回访方式。只有您主动提交时才会产生。
            </li>
          </ul>
        </article>

        <article class="privacy-article" id="use" data-section>
          <header class="privacy-article-head">
            <span class="privacy-num mono">02</span>
            <h2 class="section-title">这些信息用来做什么</h2>
          </header>
          <p>信息只在下面这些具体目的内使用，不会拿去做与娱乐内容服务无关的用途。</p>
          <ul class="privacy-list">
            <li>
              <strong>维持大厅正常运转</strong>
              娱乐大厅现有 12 个一级分区，按即时与延时两类结算口径归位。运行数据帮助我们发现某个分区加载变慢或入口错位。
            </li>
            <li>
              <strong>让内容更快归位</strong>
              根据您常看的板块调整推荐顺序，减少每次重新寻找的步骤，打开就能看到想看的内容。
            </li>
            <li>
              <strong>支撑客服与排障</strong>
              当您反馈启动慢、页面打不开或结果对不上时，日志能帮我们更快定位到具体环节，而不是反复让您描述。
            </li>
            <li>
              <strong>账号与访问安全</strong>
              识别批量请求、异地异常登录等风险行为，降低账号被冒用的可能性。
            </li>
            <li>
              <strong>服务与体验改进</strong>
              汇总启动速度、路径跳转、功能使用等统计指标，用于版本迭代中的优先排序。
            </li>
          </ul>
        </article>

        <article class="privacy-article" id="rights" data-section>
          <header class="privacy-article-head">
            <span class="privacy-num mono">03</span>
            <h2 class="section-title">您可以行使的权利</h2>
          </header>
          <p>对与您本人相关的信息，您有以下几项可以随时提出的请求。</p>
          <ul class="privacy-list">
            <li>
              <strong>查询与获取</strong>
              询问我们保存了哪些与您账号相关的信息，以及这些信息被用于哪个环节。
            </li>
            <li>
              <strong>更正</strong>
              昵称、绑定方式等出现错漏时，可以要求更正，也可以自行在账号设置中修改。
            </li>
            <li>
              <strong>删除</strong>
              在服务不再需要保留时，可以要求删除相关信息。删除后与之关联的个性化归位记录会一并清空。
            </li>
            <li>
              <strong>撤回同意</strong>
              对基于同意开展的处理，您可以随时撤回。撤回后相关功能可能无法继续提供，其余服务不受影响。
            </li>
            <li>
              <strong>注销账号</strong>
              不再使用时可以提出注销。注销完成后，账号信息与使用记录将按流程清理。
            </li>
          </ul>
          <p>以上请求都可以在工作日 9:00-18:00 通过<a href="/contact/">联系咨询</a>页面提供的渠道提出。我们会在收到后回复处理进度，涉及身份确认的环节会先与您核实，避免他人代为操作。</p>
        </article>

        <article class="privacy-article" id="cookies" data-section>
          <header class="privacy-article-head">
            <span class="privacy-num mono">04</span>
            <h2 class="section-title">Cookie 与同类技术</h2>
          </header>
          <p>网页端与移动端会使用 Cookie 及类似的本地存储技术，规模很小，作用也很具体。</p>
          <ul class="privacy-list">
            <li>
              <strong>保持登录状态</strong>
              避免您在浏览多个分区时被反复要求重新登录。
            </li>
            <li>
              <strong>记住您的偏好</strong>
              例如上次停留的分区、列表排序方式、每页显示的条目数量。
            </li>
            <li>
              <strong>访问统计</strong>
              以汇总方式记录页面打开次数与停留时长，用于判断哪个板块值得投入更多维护资源。
            </li>
            <li>
              <strong>安全校验</strong>
              识别异常请求来源，配合账号安全策略使用。
            </li>
          </ul>
          <p>您可以在浏览器或系统设置中清除、限制这些本地数据。清除后需要重新登录，个性化归位的记录也会重置，其余浏览不受影响。</p>
        </article>

        <article class="privacy-article" id="security" data-section>
          <header class="privacy-article-head">
            <span class="privacy-num mono">05</span>
            <h2 class="section-title">信息安全与联系</h2>
          </header>
          <p>信息在传输环节使用加密通道，存储环节按用途分层，只授予岗位需要的同事访问权限，并对内部操作留存记录，便于回溯。不同类别的信息保留时长不同，超出所需期限后会进行清理或匿名化处理。</p>
          <p>网络环境本身存在不确定性，我们会持续加固防护、跟进新的风险，同时也建议您妥善保管登录凭证，不要在不熟悉的设备上长期保持登录状态。如果发现账号出现异常，请尽快联系客服处理。</p>

          <div class="privacy-help">
            <p class="privacy-help-title">对某一条还有疑问？</p>
            <p class="privacy-help-text">客服团队在工作日 9:00-18:00 内回复咨询，也可以在帮助中心查看下载安装、分区结算、服务清单与账号安全方面的常见问题。</p>
            <div class="privacy-links">
              <a class="btn btn--primary" href="/contact/">联系客服</a>
              <a class="btn btn--line" href="/help/">前往帮助中心</a>
              <a class="btn btn--line" href="/legal/">查看法律声明</a>
            </div>
          </div>
        </article>

      </div>
    </div>
  </section>

</main>


.page-privacy .privacy-hero {
  padding-bottom: clamp(24px, 3.4vw, 44px);
}

.page-privacy .privacy-hero-frame {
  max-width: 66ch;
}

.page-privacy .privacy-hero .eyebrow {
  color: var(--c-cyan);
  letter-spacing: .22em;
  font-size: var(--fs-micro);
}

.page-privacy .privacy-hero h1 {
  margin: 14px 0 18px;
  line-height: 1.08;
}

.page-privacy .privacy-hero .lede {
  color: var(--c-text);
  line-height: 1.8;
  max-width: 58ch;
}

.page-privacy .privacy-hero-note {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--c-purple);
  font-size: var(--fs-small);
  line-height: 1.7;
}

.page-privacy .privacy-hero-media {
  margin: clamp(26px, 4vw, 46px) 0 0;
  border: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}

.page-privacy .privacy-hero-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-purple), var(--c-cyan) 55%, var(--c-orange));
}

.page-privacy .privacy-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-privacy .divider {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 0;
}

.page-privacy .privacy-body {
  padding-top: clamp(30px, 4.6vw, 58px);
}

.page-privacy .privacy-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.page-privacy .privacy-index {
  border: 1px solid var(--c-line);
  background: var(--c-panel);
  padding: 16px 16px 18px;
}

.page-privacy .privacy-index-title {
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: .22em;
  color: var(--c-muted);
}

.page-privacy .privacy-index-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}

.page-privacy .privacy-index-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-left: 2px solid transparent;
  color: var(--c-muted);
  font-size: var(--fs-small);
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}

.page-privacy .privacy-index-list a:hover,
.page-privacy .privacy-index-list a:focus-visible {
  color: var(--c-text);
  border-left-color: var(--c-purple);
  background: rgba(139, 92, 246, .12);
}

.page-privacy .privacy-index-num {
  flex: none;
  font-size: var(--fs-micro);
  color: var(--c-purple);
  letter-spacing: .08em;
}

.page-privacy .privacy-article {
  border-top: 1px solid var(--c-line);
  padding-top: clamp(22px, 3.2vw, 38px);
  margin-top: clamp(30px, 4.4vw, 54px);
  scroll-margin-top: calc(var(--header-h) + 28px);
}

.page-privacy .privacy-article:first-child {
  margin-top: 0;
  border-top-color: var(--c-purple);
}

.page-privacy .privacy-article-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-left: 14px;
  border-left: 2px solid var(--c-line);
  margin-bottom: 16px;
}

.page-privacy .privacy-article-head .section-title {
  margin: 0;
}

.page-privacy .privacy-num {
  flex: none;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  padding: 3px 7px;
  border: 1px solid var(--c-line);
  color: var(--c-muted);
}

.page-privacy #collect .privacy-article-head { border-left-color: var(--c-cyan); }
.page-privacy #collect .privacy-num { color: var(--c-cyan); border-color: rgba(34, 211, 238, .45); }

.page-privacy #use .privacy-article-head { border-left-color: var(--c-purple); }
.page-privacy #use .privacy-num { color: var(--c-purple); border-color: rgba(139, 92, 246, .5); }

.page-privacy #rights .privacy-article-head { border-left-color: var(--c-orange); }
.page-privacy #rights .privacy-num { color: var(--c-orange); border-color: rgba(251, 146, 60, .45); }

.page-privacy #cookies .privacy-article-head { border-left-color: var(--c-green); }
.page-privacy #cookies .privacy-num { color: var(--c-green); border-color: rgba(52, 211, 153, .45); }

.page-privacy #security .privacy-article-head { border-left-color: var(--c-amber); }
.page-privacy #security .privacy-num { color: var(--c-amber); border-color: rgba(245, 158, 11, .45); }

.page-privacy .privacy-article p {
  max-width: 68ch;
  color: var(--c-muted);
  line-height: 1.85;
  margin: 0 0 14px;
}

.page-privacy .privacy-article p a {
  color: var(--c-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 211, 238, .45);
}

.page-privacy .privacy-article p a:hover,
.page-privacy .privacy-article p a:focus-visible {
  color: var(--c-text);
  border-bottom-color: var(--c-text);
}

.page-privacy .privacy-list {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  max-width: 72ch;
  display: grid;
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}

.page-privacy .privacy-list li {
  background: var(--c-panel);
  padding: 14px 16px;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--c-muted);
  transition: background var(--t-fast);
}

.page-privacy .privacy-list li:hover {
  background: var(--c-panel-2);
}

.page-privacy .privacy-list li strong {
  display: block;
  margin-bottom: 5px;
  color: var(--c-text);
  font-size: var(--fs-body);
  font-weight: 600;
}

.page-privacy .privacy-help {
  margin-top: clamp(24px, 3.2vw, 36px);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-orange);
  background: var(--c-panel);
  padding: clamp(18px, 2.6vw, 28px);
  max-width: 72ch;
}

.page-privacy .privacy-help-title {
  color: var(--c-text);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.4;
  max-width: none;
}

.page-privacy .privacy-help-text {
  margin-bottom: 18px;
}

.page-privacy .privacy-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

@media (min-width: 560px) {
  .page-privacy .privacy-index-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .page-privacy .privacy-layout {
    grid-template-columns: 216px minmax(0, 1fr);
  }

  .page-privacy .privacy-index {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .page-privacy .privacy-index-list {
    grid-template-columns: 1fr;
  }

  .page-privacy .privacy-articles {
    max-width: 860px;
  }
}

@media (min-width: 1180px) {
  .page-privacy .privacy-layout {
    grid-template-columns: 236px minmax(0, 1fr);
    gap: 64px;
  }

  .page-privacy .privacy-hero-frame {
    max-width: 72ch;
  }
}
<<<END>>>