.page-products{
  --pp-gap:22px;
  --pp-line:rgba(94,114,134,.38);
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(94,114,134,.09) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,114,134,.09) 1px,transparent 1px);
  background-size:64px 64px,64px 64px;
  color:var(--paper);
  padding-bottom:56px;
}
.page-products a{color:inherit}
.page-products .breadcrumbs{padding-top:18px;font-size:12.5px;letter-spacing:.08em}
.page-products .breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none;color:var(--slate)}
.page-products .breadcrumbs__link{color:var(--paper);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease)}
.page-products .breadcrumbs__link:hover,
.page-products .breadcrumbs__link:focus-visible{color:var(--cyan);border-bottom-color:var(--cyan)}
.page-products .breadcrumbs__current{color:var(--gold);font-family:var(--font-mono);letter-spacing:.1em}

/* hero */
.page-products .pp-hero{padding-block:26px 34px}
.page-products .pp-hero__kicker{margin:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.page-products .pp-hero__title{
  margin:14px 0 18px;
  font-size:clamp(34px,7vw,70px);
  line-height:1.06;
  letter-spacing:.05em;
  font-weight:800;
  max-width:24ch;
}
.page-products .pp-hero__title em{font-style:normal;color:var(--gold);box-shadow:inset 0 -.14em 0 rgba(198,60,47,.55)}
.page-products .pp-hero__lede{
  margin:0;
  max-width:64ch;
  font-size:clamp(15px,1.6vw,17px);
  line-height:1.95;
  color:#D6DEE8;
}
.page-products .pp-stats{display:grid;gap:12px;margin-top:26px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.page-products .pp-stats .stat{
  border:2px solid var(--hair-strong);
  background:rgba(7,17,31,.74);
  box-shadow:var(--hard-shadow);
  padding:14px 16px;
}
.page-products .pp-stats .stat__value{display:block;font-family:var(--font-mono);font-size:clamp(20px,4vw,30px);line-height:1.1;color:var(--gold);letter-spacing:.02em}
.page-products .pp-stats .stat__label{display:block;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--slate);letter-spacing:.06em}

/* 横向主题带 */
.page-products .pp-band{
  display:grid;
  gap:2px;
  margin-top:30px;
  border:2px solid var(--hair-strong);
  background:var(--hair-strong);
  grid-template-columns:1fr;
  box-shadow:var(--hard-shadow);
}
.page-products .pp-band .band__cell{
  display:block;
  padding:14px 16px;
  background:var(--ink-deep);
  text-decoration:none;
  color:var(--paper);
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.page-products .pp-band .band__cell:hover,
.page-products .pp-band .band__cell:focus-visible{background:var(--ink-lift);color:var(--gold);box-shadow:inset 4px 0 0 var(--cyan)}
.page-products .pp-band .band__cell--key{background:var(--vermilion);color:var(--paper)}
.page-products .pp-band .band__cell--key:hover,
.page-products .pp-band .band__cell--key:focus-visible{background:#A93124;color:var(--paper)}
.page-products .band__idx{display:block;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;color:var(--gold)}
.page-products .band__cell--key .band__idx{color:#F6D9C6}
.page-products .band__name{display:block;margin-top:6px;font-weight:700;font-size:15px;letter-spacing:.08em}

/* 区块骨架 */
.page-products .pp-sec{padding-block:44px}
.page-products .pp-sec + .pp-sec{border-top:2px solid var(--hair-strong)}
.page-products .pp-sec--deep{background:rgba(7,17,31,.5)}
.page-products .pp-head{display:grid;gap:12px;padding-left:16px;border-left:4px solid var(--vermilion);margin-bottom:26px}
.page-products .pp-head__num{font-family:var(--font-mono);font-size:clamp(26px,5vw,42px);line-height:1;color:var(--gold)}
.page-products .pp-head__title{margin:0;font-size:clamp(23px,3.6vw,38px);line-height:1.22;letter-spacing:.04em}
.page-products .pp-head__lead{margin:10px 0 0;max-width:70ch;font-size:15.5px;line-height:1.9;color:#C7D1DD}

/* 通用分栏 */
.page-products .pp-split{display:grid;gap:var(--pp-gap)}
.page-products .pp-split__main,
.page-products .pp-split__aside{min-width:0}
.page-products .pp-split__aside{display:grid;gap:var(--pp-gap);align-content:start}

/* 表格 */
.page-products .pp-tablewrap{overflow-x:auto;border:2px solid var(--hair-strong);box-shadow:var(--hard-shadow);background:rgba(7,17,31,.72);-webkit-overflow-scrolling:touch}
.page-products .pp-table__caption{caption-side:top;text-align:left;padding:12px 14px 0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.18em;color:var(--slate)}
.page-products .data-table{width:100%;min-width:520px;border-collapse:collapse;font-size:14px}
.page-products .data-table th,
.page-products .data-table td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top;line-height:1.7}
.page-products .data-table thead th{background:var(--ink-lift);font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--gold);font-weight:600}
.page-products .data-table tbody th{font-family:var(--font-mono);color:var(--gold);font-weight:600;white-space:nowrap;background:rgba(19,42,71,.5)}
.page-products .data-table tbody td{color:#D6DEE8}

/* 面板与列表 */
.page-products .panel{border:2px solid var(--hair-strong);background:rgba(7,17,31,.78);box-shadow:var(--hard-shadow);padding:18px}
.page-products .panel--gold{border-color:var(--gold)}
.page-products .panel--paper{background:var(--paper);color:var(--black);border-color:var(--gold)}
.page-products .panel--paper .pp-link{color:#8C2318}
.page-products .panel__title{margin:0 0 12px;font-size:16px;letter-spacing:.08em;color:var(--gold)}
.page-products .panel--paper .panel__title{color:#8C2318}
.page-products .pp-list{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:14px;line-height:1.75}
.page-products .pp-list li{padding-left:14px;border-left:2px solid var(--line);color:#CBD5E1}
.page-products .panel--paper .pp-list li{color:#2A3340;border-left-color:var(--vermilion-soft)}
.page-products .pp-list .mono{display:inline-block;margin-right:10px;font-family:var(--font-mono);font-size:12.5px;color:var(--gold);letter-spacing:.04em}
.page-products .panel--paper .pp-list .mono{color:#8C2318}
.page-products .pp-archive__annot{margin-top:var(--pp-gap)}
.page-products .pp-archive__note p{margin:0;font-size:14.5px;line-height:1.9}
.page-products .pp-archive__note p + p{margin-top:12px}
.page-products .pp-note{margin:0;font-size:13px;line-height:1.8;color:var(--slate);border-left:2px dashed var(--line);padding-left:12px}

/* 图 */
.page-products .figure{margin:0;border:2px solid var(--hair-strong);background:var(--ink-deep);box-shadow:var(--hard-shadow);overflow:hidden}
.page-products .figure img{display:block;width:100%;max-width:100%;height:auto;object-fit:cover}
.page-products .pp-fig--3x2 img{aspect-ratio:3/2}
.page-products .pp-fig--12x7 img{aspect-ratio:12/7}
.page-products .pp-fig--10x7 img{aspect-ratio:10/7}
.page-products .pp-fig--5x3 img{aspect-ratio:5/3}
.page-products .figure__caption{padding:10px 14px;font-size:12.5px;line-height:1.7;color:var(--slate);border-top:1px solid var(--line-soft)}

/* 走势窗口 */
.page-products .pp-windows{display:grid;gap:16px;margin-bottom:var(--pp-gap)}
.page-products .pp-window{
  border:2px solid var(--hair-strong);
  border-top-width:5px;
  background:rgba(7,17,31,.8);
  box-shadow:var(--hard-shadow);
  padding:18px;
}
.page-products .pp-window--cyan{border-top-color:var(--cyan)}
.page-products .pp-window--gold{border-top-color:var(--gold)}
.page-products .pp-window--violet{border-top-color:var(--violet)}
.page-products .pp-window__num{display:block;font-family:var(--font-mono);font-size:clamp(30px,6vw,40px);line-height:1;color:var(--gold)}
.page-products .pp-window--cyan .pp-window__num{color:var(--cyan)}
.page-products .pp-window--violet .pp-window__num{color:var(--violet)}
.page-products .pp-window__title{margin:10px 0 8px;font-size:17px;letter-spacing:.08em}
.page-products .pp-window p{margin:0;font-size:14px;line-height:1.85;color:#C4CFDC}
.page-products .pp-trend__aside{display:grid;gap:var(--pp-gap);align-content:start;min-width:0}

/* 区间带 */
.page-products .pp-intervals{display:grid;gap:14px}
.page-products .pp-int{border:2px solid var(--hair-strong);background:rgba(7,17,31,.78);padding:16px;box-shadow:var(--hard-shadow);outline:none}
.page-products .pp-int:focus-visible{border-color:var(--cyan)}
.page-products .pp-int__bar{height:10px;margin-bottom:12px;background:var(--line)}
.page-products .pp-int--low .pp-int__bar{background:linear-gradient(90deg,var(--cyan) 0 28%,rgba(94,114,134,.32) 28%)}
.page-products .pp-int--mid .pp-int__bar{background:linear-gradient(90deg,rgba(94,114,134,.32) 0 28%,var(--gold) 28% 62%,rgba(94,114,134,.32) 62%)}
.page-products .pp-int--high .pp-int__bar{background:linear-gradient(90deg,rgba(94,114,134,.32) 0 62%,var(--vermilion) 62% 88%,rgba(94,114,134,.32) 88%)}
.page-products .pp-int--focus .pp-int__bar{background:linear-gradient(90deg,rgba(94,114,134,.32) 0 88%,var(--violet) 88%)}
.page-products .pp-int__head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.page-products .pp-int__title{margin:0;font-size:17px;letter-spacing:.08em}
.page-products .pp-int__sum{margin:8px 0 0;font-size:14px;line-height:1.75;color:#C4CFDC}
.page-products .pp-int__note{
  margin:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  font-size:13.5px;
  line-height:1.85;
  color:#B4C1D0;
  transition:max-height .35s var(--ease),opacity .3s var(--ease),margin-top .35s var(--ease);
}
.page-products .pp-int:hover .pp-int__note,
.page-products .pp-int:focus-within .pp-int__note,
.page-products .pp-int:focus .pp-int__note{max-height:200px;opacity:1;margin-top:10px}
.page-products .pp-intervals__fig{margin-top:var(--pp-gap)}
.page-products .pill{display:inline-block;padding:3px 9px;border:1px solid var(--line);font-family:var(--font-mono);font-size:11.5px;letter-spacing:.1em;color:var(--cyan)}
.page-products .pill--gold{color:var(--gold);border-color:var(--gold)}
.page-products .pill--red{color:var(--vermilion-soft);border-color:var(--vermilion)}
.page-products .pill--violet{color:var(--violet);border-color:var(--violet)}

/* 区域资讯 */
.page-products .pp-local__sub{margin:0 0 12px;font-size:14px;letter-spacing:.14em;color:var(--gold);font-family:var(--font-mono)}
.page-products .pp-local__sub + .pp-cities{margin-bottom:24px}
.page-products .pp-cities{display:grid;gap:10px;margin:0;padding:0;list-style:none;grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
.page-products .pp-city{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border:2px solid var(--line);
  background:rgba(7,17,31,.66);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.page-products .pp-city:hover{border-color:var(--gold);background:rgba(19,42,71,.7)}
.page-products .pp-city__name{font-weight:700;letter-spacing:.08em;font-size:14px}
.page-products .pp-city__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--cyan)}
.page-products .pp-cities--weekly .pp-city__tag{color:var(--slate)}
.page-products .pp-local__note p{margin:0;font-size:14px;line-height:1.9;color:#C4CFDC}

/* 网页端入口 */
.page-products .pp-steps{display:grid;gap:14px}
.page-products .disclosure{border:2px solid var(--hair-strong);background:rgba(7,17,31,.8);box-shadow:var(--hard-shadow)}
.page-products .disclosure__btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  background:transparent;
  border:0;
  color:var(--paper);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.page-products .disclosure__btn:hover,
.page-products .disclosure__btn:focus-visible{background:var(--ink-lift);color:var(--gold)}
.page-products .disclosure__btn::after{content:"+";flex:0 0 auto;font-family:var(--font-mono);font-size:16px;color:var(--gold)}
.page-products .disclosure__btn[aria-expanded="true"]::after{content:"−";color:var(--vermilion)}
.page-products .pp-step__label{display:flex;align-items:baseline;font-size:15px;font-weight:700;letter-spacing:.06em}
.page-products .pp-step__num{margin-right:12px;font-size:12.5px;color:var(--gold);letter-spacing:.14em}
.page-products .disclosure__panel{padding:2px 16px 16px;border-top:1px dashed var(--line-soft)}
.page-products .disclosure__panel p{margin:12px 0 0;font-size:14px;line-height:1.9;color:#C4CFDC}
.page-products .copy-btn{
  border:2px solid var(--cyan);
  background:transparent;
  color:var(--cyan);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  padding:8px 14px;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.page-products .copy-btn:hover,
.page-products .copy-btn:focus-visible{background:var(--cyan);color:var(--ink-deep)}
.page-products .pp-web__extra{margin-top:var(--pp-gap)}
.page-products .pp-web__aside{min-width:0}
.page-products .pp-linklist{margin:0;padding:0;list-style:none;display:grid;gap:12px;font-size:14px}
.page-products .pp-linklist li{display:grid;gap:4px;padding-bottom:10px;border-bottom:1px dashed var(--line-soft)}
.page-products .pp-linklist li:last-child{border-bottom:0;padding-bottom:0}
.page-products .pp-linklist span{color:var(--slate);font-size:13px;line-height:1.7}
.page-products .pp-link{
  display:inline-block;
  color:var(--cyan);
  text-decoration:none;
  border-bottom:1px solid transparent;
  font-weight:700;
  letter-spacing:.05em;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.page-products .pp-link:hover,
.page-products .pp-link:focus-visible{color:var(--gold);border-bottom-color:var(--gold)}
.page-products .pp-links{margin:12px 0 0}

/* 收尾 */
.page-products .pp-cta{padding-block:48px}
.page-products .pp-cta__box{
  border:2px solid var(--vermilion);
  background:linear-gradient(135deg,rgba(198,60,47,.16),rgba(7,17,31,.9) 62%);
  box-shadow:var(--hard-shadow);
  padding:26px 20px;
}
.page-products .pp-cta__title{margin:0 0 12px;font-size:clamp(22px,3.4vw,34px);line-height:1.24;letter-spacing:.04em}
.page-products .pp-cta__text{margin:0;max-width:68ch;font-size:15px;line-height:1.95;color:#D2DBE6}
.page-products .pp-cta__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.page-products .pp-cta__actions .btn{display:inline-block;text-decoration:none;letter-spacing:.1em}

@media (min-width:720px){
  .page-products .pp-band{grid-template-columns:repeat(5,minmax(0,1fr))}
  .page-products .pp-windows{grid-template-columns:repeat(3,minmax(0,1fr))}
  .page-products .pp-intervals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-products .pp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .page-products .pp-sec{padding-block:56px}
  .page-products .pp-cta__box{padding:34px 28px}
}

@media (min-width:820px){
  .page-products .pp-head{grid-template-columns:96px minmax(0,1fr);padding-left:20px;align-items:start}
}

@media (min-width:980px){
  .page-products .pp-split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .page-products .pp-split--reverse{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .page-products .pp-split--reverse > .figure{order:0}
  .page-products .pp-hero{padding-block:34px 44px}
}

@media (hover:none){
  .page-products .pp-int__note{max-height:200px;opacity:1;margin-top:10px}
}

@media (prefers-reduced-motion:reduce){
  .page-products *{transition:none !important}
}