#Slider { display: flex; width: 100%; contain: content; flex-shrink: 0; transition: 0.6s ease transform; }
em { text-align: center; text-wrap: balance; }
#LeftBar {
	display: flex; flex-direction: column; width: 350px; max-width: 100vw; flex-shrink: 0; z-index: 1;
	color: var(--barTxt);
	background: linear-gradient(0deg, rgb(151 171 187) 0%, rgb(195 210 220) 100%);
	box-shadow: 0.3px 0 2.2px rgba(0 0 0 / 0.042), /* https://shadows.brumm.af */
		0.7px 0 5.3px rgba(0 0 0 / 0.061),
		1.3px 0 10px rgba(0 0 0 / 0.075),
		2.2px 0 17.9px rgba(0 0 0 / 0.089),
		4.2px 0 33.4px rgba(0 0 0 / 0.108),
		10px 0 80px rgba(0 0 0 / 0.15);
}
	#BarHdr { display: flex; height: calc(30px + (2 * var(--padding))); align-items: center; justify-content: space-between; padding: var(--padding); }
		#MenuTgl { height: 100%; aspect-ratio: 1; font-size: 30px; line-height: 0.8; text-align: center; }
			#MenuTgl input { display: none; }
		[show-type="payment"] .terminalCfg:not(.paymentCfg) { display: none !important; }
		[show-type="terminal"] .paymentCfg:not(.terminalCfg) { display: none !important; }
		#BarHdr img { height: 100%; }
	.barLink {
		display: block; color: inherit; background-color: rgb(215 225 215 / 0.8);
		padding: 10px; border: 1px solid rgb(60 120 60 / 0.3); border-radius: 5px;
	}
		.barLink::after {
			display: block; position: absolute; right: 0.7em; top: 0.45em; width: 2em; aspect-ratio: 1;
			background-color: rgb(63 141 134); border-radius: 50%; border: 2px solid rgba(0 0 0 / 0.1);
			content: "✔"; font-family: sans-serif; font-size: 0.8em; line-height: 1.78; text-align: center; color: rgb(255 255 255);
			transform: scale(0); transition: 0.5s ease transform;
		}
		.barLink.active::after { transform: scale(1); }
	#TypeMenu { flex-grow: 1; margin: 0; padding: var(--padding); display: flex; flex-direction: column; }
		#LeftBar:has(#MenuChk:not(:checked)) menu { display: none; }
		#LeftBar:has(#MenuChk:checked) menu ~ :nth-child(1n) { display: none; }
		#TypeLinks { flex-grow: 1; display: flex; flex-direction: column; align-items: center; gap: var(--padding); }
		#TypeMenu li { list-style-type: none; width: 100%; }
	#Configs { flex-grow: 1; display: flex; width: 200%; transition: transform 0.6s ease; }
		body[show-type="terminal"] #Configs { transform: translateX(-50%); }
			#PayCfgs, #TermCfgs { flex-grow: 1; display: flex; flex-direction: column; padding: var(--padding); gap: 10px; }
	.addCfg {
		margin: var(--padding); padding: 0.6em; border-color: rgb(187 200 211);
		background: linear-gradient(0deg, rgb(190 201 210) 0%, rgb(219 225 228) 100%);
	}
#Config {
	flex-grow: 1; height: 100%; padding: calc(2 * var(--padding)); overflow: auto;
	display: flex; flex-direction: column; gap: var(--padding); align-items: center;
	background: linear-gradient(0deg, rgb(251 246 241) 0%, rgb(221 227 234) 100%);
}
	#Config header { display: flex; width: 100%; gap: var(--padding); }
		#Config-Title { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
		#Config-Buttons { display: flex; contain: content; gap: inherit; }
			#Config-Buttons :is(button, .button) { flex: 33.3% 1 1; }
			#Back { display: none; }
				#Back::before {
					display: inline-block; height: 0.5em; contain: content; vertical-align: -0.08em;
					content: "‹"; font-size: 2em; line-height: 0.3; opacity: 0.6; margin-right: 0.1em;
				}
			#Delete { background-color: rgb(180 0 0); color: white; }
	#ConfigGrid {
		display: grid; width: 100%; contain: content;
		grid-template-columns: min-content 1fr; gap: var(--padding); align-self: start; align-items: center;
	}
	#ConfigGrid label { display: contents; }
	field-pair { display: flex; gap: var(--padding); }
		field-pair :first-child { flex-grow: 1; }

	#CodeBox {
		contain: content; padding: var(--padding); border-radius: 8px;
		display: flex; flex-direction: column; gap: var(--padding); align-items: center;
	}
		#CodeBox:has(#Code:not(:empty)) { margin-top: var(--padding); border: 1px solid black; }
		#Code { font-size: 2em; letter-spacing: 0.05em; }
		#Code-QR { width: 200px; max-width: 100%; aspect-ratio: 1; }
			#Code-QR svg { width: 100%; height: 100%; }
		#Code:empty, #Code:empty ~ :nth-child(1n):not(button), #Code:not(:empty) ~ button { display: none; }

@media screen and (max-width: 900px) {
	#ConfigGrid { grid-template-columns: 1fr; gap: 0.2em; }
		#ConfigGrid label:nth-child(n + 2) x-lbl { margin-top: calc(var(--padding) * 1.5); }
	#Config header { flex-direction: column-reverse; }
}
@media screen and (max-width: 700px) {
	#Slider { width: auto; }
		[cfg-id] #Slider { transform: translateX(-100vw); }
	#LeftBar { width: 100vw; }
	#Config { width: 100vw; padding: var(--padding); }
		#Back { display: block; }
}