:root { --err: #b42318; --warn: #b54708; --info: #475467; --line: #d0d5dd; --bg: #f9fafb; --link: #175cd3; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #101828; background: #fff; }
header { background: #101828; color: #fff; padding: 8px 16px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
header a { color: #fff; text-decoration: none; }
header .brand { font-weight: 600; }
header form { margin-left: auto; }
header input { padding: 4px 8px; width: 260px; border-radius: 4px; border: 0; }
main { padding: 16px; max-width: 1800px; }
a { color: var(--link); }
h1 { font-size: 20px; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 24px 0 8px; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.muted { color: var(--info); }
.small { font-size: 12px; }
table { border-collapse: collapse; width: 100%; margin: 4px 0 12px; }
th, td { border: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: top; }
th { background: var(--bg); position: sticky; top: 0; font-weight: 600; white-space: nowrap; cursor: pointer; }
td.num, th.num { text-align: right; }
.wrap { overflow: auto; max-height: 78vh; }
.wrap.short { max-height: none; overflow: auto hidden; }
.sev { font-size: 11px; font-weight: 600; padding: 1px 5px; border-radius: 3px; color: #fff; white-space: nowrap; }
.sev-error { background: var(--err); } .sev-warning { background: var(--warn); } .sev-info { background: var(--info); }
.status-connected { color: #067647; font-weight: 600; }
.status-notconnect, .status-disabled, .status-errdisabled { color: var(--err); font-weight: 600; }
.cards { display: flex; gap: 12px; flex-wrap: wrap; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px; min-width: 130px; }
.card b { display: block; font-size: 22px; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
dl.kv dt { color: var(--info); } dl.kv dd { margin: 0; }
.flag { display: inline-block; background: #fef0c7; border: 1px solid #fedf89; border-radius: 3px; padding: 0 5px; margin: 1px; font-size: 12px; }
.ok { color: #067647; } .bad { color: var(--err); }
form.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin-bottom: 8px; }
form.filters label { display: flex; flex-direction: column; font-size: 12px; color: var(--info); }
details summary { cursor: pointer; }
pre { margin: 0; font-size: 11px; white-space: pre-wrap; }
.tablefilter { margin: 4px 0; padding: 3px 6px; width: 260px; }
.pager { margin: 8px 0; }
tr.has-findings td:first-child { border-left: 3px solid var(--warn); }
.bar { background: var(--bg); border: 1px solid var(--line); height: 10px; width: 90px; display: inline-block; vertical-align: middle; border-radius: 2px; }
.bar i { display: block; height: 100%; background: var(--link); }
.bar i.hot { background: var(--warn); }
.src { display: inline-block; font-size: 11px; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin: 1px; white-space: nowrap; }
.src-ARP { background: #ecfdf3; border-color: #abefc6; } .src-Streams { background: #eff8ff; border-color: #b2ddff; }
.tag { font-size: 11px; color: var(--info); border: 1px dashed var(--line); border-radius: 3px; padding: 0 4px; }
.chips { margin: 4px 0; }
.chip { display: inline-block; background: #eff8ff; border: 1px solid #b2ddff; border-radius: 12px; padding: 1px 8px; margin-right: 6px; font-size: 12px; }
.chip a { text-decoration: none; color: var(--info); margin-left: 4px; }
td.state-used { color: #067647; } td.state-reserved { color: var(--info); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.dot-green { background: #17b26a; } .dot-amber { background: #f79009; } .dot-red { background: var(--err); } .dot-no-data { background: #98a2b3; }
.stack { display: flex; height: 14px; width: 160px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); }
.stack i { display: block; height: 100%; }
.stack .g { background: #17b26a; } .stack .n { background: #98a2b3; } .stack .a { background: #f79009; } .stack .r { background: #f04438; }
.hist { display: flex; gap: 6px; align-items: flex-end; height: 90px; }
.hist div { width: 34px; text-align: center; font-size: 10px; color: var(--info); }
.hist i { display: block; background: #17b26a; border-radius: 2px 2px 0 0; }
/* a bar whose rules differ from the one before it is not comparable with it */
.hist .break i { background: repeating-linear-gradient(45deg, #17b26a, #17b26a 4px, #8fd9b6 4px, #8fd9b6 8px); }
.hist .break::after { content: "\2605"; display: block; color: var(--info); font-size: 9px; }

/* ---------------------------------------------------------------- signing in and user management */
header .who { margin-left: 12px; display: flex; gap: 12px; align-items: center; }
header .who .muted { color: #98a2b3; }
header form + .who { margin-left: 12px; }

.signin { max-width: 340px; margin: 8vh auto; border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.signin h1 { font-size: 18px; }
.signin label { display: block; margin: 12px 0 0; font-size: 12px; color: var(--info); }
.signin input { display: block; width: 100%; padding: 7px 9px; margin-top: 3px;
                border: 1px solid var(--line); border-radius: 5px; font: inherit; }
.signin button { margin-top: 16px; width: 100%; padding: 8px; font: inherit; font-weight: 600;
                 color: #fff; background: #101828; border: 0; border-radius: 5px; cursor: pointer; }
.signin-error { background: #fef3f2; border: 1px solid #fda29b; color: var(--err);
                border-radius: 5px; padding: 8px 10px; font-size: 13px; }

.note { border-radius: 5px; padding: 8px 10px; font-size: 13px; max-width: 900px; }
.note-ok { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; }
.note-bad { background: #fef3f2; border: 1px solid #fda29b; color: var(--err); }

table.users td { vertical-align: middle; padding: 10px 8px; }
table.users th { cursor: default; }
.user-cell b { font-size: 15px; }
.chip-admin { display: inline-block; background: #eff8ff; border: 1px solid #b2ddff; color: #175cd3;
              border-radius: 10px; padding: 0 8px; font-size: 11px; font-weight: 600; margin-left: 6px; }
form.inline { display: inline; }
.linkish { background: none; border: 0; color: var(--link); cursor: pointer; font: inherit;
           font-size: 12px; text-decoration: underline; padding: 0 0 0 6px; }

/* the per-module grid: every module on one row of labelled dropdowns, like the 383 portal */
form.access { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
form.access label { font-size: 12px; color: var(--info); display: flex; gap: 4px; align-items: center; }
form.access select { font: inherit; font-size: 12px; padding: 2px 4px; border: 1px solid var(--line);
                     border-radius: 4px; background: #fff; }
button.save { background: #101828; color: #fff; border: 0; border-radius: 5px; padding: 4px 14px;
              font: inherit; font-weight: 600; cursor: pointer; }
button.danger { background: #fef3f2; color: var(--err); border: 1px solid #fda29b; border-radius: 5px;
                padding: 4px 12px; font: inherit; cursor: pointer; margin-left: 6px; }
.reset { display: inline-flex; gap: 6px; align-items: center; }
.pw { position: relative; display: inline-block; }
.pw input { padding: 5px 46px 5px 9px; border: 1px solid var(--line); border-radius: 5px; font: inherit; width: 190px; }
.peek { position: absolute; right: 4px; top: 4px; border: 0; background: none; color: var(--link);
        font: inherit; font-size: 11px; cursor: pointer; }
.reset button:not(.peek) { border: 1px solid var(--line); background: #fff; border-radius: 5px;
                           padding: 4px 12px; font: inherit; cursor: pointer; }
.addform { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; border: 1px solid var(--line);
           border-radius: 6px; padding: 12px; max-width: 900px; }
.addform label { font-size: 12px; color: var(--info); display: flex; flex-direction: column; gap: 3px; }
.addform label.check { flex-direction: row; align-items: center; gap: 5px; }
.addform input[name=username], .addform select { padding: 5px 9px; border: 1px solid var(--line);
           border-radius: 5px; font: inherit; }
.addform > button { background: #101828; color: #fff; border: 0; border-radius: 5px; padding: 6px 16px;
           font: inherit; font-weight: 600; cursor: pointer; }