/* WXSSC V68.6-I4 flash sidebar product matrix
   Visual only. Keep existing main feed / SSE / API logic.
*/

html body .wx55-side{
  gap:12px !important;
}

html body .wx55-side .wx55-card,
html body .wx55-side .wx-v6569a-side-card,
html body .wx55-side .wx-i4-card{
  width:100% !important;
  border-radius:14px !important;
  border:1px solid rgba(148,163,184,.16) !important;
  background:rgba(255,255,255,.97) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

html body .wx-i4-card-head{
  height:40px;
  padding:0 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(148,163,184,.13);
  background:#fff;
}

html body .wx-i4-card-head b{
  color:#0f172a;
  font-size:15px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.02em;
}

html body .wx-i4-card-head span,
html body .wx-i4-card-head a{
  color:#64748b;
  font-size:11.5px;
  font-weight:850;
  text-decoration:none;
  white-space:nowrap;
}

html body .wx-i4-products{
  padding:8px;
  display:grid;
  grid-template-columns:1fr;
  gap:7px;
}

html body .wx-i4-product{
  min-height:42px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:7px 10px;
  border-radius:11px;
  border:1px solid rgba(148,163,184,.13);
  background:linear-gradient(180deg,#fbfdff,#fff);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease,border-color .15s ease,background .15s ease;
}

html body .wx-i4-product:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.24);
  background:#fff;
}

html body .wx-i4-product i{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-style:normal;
  font-size:12px;
  font-weight:1000;
  background:#eff6ff;
  color:#2563eb;
}

html body .wx-i4-product.vip i{
  background:#fff7ed;
  color:#b45309;
}

html body .wx-i4-product.group i{
  background:#f0fdf4;
  color:#15803d;
}

html body .wx-i4-product b{
  display:block;
  color:#0f172a;
  font-size:13px;
  line-height:1.15;
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html body .wx-i4-product span{
  display:block;
  margin-top:2px;
  color:#64748b;
  font-size:11px;
  line-height:1.15;
  font-weight:760;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html body .wx-i4-product em{
  color:#64748b;
  font-style:normal;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.04em;
}

html body .wx-i4-market{
  padding:8px 10px 9px;
}

html body .wx-i4-market-top{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin-bottom:6px;
}

html body .wx-i4-market-chip{
  min-height:42px;
  padding:6px;
  border-radius:11px;
  border:1px solid rgba(148,163,184,.14);
  background:#fbfdff;
}

html body .wx-i4-market-chip span{
  display:block;
  color:#64748b;
  font-size:10.5px;
  line-height:1.1;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html body .wx-i4-market-chip b{
  display:block;
  margin-top:4px;
  color:#e11d48;
  font-size:14px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.03em;
}

html body .wx-i4-market-row{
  min-height:31px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:5px 0;
  border-top:1px solid rgba(148,163,184,.11);
}

html body .wx-i4-market-row b{
  display:block;
  color:#0f172a;
  font-size:12px;
  line-height:1.15;
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html body .wx-i4-market-row span{
  display:block;
  color:#94a3b8;
  font-size:10.5px;
  line-height:1.1;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html body .wx-i4-market-row strong{
  color:#2563eb;
  font-size:13px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.02em;
  white-space:nowrap;
}

html body .wx-i4-hot{
  padding:8px;
  display:grid;
  gap:7px;
}

html body .wx-i4-hot-row{
  min-height:39px;
  display:grid;
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:7px 9px;
  border-radius:11px;
  border:1px solid rgba(148,163,184,.13);
  background:#fbfdff;
  cursor:pointer;
}

html body .wx-i4-hot-rank{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#fff;
  background:#2563eb;
  font-size:12px;
  font-weight:1000;
}

html body .wx-i4-hot-row:nth-child(1) .wx-i4-hot-rank{background:#ef4444;}
html body .wx-i4-hot-row:nth-child(2) .wx-i4-hot-rank{background:#f59e0b;}
html body .wx-i4-hot-row:nth-child(3) .wx-i4-hot-rank{background:#2563eb;}
html body .wx-i4-hot-row:nth-child(4) .wx-i4-hot-rank{background:#64748b;}

html body .wx-i4-hot-row b{
  display:block;
  color:#0f172a;
  font-size:12px;
  font-weight:950;
  line-height:1.1;
}

html body .wx-i4-hot-row span{
  display:block;
  margin-top:2px;
  color:#94a3b8;
  font-size:10.5px;
  font-weight:780;
}

html body .wx-i4-hot-row em{
  min-width:44px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#eff6ff;
  color:#2563eb;
  font-size:11px;
  font-weight:1000;
  font-style:normal;
}

html body .wx-i4-community{
  padding:9px;
  display:grid;
  gap:8px;
}

html body .wx-i4-community-main{
  padding:11px;
  border-radius:12px;
  background:
    radial-gradient(circle at 100% 0%,rgba(37,99,235,.10),transparent 38%),
    linear-gradient(180deg,#fbfdff,#fff);
  border:1px solid rgba(148,163,184,.14);
}

html body .wx-i4-community-main b{
  display:block;
  color:#0f172a;
  font-size:13px;
  font-weight:1000;
}

html body .wx-i4-community-main span{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:11.5px;
  line-height:1.45;
  font-weight:760;
}

html body .wx-i4-community-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

html body .wx-i4-community-actions a{
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  text-decoration:none;
  font-size:12px;
  font-weight:950;
  background:#2563eb;
  color:#fff;
}

html body .wx-i4-community-actions a:last-child{
  background:#f8fafc;
  color:#2563eb;
  border:1px solid rgba(37,99,235,.16);
}

html body .wx-i4-side-note{
  color:#94a3b8;
  font-size:10.5px;
  font-weight:760;
}

/* 隐藏旧侧栏卡片内部残留，但不影响新结构 */
html body .wx55-side > .wx55-card.is-i4-rebuilt > .wx55-product,
html body .wx55-side > .wx55-card.is-i4-rebuilt > .wx55-market,
html body .wx55-side > .wx55-card.is-i4-rebuilt > .wx55-mini,
html body .wx55-side > .wx55-card.is-i4-rebuilt > .wx55-calendar{
  display:none !important;
}