/* viewpro — member profile. Visual lifted from docs/forum-theme/samples/viewpro.html;
   shared chrome lives in forum.css. */

/* hero */
.hero{display:flex; gap:18px; align-items:center; padding:18px 20px;
      background:linear-gradient(180deg,#dfe9f7,#f3f7fc); border-bottom:1px solid var(--rule)}
.ava{width:96px; height:96px; flex:none; border-radius:12px; border:2px solid #fff;
     box-shadow:0 2px 8px rgba(39,80,127,.25); overflow:hidden;
     display:flex; align-items:center; justify-content:center; background:#e7eefa}
.ava img{max-width:96px; max-height:96px; display:block}
.ava.ph, .ava.ph img{color:#7a90b5; font-size:11px;
     background:repeating-conic-gradient(#cfdcf0 0 25%, #e7eefa 0 50%) 0/18px 18px}
.who{flex:1; min-width:0}
.who .nm{font-size:24px; font-weight:bold; color:#16345e; letter-spacing:.5px}
.badges{display:flex; gap:8px; align-items:center; margin:6px 0; flex-wrap:wrap}
.grp{display:inline-flex; align-items:center; gap:5px; background:linear-gradient(#7BA0D0,#5C84BE);
     color:#fff; font-weight:bold; font-size:11px; padding:2px 10px; border-radius:20px;
     box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.rank{color:var(--muted); font-size:12px} .stars{color:#e0a300; letter-spacing:1px}
.cs{color:#33506f; font-size:11px}
/* 自我介绍 body: cap tall bios and scroll in-block so the page layout stays put */
.kv .bio{color:#445; font-size:12px; line-height:1.7; max-height:140px; overflow-y:auto; overflow-wrap:break-word}
.heroact{display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.pbtn{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 18px;
      box-sizing:border-box; border:1px solid #3f6aa6; border-radius:4px; color:#fff; font-weight:bold;
      font-size:12px; text-decoration:none; cursor:pointer;
      background:linear-gradient(to bottom,#7BA0D0,#5C84BE); box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
      text-shadow:0 1px 0 rgba(0,0,0,.15)}
.pbtn:hover{background:linear-gradient(to bottom,#86abd9,#5e8ac5); text-decoration:none; color:#fff}
.moreact{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.sbtn{display:inline-flex; align-items:center; height:26px; padding:0 12px; font-size:11px; color:#13386b;
      text-decoration:none; cursor:pointer; border:1px solid #9fc0e8; border-radius:4px;
      background:linear-gradient(#fbfdff,#dceafd); box-shadow:inset 0 1px 0 #fff}
.sbtn:hover{background:linear-gradient(#fff,#e8f1fe); text-decoration:none}

/* stats strip */
.stats{display:grid; grid-template-columns:repeat(5,1fr); border-bottom:1px solid var(--rule)}
.stat{padding:12px; text-align:center; border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat .n{font-size:20px; font-weight:bold; color:#13386b; line-height:1.1}
.stat .l{font-size:11px; color:var(--muted); margin-top:3px}

/* info sections */
.cols{display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:9px}
.sect{border:1px solid var(--frame); border-radius:6px; overflow:hidden; background:#fff}
.sect h3{margin:0; padding:6px 12px; font-size:12px; color:#fff; font-weight:bold;
     border-bottom:1px solid var(--bar-edge);
     background:linear-gradient(to bottom, rgba(255,255,255,.4) 0%, rgba(255,255,255,.06) 48%,
                rgba(255,255,255,0) 49%, rgba(0,0,0,.04) 100%),
               linear-gradient(to bottom, var(--bar-top), var(--bar-bot));
     box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.kv{display:grid; grid-template-columns:90px 1fr}
.kv.wide{grid-template-columns:90px 1fr 90px 1fr}
.kv > div{padding:6px 12px; border-bottom:1px solid var(--rule)}
.kv > div:nth-last-child(-n+2){border-bottom:0}
.kv .k{background:#f6f9fd; border-right:1px solid var(--rule); color:#33506f; font-weight:bold}
.full{grid-column:1 / -1}
.sigbox{padding:9px 12px; color:#445; font-size:12px; line-height:1.7}

/* ===== mobile: stack hero + collapse the info grids ===== */
@media (max-width:700px){
  .hero{flex-direction:column; align-items:flex-start; gap:10px; padding:14px}
  .heroact{align-items:flex-start; width:100%}
  .moreact{justify-content:flex-start}
  .stats{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
  .kv,.kv.wide{grid-template-columns:84px 1fr}
}