/*
	OS component layer.
	This file is loaded after the legacy Tailwind bundle and owns focused UI primitives
	that must not be redefined through late emergency overrides in the main bundle.
*/

/* OS icon sizing contract */
:root {
	--os-icon-size-titlebar: 1.05rem;
	--os-icon-size-taskbar: 2.15rem;
	--os-icon-size-compact: 2.5rem;
	--os-icon-size-desktop: 3.25rem;
	--os-icon-size-launcher: 3.25rem;
	--os-icon-size-feature: 4rem;
	--os-icon-radius: .72rem;
	--os-icon-radius-small: .42rem;
}

.os-app-icon,
.app-icon,
.mini-app-icon,
.window-title-app-icon,
.desktop-os-icon,
.desktop-install-icon,
.desktop-trash-icon,
.desktop-drive-icon,
.desktop-mounted-folder-icon,
.desktop-folder-icon {
	width: var(--os-icon-size, var(--os-icon-size-compact)) !important;
	height: var(--os-icon-size, var(--os-icon-size-compact)) !important;
	min-width: var(--os-icon-size, var(--os-icon-size-compact)) !important;
	min-height: var(--os-icon-size, var(--os-icon-size-compact)) !important;
	max-width: var(--os-icon-size, var(--os-icon-size-compact)) !important;
	max-height: var(--os-icon-size, var(--os-icon-size-compact)) !important;
	aspect-ratio: 1 / 1 !important;
	flex: 0 0 var(--os-icon-size, var(--os-icon-size-compact)) !important;
	border-radius: var(--os-icon-radius) !important;
	box-sizing: border-box !important;
}

.os-app-icon svg,
.app-icon svg,
.mini-app-icon svg,
.window-title-app-icon svg {
	width: 68% !important;
	height: 68% !important;
}

.os-app-icon.has-image img,
.app-icon.has-image img,
.mini-app-icon.has-image img,
.window-title-app-icon.has-image img {
	display: block !important;
	max-width: none !important;
	max-height: none !important;
}

.window-title-app-icon {
	--os-icon-size: var(--os-icon-size-titlebar);
	--os-icon-radius: var(--os-icon-radius-small);
}

.mini-app-icon,
.taskbar-app .os-app-icon,
.taskbar-app .mini-app-icon {
	--os-icon-size: var(--os-icon-size-taskbar);
	--os-icon-radius: .58rem;
}

.desktop-icon .os-app-icon,
.desktop-icon .app-icon,
.desktop-icon .desktop-os-icon,
.desktop-icon .desktop-install-icon,
.desktop-icon .desktop-trash-icon,
.desktop-icon .desktop-drive-icon,
.desktop-icon .desktop-mounted-folder-icon,
.desktop-icon .desktop-folder-icon,
.desktop-folder-dialog-item .os-app-icon,
.desktop-folder-dialog-item .app-icon {
	--os-icon-size: var(--os-icon-size-desktop);
	--os-icon-radius: .78rem;
}

.desktop-icon {
	width: 7rem !important;
	min-height: 6.85rem !important;
	height: 6.85rem !important;
	box-sizing: border-box !important;
	align-content: start !important;
}

.launcher-item .os-app-icon,
.launcher-item .app-icon {
	--os-icon-size: var(--os-icon-size-launcher);
	--os-icon-radius: .78rem;
}

.store-card .os-app-icon,
.store-row .os-app-icon,
.store-card .app-icon,
.store-row .app-icon,
.content-row .os-app-icon,
.content-row .app-icon {
	--os-icon-size: var(--os-icon-size-compact);
	--os-icon-radius: .64rem;
}

.store-detail .os-app-icon,
.store-detail .app-icon {
	--os-icon-size: var(--os-icon-size-feature);
	--os-icon-radius: .95rem;
}

.switcher-thumb .os-app-icon,
.switcher-thumb .mini-app-icon,
.task-process-app .os-app-icon,
.task-process-app .mini-app-icon {
	--os-icon-size: var(--os-icon-size-compact);
	--os-icon-radius: .64rem;
}

.desktop-folder-popover {
	--folder-from-x: 0px;
	--folder-from-y: 0px;
	position: fixed;
	inset: 0;
	z-index: 95;
	display: block;
	background: rgba(248,250,252,.16);
	backdrop-filter: blur(14px) saturate(135%);
	-webkit-backdrop-filter: blur(14px) saturate(135%);
	pointer-events: auto;
}

.desktop-folder-panel {
	position: fixed;
	left: 50%;
	top: 50%;
	display: grid;
	grid-template-rows: auto minmax(0,1fr);
	gap: .75rem;
	width: min(27rem,calc(100vw - 2rem));
	max-height: min(32rem,calc(100dvh - 6rem));
	border: 1px solid rgba(255,255,255,.48);
	border-radius: 1rem;
	background: rgba(var(--app-surface-solid-rgb),.82);
	box-shadow: 0 1.5rem 4.5rem rgba(15,23,42,.28), inset 0 1px 0 rgba(255,255,255,.46);
	backdrop-filter: blur(24px) saturate(150%);
	-webkit-backdrop-filter: blur(24px) saturate(150%);
	padding: .85rem;
	overflow: hidden;
	transform: translate(-50%,-50%) scale(1);
	transform-origin: center;
	animation: desktopFolderOpen .18s cubic-bezier(.2,.86,.22,1) both;
}

.desktop-folder-popover.is-closing .desktop-folder-panel {
	animation: desktopFolderClose .18s cubic-bezier(.36,0,.74,.16) both;
}

.desktop-folder-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-width: 0;
}

.desktop-folder-title {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	min-width: 0;
}

.desktop-folder-panel-header strong {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.desktop-folder-panel-header strong {
	font-size: .96rem;
	font-weight: var(--ui-font-weight-heavy);
}

.desktop-folder-title-edit,
.desktop-folder-title-action {
	display: grid;
	place-items: center;
	width: 1.45rem;
	height: 1.45rem;
	border: 1px solid transparent;
	border-radius: .42rem;
	background: transparent;
	color: var(--text);
	opacity: 0;
	transform: translateX(-.2rem);
	transition: background .14s ease,border-color .14s ease,opacity .14s ease,transform .14s ease;
}

.desktop-folder-title:hover .desktop-folder-title-edit,
.desktop-folder-title:focus-within .desktop-folder-title-edit {
	opacity: .72;
	transform: translateX(0);
}

.desktop-folder-title-edit:hover,
.desktop-folder-title-edit:focus-visible,
.desktop-folder-title-action:hover,
.desktop-folder-title-action:focus-visible {
	border-color: color-mix(in srgb,var(--accent) 24%,rgba(148,163,184,.22));
	background: color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.48));
	opacity: 1;
	outline: none;
	transform: translateX(0);
}

.desktop-folder-title-edit svg,
.desktop-folder-title-action svg {
	width: .82rem;
	height: .82rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.8;
}

.desktop-folder-title-form {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: minmax(0,1fr) auto auto;
	align-items: center;
	gap: .35rem;
	min-width: 0;
}

.desktop-folder-title-form.hidden {
	display: none !important;
}

.desktop-folder-title-input {
	min-width: 0;
	height: 1.9rem;
	border: 1px solid color-mix(in srgb,var(--accent) 32%,rgba(148,163,184,.24));
	border-radius: .5rem;
	background: color-mix(in srgb,var(--app-surface-solid) 80%,rgba(255,255,255,.42));
	padding: 0 .55rem;
	color: var(--text);
	font: inherit;
	font-weight: var(--ui-font-weight-heavy);
	outline: none;
}

.desktop-folder-title-action {
	opacity: .86;
	transform: none;
}

.desktop-folder-title-action:disabled {
	opacity: .34;
	pointer-events: none;
}

.desktop-folder-panel .desktop-folder-dialog-grid {
	min-height: 0;
	overflow: auto;
	padding: .1rem;
}

.desktop-folder-dialog-item.is-dragging {
	opacity: .38;
}

.desktop-folder-drag-ghost {
	position: fixed;
	z-index: 140;
	pointer-events: none;
	opacity: .82;
	transform: scale(.96);
	box-shadow: 0 1rem 2.5rem rgba(15,23,42,.22);
}

.desktop-folder-close {
	display: grid;
	place-items: center;
	flex: 0 0 1.7rem;
	width: 1.7rem;
	height: 1.7rem;
	border: 1px solid transparent;
	border-radius: .48rem;
	background: transparent;
	color: var(--text);
	opacity: .72;
	transition: background .14s ease,border-color .14s ease,opacity .14s ease,transform .14s ease;
}

.desktop-folder-close svg {
	width: .85rem;
	height: .85rem;
	stroke: currentColor;
}

.desktop-folder-close:hover,
.desktop-folder-close:focus-visible {
	border-color: color-mix(in srgb,var(--accent) 24%,rgba(148,163,184,.22));
	background: color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.48));
	opacity: 1;
	outline: none;
	transform: translateY(-1px);
}

body.is-dark .desktop-folder-panel {
	border-color: rgba(148,163,184,.28);
	background: rgba(var(--app-surface-solid-rgb),.86);
	box-shadow: 0 1.5rem 4.5rem rgba(2,6,23,.48), inset 0 1px 0 rgba(255,255,255,.08);
}

body.is-dark .desktop-folder-popover {
	background: rgba(2,6,23,.24);
}

@keyframes desktopFolderOpen {
	from {
		opacity: .2;
		transform: translate(calc(-50% + var(--folder-from-x)),calc(-50% + var(--folder-from-y))) scale(.18);
	}
	to {
		opacity: 1;
		transform: translate(-50%,-50%) scale(1);
	}
}

@keyframes desktopFolderClose {
	from {
		opacity: 1;
		transform: translate(-50%,-50%) scale(1);
	}
	to {
		opacity: 0;
		transform: translate(calc(-50% + var(--folder-from-x)),calc(-50% + var(--folder-from-y))) scale(.18);
	}
}

body.is-reduced-motion .desktop-folder-panel,
body.is-reduced-motion .desktop-folder-popover.is-closing .desktop-folder-panel {
	animation: none !important;
}

/* Media Player uses the same full-window toolbar/status shell as document viewers. */
.os-window[data-app-id=mediaplayer] .window-content {
	padding: 0 !important;
	overflow: hidden !important;
}

.media-player-app {
	display: grid !important;
	grid-template-rows: auto minmax(0,1fr) auto !important;
	height: 100% !important;
	min-height: 0 !important;
	background: var(--app-surface-solid) !important;
	color: var(--text) !important;
	overflow: hidden !important;
}

