/* ============================================================================
   AZOPSOFT theme for jspaint
   1. Map jspaint CSS variables to our --c0..--cf theme colors
   2. Layout for the embedded jspaint container
   All jspaint CSS files are scoped to .panel-area / .window / .os-window,
   so they cannot affect the bucket panel or other site UI.
   ============================================================================ */

/* ---- CSS variable mapping (global :root, so jspaint windows on body also get them) ----
   NOTE: jspaint's theme.js dynamically loads dark.css → classic.css → vista-esque-midnight-green.css
   which sets --ButtonFace, --Window, etc. on :root. We use !important to ensure our
   AZOPSOFT theme colors always take precedence over jspaint's default theme colors. */
:root {
	/* Re-assert our theme colors with !important to beat windows-98.css :root rules */
	--AppWorkspace: var(--c0) !important;
	--Background: var(--c0) !important;
	--ButtonFace: var(--c2) !important;
	--ButtonAlternateFace: var(--c3) !important;
	--ButtonLight: var(--c3) !important;
	--ButtonShadow: var(--c4) !important;
	--ButtonDkShadow: var(--c0) !important;
	--ButtonHilight: var(--c5) !important;
	--ButtonText: var(--cf) !important;
	--WindowText: var(--cf) !important;
	--Window: var(--c1) !important;
	--WindowFrame: var(--c0) !important;
	--ActiveBorder: var(--c3) !important;
	--InactiveBorder: var(--c3) !important;
	--ActiveTitle: var(--c4) !important;
	--InactiveTitle: var(--c3) !important;
	--TitleText: var(--cf) !important;
	--InactiveTitleText: var(--c9) !important;
	--Menu: var(--c2) !important;
	--MenuText: var(--cf) !important;
	--Scrollbar: var(--c2) !important;
	--GrayText: var(--c6) !important;
	--InfoText: var(--cf) !important;
	--InfoWindow: var(--c1) !important;
	--Hilight: var(--c5) !important;
	--HilightText: var(--cf) !important;
	--HotTrackingColor: var(--cf) !important;
	--GradientActiveTitle: var(--c4) !important;
	--GradientInactiveTitle: var(--c3) !important;
	--canvas-area-background-color: var(--c0) !important;
	--canvas-area-border-color: var(--c0) !important;
	--checker: var(--c8) !important;
	color-scheme: dark !important;
}

/* ---- Protect nav/logo from jspaint's global CSS ----
   jspaint's layout.css sets html, body { overflow: hidden } and other
   global rules. Ensure the nav and logo are unaffected. */
nav .logo_azop,
#logo {
	image-rendering: auto !important;
	filter: none !important;
	opacity: 1 !important;
}

/* ---- jspaint container layout ---- */
#jspaint-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--c0);
	display: flex;
	flex-direction: column;
}

#jspaint-container .jspaint {
	flex: 1;
}

/* ---- Hide jspaint extras when embedded ---- */
.grinch-button,
.news-indicator {
	display: none !important;
}

/* ---- Ensure jspaint windows appear above bucket panel ---- */
.window,
.os-window {
	z-index: 100000;
}

/* ---- Tool icons: AZOPSOFT SVG sprites via CSS mask ----
   The SVG sprite uses black fills/strokes. CSS mask uses the alpha channel
   to show only the icon shapes, and background-color provides the color.
   This works because background-image SVGs don't inherit currentColor. */
.tool-icon,
.tool-icon.use-svg {
	background-image: none !important;
	background-color: var(--cf) !important;
	-webkit-mask-image: url("/jspaint/images/azopsoft/tools.svg") !important;
	mask-image: url("/jspaint/images/azopsoft/tools.svg") !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-size: 256px 16px !important;
	mask-size: 256px 16px !important;
	-webkit-mask-position: calc(-16px * var(--icon-index)) 0 !important;
	mask-position: calc(-16px * var(--icon-index)) 0 !important;
}
/* Selected tool: brighter icon for visibility against highlight */
.tool.selected .tool-icon {
	background-color: var(--cf) !important;
	filter: brightness(1.3) !important;
}

