.page-faq{
  --faq-pad-x:clamp(20px,3vw,32px);
  --faq-pad-y:clamp(26px,3.5vw,38px);
  --faq-rule:rgba(20,26,46,.14);
  color:var(--text);
}

/* 面包屑 */
.page-faq .breadcrumbs{padding-top:clamp(18px,3vw,30px);}
.page-faq .breadcrumbs ol{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:0;padding:0;list-style:none;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;
  color:var(--text-faint);
}
.page-faq .breadcrumbs li+li::before{content:"/";margin-right:10px;color:var(--grid-line);}
.page-faq .breadcrumbs a{color:var(--cyan);text-decoration:none;}
.page-faq .breadcrumbs a:hover{text-decoration:underline;}

/* 首屏 */
.page-faq .faq-hero{padding-top:clamp(16px,2.5vw,26px);}
.page-faq .faq-hero__grid{display:grid;gap:clamp(26px,4vw,48px);align-items:center;}
.page-faq .faq-hero__lead .eyebrow{color:var(--cyan);}
.page-faq .faq-hero__lead .lede{margin-top:18px;max-width:44ch;}
.page-faq .faq-hero__media{
  margin:0;width:100%;max-width:560px;
  justify-self:start;
}
.page-faq .faq-hero__media img{width:100%;height:auto;display:block;object-fit:cover;}
.page-faq .faq-hero__media .media__caption{color:var(--text-faint);font-size:13px;}

/* 三步自查条 */
.page-faq .faq-steps-band{padding-top:0;}
.page-faq .faq-steps{
  position:relative;
  display:grid;gap:22px;
  padding:var(--faq-pad-y) var(--faq-pad-x);
  border-radius:var(--r-lg);
}
.page-faq .faq-steps::before{
  content:"";
  position:absolute;
  left:calc(var(--faq-pad-x) + 17px);
  top:calc(var(--faq-pad-y) + 42px);
  bottom:calc(var(--faq-pad-y) + 12px);
  width:2px;
  background:linear-gradient(180deg,var(--cyan),var(--violet) 55%,var(--orange));
  opacity:.55;
}
.page-faq .faq-step{
  position:relative;z-index:1;
  display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;align-items:start;
  padding:6px 0;
  text-decoration:none;color:inherit;
}
.page-faq .faq-step__num{
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);
  border:1px solid var(--glass-line);
  color:var(--cyan);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);
}
.page-faq .faq-step__body{display:grid;gap:6px;padding-top:4px;}
.page-faq .faq-step__title{font-size:15.5px;font-weight:500;color:var(--text);letter-spacing:.01em;}
.page-faq .faq-step__text{font-size:14.5px;line-height:1.75;color:var(--text-dim);}
.page-faq .faq-step:hover .faq-step__num,
.page-faq .faq-step:focus-visible .faq-step__num{
  border-color:var(--cyan);
  color:var(--ink);
  background:var(--cyan);
  box-shadow:0 0 22px rgba(51,235,214,.45);
}
.page-faq .faq-step:hover .faq-step__title{color:var(--cyan);}

@media (min-width:780px){
  .page-faq .faq-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,46px);}
  .page-faq .faq-steps::before{
    left:calc(var(--faq-pad-x) + 18px);
    right:calc(var(--faq-pad-x) + 18px);
    top:calc(var(--faq-pad-y) + 18px);
    bottom:auto;
    width:auto;height:2px;
    background:linear-gradient(90deg,var(--cyan),var(--violet) 55%,var(--orange));
  }
  .page-faq .faq-step{grid-template-columns:minmax(0,1fr);gap:14px;padding:0;}
  .page-faq .faq-step__body{padding-top:0;}
}

/* 问答区 */
.page-faq .faq-board__filters{
  display:flex;flex-wrap:wrap;gap:10px;
  padding:14px;
  border-radius:var(--r-md);
  margin:clamp(22px,3vw,34px) 0 clamp(20px,3vw,30px);
}
.page-faq .faq-board__grid{display:grid;gap:clamp(18px,2.5vw,28px);}

.page-faq .faq-index{
  padding:22px var(--faq-pad-x) 18px;
  border-radius:var(--r-md);
}
.page-faq .faq-index .eyebrow{color:var(--text-faint);display:block;margin-bottom:12px;}
.page-faq .faq-index__list{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.page-faq .faq-index__list a{
  display:block;
  padding:11px 12px;
  border-left:2px solid transparent;
  color:var(--text-dim);
  font-size:14.5px;line-height:1.55;
  text-decoration:none;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease);
}
.page-faq .faq-index__tag{
  display:inline-block;
  margin-right:8px;
  color:var(--violet);
  font-size:11px;letter-spacing:.1em;
}
.page-faq .faq-index__list a:hover{
  color:var(--text);
  border-left-color:var(--cyan);
  background:rgba(51,235,214,.07);
}

