:root { --pri: #1565c0; --head: #00b0f0; --ok: #e3f4d7; --bad: #fde3e3; --line: #d6dce4; --bg: #f3f6fa; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 Arial, sans-serif; background: var(--bg); color: #222; }
nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: var(--pri); padding: 8px 16px; }
nav b { color: #fff; margin-right: 16px; }
nav a { color: #dbe8ff; text-decoration: none; padding: 6px 10px; border-radius: 4px; }
nav a:hover, nav a.on { background: rgba(255,255,255,.18); color: #fff; }
nav .right { margin-left: auto; }
main { padding: 16px; }
h1 { font-size: 20px; margin: 0 0 12px; } h1 small { color: #888; font-weight: normal; }
h2 { font-size: 15px; margin: 0 0 8px; color: var(--pri); }

.card { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cards span { display: block; color: #666; font-size: 12px; text-transform: uppercase; }
.cards b { display: block; font-size: 22px; margin: 4px 0; }
.cards .hi { background: var(--pri); color: #fff; } .cards .hi span { color: #dbe8ff; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; }
.red { color: #c62828; }

.bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.bar h1 { margin: 0 auto 0 0; }
i.meter { display: block; height: 10px; background: var(--head); border-radius: 3px; margin: 0; }
.btn, button { background: var(--pri); color: #fff; border: 0; padding: 7px 14px; border-radius: 4px; cursor: pointer; text-decoration: none; font: inherit; }
.btn.grey { background: #607d8b; }
button.link { background: none; color: #c62828; padding: 0; }
input, select, textarea { width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 4px; font: inherit; }
.bar input { width: 220px; }

.scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid var(--line); padding: 6px 8px; text-align: left; white-space: nowrap; }
th { background: var(--head); color: #000; position: sticky; top: 0; cursor: pointer; }
tfoot td { background: #ffc000; font-weight: bold; }
td.n { text-align: right; }
tr.ok td { background: var(--ok); } tr.bad td { background: var(--bad); }
tbody tr:hover td { background: #fffbe6; }
.act { display: flex; gap: 10px; } .act form { margin: 0; } .act a { color: var(--pri); }

.form { max-width: 560px; display: grid; gap: 12px; }
.form label { display: grid; gap: 4px; font-weight: bold; }
.msg { background: var(--bad); padding: 8px; border-radius: 4px; margin: 0; }
body.login { display: grid; place-items: center; min-height: 100vh; }
body.login .form { width: min(340px, 92vw); }
.btn.red-bg { background: #c62828; } button:disabled { opacity: .5; cursor: default; }
th.chk, td.chk { width: 32px; text-align: center; cursor: default; } .chk input { width: auto; }