/* Панель управления api-v2. Один файл, без сборки. */

:root {
	--ground: #f2f4f6;
	--panel: #ffffff;
	--sunk: #e9edf0;
	--ink: #10161a;
	--ink-soft: #4c5a63;
	--ink-faint: #7f8d96;
	--rule: #dbe2e7;
	--accent: #0f6e8c;
	--good: #2f6b3c;
	--warn: #8a5a12;
	--bad: #9b3a2c;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ground: #0d1113;
		--panel: #151a1d;
		--sunk: #101518;
		--ink: #e4eaee;
		--ink-soft: #98a5ad;
		--ink-faint: #6a757d;
		--rule: #232b30;
		--accent: #55b4d2;
		--good: #7fbe8c;
		--warn: #d9ac63;
		--bad: #e28a7a;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font: 15px/1.6 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
}

a { color: var(--accent); }

.top {
	background: var(--panel);
	border-bottom: 1px solid var(--rule);
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
	z-index: 5;
}

.top .brand {
	font-weight: 600;
	margin-right: 18px;
	padding: 14px 0;
	white-space: nowrap;
}

.top a.tab {
	padding: 14px 12px;
	text-decoration: none;
	color: var(--ink-soft);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.top a.tab:hover { color: var(--ink); }
.top a.tab.on { color: var(--ink); border-bottom-color: var(--accent); }

.top .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.top .who { color: var(--ink-faint); font-size: 13px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 26px 20px 80px; }

h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 17px; margin: 30px 0 10px; }
.lede { color: var(--ink-soft); margin: 0 0 22px; max-width: 70ch; }

.card {
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: 10px;
	padding: 18px 20px;
	margin-bottom: 16px;
}
.card h3 { margin: 0 0 10px; font-size: 15px; }
.card p { margin: 0 0 10px; color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }

.flash {
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 18px;
	border: 1px solid;
}
.flash.ok  { border-color: var(--good); color: var(--good); }
.flash.bad { border-color: var(--bad); color: var(--bad); }

label { display: block; margin: 0 0 14px; }
label > span.name {
	display: block;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 5px;
}
label > span.hint {
	display: block;
	font-size: 13px;
	color: var(--ink-faint);
	margin-top: 4px;
}

input[type=text], input[type=password], input[type=number],
input[type=datetime-local], select, textarea {
	width: 100%;
	padding: 9px 11px;
	background: var(--ground);
	border: 1px solid var(--rule);
	border-radius: 7px;
	color: var(--ink);
	font: inherit;
}
textarea { resize: vertical; min-height: 90px; }
textarea.code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.55;
	min-height: 460px;
	white-space: pre;
	overflow-wrap: normal;
	overflow-x: auto;
}

input[type=checkbox] { margin-right: 8px; }
label.inline { display: flex; align-items: center; }
label.inline span.name {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	color: var(--ink);
	margin: 0;
}

.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; min-width: 0; }

button, .btn {
	font: inherit;
	padding: 9px 16px;
	border-radius: 7px;
	border: 1px solid var(--rule);
	background: var(--sunk);
	color: var(--ink);
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}
button:hover, .btn:hover { border-color: var(--ink-faint); }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--bad); border-color: var(--bad); background: transparent; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablewrap {
	overflow-x: auto;
	background: var(--panel);
	border: 1px solid var(--rule);
	border-radius: 10px;
}
th {
	text-align: left;
	padding: 11px 14px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	font-weight: 500;
	border-bottom: 1px solid var(--rule);
	white-space: nowrap;
}
td { padding: 10px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.mono, th.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
td.dim { color: var(--ink-soft); }
td.nowrap { white-space: nowrap; }

.tag {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	border-radius: 20px;
	border: 1px solid var(--rule);
	color: var(--ink-soft);
	white-space: nowrap;
}
.tag.on   { color: var(--good); border-color: var(--good); }
.tag.off  { color: var(--ink-faint); }
.tag.info { color: var(--accent); border-color: var(--accent); }
.tag.warning { color: var(--warn); border-color: var(--warn); }
.tag.critical { color: var(--bad); border-color: var(--bad); }

.subs {
	background: var(--sunk);
	border: 1px solid var(--rule);
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 13px;
}
.subs dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; }
.subs dt { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--accent); }
.subs dd { margin: 0; color: var(--ink-soft); }

.gate {
	max-width: 380px;
	margin: 12vh auto;
	padding: 0 20px;
}
.gate .card { padding: 26px 26px 22px; }
.gate h1 { margin-bottom: 4px; }

pre.preview {
	background: var(--sunk);
	border: 1px solid var(--rule);
	border-radius: 8px;
	padding: 14px 16px;
	overflow-x: auto;
	font-size: 12.5px;
	line-height: 1.6;
	margin: 0;
}