:root{
  --card-radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.20);
  --gloss: rgba(255,255,255,.25);
  --ok1:#1aa34a; --ok2:#76e2a9;
  --warn1:#f0b400; --warn2:#ffe08a;
  --danger1:#c62828; --danger2:#ff8a80;
  --edge:#3b2a59;
}
.wpdni-card-wrap{margin-top:10px;}
.dni-card{
  position:relative;border-radius:var(--card-radius);padding:18px 20px;color:#1a1a1a;
  box-shadow: var(--shadow), 0 0 0 3px rgba(0,0,0,.06) inset;
  border: 4px solid var(--edge); overflow:hidden;
}
.dni-card .row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.dni-card .dot{width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}
.dni-card .title{font-weight:800;letter-spacing:.6px}
.dni-card .meta{opacity:.95;margin-top:6px}
.dni-card.ok{background: linear-gradient(135deg,var(--ok1),var(--ok2)); color:#072b16}
.dni-card.warn{background: linear-gradient(135deg,var(--warn1),var(--warn2));}
.dni-card.danger{background: linear-gradient(135deg,var(--danger1),var(--danger2)); color:#fff}
.dni-card:before{content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 20% 10%, var(--gloss), transparent 40%); pointer-events:none;}
.dni-card.ok .dot{background:#0bbf5e}
.dni-card.warn .dot{background:#ffea00}
.dni-card.danger .dot{background:#ff3b30}
.dni-card.ok{animation:pulse 2.8s ease-in-out infinite}
.dni-card.warn{animation:blink 1.6s ease-in-out infinite}
.dni-card.danger{animation:blink 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@keyframes blink{0%,45%,100%{filter:brightness(1)}60%{filter:brightness(1.2)}}