/*
 * SOFON UI skin for miniPaint 4.14.2
 * Phase02 – visual pilot
 *
 * Visual overrides only.
 * No canvas geometry, tool logic or JavaScript is changed.
 */

:root {
	--sofon-blue: #4267d5;
	--sofon-blue-deep: #294baf;
	--sofon-violet: #7757d7;
	--sofon-text: #263650;
	--sofon-muted: #6d7b92;
	--sofon-line: rgba(76, 101, 154, 0.18);
	--sofon-glass: rgba(248, 251, 255, 0.94);
	--sofon-shadow: 0 12px 32px rgba(31, 48, 88, 0.16);

	/* miniPaint menu variables */
	--menu-dropdown-background-color: rgba(250, 252, 255, 0.98);
	--menu-dropdown-border-color: rgba(70, 99, 157, 0.22);
	--menu-dropdown-text-color: #263650;
	--menu-dropdown-text-muted-color: #8490a4;
	--menu-dropdown-hover-background-color: #e8efff;
	--menu-dropdown-hover-text-color: #294baf;
	--menu-dropdown-divider-color: #e3e9f3;
}


/* ============================================================
   APPLICATION BACKDROP
   ============================================================ */

html,
body {
	background:
		radial-gradient(
			circle at 12% 12%,
			rgba(91, 145, 255, 0.14),
			transparent 34%
		),
		radial-gradient(
			circle at 88% 84%,
			rgba(135, 90, 226, 0.12),
			transparent 34%
		),
		#e9eef7;
}

.wrapper {
	background:
		linear-gradient(
			135deg,
			rgba(239, 246, 255, 0.66),
			rgba(246, 242, 255, 0.62)
		);
}


/* ============================================================
   MAIN TOP MENU
   dimensions intentionally remain unchanged
   ============================================================ */

.main_menu > ul.menu_bar {
	background:
		linear-gradient(
			100deg,
			#294baf 0%,
			#4267d5 48%,
			#7757d7 100%
		) !important;

	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.16) inset,
		0 3px 12px rgba(23, 40, 82, 0.22);

	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

.main_menu > ul.menu_bar > li > a {
	color: #ffffff !important;
	font-weight: 600;
	letter-spacing: 0.01em;
	transition:
		background-color 140ms ease,
		color 140ms ease;
}

.main_menu > ul.menu_bar > li > a:hover {
	background: rgba(255, 255, 255, 0.15) !important;
	color: #ffffff !important;
}

.main_menu > ul.menu_bar > li > a:focus {
	box-shadow:
		0 -3px rgba(255, 255, 255, 0.72) inset !important;
}

.main_menu > ul.menu_bar > li > a[aria-expanded="true"] {
	background: rgba(250, 252, 255, 0.98) !important;
	color: var(--sofon-blue-deep) !important;
}


/* ============================================================
   DROPDOWN MENUS
   ============================================================ */

.main_menu > ul.menu_dropdown {
	background: rgba(250, 252, 255, 0.98) !important;

	box-shadow:
		0 18px 44px rgba(27, 43, 82, 0.20),
		0 0 0 1px rgba(65, 91, 145, 0.16) !important;

	border-radius: 0 0 11px 11px;

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.main_menu > ul.menu_dropdown > li > a {
	color: var(--sofon-text) !important;

	transition:
		background-color 120ms ease,
		color 120ms ease;
}

.main_menu > ul.menu_dropdown > li > a:hover,
.main_menu > ul.menu_dropdown > li > a:focus,
.main_menu > ul.menu_dropdown > li > a[aria-expanded="true"] {
	background: #e8efff !important;
	color: var(--sofon-blue-deep) !important;
}

.main_menu > ul.menu_dropdown > li > hr {
	border-color: #e3e9f3 !important;
}

.main_menu > ul.menu_dropdown > li > a > .shortcut {
	color: #8996aa !important;
}


/* ============================================================
   SECONDARY TOOLBAR
   ============================================================ */

.submenu {
	background: rgba(249, 251, 255, 0.93) !important;

	box-shadow:
		0 1px 0 rgba(61, 84, 128, 0.12),
		0 5px 18px rgba(31, 47, 82, 0.08);

	backdrop-filter: blur(15px);
	-webkit-backdrop-filter: blur(15px);
}

.submenu .logo {
	color: var(--sofon-blue-deep) !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.submenu button,
.submenu select,
.submenu input {
	border-radius: 6px;
}


/* ============================================================
   APPLICATION FRAME
   no widths / heights / positions changed
   ============================================================ */

.sidebar_left {
	box-shadow:
		1px 0 0 rgba(53, 76, 121, 0.12),
		4px 0 16px rgba(36, 52, 85, 0.07);
}

.sidebar_right {
	box-shadow:
		-1px 0 0 rgba(53, 76, 121, 0.12),
		-4px 0 16px rgba(36, 52, 85, 0.07);
}

.sidebar_right .block {
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.08) inset,
		0 -1px 0 rgba(60, 80, 120, 0.10) inset;
}

.sidebar_right .block > h2 {
	position: relative;

	box-shadow:
		0 -1px 0 rgba(255, 255, 255, 0.06) inset,
		0 1px 0 rgba(50, 70, 110, 0.10);

	letter-spacing: 0.01em;
}

.sidebar_right .block > h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22%;
	bottom: 22%;
	width: 3px;
	border-radius: 0 3px 3px 0;

	background:
		linear-gradient(
			180deg,
			var(--sofon-blue),
			var(--sofon-violet)
		);
}