.media-player-toolbar,
.media-player-status {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: .75rem !important;
	border: 0 solid var(--app-chrome-border) !important;
	background: var(--app-chrome-blur) !important;
	box-shadow: var(--app-chrome-shadow) !important;
	backdrop-filter: blur(18px) saturate(145%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

.media-player-toolbar {
	border-bottom-width: 1px !important;
	padding: .46rem .6rem !important;
}

.media-player-status {
	min-height: 2rem !important;
	border-top-width: 1px !important;
	padding: .38rem .65rem !important;
	color: #64748b !important;
	font-size: .72rem !important;
}

.media-player-file {
	display: grid !important;
	gap: .08rem !important;
	min-width: 0 !important;
}

.media-player-file strong,
.media-player-file small,
.media-player-status span {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.media-player-file strong {
	font-size: .86rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
}

.media-player-file small {
	color: #64748b !important;
	font-size: .72rem !important;
}

.media-player-controls {
	display: flex !important;
	align-items: center !important;
	gap: .35rem !important;
	flex: 0 0 auto !important;
}

.media-player-controls .control-button {
	display: grid !important;
	place-items: center !important;
	width: 2.05rem !important;
	height: 2.05rem !important;
	min-width: 0 !important;
	padding: 0 !important;
}

.media-player-controls svg {
	width: 1rem !important;
	height: 1rem !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 2 !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
}

.media-player-stage {
	display: grid !important;
	place-items: center !important;
	min-height: 0 !important;
	background: radial-gradient(circle at top,color-mix(in srgb,var(--accent) 12%,transparent),transparent 42%),#050816 !important;
	overflow: hidden !important;
}

.media-player-app.is-audio .media-player-stage {
	padding: clamp(1rem,5vw,3rem) !important;
}

.media-player-element {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	background: #050816 !important;
	color-scheme: dark !important;
}

.media-player-app.is-audio .media-player-element {
	height: 3.25rem !important;
	max-width: 42rem !important;
	border-radius: .75rem !important;
	box-shadow: 0 1rem 2.4rem rgba(2,6,23,.24) !important;
}

.media-player-app.is-video .media-player-element {
	object-fit: contain !important;
}

body.is-dark .media-player-file small,
body.is-dark .media-player-status {
	color: #94a3b8 !important;
}

/* Categorized Twemoji panel for the OS keyboard. */
.system-keyboard-emoji-tabs {
	display: flex !important;
	align-items: center !important;
	gap: .34rem !important;
	overflow-x: auto !important;
	padding: .04rem .02rem .12rem !important;
	scrollbar-width: none !important;
}

.system-keyboard-emoji-tabs::-webkit-scrollbar {
	display: none !important;
}

.system-keyboard-emoji-tab {
	display: inline-flex !important;
	align-items: center !important;
	gap: .36rem !important;
	min-height: 2.28rem !important;
	border: 1px solid color-mix(in srgb,var(--accent) 14%,rgba(100,116,139,.24)) !important;
	border-radius: .72rem !important;
	background:
		linear-gradient(180deg,rgba(255,255,255,.82),rgba(248,250,252,.62)),
		color-mix(in srgb,var(--accent) 5%,rgba(255,255,255,.72)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.74), 0 .22rem .58rem rgba(15,23,42,.08) !important;
	color: #172033 !important;
	font-size: .78rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
	padding: .34rem .58rem !important;
	white-space: nowrap !important;
}

.system-keyboard-emoji-tab.is-active {
	border-color: color-mix(in srgb,var(--accent) 48%,rgba(100,116,139,.28)) !important;
	background:
		linear-gradient(180deg,color-mix(in srgb,var(--accent) 22%,rgba(255,255,255,.94)),color-mix(in srgb,var(--accent) 12%,rgba(248,250,252,.72))),
		rgba(255,255,255,.84) !important;
	color: color-mix(in srgb,var(--accent) 58%,#172033) !important;
}

.system-keyboard-emoji-grid {
	display: grid !important;
	grid-template-columns: repeat(8,minmax(2.65rem,1fr)) !important;
	gap: .36rem !important;
	min-width: 0 !important;
}

button.system-key.system-emoji-key {
	min-width: 0 !important;
	height: 2.72rem !important;
	padding: 0 !important;
}

.twemoji {
	display: block !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	pointer-events: none !important;
	user-select: none !important;
}

button.system-key.system-emoji-key .twemoji {
	width: 1.55rem !important;
	height: 1.55rem !important;
}

body.is-dark .system-keyboard-emoji-tab {
	border-color: color-mix(in srgb,var(--accent) 18%,rgba(148,163,184,.22)) !important;
	background:
		linear-gradient(180deg,rgba(51,65,85,.82),rgba(15,23,42,.72)),
		color-mix(in srgb,var(--accent) 7%,rgba(15,23,42,.8)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 .22rem .58rem rgba(2,6,23,.22) !important;
	color: #e5edf8 !important;
}

body.is-dark .system-keyboard-emoji-tab.is-active {
	border-color: color-mix(in srgb,var(--accent) 50%,rgba(148,163,184,.28)) !important;
	background:
		linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,rgba(51,65,85,.9)),color-mix(in srgb,var(--accent) 16%,rgba(15,23,42,.82))),
		rgba(15,23,42,.86) !important;
	color: color-mix(in srgb,var(--accent) 34%,#f8fafc) !important;
}

@media (max-width: 760px) {
	.system-keyboard-emoji-grid {
		grid-template-columns: repeat(6,minmax(2.3rem,1fr)) !important;
		gap: .26rem !important;
	}

	.system-keyboard-emoji-tab {
		min-height: 2.18rem !important;
		padding: .3rem .48rem !important;
	}

	.system-keyboard-emoji-tab span {
		display: none !important;
	}
}

/* File Manager and Browser tabbed title bars */
.os-window[data-app-id=files].has-window-tabs .window-title,
.os-window[data-app-id=browser].has-window-tabs .window-title {
	display: inline-flex !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	overflow: visible !important;
}

.os-window[data-app-id=files].has-window-tabs .window-title-label,
.os-window[data-app-id=browser].has-window-tabs .window-title-label {
	display: none !important;
	width: 0 !important;
	min-width: 0 !important;
	max-width: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

.os-window[data-app-id=files].has-window-tabs .window-title-tabs,
.os-window[data-app-id=browser].has-window-tabs .window-title-tabs {
	display: flex !important;
	align-items: center !important;
	align-self: center !important;
	flex: 1 1 auto !important;
	height: 100% !important;
	min-width: 0 !important;
	margin-left: .42rem !important;
}

.os-window[data-app-id=files].is-topbar-merged .topbar-window-tabs,
.os-window[data-app-id=browser].is-topbar-merged .topbar-window-tabs {
	display: flex !important;
	align-items: center !important;
	align-self: stretch !important;
	min-height: 100% !important;
}

.os-window[data-app-id=files] .window-title-tabs .window-tabs,
.os-window[data-app-id=browser] .window-title-tabs .window-tabs,
.os-window[data-app-id=files].is-topbar-merged .topbar-window-tabs .window-tabs,
.os-window[data-app-id=browser].is-topbar-merged .topbar-window-tabs .window-tabs {
	align-items: center !important;
	height: 100% !important;
	min-height: 0 !important;
}

.os-window[data-app-id=files] .window-title-tabs .window-tab,
.os-window[data-app-id=browser] .window-title-tabs .window-tab,
.os-window[data-app-id=files].is-topbar-merged .topbar-window-tabs .window-tab,
.os-window[data-app-id=browser].is-topbar-merged .topbar-window-tabs .window-tab,
.browser-tab {
	display: inline-flex !important;
	align-items: center !important;
	align-self: center !important;
	justify-content: flex-start !important;
	gap: .42rem !important;
	min-height: 1.95rem !important;
	text-align: left !important;
	border: 1px solid color-mix(in srgb,var(--accent) 12%,rgba(100,116,139,.24)) !important;
	background: color-mix(in srgb,var(--app-surface-solid) 58%,rgba(255,255,255,.24)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.os-window[data-app-id=files] .window-title-tabs .window-tab > span:not(.window-tab-close):not(.window-tab-icon),
.os-window[data-app-id=browser] .window-title-tabs .window-tab > span:not(.window-tab-close):not(.window-tab-icon),
.os-window[data-app-id=files].is-topbar-merged .topbar-window-tabs .window-tab > span:not(.window-tab-close):not(.window-tab-icon),
.os-window[data-app-id=browser].is-topbar-merged .topbar-window-tabs .window-tab > span:not(.window-tab-close):not(.window-tab-icon),
.browser-tab > span:not(.browser-tab-favicon) {
	display: block !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-align: left !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.os-window[data-app-id=files] .window-tab-close,
.os-window[data-app-id=browser] .window-tab-close,
.browser-tab-close {
	display: grid !important;
	flex: 0 0 1.05rem !important;
	width: 1.05rem !important;
	height: 1.05rem !important;
	min-width: 1.05rem !important;
	border: 0 !important;
	border-radius: .38rem !important;
	background: transparent !important;
	color: currentColor !important;
	margin-left: auto !important;
	padding: 0 !important;
	opacity: .72 !important;
	place-items: center !important;
	pointer-events: auto !important;
	z-index: 1 !important;
}

.os-window[data-app-id=files] .window-tab-close svg,
.os-window[data-app-id=browser] .window-tab-close svg,
.browser-tab-close .browser-icon {
	display: block !important;
	width: .78rem !important;
	height: .78rem !important;
	flex: 0 0 auto !important;
	stroke: currentColor !important;
}

.os-window[data-app-id=files] .window-tab-close:hover,
.os-window[data-app-id=browser] .window-tab-close:hover,
.browser-tab-close:hover {
	background: color-mix(in srgb,var(--accent) 18%,rgba(15,23,42,.1)) !important;
	opacity: 1 !important;
}

.os-window[data-app-id=files] .window-title-tabs .window-tab-new,
.os-window[data-app-id=browser] .window-title-tabs .window-tab-new,
.os-window[data-app-id=files].is-topbar-merged .topbar-window-tabs .window-tab-new,
.os-window[data-app-id=browser].is-topbar-merged .topbar-window-tabs .window-tab-new {
	flex: 0 0 1.9rem !important;
	width: 1.9rem !important;
	min-width: 1.9rem !important;
	max-width: 1.9rem !important;
	justify-content: center !important;
	padding-inline: 0 !important;
	font-size: .98rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
}

body.is-dark .os-window[data-app-id=files] .window-title-tabs .window-tab,
body.is-dark .os-window[data-app-id=browser] .window-title-tabs .window-tab,
body.is-dark .os-window[data-app-id=files].is-topbar-merged .topbar-window-tabs .window-tab,
body.is-dark .os-window[data-app-id=browser].is-topbar-merged .topbar-window-tabs .window-tab,
body.is-dark .browser-tab {
	border-color: rgba(148,163,184,.24) !important;
	background: color-mix(in srgb,var(--app-surface-solid) 58%,rgba(30,41,59,.48)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}

/* Browser full-surface layout */
.os-window[data-app-id=browser] .window-content {
	padding: 0 !important;
	overflow: hidden !important;
}

.os-window[data-app-id=browser] .browser-shell {
	display: grid !important;
	grid-template-rows: auto auto minmax(0,1fr) !important;
	gap: 0 !important;
	height: 100% !important;
	min-height: 0 !important;
	background: var(--app-surface-solid) !important;
	overflow: hidden !important;
}

.os-window[data-app-id=browser] .browser-tabs {
	display: none !important;
}

.os-window[data-app-id=browser] .browser-toolbar,
.os-window[data-app-id=browser] .browser-meta {
	border-bottom: 1px solid var(--app-chrome-border) !important;
	background: var(--app-chrome-blur) !important;
	box-shadow: var(--app-chrome-shadow) !important;
	backdrop-filter: blur(18px) saturate(145%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

.os-window[data-app-id=browser] .browser-toolbar {
	padding: .42rem .55rem !important;
}

.os-window[data-app-id=browser] .browser-meta {
	min-height: 1.55rem !important;
	padding: .18rem .65rem !important;
}

.os-window[data-app-id=browser] .browser-content {
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--app-surface-solid) !important;
	box-shadow: none !important;
}

.os-window[data-app-id=browser] .browser-frame-host,
.os-window[data-app-id=browser] .browser-frame,
.os-window[data-app-id=browser] .browser-native-surface {
	border-radius: 0 !important;
	background: #fff !important;
}

body.is-dark .os-window[data-app-id=browser] .browser-frame-host,
body.is-dark .os-window[data-app-id=browser] .browser-native-surface {
	background: var(--app-surface-solid) !important;
}

/* Compact app toolbars */
.os-window[data-app-id=editor] .window-content,
.os-window[data-app-id=notes] .window-content {
	padding: 0 !important;
	overflow: hidden !important;
}

.app-line-toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: .55rem !important;
	min-height: 2.85rem !important;
	border-bottom: 1px solid var(--app-chrome-border) !important;
	background: var(--app-chrome-blur) !important;
	box-shadow: var(--app-chrome-shadow) !important;
	backdrop-filter: blur(18px) saturate(145%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(145%) !important;
	padding: .42rem .55rem !important;
}

.app-toolbar-title {
	min-width: 0 !important;
	overflow: hidden !important;
	color: var(--text) !important;
	font-size: .86rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.app-toolbar-title-input {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: 2.05rem !important;
	border: 1px solid color-mix(in srgb,var(--accent) 10%,rgba(148,163,184,.2)) !important;
	border-radius: .58rem !important;
	background: color-mix(in srgb,var(--app-surface-solid) 86%,rgba(255,255,255,.48)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.5) !important;
	padding: .28rem .7rem !important;
	color: var(--text) !important;
	font-size: .82rem !important;
	outline: none !important;
}

.app-toolbar-title-input:focus {
	border-color: color-mix(in srgb,var(--accent) 42%,rgba(148,163,184,.24)) !important;
	box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.5) !important;
}

.app-toolbar-actions {
	display: flex !important;
	flex: 0 0 auto !important;
	align-items: center !important;
	gap: .3rem !important;
}

.app-icon-button.is-primary {
	border-color: color-mix(in srgb,var(--accent) 32%,rgba(148,163,184,.2)) !important;
	background: color-mix(in srgb,var(--accent) 18%,rgba(255,255,255,.5)) !important;
	color: var(--text) !important;
}

.app-icon-button.is-primary:hover,
.app-icon-button.is-primary:focus-visible {
	background: color-mix(in srgb,var(--accent) 26%,rgba(255,255,255,.55)) !important;
}

.notes-shell {
	height: 100% !important;
	min-height: 0 !important;
	background: var(--app-surface-solid) !important;
}

.notes-body {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--app-surface-solid) !important;
	padding: .85rem 1rem !important;
	color: var(--text) !important;
	font-size: .9rem !important;
	line-height: 1.55 !important;
	outline: none !important;
	resize: none !important;
}

body.is-dark .app-toolbar-title-input {
	border-color: rgba(148,163,184,.16) !important;
	background: color-mix(in srgb,var(--app-surface-solid) 76%,rgba(30,41,59,.56)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.is-dark .notes-body {
	background: var(--app-surface-solid) !important;
}

/* Clock app */
.os-window[data-app-id=clockapp] .window-content {
	padding: 0 !important;
	overflow: hidden !important;
}

.clock-app {
	height: 100% !important;
	min-height: 0 !important;
	background: var(--app-surface-solid) !important;
}

.clock-toolbar {
	justify-content: flex-start !important;
	overflow: hidden !important;
}

.clock-mode-tabs {
	display: flex !important;
	align-items: center !important;
	gap: .28rem !important;
	min-width: 0 !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
}

.clock-mode-tabs::-webkit-scrollbar {
	display: none !important;
}

.clock-mode-tab {
	display: inline-flex !important;
	align-items: center !important;
	gap: .36rem !important;
	flex: 0 0 auto !important;
	min-height: 2.05rem !important;
	border: 1px solid transparent !important;
	border-radius: .58rem !important;
	background: transparent !important;
	padding: .28rem .58rem !important;
	color: color-mix(in srgb,var(--text) 74%,var(--muted)) !important;
	font-size: .8rem !important;
	font-weight: var(--ui-font-weight-medium) !important;
}

.clock-mode-tab:hover,
.clock-mode-tab:focus-visible {
	border-color: color-mix(in srgb,var(--accent) 18%,rgba(148,163,184,.22)) !important;
	background: color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.46)) !important;
	color: var(--text) !important;
	outline: none !important;
}

.clock-mode-tab.is-active {
	border-color: color-mix(in srgb,var(--accent) 28%,rgba(148,163,184,.2)) !important;
	background: color-mix(in srgb,var(--accent) 16%,rgba(255,255,255,.52)) !important;
	color: var(--text) !important;
}

.clock-panel {
	position: relative !important;
	min-height: 0 !important;
	overflow: auto !important;
}

.clock-section {
	display: grid !important;
	gap: .8rem !important;
	min-height: 100% !important;
	padding: .9rem !important;
}

.clock-center,
.clock-face {
	place-content: center !important;
	place-items: center !important;
	text-align: center !important;
}

.clock-muted {
	color: var(--muted) !important;
	font-size: .88rem !important;
}

.clock-display {
	font-size: clamp(2.6rem,11vw,5.8rem) !important;
	font-weight: var(--ui-font-weight-heavy) !important;
	line-height: 1 !important;
	letter-spacing: 0 !important;
}

.clock-actions,
.clock-duration-inputs,
.clock-form-row {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: .45rem !important;
	flex-wrap: wrap !important;
}

.clock-duration-inputs .field-control {
	width: 6rem !important;
	text-align: center !important;
}

.clock-timezone-select {
	min-width: min(18rem,100%) !important;
	max-width: 100% !important;
}

.clock-timezone-select span:first-child {
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.clock-world {
	grid-template-columns: minmax(14rem,1fr) minmax(14rem,.72fr) !important;
	align-items: stretch !important;
}

.clock-world-map {
	position: relative !important;
	min-height: 18rem !important;
	border: 1px solid var(--app-chrome-border) !important;
	border-radius: .9rem !important;
	background:
		radial-gradient(circle at 20% 18%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 28%),
		linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--app-surface-solid)),var(--app-surface-solid)) !important;
	overflow: hidden !important;
}

.clock-map-svg {
	position: absolute !important;
	inset: 8% 5% !important;
	width: 90% !important;
	height: 84% !important;
	fill: color-mix(in srgb,var(--accent) 24%,rgba(100,116,139,.2)) !important;
	stroke: color-mix(in srgb,var(--accent) 34%,rgba(100,116,139,.22)) !important;
	stroke-width: .4 !important;
}

.clock-map-pin {
	position: absolute !important;
	display: grid !important;
	justify-items: center !important;
	gap: .18rem !important;
	transform: translate(-50%,-50%) !important;
	color: var(--text) !important;
	font-size: .68rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
	text-shadow: 0 1px 8px rgba(15,23,42,.28) !important;
}

.clock-map-pin b {
	width: .62rem !important;
	height: .62rem !important;
	border: 2px solid color-mix(in srgb,var(--accent) 30%,#fff) !important;
	border-radius: 999px !important;
	background: var(--accent) !important;
	box-shadow: 0 0 0 .28rem color-mix(in srgb,var(--accent) 18%,transparent),0 .35rem .8rem rgba(15,23,42,.2) !important;
}

.clock-city-list,
.clock-alarm-list,
.clock-laps {
	display: grid !important;
	align-content: start !important;
	gap: .45rem !important;
	min-height: 0 !important;
	overflow: auto !important;
}

.clock-city-card,
.clock-alarm-card,
.clock-lap-row {
	display: grid !important;
	grid-template-columns: minmax(0,1fr) auto auto !important;
	align-items: center !important;
	gap: .7rem !important;
	border: 1px solid var(--app-chrome-border) !important;
	border-radius: .72rem !important;
	background: color-mix(in srgb,var(--app-surface-solid) 84%,rgba(255,255,255,.38)) !important;
	padding: .62rem .7rem !important;
}

.clock-city-card span,
.clock-alarm-card span {
	display: grid !important;
	min-width: 0 !important;
}

.clock-city-card strong,
.clock-city-card small,
.clock-alarm-card strong,
.clock-alarm-card small {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.clock-city-card small,
.clock-alarm-card small {
	color: var(--muted) !important;
	font-size: .74rem !important;
}

.clock-city-time,
.clock-alarm-card strong {
	font-size: 1.1rem !important;
	font-weight: var(--ui-font-weight-heavy) !important;
}

.clock-alarm-toggle {
	display: grid !important;
	place-items: center !important;
}

.clock-lap-row {
	grid-template-columns: auto minmax(0,1fr) !important;
	width: min(20rem,100%) !important;
}

.clock-lap-row span {
	color: var(--muted) !important;
	font-size: .8rem !important;
}

.clock-lap-row strong {
	justify-self: end !important;
}

.clock-ring-banner {
	position: sticky !important;
	top: .65rem !important;
	z-index: 3 !important;
	display: grid !important;
	grid-template-columns: minmax(0,1fr) auto !important;
	align-items: center !important;
	gap: .35rem .7rem !important;
	width: min(28rem,calc(100% - 1.3rem)) !important;
	margin: .65rem auto -.15rem !important;
	border: 1px solid color-mix(in srgb,var(--accent) 26%,var(--app-chrome-border)) !important;
	border-radius: .8rem !important;
	background: var(--app-chrome-blur) !important;
	box-shadow: 0 .75rem 2rem rgba(15,23,42,.16) !important;
	backdrop-filter: blur(18px) saturate(145%) !important;
	-webkit-backdrop-filter: blur(18px) saturate(145%) !important;
	padding: .65rem !important;
}

.clock-ring-banner strong,
.clock-ring-banner span {
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.clock-ring-banner span {
	color: var(--muted) !important;
	font-size: .8rem !important;
}

@media (max-width: 760px) {
	.clock-mode-tab span {
		display: none !important;
	}

	.clock-world {
		grid-template-columns: 1fr !important;
	}

	.clock-world-map {
		min-height: 13rem !important;
	}

	.clock-form-row {
		align-items: stretch !important;
		flex-direction: column !important;
	}

	.clock-form-row .field-control,
	.clock-form-row .clock-timezone-select,
	.clock-form-row .file-icon-button {
		width: 100% !important;
	}
}

/* Calendar app */
.os-window[data-app-id=calendar] .window-content {
	padding: 0 !important;
	overflow: hidden !important;
}

.calendar-app {
	height: 100% !important;
	min-height: 0 !important;
	background: var(--app-surface-solid) !important;
	color: var(--text) !important;
}

.calendar-toolbar {
	justify-content: space-between !important;
}

.calendar-month-controls {
	display: flex !important;
	align-items: center !important;
	gap: .35rem !important;
	min-width: 0 !important;
}

.calendar-month-title {
	min-width: min(12rem,34vw) !important;
	overflow: hidden !important;
	color: var(--text) !important;
	font-size: .92rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
	text-align: center !important;
	text-overflow: ellipsis !important;
	text-transform: capitalize !important;
	white-space: nowrap !important;
}

.calendar-text-button,
.calendar-primary-button {
	min-height: 2.05rem !important;
	border-radius: .58rem !important;
	padding: .34rem .72rem !important;
	font-size: .82rem !important;
	font-weight: var(--ui-font-weight-medium) !important;
}

.calendar-content {
	display: grid !important;
	grid-template-columns: minmax(20rem,1fr) minmax(18rem,.72fr) !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

.calendar-month-pane,
.calendar-detail-pane {
	min-width: 0 !important;
	min-height: 0 !important;
	background: var(--app-surface-solid) !important;
}

.calendar-month-pane {
	display: grid !important;
	padding: .75rem !important;
}

.calendar-detail-pane {
	display: grid !important;
	grid-template-rows: auto minmax(0,1fr) auto !important;
	border-left: 1px solid var(--app-chrome-border) !important;
}

.calendar-grid-shell {
	display: grid !important;
	grid-template-rows: auto minmax(0,1fr) !important;
	min-height: 0 !important;
	border: 1px solid var(--app-chrome-border) !important;
	border-radius: .88rem !important;
	background: color-mix(in srgb,var(--app-surface-solid) 90%,rgba(255,255,255,.34)) !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.38) !important;
	overflow: hidden !important;
}

.calendar-weekdays,
.calendar-grid {
	display: grid !important;
	grid-template-columns: repeat(7,minmax(0,1fr)) !important;
}

.calendar-weekdays {
	border-bottom: 1px solid var(--app-chrome-border) !important;
	background: color-mix(in srgb,var(--app-chrome-blur) 78%,rgba(255,255,255,.18)) !important;
}

.calendar-weekdays span {
	display: grid !important;
	place-items: center !important;
	min-height: 2rem !important;
	color: var(--muted) !important;
	font-size: .72rem !important;
	font-weight: var(--ui-font-weight-heavy) !important;
	text-transform: uppercase !important;
}

.calendar-grid {
	min-height: 0 !important;
	grid-auto-rows: minmax(4.6rem,1fr) !important;
	overflow: auto !important;
}

.calendar-day {
	display: grid !important;
	align-content: start !important;
	gap: .25rem !important;
	min-width: 0 !important;
	min-height: 4.6rem !important;
	border-right: 1px solid var(--app-chrome-border) !important;
	border-bottom: 1px solid var(--app-chrome-border) !important;
	background: transparent !important;
	padding: .45rem !important;
	color: var(--text) !important;
	text-align: left !important;
	transition: background .14s ease,color .14s ease,box-shadow .14s ease !important;
}

.calendar-day:hover,
.calendar-day:focus-visible {
	background: color-mix(in srgb,var(--accent) 9%,rgba(255,255,255,.42)) !important;
	outline: none !important;
}

.calendar-day.is-muted {
	color: color-mix(in srgb,var(--text) 44%,var(--muted)) !important;
}

.calendar-day.is-selected {
	background: color-mix(in srgb,var(--accent) 17%,rgba(255,255,255,.58)) !important;
	box-shadow: inset 0 0 0 2px color-mix(in srgb,var(--accent) 38%,transparent) !important;
}

.calendar-day.is-today .calendar-day-head strong {
	color: var(--accent) !important;
}

.calendar-day-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: .35rem !important;
	font-size: .82rem !important;
}

.calendar-event-dot {
	width: .42rem !important;
	height: .42rem !important;
	border-radius: 999px !important;
	background: var(--accent) !important;
	box-shadow: 0 0 0 .18rem color-mix(in srgb,var(--accent) 14%,transparent) !important;
}

.calendar-event-chip {
	display: block !important;
	min-width: 0 !important;
	overflow: hidden !important;
	border-radius: .42rem !important;
	background: color-mix(in srgb,var(--accent) 11%,rgba(255,255,255,.58)) !important;
	padding: .16rem .38rem !important;
	color: var(--text) !important;
	font-size: .68rem !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.calendar-detail-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: .8rem !important;
	min-height: 4rem !important;
	padding: .72rem .82rem !important;
}

.calendar-detail-header > span:first-child {
	display: grid !important;
	min-width: 0 !important;
	gap: .15rem !important;
}

.calendar-detail-header strong,
.calendar-detail-header small {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.calendar-detail-header small,
.calendar-status {
	color: var(--muted) !important;
	font-size: .76rem !important;
}

.calendar-detail-icon {
	display: grid !important;
	place-items: center !important;
	width: 2.55rem !important;
	height: 2.55rem !important;
	border-radius: .72rem !important;
	background: linear-gradient(135deg,var(--accent),var(--accent-2)) !important;
	color: #fff !important;
	box-shadow: 0 .5rem 1.1rem color-mix(in srgb,var(--accent) 22%,transparent) !important;
}

.calendar-detail-icon svg {
	width: 1.35rem !important;
	height: 1.35rem !important;
	fill: none !important;
	stroke: currentColor !important;
	stroke-linecap: round !important;
	stroke-linejoin: round !important;
	stroke-width: 2 !important;
}

.calendar-detail-scroll {
	display: grid !important;
	align-content: start !important;
	gap: .75rem !important;
	min-height: 0 !important;
	overflow: auto !important;
	padding: .75rem !important;
}

.calendar-agenda {
	display: grid !important;
	gap: .45rem !important;
}

.calendar-agenda-item {
	display: grid !important;
	width: 100% !important;
	border: 1px solid var(--app-chrome-border) !important;
	border-radius: .72rem !important;
	background: color-mix(in srgb,var(--app-surface-solid) 86%,rgba(255,255,255,.34)) !important;
	padding: .62rem .7rem !important;
	text-align: left !important;
}

.calendar-agenda-item:hover,
.calendar-agenda-item:focus-visible,
.calendar-agenda-item.is-active {
	border-color: color-mix(in srgb,var(--accent) 34%,var(--app-chrome-border)) !important;
	background: color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.52)) !important;
	outline: none !important;
}

.calendar-agenda-item span,
.calendar-agenda-item strong,
.calendar-agenda-item small {
	display: block !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

.calendar-agenda-item small {
	color: var(--muted) !important;
	font-size: .74rem !important;
}

.calendar-form {
	display: grid !important;
	gap: .7rem !important;
	border: 1px solid var(--app-chrome-border) !important;
	border-radius: .88rem !important;
	background: color-mix(in srgb,var(--app-surface-solid) 88%,rgba(255,255,255,.38)) !important;
	padding: .78rem !important;
}

.calendar-form label {
	display: grid !important;
	gap: .28rem !important;
	color: var(--muted) !important;
	font-size: .72rem !important;
	font-weight: var(--ui-font-weight-heavy) !important;
	text-transform: uppercase !important;
}

.calendar-form-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit,minmax(min(100%,8rem),1fr)) !important;
	gap: .55rem !important;
}

.calendar-form .field-control {
	width: 100% !important;
	min-height: 2.12rem !important;
	border: 1px solid color-mix(in srgb,var(--accent) 10%,rgba(148,163,184,.2)) !important;
	border-radius: .58rem !important;
	background: color-mix(in srgb,var(--app-surface-solid) 86%,rgba(255,255,255,.48)) !important;
	padding: .42rem .65rem !important;
	color: var(--text) !important;
	font-size: .84rem !important;
	font-weight: var(--ui-font-weight-medium) !important;
	outline: none !important;
	text-transform: none !important;
}

.calendar-form textarea.field-control {
	min-height: 6rem !important;
	resize: vertical !important;
}

.calendar-form .field-control:focus {
	border-color: color-mix(in srgb,var(--accent) 42%,rgba(148,163,184,.24)) !important;
	box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent) !important;
}

.calendar-form-actions {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: .55rem !important;
	flex-wrap: wrap !important;
}

.calendar-status {
	display: flex !important;
	align-items: center !important;
	min-height: 2rem !important;
	padding: .36rem .82rem !important;
}

body.is-dark .calendar-grid-shell,
body.is-dark .calendar-agenda-item,
body.is-dark .calendar-form {
	background: color-mix(in srgb,var(--app-surface-solid) 76%,rgba(30,41,59,.52)) !important;
}

body.is-dark .calendar-form .field-control {
	border-color: rgba(148,163,184,.16) !important;
	background: color-mix(in srgb,var(--app-surface-solid) 76%,rgba(30,41,59,.56)) !important;
}

@media (max-width: 760px) {
	.calendar-content {
		grid-template-columns: 1fr !important;
		overflow: auto !important;
	}

	.calendar-detail-pane {
		border-left: 0 !important;
		border-top: 1px solid var(--app-chrome-border) !important;
	}

	.calendar-month-pane {
		min-height: 25rem !important;
	}

	.calendar-toolbar {
		align-items: stretch !important;
		flex-wrap: wrap !important;
	}

	.calendar-month-controls {
		flex: 1 1 100% !important;
		justify-content: space-between !important;
	}
}

/* Tasks app */
.os-window[data-app-id=tasks] .window-content {
	padding: 0 !important;
	overflow: hidden !important;
}

.tasks-app {
	display: grid !important;
	grid-template-rows: auto minmax(0,1fr) !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	background: var(--app-surface-solid) !important;
	color: var(--text) !important;
}

.tasks-toolbar {
	display: grid !important;
	grid-template-columns: minmax(12rem,.65fr) minmax(18rem,1.35fr) !important;
	align-items: center !important;
	gap: .65rem !important;
	min-height: 3.35rem !important;
	border-bottom: 1px solid var(--app-chrome-border) !important;
	padding: .58rem .72rem !important;
}

.tasks-search,
.tasks-quick-add {
	display: grid !important;
	align-items: center !important;
	gap: .45rem !important;
	min-width: 0 !important;
}

.tasks-search {
	grid-template-columns: auto minmax(0,1fr) !important;
}

.tasks-search svg {
	width: 1rem !important;
	height: 1rem !important;
	stroke: var(--muted) !important;
	stroke-width: 1.8 !important;
	fill: none !important;
}

.tasks-quick-add {
	grid-template-columns: minmax(0,1fr) auto !important;
}

.tasks-quick-add .primary-button {
	min-height: 2.15rem !important;
	border-radius: .62rem !important;
	padding: .4rem .8rem !important;
	font-size: .82rem !important;
}

.tasks-main {
	display: grid !important;
	grid-template-columns: minmax(10.5rem,.45fr) minmax(15rem,.9fr) minmax(16rem,.8fr) !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

.tasks-sidebar {
	display: grid !important;
	align-content: start !important;
	gap: .32rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-right: 1px solid var(--app-chrome-border) !important;
	background: var(--app-chrome-blur) !important;
	padding: .65rem !important;
	overflow: auto !important;
	backdrop-filter: blur(var(--panel-blur)) saturate(145%) !important;
	-webkit-backdrop-filter: blur(var(--panel-blur)) saturate(145%) !important;
}

.tasks-view,
.tasks-project {
	display: grid !important;
	grid-template-columns: auto minmax(0,1fr) auto !important;
	align-items: center !important;
	gap: .5rem !important;
	min-height: 2.1rem !important;
	border-radius: .62rem !important;
	padding: .38rem .48rem !important;
	color: var(--text) !important;
	text-align: left !important;
	transition: background .14s ease,box-shadow .14s ease !important;
}

.tasks-project {
	grid-template-columns: minmax(0,1fr) auto !important;
}

.tasks-view svg {
	width: 1rem !important;
	height: 1rem !important;
	stroke: currentColor !important;
	stroke-width: 1.8 !important;
	fill: none !important;
}

.tasks-view span,
.tasks-project {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-size: .84rem !important;
	font-weight: var(--ui-font-weight-medium) !important;
}

.tasks-view small,
.tasks-project small {
	color: var(--muted) !important;
	font-size: .72rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
}

.tasks-view:hover,
.tasks-view:focus-visible,
.tasks-view.is-active,
.tasks-project:hover,
.tasks-project:focus-visible {
	background: color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.45)) !important;
	outline: none !important;
}

.tasks-projects {
	display: grid !important;
	gap: .22rem !important;
	margin-top: .75rem !important;
	padding-top: .75rem !important;
	border-top: 1px solid var(--app-chrome-border) !important;
}

.tasks-projects > strong {
	padding: 0 .45rem .2rem !important;
	color: var(--muted) !important;
	font-size: .72rem !important;
	text-transform: uppercase !important;
}

.tasks-list {
	display: grid !important;
	grid-template-rows: auto minmax(0,1fr) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	border-right: 1px solid var(--app-chrome-border) !important;
	background: var(--app-surface-solid) !important;
}

.tasks-list-head {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	min-height: 2.8rem !important;
	border-bottom: 1px solid var(--app-chrome-border) !important;
	padding: .5rem .72rem !important;
}

.tasks-list-head strong {
	font-size: .92rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
}

.tasks-list-head span {
	color: var(--muted) !important;
	font-size: .78rem !important;
}

.tasks-list-scroll,
.tasks-detail-scroll {
	min-height: 0 !important;
	overflow: auto !important;
}

.tasks-list-scroll {
	display: grid !important;
	align-content: start !important;
	gap: .42rem !important;
	padding: .6rem !important;
}

.tasks-row {
	display: grid !important;
	grid-template-columns: auto minmax(0,1fr) !important;
	align-items: start !important;
	gap: .55rem !important;
	border: 1px solid var(--app-chrome-border) !important;
	border-radius: .78rem !important;
	background: color-mix(in srgb,var(--app-surface-solid) 88%,rgba(255,255,255,.36)) !important;
	padding: .5rem !important;
}

.tasks-row.is-selected {
	border-color: color-mix(in srgb,var(--accent) 46%,var(--app-chrome-border)) !important;
	box-shadow: 0 0 0 .18rem color-mix(in srgb,var(--accent) 16%,transparent) !important;
}

.tasks-row.is-completed {
	opacity: .68 !important;
}

.tasks-check {
	display: grid !important;
	place-items: center !important;
	width: 1.28rem !important;
	height: 1.28rem !important;
	margin-top: .12rem !important;
	border: 1px solid color-mix(in srgb,var(--accent) 32%,var(--app-chrome-border)) !important;
	border-radius: 999px !important;
	color: var(--accent) !important;
}

.tasks-check svg {
	width: .9rem !important;
	height: .9rem !important;
	stroke: currentColor !important;
	stroke-width: 2.2 !important;
	fill: none !important;
}

.tasks-row-main {
	display: grid !important;
	gap: .28rem !important;
	min-width: 0 !important;
	text-align: left !important;
}

.tasks-row-main strong {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	font-size: .88rem !important;
}

.tasks-row-main span {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: .3rem !important;
}

.tasks-row-main small,
.tasks-priority {
	border-radius: 999px !important;
	background: color-mix(in srgb,var(--accent) 9%,rgba(148,163,184,.12)) !important;
	padding: .12rem .38rem !important;
	color: var(--muted) !important;
	font-size: .68rem !important;
}

.tasks-priority.is-high {
	background: rgba(239,68,68,.14) !important;
	color: #b91c1c !important;
}

.tasks-priority.is-medium {
	background: rgba(245,158,11,.16) !important;
	color: #a16207 !important;
}

.tasks-priority.is-low {
	background: rgba(34,197,94,.14) !important;
	color: #15803d !important;
}

.tasks-row-main .is-overdue {
	background: rgba(239,68,68,.14) !important;
	color: #b91c1c !important;
}

.tasks-detail {
	display: grid !important;
	min-width: 0 !important;
	min-height: 0 !important;
	background: var(--app-surface-solid) !important;
}

.tasks-detail-scroll {
	display: grid !important;
	align-content: start !important;
	gap: .7rem !important;
	padding: .75rem !important;
}

.tasks-field,
.tasks-subtasks {
	display: grid !important;
	gap: .35rem !important;
	min-width: 0 !important;
}

.tasks-field span,
.tasks-subtasks header {
	color: var(--muted) !important;
	font-size: .72rem !important;
	font-weight: var(--ui-font-weight-strong) !important;
	text-transform: uppercase !important;
}

.tasks-field-grid {
	display: grid !important;
	grid-template-columns: repeat(2,minmax(0,1fr)) !important;
	gap: .55rem !important;
}

.tasks-field textarea {
	min-height: 5.25rem !important;
	resize: vertical !important;
}

.tasks-subtasks {
	border: 1px solid var(--app-chrome-border) !important;
	border-radius: .78rem !important;
	padding: .65rem !important;
}

.tasks-subtask,
#subtaskForm {
	display: grid !important;
	grid-template-columns: auto minmax(0,1fr) auto !important;
	align-items: center !important;
	gap: .45rem !important;
	min-height: 2rem !important;
}

.tasks-subtask span {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	color: var(--text) !important;
	font-size: .82rem !important;
	text-transform: none !important;
}

.tasks-subtask.is-done span {
	color: var(--muted) !important;
	text-decoration: line-through !important;
}

.tasks-subtask button {
	color: var(--muted) !important;
	font-size: .8rem !important;
}

#subtaskForm {
	grid-template-columns: minmax(0,1fr) auto !important;
	margin-top: .45rem !important;
}

.tasks-actions {
	display: flex !important;
	justify-content: flex-end !important;
	flex-wrap: wrap !important;
	gap: .45rem !important;
}

.tasks-actions .control-button {
	min-height: 2.05rem !important;
	border-radius: .58rem !important;
	padding: .34rem .72rem !important;
	font-size: .8rem !important;
}

.tasks-actions .is-danger {
	color: #b91c1c !important;
}

body.is-dark .tasks-priority.is-high,
body.is-dark .tasks-row-main .is-overdue {
	color: #fecaca !important;
}

body.is-dark .tasks-priority.is-medium {
	color: #fde68a !important;
}

body.is-dark .tasks-priority.is-low {
	color: #bbf7d0 !important;
}

@media (max-width: 820px) {
	.tasks-toolbar {
		grid-template-columns: 1fr !important;
	}

	.tasks-main {
		grid-template-columns: 1fr !important;
		grid-template-rows: auto minmax(12rem,.8fr) minmax(14rem,1fr) !important;
	}

	.tasks-sidebar {
		grid-auto-flow: column !important;
		grid-auto-columns: minmax(8rem,1fr) !important;
		border-right: 0 !important;
		border-bottom: 1px solid var(--app-chrome-border) !important;
		overflow-x: auto !important;
	}

	.tasks-projects {
		display: none !important;
	}

	.tasks-list {
		border-right: 0 !important;
		border-bottom: 1px solid var(--app-chrome-border) !important;
	}
}

@media (max-width: 520px) {
	.tasks-quick-add,
	.tasks-field-grid {
		grid-template-columns: 1fr !important;
	}
}

/* File Manager toolbar controls */
.os-window[data-app-id=files] .file-search-box,
.os-window[data-app-id=files] .file-location-bar .file-breadcrumbs {
	height: 2.05rem;
	min-height: 2.05rem;
}

/* Universal file picker */
.system-dialog.is-file-picker .system-dialog-panel {
	display: grid;
	grid-template-rows: auto minmax(0,1fr) auto;
	width: min(64rem,calc(100vw - 2rem));
	height: min(42rem,calc(100vh - 2rem));
	padding: 0;
	overflow: hidden;
}

.system-dialog.is-file-picker #systemDialogTitle {
	display: flex;
	align-items: center;
	min-height: 2.7rem;
	border-bottom: 1px solid var(--app-chrome-border);
	padding: 0 .9rem;
}

.system-dialog.is-file-picker #systemDialogMessage {
	min-height: 0;
	margin: 0;
	overflow: hidden;
}

.system-dialog.is-file-picker .system-dialog-actions {
	min-height: 3.25rem;
	margin: 0;
	border-top: 1px solid var(--app-chrome-border);
	padding: .65rem .85rem;
	background: var(--app-surface-solid);
}

.universal-file-picker {
	display: grid;
	grid-template-columns: 13rem minmax(0,1fr);
	height: 100%;
	min-height: 0;
	text-align: left;
}

.file-picker-sources {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
	border: 0;
	border-right: 1px solid var(--app-chrome-border);
	border-radius: 0;
	padding: .75rem .55rem;
	overflow: auto;
}

.file-picker-sources > strong {
	padding: .25rem .5rem .45rem;
	color: var(--muted);
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
}

.file-picker-source {
	display: grid;
	grid-template-columns: 1.55rem minmax(0,1fr) auto;
	align-items: center;
	gap: .55rem;
	min-height: 2.45rem;
	border: 0;
	border-radius: .45rem;
	padding: .35rem .5rem;
	background: transparent;
	color: var(--text);
	text-align: left;
}

.file-picker-source:hover,
.file-picker-source:focus-visible {
	background: color-mix(in srgb,var(--accent) 8%,transparent);
}

.file-picker-source.is-active {
	background: color-mix(in srgb,var(--accent) 16%,var(--app-surface-solid));
	box-shadow: inset .18rem 0 0 var(--accent);
}

.file-picker-source > span:not(.file-place-icon) {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-picker-source small {
	color: var(--muted);
	font-size: .64rem;
}

.file-picker-main {
	display: grid;
	grid-template-rows: auto auto minmax(0,1fr) auto auto;
	min-width: 0;
	min-height: 0;
	background: var(--app-surface-solid);
}

.file-picker-message {
	margin: 0;
	padding: .65rem .8rem;
	color: var(--muted);
	font-size: .78rem;
}

.file-picker-toolbar {
	display: flex;
	align-items: center;
	gap: .35rem;
	min-width: 0;
	border-block: 1px solid var(--app-chrome-border);
	padding: .35rem .5rem;
}

.file-picker-search {
	display: grid;
	grid-template-columns: 1.15rem minmax(6rem,10rem);
	align-items: center;
	gap: .25rem;
	min-height: 2rem;
	border: 1px solid var(--app-chrome-border);
	border-radius: .4rem;
	padding: 0 .45rem;
	background: color-mix(in srgb,var(--app-surface-solid) 84%,transparent);
}

.file-picker-search .system-ui-icon {
	width: 1rem;
	height: 1rem;
}

.file-picker-search input {
	min-width: 0;
	border: 0;
	outline: 0;
	padding: .4rem 0;
	background: transparent;
	color: var(--text);
}

.file-picker-breadcrumbs {
	display: flex;
	align-items: center;
	gap: .2rem;
	min-width: 0;
	overflow: auto hidden;
	white-space: nowrap;
}

.file-picker-breadcrumbs button {
	border: 0;
	border-radius: .35rem;
	padding: .28rem .42rem;
	background: transparent;
	color: var(--text);
}

.file-picker-breadcrumbs button:hover,
.file-picker-breadcrumbs button:focus-visible {
	background: color-mix(in srgb,var(--accent) 8%,transparent);
}

.file-picker-breadcrumbs > span {
	color: var(--muted);
}

.file-picker-content {
	display: grid;
	align-content: start;
	grid-template-columns: repeat(auto-fill,minmax(11rem,1fr));
	gap: .25rem;
	min-height: 0;
	padding: .5rem;
	overflow: auto;
}

.file-picker-entry {
	display: grid;
	grid-template-columns: 2.1rem minmax(0,1fr);
	align-items: center;
	gap: .55rem;
	min-height: 3.35rem;
	border: 1px solid transparent;
	border-radius: .45rem;
	padding: .45rem;
	background: transparent;
	color: var(--text);
	text-align: left;
}

.file-picker-entry:hover,
.file-picker-entry:focus-visible,
.file-picker-entry.is-selected {
	border-color: color-mix(in srgb,var(--accent) 32%,var(--app-chrome-border));
	background: color-mix(in srgb,var(--accent) 12%,transparent);
}

.file-picker-entry > span:last-child {
	display: grid;
	min-width: 0;
}

.file-picker-entry strong,
.file-picker-entry small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file-picker-entry small {
	color: var(--muted);
	font-size: .68rem;
}

.file-picker-entry-icon {
	position: relative;
	display: block;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: .32rem;
	background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 82%,white),var(--accent));
}

