:root {
	--cde-bg:             #aeb2c3;
	--cde-bg-dark:        #848899;
	--cde-bg-darker:      #6b6f7e;
	--cde-bg-light:       #c8ccd8;
	--cde-bg-lighter:     #dde0ea;
	--cde-highlight:      #ffffff;
	--cde-highlight-mid:  #d6d9e4;
	--cde-shadow:         #5a5d6a;
	--cde-shadow-dark:    #3a3c46;
	--cde-accent:         #4a90a4;
	--cde-accent-dark:    #2e6a7e;
	--cde-accent-light:   #6ab4c8;
	--cde-titlebar-from:  #2e6a9e;
	--cde-titlebar-to:    #1a3f6e;
	--cde-titlebar-text:  #ffffff;
	--cde-text:           #000000;
	--cde-text-disabled:  #848899;
	--cde-text-selected:  #ffffff;
	--cde-text-label:     #000000;
	--cde-select-bg:      #000080;
	--cde-select-text:    #ffffff;
	--cde-input-bg:       #ffffff;
	--cde-input-border:   #5a5d6a;
	--cde-scroll-track:   #aeb2c3;
	--cde-scroll-thumb:   #848899;
	--cde-border-width:   2px;
	--cde-font:           'Lucida Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--cde-font-mono:      'Lucida Console', 'Courier New', Courier, monospace;
	--cde-font-size:      12px;
	--cde-line-height:    1.4;
	--cde-space-xs:       2px;
	--cde-space-sm:       4px;
	--cde-space-md:       8px;
	--cde-space-lg:       12px;
	--cde-space-xl:       16px;
	--cde-space-2xl:      24px;
	--cde-border-raised:
		inset 1px 1px 0 var(--cde-highlight),
		inset -1px -1px 0 var(--cde-shadow-dark),
		inset 2px 2px 0 var(--cde-highlight-mid),
		inset -2px -2px 0 var(--cde-shadow);
	--cde-border-sunken:
		inset 1px 1px 0 var(--cde-shadow-dark),
		inset -1px -1px 0 var(--cde-highlight),
		inset 2px 2px 0 var(--cde-shadow),
		inset -2px -2px 0 var(--cde-highlight-mid);
	--cde-border-groove:
		1px solid var(--cde-shadow),
		-1px -1px 0 var(--cde-highlight) inset;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	background-color: var(--cde-bg);
	font-family: var(--cde-font);
	font-size: var(--cde-font-size);
	line-height: var(--cde-line-height);
	color: var(--cde-text);
	-webkit-font-smoothing: none;
	font-smooth: never;
}

::selection {
	background: var(--cde-select-bg);
	color: var(--cde-select-text);
}

.cde-desktop {
	width: 100%;
	min-height: 100vh;
	background-color: #4a6e8a;
	background-image:
	repeating-linear-gradient(
		0deg,
		transparent,
		transparent 1px,
		rgba(0,0,0,0.04) 1px,
		rgba(0,0,0,0.04) 2px
	);
	position: relative;
	overflow: hidden;
}

.cde-window {
	display: flex;
	flex-direction: column;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised),
	4px 4px 12px rgba(0,0,0,0.5);
	min-width: 200px;
	position: relative;
}

.cde-window__titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(90deg, var(--cde-titlebar-from), var(--cde-titlebar-to));
	color: var(--cde-titlebar-text);
	padding: 3px 4px;
	gap: var(--cde-space-sm);
	cursor: default;
	user-select: none;
	flex-shrink: 0;
}

.cde-window__title {
	font-size: var(--cde-font-size);
	font-weight: bold;
	flex: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: 0.02em;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.cde-window__btn {
	width: 18px;
	height: 15px;
	background: var(--cde-bg);
	border: none;
	cursor: pointer;
	box-shadow: var(--cde-border-raised);
	flex-shrink: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 9px;
	color: var(--cde-text);
}

.cde-window__btn:active {
	box-shadow: var(--cde-border-sunken);
}

.cde-window__btn--minimize::before {
	content: '_';
	line-height: 1;
	margin-top: 4px;
}

.cde-window__btn--maximize::before {
	content: '□';
	font-size: 10px;
}

.cde-window__btn--close::before {
	content: '×';
	font-size: 13px;
	line-height: 1;
	font-weight: bold;
}

.cde-window__menubar {
	background: var(--cde-bg);
	box-shadow: 0 1px 0 var(--cde-shadow), 0 2px 0 var(--cde-highlight);
	padding: 2px 4px;
	display: flex;
	gap: 0;
	flex-shrink: 0;
}

.cde-window__body {
	flex: 1;
	padding: var(--cde-space-md);
	overflow: auto;
	background: var(--cde-bg);
}

.cde-window__statusbar {
	background: var(--cde-bg);
	box-shadow: 0 -1px 0 var(--cde-shadow), 0 -2px 0 var(--cde-highlight);
	padding: 3px var(--cde-space-md);
	font-size: 11px;
	display: flex;
	gap: var(--cde-space-lg);
	flex-shrink: 0;
}

.cde-window__statusbar-cell {
	box-shadow: var(--cde-border-sunken);
	padding: 1px var(--cde-space-md);
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cde-menubar {
	display: flex;
	background: var(--cde-bg);
	padding: 2px 4px;
}

.cde-menubar__item {
	padding: 2px var(--cde-space-md);
	cursor: default;
	white-space: nowrap;
	border: 2px solid transparent;
	position: relative;
	font-size: var(--cde-font-size);
}

.cde-menubar__item:hover,
.cde-menubar__item.is-open {
	background: var(--cde-select-bg);
	color: var(--cde-select-text);
}

/* Dropdown menu */
.cde-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 9999;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised),
	3px 3px 6px rgba(0,0,0,0.4);
	min-width: 180px;
	padding: 2px 0;
	display: none;
}

.cde-menubar__item.is-open .cde-menu {
	display: block;
}

.cde-menu__item {
	padding: 3px var(--cde-space-xl) 3px var(--cde-space-lg);
	cursor: default;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--cde-space-xl);
	white-space: nowrap;
	font-size: var(--cde-font-size);
}

