html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
	background: #111;
	color: #fff;
	font-family: 'Montserrat', sans-serif;
	overflow: hidden;
	user-select: none;
}

body {
	background: transparent;
	transition: background 1s cubic-bezier(.77, 0, .18, 1);
	text-transform: lowercase;
}

#wallpaper {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	z-index: 0;
	filter: grayscale(1) brightness(0.5);
	transition: filter 1s cubic-bezier(.77, 0, .18, 1);
	pointer-events: none;
}

.desktop {
	position: relative;
	width: 100vw;
	height: 100vh;
	z-index: 1;
}

#icons {
	position: absolute;
	top: 32px;
	left: 32px;
	display: flex;
	flex-direction: column;
	gap: 32px;
	z-index: 2;
}

.icon {
	width: 72px;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	opacity: 0.92;
	transition: transform 0.2s cubic-bezier(.77, 0, .18, 1), box-shadow 0.2s;
	border-radius: 16px;
	padding: 8px 0 4px 0;
	background: rgba(30, 30, 30, 0.2);
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.12);
	backdrop-filter: blur(2px);
	animation: iconIn 0.7s cubic-bezier(.77, 0, .18, 1);
}

.icon:hover {
	transform: scale(1.08) translateY(-4px);
	box-shadow: 0 6px 24px 0 rgba(0, 0, 0, 0.22);
	background: rgba(255, 255, 255, 0.05);
	opacity: 1;
}

.icon img {
	width: 48px;
	height: 48px;
	filter: grayscale(1) contrast(1.2);
	border-radius: 12px;
	margin-bottom: 4px;
	transition: filter 0.3s;
}

.icon span {
	font-size: 13px;
	color: #fff;
	text-shadow: 0 1px 2px #000;
	letter-spacing: 0.02em;
	font-weight: 700;
	text-align: center;
	margin-top: 2px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
}

@keyframes iconIn {
	0% {
		opacity: 0;
		transform: scale(0.7) translateY(30px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

#icon-template {
	display: none;
}

.tasks {
	display: flex;
	align-items: center;
	gap: 10px;
}

.task-icon {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	opacity: 0;
	transform: scale(0.9);
	transition: opacity .2s cubic-bezier(.77, 0, .18, 1), transform .2s cubic-bezier(.77, 0, .18, 1);
	cursor: pointer;
}

.task-icon.visible {
	opacity: 1;
	transform: scale(1);
}

.window {
	position: fixed;
	width: min(600px, calc(100vw - 16px));
	max-height: calc(100vh - 120px);
	background: rgba(20, 20, 20, 0.35);
	border-radius: 14px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35);
	z-index: 18;
	border: 1.5px solid rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(10px) saturate(120%);
	backdrop-filter: blur(10px) saturate(120%);
	display: none;
	overflow: hidden;
	opacity: 0;
	transform: scale(0.96) translateY(8px);
	transition: opacity .18s cubic-bezier(.22, .61, .36, 1), transform .18s cubic-bezier(.22, .61, .36, 1);
	will-change: transform, opacity;
}

#terminal-window {
	width: min(800px, calc(100vw - 16px));
}

.window.visible {
	opacity: 1;
	transform: scale(1) translateY(0);
}

.window-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 8px;
	font-weight: 700;
	letter-spacing: 0.03em;
	user-select: none;
	cursor: move;
}

.window-body {
	padding: 16px;
	box-sizing: border-box;
}

.close-btn {
	background: none;
	border: none;
	color: #fff;
	font-size: 14px;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	cursor: pointer;
}

.close-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

#notepad-text {
	width: 100%;
	height: 380px;
	background: rgba(17, 17, 17, 0.35);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	outline: none;
	padding: 10px;
	font-family: monospace;
	font-size: 14px;
	resize: none;
	box-sizing: border-box;
}

.terminal-body {
	display: flex;
	flex-direction: column;
	height: 380px;
}

#terminal-output {
	flex: 1;
	overflow-y: auto;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: 10px;
	font-family: monospace;
	font-size: 14px;
	margin-bottom: 10px;
}

#terminal-input {
	background: rgba(17, 17, 17, 0.35);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	padding: 10px;
	outline: none;
	font-family: monospace;
	font-size: 14px;
}

#terminal-window {
	background: rgba(15, 15, 15, 0.3);
}

#music-window {
	background: rgba(15, 15, 15, 0.3);
}

#music-window .window-body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

#music-title {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.04em;
	text-align: center;
	text-shadow: 0 2px 8px #000;
	min-height: 24px;
	transition: color 0.3s;
	margin-bottom: 8px;
}

#music-controls {
	display: flex;
	gap: 20px;
	align-items: center;
}

#music-controls button {
	background: none;
	border: none;
	color: #fff;
	font-size: 24px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, color 0.2s, transform 0.2s;
	cursor: pointer;
	outline: none;
}

#music-controls button:hover {
	background: rgba(255, 255, 255, 0.08);
	transform: scale(1.1);
}

#volume-container {
	position: relative;
	display: flex;
	align-items: center;
}