.file-picker-entry-icon.is-folder::before {
	content: "";
	position: absolute;
	left: .18rem;
	top: -.16rem;
	width: .78rem;
	height: .35rem;
	border-radius: .2rem .2rem 0 0;
	background: inherit;
}

.file-picker-entry-icon.is-file {
	clip-path: polygon(0 0,68% 0,100% 32%,100% 100%,0 100%);
}

.file-picker-state,
.file-picker-error {
	grid-column: 1/-1;
	align-self: center;
	justify-self: center;
	width: min(26rem,100%);
	padding: 1rem;
	color: var(--muted);
	text-align: center;
}

.file-picker-load-more {
	grid-column: 1/-1;
	justify-self: center;
	margin: .55rem;
	padding: .45rem .8rem;
}

.file-picker-error {
	display: grid;
	gap: .65rem;
	border: 1px solid color-mix(in srgb,#ef4444 38%,var(--app-chrome-border));
	border-radius: .55rem;
	background: color-mix(in srgb,#ef4444 8%,var(--app-surface-solid));
	color: var(--text);
	text-align: left;
}

.file-picker-error p {
	margin: 0;
	color: var(--muted);
}

.file-picker-error label,
.file-picker-name {
	display: grid;
	gap: .3rem;
}

.file-picker-new-folder {
	display: grid;
	grid-template-columns: minmax(0,1fr) auto auto;
	align-items: center;
	gap: .45rem;
	border-top: 1px solid var(--app-chrome-border);
	padding: .55rem .75rem;
	background: color-mix(in srgb,var(--accent) 6%,var(--app-surface-solid));
}

.file-picker-new-folder input,
.file-picker-new-folder button {
	min-height: 2.15rem;
}

.file-picker-error label span,
.file-picker-name > span {
	color: var(--muted);
	font-size: .7rem;
	font-weight: 700;
}

.file-picker-error button {
	justify-self: end;
	padding: .42rem .72rem;
}

.file-picker-name {
	grid-template-columns: auto minmax(0,1fr);
	align-items: center;
	gap: .65rem;
	border-top: 1px solid var(--app-chrome-border);
	padding: .55rem .75rem;
}

.file-picker-name input {
	min-width: 0;
	padding: .5rem .65rem;
}

.file-picker-collision {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	border-top: 1px solid color-mix(in srgb,var(--accent) 32%,var(--app-chrome-border));
	padding: .6rem .75rem;
	background: color-mix(in srgb,var(--accent) 9%,var(--app-surface-solid));
}

.file-picker-collision > span {
	display: grid;
	min-width: 0;
}

.file-picker-collision small {
	color: var(--muted);
}

.file-picker-collision > div {
	display: flex;
	gap: .4rem;
	flex: 0 0 auto;
}

.file-picker-collision button {
	padding: .38rem .65rem;
}

@media (max-width: 640px) {
	.system-dialog.is-file-picker {
		padding: var(--safe-area-top) var(--safe-area-right) var(--safe-area-bottom) var(--safe-area-left);
	}

	.system-dialog.is-file-picker .system-dialog-panel {
		width: 100%;
		height: 100%;
		border-radius: 0;
	}

	.universal-file-picker {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0,1fr);
	}

	.file-picker-sources {
		flex-direction: row;
		border-right: 0;
		border-bottom: 1px solid var(--app-chrome-border);
		padding: .4rem;
		overflow: auto hidden;
	}

	.file-picker-sources > strong {
		display: none;
	}

	.file-picker-source {
		grid-template-columns: 1.4rem auto;
		min-width: max-content;
		min-height: 2.3rem;
	}

	.file-picker-source small {
		display: none;
	}

	.file-picker-content {
		grid-template-columns: 1fr;
	}

	.file-picker-search {
		grid-template-columns: 1.15rem minmax(4.5rem,1fr);
		max-width: 9rem;
	}

	.file-picker-new-folder {
		grid-template-columns: 1fr 1fr;
	}

	.file-picker-new-folder input {
		grid-column: 1/-1;
	}

	.file-picker-collision {
		align-items: stretch;
		flex-direction: column;
	}

	.file-picker-collision > div {
		justify-content: flex-end;
	}
}

/* Elementary cursor theme integration */
@media (hover: hover) and (pointer: fine) {
	:root {
		--cursor-elementary-default: url("../cursors/elementary/32x32/left_ptr.png") 10 5, default;
		--cursor-elementary-pointer: url("../cursors/elementary/32x32/hand2.png") 9 7, pointer;
		--cursor-elementary-text: url("../cursors/elementary/32x32/xterm.png") 15 15, text;
		--cursor-elementary-help: url("../cursors/elementary/32x32/question_arrow.png") 16 30, help;
		--cursor-elementary-wait: url("../cursors/elementary/32x32/watch_0001.png") 18 18, wait;
		--cursor-elementary-progress: url("../cursors/elementary/32x32/left_ptr_watch_0001.png") 8 5, progress;
		--cursor-elementary-not-allowed: url("../cursors/elementary/32x32/crossed_circle.png") 15 15, not-allowed;
		--cursor-elementary-crosshair: url("../cursors/elementary/32x32/cross.png") 15 15, crosshair;
		--cursor-elementary-move: url("../cursors/elementary/32x32/move.png") 6 8, move;
		--cursor-elementary-grab: url("../cursors/elementary/32x32/hand1.png") 16 16, grab;
		--cursor-elementary-grabbing: url("../cursors/elementary/32x32/grabbing.png") 16 16, grabbing;
		--cursor-elementary-copy: url("../cursors/elementary/32x32/copy.png") 6 8, copy;
		--cursor-elementary-link: url("../cursors/elementary/32x32/link.png") 6 8, alias;
		--cursor-elementary-zoom-in: url("../cursors/elementary/32x32/plus.png") 15 15, zoom-in;
		--cursor-elementary-cell: url("../cursors/elementary/32x32/dotbox.png") 15 15, cell;
		--cursor-elementary-n: url("../cursors/elementary/32x32/top_side.png") 16 8, n-resize;
		--cursor-elementary-e: url("../cursors/elementary/32x32/right_side.png") 24 16, e-resize;
		--cursor-elementary-s: url("../cursors/elementary/32x32/bottom_side.png") 16 24, s-resize;
		--cursor-elementary-w: url("../cursors/elementary/32x32/left_side.png") 8 16, w-resize;
		--cursor-elementary-nwse: url("../cursors/elementary/32x32/bottom_right_corner.png") 24 24, nwse-resize;
		--cursor-elementary-nesw: url("../cursors/elementary/32x32/bottom_left_corner.png") 8 24, nesw-resize;
	}

	:root[data-cursor-size="small"] {
		--cursor-elementary-default: url("../cursors/elementary/24x24/left_ptr.png") 7 4, default;
		--cursor-elementary-pointer: url("../cursors/elementary/24x24/hand2.png") 7 5, pointer;
		--cursor-elementary-text: url("../cursors/elementary/24x24/xterm.png") 11 11, text;
		--cursor-elementary-help: url("../cursors/elementary/24x24/question_arrow.png") 12 21, help;
		--cursor-elementary-wait: url("../cursors/elementary/24x24/watch_0001.png") 12 12, wait;
		--cursor-elementary-progress: url("../cursors/elementary/24x24/left_ptr_watch_0001.png") 6 4, progress;
		--cursor-elementary-not-allowed: url("../cursors/elementary/24x24/crossed_circle.png") 11 11, not-allowed;
		--cursor-elementary-crosshair: url("../cursors/elementary/24x24/cross.png") 11 11, crosshair;
		--cursor-elementary-move: url("../cursors/elementary/24x24/move.png") 4 5, move;
		--cursor-elementary-grab: url("../cursors/elementary/24x24/hand1.png") 12 12, grab;
		--cursor-elementary-grabbing: url("../cursors/elementary/24x24/grabbing.png") 12 12, grabbing;
		--cursor-elementary-copy: url("../cursors/elementary/24x24/copy.png") 4 5, copy;
		--cursor-elementary-link: url("../cursors/elementary/24x24/link.png") 4 5, alias;
		--cursor-elementary-zoom-in: url("../cursors/elementary/24x24/plus.png") 11 11, zoom-in;
		--cursor-elementary-cell: url("../cursors/elementary/24x24/dotbox.png") 11 11, cell;
		--cursor-elementary-n: url("../cursors/elementary/24x24/top_side.png") 12 6, n-resize;
		--cursor-elementary-e: url("../cursors/elementary/24x24/right_side.png") 18 12, e-resize;
		--cursor-elementary-s: url("../cursors/elementary/24x24/bottom_side.png") 12 18, s-resize;
		--cursor-elementary-w: url("../cursors/elementary/24x24/left_side.png") 6 12, w-resize;
		--cursor-elementary-nwse: url("../cursors/elementary/24x24/bottom_right_corner.png") 18 18, nwse-resize;
		--cursor-elementary-nesw: url("../cursors/elementary/24x24/bottom_left_corner.png") 6 18, nesw-resize;
	}

	:root[data-cursor-size="large"] {
		--cursor-elementary-default: url("../cursors/elementary/48x48/left_ptr.png") 14 8, default;
		--cursor-elementary-pointer: url("../cursors/elementary/48x48/hand2.png") 14 10, pointer;
		--cursor-elementary-text: url("../cursors/elementary/48x48/xterm.png") 22 22, text;
		--cursor-elementary-help: url("../cursors/elementary/48x48/question_arrow.png") 24 42, help;
		--cursor-elementary-wait: url("../cursors/elementary/48x48/watch_0001.png") 24 24, wait;
		--cursor-elementary-progress: url("../cursors/elementary/48x48/left_ptr_watch_0001.png") 12 8, progress;
		--cursor-elementary-not-allowed: url("../cursors/elementary/48x48/crossed_circle.png") 22 22, not-allowed;
		--cursor-elementary-crosshair: url("../cursors/elementary/48x48/cross.png") 22 22, crosshair;
		--cursor-elementary-move: url("../cursors/elementary/48x48/move.png") 8 10, move;
		--cursor-elementary-grab: url("../cursors/elementary/48x48/hand1.png") 24 24, grab;
		--cursor-elementary-grabbing: url("../cursors/elementary/48x48/grabbing.png") 24 24, grabbing;
		--cursor-elementary-copy: url("../cursors/elementary/48x48/copy.png") 8 10, copy;
		--cursor-elementary-link: url("../cursors/elementary/48x48/link.png") 8 10, alias;
		--cursor-elementary-zoom-in: url("../cursors/elementary/48x48/plus.png") 22 22, zoom-in;
		--cursor-elementary-cell: url("../cursors/elementary/48x48/dotbox.png") 22 22, cell;
		--cursor-elementary-n: url("../cursors/elementary/48x48/top_side.png") 24 12, n-resize;
		--cursor-elementary-e: url("../cursors/elementary/48x48/right_side.png") 36 24, e-resize;
		--cursor-elementary-s: url("../cursors/elementary/48x48/bottom_side.png") 24 36, s-resize;
		--cursor-elementary-w: url("../cursors/elementary/48x48/left_side.png") 12 24, w-resize;
		--cursor-elementary-nwse: url("../cursors/elementary/48x48/bottom_right_corner.png") 36 36, nwse-resize;
		--cursor-elementary-nesw: url("../cursors/elementary/48x48/bottom_left_corner.png") 12 36, nesw-resize;
	}

	html,
	body,
	#app,
	.desktop-wallpaper,
	.os-window,
	.context-menu,
	.notification-center,
	.system-dialog {
		cursor: var(--cursor-elementary-default);
	}

	button,
	a,
	summary,
	label,
	[role="button"],
	.menu-button,
	.menu-app-name,
	.context-menu-item,
	.system-select,
	.notification-source-trigger,
	.desktop-icon,
	.desktop-folder-dialog-item,
	.launcher-item,
	.taskbar-button,
	.taskbar-group,
	.window-control,
	.window-tab,
	.browser-tab,
	.file-row,
	.file-icon-tile,
	.file-breadcrumb,
	.file-icon-button,
	.control-button,
	.primary-button,
	.preview-close,
	.notification-button,
	.sync-status-button,
	.system-key {
		cursor: var(--cursor-elementary-pointer) !important;
	}

	input,
	textarea,
	[contenteditable="true"],
	.code-area,
	.terminal-input,
	.file-search-box input,
	.browser-address {
		cursor: var(--cursor-elementary-text) !important;
	}

	button:disabled,
	input:disabled,
	textarea:disabled,
	select:disabled,
	[aria-disabled="true"],
	.is-disabled {
		cursor: var(--cursor-elementary-not-allowed) !important;
	}

	[aria-busy="true"],
	.is-loading,
	.loading,
	.loading-app {
		cursor: var(--cursor-elementary-progress) !important;
	}

	body.is-busy,
	body.is-syncing,
	.os-window.is-loading {
		cursor: var(--cursor-elementary-wait) !important;
	}

	.window-handle,
	.taskbar-group[draggable="true"],
	.launcher-item[draggable="true"],
	.desktop-icon[draggable="true"],
	.file-row[draggable="true"],
	.file-icon-tile[draggable="true"] {
		cursor: var(--cursor-elementary-grab) !important;
	}

	.window-handle:active,
	.taskbar-group.is-dragging,
	.launcher-item.is-dragging,
	.desktop-icon.is-dragging,
	.file-row.is-dragging,
	.file-icon-tile.is-dragging,
	.os-window.is-dragging,
	.os-window.is-resizing {
		cursor: var(--cursor-elementary-grabbing) !important;
	}

	[data-drop-effect="copy"],
	.is-copy-target {
		cursor: var(--cursor-elementary-copy) !important;
	}

	[data-drop-effect="link"],
	.is-link-target {
		cursor: var(--cursor-elementary-link) !important;
	}

	.crosshair,
	[data-tool="crosshair"] {
		cursor: var(--cursor-elementary-crosshair) !important;
	}

	.help,
	[aria-describedby],
	[data-help] {
		cursor: var(--cursor-elementary-help);
	}

	[data-tool="move"],
	.is-move-target {
		cursor: var(--cursor-elementary-move) !important;
	}

	[data-tool="zoom-in"],
	.image-viewer-stage {
		cursor: var(--cursor-elementary-zoom-in);
	}

	.resize-handle-n {
		cursor: var(--cursor-elementary-n) !important;
	}

	.resize-handle-e {
		cursor: var(--cursor-elementary-e) !important;
	}

	.resize-handle-s {
		cursor: var(--cursor-elementary-s) !important;
	}

	.resize-handle-w {
		cursor: var(--cursor-elementary-w) !important;
	}

	.resize-handle-ne,
	.resize-handle-sw {
		cursor: var(--cursor-elementary-nesw) !important;
	}

	.resize-handle-nw,
	.resize-handle-se {
		cursor: var(--cursor-elementary-nwse) !important;
	}
}
.app-failure-boundary {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 100%;
	padding: 1.5rem;
	text-align: center;
}

.app-failure-boundary > span {
	max-width: 34rem;
}

.app-failure-boundary > small {
	max-width: 34rem;
	opacity: 0.72;
	overflow-wrap: anywhere;
}

.app-failure-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
}

