I missed committing the CSS O_O

.gitignore

@@ -1,3 +1,2 @@
-/public/css/
 /niver.log
 /db/niver.db

public/css/buttons.css

@@ -0,0 +1,62 @@
+@media (prefers-color-scheme: dark) {
+	.auth {
+		--svc-color: #00FF00;
+	}
+	.reg {
+		--svc-color: #FF50FF;
+	}
+	.ns {
+		--svc-color: #00FFFF;
+	}
+	.ht {
+		--svc-color: #FFFF00;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	.auth {
+		--svc-color: #EE0000;
+	}
+	.reg {
+		--svc-color: #D100D1;
+	}
+	.ns {
+		--svc-color: #006DFF;
+	}
+	.ht {
+		--svc-color: #008768;
+	}
+}
+
+a {
+	text-decoration: underline;
+	color: var(--svc-color, --foreground-color);
+}
+
+.button {
+	font-size: 1.1rem;
+	font-weight: bold;
+	border-width: 0.15rem;
+	border-style: solid;
+	text-decoration: none;
+	border-radius: 0.8rem;
+	padding: 0.3rem 0.5rem;
+	margin: 0.2rem 0;
+	display: inline-block;
+	border-color: var(--svc-color);
+	color: var(--svc-color);
+}
+
+.button::selection {
+	background-color: var(--svc-color);
+}
+
+.button:hover, .button:focus {
+	background-color: var(--svc-color);
+	color: var(--background-color);
+}
+
+.button:hover::selection, .button:focus::selection {
+	background-color: var(--foreground-color);
+	color: var(--svc-color);
+}

public/css/form.css

@@ -0,0 +1,72 @@
+form {
+	text-align: center;
+}
+
+input, select {
+	border-radius: 0.5rem;
+	font-size: 1rem;
+	margin: 0.3rem;
+	padding: 0.30rem;
+	border-style: solid;
+	border-width: 0.10rem;
+	background-color: var(--background-color);
+	color: var(--foreground-color);
+	border-color: var(--svc-color, --foreground-color);
+}
+
+input:hover, select:hover {
+	border-width: 0.15rem;
+	padding: 0.25rem;
+}
+
+input:focus, select:focus {
+	border-width: 0.20rem;
+	padding: 0.20rem;
+}
+
+input[type=text] {
+	font-family: monospace;
+}
+
+input#subdomain, input#ttl-value {
+	text-align: right;
+}
+
+input[type=password] {
+	width: 32ch;
+	text-align: center;
+}
+
+#username {
+	width: 16ch;
+}
+
+#keytag {
+	width: 7ch;
+}
+
+input:invalid+span::after {
+	content: '✖';
+}
+
+input:valid+span::after {
+	content: ''; // ✓
+}
+
+input+span::after {
+	display: inline-block;
+	width: 20px;
+	font-size: 30px;
+	padding-left: 20px;
+	font-family: monospace;
+}
+
+fieldset {
+	border-radius: 1rem;
+	border-width: 2px;
+	border-style: solid;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	border-color: var(--svc-color, --foreground-color);
+}

public/css/main.css

@@ -0,0 +1,64 @@
+:root {
+	--font-size: 1rem;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--foreground-color: #FFFFFF;
+		--background-color: #000000;
+	}
+}
+
+@media (prefers-color-scheme: light) {
+	:root {
+		--foreground-color: #000000;
+		--background-color: #FFFFFF;
+	}
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	background-color: var(--background-color);
+	color: var(--foreground-color);
+	font-family: system-ui, sans-serif;
+	font-size: var(--font-size);
+}
+
+h1 {
+	text-align: center;
+	font-size: 2rem;
+}
+
+header, main, footer {
+	max-width: 30rem;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+code {
+	line-height: var(--font-size) + 6%;
+	font-size: var(--font-size);
+}
+
+nav {
+	display: inline-block;
+}
+
+header {
+	text-align: center;
+	margin-top: 0.8rem;
+}
+
+p {
+	margin-bottom: 1rem;
+}
+
+.breakable {
+	word-break: break-all;
+}
+
+::selection {
+	background-color: var(--foreground-color);
+	color: var(--background-color);
+}