:root { color-scheme: dark; }

body {
 margin: 0;
 background: #12181f;
 color: #e7eef6;
 font-family: "Open Sans", sans-serif;
 font-size: 15px;
 line-height: 1.45;
}
a { color: #9fd0f5; }
a:hover { color: #d7efff; }
code {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 background: #0d141b;
 color: #b7ebc9;
 border-radius: 4px;
 padding: 0 5px;
}

.wrap { width: min(1180px, calc(100% - 20px)); margin: 0 auto; }

.top { background: #0e141b; border-bottom: 1px solid #2a3948; }
.bar { display: flex; align-items: center; gap: 18px; min-height: 64px; padding: 10px 0; }
h1 { margin: 0; font-size: 20px; letter-spacing: 0; }
h1 a { color: #f4f8fb; text-decoration: none; }
h1 i { color: #5dcea0; margin-right: 8px; }
.lead { margin: 2px 0 0; color: #c5d2e0; font-size: 14px; }

main.wrap { padding: 14px 0 20px; }

.figures {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 10px;
 margin-bottom: 12px;
}
.figure {
 background: #1b2632;
 border: 1px solid #314556;
 border-radius: 10px;
 padding: 10px 12px;
}
.figure span { display: block; color: #c5d2e0; font-size: 13px; }
.figure strong {
 display: block;
 margin-top: 2px;
 color: #fff;
 font-size: 26px;
 line-height: 1.1;
 font-variant-numeric: tabular-nums;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.figure em { display: block; margin-top: 2px; color: #93a6b8; font-style: normal; font-size: 12px; }
.figure.listed { box-shadow: inset 3px 0 0 #e07a5f; }
.figure.allowed { box-shadow: inset 3px 0 0 #5dcea0; }
.figure.today { box-shadow: inset 3px 0 0 #e2b657; }
.figure.as { box-shadow: inset 3px 0 0 #6cb2e2; }

.cols { display: grid; grid-template-columns: 1.25fr .9fr; gap: 12px; align-items: start; }
.cols + .cols { margin-top: 12px; }

.panel {
 background: #1b2632;
 border: 1px solid #314556;
 border-radius: 10px;
 padding: 12px 14px 14px;
}
.panel h2 { margin: 0; font-size: 17px; color: #fff; font-weight: 700; }
.panel .what { margin: 3px 0 10px; color: #c5d2e0; font-size: 13px; }

.meters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.meters div { background: #121b25; border-radius: 8px; padding: 8px 10px; }
.meters span { display: block; color: #c5d2e0; font-size: 12px; }
.meters strong {
 display: block;
 color: #fff;
 font-size: 22px;
 line-height: 1.15;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.meters em { color: #93a6b8; font-style: normal; font-size: 12px; }

.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chart .grid { stroke: #314556; stroke-width: 1; }
.chart .axis { fill: #e7eef6; font-size: 12px; font-weight: 700; }
.chart .tick { fill: #c5d2e0; font-size: 11px; }
.chart .area { fill: rgba(93, 206, 160, .18); }
.chart .line { fill: none; stroke: #5dcea0; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: #e07a5f; }
.chart .count { fill: #fff; font-size: 12px; font-weight: 700; }

table.data { width: 100%; border-collapse: collapse; }
table.data th {
 text-align: left;
 color: #93a6b8;
 font-size: 12px;
 font-weight: 600;
 padding: 0 8px 6px;
 border-bottom: 1px solid #314556;
}
table.data td {
 padding: 6px 8px;
 border-bottom: 1px solid #263644;
 color: #e7eef6;
 font-size: 14px;
 vertical-align: middle;
}
table.data tr:last-child td { border-bottom: 0; }
table.data .num, table.data td.num {
 text-align: right;
 font-variant-numeric: tabular-nums;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 white-space: nowrap;
}
table.data a { color: #fff; font-weight: 700; text-decoration: none; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
table.data a:hover { color: #9fd0f5; }
table.data img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; border-radius: 2px; }
.muted { color: #93a6b8; }
.icons i { margin-right: 4px; }

.help dl { display: grid; grid-template-columns: 140px 1fr; gap: 4px 8px; margin: 0 0 12px; }
.help dt { color: #93a6b8; }
.help dd { margin: 0; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.downloads { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.downloads a {
 display: inline-block;
 background: #24384a;
 color: #fff;
 text-decoration: none;
 border-radius: 8px;
 padding: 7px 10px;
 font-size: 14px;
}
.downloads a:hover { background: #2e4a62; }
.note { color: #e2b657; font-size: 13px; margin: 0 0 8px; }

.unlist label { display: block; margin: 0 0 8px; color: #c5d2e0; font-size: 13px; }
.unlist input[type="text"] {
 display: block;
 width: 100%;
 box-sizing: border-box;
 margin-top: 4px;
 background: #121b25;
 color: #fff;
 border: 1px solid #314556;
 border-radius: 8px;
 padding: 8px 10px;
 font: inherit;
}
.unlist input[type="submit"] {
 background: #2f6f9f;
 color: #fff;
 border: 0;
 border-radius: 8px;
 padding: 8px 12px;
 font: inherit;
 cursor: pointer;
}
.unlist input[type="submit"]:disabled { opacity: .45; cursor: default; }

.foot {
 background: #0e141b;
 border-top: 1px solid #2a3948;
 color: #93a6b8;
 text-align: center;
 padding: 12px;
 font-size: 13px;
}
.foot a { color: #c5d2e0; }

@media (max-width: 800px) {
 .figures, .cols, .meters, .help dl { grid-template-columns: 1fr 1fr; }
 .cols { grid-template-columns: 1fr; }
 .bar { align-items: flex-start; }
}
@media (max-width: 560px) {
 .figures, .meters { grid-template-columns: 1fr; }
}

body.bl > table {
 width: min(960px, calc(100% - 20px));
 margin: 16px auto;
 background: #1b2632;
 color: #e7eef6;
 border: 1px solid #314556;
 border-radius: 10px;
 border-collapse: separate;
 border-spacing: 0;
 overflow: hidden;
 height: auto !important;
}
body.bl > table tr[bgcolor="#40739e"] td,
body.bl > table tr[bgcolor="#487eb0"] td { background: #0e141b; padding: 12px 14px; }
body.bl .mainText, body.bl .mainTextLink, body.bl .mainTextMini, body.bl .TextMini { color: #f4f8fb; }
body.bl .mainText, body.bl .mainTextLink { font-size: 20px; font-weight: 700; }
body.bl .Title1 { display: block; color: #fff; font-size: 17px; margin: 14px 14px 6px; }
body.bl .Title2 { display: block; color: #e7eef6; font-size: 15px; margin: 2px 14px; line-height: 1.4; }
body.bl .Title2 + br { display: none; }
body.bl .Title2Link { color: #9fd0f5; font-weight: 700; }
body.bl .Title3 { color: #93a6b8; }
body.bl input[type="text"], body.bl textarea, body.bl select {
 background: #121b25; color: #fff; border: 1px solid #314556; border-radius: 8px; padding: 6px 8px; font: inherit;
}
body.bl input[type="submit"] { background: #2f6f9f; color: #fff; border: 0; border-radius: 8px; padding: 7px 12px; }
body.bl table table { width: calc(100% - 28px); margin: 8px 14px 14px; border-collapse: collapse; }
body.bl table table td, body.bl table table th { border-bottom: 1px solid #263644; padding: 6px; color: #e7eef6; }