/* Adaptive notification popover and mobile shade */
.notification-center {
	right: 0.75rem;
	top: 0.65rem;
	width: min(28rem, calc(100vw - 1.5rem));
	max-height: min(38rem, calc(100dvh - 1.5rem));
	overflow: visible !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	animation: none !important;
}

.notification-surface {
	display: grid;
	grid-template-rows: auto auto minmax(0, 1fr);
	width: 100%;
	max-height: min(38rem, calc(100dvh - 1.5rem));
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 0.75rem;
	background: rgba(242, 247, 252, 0.86);
	box-shadow: 0 1.25rem 3.5rem rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.58);
	backdrop-filter: blur(26px) saturate(155%);
	-webkit-backdrop-filter: blur(26px) saturate(155%);
	transform-origin: top right;
	animation: notification-popover-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.notification-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 4.25rem;
	border-bottom: 1px solid rgba(100, 116, 139, 0.18);
	padding: 0.75rem;
}

.notification-heading,
.notification-title-row,
.notification-header-actions {
	display: flex;
	align-items: center;
	min-width: 0;
}

.notification-heading {
	gap: 0.65rem;
}

.notification-heading-icon {
	display: grid;
	flex: 0 0 2.25rem;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.6rem;
	background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.72));
	color: color-mix(in srgb, var(--accent) 74%, #172033);
}

