.app-notifications {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 2000;
	display: grid;
	gap: 10px;
	width: min(380px, calc(100vw - 32px));
	pointer-events: none;
}

.app-notification {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) 28px;
	align-items: start;
	gap: 12px;
	padding: 15px 14px;
	border: 1px solid var(--bs-border-color, #e2e8f0);
	border-left: 3px solid #64748b;
	border-radius: 12px;
	background: var(--bs-body-bg, #fff);
	color: var(--bs-body-color, #172033);
	box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
	opacity: 0;
	transform: translate3d(18px, -5px, 0);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: auto;
}

.app-notification.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.app-notification > .bi { padding-top: 2px; font-size: 18px; }
.app-notification-copy { display: grid; gap: 3px; min-width: 0; }
.app-notification-copy strong { font-size: 13px; font-weight: 750; }
.app-notification-copy span { color: var(--bs-secondary-color, #64748b); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.app-notification-close { display: grid; place-items: center; width: 28px; height: 28px; margin: -5px -4px 0 0; border: 0; border-radius: 7px; background: transparent; color: var(--bs-secondary-color, #64748b); font-size: 18px; }
.app-notification-close:hover { background: rgba(100, 116, 139, .12); }
.app-notification-success { border-left-color: #16a34a; }
.app-notification-success > .bi { color: #16a34a; }
.app-notification-error { border-left-color: #dc2626; }
.app-notification-error > .bi { color: #dc2626; }
.app-notification-warning { border-left-color: #d97706; }
.app-notification-warning > .bi { color: #d97706; }
.app-notification-info { border-left-color: #2563eb; }
.app-notification-info > .bi { color: #2563eb; }

.jconfirm .jconfirm-box { border: 1px solid var(--bs-border-color, #e2e8f0); border-radius: 16px; box-shadow: 0 20px 60px rgba(15, 23, 42, .22); }
.jconfirm .jconfirm-box .jconfirm-title-c { padding-bottom: 8px; }
.jconfirm .jconfirm-box .jconfirm-content { color: var(--bs-secondary-color, #475569); line-height: 1.6; }
.jconfirm .jconfirm-box .jconfirm-buttons button { min-width: 92px; border-radius: 8px; text-transform: none; }
.app-prompt-form label { display: grid; gap: 8px; }
.app-prompt-form .form-control { min-height: 42px; }

@media (max-width: 600px) {
	.app-notifications { top: 12px; right: 12px; width: calc(100vw - 24px); }
	.jconfirm .jconfirm-box-container { padding: 0 8px; }
}