/* =====================================================================
   Bliss XP — Luna theme stylesheet
   Authentic Windows XP "Luna (Blue)" tribute, hand-tuned in CSS.
   ===================================================================== */

:root {
	/* Luna palette — sampled from the original XP theme */
	--xp-blue-1:        #245edb; /* taskbar dark */
	--xp-blue-2:        #3a6ee8; /* taskbar mid */
	--xp-blue-3:        #245edc;
	--xp-blue-deep:     #0831d9;
	--xp-blue-bottom:   #0a23b3; /* taskbar bottom edge */
	--xp-titlebar-1:    #0058e6;
	--xp-titlebar-2:    #3a93ff;
	--xp-titlebar-edge: #001ea0;

	--xp-green-1:       #3c873a; /* start dark */
	--xp-green-2:       #5eac56; /* start mid */
	--xp-green-3:       #82c878;
	--xp-green-4:       #3a8a36;
	--xp-green-glow:    #6ec466;
	--xp-green-edge:    #1d5519;

	--xp-orange-1:      #f1941e;
	--xp-orange-2:      #ee8e1a;

	--xp-tray-1:        #1290d4; /* tray light */
	--xp-tray-2:        #0c64c5; /* tray dark */

	--xp-cream:         #ece9d8; /* dialog face */
	--xp-cream-2:       #f1efe2;
	--xp-shadow-line:   #716f64;

	--xp-text:          #000;
	--xp-text-soft:     #1f1f1f;
	--xp-link:          #0033cc;
	--xp-link-visited:  #551a8b;

	--xp-window-radius: 8px 8px 0 0;

	/* Tahoma is XP's default UI font; Trebuchet MS for title bars. */
	--xp-ui:    "Tahoma", "Geneva", "Verdana", sans-serif;
	--xp-title: "Trebuchet MS", "Tahoma", sans-serif;
	--xp-mono:  "Lucida Console", "Courier New", monospace;
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #000; }

body.xp-desktop {
	font-family: var(--xp-ui);
	font-size: 11px;
	color: var(--xp-text);
	min-height: 100vh;
	overflow: hidden; /* desktop never scrolls; windows do */
	background: #5b8cc4;
	-webkit-font-smoothing: antialiased;
	cursor: default;
}

a { color: var(--xp-link); }
a:visited { color: var(--xp-link-visited); }

img { max-width: 100%; height: auto; display: block; }

button { font-family: var(--xp-ui); }

.xp-skip-link {
	position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.xp-skip-link:focus { left: 8px; top: 8px; width: auto; height: auto; background: #fff; padding: 4px 8px; z-index: 10000; }

/* =====================================================================
   Desktop layer (the iconic Bliss wallpaper)
   ===================================================================== */
.xp-desktop-layer {
	position: fixed;
	inset: 0 0 30px 0; /* 30px taskbar */
	background: url('../images/bliss.jpg') center/cover no-repeat #5b8cc4;
	overflow: hidden;
}

/* Dragged into the desktop, the windows live here */
.xp-windows-layer {
	position: absolute;
	inset: 0;
}

/* =====================================================================
   Desktop icons (left-column)
   ===================================================================== */
.xp-desktop-icons {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 88px;
	margin: 0; padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
	z-index: 1;
}
.xp-desktop-icon {
	text-align: center;
	cursor: default;
	user-select: none;
}
.xp-desktop-icon a {
	color: #fff;
	text-decoration: none;
	display: block;
}
.xp-deskicon {
	display: block;
	width: 32px;
	height: 32px;
	margin: 0 auto 4px;
	background: center/contain no-repeat;
	filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.4));
	image-rendering: -webkit-optimize-contrast;
}
.xp-deskicon__label {
	display: inline-block;
	color: #fff;
	font-size: 11px;
	line-height: 1.15;
	padding: 1px 3px;
	text-shadow: 1px 1px 0 #000, 1px 1px 1px rgba(0,0,0,0.6);
	max-width: 84px;
	word-wrap: break-word;
}
.xp-desktop-icon:focus-within .xp-deskicon__label,
.xp-desktop-icon:hover .xp-deskicon__label {
	background: rgba(11, 97, 211, 0.55);
	outline: 1px dotted rgba(255,255,255,0.7);
}

/* Recycle Bin pinned to bottom-right (above taskbar) */
.xp-desktop-icon--bin {
	position: absolute;
	right: 16px;
	bottom: 14px;
}

/* SVG icons baked into CSS via data URIs (no external assets) */
.xp-deskicon--mycomputer { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='m' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23e8e8e8'/><stop offset='1' stop-color='%23a0a0a0'/></linearGradient><linearGradient id='s' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%2369aaff'/><stop offset='1' stop-color='%23083da9'/></linearGradient></defs><rect x='3' y='4' width='26' height='18' rx='1.5' fill='url(%23m)' stroke='%23404040'/><rect x='5' y='6' width='22' height='14' fill='url(%23s)'/><path d='M2 23h28l-2 4H4z' fill='%23cccccc' stroke='%23404040'/><rect x='12' y='28' width='8' height='1.5' fill='%23808080'/></svg>"); }
.xp-deskicon--docs { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='f' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23ffd97a'/><stop offset='1' stop-color='%23dd9a1a'/></linearGradient></defs><path d='M3 9 L3 25 Q3 27 5 27 L27 27 Q29 27 29 25 L29 12 Q29 10 27 10 L15 10 L13 8 L5 8 Q3 8 3 9z' fill='url(%23f)' stroke='%237a4f00'/><rect x='10' y='14' width='15' height='2' fill='%23fff' opacity='.5'/></svg>"); }
.xp-deskicon--ie { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='e' cx='.5' cy='.4' r='.6'><stop offset='0' stop-color='%23ffe34f'/><stop offset='.5' stop-color='%23f0a82c'/><stop offset='1' stop-color='%23a85b00'/></radialGradient></defs><circle cx='16' cy='16' r='13' fill='url(%23e)' stroke='%23744000'/><path d='M5 16 Q16 4 27 16 Q16 28 5 16z' fill='none' stroke='%23000' stroke-width='2'/><text x='16' y='22' font-family='Trebuchet MS' font-size='18' font-weight='bold' text-anchor='middle' fill='%231d4cd6'>e</text></svg>"); }
.xp-deskicon--bin { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><linearGradient id='b' x1='0' x2='0' y1='0' y2='1'><stop offset='0' stop-color='%23dfe6ff'/><stop offset='1' stop-color='%237b95dc'/></linearGradient></defs><rect x='5' y='9' width='22' height='3' rx='1' fill='%23a8b5e0' stroke='%23344a85'/><path d='M7 12 L9 27 Q9 29 11 29 L21 29 Q23 29 23 27 L25 12z' fill='url(%23b)' stroke='%23344a85'/><path d='M12 14 L13 26 M16 14 L16 26 M20 14 L19 26' stroke='%23344a85' fill='none' stroke-width='1.2'/><circle cx='24' cy='10' r='5' fill='%2300a64a' stroke='%23004f23'/><path d='M21 10 a3 3 0 1 0 5-2' stroke='%23fff' stroke-width='1.5' fill='none'/><path d='M26 7 l1-2 -3 .5z' fill='%23fff'/></svg>"); }

/* =====================================================================
   Window — the XP Luna chrome
   ===================================================================== */
.xp-window {
	position: absolute;
	min-width: 280px;
	max-width: calc(100% - 24px);
	max-height: calc(100% - 18px);
	background: var(--xp-cream);
	border: 1px solid var(--xp-blue-deep);
	border-radius: var(--xp-window-radius);
	box-shadow:
		0 0 0 1px #003ec3 inset,
		0 18px 40px rgba(0,0,0,0.45),
		0 4px 10px rgba(0,0,0,0.3);
	display: flex;
	flex-direction: column;
	padding: 0 3px 3px;
	overflow: hidden;
	transition: opacity .12s ease, transform .12s ease;
}
.xp-window.is-minimized {
	opacity: 0;
	transform: translateY(40px) scale(.94);
	pointer-events: none;
}
.xp-window.is-maximized {
	left: 0 !important; top: 0 !important;
	width: 100% !important; height: calc(100% - 0px) !important;
	border-radius: 0;
	max-width: 100%; max-height: 100%;
}

/* Title bar — the unmistakable blue gradient */
.xp-window__titlebar {
	flex: 0 0 auto;
	height: 28px;
	margin: 0 -3px 0; /* extends to window edge */
	padding: 0 5px 0 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-family: var(--xp-title);
	font-weight: bold;
	font-size: 13px;
	text-shadow: 1px 1px 0 rgba(0,0,30,0.7);
	border-radius: var(--xp-window-radius);
	background:
		linear-gradient(
			to bottom,
			#0058e6 0%,
			#3593ff 8%,
			#288eff 40%,
			#107eea 88%,
			#0058e6 94%,
			#0050d4 100%
		);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.45),
		inset 0 -1px 0 rgba(0,0,0,0.25);
	cursor: grab;
	user-select: none;
}
.xp-window__titlebar:active { cursor: grabbing; }

.xp-window:not(.is-active) .xp-window__titlebar {
	background:
		linear-gradient(
			to bottom,
			#7a96df 0%,
			#9eb6ea 50%,
			#7691d2 95%,
			#5d7fc4 100%
		);
	color: #ddd;
	text-shadow: 1px 1px 0 rgba(0,0,40,0.4);
}

.xp-window__title {
	display: flex; align-items: center; gap: 6px;
	min-width: 0;
}
.xp-window__title-text {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Title bar buttons */
.xp-window__buttons { display: flex; gap: 1px; }
.xp-titlebtn {
	width: 22px; height: 22px;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 3px;
	color: #fff;
	font: bold 13px/14px var(--xp-ui);
	cursor: pointer;
	padding: 0;
	display: grid;
	place-items: center;
	background:
		linear-gradient(to bottom, #4495f6 0%, #1f6cdc 50%, #1156c2 51%, #1f6cdc 100%);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.3);
	transition: filter .08s;
}
.xp-titlebtn:hover { filter: brightness(1.18) saturate(1.1); }
.xp-titlebtn:active { filter: brightness(.85); }
.xp-titlebtn--close {
	background: linear-gradient(to bottom, #ee6f5b 0%, #c81f0a 50%, #a31507 51%, #d12a14 100%);
}
.xp-titlebtn--close:hover { filter: brightness(1.15); }
.xp-titlebtn--min span,
.xp-titlebtn--max span {
	display: block;
	width: 8px; height: 8px;
	border: 0;
}
.xp-titlebtn--min span { border-bottom: 2px solid #fff; margin-top: 4px; }
.xp-titlebtn--max span { border: 2px solid #fff; border-top-width: 3px; }
.xp-titlebtn--close span { font: bold 14px/14px var(--xp-ui); display: block; }

/* Menu bar */
.xp-window__menubar {
	flex: 0 0 auto;
	background: var(--xp-cream);
	border-bottom: 1px solid #aca899;
	font-size: 11px;
	color: #000;
	padding: 3px 6px;
	display: flex;
	gap: 14px;
}
.xp-window__menubar span {
	cursor: default;
	padding: 1px 4px;
}
.xp-window__menubar span:first-letter { text-decoration: underline; }
.xp-window__menubar span:hover { background: var(--xp-titlebar-1); color: #fff; }

/* Body */
.xp-window__body {
	flex: 1 1 auto;
	background: #fff;
	border: 1px solid #aca899;
	margin-top: 0;
	padding: 14px 16px;
	overflow: auto;
	font-size: 12px;
	line-height: 1.55;
	color: #1a1a1a;
}
.xp-window__body p { margin: 0 0 1em; }
.xp-window__body h1, .xp-window__body h2, .xp-window__body h3 { font-family: var(--xp-title); }
.xp-window__body h1 { font-size: 22px; margin: 0 0 .4em; color: #003399; }
.xp-window__body h2 { font-size: 17px; margin: 1.2em 0 .4em; color: #003399; }
.xp-window__body h3 { font-size: 13px; margin: 1em 0 .35em; color: #003399; }
.xp-window__body code { font-family: var(--xp-mono); background: #f6f6f0; border: 1px solid #d8d6c4; padding: 1px 4px; border-radius: 2px; }
.xp-window__body blockquote { border-left: 3px solid var(--xp-titlebar-1); margin: 0 0 1em; padding: 4px 12px; background: #f6f8ff; }

/* Address bar */
.xp-window__address {
	background: var(--xp-cream);
	border-bottom: 1px solid #aca899;
	padding: 4px 8px 6px;
	display: flex; align-items: center; gap: 8px;
	font-size: 11px;
}
.xp-window__address > label { color: #444; }
.xp-address-bar {
	flex: 1 1 auto;
	background: #fff;
	border: 1px solid #7f9db9;
	height: 21px;
	display: flex; align-items: center;
	padding: 0 6px;
	gap: 6px;
	min-width: 0;
}
.xp-address-bar__url { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #222; }
.xp-address-bar__go { color: #555; padding-left: 8px; border-left: 1px solid #ccc; }

/* Status bar */
.xp-window__statusbar {
	flex: 0 0 auto;
	background: var(--xp-cream);
	border-top: 1px solid #fff;
	box-shadow: 0 -1px 0 #aca899;
	font-size: 11px;
	padding: 2px 0 0;
	display: flex;
}
.xp-status-cell {
	border-right: 1px solid #aca899;
	border-left: 1px solid #fff;
	padding: 2px 8px;
}
.xp-status-cell--grow { flex: 1 1 auto; border-left: 0; }

/* =====================================================================
   In-window content styles (posts, welcome, etc.)
   ===================================================================== */
.xp-post { display: grid; gap: 10px; }
.xp-post__thumb img { border: 1px solid #aca899; padding: 2px; background: #fff; box-shadow: 1px 1px 0 #fff inset, -1px -1px 0 #d4d0c8 inset; }
.xp-post__title { font-family: var(--xp-title); font-size: 22px; line-height: 1.15; margin: 0; color: #003399; }
.xp-post__title a { color: inherit; text-decoration: none; }
.xp-post__title a:hover { text-decoration: underline; color: #0033ee; }
.xp-post__meta { font-size: 11px; color: #555; margin: 0; }
.xp-post__excerpt { font-size: 12px; }
.xp-post__more { display: flex; gap: 6px; margin: 4px 0 0; }

.xp-button {
	font-family: var(--xp-ui);
	font-size: 11px;
	color: #000;
	background: linear-gradient(to bottom, #f7f7ee 0%, #e2dfcd 50%, #cdc9b3 51%, #e6e2cd 100%);
	border: 1px solid #003c74;
	border-radius: 3px;
	padding: 3px 14px;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex; align-items: center; gap: 4px;
	box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.1);
	transition: filter .08s;
}
.xp-button:hover { filter: brightness(1.05); border-color: #1656c0; }
.xp-button:active { filter: brightness(.92); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.xp-button--secondary { background: linear-gradient(to bottom, #fefefa 0%, #ece9d8 100%); }

.xp-input {
	font-family: var(--xp-ui);
	font-size: 11px;
	background: #fff;
	border: 1px solid #7f9db9;
	padding: 2px 6px;
	height: 22px;
}
.xp-input:focus { outline: 1px solid var(--xp-titlebar-1); outline-offset: -2px; }

/* Welcome window (front page hero) */
.xp-welcome { color: #1a1a1a; }
.xp-welcome__hero {
	display: flex; align-items: center; gap: 18px;
	padding: 6px 4px 14px;
}
.xp-welcome__heroText { flex: 1; }
.xp-welcome__greet { margin: 0; font-size: 14px; color: #c47b00; font-style: italic; }
.xp-welcome__title {
	font-family: var(--xp-title);
	font-size: 36px;
	line-height: 1;
	margin: 4px 0 6px;
	color: #003399;
	text-shadow: 1px 1px 0 #fff;
}
.xp-welcome__sub { margin: 0; font-size: 13px; color: #444; }
.xp-welcome__flag {
	width: 70px; height: 56px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 3px;
	transform: perspective(120px) rotateY(-12deg);
	filter: drop-shadow(2px 2px 2px rgba(0,0,0,.15));
}
.xp-welcome__flag span { display: block; border-radius: 4px; }
.xp-welcome__flag span:nth-child(1) { background: linear-gradient(135deg, #ff6868, #b80000); }
.xp-welcome__flag span:nth-child(2) { background: linear-gradient(135deg, #6dde6d, #1c8b1f); }
.xp-welcome__flag span:nth-child(3) { background: linear-gradient(135deg, #6da5ff, #0d3ec1); }
.xp-welcome__flag span:nth-child(4) { background: linear-gradient(135deg, #ffd768, #c98b00); }

.xp-welcome__rule {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, #aca899, transparent);
	margin: 0 0 14px;
}
.xp-welcome__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.xp-welcome__col h3 {
	margin: 0 0 6px;
	font-family: var(--xp-title);
	font-size: 13px;
	color: #003399;
	border-bottom: 1px dotted #aca899;
	padding-bottom: 3px;
}
.xp-link-list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.xp-link-list li { padding: 1px 0; }
.xp-link-list a { text-decoration: none; color: var(--xp-link); }
.xp-link-list a:hover { text-decoration: underline; }
.xp-link-list em { color: #888; font-style: normal; }
.xp-bullet { color: #c47b00; font-weight: bold; margin-right: 4px; }
.xp-welcome__hint { margin-top: 14px; font-size: 11px; color: #888; font-style: italic; }

/* Front page eyebrow */
.xp-front-eyebrow {
	margin: 0 0 6px;
	font-size: 11px;
	color: #c47b00;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-style: italic;
}
.xp-front-eyebrow strong { color: #003399; font-weight: bold; font-style: normal; }
.xp-post__thumb--full {
	margin: 0 0 14px;
}
.xp-post__thumb--full img {
	width: 100%;
	border: 1px solid #aca899;
	padding: 3px;
	background: #fff;
	box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #d4d0c8;
}

/* Single post body */
.xp-single__title { font-family: var(--xp-title); font-size: 28px; color: #003399; margin: 0 0 4px; }
.xp-single__meta { font-size: 11px; color: #666; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px dotted #ccc; }
.xp-single__content { font-size: 13px; line-height: 1.6; }
.xp-single__content > * + * { margin-top: 1em; }
.xp-postnav { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 12px; border-top: 1px dotted #ccc; font-size: 12px; }

/* Search/archive results */
.xp-results { list-style: none; margin: 0; padding: 0; }
.xp-result { padding: 8px 0; border-bottom: 1px dotted #ccc; }
.xp-result__title { font-size: 14px; font-weight: bold; color: var(--xp-link); }
.xp-result__meta { font-size: 11px; color: #777; margin: 2px 0; }
.xp-result__excerpt { font-size: 12px; margin: 0; }

.xp-bsod {
	font-family: var(--xp-mono);
	background: #0a23b3;
	color: #fff;
	padding: 16px;
	font-size: 13px;
	line-height: 1.5;
}
.xp-bsod a { color: #ffd54a; }
.xp-bsod__hint { animation: xp-blink 1s steps(2,end) infinite; }
@keyframes xp-blink { 50% { opacity: 0; } }

/* =====================================================================
   Taskbar
   ===================================================================== */
.xp-taskbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	height: 30px;
	z-index: 100;
	display: flex;
	align-items: stretch;
	font-size: 11px;
	color: #fff;
	background:
		linear-gradient(
			to bottom,
			#245edc 0%,
			#3a6ee8 9%,
			#245edb 18%,
			#1941a5 90%,
			#0a23b3 100%
		);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.4),
		inset 0 -1px 0 rgba(0,0,0,0.4);
	user-select: none;
}

/* The taskbar's signature thin orange-yellow top edge highlight */
.xp-taskbar::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 0;
	height: 2px;
	background: linear-gradient(to bottom, #f1bb52, #de8a1e 60%, transparent);
	opacity: .55;
	pointer-events: none;
}

/* ----- Start button (the iconic curved green pill) ----- */
.xp-startbtn {
	position: relative;
	height: 30px;
	min-width: 100px;
	border: 0;
	margin: 0;
	padding: 0 22px 2px 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	font-family: var(--xp-title);
	font-style: italic;
	font-weight: bold;
	font-size: 18px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	cursor: pointer;
	background:
		radial-gradient(ellipse 80% 100% at 30% 30%, #95d18d 0%, #5cae54 35%, #3c8a3a 70%, #266a24 100%);
	border-top-right-radius: 24px;
	border-bottom-right-radius: 22px;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.6),
		inset -1px -2px 6px rgba(0,40,0,0.4),
		inset 0 -2px 0 rgba(0,0,0,0.25),
		1px 0 0 rgba(0,0,0,0.4);
	transition: filter .08s;
}
.xp-startbtn:hover { filter: brightness(1.07) saturate(1.05); }
.xp-startbtn[aria-expanded="true"],
.xp-startbtn:active {
	background:
		radial-gradient(ellipse 80% 100% at 30% 30%, #65a85e 0%, #3d8538 50%, #1f5c1c 100%);
	box-shadow:
		inset 0 2px 4px rgba(0,0,0,0.5),
		inset 0 -1px 0 rgba(255,255,255,0.15);
}
.xp-startbtn__label {
	letter-spacing: .3px;
	padding-right: 4px;
}
.xp-startbtn__flag {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 1.5px;
	width: 18px; height: 16px;
	transform: perspective(40px) rotateY(-22deg);
	filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
}
.xp-flag-cell {
	border-radius: 1.5px;
	box-shadow: inset 0 .5px 0 rgba(255,255,255,.5);
}
.xp-flag-cell--r { background: linear-gradient(135deg,#ff7a7a,#b80000); }
.xp-flag-cell--g { background: linear-gradient(135deg,#7be872,#1c8b1f); }
.xp-flag-cell--b { background: linear-gradient(135deg,#76aaff,#0d3ec1); }
.xp-flag-cell--y { background: linear-gradient(135deg,#ffe17a,#c98b00); }

/* ----- Quick Launch ----- */
.xp-quicklaunch {
	display: flex;
	align-items: center;
	padding: 0 6px;
	border-left: 1px solid rgba(0,0,0,0.35);
	border-right: 1px solid rgba(0,0,0,0.35);
	box-shadow: inset 1px 0 0 rgba(255,255,255,0.2), inset -1px 0 0 rgba(255,255,255,0.2);
	gap: 2px;
}
.xp-ql-icon {
	width: 20px; height: 20px;
	display: block;
	background: center/16px 16px no-repeat;
	border-radius: 2px;
}
.xp-ql-icon:hover { background-color: rgba(255,255,255,0.18); outline: 1px solid rgba(255,255,255,0.35); }
.xp-ql-icon--showdesk { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='2' width='12' height='9' fill='%23bcd' stroke='%23244'/><rect x='3' y='12' width='10' height='1' fill='%23244'/><path d='M8 4 L11 7 L9 7 L9 10 L7 10 L7 7 L5 7z' fill='%23062b8a'/></svg>"); }
.xp-ql-icon--ie { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='%23ffd23a' stroke='%23744000'/><text x='8' y='12' font-family='Trebuchet MS' font-size='10' font-weight='bold' text-anchor='middle' fill='%23062b8a'>e</text></svg>"); }
.xp-ql-icon--media { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='%23ff8a3a' stroke='%237a3a00'/><polygon points='6,4.5 12,8 6,11.5' fill='%23fff'/></svg>"); }

/* ----- Open windows (tasks) ----- */
.xp-tasks {
	flex: 1 1 auto;
	display: flex;
	gap: 3px;
	align-items: center;
	padding: 2px 4px;
	overflow: hidden;
	min-width: 0;
}
.xp-task {
	flex: 0 1 168px;
	min-width: 90px;
	height: 22px;
	background: linear-gradient(to bottom, #5797ee 0%, #2566c8 50%, #1a52b1 100%);
	border: 1px solid rgba(0,0,0,0.4);
	border-radius: 3px;
	color: #fff;
	font-size: 11px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.25);
	overflow: hidden;
	font-family: var(--xp-ui);
}
.xp-task__title {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	flex: 1 1 auto;
}
.xp-task.is-active {
	background: linear-gradient(to bottom, #1c4ea1 0%, #0d3a8c 50%, #082c75 100%);
	box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}
.xp-task:hover { filter: brightness(1.07); }

/* ----- System tray ----- */
.xp-tray {
	background:
		linear-gradient(
			to bottom,
			#1290d4 0%,
			#0c64c5 30%,
			#0a4fb2 100%
		);
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 8px 0 14px;
	color: #fff;
	font-size: 11px;
	height: 30px;
	position: relative;
	box-shadow: inset 1px 0 0 rgba(0,0,0,0.35), inset 2px 0 0 rgba(255,255,255,0.25);
}
.xp-tray__notch {
	position: absolute;
	left: 0; top: 50%;
	width: 8px; height: 12px;
	transform: translateY(-50%);
	background:
		linear-gradient(to right, transparent 50%, rgba(0,0,0,0.2) 50%) 0 0/2px 2px,
		linear-gradient(to bottom, transparent 50%, rgba(255,255,255,0.4) 50%) 0 0/2px 2px;
	opacity: .8;
}
.xp-tray-icon {
	width: 16px; height: 16px;
	display: inline-block;
	background: center/contain no-repeat;
	filter: drop-shadow(1px 1px 0 rgba(0,0,0,.4));
}
.xp-tray-icon--shield { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1 L14 3 L14 8 Q14 13 8 15 Q2 13 2 8 L2 3z' fill='%23d62a2a' stroke='%237a0000'/><path d='M8 1 L14 3 L14 8 Q14 13 8 15z' fill='%23ffd400' stroke='%237a5600'/><circle cx='8' cy='8' r='2.5' fill='%23fff' stroke='%23000' stroke-width='.6'/><rect x='7.4' y='6.5' width='1.2' height='3' fill='%23000'/></svg>"); }
.xp-tray-icon--volume { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 6 L6 6 L9 3 L9 13 L6 10 L3 10z' fill='%23eaeaea' stroke='%23000'/><path d='M11 5 Q13 8 11 11 M12.5 3.5 Q15.5 8 12.5 12.5' stroke='%2300d4ff' fill='none' stroke-width='1.2'/></svg>"); }
.xp-tray-icon--network { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='6' width='5' height='4' fill='%23dadada' stroke='%23000'/><rect x='9' y='6' width='5' height='4' fill='%23dadada' stroke='%23000'/><path d='M7 8 L9 8' stroke='%23000'/><circle cx='4.5' cy='8' r='.7' fill='%2300dd00'/><circle cx='11.5' cy='8' r='.7' fill='%2300dd00'/></svg>"); }
.xp-tray-icon--messenger { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%2363c130' stroke='%231f5e00'/><path d='M5 6.5 Q8 4 11 6.5 L11 9 Q8 11.5 5 9z' fill='%23fff'/><circle cx='6.5' cy='8' r='.8' fill='%231f5e00'/><circle cx='9.5' cy='8' r='.8' fill='%231f5e00'/></svg>"); }

.xp-clock {
	min-width: 64px;
	text-align: center;
	font-size: 11px;
	color: #fff;
	margin-left: 4px;
	cursor: default;
	font-variant-numeric: tabular-nums;
}

/* =====================================================================
   Start Menu
   ===================================================================== */
.xp-startmenu {
	position: fixed;
	left: 0;
	bottom: 30px;
	width: 380px;
	max-width: 96vw;
	z-index: 200;
	background: var(--xp-cream);
	border: 1px solid #003fa1;
	border-bottom: 0;
	border-top-right-radius: 8px;
	box-shadow: 0 0 16px rgba(0,0,0,.5);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-size: 12px;
	color: #000;
	transform-origin: bottom left;
	animation: xp-sm-in .14s ease-out;
}
.xp-startmenu[hidden] { display: none; }
@keyframes xp-sm-in {
	from { transform: scaleY(.5) translateY(40%); opacity: .2; }
	to   { transform: scaleY(1) translateY(0); opacity: 1; }
}

/* Header bar */
.xp-startmenu__header {
	height: 56px;
	background:
		linear-gradient(to bottom, #2868de 0%, #1e54c4 60%, #173f9c 100%);
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 12px;
	border-top-right-radius: 8px;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.xp-startmenu__avatar {
	width: 42px; height: 42px;
	border-radius: 4px;
	background:
		radial-gradient(circle at 50% 35%, #fff 0%, #ffd9a8 30%, #f0a060 60%, transparent 65%),
		linear-gradient(135deg,#9ec0ff,#3b6dcf);
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #003fa1, 1px 1px 0 1px rgba(0,0,0,.3);
}
.xp-startmenu__user {
	font-family: var(--xp-title);
	font-size: 16px;
	font-weight: bold;
	text-shadow: 1px 1px 0 rgba(0,0,0,.45);
}

/* Two columns */
.xp-startmenu__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	background:
		linear-gradient(to right, #fff 50%, #d3e5fa 50%);
}
.xp-startmenu__col {
	padding: 8px 6px;
	min-height: 240px;
}
.xp-startmenu__col--left { background: #fff; }
.xp-startmenu__col--right { background: #d3e5fa; }

.xp-smitem {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 8px;
	border-radius: 3px;
	color: #000;
	text-decoration: none;
	font-size: 12px;
}
.xp-smitem:hover {
	background: linear-gradient(to bottom, #2664de, #0a3fa9);
	color: #fff;
}
.xp-smitem .xp-icon { flex: 0 0 24px; height: 24px; width: 24px; }
.xp-smitem__label { display: flex; flex-direction: column; min-width: 0; }
.xp-smitem__label small { color: #666; font-size: 10px; }
.xp-smitem:hover .xp-smitem__label small { color: #cfd9ee; }

.xp-smdiv {
	border: 0;
	height: 1px;
	margin: 6px 8px;
	background: linear-gradient(to right, transparent, #c8c4b6, transparent);
}

.xp-smmenu { list-style: none; margin: 0; padding: 0; }
.xp-smmenu li { margin: 0; position: relative; }
.xp-smli > .xp-smitem { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-radius: 3px; color: #000; text-decoration: none; font-size: 12px; position: relative; }
.xp-smli > .xp-smitem:hover,
.xp-smli:hover > .xp-smitem,
.xp-smli:focus-within > .xp-smitem {
	background: linear-gradient(to bottom, #2664de, #0a3fa9);
	color: #fff;
}
.xp-smli__arrow {
	margin-left: auto;
	font-size: 10px;
	color: #555;
	padding-left: 8px;
}
.xp-smli:hover > .xp-smitem .xp-smli__arrow,
.xp-smli:focus-within > .xp-smitem .xp-smli__arrow { color: #fff; }

/* Submenu flyout — opens to the right of the parent item */
.xp-submenu {
	list-style: none;
	margin: 0; padding: 4px;
	position: absolute;
	left: 100%;
	top: -4px;
	min-width: 200px;
	background: var(--xp-cream);
	border: 1px solid #003fa1;
	box-shadow: 4px 4px 14px rgba(0,0,0,.35);
	z-index: 5;
	display: none;
}
.xp-smli--has-children:hover > .xp-submenu,
.xp-smli--has-children:focus-within > .xp-submenu { display: block; }
.xp-submenu .xp-smli > .xp-smitem { padding: 4px 8px; }

.xp-smhint {
	font-size: 11px;
	color: #666;
	padding: 8px 10px 4px;
	margin: 0;
	font-style: italic;
}
.xp-smhint a { color: var(--xp-link); }

/* Footer of start menu */
.xp-startmenu__footer {
	background:
		linear-gradient(to bottom, #2868de 0%, #1c50bd 60%, #163b95 100%);
	color: #fff;
	display: flex;
	justify-content: flex-end;
	gap: 14px;
	padding: 6px 12px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.xp-smfooter-btn {
	background: transparent;
	border: 0;
	color: #fff;
	font: 12px var(--xp-ui);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 3px;
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
	text-decoration: none;
}
.xp-smfooter-btn:hover { background: rgba(255,255,255,.18); }
.xp-smfooter-btn .xp-icon { width: 22px; height: 22px; }

/* =====================================================================
   Inline icons (within menus / titlebars / tasks)
   ===================================================================== */
.xp-icon {
	display: inline-block;
	width: 16px; height: 16px;
	background: center/contain no-repeat;
	flex-shrink: 0;
	image-rendering: -webkit-optimize-contrast;
}
.xp-icon--ie         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6.5' fill='%23ffd23a' stroke='%23744000'/><text x='8' y='12' font-family='Trebuchet MS' font-size='10' font-weight='bold' text-anchor='middle' fill='%23062b8a'>e</text></svg>"); }
.xp-icon--document   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 1 L10 1 L13 4 L13 15 L3 15z' fill='%23fff' stroke='%23000'/><path d='M10 1 L10 4 L13 4z' fill='%23ddd' stroke='%23000'/><path d='M5 7h6M5 9h6M5 11h4' stroke='%23888'/></svg>"); }
.xp-icon--mycomputer { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='2' width='14' height='9' fill='%23d8d8d8' stroke='%23404040'/><rect x='2' y='3' width='12' height='7' fill='%231e6cd6'/><path d='M0 12 L16 12 L15 14 L1 14z' fill='%23bbb' stroke='%23404040'/></svg>"); }
.xp-icon--docs       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1 4 L1 13 Q1 14 2 14 L14 14 Q15 14 15 13 L15 6 Q15 5 14 5 L8 5 L7 4 L2 4 Q1 4 1 4z' fill='%23ffcb53' stroke='%237a4f00'/></svg>"); }
.xp-icon--search     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='6.5' cy='6.5' r='4' fill='none' stroke='%23000' stroke-width='1.5'/><line x1='10' y1='10' x2='14' y2='14' stroke='%23000' stroke-width='2'/></svg>"); }
.xp-icon--cp         { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6' fill='%23eee' stroke='%23000'/><circle cx='8' cy='8' r='2' fill='%231e6cd6' stroke='%23000'/><path d='M8 2 L8 4 M8 12 L8 14 M2 8 L4 8 M12 8 L14 8' stroke='%23000' stroke-width='1.2'/></svg>"); }
.xp-icon--help       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23ffd23a' stroke='%23744000'/><text x='8' y='12' font-size='11' font-weight='bold' text-anchor='middle' fill='%23062b8a' font-family='Trebuchet MS'>?</text></svg>"); }
.xp-icon--logoff     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='3' width='9' height='10' fill='%23bcd' stroke='%23244'/><path d='M11 8 L15 8 M13 6 L15 8 L13 10' stroke='%23000' stroke-width='1.4' fill='none'/></svg>"); }
.xp-icon--shutdown   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='9' r='5.5' fill='none' stroke='%23c10000' stroke-width='1.6'/><path d='M8 2 L8 8' stroke='%23c10000' stroke-width='1.8' stroke-linecap='round'/></svg>"); }
.xp-icon--warn       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polygon points='8,1 15,14 1,14' fill='%23ffd23a' stroke='%23744000'/><rect x='7.3' y='5' width='1.4' height='5' fill='%23000'/><rect x='7.3' y='11' width='1.4' height='1.4' fill='%23000'/></svg>"); }

/* =====================================================================
   Comments
   ===================================================================== */
.xp-comments { margin-top: 28px; padding-top: 14px; border-top: 1px dotted #ccc; }
.xp-comments__title { font-family: var(--xp-title); font-size: 16px; color: #003399; margin: 0 0 10px; }
.xp-commentlist { list-style: none; padding: 0; margin: 0 0 16px; }
.xp-commentlist .comment, .xp-commentlist li { padding: 8px 10px; background: #f6f8ff; border: 1px solid #d6dcec; margin-bottom: 8px; border-radius: 3px; }
.xp-commentlist .children { list-style: none; padding-left: 18px; margin-top: 8px; }
.xp-commentform { display: grid; gap: 8px; }
.xp-commentform input[type="text"], .xp-commentform input[type="email"], .xp-commentform input[type="url"], .xp-commentform textarea { font-family: var(--xp-ui); font-size: 12px; padding: 4px 6px; border: 1px solid #7f9db9; background: #fff; }
.xp-commentform textarea { min-height: 90px; }

/* =====================================================================
   Pagination
   ===================================================================== */
.xp-pagination, .nav-links {
	display: flex; gap: 4px; flex-wrap: wrap; margin-top: 14px;
}
.xp-pagination a, .xp-pagination span,
.nav-links a, .nav-links span {
	display: inline-block;
	padding: 3px 9px;
	border: 1px solid #003c74;
	background: linear-gradient(to bottom, #f7f7ee, #cdc9b3);
	color: #000;
	text-decoration: none;
	font-size: 11px;
	border-radius: 3px;
}
.xp-pagination .current,
.nav-links .current {
	background: linear-gradient(to bottom, #5797ee, #1c4ea1);
	color: #fff;
}

/* =====================================================================
   Responsive — phones get a stacked, scrolling layout while
   keeping the taskbar pinned and styled.
   ===================================================================== */
@media (max-width: 820px) {
	body.xp-desktop { overflow: auto; }
	.xp-desktop-layer {
		position: relative;
		inset: auto;
		min-height: calc(100vh - 30px);
	}
	.xp-windows-layer {
		position: relative;
		display: grid;
		gap: 12px;
		padding: 12px 10px 50px;
	}
	.xp-window {
		position: relative !important;
		left: auto !important; top: auto !important;
		width: 100% !important;
		max-width: 100%;
		max-height: none;
	}
	.xp-window__body { max-height: 70vh; }
	.xp-desktop-icons {
		display: flex;
		position: relative;
		top: auto; left: auto;
		flex-wrap: wrap;
		gap: 12px;
		width: 100%;
		justify-content: flex-start;
		padding: 10px;
	}
	.xp-desktop-icon--bin {
		position: relative; right: auto; bottom: auto;
	}
	.xp-welcome__cols { grid-template-columns: 1fr; }
	.xp-welcome__title { font-size: 26px; }
	.xp-startmenu { width: 92vw; }
	.xp-quicklaunch { display: none; }
	.xp-startbtn { font-size: 16px; min-width: 80px; padding-right: 18px; }
	.xp-task { flex-basis: 110px; }
}

@media (max-width: 480px) {
	.xp-tray-icon--messenger,
	.xp-tray-icon--network { display: none; }
}

/* =====================================================================
   Tiny UX details
   ===================================================================== */
::selection { background: #316ac5; color: #fff; }

/* The custom "arrow" cursor that XP shipped with — uses a tiny SVG */
body.xp-desktop {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'><path d='M2 2 L2 22 L7 18 L10 25 L13 24 L10 17 L17 17z' fill='white' stroke='black' stroke-width='1.3' stroke-linejoin='miter'/></svg>") 1 1, default;
}
.xp-window__titlebar { cursor: grab; }
.xp-button, .xp-titlebtn, .xp-startbtn, .xp-task, .xp-smitem, .xp-smfooter-btn, .xp-deskicon, a {
	cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'><path d='M5 2 v9 l3 -1 v3 h2 v-3 l3 1 v-9z M5 14 h11 v3 h-11z' fill='white' stroke='black' stroke-width='1.2'/></svg>") 8 2, pointer;
}

/* =====================================================================
   Taskbar / Tray HARDENED OVERRIDES
   These appear last on purpose: they defeat WordPress theme inheritance,
   block-editor reset CSS, and any plugin that injects global font/color rules.
   Base64 SVGs avoid any URL-encoding-mangle risk from security plugins.
   ===================================================================== */
.xp-taskbar,
.xp-taskbar * {
	box-sizing: border-box;
}
.xp-taskbar {
	height: 30px !important;
	min-height: 30px !important;
	max-height: 30px;
	line-height: 1 !important;
	color: #fff !important;
	font-family: "Tahoma", "Geneva", "Verdana", sans-serif !important;
	font-size: 11px !important;
	display: flex !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	overflow: visible !important;
	visibility: visible !important;
}
.xp-taskbar > * {
	flex-shrink: 0;
	overflow: visible;
}
.xp-taskbar .xp-startbtn {
	display: inline-flex !important;
	align-items: center !important;
	color: #fff !important;
	font-family: "Trebuchet MS", "Tahoma", sans-serif !important;
	font-size: 18px !important;
	font-style: italic !important;
	font-weight: bold !important;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5) !important;
	line-height: 1 !important;
	height: 30px !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.xp-taskbar .xp-startbtn__label {
	color: #fff !important;
	display: inline-block !important;
	visibility: visible !important;
}
.xp-taskbar .xp-startbtn__flag {
	display: grid !important;
	visibility: visible !important;
	opacity: 1 !important;
}
.xp-taskbar .xp-tasks {
	flex: 1 1 auto !important;
	display: flex !important;
	min-width: 0 !important;
}
.xp-taskbar .xp-tray {
	display: inline-flex !important;
	align-items: center !important;
	height: 30px !important;
	color: #fff !important;
	flex-shrink: 0 !important;
	visibility: visible !important;
}
.xp-taskbar .xp-tray-icon {
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	visibility: visible !important;
	opacity: 1 !important;
	flex-shrink: 0;
}
.xp-taskbar .xp-clock {
	display: inline-block !important;
	color: #fff !important;
	font-family: "Tahoma", "Geneva", "Verdana", sans-serif !important;
	font-size: 11px !important;
	line-height: 1 !important;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
	min-width: 64px !important;
	text-align: center !important;
	visibility: visible !important;
}

/* Base64-encoded tray and quicklaunch icons — safe from URL mangling */
.xp-taskbar .xp-tray-icon--shield {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZD0nTTggMSBMMTQgMyBMMTQgOCBRMTQgMTMgOCAxNSBRMiAxMyAyIDggTDIgM3onIGZpbGw9JyNkNjJhMmEnIHN0cm9rZT0nIzdhMDAwMCcvPjxwYXRoIGQ9J004IDEgTDE0IDMgTDE0IDggUTE0IDEzIDggMTV6JyBmaWxsPScjZmZkNDAwJyBzdHJva2U9JyM3YTU2MDAnLz48Y2lyY2xlIGN4PSc4JyBjeT0nOCcgcj0nMi41JyBmaWxsPScjZmZmJyBzdHJva2U9JyMwMDAnIHN0cm9rZS13aWR0aD0nLjYnLz48cmVjdCB4PSc3LjQnIHk9JzYuNScgd2lkdGg9JzEuMicgaGVpZ2h0PSczJyBmaWxsPScjMDAwJy8+PC9zdmc+") !important;
}
.xp-taskbar .xp-tray-icon--volume {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZD0nTTMgNiBMNiA2IEw5IDMgTDkgMTMgTDYgMTAgTDMgMTB6JyBmaWxsPScjZWFlYWVhJyBzdHJva2U9JyMwMDAnLz48cGF0aCBkPSdNMTEgNSBRMTMgOCAxMSAxMSBNMTIuNSAzLjUgUTE1LjUgOCAxMi41IDEyLjUnIHN0cm9rZT0nIzAwZDRmZicgZmlsbD0nbm9uZScgc3Ryb2tlLXdpZHRoPScxLjInLz48L3N2Zz4=") !important;
}
.xp-taskbar .xp-tray-icon--network {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHJlY3QgeD0nMicgeT0nNicgd2lkdGg9JzUnIGhlaWdodD0nNCcgZmlsbD0nI2RhZGFkYScgc3Ryb2tlPScjMDAwJy8+PHJlY3QgeD0nOScgeT0nNicgd2lkdGg9JzUnIGhlaWdodD0nNCcgZmlsbD0nI2RhZGFkYScgc3Ryb2tlPScjMDAwJy8+PHBhdGggZD0nTTcgOCBMOSA4JyBzdHJva2U9JyMwMDAnLz48Y2lyY2xlIGN4PSc0LjUnIGN5PSc4JyByPScuNycgZmlsbD0nIzAwZGQwMCcvPjxjaXJjbGUgY3g9JzExLjUnIGN5PSc4JyByPScuNycgZmlsbD0nIzAwZGQwMCcvPjwvc3ZnPg==") !important;
}
.xp-taskbar .xp-tray-icon--messenger {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzcnIGZpbGw9JyM2M2MxMzAnIHN0cm9rZT0nIzFmNWUwMCcvPjxwYXRoIGQ9J001IDYuNSBROCA0IDExIDYuNSBMMTEgOSBROCAxMS41IDUgOXonIGZpbGw9JyNmZmYnLz48Y2lyY2xlIGN4PSc2LjUnIGN5PSc4JyByPScuOCcgZmlsbD0nIzFmNWUwMCcvPjxjaXJjbGUgY3g9JzkuNScgY3k9JzgnIHI9Jy44JyBmaWxsPScjMWY1ZTAwJy8+PC9zdmc+") !important;
}
.xp-taskbar .xp-ql-icon--showdesk {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHJlY3QgeD0nMicgeT0nMicgd2lkdGg9JzEyJyBoZWlnaHQ9JzknIGZpbGw9JyNiY2QnIHN0cm9rZT0nIzI0NCcvPjxyZWN0IHg9JzMnIHk9JzEyJyB3aWR0aD0nMTAnIGhlaWdodD0nMScgZmlsbD0nIzI0NCcvPjxwYXRoIGQ9J004IDQgTDExIDcgTDkgNyBMOSAxMCBMNyAxMCBMNyA3IEw1IDd6JyBmaWxsPScjMDYyYjhhJy8+PC9zdmc+") !important;
}
.xp-taskbar .xp-ql-icon--ie {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzYuNScgZmlsbD0nI2ZmZDIzYScgc3Ryb2tlPScjNzQ0MDAwJy8+PHRleHQgeD0nOCcgeT0nMTInIGZvbnQtZmFtaWx5PSdUcmVidWNoZXQgTVMnIGZvbnQtc2l6ZT0nMTAnIGZvbnQtd2VpZ2h0PSdib2xkJyB0ZXh0LWFuY2hvcj0nbWlkZGxlJyBmaWxsPScjMDYyYjhhJz5lPC90ZXh0Pjwvc3ZnPg==") !important;
}
.xp-taskbar .xp-ql-icon--media {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PGNpcmNsZSBjeD0nOCcgY3k9JzgnIHI9JzYuNScgZmlsbD0nI2ZmOGEzYScgc3Ryb2tlPScjN2EzYTAwJy8+PHBvbHlnb24gcG9pbnRzPSc2LDQuNSAxMiw4IDYsMTEuNScgZmlsbD0nI2ZmZicvPjwvc3ZnPg==") !important;
}
.xp-taskbar .xp-ql-icon {
	display: inline-block !important;
	width: 20px !important;
	height: 20px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 16px 16px !important;
	visibility: visible !important;
}

/* WordPress admin bar pushes <html> down 32px — make sure the desktop layer
   still fills the rest of the viewport, and the taskbar stays pinned at the
   true bottom of the viewport (it's already fixed, so this is just safety). */
html.admin-bar .xp-desktop-layer { min-height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
	html.admin-bar .xp-desktop-layer { min-height: calc(100vh - 46px); }
}