:root {
	--ink: #1c1915;
	--muted: #6b645b;
	--line: #e4dccf;
	--paper: #f6f1e8;
	--card: #fffdf8;
	--accent: #8a3b12;
	--accent-ink: #fff8f3;
	--ok: #1f6b45;
	--quiet: #8a5a12;
}
* { box-sizing: border-box; }
body {
	margin: 0;
	font: 16px/1.45 "Segoe UI", sans-serif;
	color: var(--ink);
	background: var(--paper);
}
a { color: inherit; }
.top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 22px;
	background: #241c16;
	color: #f6f1e8;
}
.top a { text-decoration: none; }
.brand { font-weight: 700; letter-spacing: 0.04em; }
.top nav { display: flex; gap: 16px; align-items: center; }
.top nav a:hover { text-decoration: underline; }
.who { color: #cbbba8; }
main { max-width: 1200px; margin: 0 auto; padding: 28px 20px 60px; }
h1 { font-size: 28px; margin: 0 0 8px; }
h2 { margin: 0 0 8px; font-size: 20px; }
.muted { color: var(--muted); }
.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px;
}
.login { max-width: 380px; margin-top: 40px; }
label { display: block; margin: 14px 0 6px; font-size: 14px; }
input[type="search"], input[type="password"], input[type="text"], input:not([type]) {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d9d0c3;
	border-radius: 8px;
	background: #fff;
	font: inherit;
}
button {
	border: 0;
	background: var(--accent);
	color: var(--accent-ink);
	padding: 9px 14px;
	border-radius: 8px;
	font: inherit;
	cursor: pointer;
}
button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
button.on { outline: 2px solid var(--accent); }
.error { color: #8f1d1d; background: #fde8e8; padding: 8px 10px; border-radius: 8px; }
.modules { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.module {
	display: block;
	text-decoration: none;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px;
}
.module strong { display: block; font-size: 18px; margin-bottom: 6px; }
.module span { color: var(--muted); }
.module:hover { border-color: var(--accent); }
.kpis { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 120px; }
a.kpi { text-decoration: none; color: inherit; display: block; }
a.kpi:hover { border-color: var(--accent); }
.kpi strong { display: block; font-size: 22px; line-height: 1.1; }
.kpi span { color: var(--muted); font-size: 13px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 140px; max-width: 320px; }
.fact span { display: block; color: var(--muted); font-size: 13px; }
.filters-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 12px 0; }
.filters-form label { font-size: 13px; color: var(--muted); }
.filters-form input { width: auto; min-width: 160px; }
a.ghost.btn { display: inline-block; background: transparent; color: var(--ink); border: 1px solid var(--line); padding: 6px 10px; border-radius: 8px; text-decoration: none; font-size: 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0; }
.toolbar input { max-width: 320px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.filters button.on, #unlinked-dbs.on { background: var(--accent); color: var(--accent-ink); outline: none; }
#unlinked-dbs { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.grid { width: 100%; border-collapse: collapse; background: var(--card); }
.grid th, .grid td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.grid th { font-size: 13px; color: var(--muted); font-weight: 600; }
.db { font-family: ui-monospace, monospace; font-size: 13px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tag { display: inline-block; font-size: 12px; padding: 2px 7px; border-radius: 999px; }
.tag.active { background: #e5f6ec; color: var(--ok); }
.tag.quiet { background: #f8eedd; color: var(--quiet); }
.tag.unknown { background: #eeeae4; color: var(--muted); }
.tag.inactive, .tag.old { background: #eeeae4; color: var(--muted); }
.tag.hosted { background: #e5f6ec; color: var(--ok); }
.tag.local { background: #f8eedd; color: var(--quiet); }
.tag.copy-old { background: #f8eedd; color: var(--quiet); }
.tag.copy-new { background: #e5f6ec; color: var(--ok); }
.tag.copy-copied { background: #e7eef8; color: #1d4e89; }
.tag.copy-offline, .tag.copy-waiting, .tag.copy-skipped { background: #eeeae4; color: var(--muted); }
#client-view[hidden], #db-view[hidden] { display: none; }
.dt-container { margin-top: 8px; }
.dt-container .dt-search input,
.dt-container .dt-length select { width: auto; max-width: 240px; }
.dt-container .dt-paging button,
.dt-container .dt-buttons button,
.dt-container .dt-length select {
	background: #fff;
	color: var(--ink);
	border: 1px solid var(--line);
	padding: 6px 10px;
}
.dt-container .dt-paging button.current {
	background: var(--accent);
	color: var(--accent-ink);
}
button.pay { padding: 4px 8px; font-size: 14px; }
button.pay small { color: var(--muted); }
.dialog.wide { width: min(720px, 100%); }
.dialog.invoice { width: min(980px, 100%); max-height: 80vh; overflow: auto; }
.dialog.invoice .grid td, .dialog.invoice .grid th { font-size: 14px; }
.paygrid { margin: 12px 0; }
.mask {
	position: fixed; inset: 0; background: rgba(28, 25, 21, 0.45);
	display: flex; align-items: flex-start; justify-content: center; padding: 8vh 16px;
}
.mask[hidden] { display: none; }
.dialog { width: min(560px, 100%); }
#dblist { list-style: none; margin: 12px 0; padding: 0; max-height: 280px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
#dblist li { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--line); }
#dblist li small { display: block; color: var(--muted); }
#dblist li.pick { background: #f3e6dc; }
.row { display: flex; gap: 8px; }
@media (max-width: 720px) {
	.modules { grid-template-columns: 1fr; }
	.clients th:nth-child(2), .clients td:nth-child(2) { display: none; }
}