.notification-heading-icon svg,
.notification-empty svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.notification-heading > div {
	min-width: 0;
}

.notification-title-row {
	gap: 0.45rem;
}

.notification-title-row strong {
	font-size: 1rem;
	font-weight: 700;
}

.notification-heading small {
	display: block;
	margin-top: 0.05rem;
	color: #64748b;
	font-size: 0.7rem;
}

.notification-count {
	display: grid;
	place-items: center;
	min-width: 1.3rem;
	height: 1.3rem;
	border-radius: 999px;
	background: var(--accent);
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
}

.notification-header-actions {
	flex: 0 0 auto;
	gap: 0.35rem;
}

.notification-clear,
.notification-panel-close,
.notification-dismiss {
	display: grid;
	place-items: center;
	border: 0;
	background: transparent;
	color: #475569;
}

.notification-clear {
	min-height: 2rem;
	border-radius: 0.5rem;
	padding: 0.35rem 0.55rem;
	font-size: 0.76rem;
	font-weight: 600;
}

.notification-panel-close,
.notification-dismiss {
	width: 2rem;
	height: 2rem;
	border-radius: 0.5rem;
}

.notification-panel-close svg,
.notification-dismiss svg {
	width: 0.85rem;
	height: 0.85rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
}

.notification-clear:hover,
.notification-panel-close:hover,
.notification-dismiss:hover {
	background: rgba(255, 255, 255, 0.66);
	color: #172033;
}

