/* Who's-online — summary line, glossy header row, alt-striped rows, pager.
   Lifted from docs/forum-theme/samples/whosonline.html (Direction C). */
.summary{padding:9px 12px; border-bottom:1px solid var(--rule); font-size:12px; color:#333}
.summary b{color:var(--cat-text)}

.thead,.trow{display:grid;
  grid-template-columns:130px 70px 110px 150px minmax(160px,1fr) 210px; align-items:center}
.thead{color:#fff; font-weight:bold; font-size:12px; border-bottom:1px solid var(--bar-edge);
  background:
    linear-gradient(to bottom, rgba(255,255,255,.40) 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)}
.thead>div{padding:5px 10px}
.trow{border-bottom:1px solid var(--rule)}
.trow:nth-child(odd){background:var(--row-a)}
.trow:nth-child(even){background:var(--row-b)}
.trow:hover{background:var(--row-hi)}
.trow>div{padding:7px 10px; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.u{display:flex; align-items:center; gap:7px}
.u .d{width:8px; height:8px; border-radius:50%; background:#2e9b3f; flex:none}
.u .g{color:var(--muted)}
/* guest/bot/ai marker icon in the 用户名 column; brand glyphs carry vendor color */
.u .ic{flex:none; width:15px; text-align:center; color:var(--muted); font-size:12px; line-height:1}
.u .ic svg{vertical-align:-1px}
.u .ic.bot{color:#6b7a55}
.u .ic.ai{color:#7a5cc0}
.u .ic.b-google{color:#4285F4}
.u .ic.b-bing{color:#00A4EF}
.u .ic.b-yandex{color:#FC3F1D}
.u .ic.b-yahoo{color:#6001D2}
.u .ic.b-openai{color:#0f9d77}
.u .ic.b-bytedance{color:#111}
.u .ic.b-amazon{color:#FF9900}
.u .ic.b-meta{color:#0866FF}
.u .ic.b-apple{color:#555}
.u .ic.b-baidu{color:#2932E1}
.u .ic.b-anthropic{color:#D97757}
.act{color:#33506f}
.muted{color:var(--muted)}
.trow>div.clientinfo{display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; white-space:normal; line-height:1.45}
.clientinfo span{min-width:0}
.clientinfo .loc{flex-basis:100%; color:var(--muted)}
.clientinfo .private{color:var(--muted)}

.panel{padding:14px 12px; font-size:12px; color:#333; text-align:center}

.toolbar{display:flex; align-items:center; padding:8px 12px; gap:8px}
.multi a,.multi span{display:inline-block; min-width:18px; text-align:center; padding:1px 5px;
  border:1px solid #cdd8ea; margin-right:3px; background:#fff; border-radius:2px; font-size:11px}
.multi a:hover{text-decoration:none; border-color:#7ba0d0}
.multi .cur{background:var(--bar-bot); color:#fff; border-color:var(--bar-edge); font-weight:bold}
.multi .lbl{border:0; background:transparent; color:var(--muted); padding:0; margin-right:5px}

@media (max-width:680px){
  .thead{display:none}
  .trow{grid-template-columns:1fr 1fr; gap:0 8px}
  .trow>div{white-space:normal}
}