form {
	float:left;
	background-color: rgb(235 235 235);
	color: rgb(77 73 77);
	box-shadow: rgb(172 172 172 / 75%) 0px 4px 15px;
	font-size: 14px;
	border: 1px solid rgb(172 172 172);
	border-radius: 6px;
	padding: 1rem;
	font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	--shadow:#0005 0px 0px 2px;
	margin:2em;
}

button, input, textarea, select {
	font: inherit;
	line-height: inherit;
}

fieldset { 
	all:unset;
	display: flex;
	flex-wrap:wrap;
	align-items: center;
}

fieldset.vertical {
	flex-direction: column;
    align-items: stretch;
    gap: 1em;
}

form p { margin:.5em; }
form>:last-child { margin-bottom:0; }

[readonly] { background:#fff no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><foreignObject width="48" height="48"><div xmlns="http://www.w3.org/1999/xhtml" style="font-size:2.1em; opacity:.9">🔒</div></foreignObject></svg>') left center; text-indent:1.2em; }

form>h1 {
	background: linear-gradient(to bottom, rgb(235, 235, 235), rgb(213, 213, 213));
	text-align: center;
	padding: .5em;
	font-size:1.2em;
	margin:-1rem -1rem 1rem;
	border-top: 1px solid rgb(243 241 243);
	border-bottom: 1px solid rgb(177 174 177);
	border-radius: 6px 6px 0 0;
}

button {
	background: linear-gradient(to bottom, rgb(255 255 255) 0%, rgb(246 246 246) 30%, rgb(243 243 243) 45%, rgb(237 237 237) 60%, rgb(238 238 238) 100%);
	box-shadow: var(--shadow);
	padding: 2px 8px;
	border: 1px solid rgb(156 156 156);
	border-radius: 3px;
	height: 2.1em;
}
button:active {
	background: linear-gradient(to bottom, rgb(172 197 233) 0%, rgb(163 192 242) 18%, rgb(97 160 237) 39%, rgb(85 163 242) 70%, rgb(130 194 241) 91.72%, rgb(154 210 242) 100%);
	box-shadow: rgb(0 0 0 / 65%) 0px 0px 1px;
	border-color: rgb(112 94 187);
	color:#fff;
}

label:has([disabled]) { opacity:.5; }

button:disabled,
button:active:disabled {
	background-image:none;
}
button:disabled,
input:disabled {
	box-shadow: none;
	color: gray;
	background-color: #ddd;
}

input+button { border-radius: 0 3px 3px 0; }
input:has(+button) { border-radius: 3px 0 0 3px; border-right: none; }
button+input { border-radius: 0 3px 3px 0; }
button:has(+input) { border-radius: 3px 0 0 3px; border-right: none; }

input {
	box-sizing:border-box;
	background: #fff;
	box-shadow: var(--shadow);
	height: 30px;
	padding: 2px 8px;
	border: 1px solid rgb(156 156 156);
	border-radius: 3px;
	height: 2.1em;
}
input[type=number] { max-width: 10ch; }

select {
	background: #ffffff;
	box-shadow: rgb(0 0 0 / 10%) 0px -1px 0px;
	height: 30px;
	margin: 0;
	padding: 2px 4px;
	border: 1px solid rgb(156 156 156);
	border-radius: 3px;
}