.cde-menu__item:hover {
	background: var(--cde-select-bg);
	color: var(--cde-select-text);
}

.cde-menu__item.is-disabled {
	color: var(--cde-text-disabled);
	pointer-events: none;
}

.cde-menu__item.is-checked::before {
	content: '✓';
	margin-right: var(--cde-space-sm);
	font-size: 10px;
}

.cde-menu__item--shortcut {
	color: var(--cde-text-disabled);
	font-size: 11px;
}

.cde-menu__item:hover .cde-menu__item--shortcut {
	color: var(--cde-highlight-mid);
}

.cde-menu__separator {
	height: 0;
	border-top: 1px solid var(--cde-shadow);
	border-bottom: 1px solid var(--cde-highlight);
	margin: 3px 0;
}

.cde-menu__item--arrow::after {
	content: '▶';
	font-size: 9px;
}

.cde-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cde-space-sm);
	padding: 4px var(--cde-space-xl);
	background: var(--cde-bg);
	color: var(--cde-text);
	font-family: var(--cde-font);
	font-size: var(--cde-font-size);
	border: none;
	box-shadow: var(--cde-border-raised);
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	text-decoration: none;
	min-height: 24px;
	min-width: 60px;
	outline: none;
	position: relative;
}

.cde-btn:active,
.cde-btn.is-active {
	box-shadow: var(--cde-border-sunken);
	padding-top: 5px;
	padding-left: calc(var(--cde-space-xl) + 1px);
}

.cde-btn:focus-visible {
	outline: 1px dotted var(--cde-text);
	outline-offset: -4px;
}

.cde-btn:disabled,
.cde-btn.is-disabled {
	color: var(--cde-text-disabled);
	pointer-events: none;
	box-shadow: var(--cde-border-raised);
	opacity: 0.7;
}

.cde-btn--default {
	/* same as base */
}

.cde-btn--primary {
	background: var(--cde-accent);
	color: #ffffff;
	font-weight: bold;
}

.cde-btn--danger {
	background: #b04040;
	color: #ffffff;
	font-weight: bold;
}

.cde-btn--sm {
	padding: 2px var(--cde-space-md);
	min-height: 18px;
	min-width: 40px;
	font-size: 11px;
}

.cde-btn--lg {
	padding: 6px var(--cde-space-2xl);
	min-height: 32px;
	font-size: 13px;
}

.cde-btn--icon {
	padding: 3px;
	min-width: 22px;
	min-height: 22px;
}

.cde-toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px 4px;
	background: var(--cde-bg);
	box-shadow: 0 1px 0 var(--cde-shadow), 0 2px 0 var(--cde-highlight);
	flex-wrap: wrap;
}

.cde-toolbar__separator {
	width: 0;
	height: 20px;
	border-left: 1px solid var(--cde-shadow);
	border-right: 1px solid var(--cde-highlight);
	margin: 0 3px;
}

.cde-toolbar__btn {
	width: 24px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cde-bg);
	border: none;
	cursor: pointer;
	box-shadow: none;
	font-size: 12px;
	color: var(--cde-text);
	padding: 0;
	position: relative;
}

.cde-toolbar__btn:hover {
	box-shadow: var(--cde-border-raised);
}

.cde-toolbar__btn:active {
	box-shadow: var(--cde-border-sunken);
}

.cde-input {
	font-family: var(--cde-font);
	font-size: var(--cde-font-size);
	background: var(--cde-input-bg);
	color: var(--cde-text);
	border: none;
	box-shadow: var(--cde-border-sunken);
	padding: 3px var(--cde-space-sm);
	min-height: 22px;
	outline: none;
	width: 100%;
}

.cde-input:focus {
	outline: none;
	box-shadow: var(--cde-border-sunken);
	background: #ffffee;
}

.cde-input:disabled {
	background: var(--cde-bg);
	color: var(--cde-text-disabled);
}

.cde-input--sm {
	font-size: 11px;
	padding: 1px var(--cde-space-sm);
	min-height: 18px;
}

.cde-textarea {
	font-family: var(--cde-font-mono);
	font-size: var(--cde-font-size);
	background: var(--cde-input-bg);
	color: var(--cde-text);
	border: none;
	box-shadow: var(--cde-border-sunken);
	padding: var(--cde-space-sm);
	outline: none;
	resize: both;
	width: 100%;
	min-height: 80px;
	line-height: var(--cde-line-height);
}

.cde-textarea:focus {
	background: #ffffee;
}

.cde-label {
	display: block;
	font-size: var(--cde-font-size);
	color: var(--cde-text-label);
	margin-bottom: 2px;
	user-select: none;
}

.cde-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--cde-space-xs);
	margin-bottom: var(--cde-space-lg);
}

.cde-form-row {
	display: flex;
	align-items: center;
	gap: var(--cde-space-md);
}

.cde-form-row .cde-label {
	min-width: 100px;
	margin-bottom: 0;
	text-align: right;
}

.cde-checkbox {
	display: inline-flex;
	align-items: center;
	gap: var(--cde-space-sm);
	cursor: pointer;
	user-select: none;
	font-size: var(--cde-font-size);
}

.cde-checkbox input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	background: var(--cde-bg);
	box-shadow:
		inset 1px 1px 0 var(--cde-shadow-dark),
		inset -1px -1px 0 var(--cde-highlight),
		inset 2px 2px 0 var(--cde-shadow),
		inset -2px -2px 0 var(--cde-highlight-mid);
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	vertical-align: middle;
}

.cde-checkbox input[type="checkbox"]::before {
	content: '';
	position: absolute;
	inset: 3px;
	background: var(--cde-bg-light);
}

.cde-checkbox input[type="checkbox"]:checked::before {
	background: var(--cde-shadow-dark);
}

.cde-checkbox input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 3px;
	width: 8px;
	height: 5px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(-45deg) scaleY(0.8);
	transform-origin: 2px 4px;
}

.cde-checkbox input[type="checkbox"]:disabled {
	opacity: 0.6;
	cursor: default;
}

