.csi-sbs-wrap{position:relative;overflow:hidden;padding:4px;background:transparent;z-index:1;isolation:auto}
.csi-sbs-wrap:before,.csi-sbs-wrap:after{content:"";position:absolute;top:0;bottom:0;width:42px;z-index:0;pointer-events:none}
.csi-sbs-wrap:before{left:0;background:linear-gradient(to right,#fff 0%,rgba(255,255,255,0) 100%)}
.csi-sbs-wrap:after{right:0;background:linear-gradient(to left,#fff 0%,rgba(255,255,255,0) 100%)}
.csi-sbs-viewport{overflow:hidden;position:relative;z-index:0}
.csi-sbs-track{display:flex;align-items:stretch;gap:14px;width:max-content;animation:csiSbsScrollX var(--csi-sbs-speed,28s) linear infinite;will-change:transform;position:relative;z-index:0}
.csi-sbs-wrap:hover .csi-sbs-track{animation-play-state:paused}

.csi-sbs-item{width:112px;min-width:112px;display:flex;flex-direction:column;align-items:stretch}
.csi-sbs-item-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:12px 10px 11px;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);border:1px solid rgba(0,34,85,.08);border-radius:18px;box-shadow:0 8px 22px rgba(16,24,40,.08),0 2px 6px rgba(16,24,40,.04);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;height:100%}
.csi-sbs-item:hover .csi-sbs-item-card{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,34,85,.13),0 4px 10px rgba(16,24,40,.06);border-color:rgba(0,34,85,.14)}

.csi-sbs-avatar-link{text-decoration:none}
.csi-sbs-avatar{width:72px;height:72px;border-radius:999px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#eef4ff 0%,#dde8ff 100%);box-shadow:inset 0 0 0 3px #fff,0 6px 14px rgba(0,34,85,.10);transition:transform .22s ease}
.csi-sbs-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.csi-sbs-avatar-fallback{font:700 26px/1 Arial,sans-serif;color:#002255}
.csi-sbs-item:hover .csi-sbs-avatar{transform:scale(1.03)}

.csi-sbs-name{margin-top:10px;max-width:100%;font:600 13px/1.35 Roboto,Arial,sans-serif;color:#0f172a;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.csi-sbs-name:hover{color:#002255}

@keyframes csiSbsScrollX{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@keyframes csiSbsScrollY{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 7px))}}

@media (min-width:768px){
  .csi-sbs-wrap{padding:4px}
  .csi-sbs-wrap:before,.csi-sbs-wrap:after{width:100%;height:34px;left:0;right:0;top:auto;bottom:auto}
  .csi-sbs-wrap:before{top:0;background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 100%)}
  .csi-sbs-wrap:after{bottom:0;background:linear-gradient(to top,#fff 0%,rgba(255,255,255,0) 100%)}
  .csi-sbs-viewport{height:390px}
  .csi-sbs-track{flex-direction:column;align-items:center;gap:14px;animation:csiSbsScrollY var(--csi-sbs-speed,28s) linear infinite}
  .csi-sbs-item{width:138px;min-width:138px}
  .csi-sbs-item-card{padding:13px 12px 12px;border-radius:20px}
  .csi-sbs-avatar{width:86px;height:86px}
  .csi-sbs-name{font-size:14px;min-height:38px}
}
.csi-sbs-item,.csi-sbs-item-card,.csi-sbs-avatar-link,.csi-sbs-avatar,.csi-sbs-name{position:relative;z-index:0}
.csi-sbs-wrap,.csi-sbs-viewport,.csi-sbs-track,.csi-sbs-item,.csi-sbs-item-card{z-index:1}