:root {
	--bg: #fafafa; --fg: #1a1d21; --mut: #667; --line: #d8dbe0;
	--acc: #0a6cbd; --ok-bg: #e4f4e6; --ok-fg: #1c6b2a;
	--err-bg: #fbe7e7; --err-fg: #9c2020; --card: #fff;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #14171c; --fg: #dde1e6; --mut: #99a; --line: #333a44;
		--acc: #4da3e8; --ok-bg: #16321b; --ok-fg: #7fd08d;
		--err-bg: #3a1a1a; --err-fg: #e89090; --card: #1b1f26;
	}
}
* { box-sizing: border-box; }
body {
	margin: 0; background: var(--bg); color: var(--fg);
	font: 15px/1.45 system-ui, sans-serif;
}
a { color: var(--acc); }
header {
	display: flex; align-items: baseline; gap: 1.5rem; flex-wrap: wrap;
	padding: .7rem 1rem; border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--fg); }
.brand span { color: var(--acc); }
header nav { display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
header nav a { text-decoration: none; }
main { max-width: 68rem; margin: 0 auto; padding: 1rem; }
footer { max-width: 68rem; margin: 2rem auto 0; padding: 1rem; color: var(--mut); font-size: .85rem; }
h1 { font-size: 1.4rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.lede { font-size: 1.05rem; }
.flash { padding: .5rem .8rem; border-radius: 6px; }
.flash.ok { background: var(--ok-bg); color: var(--ok-fg); }
.flash.err { background: var(--err-bg); color: var(--err-fg); }

input, button, select {
	font: inherit; color: var(--fg); background: var(--card);
	border: 1px solid var(--line); border-radius: 6px; padding: .35rem .5rem;
}
input:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
button { cursor: pointer; }
button.primary, .btn { background: var(--acc); border-color: var(--acc); color: #fff; text-decoration: none;
	padding: .4rem .9rem; border-radius: 6px; display: inline-block; }
.btn.ghost { background: transparent; color: var(--acc); border: 1px solid var(--acc); }
button.danger { color: var(--err-fg); border-color: var(--err-fg); background: transparent; }
button.linky { background: none; border: none; color: var(--acc); padding: 0; }
form.inline { display: inline-flex; gap: .4rem; align-items: center; margin: .3rem 0; }

.stack { display: flex; flex-direction: column; gap: .8rem; max-width: 26rem; }
.stack label { display: flex; flex-direction: column; gap: .2rem; }
.feats { line-height: 1.9; }

.qgrid { display: flex; flex-wrap: wrap; gap: .5rem .6rem; align-items: end; }
.qgrid label { display: flex; flex-direction: column; font-size: .78rem; color: var(--mut); gap: .15rem; }
.qgrid input { min-width: 5.5rem; }
.qgrid #f_call { min-width: 9rem; text-transform: uppercase; }
.qgrid #f_comment { min-width: 14rem; }
.qgrid .wide { flex: 1; }
.qgrid #nowbtn { padding: .35rem .4rem; }
.wbline { color: var(--mut); margin: .4rem 0 0; }
.wbline b { color: var(--fg); }

.listhead { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.search { display: flex; gap: .4rem; align-items: baseline; }
.tblwrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th { text-align: left; color: var(--mut); font-weight: 600; }
th, td { padding: .3rem .55rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
td.call { font-weight: 600; }
td.cmt { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; }
tr.st-duplicate { color: var(--mut); }
tr.st-error { color: var(--err-fg); }
.pager { display: flex; gap: 1rem; }

.keybox { background: var(--ok-bg); color: var(--ok-fg); padding: .6rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.svc { border: 1px solid var(--line); border-radius: 8px; padding: .3rem 1rem .5rem; margin: 1rem 0; background: var(--card); }
.svc h2 { margin-top: .6rem; }
.svc h2 small { color: var(--mut); font-weight: 400; }
.svc h2 small.on { color: var(--ok-fg); }
.svc label.cb { display: inline-flex; flex-direction: row; align-items: center; gap: .3rem; }
tr.st-failed { color: var(--err-fg); }
tr.st-manual { color: var(--err-fg); }
tr.st-pending { color: var(--mut); }
.fullkey { font-size: 1.05rem; user-select: all; }
pre { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .8rem; overflow-x: auto; font-size: .85rem; }
code { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 0 .25rem; }
pre code { border: none; padding: 0; }
[hidden] { display: none !important; }