/* 用户详情页 —— 由 index.html 拆分而来，加载顺序见 index.html */
/* ─── USER DETAIL PAGE ─── */
.detail-shell { display:flex; flex-direction:column; gap:16px; }
.detail-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.detail-back {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text);
  padding:9px 14px; border-radius:8px; cursor:pointer; font-weight:700;
}
.detail-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.detail-hero {
  background:
    radial-gradient(circle at 92% 45%, rgba(45,216,122,.16), transparent 22%),
    linear-gradient(135deg, rgba(32,36,50,.96), rgba(16,19,28,.98));
  border:1px solid var(--border); border-radius:14px; padding:24px;
  display:grid; grid-template-columns: 340px 1.2fr 1fr 260px; gap:22px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}
.detail-profile { display:flex; align-items:flex-start; gap:18px; min-width:0; }
.detail-avatar {
  width:96px; height:96px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid rgba(255,255,255,.18); background:var(--card2-bg);
  display:flex; align-items:center; justify-content:center; font-size:42px;
}
.detail-avatar img { width:100%; height:100%; object-fit:cover; }
.detail-name-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.detail-name { font-size:20px; font-weight:800; max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-id { margin-top:6px; color:var(--text2); font-size:13px; }
.detail-mini-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.detail-pill {
  display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px;
  background:rgba(255,255,255,.06); color:var(--text2); font-size:12px; font-weight:700;
}
.detail-pill.green { color:var(--green); background:rgba(45,216,122,.11); }
.detail-pill.purple { color:#C4B5FD; background:rgba(139,92,246,.14); }
.detail-pill.gold { color:var(--gold); background:rgba(240,160,48,.14); }
.detail-info-col { border-left:1px solid var(--border); padding-left:22px; min-width:0; }
.detail-col-title { font-size:14px; font-weight:800; margin-bottom:11px; }
.detail-pair-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
.detail-pair { display:flex; gap:8px; min-width:0; color:var(--text2); font-size:13px; line-height:1.5; }
.detail-pair b { color:var(--text); font-weight:700; word-break:break-word; }
.detail-compact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 14px; }
.detail-compact-pair { min-width:0; line-height:1.35; }
.detail-compact-pair span { display:block; color:var(--text2); font-size:11px; margin-bottom:2px; }
.detail-compact-pair b { display:block; color:var(--text); font-size:12px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.detail-hero-texts { display:grid; gap:7px; margin-top:9px; }
.detail-hero-text {
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.045);
  border-radius:8px; padding:8px 10px; min-width:0;
}
.detail-hero-text span { display:block; color:var(--text2); font-size:11px; margin-bottom:3px; }
.detail-hero-text b {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  color:var(--text); font-size:12px; line-height:1.45; font-weight:650; word-break:break-word;
}
.detail-profile-main { min-width:0; flex:1; display:flex; flex-direction:column; justify-content:flex-start; }
.detail-profile-copy { display:grid; gap:6px; margin-top:12px; }
.detail-profile-line { min-width:0; font-size:12px; line-height:1.45; color:var(--text2); }
.detail-profile-line span { color:var(--text2); font-weight:700; margin-right:6px; }
.detail-profile-line b {
  color:var(--text); font-weight:650; display:-webkit-box; -webkit-line-clamp:1;
  -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;
}
.detail-cert { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.detail-shield {
  width:122px; height:122px; margin-left:auto; border-radius:32px 32px 46px 46px;
  background:linear-gradient(150deg, rgba(45,216,122,.28), rgba(45,216,122,.08));
  border:2px solid rgba(45,216,122,.45); color:#A7F3D0; font-size:58px; font-weight:900;
  display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px rgba(45,216,122,.18);
}
.detail-personality-card {
  background:
    radial-gradient(circle at 92% 0%, rgba(232,121,249,.16), transparent 28%),
    linear-gradient(135deg, rgba(38,31,49,.98), rgba(22,24,36,.98));
  border:1px solid rgba(196,181,253,.24);
  border-radius:14px;
  padding:18px 20px;
  display:grid;
  grid-template-columns: 220px 1fr 260px;
  gap:18px;
  align-items:center;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}
.detail-personality-title { color:#C4B5FD; font-size:13px; font-weight:900; margin-bottom:8px; }
.detail-personality-main { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.detail-personality-code { font-size:30px; line-height:1; color:#F0ABFC; font-weight:950; }
.detail-personality-name { font-size:18px; color:var(--text); font-weight:900; }
.detail-personality-summary { color:var(--text); line-height:1.65; font-size:14px; }
.detail-personality-meta { color:var(--text2); font-size:12px; line-height:1.6; }
.detail-tabs {
  display:flex; gap:28px; border-bottom:1px solid var(--border); padding:0 4px; overflow-x:auto;
}
.detail-tab {
  border:0; background:transparent; color:var(--text2); padding:12px 0; cursor:pointer;
  font-size:14px; font-weight:800; position:relative; white-space:nowrap;
}
.detail-tab.active { color:#C4B5FD; }
.detail-tab.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,var(--purple),#E879F9); border-radius:2px;
}
.detail-overview-grid { display:grid; grid-template-columns:1.05fr 1.15fr 1fr; gap:14px; }
.detail-lower-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1.08fr; gap:14px; }
.detail-card {
  background:linear-gradient(145deg, rgba(28,31,43,.96), rgba(18,22,32,.96));
  border:1px solid var(--border); border-radius:8px; padding:16px;
  min-height:170px; box-shadow:0 10px 32px rgba(0,0,0,.16);
}
.detail-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.detail-card-title { font-size:15px; font-weight:800; }
.detail-card-link { color:#7DA2FF; font-size:12px; cursor:pointer; font-weight:700; border:0; padding:0; background:transparent; font-family:inherit; }
.detail-photo-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:10px; }
.detail-photo-cell {
  position:relative; display:block; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); background:var(--card2-bg);
}
.detail-photo-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.detail-photo-tag {
  position:absolute; left:6px; bottom:6px; padding:2px 7px; border-radius:999px;
  font-size:11px; font-weight:800; color:#DCE3F5; background:rgba(12,15,24,.78);
}
.detail-photo-tag.pending { color:#1A1206; background:#F2B23C; }

.detail-chart { height:168px; position:relative; border-bottom:1px solid rgba(255,255,255,.06); }
.detail-chart svg { width:100%; height:100%; display:block; }
.detail-chart-switch { display:flex; justify-content:center; gap:0; margin-bottom:4px; }
.detail-switch-btn { padding:5px 13px; border:1px solid var(--border); color:var(--text2); font-size:12px; }
.detail-switch-btn.active { color:#A5B4FC; background:rgba(59,130,246,.14); border-color:rgba(59,130,246,.35); }
.detail-metric-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.detail-metric {
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.045);
  border-radius:8px; padding:13px; min-height:86px;
}
.detail-metric-label { color:var(--text2); font-size:11px; display:flex; gap:6px; align-items:center; }
.detail-metric-value { font-size:24px; font-weight:850; margin-top:8px; }
.detail-metric-sub { color:var(--green); font-size:11px; margin-top:4px; }
.detail-tag-wrap { display:flex; flex-wrap:wrap; gap:8px; }
.detail-add-tag {
  margin-top:14px; border:1px dashed rgba(255,255,255,.13); border-radius:8px;
  color:var(--text2); text-align:center; padding:9px; cursor:pointer; font-size:12px;
}
.detail-info-list { display:grid; grid-template-columns:110px 1fr; gap:9px 18px; font-size:13px; }
.detail-info-list span:nth-child(odd) { color:var(--text2); }
.detail-info-list span:nth-child(even) { color:var(--text); font-weight:700; word-break:break-word; }
.detail-activity { display:flex; flex-direction:column; gap:12px; }
.detail-activity-row { display:grid; grid-template-columns:24px 1fr auto; gap:10px; align-items:start; color:var(--text2); font-size:12px; }
.detail-activity-icon {
  width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  background:rgba(139,92,246,.13); color:#A78BFA; font-size:12px;
}
.detail-match-row { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; margin-bottom:14px; }
.detail-match-av { width:44px; height:44px; border-radius:50%; overflow:hidden; background:var(--card2-bg); display:flex; align-items:center; justify-content:center; }
.detail-match-av img { width:100%; height:100%; object-fit:cover; }
.detail-note-line { color:var(--text2); line-height:1.75; font-size:13px; margin-bottom:12px; }
.behavior-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:14px; }
.behavior-signal-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
.behavior-signal {
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.055);
  border-radius:8px; padding:12px; min-height:78px;
}
.behavior-signal-label { color:var(--text2); font-size:11px; }
.behavior-signal-value { font-size:22px; font-weight:850; margin-top:8px; }
.behavior-signal-sub { color:var(--green); font-size:11px; margin-top:5px; }
.behavior-person {
  width:44px; height:44px; border:0; padding:0; border-radius:50%; overflow:hidden;
  background:var(--card2-bg); color:var(--text); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; font-weight:800;
}
.behavior-person img { width:100%; height:100%; object-fit:cover; }
.behavior-person.big { width:50px; height:50px; }
.behavior-event-row {
  display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.055);
}
.behavior-event-row:last-child { border-bottom:0; }
.behavior-event-title { font-size:13px; font-weight:800; }
.behavior-event-body { color:var(--text2); font-size:12px; margin-top:4px; line-height:1.45; }
.behavior-event-time { color:var(--text2); font-size:11px; white-space:nowrap; }
.behavior-relation-row {
  display:grid; grid-template-columns:50px 1fr auto; gap:10px; align-items:center;
  padding:10px 0; border-bottom:1px solid rgba(255,255,255,.055);
}
.behavior-relation-row:last-child { border-bottom:0; }
.behavior-score { color:var(--gold); font-size:12px; font-weight:850; }
.behavior-advice-list { display:flex; flex-direction:column; gap:10px; }
.behavior-advice {
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03);
  border-radius:8px; padding:10px 12px; color:var(--text2); line-height:1.55; font-size:12px;
}
.behavior-advice b { color:var(--text); display:block; margin-bottom:3px; }
.behavior-dashboard { margin-top:-4px; }
.behavior-subtabs {
  display:flex; gap:34px; border-bottom:1px solid rgba(255,255,255,.07);
  margin:-4px 0 18px; overflow-x:auto;
}
.behavior-subtab {
  border:0; background:transparent; color:var(--text2); padding:10px 0 12px;
  cursor:pointer; font-size:14px; font-weight:850; position:relative; white-space:nowrap;
}
.behavior-subtab.active { color:#D8CCFF; }
.behavior-subtab.active::after {
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:#A78BFA; border-radius:999px;
}
.behavior-board-top { display:grid; grid-template-columns:1.35fr .88fr 1fr; gap:18px; margin-bottom:18px; }
.behavior-board-bottom { display:grid; grid-template-columns:1.05fr 1fr .66fr 1.02fr; gap:18px; }
.behavior-card {
  background:linear-gradient(145deg, rgba(18,28,42,.96), rgba(11,18,30,.98));
  border:1px solid rgba(148,163,184,.08); border-radius:8px; padding:20px;
  box-shadow:0 16px 44px rgba(0,0,0,.18); min-height:230px;
}
.behavior-card-title { font-size:15px; font-weight:900; margin-bottom:18px; color:var(--text); }
.behavior-chart { width:100%; height:214px; overflow:visible; }
.behavior-chart text { fill:#8D96AA; font-size:11px; }
.behavior-chart .grid { stroke:rgba(148,163,184,.12); stroke-dasharray:3 3; }
.behavior-line { fill:none; stroke:#A855F7; stroke-width:3; filter:drop-shadow(0 0 7px rgba(168,85,247,.75)); }
.behavior-area { fill:url(#behaviorLineGradient); opacity:.4; }
.behavior-point { fill:#E9D5FF; stroke:#A855F7; stroke-width:2; }
.behavior-legend { display:flex; align-items:center; justify-content:center; gap:8px; color:#A79ABF; font-size:12px; margin-top:6px; }
.behavior-legend-dot { width:8px; height:8px; border-radius:50%; background:#A855F7; box-shadow:0 0 9px rgba(168,85,247,.85); }
.behavior-donut-wrap { display:grid; grid-template-columns:1fr 150px; gap:14px; align-items:center; }
.behavior-donut { width:190px; height:190px; display:block; margin:auto; }
.behavior-donut-center { fill:#0F1B2A; stroke:rgba(255,255,255,.04); stroke-width:1; }
.behavior-donut-total { fill:#E5E7EB; font-size:20px; font-weight:900; text-anchor:middle; }
.behavior-donut-label { fill:#7F889B; font-size:11px; text-anchor:middle; }
.behavior-donut-list { display:flex; flex-direction:column; gap:12px; }
.behavior-donut-item { display:grid; grid-template-columns:10px 1fr auto; gap:9px; align-items:center; color:var(--text2); font-size:12px; }
.behavior-donut-color { width:9px; height:9px; border-radius:50%; }
.behavior-donut-value { color:#AAB2C4; font-weight:800; }
.behavior-heatmap-head { display:grid; grid-template-columns:42px repeat(9,1fr); gap:4px; color:#8D96AA; font-size:11px; margin-bottom:7px; }
.behavior-heatmap-row { display:grid; grid-template-columns:42px repeat(24,1fr); gap:3px; align-items:center; margin-bottom:4px; }
.behavior-heatmap-day { color:#9CA3AF; font-size:12px; }
.behavior-heat-cell { height:18px; border-radius:2px; background:#1C2745; cursor:pointer; }
.behavior-heat-cell.l1 { background:#253B70; }
.behavior-heat-cell.l2 { background:#4F46A4; }
.behavior-heat-cell.l3 { background:#A855F7; }
.behavior-heat-cell.l4 { background:#EC4899; }
.behavior-heat-legend { display:flex; align-items:center; gap:8px; justify-content:center; color:#9CA3AF; font-size:12px; margin-top:12px; }
.behavior-heat-scale { display:flex; width:210px; height:16px; border-radius:3px; overflow:hidden; }
.behavior-heat-scale span:nth-child(1) { flex:1; background:#1C2745; }
.behavior-heat-scale span:nth-child(2) { flex:1; background:#4F46A4; }
.behavior-heat-scale span:nth-child(3) { flex:1; background:#A855F7; }
.behavior-heat-scale span:nth-child(4) { flex:1; background:#EC4899; }
.behavior-top-row { display:grid; grid-template-columns:22px 1fr 1.3fr 46px; gap:12px; align-items:center; margin:14px 0; color:#D8DEE9; font-size:13px; }
.behavior-rank { width:16px; height:16px; border-radius:4px; display:flex; align-items:center; justify-content:center; color:white; font-size:10px; font-weight:900; }
.behavior-bar { height:7px; border-radius:999px; background:rgba(148,163,184,.12); overflow:hidden; }
.behavior-bar-fill { height:100%; border-radius:999px; }
.behavior-more {
  border-top:1px solid rgba(255,255,255,.05); margin-top:18px; padding-top:12px;
  text-align:center; color:#AAB2C4; font-size:13px; cursor:pointer; font-weight:800;
}
.behavior-timeline { position:relative; padding-left:18px; }
.behavior-timeline::before { content:''; position:absolute; left:5px; top:6px; bottom:8px; width:1px; background:rgba(167,139,250,.28); }
.behavior-time-row { display:grid; grid-template-columns:1fr auto; gap:12px; margin:0 0 17px; position:relative; }
.behavior-time-row::before { content:''; position:absolute; left:-17px; top:5px; width:9px; height:9px; border-radius:50%; background:var(--dot,#A855F7); box-shadow:0 0 10px var(--dot,#A855F7); }
.behavior-time-title { color:#9CA3AF; font-size:12px; margin-bottom:3px; }
.behavior-time-body { color:#C8D0E0; font-size:13px; line-height:1.5; }
.behavior-user-link { color:#D8B4FE; cursor:pointer; font-weight:850; }
.behavior-chip { padding:6px 10px; border-radius:6px; font-size:12px; font-weight:850; background:rgba(168,85,247,.14); color:#C084FC; white-space:nowrap; }
.behavior-chip.like { background:rgba(244,63,94,.14); color:#FB7185; }
.behavior-chip.chat { background:rgba(45,216,122,.13); color:#34D399; }
.behavior-chip.photo { background:rgba(245,158,11,.14); color:#F59E0B; }
.behavior-env-list { display:grid; grid-template-columns:1fr auto; gap:0; }
.behavior-env-list div { padding:11px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px; }
.behavior-env-list div:nth-child(odd) { color:#9CA3AF; }
.behavior-env-list div:nth-child(even) { color:#C8D0E0; font-weight:750; text-align:right; }
.behavior-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.behavior-tag { padding:9px 13px; border-radius:8px; background:rgba(45,216,122,.14); color:#34D399; font-size:13px; font-weight:850; }
.behavior-summary { border:1px solid rgba(148,163,184,.13); border-radius:8px; padding:14px; color:#AAB2C4; font-size:13px; line-height:1.8; }
.behavior-table { width:100%; border-collapse:collapse; font-size:13px; }
.behavior-table th, .behavior-table td { border-bottom:1px solid rgba(255,255,255,.06); padding:11px 8px; text-align:left; color:#C8D0E0; }
.behavior-table th { color:#8D96AA; font-size:12px; font-weight:800; }
.behavior-person-inline { display:flex; align-items:center; gap:10px; }
.insight-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.insight-score { border:1px solid rgba(255,255,255,.08); background:rgba(15,23,42,.64); border-radius:8px; padding:13px; }
.insight-score-label { color:#8D96AA; font-size:11px; }
.insight-score-value { color:#E5E7EB; font-size:24px; font-weight:900; margin-top:7px; }
.insight-score-bar { height:5px; border-radius:99px; background:rgba(148,163,184,.18); overflow:hidden; margin-top:10px; }
.insight-score-fill { height:100%; border-radius:99px; background:#34D399; }
.insight-score-fill.risk { background:#F43F5E; }
.insight-reco-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:18px; margin-bottom:18px; }
.insight-reco { border:1px solid rgba(148,163,184,.13); border-radius:8px; padding:12px 14px; margin-bottom:10px; background:rgba(255,255,255,.025); }
.insight-reco-title { color:#E5E7EB; font-size:13px; font-weight:900; margin-bottom:5px; }
.insight-reco-text { color:#AAB2C4; font-size:12px; line-height:1.65; }
.insight-reco.risk { border-color:rgba(244,63,94,.28); background:rgba(244,63,94,.08); }
.insight-reco.opportunity { border-color:rgba(52,211,153,.25); background:rgba(52,211,153,.07); }
.insight-reco.warning { border-color:rgba(245,158,11,.25); background:rgba(245,158,11,.07); }
.insight-collection { display:grid; grid-template-columns:1fr auto; gap:0; }
.insight-collection div { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); color:#AAB2C4; font-size:12px; }
.insight-collection div:nth-child(even) { text-align:right; color:#D8DEE9; font-weight:800; }
.detail-tab-panel { display:none; }
.detail-tab-panel.active { display:block; }
.detail-form-shell { background:var(--card-bg); border:1px solid var(--border); border-radius:10px; padding:18px; }
@media (max-width: 1500px) {
  .detail-hero { grid-template-columns:1fr 1fr; }
  .detail-overview-grid, .detail-lower-grid, .behavior-grid { grid-template-columns:1fr 1fr; }
  .behavior-board-top, .behavior-board-bottom { grid-template-columns:1fr 1fr; }
  .insight-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .insight-reco-grid { grid-template-columns:1fr; }
}
@media (max-width: 980px) {
  .detail-hero, .detail-overview-grid, .detail-lower-grid, .behavior-grid { grid-template-columns:1fr; }
  .behavior-signal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .behavior-board-top, .behavior-board-bottom { grid-template-columns:1fr; }
  .insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .detail-info-col { border-left:0; padding-left:0; border-top:1px solid var(--border); padding-top:16px; }
}

/* 头像下方竖排两张方形生活照（生活照 2、3） */
.detail-avatar-col { display:flex; flex-direction:column; align-items:center; gap:10px; flex-shrink:0; }
.detail-side-photo {
  width:96px; height:96px; border-radius:10px; overflow:hidden; display:block;
  border:1px solid rgba(255,255,255,.14); background:var(--card2-bg);
}
.detail-side-photo img { width:100%; height:100%; object-fit:cover; }
/* 多鱼币就地修改 */
.detail-coin-row { display:flex; align-items:center; gap:6px; }
.detail-coin-row input { width:80px; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); font-weight:700; }
.detail-coin-save { padding:4px 10px; border-radius:6px; border:0; background:var(--green); color:#0b1a12; font-weight:800; cursor:pointer; white-space:nowrap; }
/* 右下角客服未读提醒 */
.service-inbox-pill { position:fixed; right:20px; bottom:20px; z-index:900; width:290px; max-height:380px; overflow:auto;
  background:rgba(20,24,34,.97); border:1px solid var(--border); border-radius:12px; box-shadow:0 18px 40px rgba(0,0,0,.35); padding:10px; }
.service-inbox-head { font-weight:800; font-size:13px; margin:2px 4px 8px; color:var(--green); }
.service-inbox-row { display:grid; grid-template-columns:1fr auto; gap:2px 8px; width:100%; text-align:left; background:rgba(255,255,255,.05);
  border:0; border-radius:8px; padding:8px 10px; margin-bottom:6px; color:var(--text); cursor:pointer; }
.service-inbox-row:hover { background:rgba(255,255,255,.1); }
.service-inbox-row span { grid-column:1 / -1; color:var(--text2); font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.service-inbox-row em { font-style:normal; background:#E04269; color:#fff; border-radius:10px; padding:1px 7px; font-size:12px; font-weight:800; align-self:center; }