: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; justify-content:space-between; align-items:center; }
.csw-wp__footer-info { display:flex; gap:10px; flex-wrap:wrap; }
.csw-wp__details-btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 16px; border-radius:8px;
  background:var(--csw-wp-accent); color:#fff;
  font-size:13px; font-weight:600; text-decoration:none;
  transition: background 0.2s ease, transform 0.15s ease;
}
.csw-wp__details-btn:hover {
  background:var(--csw-wp-accent-2);
  transform:translateY(-1px);
}

/* Responsive Design - cricket_score_widget */
@media (max-width: 992px) {
  .csw-wp__wrap { padding: 14px; }
  .csw-wp__match-title { font-size: 18px; }
  .csw-wp__runs { font-size: 20px; }
}

@media (max-width: 768px) {
  .csw-wp__wrap { padding: 12px; }
  .csw-wp__match-title { font-size: 16px; }
  .csw-wp__subtitle { font-size: 13px; }
  .csw-wp__badge { font-size: 11px; padding: 5px 8px; }
  .csw-wp__logo { width: 38px; height: 38px; }
  .csw-wp__runs { font-size: 18px; }
  .csw-wp__overs { font-size: 11px; }
  .csw-wp__chip { font-size: 12px; padding: 6px 8px; }
}

@media (max-width: 640px) {
  .csw-wp__wrap { padding: 10px; }
  .csw-wp__top { flex-direction: column; align-items: flex-start; }
  .csw-wp__left { min-width: 100%; }
  .csw-wp__status { width: 100%; justify-content: center; }
  .csw-wp__teams { grid-template-columns: 1fr; gap: 8px; }
  .csw-wp__team { padding: 10px; gap: 10px; }
  .csw-wp__logo { width: 36px; height: 36px; }
  .csw-wp__match-title { font-size: 15px; }
  .csw-wp__runs { font-size: 16px; }
  .csw-wp__abbr { font-size: 11px; }
  .csw-wp__name { font-size: 14px; }
}

@media (max-width: 480px) {
  .csw-wp__wrap { padding: 8px; }
  .csw-wp__card { border-radius: 12px; }
  .csw-wp__badge { font-size: 10px; padding: 4px 6px; }
  .csw-wp__match-title { font-size: 14px; }
  .csw-wp__subtitle { font-size: 12px; }
  .csw-wp__status { font-size: 12px; padding: 5px 8px; }
  .csw-wp__team { padding: 8px; gap: 8px; }
  .csw-wp__logo { width: 32px; height: 32px; }
  .csw-wp__abbr { font-size: 10px; }
  .csw-wp__name { font-size: 13px; }
  .csw-wp__runs { font-size: 15px; }
  .csw-wp__overs { font-size: 10px; }
  .csw-wp__chip { font-size: 11px; padding: 5px 7px; }
  .csw-wp__footer { font-size: 11px; flex-direction: column; align-items: stretch; }
  .csw-wp__details-btn { font-size: 12px; padding: 6px 12px; justify-content: center; }
  .csw-wp__note { font-size: 12px; }
  .csw-wp__note svg { width: 16px; height: 16px; }
}

@media (max-width: 360px) {
  .csw-wp__wrap { padding: 6px; }
  .csw-wp__match-title { font-size: 13px; }
  .csw-wp__team { padding: 6px; }
  .csw-wp__logo { width: 28px; height: 28px; }
  .csw-wp__name { font-size: 12px; }
  .csw-wp__runs { font-size: 14px; }
}

.csw-wp-error { color:#c00; background:#fee; border:1px solid #fbb; padding:10px; border-radius:8px; }
