:root {
  --bg: #f5f7fa; --panel: #fff; --text: #102a43; --muted: #627d98; --line: #e1e7ef;
  --accent: #0b6e99; --accent-text: #fff; --cyan: #00c4e8; --ok: #1a7f37; --ok-bg: #e6f4ea;
  --warn: #9a6700; --warn-bg: #fff4d6; --bad: #c62828; --bad-bg: #fdecea; --off-bg: #eef0f2;
  --code-bg: #f0f2f5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1726; --panel: #10233a; --text: #e6edf5; --muted: #8fa5bc; --line: #1f3650;
    --accent: #22c3e6; --accent-text: #062033; --ok: #4ac26b; --ok-bg: #12301c; --warn: #d4a72c; --warn-bg: #2f2610;
    --bad: #ff6b6b; --bad-bg: #3a1618; --off-bg: #182d46; --code-bg: #152a42;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 22px; margin: 4px 0 18px; }
h2 { font-size: 15px; margin: 28px 0 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }

.top { display: flex; align-items: center; gap: 24px; padding: 0 16px; height: 52px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.top nav { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.top nav a { color: var(--muted); padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.top nav a.on, .top nav a:hover { color: var(--text); background: var(--off-bg); text-decoration: none; }
.brand { font-weight: 700; font-size: 17px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.brand.big { font-size: 28px; justify-content: center; }
.mark { width: 22px; height: 22px; flex: none; }
.brand.big .mark { width: 40px; height: 40px; }
.mark-p { fill: currentColor; }
.mark-c { fill: var(--cyan); }
.me { display: flex; align-items: center; gap: 10px; color: var(--muted); margin: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.stat .n { font-size: 28px; font-weight: 700; }
.stat .n span { font-size: 16px; color: var(--muted); font-weight: 500; }
.stat .l { color: var(--muted); }

.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font-size: 12px; color: var(--muted); font-weight: 600; background: color-mix(in srgb, var(--off-bg) 50%, transparent); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tr.dim td, tr.dim th { opacity: .55; }
.actions { width: 1%; white-space: nowrap; }

.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; background: var(--off-bg); color: var(--muted); }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.warn { background: var(--warn-bg); color: var(--warn); }
.pill.off { background: var(--off-bg); color: var(--muted); }
.health { font-weight: 600; }
.health.good, .health.up { color: var(--ok); }
.health.stale { color: var(--bad); }
.health.connecting { color: var(--warn); }
.kind { font-family: ui-monospace, Consolas, monospace; font-size: 12px; padding: 1px 6px; border-radius: 4px; background: var(--off-bg); }
.kind[class*="failed"], .kind[class*="denied"], .k-user_disable, .k-device_delete, .k-user_delete { background: var(--bad-bg); color: var(--bad); }
.k-path_direct, .k-login, .k-admin_login, .k-online, .k-enroll { background: var(--ok-bg); color: var(--ok); }
.k-path_relay { background: var(--warn-bg); color: var(--warn); }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.nowrap { white-space: nowrap; }
.empty { color: var(--muted); padding: 18px; text-align: center; }
.updated { text-align: right; margin-top: 8px; }

.btn { display: inline-block; font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--muted); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 3px 9px; font-size: 12px; }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }

input { font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); min-width: 0; }
input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
label.check { flex-direction: row; align-items: center; gap: 6px; font-size: 14px; color: var(--text); }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0; }
.stack { display: flex; flex-direction: column; gap: 12px; }
form { margin: 0; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.card > summary { list-style: none; }
.card > summary::-webkit-details-marker { display: none; }
.card[open] > summary { margin-bottom: 12px; }
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-body { position: absolute; right: 0; top: 30px; z-index: 20; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,.15); max-height: calc(100vh - 16px); overflow-y: auto; }

.flash { background: var(--ok-bg); color: var(--ok); border-radius: 8px; padding: 10px 14px; margin-bottom: 16px; }
.flash.err { background: var(--bad-bg); color: var(--bad); }
.secret { background: var(--panel); border: 2px solid var(--accent); border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.secret-head { font-weight: 700; margin-bottom: 8px; }
.copyrow { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.copyrow code { flex: 1; background: var(--code-bg); padding: 8px 10px; border-radius: 6px; overflow-x: auto; white-space: nowrap;
  font: 13px ui-monospace, Consolas, monospace; }
.copyrow code.big { font-size: 16px; }
.copy { font: inherit; font-size: 12px; padding: 6px 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 6px; cursor: pointer; }

.matrix th:not(:first-child), .matrix td { text-align: center; }
.matrix tbody th { white-space: nowrap; }
.cell { width: 34px; height: 30px; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); cursor: pointer; font-size: 16px; }
.cell.on { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); font-weight: 700; }
.search input { flex: 1; min-width: 200px; }
.search { margin-bottom: 14px; }

.login { max-width: 340px; margin: 12vh auto 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 28px; text-align: center; }
.login form { text-align: left; margin-top: 16px; }

@media (max-width: 640px) {
  .top { gap: 10px; }
  .me span { display: none; }
  th, td { padding: 8px; }
}

/* tenancy: breadcrumbs, section nav, groups */
.crumbs { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; white-space: nowrap; }
.crumbs a { color: var(--text); font-weight: 600; }
.crumbs .sep { color: var(--muted); }
nav.sub { display: flex; gap: 4px; padding: 6px 16px; background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto; }
nav.sub a { color: var(--muted); padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
nav.sub a.on, nav.sub a:hover { color: var(--text); background: var(--off-bg); text-decoration: none; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cards .card { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cardhead { display: flex; justify-content: space-between; align-items: center; }
.members { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--off-bg); font-size: 12px; }
.chip form { display: inline; }
.chip .x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; }
.chip .x:hover { color: var(--bad); }
select { font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.ok-text { color: var(--ok); font-weight: 600; }
.warn-text { color: var(--warn); font-weight: 600; }

/* public download page */
.download { max-width: 560px; margin: 8vh auto 0; text-align: center; }
.download .card.dl { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; }
.download .dl-title { font-weight: 700; margin-bottom: 2px; }
.login.wide { max-width: 380px; }
svg.qr { display: block; width: 200px; height: 200px; margin: 12px auto; border-radius: 6px; }
.card svg.qr { margin: 12px 0; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 24px; }
.codes code { font-size: 16px; }
.enquiry { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; }
.enquiry.done { opacity: .7; }
.enquiry-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.enquiry-head .right { text-align: right; }
.enquiry-msg { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0 12px; }