/* ---- Window buttons: simple text characters, theme color ---- */
.window-button {
	font-family: sans-serif !important;
	color: var(--cf) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.window-button .window-button-icon {
	display: none !important;
}
.window-close-button::after {
	content: "✕" !important;
	color: var(--cf) !important;
	font-size: 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.window-minimize-button::after {
	content: "—" !important;
	color: var(--cf) !important;
	font-size: 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.window-maximize-button::after {
	content: "▢" !important;
	color: var(--cf) !important;
	font-size: 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.window-button:disabled::after {
	color: var(--c5) !important;
}

/* ---- Undo button: SVG via CSS mask ---- */
.floating-undo-button .button-icon {
	background-color: var(--cf) !important;
	-webkit-mask-image: url("/jspaint/images/azopsoft/undo.svg") !important;
	mask-image: url("/jspaint/images/azopsoft/undo.svg") !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
}

/* ---- Help viewer toolbar icons: use currentColor via mask ---- */
.help-window .toolbar button .icon {
	background-image: none !important;
	background-color: var(--cf) !important;
	-webkit-mask-image: url("/jspaint/images/help-viewer-toolbar-icons-grayscale.png") !important;
	mask-image: url("/jspaint/images/help-viewer-toolbar-icons-grayscale.png") !important;
}
.help-window .toolbar button:not([disabled]):hover .icon {
	background-image: none !important;
	background-color: var(--cf) !important;
}

/* ---- Image colorization is handled by colorize-images.js ----
   The JS module intercepts Image.src and CSS background-image for known
   jspaint image paths, replacing them with pre-colorized data URLs that
   use the --cf theme color. No CSS filter hacks needed here.

   Exception: transparent-mode-option uses dark/options-transparency.png
   which is already dark-theme adapted (multi-colored, can't colorize). */
.transparent-mode-option {
	background-image: url("/jspaint/images/dark/options-transparency.png") !important;
}
.transparent-mode-option.use-svg {
	background-image: url("/jspaint/images/dark/options-transparency.svg") !important;
}

/* Floating undo button & eye-gaze icons: use dark variants */
.floating-undo-button .button-icon {
	background-image: url("/jspaint/images/dark/undo.svg") !important;
}
.toggle-dwell-clicking .button-icon {
	background-image: url("/jspaint/images/dark/eye-gaze-pause.svg") !important;
}

/* ---- Theme radio buttons & checkboxes in jspaint dialogs ----
   98.css uses hardcoded SVG data URIs with 3D bevel colors (gray/black/white)
   for radio borders and black for the checked dot/checkmark. We replace them
   with theme-colored versions using --c4 (border) and --cf (fill). */

/* Radio button border: flat themed circle instead of 3D bevel SVG */
:where(.panel-area, .window, .os-window) input[type="radio"] + label::before,
:where(.panel-area, .window, .os-window) input[type="radio"]:active + label::before,
:where(.panel-area, .window, .os-window) input[type="radio"][disabled] + label::before {
	background: var(--c1) !important;
	border: 1px solid var(--c4) !important;
	border-radius: 50% !important;
	box-shadow: none !important;
}

/* Radio checked dot: themed color, centered in the circle.
   The ::before circle has a 1px border, so the dot must account for it.
   Override the dot position to center it precisely. */
:where(.panel-area, .window, .os-window) input[type="radio"]:checked + label::after,
:where(.panel-area, .window, .os-window) input[type="radio"][disabled]:checked + label::after {
	background: var(--cf) !important;
	border-radius: 50% !important;
	top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2 + 1px) !important;
	left: calc(-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(--radio-dot-width) / 2 + 1px) !important;
}

/* Checkbox border: flat themed instead of 3D box-shadow inset */
:where(.panel-area, .window, .os-window) input[type="checkbox"] + label::before {
	background: var(--c1) !important;
	border: 1px solid var(--c4) !important;
	box-shadow: none !important;
}
:where(.panel-area, .window, .os-window) input[type="checkbox"]:active + label::before,
:where(.panel-area, .window, .os-window) input[type="checkbox"][disabled] + label::before {
	background: var(--c2) !important;
	border: 1px solid var(--c4) !important;
	box-shadow: none !important;
}

/* Checkbox checkmark: themed color instead of black SVG */
:where(.panel-area, .window, .os-window) input[type="checkbox"]:checked + label::after,
:where(.panel-area, .window, .os-window) input[type="checkbox"][disabled]:checked + label::after {
	background: var(--cf) !important;
}

/* Focus outline: themed color instead of black */
:where(.panel-area, .window, .os-window) input[type="radio"]:focus + label,
:where(.panel-area, .window, .os-window) input[type="checkbox"]:focus + label {
	outline: 1px dotted var(--cf) !important;
}

/* ---- Select elements: remove native arrow, add themed one ----
   Without appearance:none the browser's native dropdown arrow overlaps
   the selected text. We use a CSS-drawn arrow instead. */
:where(.panel-area, .window, .os-window) select.inset-deep {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	padding-right: 20px !important;
	background-image: none !important;
	position: relative !important;
}
:where(.panel-area, .window, .os-window) select.inset-deep::after {
	content: "" !important;
	position: absolute !important;
	right: 4px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 0 !important;
	height: 0 !important;
	border-left: 4px solid transparent !important;
	border-right: 4px solid transparent !important;
	border-top: 5px solid var(--cf) !important;
	pointer-events: none !important;
}

/* ---- Font box toggle icons: hide full-color ::before, keep themed ::after ----
   classic.css shows text-tools.png (full color) via ::before AND a themed
   mask via ::after. The ::before overlaps with unthemed colors. Hide it
   so only the themed ::after (currentColor mask) is visible. */
.font-box .toggle > .icon::before {
	display: none !important;
}

/* ---- Protect export panel from jspaint's scoped CSS ----
   jspaint's windows-98.css/98.css scope button/input/select styles to
   :where(.panel-area, .window, .os-window) button, etc.
   The export panel lives inside .panel-area so it catches these styles.
   Reset them so the export panel uses the site's own SCSS styling. */
#xtrc-export-panel {
	user-select: auto;
	-webkit-user-select: auto;
}
#xtrc-export-panel button,
#xtrc-export-panel select,
#xtrc-export-panel input,
#xtrc-export-panel textarea {
	border-image: none !important;
	-o-border-image: none !important;
	box-shadow: none !important;
	min-width: auto !important;
	min-height: auto !important;
	font-family: inherit !important;
	font-size: inherit !important;
	-webkit-font-smoothing: auto !important;
}

#xtrc-export-panel button:not(.lightweight) {
	border-image: none !important;
	-o-border-image: none !important;
}

