:root{
  --bg:#0b0d10;
  --card:#12161c;
  --txt:#e9eef5;
  --mut:#9aa6b2;
  --line:#232b35;
  --acc:#ff2bb3;
}
*{ box-sizing:border-box; }
html,body{ width:100%; height:100%; margin:0; background:var(--bg); }
.wBody{
  margin:0;
  font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--txt);
}
.wWrap{ padding:18px; background:var(--bg); }
.wGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){
  .wGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px){
  .wGrid{ grid-template-columns:1fr; }
}

.wCard{
  -webkit-appearance:none;
  appearance:none;
  border:1px solid var(--line);
  border-radius:18px;
  padding:12px;
  background:rgba(18,22,28,.95);
  color:inherit;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wCard:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.18);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.wCard:active{ transform:translateY(0); }
.wCard:focus-visible{
  outline:2px solid rgba(255,43,179,.55);
  outline-offset:2px;
}

.wCover{
  width:100%;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
}
.wCoverImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.wCardBody{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height:0;
}
.wRow{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  min-width:0;
}
.wTag{
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(15,19,24,.55);
  white-space:nowrap;
}
.wMeta{
  font-size:11px;
  color:var(--mut);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-left:auto;
  text-align:right;
}

.wH{
  margin:0;
  font-size:16px;
  font-weight:800;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.wSmall{ margin:0; color:var(--mut); font-size:12px; }

.wFacts{
  margin-top:6px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.wFact{
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 10px;
  background:rgba(15,19,24,.6);
  display:flex;
  justify-content:space-between;
  gap:10px;
  min-width:0;
}
.wFact span{
  font-size:12px;
  color:var(--mut);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wFact b{
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  .wCard{ transition:none; }
  .wCard:hover{ transform:none; }
}