:root {
	--bg: #f6f7fb;
	--card: #ffffff;
	--muted: #6b7280;
	--accent: #e0f7ff;
	--border: #e6e7eb;
	--danger: #ef4444;
	--radius: 8px;
}
*, :before, :after {
	box-sizing: border-box;
}
html, body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
body {
	display: flex;
	flex-direction: column;
	font-family: Verdana;
	font-size: 11px;
	padding: 10px;
}



form {
	flex: 0 0 auto;
	left: 0;
	right: 0;
	top: 0;
	background-color: var(--accent);
	height: min-content;
	width: 100%;
	padding: 10px;

	display: flex;
	z-index: 10;

	>* {
		height: min-content;
	}
	input[type=url] {
		flex-grow: 1;
		&:invalid {
			border: 2px solid red;
		}
		&:focus {
			outline-width: 0;
		}
	}
	button {
		min-width: 140px;
		&[name=disconnect] {
			display: none;
		}
	}

	fieldset[name=assets] {
		max-height: 103px;
		overflow-y: auto;
		&>label {
			display: block;
		}
	}
}

main {
	flex: 1;
	position: relative;
	overflow: auto;
	table {
		width: 100%;
		border-collapse: collapse;
		th {
			background: rgb(230, 230, 230);
		}
		thead>tr {
			position: sticky;
			top: 0;
			th {
				width: min-content;
			}
		}
		tbody>tr>th {
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		tr {
			border-bottom: 1px solid black;
			th,td {
				white-space: nowrap;
				border-right: 1px solid black;
				vertical-align: top;
				text-align: left;
				width: min-content;
				max-width: 15vw;
			}
			th {
				padding: 4px 8px;
			}
			td {
				padding: 2px;
				overflow-x: auto;
			}
			
			&>th:first-child {
				position: sticky;
				left: 0;
				background: rgb(230, 230, 230);
			}
			th:empty {
				background: white;
			}
		}
	}
}