:root{
  --csw-wp-bg: #f7fafc;
  --csw-wp-card: #ffffff;
  --csw-wp-text: #0c1a2a;
  --csw-wp-muted: #5b6c7b;
  --csw-wp-border: #e2e8f0;
  --csw-wp-accent: #0d6efd;
  --csw-wp-accent-2: #5bc0ff;
  --csw-wp-good: #1fa55b;
  --csw-wp-chip: #f1f5f9;
  --csw-wp-shadow: 0 8px 22px rgba(16,38,74,.08);
}
.csw-wp, .csw-wp * { box-sizing: border-box; }
.csw-wp { display:block; color:var(--csw-wp-text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; }

.csw-wp__card {
  background: var(--csw-wp-card);
  border: 1px solid var(--csw-wp-border);
  border-radius: 16px;
  box-shadow: var(--csw-wp-shadow);
  overflow: hidden;
}
.csw-wp__bar { height:6px; background: linear-gradient(90deg, var(--csw-wp-accent), var(--csw-wp-accent-2)); }
.csw-wp__wrap { padding:16px; background: var(--csw-wp-bg); }

.csw-wp__top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.csw-wp__left { display:flex; flex-direction:column; gap:6px; min-width:220px; }
.csw-wp__title-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.csw-wp__badge {
  font-size:12px; letter-spacing:.3px; text-transform:uppercase;
  background: var(--csw-wp-chip); color: var(--csw-wp-muted);
  padding:6px 10px; border-radius:20px; border:1px solid var(--csw-wp-border);
  white-space:nowrap;
}

.csw-wp__match-title { margin:0; font-size:20px; font-weight:800; }
.csw-wp__subtitle { color:var(--csw-wp-muted); font-size:14px; }
.csw-wp__status {
  display:inline-flex; align-items:center; gap:8px; font-weight:700;
  padding:6px 10px; border-radius:10px; border:1px solid var(--csw-wp-border);
  background:#eef6ff; color:#0b4fa2;
}

.csw-wp__teams { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.csw-wp__team {
  display:flex; align-items:center; gap:12px;
  padding:12px; border:1px solid var(--csw-wp-border); border-radius:14px; background:#fff;
}
.csw-wp__team--win { outline:2px solid rgba(31,165,91,.35); background:#f2fcf6; }
.csw-wp__team--lose { opacity:.98; }
.csw-wp__logo {
  width:42px; height:42px; border-radius:10px; background:#f1f5f9; display:grid; place-items:center; overflow:hidden; border:1px solid var(--csw-wp-border);
}
.csw-wp__logo img { width:100%; height:100%; object-fit:contain; }
.csw-wp__abbr { font-weight:800; font-size:12px; color:var(--csw-wp-muted); }
.csw-wp__name { font-weight:700; }
.csw-wp__name-box { display:flex; flex-direction:column; }
.csw-wp__score { margin-left:auto; text-align:right; }
.csw-wp__runs { font-weight:900; font-size:22px; line-height:1; }
.csw-wp__overs { font-size:12px; color:var(--csw-wp-muted); margin-top:4px; }

.csw-wp__progress {
  margin-top:14px; background:#eef2f7; border:1px solid var(--csw-wp-border);
  border-radius:10px; height:10px; position:relative; overflow:hidden;
}
.csw-wp__progress > span {
  position:absolute; inset:0; width:0%;
  background: linear-gradient(90deg, var(--csw-wp-good), #97e4b7);
  transition: width .4s ease;
}

.csw-wp__note { margin-top:10px; font-weight:700; display:flex; align-items:center; gap:8px; }
.csw-wp__meta { margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.csw-wp__chip {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px; background:var(--csw-wp-chip);
  color:var(--csw-wp-muted); border:1px solid var(--csw-wp-border);
  font-size:13px;
}
.csw-wp__chip b { color:var(--csw-wp-text); }
.csw-wp__footer { margin-top:10px; color:var(--csw-wp-muted); font-size:12px; display:flex; gap:10px; flex-wrap:wrap; }

@media (max-width:520px){
  .csw-wp__teams { grid-template-columns:1fr; }
  .csw-wp__status { width:100%; justify-content:center; }
}

.csw-wp-error { color:#c00; background:#fee; border:1px solid #fbb; padding:10px; border-radius:8px; }