.page-faq .faq-answers{
  padding:clamp(20px,3vw,30px);
  border-radius:var(--r-md);
  color:var(--deep-text);
}
.page-faq .faq-answers .accordion{
  border:1px solid var(--faq-rule);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.55);
  overflow:hidden;
}
.page-faq .faq-answers .accordion+.accordion{margin-top:12px;}
.page-faq .faq-answers .accordion[open]{
  border-color:rgba(138,92,255,.42);
  box-shadow:inset 3px 0 0 var(--violet);
}
.page-faq .faq-answers .accordion summary{
  display:flex;align-items:flex-start;gap:10px;
  padding:15px 18px;
  cursor:pointer;
  font-size:15.5px;font-weight:500;line-height:1.6;
  color:var(--deep-text);
  list-style:none;
}
.page-faq .faq-answers .accordion summary::-webkit-details-marker{display:none;}
.page-faq .faq-answers .accordion summary::after{
  content:"＋";
  margin-left:auto;
  flex:none;
  font-family:var(--font-mono);
  color:var(--deep-muted);
  transition:color .18s var(--ease);
}
.page-faq .faq-answers .accordion[open] summary::after{content:"－";color:var(--violet);}
.page-faq .faq-qtag{
  flex:none;
  align-self:center;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(138,92,255,.14);
  color:#5B32C9;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.08em;
}
.page-faq .faq-answers .accordion__body{
  padding:0 18px 18px;
  font-size:15px;line-height:1.8;color:var(--deep-muted);
}
.page-faq .faq-scene{
  margin:0 0 14px;
  padding-left:12px;
  border-left:2px solid var(--orange);
  font-size:14px;color:var(--deep-muted);
}
.page-faq .faq-steps-list{
  list-style:none;
  counter-reset:faqstep;
  margin:0;padding:0;display:grid;gap:10px;
}
.page-faq .faq-steps-list li{
  position:relative;
  counter-increment:faqstep;
  padding-left:32px;
}
.page-faq .faq-steps-list li::before{
  content:counter(faqstep,decimal-leading-zero);
  position:absolute;left:0;top:1px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;
  color:var(--violet);
}
.page-faq .faq-related{
  margin:16px 0 0;
  padding-top:12px;
  border-top:1px solid var(--faq-rule);
  font-size:13.5px;color:var(--deep-muted);
}
.page-faq .faq-related a{color:#3B28A6;text-decoration:none;border-bottom:1px solid rgba(59,40,166,.35);}
.page-faq .faq-related a:hover{color:var(--violet);border-bottom-color:var(--violet);}

@media (min-width:960px){
  .page-faq .faq-board__grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start;}
  .page-faq .faq-index{position:sticky;top:24px;}
}

/* 暖纸段 */
.page-faq .faq-paper{
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255,255,255,.6), transparent 55%),
    linear-gradient(180deg,var(--paper) 0%,var(--paper) 90%,rgba(243,234,218,.94) 100%);
  color:var(--deep-text);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.page-faq .faq-paper .section-head{border-color:var(--faq-rule);}
.page-faq .faq-paper .section-head__title{color:var(--deep-text);}
.page-faq .faq-paper .lede{color:var(--deep-muted);}
.page-faq .faq-paper a{color:#3B28A6;}
.page-faq .faq-paper a:hover{color:var(--violet);}

.page-faq .faq-records{
  display:grid;gap:clamp(24px,3.5vw,44px);align-items:center;
  margin-top:clamp(24px,3vw,36px);
}
.page-faq .faq-records__steps{
  list-style:none;
  counter-reset:rec;
  margin:0;padding:0;display:grid;gap:14px;
}
.page-faq .faq-records__steps li{
  position:relative;
  counter-increment:rec;
  padding:16px 18px 16px 64px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--faq-rule);
  border-radius:var(--r-md);
}
.page-faq .faq-records__steps li::before{
  content:counter(rec,decimal-leading-zero);
  position:absolute;left:18px;top:14px;
  font-family:var(--font-mono);font-size:19px;letter-spacing:.02em;
  color:var(--violet);
}
.page-faq .faq-records__steps strong{display:block;margin-bottom:5px;font-size:15.5px;font-weight:600;}
.page-faq .faq-records__steps span{font-size:14.5px;line-height:1.78;color:var(--deep-muted);}
.page-faq .faq-records__media{margin:0;}
.page-faq .faq-records__media img{width:100%;height:auto;display:block;object-fit:cover;}
.page-faq .faq-records__media .media__caption{color:var(--deep-muted);font-size:13px;}