/* ============================================================
   WORKSPACE BACKGROUND

   canvas_wrapper / canvas_minipaint intentionally untouched
   ============================================================ */

.middle_area,
.main_wrapper {
	background:
		radial-gradient(
			circle at 38% 25%,
			rgba(120, 151, 218, 0.09),
			transparent 38%
		),
		linear-gradient(
			145deg,
			rgba(214, 223, 239, 0.72),
			rgba(230, 225, 241, 0.72)
		) !important;
}


/* ============================================================
   MINIPAINT POPUP WINDOWS
   ============================================================ */

#popups .popup {
	background: rgba(249, 251, 255, 0.985) !important;

	border-color: rgba(63, 88, 141, 0.24) !important;
	border-radius: 15px;

	box-shadow:
		0 0 0 4000px rgba(18, 27, 47, 0.34),
		0 28px 80px rgba(25, 40, 75, 0.30) !important;

	color: var(--sofon-text);

	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

#popups .popup h2 {
	background:
		linear-gradient(
			100deg,
			#294baf,
			#4267d5 55%,
			#7757d7
		) !important;

	color: #ffffff !important;
	font-weight: 650;
	letter-spacing: 0.01em;

	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.16) inset,
		0 3px 12px rgba(28, 45, 87, 0.15);
}

#popups .popup input,
#popups .popup select,
#popups .popup textarea,
#popups .popup button {
	border-radius: 7px;
}

#popups .popup button {
	transition:
		background-color 140ms ease,
		box-shadow 140ms ease,
		transform 140ms ease;
}

#popups .popup button:hover {
	box-shadow:
		0 4px 12px rgba(39, 66, 130, 0.13);
}


/* ============================================================
   ALERTIFY NOTIFICATIONS
   ============================================================ */

.alertify-notifier .ajs-message {
	border-radius: 10px;

	box-shadow:
		0 12px 32px rgba(24, 39, 72, 0.22);
}


/* ============================================================
   MOBILE
   ============================================================ */

@media screen and (max-width: 700px) {

	.main_menu > ul.menu_bar {
		background:
			linear-gradient(
				100deg,
				#294baf,
				#4267d5 52%,
				#7757d7
			) !important;
	}

	.submenu {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	#popups .popup {
		border-radius: 12px;
	}
}


/* ============================================================
   SOFON PHASE02B FLOATING HEADER START
   ============================================================ */

