:root {
	--blue: #007bff;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #dc3545;
	--dark-red: #b81929;
	--orange: #fd7e14;
	--dark-orange: #cc640e;
	--yellow: #ffc107;
	--dark-yellow: #bb8e09;
	--green: #28a745;
	--dark-green: #279641;
	--teal: #20c997;
	--cyan: #17a2b8;
	--dark-cyan: #0f8fa3;
	--white: #fff;
	--gray: #6c757d;
	--dark-gray: #343a40;
	--darker-gray: #282c31;
	--primary: #007bff;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #dc3545;
	--light: #f8f9fa;
	--dark: #343a40;
	--sidebar-accent: #14161ad8;

	--loading-gradient-thing-one: #15191b;
	--loading-gradient-thing-two: #202527;
	--selected: #60aab6;

	--start: #2563ec;
	--start-bg: #2d4a90;

	--stop: #dc3545;
	--stop-bg: #a51826;

	--restart: #5e6e7b;
	--restart-bg: #424d5f;

	--bg-main: #1a1d25; /* Content Stage */
	--bg-dark: #12141a; /* Header & Sidebar Base */
	--bg-sidebar: #0d1016; /* Deep Sidebar (Slightly darker for depth) */
	--border: #2a2e38; /* Slate Dividers */
	--cobalt: #4ed2ff; /* Accent Blue */
	--text-main: #e0e0e0; /* Primary Text */
	--text-dim: #70757a; /* Muted Text */
}

* {
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
		"Noto Color Emoji";
}
.square {
	height: 50%;
	width: 80%;
	margin: auto;
	background-color: #1a1a1a;
	display: grid;
	place-items: center;
	position: relative;
	border-radius: 5px;
}

body {
	display: flex;
	justify-content: center;
	margin: 0;
}

button {
	border: none;
	color: white;
	font-size: 16px;
	cursor: pointer;

	font-size: calc(1vw + 1vh);
	outline: none;
}

input {
	border: none;
	color: white;
	font-size: 16px;
	text-align: center;
	font-size: calc(1vw + 1vh);
}

input[type="password"]::-ms-reveal,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
	filter: invert(100%); 
	margin-right: 10px;
}

input:focus {
	outline: none;
}

button:hover {
	filter: brightness(76%);
}
button:active {
	filter: brightness(110%);
}

.align-text {
	display: flex;
	justify-content: center;
	align-items: center;
}

.red {
	background-color: var(--red);
}
.orange {
	background-color: var(--orange);
}
.yellow {
	background-color: var(--warning);
}
.green {
	background-color: var(--green);
}
.blue {
	background-color: var(--info);
}
.purple {
	background-color: var(--indigo);
}
#notification-container {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 9999;
	pointer-events: none; /* Let clicks pass through empty space */
}

#notification-container .toast {
	width: 320px;
	background: var(--bg-dark);
	border-left: 4px solid var(--cobalt);
	border-radius: 4px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
	pointer-events: auto; /* Re-enable clicks for the actual toast */
	animation: steam-slide-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
	transition: all 0.3s ease;
}

#notification-container .toast.fade-out {
	opacity: 0;
	transform: translateX(100%);
}

#notification-container .toast-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

#notification-container .toast-content {
	display: flex;
	flex-direction: column;
}

#notification-container .toast-title {
	color: var(--white);
	font-weight: 700;
	font-size: 14px;
}

#notification-container .toast-message {
	color: var(--text-dim);
	font-size: 13px;
	margin-top: 2px;
}

@keyframes steam-slide-in {
	from {
		transform: translateX(120%);
	}
	to {
		transform: translateX(0);
	}
}