.page-faq .faq-paper__note{
  margin:clamp(22px,3vw,34px) 0 0;
  padding-left:14px;
  border-left:3px solid var(--cyan);
  font-size:14.5px;line-height:1.8;color:var(--deep-muted);
}

.page-faq .faq-rules{margin-top:clamp(38px,5vw,66px);}
.page-faq .faq-rules__title{font-size:clamp(1.3rem,2.4vw,1.9rem);}
.page-faq .matrix-wrap{
  margin-top:clamp(20px,2.6vw,30px);
  overflow-x:auto;
  border:1px solid rgba(20,26,46,.18);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.62);
  -webkit-overflow-scrolling:touch;
}
.page-faq .faq-table{
  width:100%;min-width:600px;
  border-collapse:collapse;
  font-size:14.5px;
}
.page-faq .faq-table caption{
  caption-side:top;
  padding:14px 18px 10px;
  text-align:left;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  color:var(--deep-muted);
}
.page-faq .faq-table th,
.page-faq .faq-table td{
  padding:13px 18px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid rgba(20,26,46,.1);
}
.page-faq .faq-table thead th{
  background:rgba(20,26,46,.07);
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--deep-text);
  border-bottom:1px solid rgba(20,26,46,.2);
}
.page-faq .faq-table tbody tr:nth-child(even){background:rgba(20,26,46,.04);}
.page-faq .faq-table tbody tr:last-child td{border-bottom:0;}
.page-faq .faq-table__no{
  width:58px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:var(--deep-muted);
}
.page-faq .faq-table__name{font-weight:600;min-width:150px;}
.page-faq .faq-table__name::before{
  content:"";
  display:inline-block;
  width:3px;height:15px;
  margin-right:10px;
  border-radius:2px;
  background:var(--cyan);
  vertical-align:-2px;
}
.page-faq .faq-table tbody tr:nth-child(3n+2) .faq-table__name::before{background:var(--violet);}
.page-faq .faq-table tbody tr:nth-child(3n) .faq-table__name::before{background:var(--orange);}
.page-faq .faq-table td a{text-decoration:none;border-bottom:1px solid rgba(59,40,166,.35);}
.page-faq .faq-table td a:hover{border-bottom-color:var(--violet);color:var(--violet);}

@media (min-width:900px){
  .page-faq .faq-records{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);}
}

/* 工单收束 */
.page-faq .faq-ticket__card{
  position:relative;
  display:grid;gap:clamp(20px,3vw,30px);
  padding:clamp(26px,4vw,46px);
  border:1px solid rgba(255,138,61,.55);
  border-radius:var(--r-lg);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(138,92,255,.2), transparent 60%),
    radial-gradient(100% 120% at 0% 100%, rgba(51,235,214,.12), transparent 62%),
    linear-gradient(180deg,rgba(15,24,50,.96),rgba(7,11,28,.78));
  box-shadow:0 0 0 1px rgba(255,138,61,.12),0 30px 70px -34px rgba(255,138,61,.5);
}
.page-faq .faq-ticket__head .eyebrow{color:var(--orange);display:block;margin-bottom:10px;}
.page-faq .faq-ticket__head h2{
  font-size:clamp(1.5rem,3vw,2.3rem);
  font-weight:300;letter-spacing:.02em;
  margin:0 0 12px;
  color:var(--text);
}
.page-faq .faq-ticket__head p{font-size:15px;line-height:1.8;color:var(--text-dim);margin:0;max-width:46ch;}
.page-faq .faq-ticket__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:10px;
  align-self:start;
}
.page-faq .faq-ticket__list li{
  position:relative;
  padding-left:24px;
  font-size:14.5px;line-height:1.7;color:var(--text-dim);
}
.page-faq .faq-ticket__list li::before{
  content:"";
  position:absolute;left:0;top:9px;
  width:9px;height:9px;
  border-radius:2px;
  background:var(--orange);
  box-shadow:0 0 12px rgba(255,138,61,.6);
}
.page-faq .faq-ticket__actions{
  display:flex;flex-wrap:wrap;gap:12px;
  align-items:center;
}
.page-faq .faq-ticket__actions .btn{text-decoration:none;}

@media (min-width:900px){
  .page-faq .faq-ticket__card{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);}
  .page-faq .faq-ticket__head{grid-column:1;}
  .page-faq .faq-ticket__list{grid-column:2;grid-row:1;}
  .page-faq .faq-ticket__actions{grid-column:1 / -1;}
}

@media (prefers-reduced-motion:reduce){
  .page-faq .faq-step__num,
  .page-faq .faq-index__list a,
  .page-faq .faq-answers .accordion summary::after{transition:none;}
}
<<<END>>>