@media screen and (min-width: 701px) {

	:root {
		--sofon-shell-x: clamp(20px, 5vw, 104px);
		--sofon-header-bg: rgba(252, 254, 255, 0.96);
		--sofon-header-border: rgba(74, 93, 126, 0.15);
		--sofon-header-shadow:
			0 18px 46px rgba(34, 54, 88, 0.13),
			0 2px 8px rgba(34, 54, 88, 0.06);

		--sofon-tab-text: #20292b;
		--sofon-tab-border: rgba(75, 92, 116, 0.17);
		--sofon-tab-hover: #f2f6f8;

		--sofon-active: #108d8b;
		--sofon-active-deep: #087978;
	}


	/* ----------------------------------------------------------
	   MAIN FLOATING HEADER CARD
	   ---------------------------------------------------------- */

	.main_menu {
		position: fixed !important;

		top: 18px !important;
		left: var(--sofon-shell-x) !important;
		right: var(--sofon-shell-x) !important;

		z-index: 1000 !important;
	}


	.main_menu > ul.menu_bar {
		box-sizing: border-box;

		display: flex;
		align-items: center;
		gap: 7px;

		width: 100%;
		height: 64px !important;

		margin: 0 !important;
		padding: 10px 12px !important;

		background: var(--sofon-header-bg) !important;

		border:
			1px solid var(--sofon-header-border);

		border-radius: 22px;

		box-shadow:
			var(--sofon-header-shadow),
			0 1px 0 rgba(255, 255, 255, 0.92) inset !important;

		backdrop-filter: blur(22px);
		-webkit-backdrop-filter: blur(22px);

		overflow: visible;
	}


	/*
	 * Branding is generated only visually.
	 * It does not create another DOM element and therefore
	 * does not interfere with MiniPaint menu indexes.
	 */

	.main_menu > ul.menu_bar::before {
		content: "SOFON Grafika";

		display: flex;
		align-items: center;

		box-sizing: border-box;

		flex: 0 0 auto;

		height: 42px;

		margin-right: auto;

		padding:
			0 12px
			0 51px;

		background:
			url("images/favicon.png")
			no-repeat
			7px center /
			34px 34px;

		color: #20292b;

		font-size: 18px;
		font-weight: 750;
		line-height: 1;

		letter-spacing: -0.025em;

		white-space: nowrap;
	}


	/* ----------------------------------------------------------
	   TOP-LEVEL TABS
	   ---------------------------------------------------------- */

	.main_menu > ul.menu_bar > li {
		flex: 0 0 auto;

		box-sizing: border-box;

		height: 42px !important;

		padding: 0 !important;

		overflow: visible !important;
	}


	.main_menu > ul.menu_bar > li > a {
		box-sizing: border-box;

		display: flex;
		align-items: center;
		justify-content: center;

		height: 42px !important;

		padding:
			0 15px !important;

		background:
			rgba(255, 255, 255, 0.72) !important;

		border:
			1px solid
			var(--sofon-tab-border);

		border-radius: 12px;

		color:
			var(--sofon-tab-text) !important;

		font-size: 13px !important;
		font-weight: 700;

		letter-spacing: -0.01em;

		box-shadow:
			0 1px 2px rgba(30, 45, 64, 0.025);

		transition:
			background-color 150ms ease,
			border-color 150ms ease,
			box-shadow 150ms ease,
			color 150ms ease,
			transform 150ms ease;
	}


	.main_menu > ul.menu_bar > li > a:hover {
		background:
			var(--sofon-tab-hover) !important;

		border-color:
			rgba(65, 89, 124, 0.25);

		color:
			#152e3b !important;

		box-shadow:
			0 4px 12px
			rgba(30, 48, 73, 0.08) !important;
	}


	.main_menu > ul.menu_bar > li > a:focus {
		outline: none !important;

		box-shadow:
			0 0 0 3px
			rgba(16, 141, 139, 0.15) !important;
	}


	/*
	 * Open menu = SOFON accent tab.
	 */

	.main_menu
	> ul.menu_bar
	> li
	> a[aria-expanded="true"] {

		background:
			linear-gradient(
				135deg,
				var(--sofon-active),
				#1698a4
			) !important;

		border-color:
			transparent !important;

		color:
			#ffffff !important;

		box-shadow:
			0 8px 18px
			rgba(13, 132, 135, 0.22) !important;
	}


	/* ----------------------------------------------------------
	   DROPDOWN MENUS
	   ---------------------------------------------------------- */

	.main_menu > ul.menu_dropdown {
		padding:
			6px !important;

		background:
			rgba(253, 254, 255, 0.985) !important;

		border:
			1px solid
			rgba(66, 85, 115, 0.15);

		border-radius:
			13px !important;

		box-shadow:
			0 20px 50px
			rgba(27, 43, 72, 0.18),
			0 4px 12px
			rgba(27, 43, 72, 0.08) !important;

		backdrop-filter:
			blur(20px);

		-webkit-backdrop-filter:
			blur(20px);
	}


	.main_menu
	> ul.menu_dropdown
	> li
	> a {

		border-radius:
			8px;

		color:
			#26323e !important;
	}


	.main_menu
	> ul.menu_dropdown
	> li
	> a:hover,

	.main_menu
	> ul.menu_dropdown
	> li
	> a:focus,

	.main_menu
	> ul.menu_dropdown
	> li
	> a[aria-expanded="true"] {

		background:
			#edf6f6 !important;

		color:
			var(--sofon-active-deep) !important;
	}


	.main_menu
	> ul.menu_dropdown
	> li
	> hr {

		margin:
			5px 3px !important;

		border-color:
			#e5eaef !important;
	}


	/* ----------------------------------------------------------
	   SECOND FLOATING TOOL OPTIONS CARD
	   ---------------------------------------------------------- */

	.submenu {
		box-sizing: border-box;

		top:
			94px !important;

		left:
			var(--sofon-shell-x) !important;

		right:
			var(--sofon-shell-x) !important;

		width:
			auto !important;

		background:
			rgba(251, 253, 255, 0.95) !important;

		border:
			1px solid
			rgba(74, 93, 126, 0.13);

		border-radius:
			14px;

		box-shadow:
			0 10px 26px
			rgba(35, 53, 83, 0.09),
			0 1px 0
			rgba(255, 255, 255, 0.92)
			inset !important;

		backdrop-filter:
			blur(18px);

		-webkit-backdrop-filter:
			blur(18px);

		overflow:
			visible;

		z-index:
			800;
	}


	/*
	 * Brand is now in the large header,
	 * so the old miniPaint text does not need to be duplicated.
	 */

	.submenu > .logo {
		display:
			none !important;
	}


	.submenu .attributes {
		margin-left:
			9px;
	}


	/* ----------------------------------------------------------
	   MOVE EDITOR BELOW FLOATING HEADER
	   Only top position changes.
	   Widths and canvas geometry are otherwise untouched.
	   ---------------------------------------------------------- */

	.sidebar_left,
	.sidebar_right,
	.middle_area {
		top:
			150px !important;
	}


	/* Slight visual separation of app workspace */

	.middle_area {
		border-top:
			1px solid
			rgba(65, 82, 114, 0.08);
	}

}