.notification-clear:disabled {
	opacity: 0.42;
	pointer-events: none;
}

.notification-controls {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(7.5rem, 10.5rem);
	align-items: center;
	gap: 0.55rem;
	border-bottom: 1px solid rgba(100, 116, 139, 0.16);
	padding: 0.55rem 0.75rem;
}

.notification-filters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.15rem;
	min-width: 0;
	border: 0;
	border-radius: 0.55rem;
	background: rgba(100, 116, 139, 0.1);
	padding: 0.18rem;
}

.notification-filter-button {
	min-width: 0;
	min-height: 1.85rem;
	overflow: hidden;
	border-radius: 0.42rem;
	background: transparent;
	color: #64748b;
	padding: 0.3rem 0.45rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.notification-filter-button:hover {
	color: #172033;
}

.notification-filter-button.is-active {
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
	color: #172033;
}

.notification-source-menu {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	z-index: 4;
}

.notification-source-trigger {
	width: 100%;
	min-width: 0;
	height: 2.2rem;
	border-color: rgba(100, 116, 139, 0.2);
	background: rgba(255, 255, 255, 0.55);
}

.notification-source-trigger > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.notification-source-options {
	position: absolute !important;
	top: calc(100% + 0.35rem) !important;
	right: 0 !important;
	width: min(14rem, calc(100vw - 2rem)) !important;
	min-width: 100% !important;
	max-width: none !important;
	max-height: min(15rem, 36dvh) !important;
	margin: 0 !important;
	border-color: rgba(100, 116, 139, 0.22);
	background: rgba(247, 250, 252, 0.96);
	box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.2);
}

.notification-source-option {
	min-height: 2.1rem;
}

.notification-list {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	min-height: 0;
	max-height: none;
	overflow: auto;
	padding: 0.65rem;
	overscroll-behavior: contain;
}

.notification-card {
	position: relative;
	display: grid;
	grid-template-columns: 2.3rem minmax(0, 1fr) 2rem;
	column-gap: 0.65rem;
	row-gap: 0.5rem;
	align-items: start;
	min-height: 4.5rem;
	border: 1px solid rgba(100, 116, 139, 0.18);
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.58);
	padding: 0.7rem;
	transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.notification-card:hover {
	border-color: color-mix(in srgb, var(--accent) 30%, rgba(100, 116, 139, 0.18));
	background: rgba(255, 255, 255, 0.74);
}

.notification-card-icon {
	display: grid;
	place-items: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 0.55rem;
	background: color-mix(in srgb, var(--accent) 16%, rgba(255, 255, 255, 0.76));
	color: color-mix(in srgb, var(--accent) 72%, #172033);
	font-size: 0.82rem;
	font-weight: 700;
}

.notification-card-content {
	min-width: 0;
}

.notification-card-content header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.65rem;
}