.cde-checkbox input[type="checkbox"]:disabled::before {
	background: var(--cde-bg-dark);
}

.cde-radio {
	display: inline-flex;
	align-items: center;
	gap: var(--cde-space-sm);
	cursor: pointer;
	user-select: none;
	font-size: var(--cde-font-size);
}

.cde-radio input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	background: var(--cde-bg);
	border-radius: 50%;
	box-shadow:
		inset 1px 1px 0 var(--cde-shadow-dark),
		inset -1px -1px 0 var(--cde-highlight),
		inset 2px 2px 0 var(--cde-shadow),
		inset -2px -2px 0 var(--cde-highlight-mid);
	position: relative;
	cursor: pointer;
	flex-shrink: 0;
	vertical-align: middle;
}

.cde-radio input[type="radio"]::before {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--cde-bg-light);
}

.cde-radio input[type="radio"]:checked::before {
	background: var(--cde-shadow-dark);
	inset: 3px;
}

.cde-radio input[type="radio"]:checked::after {
	content: '';
	position: absolute;
	top: 4px;
	left: 4px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: rgba(255,255,255,0.35);
}

.cde-radio input[type="radio"]:disabled {
	opacity: 0.6;
	cursor: default;
}

.cde-radio input[type="radio"]:disabled::before {
	background: var(--cde-bg-dark);
}

.cde-select {
	font-family: var(--cde-font);
	font-size: var(--cde-font-size);
	background: var(--cde-bg);
	color: var(--cde-text);
	border: none;
	box-shadow: var(--cde-border-raised);
	padding: 3px 24px 3px var(--cde-space-sm);
	min-height: 22px;
	outline: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23000' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 8px;
}

.cde-select:focus {
	outline: 1px dotted var(--cde-text);
}

.cde-listbox {
	background: var(--cde-input-bg);
	box-shadow: var(--cde-border-sunken);
	overflow-y: auto;
	font-size: var(--cde-font-size);
	font-family: var(--cde-font);
	padding: 2px 0;
	min-height: 80px;
}

.cde-listbox__item {
	padding: 2px var(--cde-space-md);
	cursor: default;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cde-listbox__item:hover {
	background: var(--cde-bg-light);
}

.cde-listbox__item.is-selected {
	background: var(--cde-select-bg);
	color: var(--cde-select-text);
}

::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

::-webkit-scrollbar-track {
	background: var(--cde-scroll-track);
	box-shadow: inset 1px 1px 0 var(--cde-shadow), inset -1px -1px 0 var(--cde-highlight);
}

::-webkit-scrollbar-thumb {
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
}

::-webkit-scrollbar-thumb:active {
	background: var(--cde-bg-dark);
	box-shadow: var(--cde-border-sunken);
}

::-webkit-scrollbar-button {
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
	display: block;
	height: 16px;
	width: 16px;
}

::-webkit-scrollbar-button:active {
	box-shadow: var(--cde-border-sunken);
}

::-webkit-scrollbar-button:vertical:increment {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23000' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

::-webkit-scrollbar-button:vertical:decrement {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23000' d='M0 5l4-5 4 5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

::-webkit-scrollbar-corner {
	background: var(--cde-bg);
}

.cde-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 22px;
	background: transparent;
	outline: none;
	cursor: pointer;
}

.cde-slider::-webkit-slider-runnable-track {
	height: 6px;
	background: var(--cde-input-bg);
	box-shadow: var(--cde-border-sunken);
}

.cde-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 16px;
	height: 20px;
	margin-top: -7px;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
	cursor: pointer;
}

.cde-slider::-moz-range-track {
	height: 6px;
	background: var(--cde-input-bg);
	box-shadow: var(--cde-border-sunken);
}

.cde-slider::-moz-range-thumb {
	width: 16px;
	height: 20px;
	border: none;
	border-radius: 0;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
	cursor: pointer;
}

.cde-progress {
	width: 100%;
	height: 20px;
	background: var(--cde-input-bg);
	box-shadow: var(--cde-border-sunken);
	position: relative;
	overflow: hidden;
}

.cde-progress__bar {
	height: 100%;
	background: var(--cde-accent);
	background-image: repeating-linear-gradient(
		90deg,
		var(--cde-accent) 0px,
		var(--cde-accent) 12px,
		var(--cde-accent-light) 12px,
		var(--cde-accent-light) 14px
	);
	transition: width 0.3s ease;
	position: relative;
}

.cde-progress__label {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--cde-text);
	font-weight: bold;
	mix-blend-mode: difference;
	filter: invert(1);
}

/* Indeterminate */
.cde-progress--indeterminate .cde-progress__bar {
		width: 40% !important;
		animation: cde-progress-slide 1.2s linear infinite;
}

@keyframes cde-progress-slide {
	from { transform: translateX(-100%); }
	to   { transform: translateX(350%); }
}

.cde-separator {
	border: none;
	border-top: 1px solid var(--cde-shadow);
	border-bottom: 1px solid var(--cde-highlight);
	margin: var(--cde-space-md) 0;
}

.cde-separator--vertical {
	border: none;
	border-left: 1px solid var(--cde-shadow);
	border-right: 1px solid var(--cde-highlight);
	align-self: stretch;
	margin: 0 var(--cde-space-md);
	width: 0;
	display: inline-block;
}

.cde-panel {
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
	padding: var(--cde-space-md);
}

.cde-panel--sunken {
	background: var(--cde-bg-dark);
	box-shadow: var(--cde-border-sunken);
	padding: var(--cde-space-md);
}

.cde-panel--groove {
	background: var(--cde-bg);
	border: 2px groove #888;
	padding: var(--cde-space-md);
}

.cde-groupbox {
	border: none;
	box-shadow: var(--cde-border-sunken);
	padding: var(--cde-space-xl) var(--cde-space-md) var(--cde-space-md);
	position: relative;
	margin-top: 10px;
	background: var(--cde-bg);
}

.cde-groupbox__legend {
	position: absolute;
	top: -8px;
	left: var(--cde-space-md);
	background: var(--cde-bg);
	padding: 0 var(--cde-space-sm);
	font-size: var(--cde-font-size);
	font-weight: bold;
	white-space: nowrap;
}