/* ------------------------------------------------------------
   COMPACT DESKTOP / TABLET
   ------------------------------------------------------------ */

@media screen
	and (min-width: 701px)
	and (max-width: 1180px) {

	:root {
		--sofon-shell-x:
			24px;
	}


	.main_menu > ul.menu_bar {
		gap:
			3px;

		padding:
			10px !important;
	}


	.main_menu > ul.menu_bar::before {
		content:
			"";

		width:
			38px;

		min-width:
			38px;

		margin-right:
			auto;

		padding:
			0;

		background-position:
			center;

		background-size:
			32px 32px;
	}


	.main_menu > ul.menu_bar > li > a {
		padding:
			0 9px !important;

		font-size:
			11.5px !important;
	}
}


/* ============================================================
   SOFON PHASE02B FLOATING HEADER END
   ============================================================ */


/* ============================================================
   SOFON PHASE02C UI POLISH START
   ============================================================ */


/* ------------------------------------------------------------
   BRANDING
   ------------------------------------------------------------ */

@media screen and (min-width: 701px) {

	.main_menu > ul.menu_bar::before {
		background-image:
			url("images/sofon-grafika.png") !important;

		background-size:
			36px auto !important;

		background-position:
			7px center !important;
	}


	/* --------------------------------------------------------
	   SECOND SOFON PANEL

	   Important: explicitly fixed.
	   This keeps the original MiniPaint tool/search controls
	   out from behind the new main header.
	   -------------------------------------------------------- */

	.submenu {
		position:
			fixed !important;

		top:
			96px !important;

		left:
			var(--sofon-shell-x) !important;

		right:
			var(--sofon-shell-x) !important;

		width:
			auto !important;

		height:
			44px !important;

		min-height:
			44px !important;

		box-sizing:
			border-box;

		display:
			flex !important;

		align-items:
			center;

		gap:
			8px;

		padding:
			5px 10px !important;

		overflow:
			visible !important;

		background:
			rgba(252, 254, 255, 0.94) !important;

		border:
			1px solid
			rgba(74, 93, 126, 0.14);

		border-radius:
			14px;

		box-shadow:
			0 10px 28px
			rgba(35, 53, 83, 0.10),
			0 1px 0
			rgba(255, 255, 255, 0.92)
			inset !important;

		backdrop-filter:
			blur(18px);

		-webkit-backdrop-filter:
			blur(18px);

		z-index:
			850 !important;
	}


	.submenu > .logo {
		display:
			none !important;
	}


	.submenu > .attributes,
	.submenu #action_attributes {
		flex:
			1 1 auto;

		min-width:
			0;

		margin:
			0 !important;

		background:
			transparent !important;
	}


	.submenu input,
	.submenu select,
	.submenu button,
	.submenu .ui_toggle_button,
	.submenu .ui_number_input {
		border-radius:
			8px !important;
	}


	/*
	 * Global search – MiniPaint creates parts of it dynamically.
	 * These selectors are harmless if a particular variant
	 * does not exist in the current tool state.
	 */

	.submenu #global_search,
	.submenu .global_search,
	.submenu input[id*="global_search"],
	.submenu input[placeholder*="Global"] {
		max-width:
			280px;

		border-radius:
			9px !important;
	}


	#global_search_results {
		border-radius:
			12px !important;

		overflow:
			hidden;

		box-shadow:
			0 16px 40px
			rgba(28, 44, 76, 0.18);
	}


	/*
	 * Workspace starts below both floating panels.
	 */

	.sidebar_left,
	.sidebar_right,
	.middle_area {
		top:
			152px !important;

		bottom:
			32px !important;
	}

}


/* ------------------------------------------------------------
   SVG ICONS IN MAIN MENU
   ------------------------------------------------------------ */