#xtrc-export-panel button:not(.lightweight)::before {
	display: none !important;
}

#xtrc-export-panel button:focus::before {
	display: none !important;
}

/* ---- Remove 3D inset/outset border effects from jspaint UI ----
   Override the Windows 98 border-image SVGs and bevel border-colors
   with flat borders using our theme colors.
   NOTE: windows-98.css has both scoped (:where(...)) and unscoped selectors.
   We must override both — unscoped for dialog windows on body, scoped for
   elements inside .panel-area. */

/* Buttons: flat border, no bevel (scoped + unscoped) */
:where(.panel-area, .window, .os-window) button:not(.lightweight),
button:not(.lightweight).os-window button:not(.lightweight) {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}
:where(.panel-area, .window, .os-window) button:not(.lightweight)::before,
.os-window button:not(.lightweight)::before {
	display: none !important;
}
:where(.panel-area, .window, .os-window) button:not(.lightweight):active,
:where(.panel-area, .window, .os-window) button:not(.lightweight).pressed,
:where(.panel-area, .window, .os-window) button:not(.lightweight).toggle.selected,
.os-window button:not(.lightweight):active,
.os-window button:not(.lightweight).pressed,
.os-window button:not(.lightweight).toggle.selected {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c5) !important;
	box-shadow: none !important;
}
:where(.panel-area, .window, .os-window) button.default,
.os-window button.default {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c6) !important;
}

/* Inset/outset classes: flat border (scoped + unscoped) */
:where(.panel-area, .window, .os-window) .inset-deep,
:where(.panel-area, .window, .os-window) .inset-shallow,
:where(.panel-area, .window, .os-window) .outset-deep,
:where(.panel-area, .window, .os-window) .outset-shallow,
.inset-deep,
.inset-shallow,
.outset-deep,
.outset-shallow {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}