#volume-btn {
	background: none;
	border: none;
	color: #fff;
	font-size: 24px;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, transform 0.2s;
	cursor: pointer;
	outline: none;
	filter: grayscale(1);
}

#volume-btn:hover {
	background: rgba(255, 255, 255, 0.08);
}

#volume-slider {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 120px;
	height: 8px;
	background: rgba(20, 20, 20, 0.95);
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s, visibility 0.2s;
	margin-bottom: 8px;
	cursor: pointer;
}

#volume-container:hover #volume-slider {
	opacity: 1;
	visibility: visible;
}

#volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#volume-slider::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#volume-slider::-webkit-slider-track {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	height: 8px;
}

#volume-slider::-moz-range-track {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 4px;
	height: 8px;
	border: none;
}

#music-window audio {
	display: none;
}

#profile-popup {
	position: fixed;
	display: none;
	flex-direction: column;
	align-items: center;
	min-width: 260px;
	background: rgba(20, 20, 20, 0.30);
	border-radius: 18px;
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
	padding: 32px 28px 24px 28px;
	z-index: 100;
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	opacity: 0;
	transform: scale(0.96) translate3d(0, 8px, 0);
	transition: opacity .18s cubic-bezier(.22, .61, .36, 1), transform .18s cubic-bezier(.22, .61, .36, 1);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	backdrop-filter: blur(12px) saturate(120%);
	will-change: transform, opacity;
	backface-visibility: hidden;
	contain: layout paint;
	bottom: 72px;
	left: 80px;
	right: auto;
}

#profile-popup.popup-visible {
	opacity: 1;
	transform: scale(1) translate3d(0, 0, 0);
}

@keyframes popupIn {
	0% {
		opacity: 0;
		transform: scale(0.8) translateY(40px);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

#profile-popup .pfp {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin-bottom: 12px;
	border: 2.5px solid #fff;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.18);
	background: #222;
	object-fit: cover;
	filter: grayscale(1);
	transition: filter 0.3s;
}

#profile-popup .name {
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 4px;
	text-align: center;
	letter-spacing: 0.03em;
	text-shadow: 0 2px 8px #000;
}

#profile-popup .status {
	font-size: 14px;
	color: #bbb;
	margin-bottom: 10px;
	text-align: center;
	min-height: 18px;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 4px #000;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

#profile-popup .status-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	margin-right: 4px;
	background: #bbb;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.18);
	animation: statusPulse 1.2s infinite alternate cubic-bezier(.77, 0, .18, 1);
}

@keyframes statusPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.12);
	}

	100% {
		box-shadow: 0 0 8px 4px rgba(255, 255, 255, 0.18);
	}
}

#profile-popup .custom-text {
	font-size: 15px;
	color: #fff;
	margin-bottom: 16px;
	text-align: center;
	letter-spacing: 0.01em;
	min-height: 18px;
	opacity: 0.8;
}

.window-header span {
	display: block;
	flex: 1;
	font-size: 14px;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.8);
}

#panel {
	position: fixed;
	left: 8px;
	right: 8px;
	bottom: 8px;
	height: 44px;
	background: rgba(20, 20, 20, 0.7);
	border: 1.5px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	box-shadow: 0 -2px 16px 0 rgba(0, 0, 0, 0.18);
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 20;
	padding: 0 24px;
	animation: panelIn 1.1s cubic-bezier(.77, 0, .18, 1);
	-webkit-backdrop-filter: blur(8px) saturate(120%);
	backdrop-filter: blur(8px) saturate(120%);
}

@keyframes panelIn {
	0% {
		opacity: 0;
		transform: translateY(48px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

#panel .left {
	display: flex;
	align-items: center;
	gap: 8px;
}

#panel .right {
	display: flex;
	align-items: center;
	gap: 18px;
}

#profile-pic {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid #fff;
	object-fit: cover;
	background: #222;
	filter: grayscale(1);
	transition: filter 0.3s;
	cursor: pointer;
	box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}

#profile-pic:hover {
	filter: grayscale(1) brightness(1);
}

#profile-name {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 4px #000;
	margin-right: 8px;
}

.clock {
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.04em;
	text-shadow: 0 2px 8px #000;
	min-width: 80px;
	text-align: right;
}

@media (max-width: 700px) {
	#icons {
		left: 8px;
		top: 8px;
	}

	.icon {
		width: 60px;
		gap: 2px;
	}

	.icon img {
		width: 40px;
		height: 40px;
	}

	.icon span {
		font-size: 12px;
	}

	#panel {
		padding: 0 8px;
	}

	#tasks {
		max-width: 50vw;
		overflow-x: auto;
	}

	#profile-popup {
		right: 8px;
		left: 8px;
		min-width: unset;
	}

	.window {
		width: calc(100vw - 16px);
		max-height: calc(100vh - 100px);
	}

	#terminal-window {
		width: calc(100vw - 16px);
	}

	/* Make prev/next controls grayscale on mobile where they render as color emoji */
	#music-controls #prev,
	#music-controls #next {
		filter: grayscale(1);
	}
}