@media screen and (min-width: 701px) {

	.main_menu
	> ul.menu_bar
	> li
	> a::before {

		content:
			"";

		display:
			block;

		width:
			15px;

		height:
			15px;

		flex:
			0 0 15px;

		margin-right:
			7px;

		background:
			currentColor;

		-webkit-mask:
			var(--sofon-menu-icon)
			center / contain
			no-repeat;

		mask:
			var(--sofon-menu-icon)
			center / contain
			no-repeat;
	}


	.main_menu > ul.menu_bar > li:nth-child(1) > a {
		--sofon-menu-icon:
			url("images/sofon-menu/file.svg");
	}

	.main_menu > ul.menu_bar > li:nth-child(2) > a {
		--sofon-menu-icon:
			url("images/sofon-menu/edit.svg");
	}

	.main_menu > ul.menu_bar > li:nth-child(3) > a {
		--sofon-menu-icon:
			url("images/sofon-menu/view.svg");
	}

	.main_menu > ul.menu_bar > li:nth-child(4) > a {
		--sofon-menu-icon:
			url("images/sofon-menu/image.svg");
	}

	.main_menu > ul.menu_bar > li:nth-child(5) > a {
		--sofon-menu-icon:
			url("images/sofon-menu/layers.svg");
	}

	.main_menu > ul.menu_bar > li:nth-child(6) > a {
		--sofon-menu-icon:
			url("images/sofon-menu/effects.svg");
	}

	.main_menu > ul.menu_bar > li:nth-child(7) > a {
		--sofon-menu-icon:
			url("images/sofon-menu/tools.svg");
	}

	.main_menu > ul.menu_bar > li:nth-child(8) > a {
		--sofon-menu-icon:
			url("images/sofon-menu/help.svg");
	}

}


/* ------------------------------------------------------------
   RIGHT SIDEBAR – SOFON GLASS CARDS
   ------------------------------------------------------------ */

.sidebar_right {
	box-sizing:
		border-box;

	padding:
		7px !important;

	background:
		transparent !important;

	box-shadow:
		none !important;
}


.sidebar_right > .block {
	box-sizing:
		border-box;

	margin:
		0 0 8px 0 !important;

	background:
		rgba(249, 252, 255, 0.84) !important;

	border:
		1px solid
		rgba(74, 93, 126, 0.15) !important;

	border-radius:
		13px !important;

	box-shadow:
		0 8px 22px
		rgba(34, 51, 83, 0.09),
		0 1px 0
		rgba(255, 255, 255, 0.85)
		inset !important;

	overflow:
		hidden;

	color:
		#263650 !important;

	backdrop-filter:
		blur(15px);

	-webkit-backdrop-filter:
		blur(15px);
}


.sidebar_right > .block > h2 {
	margin:
		0 !important;

	padding:
		7px 9px !important;

	background:
		linear-gradient(
			135deg,
			rgba(236, 243, 251, 0.92),
			rgba(243, 240, 251, 0.92)
		) !important;

	color:
		#263650 !important;

	font-weight:
		700;

	border-bottom:
		1px solid
		rgba(74, 93, 126, 0.11);

	box-shadow:
		none !important;
}


.sidebar_right > .block > h2::before {
	background:
		linear-gradient(
			180deg,
			#108d8b,
			#5a68cf
		) !important;
}


.sidebar_right .content,
.sidebar_right #toggle_preview,
.sidebar_right #toggle_colors,
.sidebar_right #toggle_info,
.sidebar_right #toggle_details,
.sidebar_right #layers_base {
	background:
		transparent !important;

	color:
		#263650;
}


.sidebar_right input,
.sidebar_right select,
.sidebar_right textarea,
.sidebar_right button {
	border-radius:
		7px !important;
}


/* ------------------------------------------------------------
   LEFT TOOL STRIP
   ------------------------------------------------------------ */

.sidebar_left {
	background:
		rgba(43, 53, 60, 0.88) !important;

	box-shadow:
		6px 0 22px
		rgba(26, 39, 63, 0.10) !important;

	backdrop-filter:
		blur(12px);

	-webkit-backdrop-filter:
		blur(12px);
}


.sidebar_left .item {
	border-radius:
		6px;

	transition:
		background-color 130ms ease,
		transform 130ms ease;
}


.sidebar_left .item:hover {
	background-color:
		rgba(255, 255, 255, 0.13) !important;
}


.sidebar_left .item.active {
	border-radius:
		6px;

	box-shadow:
		0 0 0 1px
		rgba(16, 141, 139, 0.32)
		inset;
}


/* ------------------------------------------------------------
   DIALOGS / EFFECTS / SETTINGS
   ------------------------------------------------------------ */

