.nbw-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  max-width: 360px;
  margin: 0 auto;
}
.nbw-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.nbw-thumb {
  height: 200px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.news-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: 4px;
}

/* === 20 Styles === */
.style1 { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: white; }
.style2 { background: var(--badge-color); border-radius: 4px; box-shadow: 0 0 8px var(--badge-color), 0 0 16px var(--badge-color); color: white; }
.style3 { background: transparent; border: 2px solid var(--badge-color); color: var(--badge-color); }
.style4 { background: var(--badge-color); color: white; }
.style5 { background: linear-gradient(135deg, var(--badge-color), #000); color: white; }
.style6 { background: var(--badge-color); color: white; border-radius: 50px; padding: 4px 16px; }
.style7 { background: var(--badge-color); color: white; border-radius: 12px; }
.style8 { background: var(--badge-color); color: white; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.style9 { background: white; color: var(--badge-color); border: 2px solid var(--badge-color); }
.style10 { background: transparent; color: var(--badge-color); font-weight: 500; padding: 4px 0; }
.style11 { background: var(--badge-color); color: white; padding: 6px 20px; transform: rotate(-45deg); left: -20px; top: 16px; width: 120px; text-align: center; position: absolute !important; }
.style12 { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); background: var(--badge-color); color: white; padding: 8px 24px; width: 100px; text-align: center; }
.style13 { background: var(--badge-color); color: white; border-radius: 0 8px 8px 0; padding: 6px 16px 6px 24px; position: relative; }
.style13::before { content: ''; position: absolute; left: -8px; top: 50%; transform: translateY(-50%); border-width: 8px 8px 8px 0; border-style: solid; border-color: transparent var(--badge-color) transparent transparent; }
.style14 { background: var(--badge-color); color: white; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); transform: translateZ(4px); }
.style15 { background: #0078d7; color: white; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
.style16 { background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: white; bottom: 0; top: auto; left: 0; width: 100%; padding: 12px; border-radius: 0 0 8px 8px; text-align: center; position: absolute !important; }
.style17 { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: white; border-radius: 10px; }
.style18 { background: radial-gradient(circle at 30% 30%, #ffffff40, var(--badge-color)); color: white; border-radius: 6px; }
.style19 { background: var(--badge-color); opacity: 0.85; color: #333; font-weight: 600; }
.style20 { /* custom */ }

/* Dark mode */
body.dark-mode .nbw-card,
body[data-theme="dark"] .nbw-card {
  background: #1e1e1e;
  color: #e0e0e0;
}
body.dark-mode .nbw-excerpt,
body[data-theme="dark"] .nbw-excerpt {
  color: #aaa;
}

.nbw-content {
  padding: 16px;
}
.nbw-title {
  font-size: 18px;
  margin: 0 0 10px;
  font-weight: 700;
}
.nbw-excerpt {
  font-size: 14px;
  color: #666;
  margin: 0;
}