/* Per-stock 简况 (profile-{code}.html). Clarity follows Longbridge quote profile:
   60px between sections, 16px heading-to-card, cards 8px / 0.5px with 20px
   padding, 14px facts (label 400 muted, value 600), industry card 12px. */

.sp-main{max-width:1400px;margin:0 auto;padding:40px var(--cl-panel-inline,40px) 24px;box-sizing:border-box}
.sp-section{display:flex;flex-direction:column;gap:16px}
.sp-section+.sp-section{margin-top:60px}
.sp-section h2{margin:0;font-size:20px;font-weight:600;line-height:25px;color:var(--c-text)}
.sp-card{border:1px solid rgba(var(--c-text-rgb),.12);border-radius:8px;background:var(--c-bg);overflow:hidden}
.sp-pad{padding:20px}
.sp-note{margin:0;font-size:12px;line-height:18px;color:var(--c-sub)}

.sp-change{display:inline-flex;align-items:center;gap:2px;font-size:14px;font-weight:500;line-height:20px;color:var(--c-sub);font-variant-numeric:tabular-nums;white-space:nowrap}
.sp-change svg{width:10px;height:10px;fill:currentColor}
.is-up>.sp-change,.sp-change.is-up{color:var(--c-teal)}
.sp-change.is-down{color:var(--c-pink)}