#popups .popup {
	border-radius:
		16px !important;

	background:
		rgba(250, 252, 255, 0.94) !important;

	backdrop-filter:
		blur(22px);

	-webkit-backdrop-filter:
		blur(22px);
}


#popups .popup .dialog_content,
#popups .popup .params,
#popups .popup table,
#popups .popup tbody,
#popups .popup tr,
#popups .popup td,
#popups .popup th {
	background:
		transparent;
}


#popups .popup input,
#popups .popup select,
#popups .popup textarea,
#popups .popup button {
	border-radius:
		8px !important;
}


#popups .popup .selection_card {
	border-radius:
		10px;

	overflow:
		hidden;
}


/* Alertify messages */

.alertify-notifier .ajs-message {
	background:
		rgba(250, 252, 255, 0.96);

	color:
		#263650;

	border:
		1px solid
		rgba(74, 93, 126, 0.16);

	border-radius:
		11px !important;

	box-shadow:
		0 14px 36px
		rgba(31, 47, 79, 0.18) !important;

	backdrop-filter:
		blur(16px);
}


/* ------------------------------------------------------------
   SOFON FOOTER
   ------------------------------------------------------------ */

#sofon_footer {
	position:
		fixed;

	left:
		0;

	right:
		0;

	bottom:
		0;

	z-index:
		900;

	display:
		flex;

	align-items:
		center;

	justify-content:
		center;

	box-sizing:
		border-box;

	height:
		32px;

	padding:
		0 12px;

	background:
		rgba(248, 251, 254, 0.91);

	border-top:
		1px solid
		rgba(74, 93, 126, 0.11);

	color:
		#617086;

	font-size:
		11px;

	line-height:
		1.2;

	text-align:
		center;

	text-decoration:
		none;

	backdrop-filter:
		blur(14px);

	-webkit-backdrop-filter:
		blur(14px);

	transition:
		color 140ms ease,
		background-color 140ms ease;
}


#sofon_footer:hover {
	color:
		#087978;

	background:
		rgba(248, 253, 253, 0.97);
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media screen and (max-width: 700px) {

	#sofon_footer {
		height:
			28px;

		font-size:
			9px;
	}

	.sidebar_left,
	.sidebar_right,
	.middle_area {
		bottom:
			28px !important;
	}

}


/* ============================================================
   SOFON PHASE02C UI POLISH END
   ============================================================ */


/* ============================================================
   SOFON PHASE02D LAYOUT REFINEMENT START
   ============================================================ */


/* ------------------------------------------------------------
   DESKTOP SAFE AREA
   Keep the floating header away from both tool sidebars.
   ------------------------------------------------------------ */

@media screen and (min-width: 1181px) {

	:root {
		--sofon-header-left-safe: 72px;
		--sofon-header-right-safe: 232px;
	}

	.main_menu {
		left:
			var(--sofon-header-left-safe) !important;

		right:
			var(--sofon-header-right-safe) !important;
	}

	.submenu {
		left:
			var(--sofon-header-left-safe) !important;

		right:
			var(--sofon-header-right-safe) !important;
	}

}


/* Slightly more compact menu on medium desktops */

@media screen
	and (min-width: 1181px)
	and (max-width: 1450px) {

	.main_menu > ul.menu_bar {
		gap:
			4px !important;
	}

	.main_menu > ul.menu_bar > li > a {
		padding:
			0 10px !important;

		font-size:
			12px !important;
	}

	.main_menu > ul.menu_bar::before {
		content:
			"SOFON";

		padding-right:
			8px;
	}

}


/* ------------------------------------------------------------
   SECOND PANEL
   ------------------------------------------------------------ */

@media screen and (min-width: 701px) {

	.submenu {
		overflow:
			hidden !important;
	}

	.submenu #action_attributes {
		display:
			flex;

		align-items:
			center;

		gap:
			5px;

		min-width:
			0;

		overflow-x:
			auto;

		overflow-y:
			hidden;

		scrollbar-width:
			thin;
	}


	/*
	 * Dynamic global search / tool controls.
	 */

	.submenu input,
	.submenu select,
	.submenu button,
	.submenu .ui_toggle_button,
	.submenu .ui_number_input {
		flex-shrink:
			0;
	}

}


/* ------------------------------------------------------------
   LEFT TOOLBAR
   Floating rounded tool cards.
   Icons remain untouched.
   ------------------------------------------------------------ */