/* Inputs, selects, textareas: flat border (scoped + unscoped) */
:where(.panel-area, .window, .os-window) input[type="text"],
:where(.panel-area, .window, .os-window) input[type="url"],
:where(.panel-area, .window, .os-window) input[type="number"],
:where(.panel-area, .window, .os-window) input:not([type]),
:where(.panel-area, .window, .os-window) select,
:where(.panel-area, .window, .os-window) textarea,
.os-window input[type="text"],
.os-window input[type="url"],
.os-window input[type="number"],
.os-window input:not([type]),
.os-window select,
.os-window textarea {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}
/* Exclude the on-canvas textbox editor from border overrides — jspaint sets border:0 inline */
.textbox-editor {
	border: 0 !important;
	border-width: 0 !important;
}

/* Windows / dialogs: flat border, no bevel, no shadow (scoped + unscoped) */
:where(.panel-area, .window, .os-window) .window,
:where(.panel-area, .window, .os-window) .os-window,
:where(.panel-area, .window, .os-window) .dialog-window,
:where(.panel-area, .window, .os-window) .stretch-and-skew,
.os-window,
.os-window:not(.maximized),
.window:not(.maximized) {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
	padding: 0 !important;
}

/* Fieldsets: flat border (scoped + unscoped) */
:where(.panel-area, .window, .os-window) fieldset,
.os-window fieldset {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}

/* Menu bar / menus: flat, no shadow (scoped + unscoped) */
:where(.panel-area, .window, .os-window) .menubar,
:where(.panel-area, .window, .os-window) .menu-popup,
.os-window .menubar,
.os-window .menu-popup,
.menu-popup {
	border-image: none !important;
	-o-border-image: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: var(--c4) !important;
	box-shadow: none !important;
}

/* ---- Use the 'bit' pixel font for jspaint menus and modal dialogs ----
   The 'bit' font (Web437_OlivettiThin_8x16) is loaded globally via theme.css.
   jspaint's windows-98.css sets `font-family: 'Segoe UI', sans-serif` on
   `.menus *, .menu-popup *` — we override with !important so the pixel font wins. */

/* Menu bar + dropdown popups: override the windows-98.css `*` selector */
.menus,
.menus *,
.menu-popup,
.menu-popup * {
	font-family: "bit", monospace !important;
}

/* Windows / dialogs / modals: use 'bit' font for all text content */
.window,
.os-window,
.dialog-window,
.window *,
.os-window *,
.dialog-window * {
	font-family: "bit", monospace !important;
}
/* Exclude window titlebar buttons from 'bit' font — the bit font renders × as Y */
.window-titlebar button,
.window-titlebar button *,
.window-button,
.window-button * {
	font-family: sans-serif !important;
}

/* ---- Tool box: grow to fit all tools, options below (no scroll) ---- */
.tools-component {
	height: auto !important;
	max-height: none !important;
}
.tools {
	overflow: visible !important;
	height: auto !important;
}
.tool-options {
	height: auto !important;
	min-height: 31px;
	flex-shrink: 0;
}

/* ---- Size button in tool options ---- */
.size-button {
	border: 1px solid var(--c5) !important;
	background: var(--c2) !important;
	color: var(--cf) !important;
	font-family: "bit", monospace !important;
	font-size: 10px !important;
	padding: 1px 4px !important;
	cursor: pointer !important;
	user-select: none !important;
	white-space: nowrap !important;
}
.size-button:hover {
	background: var(--c5) !important;
}
.size-button:active {
	background: var(--c0) !important;
}