.sp-info-box{container-type:inline-size}
.sp-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(var(--sp-info-rows),auto);grid-auto-flow:column;gap:16px 40px;margin:0}
.sp-info-row{display:flex;align-items:baseline;gap:24px;min-width:0;font-size:14px;line-height:1.375}
.sp-info-row dt{flex:0 0 128px;color:var(--c-sub)}
.sp-info-row dd{margin:0;min-width:0;font-weight:600;color:var(--c-text);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.sp-info-row a{color:var(--c-accent);text-decoration:none}
.sp-info-row a:hover{text-decoration:underline}

.sp-related{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:8px;margin:0;padding:0;list-style:none}
.sp-related li{min-width:0}
.sp-security{display:flex;flex-direction:column;gap:8px;height:100%;padding:12px;box-sizing:border-box;border:1px solid rgba(var(--c-text-rgb),.12);border-radius:8px;color:inherit;text-decoration:none}
a.sp-security:hover{background:rgba(var(--c-text-rgb),.03)}
.sp-security-name{font-size:14px;font-weight:600;line-height:20px;color:var(--c-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-security-id{display:flex;align-items:center;gap:4px;font-size:12px;line-height:16px}
.sp-market{font-weight:500}
.sp-market.is-hk{color:#ff3a9d}
.sp-market.is-cn{color:#ff3a3a}
.sp-security-code{color:var(--c-sub);font-variant-numeric:tabular-nums}
.sp-security-quote{display:flex;align-items:center;gap:4px;min-height:24px}
.sp-security-price{font-size:20px;font-weight:600;line-height:20px;color:var(--c-text);font-variant-numeric:tabular-nums}
.sp-security-price.is-up{color:var(--c-teal)}
.sp-security-price.is-down{color:var(--c-pink)}
.sp-spark{flex:none;margin-left:auto;fill:none;stroke:var(--c-sub);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.sp-spark.is-up{stroke:var(--c-teal)}
.sp-spark.is-down{stroke:var(--c-pink)}

.sp-industry{display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid rgba(var(--c-text-rgb),.12);border-radius:12px;background:var(--c-bg)}
.sp-industry-head{display:flex;align-items:center;gap:8px}
.sp-industry-name{font-size:14px;font-weight:600;line-height:20px;color:var(--c-text)}
.sp-industry-count{margin-top:-12px;font-size:12px;line-height:16px;color:var(--c-sub)}
.sp-industry-count span{font-weight:500;color:#5c77ff}
.sp-dist{display:flex;align-items:flex-end;gap:4px;min-height:126px}
.sp-dist-col{display:flex;flex:1;flex-direction:column;align-items:center;gap:6px;min-width:0}
.sp-dist-count{font-size:12px;font-weight:500;line-height:12px;font-variant-numeric:tabular-nums}
.sp-dist-bar{display:block;width:16px}
.sp-dist-label{font-size:10px;line-height:10px;color:var(--c-sub);white-space:nowrap}
.sp-dist-col.is-up .sp-dist-count{color:var(--c-teal)}
.sp-dist-col.is-up .sp-dist-bar{background:var(--c-teal)}
.sp-dist-col.is-down .sp-dist-count{color:var(--c-pink)}
.sp-dist-col.is-down .sp-dist-bar{background:var(--c-pink)}
.sp-dist-col.is-flat .sp-dist-count{color:var(--c-sub)}
.sp-dist-col.is-flat .sp-dist-bar{background:#c1d0e6}
.sp-ratio{display:flex;flex-direction:column;gap:8px}
.sp-ratio-bar{display:flex;height:8px}
.sp-ratio-bar span{flex-basis:0}
.sp-ratio-bar .is-up{background:var(--c-teal)}
.sp-ratio-bar .is-down{background:var(--c-pink)}
.sp-ratio-bar .is-flat{background:#c1d0e6}
.sp-ratio-text{display:flex;justify-content:space-between;font-size:14px;font-weight:600;line-height:20px;font-variant-numeric:tabular-nums}
.sp-ratio-text .is-up{color:var(--c-teal)}
.sp-ratio-text .is-down{color:var(--c-pink)}

.sp-ranking{padding:0 20px}
.sp-rank-row{display:grid;grid-template-columns:5fr 3fr 1fr;align-items:center;gap:8px;padding:16px 0;font-size:14px;line-height:20px;color:var(--c-text);font-variant-numeric:tabular-nums}
.sp-rank-row>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-rank-head{padding-top:20px;padding-bottom:8px;font-size:12px;line-height:16px;color:var(--c-sub)}
.sp-rank-label{padding-right:8px;font-weight:600}

.sp-person{display:flex;align-items:center;gap:16px;padding:12px 20px;font-size:14px;line-height:20px}
.sp-person-name{display:flex;flex:0 0 42%;align-items:center;gap:12px;min-width:0;font-weight:600;color:var(--c-text)}
.sp-person-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-person-position{flex:1;min-width:0;color:var(--c-sub)}
.sp-avatar{display:flex;flex:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:14px;font-weight:600;color:#fff}

body.clarity.light .sp-card,body.clarity.light .sp-industry{border:.5px solid #dbdde1;background:#fff}
body.clarity.light .sp-security{border:.5px solid #dbdde1}
body.clarity.light a.sp-security:hover{background:#f0f2f4}
body.clarity.light .sp-info-row dt,body.clarity.light .sp-note,body.clarity.light .sp-security-code,
body.clarity.light .sp-dist-label,body.clarity.light .sp-rank-row.sp-rank-head,body.clarity.light .sp-person-position,
body.clarity.light .sp-industry-count{color:#696e77}
body.clarity.light .sp-info-row dd,body.clarity.light .sp-industry-name,body.clarity.light .sp-rank-row,
body.clarity.light .sp-person-name,body.clarity.light .sp-security-name{color:#070a13}
body.clarity.light .sp-info-row a{color:#624dbb}
body.clarity.light .sp-change.is-up,body.clarity.light .sp-security-price.is-up,body.clarity.light .sp-dist-col.is-up .sp-dist-count,
body.clarity.light .sp-ratio-text .is-up{color:#00ada2}
body.clarity.light .sp-change.is-down,body.clarity.light .sp-security-price.is-down,body.clarity.light .sp-dist-col.is-down .sp-dist-count,
body.clarity.light .sp-ratio-text .is-down{color:#ff3874}
body.clarity.light .sp-dist-col.is-up .sp-dist-bar,body.clarity.light .sp-ratio-bar .is-up{background:#00ada2}
body.clarity.light .sp-dist-col.is-down .sp-dist-bar,body.clarity.light .sp-ratio-bar .is-down{background:#ff3874}
body.clarity.light .sp-spark.is-up{stroke:#00ada2}
body.clarity.light .sp-spark.is-down{stroke:#ff3874}

@container (max-width:619px){
  .sp-info{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .sp-info-row{justify-content:space-between}
  .sp-info-row dd{text-align:right}
}

@media(max-width:767px){
  .sp-main{padding-inline:var(--cl-panel-inline,16px)}
  .sp-security{padding:0;border:0!important}
  a.sp-security:hover{background:none!important}
  .sp-industry{padding:0;border:0!important;border-radius:0;background:none!important}
  .sp-person-name{flex-basis:42%}
}
