:root {
	--za-cyan: #56e4ff;
	--za-purple: #7e4bdc;
	--za-green: #3fd97f;
	--za-red: #ff8a8a;
	--za-yellow: #ffcc66;
}

/* --- ZA Toast System --- */
#za-toast-root {
	position: fixed;
	inset: auto 12px 16px 12px;
	z-index: 70;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
	transition: bottom .35s cubic-bezier(.22, 1, .36, 1);
}

/* Desktop rechts unten */
@media (min-width: 641px) {
	#za-toast-root {
		inset: auto 20px 20px auto;
		max-width: 380px;
	}
}

.za-toast {
	--toast-color: var(--za-cyan);
	--toast-glow: rgba(86, 228, 255, .55);
	--tx: 0px;
	--ty: 0px;
	--scale: 1;
	
	pointer-events: auto;
	position: relative;
	overflow: hidden;
	
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
	
	padding: 14px 14px 16px;
	border-radius: 18px;
	
	background:
		radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--toast-color) 25%, transparent), transparent 60%),
		rgba(15, 18, 40, .85);
	
	border: 1px solid color-mix(in srgb, var(--toast-color) 45%, transparent);
	backdrop-filter: blur(18px);

	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .04),
		0 10px 30px rgba(0, 0, 0, .45),
		0 0 22px var(--toast-glow);
	
	transform: translate(var(--tx), var(--ty)) scale(var(--scale));
	opacity: 0;
	
	animation: zaToastIn .45s cubic-bezier(.22, 1, .36, 1) forwards;
	
	touch-action: manipulation;
	will-change: transform, opacity;
}

@keyframes zaToastIn {
	to {
		opacity: 1;
		--ty: 0px;
		--scale: 1;
	}
}

.za-toast::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 10px;
	width: 34px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	opacity: .6;
}

.za-toast.out {
	animation: zaToastOut .35s cubic-bezier(.4, 0, 1, 1) forwards;
}

@keyframes zaToastOut {
	to { opacity: 0; transform: translateY(10px) scale(.92); }
}

/* Icon */
.za-toast-icon {
	width: 34px;
	height: 34px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
	color: #061018;
	background: linear-gradient(
		135deg,
		var(--toast-color),
		#fff
	);
	box-shadow: 0 0 14px var(--toast-glow);
}

/* Content */
.za-toast-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.za-toast-title {
	font-size: .8rem;
	font-weight: 900;
	letter-spacing: .3px;
	color: #fff;
}

.za-toast-msg {
	font-size: .72rem;
	opacity: .85;
	line-height: 1.35;
}

/* Actions */
.za-toast-actions {
	display: flex;
	gap: 6px;
}

.za-toast-action {
	font-size: .65rem;
	font-weight: 800;
	padding: 6px 10px;
	border-radius: 999px;
	border: none;
	cursor: pointer;
	color: #061018;
	background: linear-gradient(
		135deg,
		var(--toast-color),
		#fff
	);
}

/* Progress Bar */
.za-toast-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: linear-gradient(
		90deg,
		var(--toast-color),
		transparent
	);
	transform-origin: left;
	animation: zaToastProgress linear forwards;
}

@keyframes zaToastProgress {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

/* Type Colors */
.za-toast.success {
	--toast-color: var(--za-green);
	--toast-glow: rgba(63, 217, 127, .55);
}

.za-toast.error {
	--toast-color: var(--za-red);
	--toast-glow: rgba(255, 138, 138, .55);
}

.za-toast.warning {
	--toast-color: var(--za-yellow);
	--toast-glow: rgba(255, 204, 102, .55);
}

.za-toast.info {
	--toast-color: var(--za-cyan);
	--toast-glow: rgba(86, 228, 255, .55);
}

.za-toast.system {
	--toast-color: var(--za-purple);
	--toast-glow: rgba(126, 75, 220, .55);
}

.za-toast.dragging {
	touch-action: none;
	transition: none;
	will-change: transform, opacity;
}

.za-toast-controls {
	display: flex;
	align-items: flex-start;
	gap: 6px;
}

.za-toast-close {
	background: none;
	border: none;
	color: #fff;
	opacity: .5;
	cursor: pointer;
	font-size: .9rem;
}

.za-toast-close:hover {
	color: rgba(255, 47, 47, .45);
}

/* Pin Button */
.za-toast-pin {
	background: none;
	border: none;
	cursor: pointer;
	color: #fff;
	opacity: .55;
	font-size: .9rem;
	line-height: 1;
	padding: 6px;
	border-radius: 10px;
}

.za-toast-pin:hover { opacity: .95; }

.za-toast-pin,
.za-toast-close {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

.za-toast.pinned {
	display: flex;
	flex-direction: column;
	gap: 8px;
	
	border-color: color-mix(in srgb, var(--toast-color) 65%, transparent);
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, .06),
		0 12px 34px rgba(0, 0, 0, .50),
		0 0 30px var(--toast-glow);
}

.za-toast.pinned .za-toast-progress { display: none !important; }

.za-toast.pinned .za-toast-pin {
	color: #061018;
	background: linear-gradient(
		135deg,
		var(--toast-color),
		#fff
	);
	box-shadow: 0 0 12px var(--toast-glow);
	opacity: 1;
}

/* Merge Counter Badge */
.za-toast-count {
	position: absolute;
	top: 10px;
	right: 44px;
	min-width: 22px;
	padding: 0 6px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .65rem;
	font-weight: 900;
	letter-spacing: .2px;
	color: #061018;
	background: linear-gradient(
		135deg,
		var(--toast-color),
		#fff
	);
	box-shadow: 0 0 12px var(--toast-glow);
	transform: scale(.92);
	opacity: .95;
}

/* Merge Pulse */
.za-toast.merge-pulse {
	animation: zaToastMergePulse .45s cubic-bezier(.22, 1, .36, 1);
}

@keyframes zaToastMergePulse {
	0% { transform: translateY(0) scale(1); }
	45% { transform: translateY(-2px) scale(1.03); }
	100% { transform: translateY(0) scale(1); }
}

.za-toast.pinned > .za-toast-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px;
	align-items: center;
}

.za-toast.pinned .za-toast-count {
	position: static;
	min-width: 30px;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: .65rem;
	font-weight: 900;
	letter-spacing: .2px;
	color: #061018;
	background: linear-gradient(135deg, var(--toast-color), #fff);
	box-shadow: 0 0 12px var(--toast-glow);
	opacity: .95;
}