@media screen and (min-width: 701px) {

	.sidebar_left {
		box-sizing:
			border-box;

		padding:
			5px 3px !important;

		background:
			transparent !important;

		box-shadow:
			none !important;

		overflow-x:
			hidden !important;

		overflow-y:
			auto !important;

		scrollbar-width:
			none;

		backdrop-filter:
			none !important;

		-webkit-backdrop-filter:
			none !important;
	}

	.sidebar_left::-webkit-scrollbar {
		display:
			none;
	}


	.sidebar_left .item {
		box-sizing:
			border-box;

		margin:
			0 0 4px 0 !important;

		background:
			rgba(43, 53, 60, 0.82) !important;

		border:
			1px solid
			rgba(255, 255, 255, 0.12);

		border-radius:
			8px !important;

		box-shadow:
			0 4px 10px
			rgba(24, 36, 56, 0.10);

		backdrop-filter:
			blur(12px);

		-webkit-backdrop-filter:
			blur(12px);
	}


	.sidebar_left .item:hover {
		background:
			rgba(54, 67, 76, 0.94) !important;

		box-shadow:
			0 6px 14px
			rgba(22, 35, 58, 0.16);
	}


	.sidebar_left .item.active {
		background:
			linear-gradient(
				135deg,
				rgba(16, 141, 139, 0.94),
				rgba(31, 157, 139, 0.94)
			) !important;

		border-color:
			rgba(255, 255, 255, 0.26) !important;

		box-shadow:
			0 5px 15px
			rgba(14, 117, 116, 0.23) !important;
	}

}


/* ------------------------------------------------------------
   RIGHT SIDEBAR
   Make the whole sidebar independently scrollable.
   ------------------------------------------------------------ */

@media screen and (min-width: 701px) {

	.sidebar_right {
		box-sizing:
			border-box;

		top:
			152px !important;

		bottom:
			52px !important;

		overflow-x:
			hidden !important;

		overflow-y:
			auto !important;

		overscroll-behavior:
			contain;

		scrollbar-gutter:
			stable;

		scrollbar-width:
			thin;

		padding-bottom:
			14px !important;
	}


	.sidebar_right::-webkit-scrollbar {
		width:
			7px;
	}


	.sidebar_right::-webkit-scrollbar-thumb {
		background:
			rgba(91, 108, 136, 0.25);

		border-radius:
			999px;
	}


	.sidebar_right::-webkit-scrollbar-track {
		background:
			transparent;
	}


	.sidebar_right > .block {
		flex-shrink:
			0;
	}

}


/* ------------------------------------------------------------
   WORKSPACE
   Reserve room for compact footer.
   ------------------------------------------------------------ */

@media screen and (min-width: 701px) {

	.middle_area,
	.sidebar_left {
		bottom:
			52px !important;
	}


	.main_wrapper {
		overflow:
			auto !important;

		overscroll-behavior:
			contain;
	}

}


/* ------------------------------------------------------------
   COMPACT FLOATING FOOTER
   ------------------------------------------------------------ */

#sofon_footer {
	left:
		50% !important;

	right:
		auto !important;

	bottom:
		10px !important;

	width:
		max-content !important;

	max-width:
		calc(100vw - 32px);

	height:
		auto !important;

	min-height:
		28px;

	padding:
		6px 14px !important;

	transform:
		translateX(-50%);

	border:
		1px solid
		rgba(74, 93, 126, 0.14) !important;

	border-radius:
		999px;

	background:
		rgba(250, 253, 255, 0.93) !important;

	box-shadow:
		0 10px 28px
		rgba(35, 53, 83, 0.12),
		0 1px 0
		rgba(255, 255, 255, 0.92)
		inset;

	white-space:
		nowrap;

	backdrop-filter:
		blur(18px);

	-webkit-backdrop-filter:
		blur(18px);
}


#sofon_footer:hover {
	background:
		rgba(250, 255, 254, 0.98) !important;

	box-shadow:
		0 12px 32px
		rgba(23, 77, 75, 0.14);
}


@media screen and (max-width: 700px) {

	#sofon_footer {
		bottom:
			6px !important;

		max-width:
			calc(100vw - 16px);

		padding:
			5px 10px !important;

		white-space:
			normal;
	}

}


/* ============================================================
   SOFON PHASE02D LAYOUT REFINEMENT END
   ============================================================ */


/* ============================================================
   SOFON PHASE02E WORKSPACE LAYOUT START

   Fix:
   - remove artificial vertical offset from middle_area
   - move whole original MiniPaint grid below SOFON headers
   - keep workspace above floating footer
   - give canvas real breathing room
   ============================================================ */


