.mc-btn:active,
		.chip:active,
		.preset-btn:active,
		.item-cell:active {
			transform: scale(0.95);
			transition: transform 0.05s;
		}


		@media (hover: none) {

			.mc-btn:hover,
			.chip:hover,
			.preset-btn:hover,
			.item-cell:hover {
				transform: none;
			}

			.mc-btn:active {
				transform: scale(0.95);
			}
		}

		@media (max-width: 768px) {
			::-webkit-scrollbar {
				width: 4px;
				height: 4px;
			}

			.item-grid,
			.ench-pool,
			.preview-panel {
				scrollbar-width: thin;
			}
		}

		@media (max-width: 768px) {

			.input,
			.select,
			.textarea {
				font-size: 16px;
			}
		}

		@media (pointer: coarse) {
			.mc-btn {
				min-height: 44px;
				padding: 12px 16px;
			}

			.chip {
				min-height: 36px;
				padding: 8px 12px;
			}

			.preset-btn {
				min-height: 40px;
				padding: 10px 12px;
			}

			.item-cell {
				min-height: 44px;
				min-width: 44px;
			}

			.input,
			.select {
				min-height: 40px;
				font-size: 16px;

			}

			@media (max-width: 480px) {
				.mc-banner {
					height: 160px;

				}
			}


			@media (max-width: 768px) {
				::-webkit-scrollbar {
					width: 4px;
					height: 4px;
				}

				.item-grid,
				.ench-pool,
				.preview-panel {
					scrollbar-width: thin;
				}
			}


			@media (hover: none) {

				.mc-btn:hover,
				.chip:hover,
				.preset-btn:hover,
				.item-cell:hover {
					transform: none;
				}

				.mc-btn:active {
					transform: scale(0.95);
				}
			}

			@media (max-width: 768px) and (min-width: 481px) {
				.mc-banner {
					height: 200px;
				}
			}
		}

		@media (max-width: 920px) {
			.preview-panel {
				position: relative;

				top: 0;
				height: auto;
				border-left: none;
				border-top: 3px solid var(--bd-dark);
				order: -1;
				max-height: 50vh;

				overflow-y: auto;
			}
		}


		@media (max-width: 480px) {
			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
				gap: 4px;
				max-height: 200px;
			}
		}


		@media (max-width: 480px) {
			.header {
				padding: 10px 12px;
				flex-direction: column;
				align-items: stretch;
				gap: 8px;
			}

			.header-left {
				justify-content: center;
			}

			.title {
				font-size: 9px;
			}

			.header-controls {
				justify-content: center;
			}

			.controls-panel {
				padding: 10px;
			}

			.preview-panel {
				padding: 10px;
			}

			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
				gap: 4px;
				max-height: 200px;
			}

			.section-body {
				padding: 10px;
				gap: 10px;
			}

			.options-grid {
				grid-template-columns: 1fr;
			}

			.preset-grid {
				grid-template-columns: 1fr 1fr;
			}

			.edition-btn {
				padding: 6px 10px;
				font-size: 11px;
			}

			.version-select {
				font-size: 11px;
				padding: 6px 24px 6px 8px;
			}

			.command-box {
				font-size: 13px;
				padding: 10px;
				min-height: 60px;
			}

			.tooltip-preview {
				padding: 8px;
				min-height: 50px;
			}
		}


		@media (min-width: 481px) and (max-width: 768px) {
			.title {
				font-size: 11px;
			}

			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
			}
		}


		@media (min-width: 769px) and (max-width: 920px) {
			.controls-panel {
				padding: 16px;
			}

			.preview-panel {
				padding: 16px;
			}
		}


		@media (min-width: 1200px) {
			.controls-panel {
				padding: 28px;
			}

			.preview-panel {
				padding: 28px;
			}

			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
				gap: 8px;
				max-height: 400px;
			}
		}

		:root {
			--bg-deep: rgba(26, 26, 30, 1);
			--bg-stone: rgba(38, 40, 44, 1);
			--bg-panel: rgba(38, 40, 44, 1);
			--bg-inset: rgba(24, 25, 28, 1);
			--bg-deep-dark: rgba(16, 16, 19, 1);
			--bd-dark: rgba(10, 11, 12, 1);
			--bd-light: rgba(58, 61, 66, 1);
			--bd-glow: rgba(74, 78, 84, 1);
			--txt: rgba(232, 230, 227, 1);
			--txt-alt: rgba(154, 155, 159, 1);
			--txt-dim: rgba(107, 108, 112, 1);
			--amber: rgba(252, 211, 77, 1);
			--amber-glow: rgba(252, 211, 77, 0.4);
			--red: rgba(239, 68, 68, 1);
			--grn: rgba(34, 197, 94, 1);
			--blue: rgba(59, 130, 246, 1);
			--cyan: rgba(34, 211, 238, 1);
			--gold: rgba(251, 191, 36, 1);
			--purp: rgba(192, 132, 252, 1);
			--pink: rgba(232, 121, 249, 1)
		}

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

		body {
			font-family: 'Rubik', sans-serif;
			color: var(--txt);
			min-height: 100vh;
			overflow-x: hidden;
			background-color: rgba(18, 18, 22, 1);
			background-image: linear-gradient(rgba(18, 18, 22, 0.35), rgba(18, 18, 22, 0.35)), url("https://minecraft.wiki/images/BlockSprite_deepslate-tiles.png?7cf18");
			background-repeat: repeat;
			background-size: 32px 32px, 32px 32px;
			background-attachment: fixed;
			image-rendering: pixelated;
		}

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

		::-webkit-scrollbar-track {
			background: var(--bg-inset);
		}

		::-webkit-scrollbar-thumb {
			background: var(--bd-light);
			border: 2px solid var(--bg-inset);
		}

		::-webkit-scrollbar-thumb:hover {
			background: var(--bd-glow);
		}

		.header {
			background: linear-gradient(180deg, rgba(44, 46, 50, 1), var(--bg-stone));
			border-bottom: 3px solid var(--bd-dark);
			padding: 14px 24px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-wrap: wrap;
			gap: 12px;
			position: sticky;
			top: 0;
			z-index: 100;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
		}

		.header::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -3px;
			height: 3px;
			background: linear-gradient(90deg, transparent, var(--amber) 20%, var(--cyan) 50%, var(--purp) 80%, transparent);
			background-size: 200% 100%;
			opacity: .55;
			animation: rainbowPulse 3s ease-in-out infinite, rainbowSlide 6s linear infinite;
		}

		@keyframes rainbowPulse {

			0%,
			100% {
				opacity: .35;
			}

			50% {
				opacity: .9;
			}
		}

		@keyframes rainbowSlide {
			0% {
				background-position: 0% 50%;
			}

			100% {
				background-position: 200% 50%;
			}
		}

		.mc-banner {
			position: relative;
			width: 100%;
			max-width: 1440px;
			margin: 0 auto;
			height: 280px;
			overflow: hidden;
			border-bottom: 3px solid var(--bd-dark);
			box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
			background: linear-gradient(180deg, #6fa8dc 0%, #8ec5e8 45%, #b6e0f0 100%);
		}

		#terrainCanvas {
			display: block;
			width: 100%;
			height: 100%;
		}

		.banner-fade {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 70px;
			background: linear-gradient(180deg, transparent, var(--bg-deep));
			pointer-events: none;
			z-index: 2;
		}

		.header-left {
			display: flex;
			align-items: center;
			gap: 14px;
		}

		.logo {
			width: 46px;
			height: 46px;
			border: 3px solid var(--bd-dark);
			border-radius: 6px;
			background: #080a0c;
			box-shadow: 0 0 14px rgba(0, 255, 255, 0.45);
			animation: logoPulse 2.4s ease-in-out infinite;
			flex-shrink: 0;
		}

		@keyframes logoPulse {

			0%,
			100% {
				box-shadow: 0 0 8px rgba(0, 255, 255, 0.35), 0 0 0 rgba(0, 255, 255, 0);
			}

			50% {
				box-shadow: 0 0 16px rgba(0, 255, 255, 0.7), 0 0 26px rgba(0, 255, 255, 0.3);
			}
		}

		.title {
			font-family: 'Press Start 2P', monospace;
			font-size: 14px;
			color: var(--amber);
			text-shadow: 0 0 12px var(--amber-glow), 2px 2px 0 var(--bd-dark);
			line-height: 1.5;
		}

		.title span {
			color: var(--txt);
		}

		.version-select {
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			color: var(--amber);
			padding: 8px 30px 8px 12px;
			font-family: 'Rubik', sans-serif;
			font-size: 13px;
			font-weight: 600;
			cursor: pointer;
			outline: none;
			appearance: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23fcd34d'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 10px center;
		}

		.version-select:focus {
			border-color: var(--amber);
		}

		.header-controls {
			display: flex;
			align-items: center;
			gap: 10px;
			flex-wrap: wrap;
		}

		.edition-toggle {
			display: inline-flex;
			position: relative;
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			background: var(--bg-inset);
			overflow: hidden;
		}

		.edition-slider {
			position: absolute;
			top: 0;
			left: 0;
			width: 50%;
			height: 100%;
			background: linear-gradient(135deg, var(--amber), rgba(245, 158, 11, 1));
			box-shadow: 0 0 14px var(--amber-glow);
			transform: translateX(0);
			transition: transform .4s cubic-bezier(.65, .05, .36, 1);
			z-index: 0;
		}

		.edition-toggle.bedrock-active .edition-slider {
			transform: translateX(100%);
		}

		.edition-btn {
			position: relative;
			z-index: 1;
			background: transparent;
			border: none;
			color: var(--txt-dim);
			padding: 8px 14px;
			font-family: 'Rubik', sans-serif;
			font-size: 13px;
			font-weight: 600;
			cursor: pointer;
			outline: none;
			transition: color .35s ease;
		}

		.edition-btn:hover {
			color: var(--amber);
		}

		.edition-btn.active {
			color: var(--bg-deep);
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
		}

		.main {
			display: grid;
			grid-template-columns: 1fr 440px;
			gap: 0;
			max-width: 1440px;
			margin: 0 auto;
		}

		.controls-panel {
			padding: 20px;
			display: flex;
			flex-direction: column;
			gap: 16px;
		}

		.preview-panel {
			position: sticky;
			top: 74px;
			height: calc(100vh - 74px);
			padding: 20px;
			border-left: 3px solid var(--bd-dark);
			background: #26282ceb;
			display: flex;
			flex-direction: column;
			overflow-y: auto
		}

		.section {
			background: var(--bg-panel);
			border: 3px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			overflow: hidden;
		}

		.section-header {
			padding: 11px 16px;
			background: var(--bg-inset);
			border-bottom: 2px solid var(--bd-dark);
			display: flex;
			align-items: center;
			gap: 10px;
			cursor: pointer;
			user-select: none;
			transition: background .15s;
		}

		.section-header:hover {
			background: linear-gradient(90deg, rgba(252, 211, 77, 0.08), rgba(30, 32, 36, 1) 60%);
		}

		.section-header::before {
			content: "";
			width: 3px;
			height: 16px;
			background: var(--amber);
			box-shadow: 0 0 6px var(--amber-glow);
			opacity: .5;
			transition: opacity .15s, height .15s;
		}

		.section-header:hover::before {
			opacity: 1;
			height: 20px;
		}

		.section.collapsed .section-header::before {
			opacity: .3;
		}

		.section-title {
			font-family: 'Press Start 2P', monospace;
			font-size: 10px;
			color: var(--amber);
			text-transform: uppercase;
			letter-spacing: 1px;
			flex: 1;
		}

		.section-chevron {
			color: var(--txt-dim);
			font-size: 14px;
			transition: transform .2s;
			font-family: 'VT323', monospace;
		}

		.section.collapsed .section-chevron {
			transform: rotate(-90deg);
		}

		.section-body {
			padding: 16px;
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.section.collapsed .section-body {
			display: none;
		}

		.field {
			display: flex;
			flex-direction: column;
			gap: 6px;
		}

		.label {
			font-size: 11px;
			font-weight: 600;
			color: var(--txt-alt);
			text-transform: uppercase;
			letter-spacing: .8px;
		}

		.input,
		.select,
		.textarea {
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			color: var(--txt);
			padding: 8px 12px;
			font-family: 'Rubik', sans-serif;
			font-size: 14px;
			outline: none;
			transition: border-color .15s, box-shadow .15s;
			width: 100%;
		}

		.input:focus,
		.select:focus,
		.textarea:focus {
			border-color: var(--amber);
			box-shadow: inset 0 0 0 1px var(--amber), 0 0 8px var(--amber-glow);
		}

		.textarea {
			resize: vertical;
			min-height: 60px;
			font-family: 'VT323', monospace;
			font-size: 16px;
			line-height: 1.3;
		}

		.select {
			appearance: none;
			cursor: pointer;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239a9b9f'%3E%3Cpath d='M6 9L1 4h10z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 10px center;
			padding-right: 30px;
		}

		.mc-btn {
			font-family: 'Rubik', sans-serif;
			font-weight: 600;
			font-size: 13px;
			padding: 8px 16px;
			background: var(--bg-inset);
			color: var(--txt);
			border: 2px solid var(--bd-dark);
			box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.12);
			cursor: pointer;
			transition: all .1s;
			letter-spacing: .5px;
			text-transform: uppercase;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			user-select: none;
		}

		.mc-btn:hover {
			background: var(--bd-light);
			color: var(--amber);
		}

		.mc-btn:active {
			box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.4), inset -2px -2px 0 rgba(255, 255, 255, 0.12);
			transform: translateY(1px);
		}

		.mc-btn.primary {
			background: var(--grn);
			color: var(--bg-deep);
			box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.18);
		}

		.mc-btn.primary:hover {
			background: #16a34a;
			color: var(--bg-deep);
			box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.18), 0 0 14px rgba(34, 197, 94, 0.5);
		}

		.mc-btn.danger {
			color: var(--red);
		}

		.mc-btn.danger:hover {
			background: rgba(239, 68, 68, 0.149);
			box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.12), 0 0 10px rgba(239, 68, 68, 0.3);
		}

		.mc-btn.amber {
			background: var(--amber);
			color: var(--bg-deep);
			box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.2);
		}

		.mc-btn.amber:hover {
			background: rgba(245, 158, 11, 1);
			box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.2), 0 0 14px var(--amber-glow);
		}

		.mc-btn:disabled {
			opacity: .4;
			cursor: not-allowed;
		}

		.btn-sm {
			padding: 5px 10px;
			font-size: 11px;
		}

		.search-row {
			display: flex;
			gap: 8px;
			margin-bottom: 10px;
		}

		.category-chips {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
			margin-bottom: 12px;
		}

		.chip {
			font-size: 11px;
			font-weight: 600;
			padding: 5px 10px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			color: var(--txt-alt);
			cursor: pointer;
			transition: all .15s;
			text-transform: uppercase;
			letter-spacing: .5px;
		}

		.chip:hover {
			border-color: var(--bd-light);
			color: var(--txt);
		}

		.chip.active {
			background: var(--blue);
			color: rgba(255, 255, 255, 1);
			border-color: var(--blue);
		}

		.item-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
			gap: 6px;
			max-height: 300px;
			overflow-y: auto;
			padding: 6px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
		}

		.item-cell {
			width: 100%;
			aspect-ratio: 1;
			background: var(--bg-panel);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 1px 1px 0 var(--bd-light);
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: all .12s;
			position: relative;
		}

		.item-cell:hover {
			border-color: var(--amber);
			box-shadow: inset 1px 1px 0 var(--amber-glow), 0 0 8px var(--amber-glow);
			transform: scale(1.06);
			z-index: 2;
		}

		.item-cell.selected {
			border-color: var(--grn);
			box-shadow: inset 0 0 0 1px var(--grn), 0 0 10px rgba(34, 197, 94, 0.35);
			background: rgba(34, 197, 94, 0.1);
		}

		.item-cell img {
			image-rendering: pixelated;
			width: 32px;
			height: 32px;
			pointer-events: none;
		}

		.item-cell .fallback {
			font-size: 20px;
			font-weight: bold;
			color: var(--amber);
		}

		.item-tooltip {
			position: absolute;
			bottom: calc(100% + 6px);
			left: 50%;
			transform: translateX(-50%);
			background: var(--bg-deep-dark);
			border: 2px solid var(--bd-dark);
			padding: 4px 8px;
			font-size: 11px;
			white-space: nowrap;
			pointer-events: none;
			opacity: 0;
			transition: opacity .15s;
			z-index: 10;
			color: var(--amber);
		}

		.item-cell:hover .item-tooltip {
			opacity: 1;
		}

		.selected-item {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 10px 12px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
		}

		.selected-item-icon {
			width: 40px;
			height: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--bg-panel);
			border: 2px solid var(--bd-dark);
		}

		.selected-item-icon img {
			image-rendering: pixelated;
			width: 32px;
			height: 32px;
		}

		.selected-item-info {
			flex: 1;
		}

		.selected-item-name {
			font-size: 14px;
			font-weight: 600;
			color: var(--amber);
		}

		.selected-item-id {
			font-size: 14px;
			color: var(--txt-dim);
			font-family: 'VT323', monospace;
		}

		.toggle-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
		}

		.toggle-label {
			font-size: 13px;
			color: var(--txt)
		}

		.toggle {
			position: relative;
			width: 44px;
			height: 24px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			cursor: pointer;
			transition: background .2s;
			flex-shrink: 0;
		}

		.toggle::after {
			content: '';
			position: absolute;
			width: 16px;
			height: 16px;
			background: var(--txt-dim);
			top: 2px;
			left: 2px;
			transition: all .2s;
		}

		.toggle.on {
			background: rgba(34, 197, 94, 0.2);
			box-shadow: inset 0 0 0 1px var(--grn);
		}

		.toggle.on::after {
			left: 22px;
			background: var(--grn);
		}

		.target-presets {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 6px;
			margin-top: 6px;
		}

		.preset-btn {
			display: flex;
			align-items: center;
			gap: 6px;
			font-family: 'Rubik', sans-serif;
			font-size: 13px;
			padding: 7px 10px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			color: var(--txt-alt);
			cursor: pointer;
			transition: all .14s;
			text-align: left;
		}

		.preset-btn .sel-code {
			font-family: 'VT323', monospace;
			font-size: 17px;
			color: var(--amber);
			line-height: 1;
		}

		.preset-btn .sel-mean {
			font-size: 11px;
			color: var(--txt-dim);
		}

		.preset-btn:hover {
			color: var(--amber);
			border-color: var(--bd-light);
			transform: translateY(-1px);
		}

		.preset-btn:hover .sel-mean {
			color: var(--txt-alt);
		}

		.preset-btn.active {
			background: linear-gradient(135deg, var(--blue), rgba(37, 99, 235, 1));
			color: rgba(255, 255, 255, 1);
			border-color: var(--blue);
			box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
		}

		.preset-btn.active .sel-code {
			color: rgba(255, 255, 255, 1);
		}

		.preset-btn.active .sel-mean {
			color: rgba(255, 255, 255, 0.85);
		}

		.count-input {
			width: 80px;
			text-align: center;
			font-family: 'VT323', monospace;
			font-size: 18px;
		}

		.filters-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
		}

		.filters-grid .field {
			gap: 4px;
		}

		.filters-grid .input {
			padding: 6px 8px;
			font-size: 13px;
		}

		.filters-grid .label {
			font-size: 10px;
		}

		.ench-bar {
			display: flex;
			gap: 8px;
			align-items: center;
			flex-wrap: wrap;
		}

		.ench-search {
			flex: 1;
		}

		.ench-pool {
			display: flex;
			flex-direction: column;
			gap: 4px;
			max-height: 200px;
			overflow-y: auto;
			padding: 6px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
		}

		.ench-pool-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			padding: 6px 10px;
			background: var(--bg-panel);
			border: 1px solid var(--bd-dark);
			cursor: pointer;
			transition: all .12s;
			font-size: 13px;
		}

		.ench-pool-item:hover {
			border-color: var(--amber);
			color: var(--amber);
		}

		.ench-pool-item.relevant::before {
			content: '';
			width: 6px;
			height: 6px;
			background: var(--grn);
			border-radius: 50%;
			flex-shrink: 0;
			margin-right: 2px;
		}

		.ench-pool-item.added {
			opacity: .4;
			pointer-events: none;
		}

		.ench-list {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.ench-row {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 10px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			animation: enchAppear .2s ease;
		}

		@keyframes enchAppear {
			from {
				opacity: 0;
				transform: translateY(-8px);
			}

			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.ench-name {
			flex: 1;
			font-size: 13px;
			color: var(--txt);
		}

		.ench-name.curse {
			color: var(--red);
		}

		.ench-lvl {
			width: 56px;
			text-align: center;
			font-family: 'VT323', monospace;
			font-size: 18px;
			padding: 4px;
		}

		.ench-remove {
			background: none;
			border: none;
			color: var(--red);
			font-size: 18px;
			cursor: pointer;
			padding: 0 4px;
			opacity: .6;
			transition: opacity .15s;
		}

		.ench-remove:hover {
			opacity: 1;
		}

		.potion-color-row {
			display: flex;
			gap: 8px;
			align-items: center;
		}

		.potion-color-picker {
			width: 44px;
			height: 38px;
			padding: 2px;
			cursor: pointer;
			flex: none;
		}

		.potion-color-dec {
			flex: 1;
		}

		.potion-swatch {
			display: inline-block;
			width: 12px;
			height: 12px;
			vertical-align: middle;
			margin-right: 6px;
			border: 1px solid var(--bd-dark);
		}

		.color-picker {
			display: flex;
			flex-wrap: wrap;
			gap: 4px;
			margin-top: 4px;
		}

		.color-swatch {
			width: 22px;
			height: 22px;
			border: 2px solid var(--bd-dark);
			cursor: pointer;
			transition: transform .1s;
			image-rendering: pixelated;
		}

		.color-swatch:hover {
			transform: scale(1.15);
		}

		.color-swatch.active {
			box-shadow: 0 0 0 2px var(--amber);
		}

		.color-select {
			padding: 5px 8px;
			font-size: 12px;
			width: auto;
			min-width: 120px;
		}

		.format-btns {
			display: flex;
			gap: 4px;
			flex-wrap: wrap;
			margin-top: 4px;
		}

		.fmt-btn {
			font-family: 'Rubik', sans-serif;
			font-size: 11px;
			padding: 4px 9px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			color: var(--txt-alt);
			cursor: pointer;
			transition: all .12s;
			font-weight: 600;
		}

		.fmt-btn:hover {
			color: var(--txt);
			border-color: var(--bd-light);
		}

		.fmt-btn.active {
			background: var(--amber);
			color: var(--bg-deep);
			border-color: var(--amber);
		}

		.lore-card {
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			padding: 8px;
			display: flex;
			flex-direction: column;
			gap: 6px;
		}

		.lore-line-top {
			display: flex;
			gap: 6px;
			align-items: center;
		}

		.lore-line-top .input {
			flex: 1;
		}

		.lore-line-fmt {
			display: flex;
			gap: 6px;
			align-items: center;
			flex-wrap: wrap;
		}

		.lore-remove {
			width: 34px;
			background: var(--bg-panel);
			border: 2px solid var(--bd-dark);
			color: var(--red);
			cursor: pointer;
			font-size: 16px;
			flex-shrink: 0;
		}

		.lore-remove:hover {
			background: rgba(239, 68, 68, 0.15);
		}

		.options-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
		}

		.import-status {
			font-size: 12px;
			padding: 6px 10px;
			border-left: 3px solid var(--txt-dim);
			line-height: 1.5
		}

		.import-status.ok {
			color: var(--grn);
			border-color: var(--grn);
			background: rgba(34, 197, 94, .08);
		}

		.import-status.err {
			color: var(--red);
			border-color: var(--red);
			background: rgba(239, 68, 68, .08);
		}

		.preview-title {
			font-family: 'Press Start 2P', monospace;
			font-size: 10px;
			color: var(--cyan);
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 10px;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.preview-title::before {
			content: '';
			width: 8px;
			height: 8px;
			background: var(--grn);
			border-radius: 50%;
			box-shadow: 0 0 8px var(--grn);
			animation: pulse 1.5s infinite;
		}

		@keyframes pulse {

			0%,
			100% {
				opacity: 1;
			}

			50% {
				opacity: .4;
			}
		}

		.version-badge {
			display: inline-block;
			padding: 4px 10px;
			background: var(--bg-inset);
			border: 1px solid var(--bd-light);
			color: var(--amber);
			margin-bottom: 12px;
			font-family: 'VT323', monospace;
			font-size: 15px;
			align-self: flex-start;
		}

		.tooltip-preview {
			background: #100010;
			border: 2px solid #28034f;
			box-shadow: inset 0 0 0 2px #5a2880, 0 0 0 1px #000;
			padding: 10px 12px;
			min-height: 70px;
			margin-bottom: 14px;
			image-rendering: pixelated;
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

		.tt-empty {
			color: rgba(122, 122, 122, 1);
			font-style: italic;
			font-size: 13px;
		}

		.tt-icon {
			width: 32px;
			height: 32px;
			image-rendering: pixelated;
			margin-bottom: 4px;
		}

		.tt-name {
			font-size: 15px;
			font-weight: 600;
			display: block;
			line-height: 1.3;
		}

		.tt-ench {
			font-size: 13px;
			color: #9a8b6a;
			font-style: italic;
			display: block;
			line-height: 1.3;
		}

		.tt-ench.curse {
			color: rgba(239, 83, 80, 1);
		}

		.tt-lore {
			font-size: 13px;
			display: block;
			line-height: 1.3;
		}

		.tt-mod {
			font-size: 13px;
			color: #aaa;
			display: block;
			line-height: 1.3;
		}

		.preview-subtitle {
			font-family: 'Press Start 2P', monospace;
			font-size: 9px;
			color: var(--txt2);
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 8px;
		}

		.command-box {
			background: var(--bg-deeper);
			border: 3px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light), inset 0 0 20px rgba(0, 0, 0, .5);
			padding: 14px;
			font-family: 'VT323', monospace;
			font-size: 17px;
			line-height: 1.5;
			overflow: auto;
			white-space: pre-wrap;
			word-break: break-all;
			position: relative;
			min-height: 90px;
			flex: 1;
		}

		.command-box .ph {
			color: var(--txt3);
			font-style: italic;
			font-size: 15px;
		}

		.command-box.flash {
			animation: cmdFlash .45s ease;
		}

		@keyframes cmdFlash {
			0% {
				opacity: .25;
				box-shadow: inset 0 0 0 1px var(--bd-light), inset 0 0 20px rgba(0, 0, 0, .5), 0 0 0 3px var(--amber);
			}

			100% {
				opacity: 1;
				box-shadow: inset 0 0 0 1px var(--bd-light), inset 0 0 20px rgba(0, 0, 0, .5);
			}
		}

		.tok-cmd {
			color: var(--amber);
			font-weight: bold;
		}

		.tok-sel {
			color: var(--blue);
		}

		.tok-item {
			color: var(--cyan);
		}

		.tok-prop {
			color: var(--grn);
		}

		.tok-str {
			color: var(--gold);
		}

		.tok-num {
			color: var(--purp);
		}

		.tok-kw {
			color: var(--pink);
		}

		.tok-punct {
			color: var(--txt3);
		}

		.preview-actions {
			display: flex;
			gap: 8px;
			margin-top: 12px;
		}

		.preview-actions .mc-btn {
			flex: 1;
		}

		.toast {
			position: fixed;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%) translateY(120px);
			background: var(--grn);
			color: var(--bg-deep);
			padding: 12px 24px;
			font-weight: 700;
			font-size: 14px;
			border: 3px solid var(--bd-dark);
			box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
			transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
			z-index: 1000;
		}

		.toast.show {
			transform: translateX(-50%) translateY(0);
		}

		.toast.err {
			background: var(--red);
			color: rgba(255, 255, 255, 1);
		}

		.info-note {
			font-size: 12px;
			color: var(--txt3);
			padding: 8px 10px;
			background: var(--bg-inset);
			border-left: 3px solid var(--blue);
			line-height: 1.5;
		}

		.preset-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
		}

		.surprise-btn {
			width: 100%;
			padding: 14px;
			font-family: 'Press Start 2P', monospace;
			font-size: 11px;
			letter-spacing: 1px;
			position: relative;
			overflow: hidden;
			animation: surprisePulse 2.2s ease-in-out infinite;
		}

		@keyframes surprisePulse {

			0%,
			100% {
				box-shadow: 0 0 0 0 var(--amber-glow), inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.12);
			}

			50% {
				box-shadow: 0 0 18px 3px var(--amber-glow), inset -2px -2px 0 rgba(0, 0, 0, 0.4), inset 2px 2px 0 rgba(255, 255, 255, 0.12);
			}
		}

		.surprise-btn:active {
			animation: none;
		}

		.rand-options {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px;
		}

		.rand-result {
			padding: 10px 12px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			font-size: 13px;
			display: flex;
			align-items: center;
			gap: 8px;
			flex-wrap: wrap;
			animation: enchAppear .2s ease;
		}

		.rand-result-label {
			color: var(--txt-alt);
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: .8px;
		}

		.rand-result-name {
			font-weight: 700;
		}

		.rand-result-count {
			color: var(--txt-alt);
			font-size: 12px;
		}

		.attr-mod-row {
			display: grid;
			grid-template-columns: 1.3fr 1fr 1.2fr .8fr auto;
			gap: 6px;
			align-items: center;
			padding: 6px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			animation: enchAppear .2s ease;
		}

		.attr-mod-row .select,
		.attr-mod-row .input {
			padding: 5px 8px;
			font-size: 12px;
		}

		.attr-mod-remove {
			background: var(--bg-panel);
			border: 2px solid var(--bd-dark);
			color: var(--red);
			cursor: pointer;
			font-size: 14px;
			padding: 5px 8px;
			flex-shrink: 0;
		}

		.attr-mod-remove:hover {
			background: rgba(239, 68, 68, .15);
		}

		.sub-fields {
			display: flex;
			flex-direction: column;
			gap: 8px;
			padding: 8px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			margin-top: 6px;
		}

		.adv-label {
			font-size: 12px;
			font-weight: 600;
			color: var(--amber);
			text-transform: uppercase;
			letter-spacing: .5px;
			margin-top: 4px;
			padding-bottom: 2px;
			border-bottom: 1px solid var(--bd-dark);
		}

		.adv-label.bedrock-only {
			color: var(--cyan);
			border-bottom-color: rgba(34, 211, 238, 0.3);
		}

		#bedrock-options {
			padding: 8px;
			margin-top: 6px;
		}


		body.edition-bedrock .java-only {
			display: none !important;
		}

		body.edition-java .bedrock-only {
			display: none !important;
		}


		body.edition-bedrock #sec-presets,
		body.edition-bedrock #sec-random,
		body.edition-bedrock #sec-enchant,
		body.edition-bedrock #sec-name,
		body.edition-bedrock #sec-options,
		body.edition-bedrock .bedrock-hide {
			display: none !important;
		}

		.kv-add-row {
			display: flex;
			gap: 6px;
			align-items: center;
		}

		.kv-add-row .input,
		.kv-add-row .select {
			flex: 1;
			min-width: 0;
		}

		.kv-row {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 10px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			animation: enchAppear .2s ease;
		}

		.kv-row .kv-key {
			flex: 1;
			font-size: 13px;
			color: var(--cyan);
		}

		.kv-row .kv-eq {
			color: var(--txt-dim);
			font-size: 12px;
		}

		.kv-row .kv-val {
			flex: 1;
			font-size: 13px;
			color: var(--gold);
		}

		.kv-row .kv-remove,
		.banner-row .banner-remove {
			background: none;
			border: none;
			color: var(--red);
			cursor: pointer;
			font-size: 16px;
			padding: 2px 6px;
			flex-shrink: 0;
		}

		.kv-row .kv-remove:hover,
		.banner-row .banner-remove:hover {
			background: rgba(239, 68, 68, .15);
		}

		.banner-row {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 10px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			animation: enchAppear .2s ease;
		}

		.banner-row .banner-info {
			flex: 1;
			font-size: 13px;
		}

		.banner-row .banner-color-dot {
			width: 14px;
			height: 14px;
			border: 1px solid var(--bd-dark);
			flex-shrink: 0;
		}

		.banner-preview-wrap {
			display: flex;
			justify-content: center;
			padding: 12px;
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
		}

		.cond-disabled {
			opacity: .35;
			filter: grayscale(.7);
			cursor: not-allowed;
		}

		.cond-disabled input,
		.cond-disabled select,
		.cond-disabled button,
		.cond-disabled textarea,
		.cond-disabled .toggle,
		.cond-disabled .color-swatch,
		.cond-disabled .fmt-btn,
		.cond-disabled .ench-pool-item,
		.cond-disabled .kv-row,
		.cond-disabled .banner-row {
			pointer-events: none;
		}

		.book-page-card {
			background: var(--bg-inset);
			border: 2px solid var(--bd-dark);
			box-shadow: inset 0 0 0 1px var(--bd-light);
			padding: 8px;
			display: flex;
			flex-direction: column;
			gap: 6px;
		}

		.book-page-top {
			display: flex;
			gap: 6px;
			align-items: flex-start;
		}

		.book-page-top textarea {
			flex: 1;
			min-height: 60px;
			resize: vertical;
		}

		.book-page-fmt {
			display: flex;
			gap: 6px;
			align-items: center;
			flex-wrap: wrap;
		}

		@media(max-width:920px) {
			.main {
				grid-template-columns: 1fr;
			}

			.preview-panel {
				position: relative;
				top: 0;
				height: auto;
				border-left: none;
				border-top: 3px solid var(--bd-dark);
				order: -1;
			}

			.title {
				font-size: 11px;
			}

			.filters-grid {
				grid-template-columns: 1fr;
			}

			.options-grid {
				grid-template-columns: 1fr;
			}

			.preset-grid {
				grid-template-columns: 1fr;
			}

			.attr-mod-row {
				grid-template-columns: 1fr 1fr;
				gap: 4px;
			}
		}

		@media (max-width: 768px) {

			.mc-btn,
			.chip,
			.preset-btn,
			.item-cell {
				min-height: 44px;
				min-width: 44px;
			}

			.mc-btn {
				padding: 12px 18px;
				font-size: 14px;
			}

			.chip {
				padding: 10px 14px;
				font-size: 12px;
			}

			.preset-btn {
				padding: 12px 14px;
				font-size: 14px;
			}

			.item-cell {
				min-width: 44px;
				min-height: 44px;
			}


			.input,
			.select,
			.textarea {
				font-size: 16px;
				padding: 12px 14px;
				min-height: 44px;
			}


			.section-body {
				padding: 12px;
				gap: 12px;
			}

			.controls-panel {
				padding: 12px;
				gap: 12px;
			}


			.preset-grid {
				grid-template-columns: 1fr 1fr;
				gap: 8px;
			}

			.options-grid {
				grid-template-columns: 1fr;
			}

			.filters-grid {
				grid-template-columns: 1fr;
			}

			.attr-mod-row {
				grid-template-columns: 1fr 1fr;
				gap: 6px;
				padding: 8px;
			}


			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
				gap: 6px;
				max-height: 250px;
			}


			.preview-panel {
				position: relative;
				top: 0;
				height: auto;
				max-height: 60vh;
				border-left: none;
				border-top: 3px solid var(--bd-dark);
				order: -1;
				padding: 12px;
				overflow-y: auto;
			}


			.command-box {
				font-size: 14px;
				padding: 12px;
				min-height: 70px;
				max-height: 150px;
				overflow-y: auto;
			}


			.tooltip-preview {
				min-height: 60px;
				padding: 8px 10px;
			}


			.header {
				padding: 10px 12px;
				flex-direction: column;
				align-items: stretch;
				gap: 8px;
			}

			.header-left {
				justify-content: center;
			}

			.header-controls {
				justify-content: center;
				flex-wrap: wrap;
			}

			.title {
				font-size: 11px;
			}

			.logo {
				width: 36px;
				height: 36px;
			}


			.edition-btn {
				padding: 8px 12px;
				font-size: 12px;
				min-height: 36px;
			}

			.version-select {
				font-size: 12px;
				padding: 8px 28px 8px 10px;
				min-height: 36px;
			}


			.target-presets {
				grid-template-columns: 1fr 1fr 1fr;
				gap: 6px;
			}

			.preset-btn .sel-code {
				font-size: 15px;
			}

			.preset-btn .sel-mean {
				font-size: 10px;
			}


			.ench-pool {
				max-height: 150px;
			}

			.ench-pool-item {
				padding: 10px 12px;
				font-size: 13px;
				min-height: 40px;
			}


			.selected-item {
				padding: 10px 12px;
				flex-wrap: wrap;
			}

			.selected-item-icon {
				width: 36px;
				height: 36px;
			}

			.selected-item-icon img {
				width: 28px;
				height: 28px;
			}

			.selected-item-name {
				font-size: 13px;
			}

			.selected-item-id {
				font-size: 12px;
			}


			.rand-options {
				grid-template-columns: 1fr 1fr;
				gap: 8px;
			}

			.rand-result {
				padding: 10px 12px;
				font-size: 13px;
				flex-wrap: wrap;
			}


			.toggle {
				width: 48px;
				height: 28px;
			}

			.toggle::after {
				width: 20px;
				height: 20px;
				top: 2px;
				left: 2px;
			}

			.toggle.on::after {
				left: 24px;
			}

			.toggle-label {
				font-size: 14px;
			}


			.banner-preview-wrap {
				padding: 8px;
			}


			.color-swatch {
				width: 28px;
				height: 28px;
			}


			.fmt-btn {
				padding: 6px 12px;
				font-size: 12px;
				min-height: 32px;
				min-width: 32px;
			}


			.lore-line-top,
			.book-page-top {
				flex-wrap: wrap;
			}

			.lore-line-top .input,
			.book-page-top textarea {
				min-width: 100px;
			}


			.ench-row {
				padding: 8px 10px;
				flex-wrap: wrap;
				gap: 6px;
			}

			.ench-lvl {
				width: 48px;
				font-size: 16px;
				padding: 4px 6px;
				min-height: 32px;
			}

			.ench-remove {
				font-size: 20px;
				padding: 4px 8px;
				min-height: 32px;
				min-width: 32px;
			}


			.attr-mod-row .select,
			.attr-mod-row .input {
				padding: 6px 8px;
				font-size: 12px;
				min-height: 36px;
			}

			.attr-mod-remove {
				padding: 6px 10px;
				font-size: 16px;
				min-height: 36px;
				min-width: 36px;
			}


			.kv-row,
			.banner-row {
				padding: 8px 10px;
				flex-wrap: wrap;
				gap: 4px;
			}

			.kv-row .kv-key,
			.kv-row .kv-val {
				font-size: 12px;
			}


			.sub-fields {
				padding: 8px;
				gap: 8px;
			}


			.book-page-card {
				padding: 8px;
			}

			.book-page-top textarea {
				min-height: 50px;
			}


			.map-dec-row {
				grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr auto !important;
				gap: 4px !important;
				padding: 6px !important;
			}

			.map-dec-row .input,
			.map-dec-row .select {
				font-size: 12px !important;
				padding: 4px 6px !important;
				min-height: 32px !important;
			}


			.item-grid,
			.ench-pool,
			.preview-panel {
				scrollbar-width: thin;
			}

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


			.toast {
				bottom: 20px;
				padding: 12px 20px;
				font-size: 13px;
				max-width: 90%;
			}


			.info-note {
				font-size: 11px;
				padding: 8px 10px;
			}


			@media (max-width: 480px) {
				.preset-grid {
					grid-template-columns: 1fr 1fr;
				}

				.target-presets {
					grid-template-columns: 1fr 1fr;
				}

				.rand-options {
					grid-template-columns: 1fr;
				}

				.header-controls {
					flex-direction: column;
					align-items: stretch;
					gap: 6px;
				}

				.edition-toggle {
					width: 100%;
				}

				.edition-btn {
					flex: 1;
					text-align: center;
				}

				.version-select {
					width: 100%;
				}

				.item-grid {
					grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
					gap: 4px;
					max-height: 180px;
				}

				.mc-banner {
					height: 120px;
				}

				.title {
					font-size: 9px;
				}

				.preview-actions {
					flex-direction: column;
				}

				.preview-actions .mc-btn {
					width: 100%;
				}

				.command-box {
					font-size: 12px;
					max-height: 120px;
				}
			}
		}


		@media (pointer: coarse) {

			.mc-btn:hover,
			.chip:hover,
			.preset-btn:hover,
			.item-cell:hover {
				transform: none;
			}

			.mc-btn:active {
				transform: scale(0.95);
			}


			.mc-btn,
			.chip,
			.preset-btn,
			.item-cell {
				min-height: 44px;
				min-width: 44px;
			}

			.input,
			.select,
			.textarea {
				font-size: 16px;
				min-height: 44px;
			}

			.toggle {
				width: 52px;
				height: 30px;
			}

			.toggle::after {
				width: 22px;
				height: 22px;
			}

			.toggle.on::after {
				left: 26px;
			}
		}


		@media (max-height: 500px) and (orientation: landscape) {
			.mc-banner {
				height: 80px;
			}

			.preview-panel {
				max-height: 40vh;
			}

			.command-box {
				max-height: 60px;
				min-height: 50px;
			}

			.tooltip-preview {
				min-height: 40px;
			}

			.item-grid {
				max-height: 150px;
			}
		}


		.mc-btn:active,
		.chip:active,
		.preset-btn:active,
		.item-cell:active {
			transform: scale(0.95);
			transition: transform 0.05s;
		}


		@media (hover: none) {

			.mc-btn:hover,
			.chip:hover,
			.preset-btn:hover,
			.item-cell:hover {
				transform: none;
			}

			.mc-btn:active {
				transform: scale(0.95);
			}
		}


		@media (max-width: 920px) {
			.main {
				grid-template-columns: 1fr;
			}

			.preview-panel {
				position: relative;
				top: 0;
				height: auto;
				max-height: 50vh;
				border-left: none;
				border-top: 3px solid var(--bd-dark);
				order: -1;
				overflow-y: auto;
			}

			.attr-mod-row {
				grid-template-columns: 1fr 1fr;
				gap: 4px;
			}
		}

		@media (max-width: 768px) {

			.header {
				padding: 10px 12px;
				flex-direction: column;
				align-items: stretch;
				gap: 8px;
			}

			.header-left {
				justify-content: center;
			}

			.title {
				font-size: 10px;
			}

			.header-controls {
				justify-content: center;
				flex-wrap: wrap;
			}


			.controls-panel {
				padding: 12px;
				gap: 12px;
			}

			.preview-panel {
				padding: 12px;
			}

			.section-body {
				padding: 12px;
				gap: 12px;
			}


			.mc-btn {
				padding: 12px 16px;
				min-height: 44px;
				font-size: 13px;
			}

			.chip {
				padding: 8px 12px;
				min-height: 36px;
				font-size: 11px;
			}

			.preset-btn {
				padding: 10px 12px;
				min-height: 40px;
			}

			.input,
			.select,
			.textarea {
				font-size: 16px !important;
				padding: 10px 12px;
				min-height: 44px;
			}


			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
				gap: 4px;
				max-height: 200px;
			}

			.target-presets {
				grid-template-columns: 1fr 1fr 1fr;
				gap: 6px;
			}

			.preset-grid {
				grid-template-columns: 1fr 1fr;
				gap: 8px;
			}

			.rand-options {
				grid-template-columns: 1fr 1fr;
			}

			.filters-grid {
				grid-template-columns: 1fr;
			}

			.options-grid {
				grid-template-columns: 1fr;
			}


			.edition-btn {
				padding: 8px 12px;
				font-size: 12px;
				min-height: 36px;
			}

			.version-select {
				font-size: 12px;
				padding: 8px 28px 8px 10px;
				min-height: 36px;
			}


			.command-box {
				font-size: 14px;
				padding: 12px;
				min-height: 70px;
				max-height: 150px;
				overflow-y: auto;
			}

			.tooltip-preview {
				min-height: 60px;
				padding: 8px 10px;
			}


			.toggle {
				width: 48px;
				height: 28px;
			}

			.toggle::after {
				width: 20px;
				height: 20px;
				top: 2px;
				left: 2px;
			}

			.toggle.on::after {
				left: 24px;
			}


			.color-swatch {
				width: 28px;
				height: 28px;
			}


			.fmt-btn {
				padding: 6px 12px;
				font-size: 12px;
				min-height: 32px;
				min-width: 32px;
			}


			.ench-pool {
				max-height: 150px;
			}

			.ench-pool-item {
				padding: 10px 12px;
				min-height: 40px;
			}

			.ench-lvl {
				width: 48px;
				font-size: 16px;
				padding: 4px 6px;
				min-height: 32px;
			}

			.ench-remove {
				font-size: 20px;
				padding: 4px 8px;
				min-height: 32px;
				min-width: 32px;
			}


			.selected-item {
				padding: 10px 12px;
				flex-wrap: wrap;
			}

			.selected-item-icon {
				width: 36px;
				height: 36px;
			}

			.selected-item-icon img {
				width: 28px;
				height: 28px;
			}


			.preview-actions {
				flex-direction: column;
			}

			.preview-actions .mc-btn {
				width: 100%;
			}


			.toast {
				bottom: 20px;
				padding: 12px 20px;
				font-size: 13px;
				max-width: 90%;
			}


			.item-grid,
			.ench-pool,
			.preview-panel {
				scrollbar-width: thin;
			}

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


		@media (max-width: 480px) {
			.mc-banner {
				height: 120px;
			}

			.title {
				font-size: 9px;
			}

			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
				gap: 3px;
				max-height: 150px;
			}

			.preset-grid {
				grid-template-columns: 1fr 1fr;
			}

			.target-presets {
				grid-template-columns: 1fr 1fr;
			}

			.rand-options {
				grid-template-columns: 1fr;
			}

			.command-box {
				font-size: 12px;
				max-height: 100px;
			}

			.header-controls {
				flex-direction: column;
				align-items: stretch;
				gap: 6px;
			}

			.edition-toggle {
				width: 100%;
			}

			.edition-btn {
				flex: 1;
				text-align: center;
			}

			.version-select {
				width: 100%;
			}
		}


		@media (max-height: 500px) and (orientation: landscape) {
			.mc-banner {
				height: 80px;
			}

			.preview-panel {
				max-height: 40vh;
			}

			.command-box {
				max-height: 60px;
				min-height: 50px;
			}

			.tooltip-preview {
				min-height: 40px;
			}

			.item-grid {
				max-height: 120px;
			}
		}


		@media (pointer: coarse) {
			.mc-btn {
				min-height: 44px;
				padding: 12px 16px;
			}

			.chip {
				min-height: 36px;
				padding: 8px 12px;
			}

			.preset-btn {
				min-height: 40px;
				padding: 10px 12px;
			}

			.item-cell {
				min-height: 44px;
				min-width: 44px;
			}

			.input,
			.select {
				min-height: 40px;
				font-size: 16px;
			}

			.toggle {
				width: 52px;
				height: 30px;
			}

			.toggle::after {
				width: 22px;
				height: 22px;
			}

			.toggle.on::after {
				left: 26px;
			}
		}

		@media only screen and (max-width: 768px) {
			body {
				overflow-x: hidden !important;
			}

			.main {
				display: block !important;
			}

			.controls-panel {
				width: 100% !important;
				padding: 8px !important;
			}

			.preview-panel {
				width: 100% !important;
				position: relative !important;
				top: auto !important;
				height: auto !important;
				max-height: 300px !important;
				border-left: none !important;
				border-top: 3px solid var(--bd-dark) !important;
				overflow-y: scroll !important;
				padding: 10px !important;
				margin-bottom: 10px !important;
			}

			.header {
				flex-wrap: wrap !important;
				padding: 8px !important;
			}

			.header-left {
				flex: 1 1 auto !important;
			}

			.title {
				font-size: 9px !important;
			}

			.header-controls {
				flex-wrap: wrap !important;
				gap: 4px !important;
			}

			.edition-btn {
				padding: 4px 8px !important;
				font-size: 11px !important;
			}

			.version-select {
				font-size: 11px !important;
				padding: 4px 24px 4px 6px !important;
			}

			.section-body {
				padding: 8px !important;
				gap: 8px !important;
			}

			.mc-btn {
				min-height: 40px !important;
				padding: 8px 12px !important;
				font-size: 12px !important;
			}

			.preset-grid {
				grid-template-columns: 1fr 1fr !important;
				gap: 4px !important;
			}

			.target-presets {
				grid-template-columns: 1fr 1fr !important;
				gap: 4px !important;
			}

			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)) !important;
				gap: 3px !important;
				max-height: 150px !important;
			}

			.input,
			.select,
			.textarea {
				font-size: 16px !important;
				min-height: 40px !important;
				padding: 6px 8px !important;
			}

			.command-box {
				font-size: 12px !important;
				min-height: 50px !important;
				max-height: 100px !important;
				overflow-y: auto !important;
				padding: 8px !important;
			}

			.options-grid {
				grid-template-columns: 1fr !important;
				gap: 6px !important;
			}

			.filters-grid {
				grid-template-columns: 1fr !important;
				gap: 4px !important;
			}

			.attr-mod-row {
				grid-template-columns: 1fr 1fr !important;
				gap: 4px !important;
			}

			.ench-pool {
				max-height: 120px !important;
			}

			.preview-actions {
				flex-direction: column !important;
				gap: 4px !important;
			}

			.preview-actions .mc-btn {
				width: 100% !important;
			}

			.selected-item {
				flex-wrap: wrap !important;
				gap: 6px !important;
			}

			.toggle {
				width: 44px !important;
				height: 26px !important;
			}

			.toggle::after {
				width: 18px !important;
				height: 18px !important;
			}

			.toggle.on::after {
				left: 22px !important;
			}

			.mc-banner {
				height: 100px !important;
			}

			.rand-options {
				grid-template-columns: 1fr !important;
				gap: 4px !important;
			}

			.ench-row {
				flex-wrap: wrap !important;
				gap: 4px !important;
			}

			.ench-lvl {
				width: 40px !important;
				font-size: 14px !important;
			}

			.kv-add-row {
				flex-wrap: wrap !important;
			}

			.kv-row {
				flex-wrap: wrap !important;
				gap: 4px !important;
			}

			.lore-line-top {
				flex-wrap: wrap !important;
			}

			.book-page-top {
				flex-wrap: wrap !important;
			}

			.color-swatch {
				width: 24px !important;
				height: 24px !important;
			}

			.fmt-btn {
				min-height: 30px !important;
				min-width: 30px !important;
				padding: 4px 8px !important;
				font-size: 11px !important;
			}

			.toast {
				max-width: 90% !important;
				font-size: 12px !important;
				padding: 8px 16px !important;
			}

			.info-note {
				font-size: 10px !important;
				padding: 6px 8px !important;
			}

			.preset-btn {
				min-height: 36px !important;
				padding: 6px 8px !important;
				font-size: 12px !important;
			}

			.chip {
				min-height: 30px !important;
				padding: 4px 8px !important;
				font-size: 10px !important;
			}

			.section-title {
				font-size: 8px !important;
			}

			.label {
				font-size: 10px !important;
			}

			.version-badge {
				font-size: 12px !important;
				padding: 2px 8px !important;
			}

			.tooltip-preview {
				min-height: 50px !important;
				padding: 6px 8px !important;
			}

			.tt-name {
				font-size: 13px !important;
			}

			.tt-ench,
			.tt-lore,
			.tt-mod {
				font-size: 11px !important;
			}

			.selected-item-name {
				font-size: 12px !important;
			}

			.selected-item-id {
				font-size: 11px !important;
			}

			.sub-fields {
				padding: 6px !important;
				gap: 6px !important;
			}

			.banner-preview-wrap {
				padding: 6px !important;
			}

			.count-input {
				width: 60px !important;
				font-size: 14px !important;
			}

			.ench-search {
				min-width: 80px !important;
			}
		}

		@media only screen and (max-width: 480px) {
			.mc-banner {
				height: 80px !important;
			}

			.title {
				font-size: 7px !important;
			}

			.logo {
				width: 30px !important;
				height: 30px !important;
			}

			.item-grid {
				grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)) !important;
				max-height: 120px !important;
			}

			.item-cell img {
				width: 24px !important;
				height: 24px !important;
			}

			.header {
				padding: 4px 6px !important;
				gap: 4px !important;
			}

			.controls-panel {
				padding: 4px !important;
				gap: 6px !important;
			}

			.section-body {
				padding: 6px !important;
				gap: 6px !important;
			}

			.preset-grid {
				grid-template-columns: 1fr 1fr !important;
				gap: 3px !important;
			}

			.target-presets {
				grid-template-columns: 1fr 1fr !important;
				gap: 3px !important;
			}

			.mc-btn {
				font-size: 10px !important;
				padding: 6px 8px !important;
				min-height: 32px !important;
			}

			.edition-btn {
				font-size: 9px !important;
				padding: 3px 6px !important;
				min-height: 28px !important;
			}

			.version-select {
				font-size: 9px !important;
				padding: 3px 20px 3px 4px !important;
				min-height: 28px !important;
			}

			.preview-panel {
				max-height: 200px !important;
				padding: 6px !important;
			}

			.command-box {
				font-size: 10px !important;
				max-height: 80px !important;
				min-height: 40px !important;
				padding: 6px !important;
			}

			.input,
			.select,
			.textarea {
				font-size: 14px !important;
				min-height: 32px !important;
				padding: 4px 6px !important;
			}
		}

		.info-note {
			background: var(--bg-deep) !important;
			border-left: 3px solid var(--blue) !important;
			border-top: 2px solid var(--bd-dark) !important;
			z-index: 5 !important;
			padding: 12px 16px !important;
			font-size: 11px !important;
			max-width: 1440px;
			margin: 0 auto;
			box-sizing: border-box;
		}


		@media (max-width: 768px) {
			.controls-panel {
				padding-bottom: 0 !important;
			}
		}

		@media (max-width: 768px) {
			.preview-panel {
				display: flex !important;
				flex-direction: column !important;
			}

			.command-box {
				order: 8 !important;
			}

			.preview-actions {
				order: 9 !important;
			}
		}

		@media (max-width: 768px) {
			.preview-panel {
				max-height: none !important;
				height: auto !important;
				padding: 8px !important;
				flex: 1 !important;
			}

			.tooltip-preview {
				min-height: 120px !important;
				padding: 12px !important;
				font-size: 16px !important;
			}

			.tt-name {
				font-size: 18px !important;
			}

			.tt-ench,
			.tt-lore,
			.tt-mod {
				font-size: 15px !important;
			}

			.command-box {
				font-size: 16px !important;
				min-height: 120px !important;
				max-height: 200px !important;
				padding: 14px !important;
				line-height: 1.8 !important;
			}

			.preview-title {
				font-size: 12px !important;
				margin-bottom: 6px !important;
			}

			.version-badge {
				font-size: 14px !important;
				padding: 4px 12px !important;
			}

			.preview-subtitle {
				font-size: 11px !important;
				margin-bottom: 4px !important;
			}

			.preview-actions .mc-btn {
				min-height: 50px !important;
				font-size: 16px !important;
				padding: 14px !important;
			}

			.preview-actions {
				gap: 8px !important;
				margin-top: 8px !important;
			}

			.info-note {
				font-size: 13px !important;
				padding: 12px !important;
				margin-top: 12px !important;
				line-height: 1.6 !important;
			}
		}

		@media (max-width: 768px) {
			.tooltip-preview {
				min-height: 150px !important;
				max-height: 300px !important;
				overflow-y: auto !important;
				padding: 12px !important;
				word-wrap: break-word !important;
				overflow-wrap: break-word !important;
				display: flex !important;
				flex-direction: column !important;
				gap: 4px !important;
			}

			.tooltip-preview span {
				display: block !important;
				width: 100% !important;
				word-wrap: break-word !important;
				overflow-wrap: break-word !important;
				white-space: normal !important;
				padding: 2px 0 !important;
			}

			.tt-name {
				font-size: 16px !important;
				word-wrap: break-word !important;
			}

			.tt-ench,
			.tt-lore,
			.tt-mod {
				font-size: 13px !important;
				word-wrap: break-word !important;
				white-space: normal !important;
			}

			.tt-icon {
				width: 32px !important;
				height: 32px !important;
				flex-shrink: 0 !important;
			}
		}

		@media (max-width: 480px) {
			.tooltip-preview {
				min-height: 200px !important;
				max-height: 400px !important;
				font-size: 14px !important;
			}

			.tooltip-preview span {
				font-size: 13px !important;
				line-height: 1.5 !important;
				padding: 3px 0 !important;
			}

			.tt-name {
				font-size: 18px !important;
			}
		}