/* ---- Size modal popover ---- */
.size-modal {
	background: var(--c1) !important;
	border: 2px solid var(--c5) !important;
	box-shadow: 4px 4px 0 var(--c0) !important;
	color: var(--cf) !important;
	font-family: "bit", monospace !important;
}
.size-modal button {
	background: var(--c2) !important;
	color: var(--cf) !important;
	border: 1px solid var(--c5) !important;
	font-family: "bit", monospace !important;
	cursor: pointer;
}
.size-modal button:hover {
	background: var(--c5) !important;
}
/* ---- Global range input styling for jspaint (scoped) ---- */
input[type="range"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	cursor: pointer;
	accent-color: unset !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	height: 14px !important;
}
/* WebKit — reset ALL pseudo elements to kill skeuomorphic borders */
input[type="range"]::-webkit-slider-container {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	height: 14px !important;
	display: flex !important;
	align-items: center !important;
}
input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none !important;
	appearance: none !important;
	height: 4px !important;
	background: var(--c5) !important;
	border-radius: 2px !important;
	border: none !important;
	box-shadow: none !important;
}
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	background: var(--cf) !important;
	margin-top: 0 !important;
	transform: none !important;
	border: 1px solid var(--c3) !important;
	box-shadow: none !important;
}
/* Firefox */
input[type="range"]::-moz-range-track {
	height: 4px !important;
	background: var(--c5) !important;
	border-radius: 2px !important;
	border: none !important;
	box-shadow: none !important;
}
input[type="range"]::-moz-range-thumb {
	width: 14px !important;
	height: 14px !important;
	border-radius: 50% !important;
	background: var(--cf) !important;
	border: 1px solid var(--c3) !important;
	box-shadow: none !important;
	transform: none !important;
}
input[type="range"]::-moz-range-progress {
	height: 4px !important;
	background: var(--c8) !important;
	border-radius: 2px !important;
}
input[type="range"]:focus {
	outline: none !important;
}
.size-modal input[type="number"] {
	background: var(--c0) !important;
	color: var(--cf) !important;
	border: 1px solid var(--c5) !important;
	font-family: "bit", monospace !important;
}

/* ---- Transform dialog icons: invert black SVGs for dark theme ---- */
:where(.panel-area, .window, .os-window) img[src*="/transforms/"] {
	filter: invert(1) !important;
}

/* Status bar: use 'bit' font */
.status-area,
.status-area *,
.status-text,
.status-coordinates,
.status-field {
	font-family: "bit", monospace !important;
}

/* ---- FX dialog styling ---- */
.fx-dialog .window-content {
	min-width: 420px !important;
}
.fx-dialog input[type="range"] {
	height: 4px !important;
}
.fx-dialog select optgroup {
	font-family: "bit", monospace !important;
	font-style: normal !important;
	color: var(--cf) !important;
	background: var(--c1) !important;
}
.fx-dialog select option {
	background: var(--c2) !important;
	color: var(--cf) !important;
}
.fx-dialog .fx-params-title {
	color: var(--cf) !important;
}

/* ---- Damier (checkerboard) workspace background ----
   Uses theme colors to create a checkerboard pattern on the canvas-area
   so the canvas boundaries are clearly visible against the workspace. */
.canvas-area {
	background-color: var(--c0) !important;
	background-image:
		linear-gradient(45deg, var(--c1) 25%, transparent 25%),
		linear-gradient(-45deg, var(--c1) 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, var(--c1) 75%),
		linear-gradient(-45deg, transparent 75%, var(--c1) 75%) !important;
	background-size: 16px 16px !important;
	background-position: 0 0, 0 8px, 8px -8px, -8px 0px !important;
}

/* ---- Override classic.css .canvas-area > canvas { background: var(--checker) }
   The single-canvas layer system composites all layers onto main_canvas.
   The checker background would show through transparent areas incorrectly. ---- */
.canvas-area > .main-canvas {
	background: transparent !important;
}

/* ---- Zoom controls in bottom component-area ---- */
.zoom-controls {
	margin-left: auto !important;
	display: flex !important;
	align-items: center !important;
	gap: 2px !important;
	padding: 2px 4px !important;
}
.zoom-btn {
	background: var(--c2) !important;
	color: var(--cf) !important;
	border: 1px solid var(--c5) !important;
	font-family: "bit", monospace !important;
	font-size: 13px !important;
	width: 24px !important;
	height: 22px !important;
	cursor: pointer !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}
.zoom-btn:hover {
	background: var(--c5) !important;
}
.zoom-btn:active {
	background: var(--c0) !important;
}
.zoom-level {
	font-family: "bit", monospace !important;
	font-size: 11px !important;
	color: var(--cf) !important;
	min-width: 42px !important;
	text-align: center !important;
	user-select: none !important;
}
.zoom-reset {
	width: 36px !important;
	font-size: 10px !important;
}

/* ---- Layer panel ---- */
.layer-panel {
	width: 200px;
	min-width: 200px;
	max-width: 200px;
	background: var(--c1);
	border-left: 1px solid var(--c4);
	display: flex;
	flex-direction: column;
	font-family: "bit", monospace !important;
	color: var(--cf);
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
}

