:root {
 	--toast-bg: rgba(15, 23, 42, 0.75);
 	--toast-border: rgba(255, 255, 255, 0.12);
 	--toast-fg: #e5e7eb;
 	--toast-info: #60a5fa;
 	--toast-success: #34d399;
 	--toast-error: #f87171;
 }

 .toast-root {
 	position: fixed;
 	top: 18px;
 	left: 0;
 	right: 0;
 	display: grid;
 	justify-content: center;
 	gap: 10px;
 	z-index: 9999;
 	pointer-events: none; /* allow clicks through except on toasts */
 }

 .toast {
 	min-width: 280px;
 	max-width: min(92vw, 680px);
 	color: var(--toast-fg);
 	background: var(--toast-bg);
 	border: 1px solid var(--toast-border);
 	border-radius: 14px;
 	box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
 	backdrop-filter: blur(10px);
 	padding: 12px 14px;
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
 	gap: 10px;
 	pointer-events: auto;
 	transform: translateY(-10px);
 	opacity: 0;
 	animation: toast-in .25s ease forwards;
 }

 .toast .dot { width: 8px; height: 8px; border-radius: 999px; }
 .toast.info .dot { background: var(--toast-info); box-shadow: 0 0 0 6px rgba(96,165,250,.18); }
 .toast.success .dot { background: var(--toast-success); box-shadow: 0 0 0 6px rgba(52,211,153,.18); }
 .toast.error .dot { background: var(--toast-error); box-shadow: 0 0 0 6px rgba(248,113,113,.18); }

 .toast .text { line-height: 1.35; }
 .toast .close { appearance: none; border: 0; background: transparent; color: #cbd5e1; cursor: pointer; border-radius: 8px; padding: 6px; }
 .toast .close:hover { color: #ffffff; background: rgba(255,255,255,.06); }

 @keyframes toast-in { to { transform: translateY(0); opacity: 1; } }
 @keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }