/* Oskurati — toast & dialog premium (oskNotify) */

#oskNotifyRoot {
	--osk-nt-accent: #e60000;
	--osk-nt-accent-soft: rgba(230, 0, 0, 0.22);
	--osk-nt-success: #2ee6a8;
	--osk-nt-warning: #ffb347;
	--osk-nt-info: #7c9cff;
	--osk-nt-bg: rgba(12, 12, 16, 0.82);
	--osk-nt-border: rgba(255, 255, 255, 0.1);
	--osk-nt-text: rgba(255, 255, 255, 0.96);
	--osk-nt-muted: rgba(255, 255, 255, 0.62);
	position: fixed;
	inset: auto 16px 20px auto;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	pointer-events: none;
	max-width: min(420px, calc(100vw - 24px));
}

@media (max-width: 767px) {
	#oskNotifyRoot {
		inset: auto 12px 88px 12px;
		align-items: stretch;
		max-width: none;
	}
}

.osk-notify {
	pointer-events: auto;
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 12px;
	align-items: start;
	padding: 14px 14px 16px;
	border-radius: 18px;
	background: var(--osk-nt-bg);
	border: 1px solid var(--osk-nt-border);
	backdrop-filter: blur(18px) saturate(1.35);
	-webkit-backdrop-filter: blur(18px) saturate(1.35);
	box-shadow:
		0 18px 48px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.03) inset;
	color: var(--osk-nt-text);
	overflow: hidden;
	transform-origin: 100% 100%;
	animation: oskNotifyIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (max-width: 767px) {
	.osk-notify {
		transform-origin: 50% 100%;
	}
}

.osk-notify.is-leaving {
	animation: oskNotifyOut 0.38s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.osk-notify::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), transparent 42%, var(--osk-nt-glow, var(--osk-nt-accent-soft)) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	opacity: 0.9;
}

.osk-notify__orb {
	position: relative;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	display: grid;
	place-items: center;
	flex-shrink: 0;
	background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
		linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.35));
	box-shadow: 0 0 24px var(--osk-nt-glow, var(--osk-nt-accent-soft));
	animation: oskNotifyOrb 2.4s ease-in-out infinite;
}

.osk-notify__orb svg {
	width: 22px;
	height: 22px;
	display: block;
}

.osk-notify__body {
	min-width: 0;
	padding-top: 2px;
}

.osk-notify__title {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.25;
}

.osk-notify__text {
	margin: 4px 0 0;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--osk-nt-muted);
}

.osk-notify__close {
	appearance: none;
	border: 0;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.72);
	width: 28px;
	height: 28px;
	border-radius: 10px;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.osk-notify__close:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transform: scale(1.05);
}

.osk-notify__progress {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 8px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.osk-notify__progress span {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--osk-nt-glow, var(--osk-nt-accent)), rgba(255, 255, 255, 0.85));
	transform-origin: left center;
	animation: oskNotifyProgress var(--osk-nt-dur, 4s) linear forwards;
}

.osk-notify--success { --osk-nt-glow: rgba(46, 230, 168, 0.45); }
.osk-notify--error { --osk-nt-glow: rgba(230, 0, 0, 0.5); }
.osk-notify--warning { --osk-nt-glow: rgba(255, 179, 71, 0.45); }
.osk-notify--info { --osk-nt-glow: rgba(124, 156, 255, 0.45); }

/* Confirm modal */
#oskNotifyModal {
	position: fixed;
	inset: 0;
	z-index: 100001;
	display: grid;
	place-items: center;
	padding: 20px;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.28s ease, visibility 0.28s ease;
}

#oskNotifyModal.is-open {
	pointer-events: auto;
	opacity: 1;
	visibility: visible;
}

.osk-notify-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 4, 8, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: oskNotifyFadeIn 0.35s ease both;
}

.osk-notify-modal__card {
	position: relative;
	width: min(420px, 100%);
	padding: 22px 22px 18px;
	border-radius: 22px;
	background: rgba(14, 14, 18, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
	color: #fff;
	transform: translateY(12px) scale(0.96);
	animation: oskNotifyModalIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.osk-notify-modal__card::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	background: conic-gradient(from 0deg, rgba(230, 0, 0, 0.5), transparent 25%, rgba(124, 156, 255, 0.35), transparent 70%, rgba(230, 0, 0, 0.45));
	opacity: 0.35;
	filter: blur(14px);
	z-index: -1;
	animation: oskNotifySpin 6s linear infinite;
}

.osk-notify-modal__icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
	background: linear-gradient(145deg, rgba(230, 0, 0, 0.25), rgba(0, 0, 0, 0.4));
	box-shadow: 0 0 28px rgba(230, 0, 0, 0.25);
}

.osk-notify-modal__title {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.osk-notify-modal__text {
	margin: 0 0 18px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.68);
}

.osk-notify-modal__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

.osk-notify-modal__btn {
	appearance: none;
	border: 0;
	border-radius: 12px;
	padding: 10px 16px;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.osk-notify-modal__btn:active {
	transform: scale(0.98);
}

.osk-notify-modal__btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.88);
}

.osk-notify-modal__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
}

.osk-notify-modal__btn--primary {
	background: linear-gradient(135deg, #ff2a2a, #c40000);
	color: #fff;
	box-shadow: 0 8px 24px rgba(230, 0, 0, 0.35);
}

.osk-notify-modal__btn--primary:hover {
	box-shadow: 0 10px 28px rgba(230, 0, 0, 0.45);
}

@keyframes oskNotifyIn {
	from { opacity: 0; transform: translateY(16px) scale(0.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes oskNotifyOut {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to { opacity: 0; transform: translateY(8px) scale(0.96); }
}

@keyframes oskNotifyOrb {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50% { transform: scale(1.04); filter: brightness(1.08); }
}

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

@keyframes oskNotifyFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes oskNotifyModalIn {
	from { opacity: 0; transform: translateY(18px) scale(0.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes oskNotifySpin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.osk-notify,
	.osk-notify__orb,
	.osk-notify__progress span,
	.osk-notify-modal__card,
	.osk-notify-modal__card::before {
		animation: none !important;
	}
}