:root {
  --ibg: #ffffff;
  --ifg: #0f172a;    /* slate-900 */
  --iaccent: #16a34a;/* green-600 */
  --iwarn: #ca8a04;  /* amber-600 */
  --ierr: #dc2626;   /* red-600 */
  --iring: 12px;
  --ishadow: 0 10px 25px rgba(2,6,23,0.08), 0 2px 6px rgba(2,6,23,0.04);
}

.info-box {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ibg);
  color: var(--ifg);
  box-shadow: var(--ishadow);
  border: 1px solid rgba(2,6,23,0.06);
}

.info-box .ib-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background:
    radial-gradient(transparent 0 var(--iring), rgba(22,163,74,0.08) var(--iring));
  color: var(--iaccent); font-weight: 800; font-size: 18px;
}

.info-box .ib-content { line-height: 1.45 }
.info-box .ib-title { font-weight: 700; margin: 0 0 4px }
.info-box .ib-desc { margin: 0 }

.info-box .ib-close {
  border: 0; background: transparent; color: #475569;
  font-size: 18px; padding: 2px; cursor: pointer;
}
.info-box .ib-close:hover { color: #0f172a }

/* Variants */
.info-box.warn .ib-icon { color: var(--iwarn); background:
  radial-gradient(transparent 0 var(--iring), rgba(202,138,4,0.08) var(--iring));
}
.info-box.error .ib-icon { color: var(--ierr); background:
  radial-gradient(transparent 0 var(--iring), rgba(220,38,38,0.08) var(--iring));
}