/* CGX Network Portal - Developed by lex0de (lex0de@tuta.com) */
/* www.cgx.li/web/static/portal.css */

:root {
	--bg: #050607;
	--panel: #11161b;
	--panel-alt: #19232c;
	--border: #334d63;
	--ice: #a4bace;
	--steel: #688fb1;
	--text: #f4f6f8;
	--muted: #a9b2ba;
	--green: #51cb20;
	--amber: #e7bb41;
	--red: #ff5d73;
	--unknown: #848485;
	--shadow: 0 12px 34px rgba(0, 0, 0, .38);
	font-family: Verdana, Geneva, sans-serif;
	color-scheme: dark;
}

* {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	min-height: 100vh;
	background:
		linear-gradient(rgba(164, 186, 206, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(164, 186, 206, .025) 1px, transparent 1px),
		radial-gradient(circle at 85% -20%, #243749 0, transparent 42%);
	background-size: 32px 32px, 32px 32px, auto;
	font-size: 1rem;
	line-height: 1.55;
}

a {
	color: var(--ice);
	text-underline-offset: .2em;
}

a:hover {
	color: #fff;
}

:focus-visible {
	outline: 3px solid var(--amber);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	left: 1rem;
	top: -5rem;
	z-index: 10;
	padding: .65rem 1rem;
	background: #fff;
	color: #000;
}

.skip-link:focus {
	top: 1rem;
}

.site-header {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .8rem 2rem;
	max-width: 1180px;
	margin: 0 auto;
	padding: 1rem 1.25rem .8rem;
	border-bottom: 1px solid var(--border);
}

.brand img {
	display: block;
	max-width: min(297px, 60vw);
	height: auto;
	filter: drop-shadow(0 0 12px rgba(164, 186, 206, .28));
}

.identity {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font: 700 .78rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
	letter-spacing: .13em;
	color: var(--ice);
}

.identity small {
	color: var(--muted);
	letter-spacing: .05em;
}

nav {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

nav a {
	padding: .55rem .85rem;
	border: 1px solid transparent;
	color: var(--muted);
	font: 700 .8rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
}

nav a:hover,
nav a[aria-current="page"] {
	border-color: var(--border);
	background: var(--panel-alt);
	color: #fff;
}

.page {
	width: min(1120px, calc(100% - 2rem));
	margin: 2rem auto 4rem;
}

.page-header,
.hero {
	max-width: 820px;
	margin-bottom: 1.25rem;
}

.page-header {
	padding: 1rem .25rem;
}

h1,
h2,
h3 {
	margin: 0 0 .6rem;
	line-height: 1.2;
}

h1 {
	font-size: clamp(2rem, 6vw, 4rem);
	font-style: italic;
	letter-spacing: -.045em;
	text-shadow: 0 0 22px rgba(164, 186, 206, .24);
}

h2 {
	font-size: clamp(1.25rem, 3vw, 1.8rem);
}

h3 {
	font-size: 1rem;
}

p {
	margin: 0 0 1rem;
}

.eyebrow,
.timestamp,
.result-meta,
.hint {
	font: 700 .75rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
	letter-spacing: .1em;
	color: var(--ice);
}

.panel {
	margin-bottom: 1.25rem;
	padding: clamp(1rem, 3vw, 1.7rem);
	border: 1px solid var(--border);
	background: linear-gradient(145deg, rgba(36, 55, 73, .52), rgba(17, 22, 27, .95) 48%);
	box-shadow: var(--shadow);
}

.hero p:not(.eyebrow) {
	max-width: 68ch;
	color: #dce2e7;
	font-size: 1.08rem;
}

.actions,
.control-row,
.section-heading {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.section-heading {
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.button,
button {
	display: inline-block;
	border: 1px solid var(--ice);
	padding: .7rem 1rem;
	background: var(--ice);
	color: #071019;
	font: 700 .82rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
	text-decoration: none;
	cursor: pointer;
}

.button.secondary {
	background: transparent;
	color: var(--ice);
}

button:hover,
.button:hover {
	background: #fff;
	color: #000;
}

.status-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: .75rem;
}

.status-card {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .75rem;
	padding: .85rem;
	border: 1px solid #293d4e;
	background: rgba(5, 6, 7, .52);
}

.status-card p {
	margin: 0;
	color: var(--muted);
	font-size: .82rem;
}

.state {
	display: inline-block;
	padding: .25rem .5rem;
	border: 1px solid currentColor;
	font: 700 .7rem/1 ui-monospace, SFMono-Regular, Consolas, monospace;
	letter-spacing: .04em;
}

.state-up {
	color: var(--green);
}

.state-degraded {
	color: var(--amber);
}

.state-unreachable {
	color: var(--red);
}

.state-unknown {
	color: var(--unknown);
}

.table-wrap {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9rem;
}

th,
td {
	padding: .7rem .65rem;
	border-bottom: 1px solid #2a3946;
	text-align: left;
	vertical-align: top;
}

th {
	color: var(--ice);
	font: 700 .75rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
	letter-spacing: .06em;
	text-transform: uppercase;
}

tbody tr:hover {
	background: rgba(164, 186, 206, .04);
}

code,
pre {
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

code {
	overflow-wrap: anywhere;
}

pre {
	overflow-x: auto;
	padding: 1rem;
	border: 1px solid #2a3946;
	background: #030405;
	color: var(--ice);
}

.query-form {
	display: grid;
	gap: .7rem;
	margin: 1rem 0;
}

.grid-form {
	grid-template-columns: minmax(150px, .7fr) minmax(240px, 2fr) minmax(90px, .5fr) auto;
	align-items: end;
}

label {
	display: grid;
	gap: .35rem;
	color: var(--ice);
	font: 700 .78rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
}

input,
select {
	width: 100%;
	min-height: 2.6rem;
	border: 1px solid var(--border);
	border-radius: 0;
	padding: .55rem .65rem;
	background: #070a0d;
	color: var(--text);
	font: inherit;
}

.control-row input {
	flex: 1;
}

.notice {
	margin-bottom: 1rem;
	padding: .8rem 1rem;
	border-left: 4px solid var(--amber);
	background: #282315;
}

.notice-error {
	border-color: var(--red);
	background: #2a1519;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

footer {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	max-width: 1120px;
	margin: 0 auto;
	padding: 1.5rem 1rem 2.5rem;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font: .72rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (max-width: 760px) {
	.site-header {
		grid-template-columns: 1fr;
	}

	.identity {
		align-items: flex-start;
	}

	.grid-form,
	.split {
		grid-template-columns: 1fr;
	}

	.control-row {
		align-items: stretch;
		flex-direction: column;
	}

	footer {
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
	}
}