.cde-dialog {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	background: transparent;
	pointer-events: none;
}

.cde-dialog__overlay {
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: all;
}

.cde-dialog__window {
	position: relative;
	z-index: 1;
	pointer-events: all;
	display: flex;
	flex-direction: column;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised), 6px 6px 20px rgba(0,0,0,0.6);
	min-width: 280px;
	max-width: 90vw;
}

.cde-dialog__titlebar {
	display: flex;
	align-items: center;
	background: linear-gradient(90deg, var(--cde-titlebar-from), var(--cde-titlebar-to));
	color: var(--cde-titlebar-text);
	padding: 3px 4px;
	gap: var(--cde-space-sm);
	user-select: none;
	cursor: default;
}

.cde-dialog__title {
	flex: 1;
	font-size: var(--cde-font-size);
	font-weight: bold;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.cde-dialog__body {
	padding: var(--cde-space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--cde-space-md);
}

.cde-dialog__icon-row {
	display: flex;
	align-items: flex-start;
	gap: var(--cde-space-xl);
}

.cde-dialog__icon {
	font-size: 32px;
	flex-shrink: 0;
	line-height: 1;
}

.cde-dialog__message {
	font-size: var(--cde-font-size);
	line-height: 1.5;
}

.cde-dialog__footer {
	display: flex;
	justify-content: center;
	gap: var(--cde-space-md);
	padding: var(--cde-space-md) var(--cde-space-xl) var(--cde-space-xl);
	border-top: 1px solid var(--cde-shadow);
}

.cde-dialog__window--info    .cde-dialog__titlebar { background: linear-gradient(90deg, #2e6a9e, #1a3f6e); }
.cde-dialog__window--warning .cde-dialog__titlebar { background: linear-gradient(90deg, #8e6000, #5a3e00); }
.cde-dialog__window--error   .cde-dialog__titlebar { background: linear-gradient(90deg, #8e2020, #5a1010); }
.cde-dialog__window--success .cde-dialog__titlebar { background: linear-gradient(90deg, #206e20, #134513); }

.cde-tabs {
	display: flex;
	flex-direction: column;
}

.cde-tabs__list {
	display: flex;
	align-items: flex-end;
	padding: 0 0 0 var(--cde-space-sm);
	gap: 2px;
	border-bottom: 2px solid var(--cde-shadow);
}

.cde-tabs__tab {
	padding: 4px var(--cde-space-lg) 3px;
	background: var(--cde-bg-dark);
	border: none;
	cursor: pointer;
	font-family: var(--cde-font);
	font-size: var(--cde-font-size);
	color: var(--cde-text);
	box-shadow:
		inset 1px 1px 0 var(--cde-highlight),
		inset -1px 0 0 var(--cde-shadow);
	position: relative;
	bottom: 0;
	user-select: none;
}

.cde-tabs__tab:hover {
	background: var(--cde-bg);
}

.cde-tabs__tab.is-active {
	background: var(--cde-bg);
	box-shadow:
		inset 1px 1px 0 var(--cde-highlight),
		inset -1px 0 0 var(--cde-shadow),
		0 2px 0 var(--cde-bg);
	z-index: 1;
	font-weight: bold;
	padding-bottom: 5px;
}

.cde-tabs__panel {
	display: none;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
	padding: var(--cde-space-md);
}

.cde-tabs__panel.is-active {
	display: block;
}

.cde-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cde-font-size);
	font-family: var(--cde-font);
	background: var(--cde-input-bg);
	box-shadow: var(--cde-border-sunken);
}

.cde-table thead {
	background: var(--cde-bg);
}

.cde-table thead th {
	padding: 3px var(--cde-space-md);
	text-align: left;
	font-weight: bold;
	box-shadow: var(--cde-border-raised);
	position: relative;
	cursor: default;
	user-select: none;
	white-space: nowrap;
}

.cde-table thead th:active {
	box-shadow: var(--cde-border-sunken);
}

.cde-table tbody tr {
	cursor: default;
}

.cde-table tbody tr:hover {
	background: var(--cde-bg-light);
}

.cde-table tbody tr.is-selected {
	background: var(--cde-select-bg);
	color: var(--cde-select-text);
}

.cde-table td {
	padding: 2px var(--cde-space-md);
	border-bottom: 1px solid var(--cde-bg-light);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cde-table--striped tbody tr:nth-child(even) {
	background: var(--cde-bg-lighter);
}

.cde-table--striped tbody tr:nth-child(even).is-selected {
	background: var(--cde-select-bg);
}

[data-cde-tooltip] {
	position: relative;
}

[data-cde-tooltip]::after {
	content: attr(data-cde-tooltip);
	position: absolute;
	bottom: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	background: #ffffcc;
	color: #000;
	border: 1px solid var(--cde-shadow-dark);
	box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
	padding: 2px var(--cde-space-sm);
	font-size: 11px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	z-index: 99999;
	transition: opacity 0.1s;
}

[data-cde-tooltip]:hover::after {
	opacity: 1;
}

.cde-frontpanel {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9990;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised), 0 -2px 8px rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	padding: 4px var(--cde-space-sm);
	gap: 2px;
}

.cde-frontpanel__workspace {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.cde-frontpanel__ws-label {
	font-size: 10px;
	text-align: center;
	user-select: none;
}

.cde-frontpanel__ws-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
}

.cde-frontpanel__ws-btn {
	width: 24px;
	height: 16px;
	background: var(--cde-bg-dark);
	box-shadow: var(--cde-border-raised);
	border: none;
	cursor: pointer;
	font-size: 9px;
	font-family: var(--cde-font);
}

.cde-frontpanel__ws-btn.is-active {
	background: var(--cde-accent);
	box-shadow: var(--cde-border-sunken);
}

.cde-frontpanel__app {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 48px;
}

.cde-frontpanel__app-btn {
	width: 44px;
	height: 44px;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
}

.cde-frontpanel__app-btn:active {
	box-shadow: var(--cde-border-sunken);
}

.cde-frontpanel__app-label {
	font-size: 9px;
	text-align: center;
	user-select: none;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis;
}

.cde-filemanager {
	background: var(--cde-input-bg);
	box-shadow: var(--cde-border-sunken);
	padding: var(--cde-space-sm);
	display: flex;
	flex-wrap: wrap;
	gap: var(--cde-space-md);
	align-content: flex-start;
}

.cde-filemanager__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 64px;
	cursor: default;
	padding: 4px;
	user-select: none;
}

.cde-filemanager__item:hover {
	background: var(--cde-bg-light);
}

.cde-filemanager__item.is-selected {
	background: var(--cde-select-bg);
}

.cde-filemanager__item.is-selected .cde-filemanager__label {
	background: var(--cde-select-bg);
	color: var(--cde-select-text);
}

.cde-filemanager__icon {
	font-size: 32px;
	line-height: 1;
	text-align: center;
}

.cde-filemanager__label {
	font-size: 11px;
	text-align: center;
	word-break: break-all;
	padding: 1px 3px;
	line-height: 1.2;
}

.cde-terminal {
	background: #000000;
	color: #ffffff;
	font-family: var(--cde-font-mono);
	font-size: 13px;
	padding: var(--cde-space-sm);
	box-shadow: var(--cde-border-sunken);
	overflow: auto;
	line-height: 1.3;
}

.cde-terminal .cde-terminal__prompt {
	color: #00ff00;
}

.cde-terminal .cde-terminal__path {
	color: #00aaff;
}

.cde-terminal .cde-terminal__error {
	color: #ff4444;
}

.cde-terminal .cde-terminal__output {
	color: #cccccc;
}

.cde-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--cde-shadow);
	border-top-color: var(--cde-accent);
	border-radius: 50%;
	animation: cde-spin 0.8s linear infinite;
}

@keyframes cde-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.cde-badge {
	display: inline-block;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
	padding: 1px var(--cde-space-sm);
	font-size: 11px;
	white-space: nowrap;
}

.cde-badge--accent {
	background: var(--cde-accent);
	color: #fff;
}

.cde-badge--danger {
	background: #b04040;
	color: #fff;
}

.cde-breadcrumb {
	display: flex;
	align-items: center;
	gap: var(--cde-space-sm);
	font-size: 11px;
	background: var(--cde-bg-dark);
	box-shadow: var(--cde-border-sunken);
	padding: 3px var(--cde-space-md);
}

.cde-breadcrumb__item {
	color: var(--cde-text);
	text-decoration: none;
	cursor: default;
}

.cde-breadcrumb__item:hover {
	text-decoration: underline;
	cursor: pointer;
}

.cde-breadcrumb__separator::before {
	content: '▶';
	font-size: 8px;
	color: var(--cde-text-disabled);
}

.cde-flex         { display: flex; }
.cde-flex-col     { display: flex; flex-direction: column; }
.cde-flex-center  { display: flex; align-items: center; justify-content: center; }
.cde-flex-between { display: flex; align-items: center; justify-content: space-between; }
.cde-flex-wrap    { flex-wrap: wrap; }
.cde-gap-xs       { gap: var(--cde-space-xs); }
.cde-gap-sm       { gap: var(--cde-space-sm); }
.cde-gap-md       { gap: var(--cde-space-md); }
.cde-gap-lg       { gap: var(--cde-space-lg); }
.cde-gap-xl       { gap: var(--cde-space-xl); }
.cde-p-xs  { padding: var(--cde-space-xs); }
.cde-p-sm  { padding: var(--cde-space-sm); }
.cde-p-md  { padding: var(--cde-space-md); }
.cde-p-lg  { padding: var(--cde-space-lg); }
.cde-p-xl  { padding: var(--cde-space-xl); }
.cde-m-xs  { margin: var(--cde-space-xs); }
.cde-m-sm  { margin: var(--cde-space-sm); }
.cde-m-md  { margin: var(--cde-space-md); }
.cde-m-lg  { margin: var(--cde-space-lg); }
.cde-m-xl  { margin: var(--cde-space-xl); }
.cde-w-full  { width: 100%; }
.cde-h-full  { height: 100%; }
.cde-text-center { text-align: center; }
.cde-text-right  { text-align: right; }
.cde-text-left   { text-align: left; }
.cde-text-bold   { font-weight: bold; }
.cde-text-mono   { font-family: var(--cde-font-mono); }
.cde-text-sm     { font-size: 11px; }
.cde-text-muted  { color: var(--cde-text-disabled); }
.cde-hidden      { display: none; }
.cde-visible     { display: block; }
.cde-raised  { box-shadow: var(--cde-border-raised); }
.cde-sunken  { box-shadow: var(--cde-border-sunken); }

.cde-btn:focus-visible,
.cde-input:focus-visible,
.cde-select:focus-visible,
.cde-listbox:focus-visible {
	outline: 1px dotted #000;
	outline-offset: -3px;
}

.dtl-screen {
	width: 100%;
	min-height: 100vh;
	overflow: hidden;
	background:
		radial-gradient(ellipse 120% 80% at 50% 40%,
		#1a3a5c 0%,
		#0d2240 40%,
		#060e1e 100%);
	background-image: url("../images/desktop.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	font-family: 'Lucida Sans', 'Noto Sans', Helvetica, Arial, sans-serif;
	font-size: 12px;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	user-select: none;
}

.dtl-screen::before {
	content: '';
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(
		0deg,
		transparent,
		transparent 1px,
		rgba(0,0,0,0.10) 1px,
		rgba(0,0,0,0.10) 2px
	);
	pointer-events: none;
	z-index: 0;
}

.dtl-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 6px 14px 0;
	z-index: 2;
}

.dtl-header__corner {
	font-size: 11px;
	color: #8ab4d0;
	line-height: 1.5;
}

.dtl-header__corner span {
	display: block;
}

.dtl-clock {
	position: absolute;
	top: 10px; right: 14px;
	z-index: 2;
	text-align: right;
}

.dtl-clock__time {
	font-size: 28px;
	font-weight: bold;
	color: #e0e8f0;
	letter-spacing: 0.04em;
	text-shadow: 0 0 12px rgba(100,160,220,0.4);
	line-height: 1;
}

.dtl-clock__date {
	font-size: 11px;
	color: #6a94b8;
	margin-top: 2px;
	letter-spacing: 0.06em;
}

.dtl-sysinfo {
	position: absolute;
	bottom: 10px; left: 14px;
	z-index: 2;
	font-size: 10px;
	/*color: #3a6080;*/
	color: rgb(245, 208, 96);
	line-height: 1.6;
}

.dtl-logo-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 28px;
	z-index: 1;
	position: relative;
}

.dtl-sun-logo {
	display: flex;
	align-items: center;
	gap: 14px;
}

.dtl-sun-icon {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}

.dtl-sun-wordmark {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dtl-sun-wordmark__top {
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.12em;
	color: #e8c040;
	text-shadow: 0 0 18px rgba(232,192,64,0.5), 1px 1px 3px rgba(0,0,0,0.8);
	line-height: 1;
}

.dtl-sun-wordmark__sub {
	font-size: 10px;
	letter-spacing: 0.22em;
	color: #8ab4d0;
	text-transform: uppercase;
}

.dtl-cde-label {
	font-size: 13px;
	letter-spacing: 0.18em;
	color: #8ab4d0;
	text-transform: uppercase;
	border-top: 1px solid #2a5080;
	border-bottom: 1px solid #2a5080;
	padding: 3px 20px;
}

.dtl-sun-svg-wrap {
	filter: drop-shadow(0 0 8px rgba(232,192,64,0.45));
}

.dtl-panel {
position: relative;
z-index: 1;
background: #aeb2c3;
box-shadow:
	inset  1px  1px 0 #ffffff,
	inset -1px -1px 0 #3a3c46,
	inset  2px  2px 0 #d6d9e4,
	inset -2px -2px 0 #5a5d6a,
	6px 8px 24px rgba(0,0,0,0.7);
width: 380px;
padding: 0;
}

.dtl-panel__titlebar {
	background: linear-gradient(90deg, #1e5080 0%, #0d2f58 100%);
	padding: 5px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dtl-panel__title {
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	letter-spacing: 0.04em;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
	text-align: center;
}

.dtl-panel__body {
	padding: 16px 20px 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dtl-welcome {
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	color: #000;
	padding-bottom: 6px;
	border-bottom: 1px solid #5a5d6a;
	box-shadow: 0 1px 0 #d6d9e4;
	letter-spacing: 0.02em;
}

.dtl-welcome__hostname {
	color: #1a3f6e;
}

.dtl-field {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dtl-field__label {
	font-size: 12px;
	font-weight: bold;
	color: #000;
	width: 76px;
	text-align: right;
	flex-shrink: 0;
}

.dtl-field__input {
	flex: 1;
	font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
	font-size: 12px;
	background: #ffffff;
	color: #000;
	border: none;
	box-shadow:
	inset  1px  1px 0 #3a3c46,
	inset -1px -1px 0 #ffffff,
	inset  2px  2px 0 #5a5d6a,
	inset -2px -2px 0 #d6d9e4;
	padding: 4px 6px;
	height: 24px;
	outline: none;
	caret-color: #000;
}

.dtl-field__input:focus {
	background: #ffffee;
}

.dtl-field__input--password {
	letter-spacing: 0.18em;
	font-family: 'Courier New', monospace;
}

.dtl-message {
	min-height: 18px;
	text-align: center;
	font-size: 11px;
	color: #8e2020;
	font-weight: bold;
	padding: 2px 0;
}

.dtl-message--info {
	color: #1a3f6e;
}

.dtl-separator {
	border: none;
	border-top: 1px solid #5a5d6a;
	box-shadow: 0 1px 0 #d6d9e4;
	margin: 2px 0;
}

.dtl-buttons {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding-top: 2px;
}

.dtl-btn {
	font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #000;
	background: #aeb2c3;
	border: none;
	cursor: pointer;
	padding: 4px 0;
	width: 100px;
	text-align: center;
	box-shadow:
		inset  1px  1px 0 #ffffff,
		inset -1px -1px 0 #3a3c46,
		inset  2px  2px 0 #d6d9e4,
		inset -2px -2px 0 #5a5d6a;
	outline: none;
	letter-spacing: 0.02em;
}

.dtl-btn:active {
	box-shadow:
		inset  1px  1px 0 #3a3c46,
		inset -1px -1px 0 #ffffff,
		inset  2px  2px 0 #5a5d6a,
		inset -2px -2px 0 #d6d9e4;
	padding-top: 5px;
}

.dtl-btn:focus-visible {
	outline: 1px dotted #000;
	outline-offset: -4px;
}

.dtl-progress-bar {
	height: 8px;
	background-color: #fff;
	box-shadow:
		inset  1px  1px 0 #3a3c46,
		inset -1px -1px 0 #ffffff,
		inset  2px  2px 0 #5a5d6a,
		inset -2px -2px 0 #d6d9e4;
	overflow: hidden;
	display: none;
}

.dtl-progress-bar__fill {
	height: 100%;
	width: 0%;
	background: #4a90a4;
	background-image: repeating-linear-gradient(
		90deg,
		#4a90a4 0, #4a90a4 10px,
		#6ab4c8 10px, #6ab4c8 12px
	);
	transition: width 0.12s linear;
}

.dtl-options {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 24px;
	padding: 0 14px 8px;
	z-index: 2;
}

.dtl-options__group {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dtl-options__label {
	font-size: 10px;
	color: #5a80a0;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.dtl-options__select {
	font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
	font-size: 11px;
	background: #aeb2c3;
	color: #000;
	border: none;
	box-shadow:
		inset  1px  1px 0 #ffffff,
		inset -1px -1px 0 #3a3c46,
		inset  2px  2px 0 #d6d9e4,
		inset -2px -2px 0 #5a5d6a;
	padding: 2px 18px 2px 6px;
	height: 20px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath fill='%23000' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 5px center;
	outline: none;
}

@keyframes dtl-shake {
	0%,100% { transform: translateX(0); }
	15%     { transform: translateX(-6px); }
	30%     { transform: translateX(6px); }
	45%     { transform: translateX(-5px); }
	60%     { transform: translateX(5px); }
	75%     { transform: translateX(-3px); }
	90%     { transform: translateX(3px); }
}

.dtl-panel.shake {
	animation: dtl-shake 0.45s ease;
}

.dtl-panel.is-loading .dtl-btn {
	pointer-events: none;
	opacity: 0.6;
}

.dtl-panel.is-loading .dtl-field__input {
	background: #f0f0f0;
	pointer-events: none;
}

html.cde-desktop-mode,
html.cde-desktop-mode body {
	width: 100%; height: 100%;
	overflow: hidden;
	margin: 0; padding: 0;
}

.cde-workspace {
	width: 100vw;
	height: 100vh;
	background-color: #4a6e8a;
	background-image: url("../images/desktop.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	overflow: hidden;
	font-family: 'Lucida Sans', Helvetica, Arial, sans-serif;
	font-size: 12px;
}

/*.cde-workspace--gradient {
	background-image:
	radial-gradient(ellipse 160% 100% at 50% 0%, #5a8aaa 0%, #4a6e8a 50%, #3a5470 100%);
}*/

.cde-workspace--wallpaper {
	background-image: var(--cde-wallpaper, url('../images/desktop.jpg'));
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.cde-desktop-icons {
	position: absolute;
	top: 16px;
	right: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 10;
}

.cde-desktop-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	width: 64px;
	padding: 4px;
	cursor: default;
	border: 1px solid transparent;
}

.cde-desktop-icon:hover {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.3);
}

.cde-desktop-icon.is-selected {
	background: rgba(0,0,128,0.5);
	border-color: rgba(100,150,220,0.7);
}

.cde-desktop-icon__img {
	font-size: 32px;
	line-height: 1;
	text-align: center;
	filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.5));
}

.cde-desktop-icon__label {
	font-size: 11px;
	color: #fff;
	text-align: center;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.9), -1px -1px 2px rgba(0,0,0,0.7);
	word-break: break-word;
	line-height: 1.2;
	padding: 1px 3px;
}

.cde-desktop-icon.is-selected .cde-desktop-icon__label {
	background: #000080;
}

.cde-win {
	position: absolute;
	display: flex;
	flex-direction: column;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised), 4px 4px 14px rgba(0,0,0,0.55);
	min-width: 200px;
	z-index: 100;
	user-select: none;
}

.cde-win.is-focused { z-index: 200; }
.cde-win.is-minimized { display: none; }

.cde-win__titlebar {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 3px 4px;
	cursor: move;
	flex-shrink: 0;
	background: linear-gradient(90deg, #848899 0%, #6b6f7e 100%);
}

.cde-win.is-focused .cde-win__titlebar {
	background: linear-gradient(90deg, var(--cde-titlebar-from), var(--cde-titlebar-to));
}

.cde-win__title {
	flex: 1;
	text-align: center;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

.cde-win__btn {
	width: 18px; height: 15px;
	background: var(--cde-bg);
	border: none;
	cursor: pointer;
	box-shadow: var(--cde-border-raised);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: #000;
	padding: 0;
}

.cde-win__btn:active { box-shadow: var(--cde-border-sunken); }

.cde-win__body {
	flex: 1;
	overflow: auto;
	background: var(--cde-bg);
	position: relative;
}

.cde-win__body--fill {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--cde-input-bg);
}

.cde-win__body--fill .dtfile-grid {
	flex: 1;
	height: auto;
	min-height: 0;
	overflow-y: auto;
	margin: 4px;
	box-sizing: border-box;
	align-content: flex-start;
}

.cde-win__statusbar {
	display: flex;
	gap: 4px;
	padding: 2px 4px;
	background: var(--cde-bg);
	box-shadow: 0 -1px 0 var(--cde-shadow), 0 -2px 0 var(--cde-highlight);
	flex-shrink: 0;
}

.cde-win__statusbar-cell {
	box-shadow: var(--cde-border-sunken);
	padding: 1px 6px;
	font-size: 11px;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cde-win__resize {
	position: absolute;
	bottom: 0; right: 0;
	width: 12px; height: 12px;
	cursor: se-resize;
	background: linear-gradient(
		135deg,
		transparent 30%,
		var(--cde-shadow) 30%, var(--cde-shadow) 40%,
		transparent 40%,
		transparent 55%,
		var(--cde-shadow) 55%, var(--cde-shadow) 65%,
		transparent 65%
	);
}

.dtfile-toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px 4px;
	background: var(--cde-bg);
	box-shadow: 0 1px 0 var(--cde-shadow), 0 2px 0 var(--cde-highlight);
}

.dtfile-path {
	display: flex;
	align-items: center;
	padding: 2px 4px;
	background: var(--cde-bg);
	box-shadow: 0 1px 0 var(--cde-shadow), 0 2px 0 var(--cde-highlight);
	gap: 4px;
	font-size: 11px;
}

.dtfile-path__label {
	color: var(--cde-text-disabled);
	white-space: nowrap;
}

.dtfile-path__input {
	flex: 1;
	font-family: var(--cde-font-mono);
	font-size: 11px;
	background: var(--cde-input-bg);
	border: none;
	box-shadow: var(--cde-border-sunken);
	padding: 1px 4px;
	height: 18px;
	outline: none;
}

.dtfile-grid {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 4px;
	padding: 8px;
	background: var(--cde-input-bg);
	box-shadow: var(--cde-border-sunken);
	margin: 4px;
	min-height: calc(100% - 8px);
	height: calc(100% - 8px);
	box-sizing: border-box;
}

.dtfile-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 64px;
	padding: 4px 2px;
	cursor: default;
}

.dtfile-item:hover { background: var(--cde-bg-light); }

.dtfile-item.is-selected { background: var(--cde-select-bg); }

.dtfile-item.is-selected .dtfile-item__label {
	background: var(--cde-select-bg);
	color: var(--cde-select-text);
}

.dtfile-item__icon { font-size: 28px; line-height: 1; }

.dtfile-item__label {
	font-size: 11px;
	text-align: center;
	word-break: break-all;
	line-height: 1.2;
	padding: 1px 2px;
}

.dtterm {
	background: #000;
	color: #fff;
	font-family: 'Lucida Console', 'Courier New', monospace;
	font-size: 13px;
	padding: 4px 6px;
	height: 100%;
	overflow-y: auto;
	line-height: 1.35;
	cursor: text;
}

.dtterm__line   { display: flex; flex-wrap: wrap; }
.dtterm__prompt { color: #00ff00; }
.dtterm__path   { color: #00aaff; }
.dtterm__out    { color: #cccccc; }
.dtterm__err    { color: #ff5555; }

.dtterm__cursor {
	display: inline-block;
	width: 8px; height: 14px;
	background: #fff;
	vertical-align: text-bottom;
	animation: dtterm-blink 1s steps(1) infinite;
}

@keyframes dtterm-blink {
	0%,100% { opacity: 1; }
	50%     { opacity: 0; }
}

.dtpad {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dtpad__textarea {
	flex: 1;
	background: #fff;
	color: #000;
	border: none;
	box-shadow: var(--cde-border-sunken);
	font-family: 'Lucida Console', monospace;
	font-size: 12px;
	padding: 6px;
	resize: none;
	outline: none;
	margin: 4px;
	width: calc(100% - 8px);
	box-sizing: border-box;
}

.dtcal {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dtcal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(90deg, var(--cde-titlebar-from), var(--cde-titlebar-to));
	color: #fff;
	padding: 4px 8px;
	font-weight: bold;
	font-size: 13px;
}

.dtcal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.dtcal__day-header {
	text-align: center;
	font-size: 10px;
	font-weight: bold;
	color: var(--cde-text-disabled);
	padding: 2px;
}

.dtcal__day {
	text-align: center;
	font-size: 11px;
	padding: 3px 2px;
	cursor: default;
	box-shadow: var(--cde-border-raised);
	background: var(--cde-bg);
}

.dtcal__day:hover { background: var(--cde-bg-light); }

.dtcal__day.is-today {
	background: var(--cde-accent);
	color: #fff;
	font-weight: bold;
}

.dtcal__day.is-empty {
	background: transparent;
	box-shadow: none;
	cursor: default;
}

.cde-frontpanel {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9000;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised), 0 -3px 12px rgba(0,0,0,0.5);
	display: flex;
	align-items: stretch;
	padding: 4px 6px;
	gap: 3px;
}

.cde-fp-section {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 0 4px;
	border-left: 1px solid var(--cde-shadow);
	border-right: 1px solid var(--cde-highlight);
}

.cde-fp-section:first-child { border-left: none; }
.cde-fp-section:last-child  { border-right: none; }

.cde-fp-app {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 52px;
}

.cde-fp-app__btn {
	width: 48px; height: 48px;
	background: var(--cde-bg);
	border: none;
	cursor: pointer;
	box-shadow: var(--cde-border-raised);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	position: relative;
}

.cde-fp-app__btn:active { box-shadow: var(--cde-border-sunken); }

.cde-fp-app__btn:hover::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	background: #ffffcc;
	color: #000;
	border: 1px solid var(--cde-shadow-dark);
	padding: 2px 6px;
	font-size: 11px;
	font-family: var(--cde-font);
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
	z-index: 99999;
}

.cde-fp-app__label {
	font-size: 10px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis;
	color: var(--cde-text);
}

.cde-fp-workspaces {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
}

.cde-fp-workspaces__label {
	font-size: 10px;
	color: var(--cde-text-disabled);
	letter-spacing: 0.04em;
}

.cde-fp-workspaces__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px;
}

.cde-fp-ws-btn {
	width: 36px; height: 20px;
	background: var(--cde-bg-dark);
	border: none;
	cursor: pointer;
	font-size: 10px;
	font-family: var(--cde-font);
	color: var(--cde-text);
	box-shadow: var(--cde-border-raised);
	white-space: nowrap;
	overflow: hidden;
}

.cde-fp-ws-btn.is-active {
	background: var(--cde-accent);
	color: #fff;
	box-shadow: var(--cde-border-sunken);
}

.cde-fp-clock {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	padding: 2px 6px;
	box-shadow: var(--cde-border-sunken);
	background: #000;
	min-width: 70px;
}

.cde-fp-clock__time {
	font-family: 'Lucida Console', monospace;
	font-size: 18px;
	font-weight: bold;
	color: #00cc44;
	letter-spacing: 0.06em;
	line-height: 1;
}

.cde-fp-clock__date {
font-size: 9px;
color: #006622;
letter-spacing: 0.04em;
}

.cde-fp-minimized {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 80px;
	flex-wrap: wrap;
}

.cde-fp-minimized-icon {
	width: 48px; height: 48px;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised);
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-size: 18px;
	padding: 2px;
}

.cde-fp-minimized-icon span {
	font-size: 9px;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	width: 100%;
	text-overflow: ellipsis;
	font-family: var(--cde-font);
}

.cde-fp-minimized-icon:active { box-shadow: var(--cde-border-sunken); }

.cde-ctx-menu {
	position: fixed;
	background: var(--cde-bg);
	box-shadow: var(--cde-border-raised), 3px 3px 8px rgba(0,0,0,0.4);
	z-index: 99999;
	padding: 2px 0;
	min-width: 160px;
	display: none;
	font-size: 12px;
}

.cde-ctx-menu.is-visible { display: block; }

.cde-ctx-menu__item {
	padding: 3px 20px 3px 12px;
	cursor: default;
	white-space: nowrap;
}

.cde-ctx-menu__item:hover {
	background: var(--cde-select-bg);
	color: var(--cde-select-text);
}

.cde-ctx-menu__item.is-disabled {
	color: var(--cde-text-disabled);
	pointer-events: none;
}

.cde-ctx-menu__sep {
	border-top: 1px solid var(--cde-shadow);
	border-bottom: 1px solid var(--cde-highlight);
	margin: 3px 0;
}