:root {
	color-scheme: light dark;
	--brand-blue: #1d5edb;
	--brand-orange: #ff7a00;
	--brand-gray: #6f7178;
	--bg: #f6f7f9;
	--surface: #ffffff;
	--surface-soft: #eef2f8;
	--text: #2b2f37;
	--muted: #666a73;
	--border: #dfe3ea;
	--accent: var(--brand-blue);
	--accent-strong: #1649aa;
	--accent-warm: var(--brand-orange);
	--accent-warm-strong: #d96300;
	--danger: #c74635;
	--danger-strong: #a33427;
	--shadow: 0 16px 38px rgba(34, 45, 62, 0.12);
	--radius: 14px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--brand-gray: #d5d7dc;
		--bg: #17191d;
		--surface: #22252b;
		--surface-soft: #2b3038;
		--text: #f2f3f6;
		--muted: #b8bbc3;
		--border: #3a404b;
		--accent: #7ba9ff;
		--accent-strong: #a9c7ff;
		--accent-warm: #ff9b38;
		--accent-warm-strong: #ffb166;
		--danger: #ff887d;
		--danger-strong: #ffaaa4;
		--shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
	}
}

* {
	box-sizing: border-box;
}

html {
	background: var(--bg);
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 28px;
	background: var(--bg);
	color: var(--text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.45;
}

h1 {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 12px;
	font-size: clamp(1.6rem, 4vw, 2.25rem);
	line-height: 1.15;
	color: var(--brand-gray);
}

h1 img {
	width: auto;
	max-width: min(210px, 42vw);
	max-height: 56px;
	object-fit: contain;
}

p {
	max-width: 1040px;
	margin: 0 0 18px;
	color: var(--muted);
}

a {
	color: var(--accent);
	font-weight: 700;
	text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
	text-underline-offset: 3px;
}

a:hover,
a:focus-visible {
	color: var(--accent-warm);
}

form {
	max-width: 1220px;
}

table {
	width: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--border);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
}

tr + tr td {
	border-top: 1px solid var(--border);
}

tr.spacer {
	height: 10px;
	background: var(--surface);
}

td {
	padding: 14px 16px;
	vertical-align: top;
}

td:first-child {
	width: 28%;
	color: var(--muted);
	font-weight: 700;
}

input,
select {
	max-width: 100%;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-soft);
	color: var(--text);
	font: inherit;
}

input[type="text"],
input[type="password"],
select {
	min-height: 34px;
	padding: 5px 10px;
}

input[type="text"],
input[type="password"] {
	width: min(100%, 340px);
}

select {
	margin-top: 8px;
}

input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 11px 10px 0 0;
	accent-color: var(--accent);
	vertical-align: top;
}

input[type="submit"] {
	min-height: 34px;
	margin: 4px 8px 4px 0;
	padding: 5px 16px;
	border-color: transparent;
	background: var(--accent);
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

input[type="submit"]:hover,
input[type="submit"]:focus-visible {
	background: var(--accent-strong);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 28%, transparent);
	transform: translateY(-1px);
}

input[type="submit"][value="create"] {
	background: var(--accent-warm);
}

input[type="submit"][value="create"]:hover,
input[type="submit"][value="create"]:focus-visible {
	background: var(--accent-warm-strong);
	box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-warm) 28%, transparent);
}

input[type="submit"][value="delete"] {
	background: var(--danger);
}

input[type="submit"][value="delete"]:hover,
input[type="submit"][value="delete"]:focus-visible {
	background: var(--danger-strong);
}

input:focus-visible,
select:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
	outline-offset: 2px;
}

/* Styling hook for an optional HTML mode switch, if one is added later. */
.mode-switch,
.theme-switch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	box-shadow: var(--shadow);
}

.mode-switch input,
.theme-switch input {
	accent-color: var(--accent);
}

hr {
	max-width: 1040px;
	margin: 0 0 18px;
	border: 0;
	border-top: 1px solid var(--border);
}

p[style*="text-align:right"] {
	max-width: 1220px;
	text-align: right !important;
}

.certlist {
	max-width: 1180px;
	margin: 0 0 18px;
	padding: 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	box-shadow: var(--shadow);
}

.certlist h2 {
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--accent-warm);
	color: var(--brand-gray);
	font-size: 1.25rem;
}

.certlist ul {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cert {
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-left: 5px solid var(--accent);
	border-radius: 12px;
	background: var(--surface-soft);
	overflow-wrap: anywhere;
	word-break: break-word;
}

.cert strong {
	font-size: 1.04rem;
}

@media only screen and (max-width: 700px) {
	body {
		padding: 18px 12px;
		font-size: 15px;
	}

	h1 {
		align-items: flex-start;
		flex-direction: column;
		gap: 8px;
	}

	h1 img {
		max-width: 190px;
		max-height: 48px;
	}

	table,
	tbody,
	tr,
	td {
		display: block;
		width: 100%;
	}

	table {
		border-radius: 12px;
	}

	tr {
		padding: 12px 14px;
	}

	tr + tr {
		border-top: 1px solid var(--border);
	}

	tr + tr td,
	td {
		border-top: 0;
	}

	td {
		padding: 4px 0;
	}

	td:first-child {
		width: 100%;
		font-size: 0.88rem;
	}

	input[type="text"],
	input[type="password"],
	select {
		width: 100%;
	}

	select {
		margin-top: 10px;
	}

	input[type="submit"] {
		width: 100%;
		margin-right: 0;
	}

	p[style] {
		text-align: left !important;
	}

	.certlist {
		padding: 14px;
		border-radius: 12px;
	}

	.cert {
		padding: 12px;
	}
}