/* YPG CVE Explainers Pro v2.0 - Enhanced UI */
.ypg-explainer{
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:20px;
  margin-top:24px;
  background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ypg-explainer h2{
  margin:0 0 16px;
  font-size:22px;
  color:#ef7e1b;
  border-bottom: 2px solid #ef7e1b;
  padding-bottom: 8px;
}

.ypg-explainer-content{
  line-height:1.7;
  color:#111827;
}

/* Step styling */
.ypg-explainer-content .step{
  margin: 12px 0;
  padding-left: 36px;
  position: relative;
}

.ypg-explainer-content .step-number{
  position: absolute;
  left: 0;
  top: 0;
  background: #ef7e1b;
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
}

/* Icons */
.ypg-explainer-content .icon{
  display: inline-block;
  margin-right: 4px;
}

.ypg-explainer-content .icon-check{
  color: #10b981;
}

.ypg-explainer-content .icon-x{
  color: #ef4444;
}

.ypg-explainer-content .icon-alert{
  color: #f59e0b;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Strong emphasis */
.ypg-explainer-content strong{
  color: #0f172a;
  font-weight: 600;
}

/* Lists within content */
.ypg-explainer-content ul{
  margin: 8px 0 8px 20px;
  padding: 0;
}

.ypg-explainer-content li{
  margin: 4px 0;
}

/* Links at bottom */
.ypg-explainer__links{
  margin:16px 0 0 0;
  padding:12px 0 0 0;
  border-top: 1px solid #e5e7eb;
  list-style:none;
}

.ypg-explainer__links li{
  margin:6px 0;
}

.ypg-explainer__links a{
  color: #0b5fff;
  text-decoration: none;
  font-weight: 500;
}

.ypg-explainer__links a:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .ypg-explainer{
    padding: 16px;
  }
  
  .ypg-explainer h2{
    font-size: 19px;
  }
}