.vg-alert,
.pw-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: var(--vg-radius);
    font-size: .94rem;
    line-height: 1.5;
    background: var(--vg-info-soft);
    border-color: color-mix(in srgb, var(--vg-info) 30%, transparent);
    border-left-color: var(--vg-info);
    color: var(--vg-heading);
}

.vg-alert + .vg-alert {
    margin-top: 10px;
}

.vg-alert__icon {
    margin-top: 1px;
    color: var(--vg-info);
}

.vg-alert__text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.vg-alert__title {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.vg-alert--ok,
.pw-alert--ok {
    background: var(--vg-ok-soft);
    border-color: color-mix(in srgb, var(--vg-ok) 30%, transparent);
    border-left-color: var(--vg-ok);
}

.vg-alert--ok .vg-alert__icon {
    color: var(--vg-ok);
}

.vg-alert--err,
.pw-alert--err {
    background: var(--vg-err-soft);
    border-color: color-mix(in srgb, var(--vg-err) 30%, transparent);
    border-left-color: var(--vg-err);
}

.vg-alert--err .vg-alert__icon {
    color: var(--vg-err);
}

.vg-alert--warn,
.pw-alert--warn {
    background: var(--vg-warn-soft);
    border-color: color-mix(in srgb, var(--vg-warn) 30%, transparent);
    border-left-color: var(--vg-warn);
}

.vg-alert--warn .vg-alert__icon {
    color: var(--vg-warn);
}

.vg-alert-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.vg-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    padding: 18px 22px;
    border-radius: var(--vg-radius-lg);
    background: var(--vg-surface);
    border: 1px solid var(--vg-border);
    box-shadow: var(--vg-shadow-sm);
}

.vg-notice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--vg-err);
    color: #fff;
    flex: none;
}

.vg-notice__body {
    flex: 1 1 260px;
    min-width: 0;
}

.vg-notice__title {
    font-weight: 700;
    color: var(--vg-heading);
}

.vg-notice__text {
    color: var(--vg-muted);
    font-size: .92rem;
}