.jl-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.jl-alert__icon { flex: none; margin-top: 1px; display: inline-flex; }
.jl-alert__icon svg { width: 18px; height: 18px; }
.jl-alert__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jl-alert__title { font-weight: var(--weight-semibold); color: var(--text-primary); }
.jl-alert__text { color: var(--text-secondary); }
.jl-alert__close {
  flex: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: var(--transition-control);
}
.jl-alert__close:hover { background: var(--surface-active); color: var(--text-primary); }

.jl-alert--info    { background: var(--info-subtle); border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.jl-alert--info .jl-alert__icon, .jl-alert--info .jl-alert__title { color: var(--info-text); }
.jl-alert--success { background: var(--success-subtle); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.jl-alert--success .jl-alert__icon, .jl-alert--success .jl-alert__title { color: var(--success-text); }
.jl-alert--warning { background: var(--warning-subtle); border-color: color-mix(in srgb, var(--warning) 24%, transparent); }
.jl-alert--warning .jl-alert__icon, .jl-alert--warning .jl-alert__title { color: var(--warning-text); }
.jl-alert--danger  { background: var(--danger-subtle); border-color: color-mix(in srgb, var(--danger) 24%, transparent); }
.jl-alert--danger .jl-alert__icon, .jl-alert--danger .jl-alert__title { color: var(--danger-text); }