.layer-panel-header {
	display: flex;
	align-items: center;
	padding: 6px 8px;
	background: var(--c2);
	border-bottom: 1px solid var(--c4);
}

.layer-panel-title {
	font-size: 12px;
	font-weight: bold;
	font-family: "bit", monospace !important;
	color: var(--cf);
}

.layer-panel-toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 4px 6px;
	background: var(--c1);
	border-bottom: 1px solid var(--c4);
}

.layer-btn {
	background: var(--c2);
	border: 1px solid var(--c4);
	color: var(--cf);
	padding: 2px 6px;
	cursor: pointer;
	font-family: "bit", monospace !important;
	font-size: 11px;
	min-width: 22px;
	min-height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.layer-btn:hover:not(:disabled) {
	background: var(--c3);
	border-color: var(--c5);
}
.layer-btn:active:not(:disabled) {
	background: var(--c4);
}
.layer-btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.layer-btn-sep {
	flex: 1;
}

.layer-list {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 4px;
}

.layer-row {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	margin-bottom: 2px;
	border: 1px solid transparent;
	cursor: pointer;
	font-family: "bit", monospace !important;
}
.layer-row:hover {
	background: var(--c2);
}
.layer-row.active {
	border-color: var(--c6);
	background: var(--c3);
}

.layer-vis-btn {
	background: none;
	border: none;
	color: var(--cf);
	cursor: pointer;
	font-size: 12px;
	padding: 0;
	min-width: 18px;
	min-height: 18px;
	font-family: "bit", monospace !important;
}
.layer-vis-btn:hover {
	color: var(--cf);
}

.layer-thumb {
	width: 36px;
	height: 28px;
	border: 1px solid var(--c4);
	image-rendering: pixelated;
	flex-shrink: 0;
}

.layer-name {
	font-size: 11px;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: "bit", monospace !important;
	color: var(--cf);
}
.layer-hidden-name {
	opacity: 0.4;
}

.layer-op-badge {
	font-size: 9px;
	color: var(--c9);
	background: var(--c3);
	padding: 0 3px;
	border: 1px solid var(--c4);
	flex-shrink: 0;
}

.layer-panel-footer {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 8px;
	background: var(--c2);
	border-top: 1px solid var(--c4);
}

.layer-opacity-label {
	font-size: 10px;
	font-family: "bit", monospace !important;
	color: var(--cf);
	white-space: nowrap;
}

.layer-opacity-slider {
	flex: 1;
	height: 4px;
}

.layer-opacity-val {
	font-size: 10px;
	min-width: 32px;
	text-align: right;
	font-family: "bit", monospace !important;
	color: var(--cf);
}

/* ---- Open Image dialog ---- */
.layer-open-dialog {
	background: var(--c1) !important;
	border: 2px solid var(--c5) !important;
	box-shadow: 4px 4px 0 var(--c0) !important;
	color: var(--cf) !important;
}
.layer-open-dialog .title-bar {
	background: var(--c5) !important;
	color: var(--cf) !important;
	padding: 3px 6px;
}
.layer-open-dialog .dialog-content {
	background: var(--c1) !important;
	color: var(--cf) !important;
}
.layer-open-dialog button {
	background: var(--c2) !important;
	color: var(--cf) !important;
	border: 1px solid var(--c5) !important;
	font-family: "bit", monospace !important;
	cursor: pointer;
}
.layer-open-dialog button:hover {
	background: var(--c5) !important;
}
.layer-open-dialog button:active {
	background: var(--c0) !important;
}

/* ---- Adjustment dialogs (brightness, curves, etc.) ---- */
.adjust-dialog .window-content {
	background: var(--c1) !important;
	color: var(--cf) !important;
	font-family: "bit", monospace !important;
}
.adjust-dialog button {
	background: var(--c2) !important;
	color: var(--cf) !important;
	border: 1px solid var(--c5) !important;
	font-family: "bit", monospace !important;
	cursor: pointer;
}
.adjust-dialog button:hover {
	background: var(--c5) !important;
}
.adjust-dialog button:active {
	background: var(--c0) !important;
}
.adjust-dialog canvas {
	image-rendering: pixelated;
}
.adjust-dialog input[type="range"] {
	/* track/thumb styled globally above */
}
.curves-dialog canvas {
	cursor: crosshair !important;
}