.notification-card-content strong {
	min-width: 0;
	overflow: hidden;
	color: #172033;
	font-size: 0.86rem;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.notification-card-content time {
	flex: 0 0 auto;
	color: #64748b;
	font-size: 0.66rem;
}

.notification-card-content small {
	display: block;
	margin-top: 0.08rem;
	color: #64748b;
	font-size: 0.66rem;
	font-weight: 600;
}

.notification-card-content p {
	margin: 0.3rem 0 0;
	color: #475569;
	font-size: 0.77rem;
	line-height: 1.38;
	overflow-wrap: anywhere;
}

.notification-dismiss {
	position: static;
	grid-column: 3;
	grid-row: 1;
	width: 2rem;
	height: 2rem;
	margin: -0.18rem -0.18rem 0 0;
}

.notification-actions {
	display: flex;
	grid-column: 2 / -1;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.notification-card.is-dismissed {
	opacity: 0.64;
}

.notification-empty {
	display: grid;
	place-items: center;
	gap: 0.55rem;
	min-height: 11rem;
	color: #64748b;
	text-align: center;
}

.notification-empty > span {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 0.7rem;
	background: rgba(100, 116, 139, 0.1);
}

.notification-empty strong {
	font-size: 0.82rem;
	font-weight: 600;
}

body.is-dark .notification-surface {
	border-color: rgba(148, 163, 184, 0.24);
	background: rgba(15, 23, 42, 0.9);
	box-shadow: 0 1.25rem 3.5rem rgba(2, 6, 23, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.is-dark .notification-header,
body.is-dark .notification-controls {
	border-color: rgba(148, 163, 184, 0.18);
}

body.is-dark .notification-heading small,
body.is-dark .notification-card-content time,
body.is-dark .notification-card-content small,
body.is-dark .notification-card-content p,
body.is-dark .notification-empty {
	color: #94a3b8;
}

body.is-dark .notification-heading-icon,
body.is-dark .notification-card-icon {
	background: color-mix(in srgb, var(--accent) 22%, rgba(30, 41, 59, 0.82));
	color: #e5edf8;
}

body.is-dark .notification-clear,
body.is-dark .notification-panel-close,
body.is-dark .notification-dismiss,
body.is-dark .notification-filter-button {
	color: #cbd5e1;
}

body.is-dark .notification-clear:hover,
body.is-dark .notification-panel-close:hover,
body.is-dark .notification-dismiss:hover,
body.is-dark .notification-filter-button.is-active {
	background: rgba(51, 65, 85, 0.78);
	color: #f8fafc;
}

body.is-dark .notification-filters {
	background: rgba(2, 6, 23, 0.32);
}

body.is-dark .notification-source-trigger,
body.is-dark .notification-card {
	border-color: rgba(148, 163, 184, 0.2);
	background: rgba(30, 41, 59, 0.64);
	color: #e5edf8;
}

body.is-dark .notification-card:hover {
	border-color: color-mix(in srgb, var(--accent) 38%, rgba(148, 163, 184, 0.2));
	background: rgba(30, 41, 59, 0.82);
}

body.is-dark .notification-card-content strong {
	color: #f8fafc;
}

body.is-dark .notification-source-options {
	border-color: rgba(148, 163, 184, 0.24);
	background: rgba(15, 23, 42, 0.98);
}

body.is-high-contrast .notification-surface {
	border-color: rgba(0, 0, 0, 0.72);
	background: #fff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

body.is-high-contrast.is-dark .notification-surface {
	border-color: rgba(255, 255, 255, 0.78);
	background: #020617;
}

@keyframes notification-popover-in {
	from {
		opacity: 0;
		transform: translateY(-0.4rem) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (max-width: 760px) {
	.notification-center,
	body.is-mobile-shell .notification-center,
	body.is-pwa-display .notification-center {
		position: fixed;
		inset: 0;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 14000;
		display: flex;
		align-items: flex-start;
		width: 100vw;
		max-width: none;
		height: var(--cloudesk-viewport-height);
		max-height: none;
		padding: 0;
		overflow: hidden !important;
		background: rgba(7, 15, 28, 0.22) !important;
		backdrop-filter: blur(12px) saturate(120%) !important;
		-webkit-backdrop-filter: blur(12px) saturate(120%) !important;
	}

	body.is-mobile-shell .notification-center.hidden,
	body.is-pwa-display .notification-center.hidden {
		display: none;
	}

	body.is-mobile-shell .notification-surface,
	body.is-pwa-display .notification-surface {
		width: 100%;
		max-height: min(82dvh, calc(var(--cloudesk-viewport-height) - 3.5rem));
		border-width: 0 0 1px;
		border-radius: 0 0 0.9rem 0.9rem;
		padding-top: var(--safe-area-top);
		transform-origin: top center;
		animation-name: notification-shade-in;
	}

	.notification-header {
		min-height: 4rem;
		padding: 0.65rem max(0.75rem, var(--safe-area-right)) 0.65rem max(0.75rem, var(--safe-area-left));
	}

	.notification-heading-icon {
		flex-basis: 2.5rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	.notification-panel-close,
	.notification-dismiss {
		width: 2.5rem;
		height: 2.5rem;
	}

	.notification-clear {
		min-height: 2.5rem;
	}

	.notification-controls {
		grid-template-columns: 1fr;
		gap: 0.5rem;
		padding: 0.6rem max(0.75rem, var(--safe-area-right)) 0.65rem max(0.75rem, var(--safe-area-left));
	}

	.notification-filter-button {
		min-height: 2.35rem;
		font-size: 0.78rem;
	}

	.notification-source-trigger,
	.notification-source-option {
		min-height: 2.6rem;
		font-size: 0.82rem;
	}

	.notification-source-options {
		right: 0 !important;
		width: 100% !important;
	}

	.notification-list {
		gap: 0.55rem;
		padding: 0.65rem max(0.75rem, var(--safe-area-right)) calc(0.8rem + var(--safe-area-bottom)) max(0.75rem, var(--safe-area-left));
	}

	.notification-card {
		grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
		min-height: 5rem;
		padding: 0.75rem;
	}

	.notification-card-icon {
		width: 2.5rem;
		height: 2.5rem;
	}
}

@keyframes notification-shade-in {
	from {
		opacity: 0;
		transform: translateY(-1.25rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Adaptive app launcher */
.launcher-panel {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	width: min(35rem, calc(100vw - 1.5rem));
	max-height: min(43rem, calc(100dvh - 4.5rem));
	border: 1px solid rgba(255, 255, 255, 0.58);
	border-radius: 1rem;
	background: rgba(247, 250, 255, 0.82);
	box-shadow: 0 1.25rem 4rem rgba(15, 23, 42, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72);
	overflow: hidden;
	backdrop-filter: blur(28px) saturate(155%);
	-webkit-backdrop-filter: blur(28px) saturate(155%);
	animation: launcher-pop-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.launcher-panel.hidden {
	display: none;
}

.launcher-head {
	display: grid;
	gap: 0.75rem;
	min-width: 0;
	border-bottom: 1px solid rgba(148, 163, 184, 0.2);
	background: rgba(255, 255, 255, 0.2);
	padding: 0.9rem 1rem 0.72rem;
}

.launcher-title-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.65rem;
}

.launcher-user-preview {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	min-width: 0;
	min-height: 2.85rem;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

.launcher-user-avatar {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.7rem;
	background: linear-gradient(135deg, var(--accent), var(--accent-2));
	color: #fff;
	font-size: 0.88rem;
	font-weight: 800;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0.35rem 0.9rem color-mix(in srgb, var(--accent) 20%, transparent);
}

.launcher-user-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.launcher-user-copy {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.launcher-user-copy strong,
.launcher-user-copy small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.launcher-user-copy strong {
	color: var(--text);
	font-size: 0.9rem;
	font-weight: var(--ui-font-weight-strong);
	line-height: 1.2;
}

.launcher-user-copy small {
	color: #64748b;
	font-size: 0.72rem;
	line-height: 1.2;
}

.launcher-header-actions {
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

.launcher-icon-button {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	border: 0;
	border-radius: 0.65rem;
	background: transparent;
	color: var(--text);
	padding: 0;
}

.launcher-icon-button:hover,
.launcher-icon-button:focus-visible {
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	outline: none;
}

.launcher-search {
	position: relative;
	display: block;
}

.launcher-search .field-control {
	width: 100%;
	min-height: 2.55rem;
	border: 1px solid rgba(148, 163, 184, 0.28);
	border-radius: 0.7rem;
	background: rgba(255, 255, 255, 0.58);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
	padding: 0.55rem 0.75rem 0.55rem 2.35rem;
	color: var(--text);
}

.launcher-search .field-control:focus {
	border-color: color-mix(in srgb, var(--accent) 70%, transparent);
	background: rgba(255, 255, 255, 0.76);
	box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--accent) 14%, transparent);
}

.launcher-view-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-width: 0;
}

.launcher-heading {
	color: var(--text);
	font-size: 0.84rem;
	font-weight: 700;
	line-height: 1;
}

.launcher-controls {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	border: 1px solid rgba(148, 163, 184, 0.22);
	border-radius: 0.62rem;
	background: rgba(255, 255, 255, 0.34);
	padding: 0.16rem;
}

.launcher-controls .control-button {
	min-height: 1.9rem;
	border: 0;
	border-radius: 0.45rem;
	background: transparent;
	box-shadow: none;
	padding: 0.32rem 0.62rem;
	color: #64748b;
	font-size: 0.73rem;
}

.launcher-controls .control-button.is-active {
	background: rgba(255, 255, 255, 0.86);
	color: var(--text);
	box-shadow: 0 0.12rem 0.35rem rgba(15, 23, 42, 0.12);
}

.launcher-grid {
	display: grid;
	align-content: start;
	gap: 1rem;
	min-height: 0;
	max-height: none;
	overflow: auto;
	padding: 0.75rem 0.9rem 0.95rem;
	overscroll-behavior: contain;
}

.launcher-section {
	display: grid;
	gap: 0.45rem;
	min-width: 0;
}

.launcher-section h3 {
	margin: 0;
	padding: 0 0.3rem;
	color: #64748b;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.25;
	text-transform: uppercase;
}

.launcher-app-grid,
.launcher-section.is-pinned .launcher-app-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0.22rem;
}

.launcher-panel .launcher-item,
.launcher-panel .launcher-item.is-pinned,
body:not(.is-dark):not(.is-high-contrast) .launcher-panel .launcher-item,
body:not(.is-dark):not(.is-high-contrast) .launcher-panel .launcher-item.is-pinned,
body.is-dark .launcher-panel .launcher-item,
body.is-dark .launcher-panel .launcher-item.is-pinned {
	position: relative;
	display: grid;
	grid-template-rows: 3rem minmax(2.1rem, auto);
	justify-items: center;
	align-content: start;
	gap: 0.42rem;
	min-width: 0;
	min-height: 5.8rem;
	border: 0 !important;
	border-radius: 0.7rem;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0.58rem 0.3rem;
	color: var(--text);
	text-align: center;
}

.launcher-panel .launcher-item:hover,
.launcher-panel .launcher-item:focus-visible,
body:not(.is-dark):not(.is-high-contrast) .launcher-panel .launcher-item:hover,
body:not(.is-dark):not(.is-high-contrast) .launcher-panel .launcher-item:focus-visible,
body.is-dark .launcher-panel .launcher-item:hover,
body.is-dark .launcher-panel .launcher-item:focus-visible {
	border-color: transparent !important;
	background: color-mix(in srgb, var(--accent) 11%, transparent) !important;
	box-shadow: none !important;
	outline: none;
}

.launcher-item.is-pinned::after {
	display: none;
}

.launcher-item > span:last-child {
	display: grid;
	align-content: start;
	gap: 0.08rem;
	width: 100%;
	min-width: 0;
}

.launcher-item strong,
.launcher-item small {
	display: block;
	overflow: hidden;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.launcher-item strong {
	color: var(--text);
	font-size: 0.76rem;
	font-weight: 650;
	line-height: 1.25;
}

.launcher-item small,
.launcher-item > span:last-child > span {
	color: #64748b;
	font-size: 0.63rem;
	line-height: 1.2;
}

.launcher-search-grid {
	grid-template-columns: 1fr;
	gap: 0.25rem;
}

.launcher-panel .launcher-search-item {
	grid-template-columns: 2.4rem minmax(0, 1fr);
	grid-template-rows: auto;
	align-items: center;
	justify-items: start;
	gap: 0.7rem;
	min-height: 3.65rem;
	padding: 0.5rem 0.65rem;
	text-align: left;
}

.launcher-search-item > span:last-child {
	text-align: left;
}

body.is-dark .launcher-panel {
	border-color: rgba(148, 163, 184, 0.24);
	background: rgba(12, 19, 32, 0.86);
	box-shadow: 0 1.25rem 4rem rgba(2, 6, 23, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.is-dark .launcher-head {
	border-bottom-color: rgba(148, 163, 184, 0.16);
	background: rgba(15, 23, 42, 0.2);
}

body.is-dark .launcher-user-copy small,
body.is-dark .launcher-section h3,
body.is-dark .launcher-item small,
body.is-dark .launcher-item > span:last-child > span {
	color: #9ba9bd;
}

body.is-dark .launcher-search .field-control {
	border-color: rgba(148, 163, 184, 0.24);
	background: rgba(30, 41, 59, 0.56);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.is-dark .launcher-search .field-control:focus {
	background: rgba(30, 41, 59, 0.82);
}

body.is-dark .launcher-controls {
	border-color: rgba(148, 163, 184, 0.18);
	background: rgba(15, 23, 42, 0.34);
}

body.is-dark .launcher-controls .control-button {
	color: #9ba9bd;
}

body.is-dark .launcher-controls .control-button.is-active {
	background: rgba(51, 65, 85, 0.82);
	color: #f8fafc;
	box-shadow: 0 0.12rem 0.35rem rgba(2, 6, 23, 0.3);
}

@media (max-width: 760px) {
	.launcher-panel,
	body.is-pwa-display .launcher-panel {
		position: fixed;
		inset: 0;
		z-index: 14000;
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		width: 100vw;
		max-width: none;
		height: var(--cloudesk-viewport-height);
		max-height: none;
		border: 0;
		border-radius: 0;
		background: rgba(242, 247, 255, 0.88);
		box-shadow: none;
		padding: 0;
		overflow: hidden;
		backdrop-filter: blur(34px) saturate(155%);
		-webkit-backdrop-filter: blur(34px) saturate(155%);
		animation: launcher-drawer-in 240ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
	}

	.launcher-panel.hidden,
	body.is-pwa-display .launcher-panel.hidden {
		display: none;
	}

	.launcher-head {
		gap: 0.78rem;
		border-bottom-color: rgba(148, 163, 184, 0.18);
		background: rgba(255, 255, 255, 0.2);
		padding:
			calc(0.72rem + var(--safe-area-top))
			max(0.9rem, var(--safe-area-right))
			0.72rem
			max(0.9rem, var(--safe-area-left));
	}

	.launcher-user-avatar {
		width: 2.65rem;
		height: 2.65rem;
		border-radius: 0.78rem;
	}

	.launcher-icon-button {
		width: 2.6rem;
		height: 2.6rem;
	}

	.launcher-search .field-control {
		min-height: 2.8rem;
		border-radius: 0.78rem;
		font-size: 0.88rem;
	}

	.launcher-view-bar {
		min-height: 2rem;
	}

	.launcher-heading {
		font-size: 0.9rem;
	}

	.launcher-controls .control-button {
		min-height: 2rem;
		padding-inline: 0.65rem;
		font-size: 0.72rem;
	}

	.launcher-grid,
	body.is-pwa-display .launcher-grid {
		align-content: start;
		gap: 1.15rem;
		min-height: 0;
		max-height: none;
		padding:
			0.85rem
			max(0.6rem, var(--safe-area-right))
			calc(4.7rem + var(--safe-area-bottom))
			max(0.6rem, var(--safe-area-left));
		overflow: auto;
		overscroll-behavior: contain;
	}

	.launcher-section {
		gap: 0.55rem;
	}

	.launcher-section h3 {
		padding-inline: 0.42rem;
		font-size: 0.7rem;
	}

	.launcher-app-grid,
	.launcher-section.is-pinned .launcher-app-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0.3rem 0.15rem;
	}

	.launcher-panel .launcher-item,
	.launcher-panel .launcher-item.is-pinned,
	body:not(.is-dark):not(.is-high-contrast) .launcher-panel .launcher-item,
	body:not(.is-dark):not(.is-high-contrast) .launcher-panel .launcher-item.is-pinned,
	body.is-dark .launcher-panel .launcher-item,
	body.is-dark .launcher-panel .launcher-item.is-pinned {
		grid-template-rows: 3rem minmax(2.45rem, auto);
		gap: 0.48rem;
		min-height: 6.25rem;
		border-radius: 0.8rem;
		padding: 0.55rem 0.25rem;
	}

	.launcher-item strong {
		display: -webkit-box;
		max-height: 2.35em;
		font-size: 0.76rem;
		line-height: 1.18;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.launcher-item small,
	.launcher-item > span:last-child > span {
		display: none;
	}

	.launcher-search-grid {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}

	.launcher-panel .launcher-search-item {
		grid-template-columns: 2.5rem minmax(0, 1fr);
		grid-template-rows: auto;
		min-height: 4rem;
		padding: 0.62rem 0.7rem;
	}

	.launcher-search-item > span:last-child > span {
		display: block;
	}

	body.is-dark .launcher-panel,
	body.is-dark.is-pwa-display .launcher-panel {
		background: rgba(10, 17, 29, 0.9);
	}

	.system-tooltip {
		display: none !important;
	}
}

body.is-reduced-motion .launcher-panel {
	animation: none;
}

@keyframes launcher-pop-in {
	from {
		opacity: 0;
		transform: translateY(0.65rem) scale(0.985);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes launcher-drawer-in {
	from {
		opacity: 0;
		transform: translateY(2.5rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Mobile launcher-style home screen */
@media (max-width: 760px) {
	.desktop-icons {
		overflow-x: auto !important;
		overflow-y: hidden !important;
		scroll-padding-inline: 0;
		scroll-snap-type: x mandatory !important;
		overscroll-behavior-x: contain;
		overscroll-behavior-y: none;
		touch-action: pan-x;
	}

	.desktop-page-snap {
		position: relative !important;
		flex: 0 0 auto;
		height: 1px;
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}

	.desktop-page-track {
		display: flex;
		height: 1px;
		pointer-events: none;
	}

	.desktop-icon,
	body.is-dark .desktop-icon {
		border: 0;
		border-radius: 0.85rem;
		background: transparent;
		box-shadow: none;
		padding: 0.42rem 0.2rem;
		touch-action: pan-x !important;
		transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
	}

	.desktop-icon:hover,
	.desktop-icon:focus-visible,
	body.is-dark .desktop-icon:hover,
	body.is-dark .desktop-icon:focus-visible {
		border: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.desktop-icon:active,
	.desktop-icon.is-selected {
		background: rgba(255, 255, 255, 0.18);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
		transform: scale(0.96);
	}

	body.is-dark .desktop-icon:active,
	body.is-dark .desktop-icon.is-selected {
		background: rgba(15, 23, 42, 0.24);
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
	}

	.desktop-icon.is-dragging,
	body.is-dark .desktop-icon.is-dragging {
		z-index: 12;
		background: rgba(255, 255, 255, 0.2);
		box-shadow: 0 0.9rem 2rem rgba(15, 23, 42, 0.24);
		opacity: 1;
		transform: scale(1.08);
	}

	.desktop-icon.is-folder-drop-target,
	body.is-dark .desktop-icon.is-folder-drop-target {
		border: 0;
		background: color-mix(in srgb, var(--accent) 24%, rgba(255, 255, 255, 0.22));
		box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 54%, rgba(255, 255, 255, 0.36));
		transform: scale(1.06);
	}

	.desktop-icon strong {
		display: -webkit-box;
		overflow: hidden;
		max-width: 100%;
		max-height: 2.4em;
		color: #fff;
		font-size: 0.72rem;
		font-weight: 600;
		line-height: 1.2;
		text-overflow: ellipsis;
		white-space: normal;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.desktop-icon small {
		display: none;
	}

	.mobile-home-page-dots {
		gap: 0.34rem;
		padding: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		filter: drop-shadow(0 0.1rem 0.18rem rgba(15, 23, 42, 0.72));
	}

	.mobile-home-page-dots span {
		width: 0.3rem;
		height: 0.3rem;
		background: rgba(255, 255, 255, 0.62);
		box-shadow: none;
	}

	.mobile-home-page-dots span.is-active {
		width: 0.72rem;
		background: #fff;
	}
}

/* Settings owns a stable glass-rail and solid-content layout after utility CSS. */
.os-window[data-app-id="settings"] .window-content {
	padding: 0;
	overflow: hidden;
	background: transparent;
}

.settings-app {
	display: grid;
	grid-template-columns: minmax(14.5rem, 16.5rem) minmax(0, 1fr);
	gap: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	overflow: hidden;
	background: var(--app-surface-solid, #fff);
}

.settings-nav {
	position: relative;
	top: auto;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	grid-auto-flow: row;
	grid-auto-columns: auto;
	align-self: stretch;
	gap: 0;
	width: auto;
	height: 100%;
	min-height: 0;
	max-height: none;
	overflow: hidden;
	border-right: 1px solid rgba(148, 163, 184, 0.24);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(248, 250, 252, 0.36));
	backdrop-filter: blur(28px) saturate(160%);
	-webkit-backdrop-filter: blur(28px) saturate(160%);
	padding: 1rem 0.7rem 0.75rem;
}

.settings-nav-top {
	position: relative;
	top: auto;
	z-index: 2;
	display: grid;
	gap: 0.75rem;
	min-width: 0;
	margin: 0;
	padding: 0 0 0.8rem;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.settings-user-preview,
body:not(.is-dark):not(.is-high-contrast) .settings-user-preview {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.7rem;
	width: 100%;
	min-width: 0;
	border: 0;
	border-radius: 0.5rem;
	background: transparent;
	box-shadow: none;
	padding: 0.45rem;
	color: inherit;
	text-align: left;
}

.settings-user-preview:hover,
.settings-user-preview:focus-visible {
	background: rgba(255, 255, 255, 0.48);
	outline: none;
}

.settings-search .field-control {
	height: 2.45rem;
	border: 1px solid rgba(148, 163, 184, 0.26);
	border-radius: 0.55rem;
	background: rgba(255, 255, 255, 0.56);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64);
	padding-left: 2.35rem;
}

.settings-nav-list {
	display: grid;
	grid-auto-flow: row;
	grid-auto-columns: auto;
	align-content: start;
	gap: 0.18rem;
	min-width: 0;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0.1rem 0.05rem 0.7rem 0;
	scrollbar-width: thin;
}

.settings-nav-item,
body:not(.is-dark):not(.is-high-contrast) .settings-nav-item {
	display: grid;
	grid-template-columns: 1.8rem minmax(0, 1fr);
	align-items: center;
	gap: 0.62rem;
	width: 100%;
	min-height: 2.7rem;
	border: 0;
	border-radius: 0.5rem;
	background: transparent;
	box-shadow: none;
	padding: 0.42rem 0.55rem;
	color: #334155;
	text-align: left;
}

.settings-nav-item:hover,
.settings-nav-item:focus-visible {
	background: rgba(255, 255, 255, 0.52);
	outline: none;
}

.settings-nav-item.is-active,
body:not(.is-dark):not(.is-high-contrast) .settings-nav-item.is-active {
	background: color-mix(in srgb, var(--accent) 14%, rgba(255, 255, 255, 0.66));
	box-shadow: inset 0.2rem 0 0 var(--accent);
	color: #172033;
}

.settings-nav-item .settings-section-icon {
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 0.45rem;
	background: transparent;
	box-shadow: none;
	color: color-mix(in srgb, var(--accent) 76%, #172033);
}

.settings-content {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	background: var(--app-surface-solid, #fff);
}

.settings-content-header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 0.8rem;
	min-height: 4.75rem;
	border-bottom: 1px solid rgba(148, 163, 184, 0.2);
	background: var(--app-surface-solid, #fff);
	padding: 0.85rem clamp(1rem, 3vw, 2rem);
}

.settings-content-heading {
	display: grid;
	gap: 0.08rem;
	min-width: 0;
}

.settings-content-heading strong,
.settings-content-heading small {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.settings-content-heading strong {
	color: #172033;
	font-size: 1.12rem;
	font-weight: var(--ui-font-weight-strong);
}

.settings-content-heading small {
	color: #64748b;
	font-size: 0.76rem;
}

.settings-mobile-back {
	display: none;
}

.settings-pane {
	min-width: 0;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: clamp(1rem, 3vw, 2rem);
	scrollbar-width: thin;
}

.settings-pane > .settings-title {
	display: none;
}

.settings-home-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
	max-width: 56rem;
	margin: 0 auto;
}

.settings-search-results {
	grid-template-columns: 1fr;
}

.settings-section-card,
body:not(.is-dark):not(.is-high-contrast) .settings-section-card {
	gap: 0.8rem;
	min-height: 4.75rem;
	border-color: rgba(148, 163, 184, 0.24);
	border-radius: 0.6rem;
	background: #fff;
	box-shadow: none;
	padding: 0.8rem;
}

.settings-pane > .settings-switch-row,
.settings-pane > .settings-select-row,
.settings-pane > .content-row {
	min-height: 4.4rem;
	max-width: 56rem;
	margin-right: auto;
	margin-bottom: 0.5rem;
	margin-left: auto;
	border-color: rgba(148, 163, 184, 0.24);
	border-radius: 0.6rem;
	background: #fff;
	box-shadow: none;
	padding: 0.85rem 1rem;
}

body.is-dark .settings-app,
body.is-dark .settings-content,
body.is-dark .settings-content-header {
	background: var(--app-surface-solid, #0f172a);
}

body.is-dark .settings-nav {
	border-color: rgba(148, 163, 184, 0.18);
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.66), rgba(2, 6, 23, 0.44));
}

body.is-dark .settings-user-preview {
	border: 0;
	background: transparent;
	box-shadow: none;
}

body.is-dark .settings-nav-item {
	border: 0;
	background: transparent;
	color: #cbd5e1;
}

body.is-dark .settings-nav-item.is-active {
	background: color-mix(in srgb, var(--accent) 18%, rgba(30, 41, 59, 0.72));
	box-shadow: inset 0.2rem 0 0 var(--accent);
	color: #f8fafc;
}

body.is-dark .settings-content-heading strong {
	color: #f8fafc;
}

body.is-dark .settings-content-heading small {
	color: #94a3b8;
}

@media (max-width: 760px) {
	.settings-app {
		position: relative;
		display: block;
		grid-template-columns: none;
		height: 100%;
		overflow: hidden;
	}

	.settings-nav,
	.settings-content {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	.settings-nav {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 0;
		max-height: none;
		overflow: hidden;
		border-right: 0;
		padding: calc(0.8rem + var(--safe-area-top, 0px)) 0.75rem calc(0.75rem + var(--safe-area-bottom, 0px));
	}

	.settings-app.is-detail .settings-nav,
	.settings-app.is-overview .settings-content {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateX(-1.5rem);
	}

	.settings-app.is-detail .settings-content {
		visibility: visible;
		opacity: 1;
		transform: translateX(0);
	}

	.settings-nav-top {
		position: relative;
		min-width: 0;
		padding: 0 0 0.75rem;
	}

	.settings-nav-list {
		display: grid;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		gap: 0.18rem;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.settings-nav-item {
		grid-template-columns: 2.15rem minmax(0, 1fr);
		min-height: 3.25rem;
		padding: 0.52rem 0.65rem;
		font-size: 0.95rem;
	}

	.settings-content-header {
		grid-template-columns: auto auto minmax(0, 1fr);
		min-height: 4.2rem;
		padding: calc(0.65rem + var(--safe-area-top, 0px)) 0.8rem 0.65rem;
	}

	.settings-mobile-back {
		display: grid;
		place-items: center;
		width: 2.5rem;
		height: 2.5rem;
		border: 0;
		border-radius: 0.55rem;
		background: transparent;
		color: inherit;
	}

	.settings-mobile-back > span {
		width: 0.65rem;
		height: 0.65rem;
		border-bottom: 2px solid currentColor;
		border-left: 2px solid currentColor;
		transform: translateX(0.12rem) rotate(45deg);
	}

	.settings-content-heading small {
		display: none;
	}

	.settings-pane {
		padding: 0.85rem 0.75rem calc(1rem + var(--safe-area-bottom, 0px));
	}

	.settings-home-grid {
		grid-template-columns: 1fr;
	}

	.settings-pane .wallpaper-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Frame controls must not create transient compositor layers over translucent
 * window chrome. Moving a hovered control, then opening a backdrop-filtered
 * tooltip, made Chromium recalculate the window and top-bar glass opacity.
 */
.window-controls,
.topbar-window-controls {
	isolation: isolate;
}

.frame-button {
	opacity: 1;
	transform: none;
	transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.frame-button:hover,
.frame-button:focus-visible,
.frame-button:active {
	opacity: 1;
	transform: none;
}

.system-tooltip {
	background: rgba(15, 23, 42, 0.96);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	opacity: 1;
}

body.is-dark .system-tooltip {
	background: rgba(2, 6, 23, 0.97);
}
.office-suite-editor {
	display: block;
	background: var(--window-solid-bg, #fff);
}

.collabora-editor-frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--window-solid-bg, #fff);
}

.office-open-button {
	margin-top: .8rem;
	padding: .48rem .8rem;
}