@media screen and (min-width: 701px) {

	/*
	 * Both floating SOFON panels end around 140 px.
	 *
	 * Instead of moving individual grid children with top:152px,
	 * move the whole original MiniPaint application grid.
	 */

	.wrapper {
		position:
			fixed !important;

		top:
			154px !important;

		right:
			0 !important;

		bottom:
			52px !important;

		left:
			0 !important;

		height:
			auto !important;

		display:
			grid !important;

		grid-template-rows:
			minmax(0, 1fr) !important;

		grid-template-columns:
			auto minmax(0, 1fr) auto !important;

		grid-template-areas:
			"sidebar_left main sidebar_right" !important;

		overflow:
			hidden !important;
	}


	/*
	 * submenu is fixed independently and therefore must not
	 * reserve a row in the MiniPaint grid.
	 */

	.submenu {
		grid-area:
			unset !important;
	}


	/*
	 * Remove offsets introduced in Phase02c / Phase02d.
	 *
	 * middle_area is position:relative in original MiniPaint,
	 * therefore top:152px physically shifted the whole canvas.
	 */

	.middle_area,
	.sidebar_left,
	.sidebar_right {
		top:
			auto !important;

		bottom:
			auto !important;

		min-height:
			0 !important;
	}


	.middle_area {
		position:
			relative !important;

		align-self:
			stretch;

		border-top:
			0 !important;

		min-width:
			0 !important;
	}


	/*
	 * Left tools now occupy exactly the available grid height.
	 */

	.sidebar_left {
		align-self:
			stretch !important;

		height:
			auto !important;

		max-height:
			none !important;

		min-height:
			0 !important;

		margin-top:
			0 !important;

		margin-bottom:
			0 !important;
	}


	/*
	 * Right cards get the same actual desktop working height.
	 */

	.sidebar_right {
		align-self:
			stretch !important;

		height:
			auto !important;

		max-height:
			none !important;

		min-height:
			0 !important;

		margin-top:
			0 !important;

		margin-bottom:
			0 !important;

		padding-bottom:
			8px !important;

		overflow-y:
			auto !important;
	}


	/*
	 * Canvas workspace.
	 *
	 * Do not transform or scale canvas via CSS.
	 * MiniPaint keeps full control over actual zoom and dimensions.
	 */

	.main_wrapper {
		position:
			absolute !important;

		top:
			0 !important;

		right:
			0 !important;

		bottom:
			0 !important;

		left:
			0 !important;

		box-sizing:
			border-box;

		display:
			flex !important;

		justify-content:
			center !important;

		align-items:
			flex-start !important;

		padding:
			18px !important;

		overflow:
			auto !important;

		overscroll-behavior:
			contain;
	}


	/*
	 * Prevent canvas wrapper from being flex-shrunk.
	 */

	.canvas_wrapper {
		flex:
			0 0 auto;
	}


	/*
	 * Preserve MiniPaint ruler mode.
	 */

	.middle_area.has-ruler .main_wrapper {
		top:
			20px !important;

		left:
			20px !important;
	}

}


/* Slightly smaller workspace gap on lower-height desktop screens */

@media screen
	and (min-width: 701px)
	and (max-height: 760px) {

	.wrapper {
		top:
			148px !important;

		bottom:
			46px !important;
	}

	.main_wrapper {
		padding:
			12px !important;
	}

}


/* ============================================================
   SOFON PHASE02E WORKSPACE LAYOUT END
   ============================================================ */


/* ============================================================
   SOFON PHASE02F SEAMLESS BACKDROP START

   One continuous application background.
   Floating menus/cards remain visually independent,
   but no separate horizontal background bands remain.
   ============================================================ */

html,
body {
	min-height:
		100%;

	background:
		radial-gradient(
			circle at 12% 10%,
			rgba(91, 145, 255, 0.14),
			transparent 34%
		),
		radial-gradient(
			circle at 88% 82%,
			rgba(135, 90, 226, 0.12),
			transparent 36%
		),
		linear-gradient(
			135deg,
			#eaf1f8 0%,
			#edf0fa 52%,
			#eeeaf7 100%
		) !important;

	background-attachment:
		fixed !important;
}


/*
 * Earlier SOFON phases gave these containers
 * their own gradients. They now reveal the single
 * body background instead.
 */

.wrapper,
.middle_area,
.main_wrapper {
	background:
		transparent !important;

	background-color:
		transparent !important;
}


/*
 * Remove any separator-like remnants.
 */

.wrapper,
.middle_area {
	border:
		0 !important;

	box-shadow:
		none !important;
}


/*
 * Slightly tighten the vertical composition.
 *
 * Main menu:
 *   ~18–82 px
 *
 * tool options:
 *   ~96–140 px
 *
 * workspace now begins at 148 px.
 */

@media screen and (min-width: 701px) {

	.wrapper {
		top:
			148px !important;

		bottom:
			46px !important;
	}


	.main_wrapper {
		padding:
			10px 18px 18px 18px !important;
	}

}


/* ============================================================
   SOFON PHASE02F SEAMLESS BACKDROP END
   ============================================================ */