.hpStockTable{width:100%;overflow:hidden;border-top:1px solid #1d3348;background:#0d1928}
.hpStockHead,.hpStockMainLink{display:grid;grid-template-columns:minmax(220px,1.45fr) minmax(88px,.7fr) minmax(86px,.6fr) minmax(100px,.7fr) minmax(100px,.7fr) minmax(150px,1fr) 88px;align-items:center;gap:14px}
.hpStockHead{min-height:48px;padding:0 16px;border-bottom:1px solid #203247;background:#091827;color:#8da7bd;font-size:11px}
.hpStockRow{position:relative;border-bottom:1px solid #1c2d3f;background:#101c2b}.hpStockRow:last-child{border-bottom:0}.hpStockRow:hover{background:#122235}
.hpStockMainLink{min-height:74px;padding:9px 16px;color:#dce9f5;text-decoration:none}
.hpStockName{min-width:0}.hpStockName strong{display:block;overflow:hidden;color:#eef6ff;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.hpStockName small{display:block;margin-top:4px;color:#7f9bb2;font-size:11px}
.hpMarketTag{display:inline-flex;min-height:27px;padding:0 8px;align-items:center;border-radius:8px;background:#1a2839;color:#9db3c5;font-size:10px;font-style:normal;font-weight:850}
.hpGradeBadge{display:inline-flex;min-width:40px;height:30px;padding:0 8px;align-items:center;justify-content:center;border:1px solid #2b4055;border-radius:9px;background:#1a2737;color:#d7e2ec;font-size:12px;font-style:normal;font-weight:900}.hpGradeBadge.gradeHigh{border-color:rgba(255,117,117,.26);background:rgba(255,117,117,.1);color:#ffaaaa}.hpGradeBadge.gradeLow{border-color:rgba(98,181,255,.26);background:rgba(98,181,255,.1);color:#acd8ff}
.hpStockClose,.hpStockChange{font-size:12px;font-weight:850;white-space:nowrap}.hpStockChange.isUp,.hpGradeChange.isUp{color:#ff9696}.hpStockChange.isDown,.hpGradeChange.isDown{color:#88c7ff}.hpGradeChange{color:#7893aa;font-size:11px;font-weight:800}
.hpDetailAction{display:inline-flex;min-height:32px;padding:0 10px;align-items:center;justify-content:center;border:1px solid #25445f;border-radius:9px;color:#69c4ff;font-size:10px;font-weight:900;white-space:nowrap}
.hpFavoriteAction{position:absolute;right:108px;top:50%;z-index:2;transform:translateY(-50%)}
.hpStockRow:has(.hpFavoriteAction) .hpDetailAction{margin-right:34px}
.hpStockNativeTable{width:100%;border-collapse:collapse;background:#0d1928}.hpStockNativeTable th{height:48px;padding:0 16px;border-bottom:1px solid #203247;background:#091827;color:#8da7bd;font-size:11px;font-weight:500;text-align:left}.hpStockNativeTable td{height:74px;padding:9px 16px;border-bottom:1px solid #1c2d3f;color:#dce9f5;font-size:12px}.hpStockNativeTable tbody tr:hover{background:#122235}
@media(max-width:900px){.hpStockHead{display:none}.hpStockMainLink{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"name grade action" "name change close";gap:6px 10px;min-height:78px}.hpStockName{grid-area:name}.hpStockMainLink>span:nth-child(2){display:none}.hpStockMainLink>span:nth-child(3){grid-area:grade}.hpStockClose{grid-area:close;text-align:right}.hpStockChange{grid-area:change;text-align:right}.hpGradeChange{display:none}.hpDetailAction{grid-area:action}.hpFavoriteAction{right:102px}.hpStockNativeTable{min-width:820px}}
@media(max-width:520px){
  .hpStockMainLink{
    min-height:88px;
    padding:11px 12px;
    grid-template-columns:minmax(0,1fr) 34px 44px;
    grid-template-areas:"name favorite grade" "name favorite change";
    gap:6px 8px
  }
  .hpStockRow:not(:has(.hpFavoriteAction)) .hpStockMainLink{
    grid-template-columns:minmax(0,1fr) 44px;
    grid-template-areas:"name grade" "name change"
  }
  .hpStockName{align-self:center;padding-right:2px}
  .hpStockName strong{font-size:13px}
  .hpStockName small{
    display:-webkit-box;
    overflow:hidden;
    max-width:100%;
    line-height:1.5;
    white-space:normal;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2
  }
  .hpDetailAction{display:none}
  .hpStockClose{display:none}
  .hpFavoriteAction{right:64px;width:34px;height:34px}
  .hpGradeBadge{min-width:44px;height:32px;padding:0 7px}
  .hpStockChange{font-size:11.5px}
}