/* SSR Hot Widget (scoped) - responsive PC/Mobile */
.ssr-widget{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  max-width:980px;
  margin:0 auto;
  color:rgba(255,255,255,.92)
}
.ssr-widget .ssr-wrap{
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 14px 50px rgba(0,0,0,.45);
  overflow:hidden
}
.ssr-widget .ssr-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))
}
.ssr-widget .ssr-title{
  font-size:13px;font-weight:950;letter-spacing:.2px;margin:0;
  display:flex;align-items:center;gap:8px;min-width:0
}
.ssr-widget .ssr-dot{
  width:8px;height:8px;border-radius:999px;
  background:linear-gradient(90deg,#00f2ea,#ff0050);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
  flex:0 0 auto
}
.ssr-widget .ssr-actions{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.ssr-widget .ssr-pill{
  font-size:12px;font-weight:900;text-decoration:none;color:rgba(255,255,255,.88);
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  transition:background .12s ease,border-color .12s ease,transform .12s ease,opacity .12s ease;
  white-space:nowrap;user-select:none
}
.ssr-widget .ssr-pill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);transform:translateY(-1px)}
.ssr-widget .ssr-pill:active{transform:translateY(0);opacity:.95}
.ssr-widget .ssr-refresh{cursor:pointer}
.ssr-widget .ssr-refresh[aria-busy='true']{opacity:.65;pointer-events:none}

/* layout */
.ssr-widget .ssr-list{display:grid;gap:12px;padding:12px}
.ssr-widget .ssr-card{
  display:flex;gap:12px;align-items:flex-start;
  padding:10px 10px;
  text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:rgba(0,0,0,.10);
  transition:background .12s ease,transform .12s ease;
  -webkit-tap-highlight-color:transparent
}
.ssr-widget .ssr-card:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}
.ssr-widget .ssr-card:active{transform:translateY(0);background:rgba(255,255,255,.09)}
.ssr-widget .ssr-card:focus-visible{outline:2px solid rgba(125,183,255,.85);outline-offset:2px}

.ssr-widget .ssr-thumb{
  width:66px;height:88px;flex:0 0 auto;
  border-radius:12px;object-fit:cover;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 24px rgba(0,0,0,.35)
}
.ssr-widget .ssr-meta{flex:1 1 auto;min-width:0}
.ssr-widget .ssr-name{
  font-size:13px;font-weight:950;line-height:1.28;margin:0 0 6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word
}
.ssr-widget .ssr-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:12px;color:rgba(255,255,255,.74)}
.ssr-widget .ssr-badge{
  font-size:11px;font-weight:950;padding:3px 8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06)
}
.ssr-widget .ssr-badge.hot{border:none;color:#111;background:linear-gradient(90deg,#00f2ea,#ff0050)}
.ssr-widget .ssr-cta{display:flex;align-items:center;gap:6px;opacity:.9}
.ssr-widget .ssr-arrow{
  display:inline-block;width:18px;height:18px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  line-height:18px;text-align:center;font-weight:950
}

/* skeleton */
.ssr-widget .ssr-skel{pointer-events:none}
.ssr-widget .ssr-skel .ssr-thumb{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08);box-shadow:none}
.ssr-widget .ssr-skel .ssr-name,
.ssr-widget .ssr-skel .ssr-row span{border-radius:10px;background:rgba(255,255,255,.06);color:transparent}
.ssr-widget .ssr-skel .ssr-name{height:34px}
.ssr-widget .ssr-skel .ssr-row span{height:12px;width:140px;display:inline-block}

/* desktop: 3 cards in a row */
@media (min-width: 820px){
  .ssr-widget .ssr-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ssr-widget .ssr-card{flex-direction:column}
  .ssr-widget .ssr-thumb{width:100%;height:auto;aspect-ratio:3/4}
}

/* mobile */
@media (max-width: 520px){
  .ssr-widget{max-width:100%}
  .ssr-widget .ssr-head{padding:11px 12px}
  .ssr-widget .ssr-list{padding:10px;gap:10px}
  .ssr-widget .ssr-card{padding:10px}
  .ssr-widget .ssr-thumb{width:60px;height:80px}
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .ssr-widget .ssr-card, .ssr-widget .ssr-pill{transition:none}
}