:root { --black:#000; --white:#fff; --gold:#EEE8AA; --blue:#03509B; --line:#e3e3e3; --muted:#6b6b6b; --ok:#1f9d55; --bad:#c0392b; --warn:#b7791f; }
* { box-sizing: border-box; }
/* the installed app's title / status bar is black (theme-color #000000): the root is black too, so
   an overscroll at the top or the area behind the bar never shows a white strip; the body covers
   the viewport with the page colour */
html { background:#000; }
body { margin:0; min-height:100vh; font-family: Arial, sans-serif; font-size:15px; line-height:1.5; color:#111; background:#fafafa; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
header#top { background:var(--black); color:var(--white); display:flex; align-items:center; gap:24px; padding:0 24px; height:56px; }
.brand { color:var(--white); font-weight:bold; font-size:20px; } .brand:hover { text-decoration:none; }
.glyph { color:var(--gold); font-style:italic; font-size:24px; margin-right:4px; }
nav#nav { display:flex; gap:18px; flex:1; } nav#nav a { color:#ddd; } nav#nav a.active { color:var(--gold); }
nav#nav .spacer { flex:1; } nav#nav .who { color:#aaa; }
/* phones: the header grows instead of spilling its text out of the black band under the black title bar */
@media (max-width: 640px) { header#top { height:auto; min-height:56px; flex-wrap:wrap; gap:6px 16px; padding:10px 16px; } .brand { white-space:nowrap; } nav#nav { flex:1 1 100%; gap:16px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; padding-bottom:2px; } nav#nav::-webkit-scrollbar { display:none; } }
main { max-width:1200px; margin:0 auto; padding:24px; }
h1 { font-size:26px; margin:0 0 16px; } h2 { font-size:19px; margin:28px 0 10px; } h3 { font-size:16px; margin:18px 0 8px; }
.muted { color:var(--muted); } .small { font-size:13px; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size:13px; }
.card { background:#fff; border:1px solid var(--line); border-radius:5px; padding:16px 18px; margin-bottom:16px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
.stat .label { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; } .stat .value { font-size:18px; font-weight:bold; }
table { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:5px; }
th, td { text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:#f4f4f4; }
tr.click { cursor:pointer; } tr.click:hover td { background:#f8f8f2; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; background:#bbb; } .dot.on { background:var(--ok); }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; background:#eee; }
.badge.open { background:#fdecea; color:var(--bad); } .badge.in_progress { background:#fff4e0; color:var(--warn); }
.badge.resolved, .badge.closed { background:#e8f6ee; color:var(--ok); } .badge.admin { background:var(--black); color:var(--gold); }
form.inline { display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end; }
label { display:block; font-size:13px; font-weight:bold; margin:10px 0 4px; }
input, select, textarea { font:inherit; padding:7px 9px; border:1px solid #ccc; border-radius:5px; background:#fff; }
textarea { width:100%; min-height:120px; }
button, .btn { font:inherit; padding:7px 14px; border-radius:5px; border:1px solid #222; background:var(--black); color:var(--gold); cursor:pointer; }
button.secondary { background:#fff; color:#111; border-color:#bbb; } button.danger { background:#fff; color:var(--bad); border-color:var(--bad); }
button:disabled { opacity:.5; cursor:default; }
.err { color:var(--bad); } .ok { color:var(--ok); }
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tabs a { padding:8px 14px; color:#333; border-bottom:2px solid transparent; } .tabs a.active { border-color:var(--black); font-weight:bold; }
.login { max-width:380px; margin:60px auto; } .login input { width:100%; } .login button { width:100%; margin-top:16px; }
.qr { display:block; margin:10px auto; width:200px; height:200px; image-rendering:pixelated; }
pre.cmd { background:#111; color:#eee; padding:10px 12px; border-radius:5px; overflow-x:auto; white-space:pre-wrap; word-break:break-all; font-size:13px; }
.term-wrap { background:#000; border-radius:5px; padding:8px; height:calc(100vh - 210px); min-height:300px; }
.term-wrap .xterm { height:100%; }
.bar { height:8px; background:#eee; border-radius:4px; overflow:hidden; min-width:80px; } .bar > span { display:block; height:100%; background:var(--blue); }
.bar.hot > span { background:var(--bad); }
svg.chart { width:100%; height:140px; background:#fff; border:1px solid var(--line); border-radius:5px; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; } .right { margin-left:auto; }
.tray-row { display:grid; grid-template-columns: 130px 1fr 1fr auto; gap:8px; margin-bottom:6px; } .tray-row input, .tray-row select { width:100%; }
.desk-bar { margin-bottom:8px; } .desk-bar select, .desk-bar button { padding:5px 10px; font-size:14px; }
.desk-wrap { position:relative; background:#111; border-radius:5px; height:calc(100vh - 230px); min-height:300px; overflow:auto; display:flex; align-items:flex-start; justify-content:flex-start; }
.desk-wrap.fit { align-items:center; justify-content:center; overflow:hidden; }
.desk-wrap.fit canvas.desk { max-width:100%; max-height:100%; object-fit:contain; }
.desk-wrap:fullscreen { height:100vh; border-radius:0; }
canvas.desk { display:block; outline:none; cursor:default; image-rendering:auto; flex:none; }
.desk-wrap.fit canvas.desk { flex:initial; }
.setting-row { display:grid; grid-template-columns: 1fr 340px; gap:16px; align-items:start; margin-bottom:10px; }
.setting-ctl select { width:100%; } .setting-ctl .effective { margin-top:6px; }
.badge.outdated { background:#fff4e0; color:var(--warn); } .badge.failed { background:#fdecea; color:var(--bad); }
.badge.beta { background:#efe7ff; color:#5b3fa8; }
.update-panel select[data-setting="agent.release_channel"] { max-width:100%; }
.update-grid:has(.chan-stat) { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); grid-auto-flow: row dense; }
@media (min-width: 420px) { .update-grid > .chan-stat { grid-column: span 2; } }
.update-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-bottom:10px; }
.update-panel .warn { color:var(--warn); } .nowrap { white-space:nowrap; }
/* install token copy buttons, ⋯ menus, dialogs, toast */
.icon-btn { display:inline-flex; align-items:center; justify-content:center; width:32px; height:30px; padding:0; border-radius:5px; border:1px solid #bbb; background:#fff; color:#111; cursor:pointer; }
.icon-btn:hover:not(:disabled) { border-color:var(--black); background:#f4f4f4; } .icon-btn:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.icon-btn .icon { width:16px; height:16px; display:block; }
.os-copy { display:inline-flex; gap:6px; }
.kebab { font-size:18px; line-height:1; letter-spacing:1px; }
.menu-wrap { position:relative; display:inline-block; } .menu-wrap .hint { margin-left:6px; }
.menu { position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:190px; background:#fff; border:1px solid var(--line); border-radius:6px; box-shadow:0 6px 24px rgba(0,0,0,.14); padding:4px 0; }
.menu-item { display:block; width:100%; text-align:left; background:none; border:0; color:#111; padding:8px 14px; border-radius:0; }
.menu-item:hover:not(:disabled) { background:#f4f4f4; } .menu-item.danger-text { color:var(--bad); }
td.menu-cell { width:44px; text-align:right; }
dialog.modal { border:1px solid var(--line); border-radius:8px; padding:20px 22px; max-width:520px; width:calc(100% - 40px); box-shadow:0 12px 40px rgba(0,0,0,.25); }
dialog.modal.wide { max-width:760px; } dialog.modal::backdrop { background:rgba(0,0,0,.4); }
dialog.modal h2 { margin-top:0; } dialog.modal input { width:100%; } dialog.modal input[type=checkbox], dialog.modal input[type=radio] { width:auto; } .modal-buttons { margin-top:16px; }
table.kv th { width:170px; text-transform:none; letter-spacing:0; font-size:13px; } table.kv, table.compact { margin-bottom:8px; }
table.compact th, table.compact td { padding:6px 10px; }
.toast { position:fixed; right:24px; bottom:24px; z-index:100; background:#111; color:#fff; padding:10px 16px; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,.25); opacity:0; transform:translateY(8px); transition:opacity .15s, transform .15s; pointer-events:none; }
.toast.show { opacity:1; transform:none; } .toast.bad { background:var(--bad); }
.badge.tok-active { background:#e8f6ee; color:var(--ok); } .badge.tok-revoked, .badge.tok-expired, .badge.tok-used_up { background:#eee; color:var(--muted); }
.badge.uninstalled { background:#eee; color:var(--muted); } tr.gone td { color:var(--muted); }
.banner { padding:10px 14px; } .warn-banner { background:#fff8eb; border-color:#f0d9a8; } .gone-banner { background:#f4f4f4; }
@media (prefers-color-scheme: dark) {
  .icon-btn, .menu, .menu-item, dialog.modal { background:#1e1e1e; color:#eee; border-color:#555; }
  .icon-btn:hover:not(:disabled), .menu-item:hover:not(:disabled) { background:#2c2c2c; border-color:#999; }
  dialog.modal table, dialog.modal th, dialog.modal td { background:#1e1e1e; color:#eee; border-color:#444; }
  .toast { background:#eee; color:#111; }
}

/* remote desktop annotations */
canvas.annot-layer { position:absolute; pointer-events:none; touch-action:none; }
canvas.annot-layer.active { pointer-events:auto; cursor:crosshair; }
.annot-text { position:absolute; z-index:5; font-size:14px; padding:3px 6px; min-width:180px; }
.annot-bar { margin-bottom:8px; gap:6px; align-items:center; }
.annot-bar .annot-hint { flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.annot-bar .seg { display:inline-flex; border:1px solid #c9ced6; border-radius:5px; overflow:hidden; }
.annot-bar .seg button { border:0; border-radius:0; padding:5px 10px; font-size:14px; background:#fff; color:#222; }
.annot-bar .seg button.on { background:#03509B; color:#fff; }
.annot-bar button.swatch { width:22px; height:22px; padding:0; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #888; }
.annot-bar button.swatch.on { box-shadow:0 0 0 2px #03509B; }
.annot-bar[aria-disabled="true"] .seg, .annot-bar[aria-disabled="true"] .tools { opacity:.45; }
.perm-panel .perm-row { display:flex; gap:10px; align-items:center; margin:4px 0; }
.perm-ok { color:#1a7f37; font-weight:600; } .perm-bad { color:#b42318; font-weight:600; }
/* access control */
.perm-areas { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:10px; margin:10px 0; }
fieldset.perm-area { border:1px solid var(--line); border-radius:5px; padding:8px 12px; } fieldset.perm-area legend { font-weight:bold; font-size:13px; }
label.perm-check { font-weight:normal; margin:4px 0; }
.groups-layout { display:grid; grid-template-columns: minmax(320px, 1fr) 1fr; gap:16px; align-items:start; }
.group-node { display:flex; gap:6px; align-items:center; padding:5px 8px; border-radius:4px; flex-wrap:wrap; }
.group-node.sel { background:#f8f8f2; } .group-node .group-actions { margin-left:auto; display:inline-flex; gap:4px; }
.group-node .group-actions button { padding:2px 8px; font-size:13px; }
@media (max-width: 800px) { .groups-layout { grid-template-columns:1fr; } }
/* service status hierarchy (status.js) */
:root { --s-up:#1f9d55; --s-degraded:#d69e2e; --s-down:#c0392b; --s-unknown:#9aa0a6; --s-maintenance:#3b6fb6; }
.sbadge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; font-weight:bold; color:#fff; background:var(--s-unknown); white-space:nowrap; }
.sbadge.s-up { background:var(--s-up); } .sbadge.s-degraded { background:var(--s-degraded); } .sbadge.s-down { background:var(--s-down); } .sbadge.s-maintenance { background:var(--s-maintenance); }
.sdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; background:var(--s-unknown); }
.sdot.s-up { background:var(--s-up); } .sdot.s-degraded { background:var(--s-degraded); } .sdot.s-down { background:var(--s-down); } .sdot.s-maintenance { background:var(--s-maintenance); }
.status-banner { border-radius:6px; padding:14px 18px; margin-bottom:14px; color:#fff; background:var(--s-unknown); }
.status-banner.s-up { background:var(--s-up); } .status-banner.s-degraded { background:var(--s-degraded); } .status-banner.s-down { background:var(--s-down); }
.status-banner.s-maintenance { background:var(--s-maintenance); } .status-banner.s-none { background:#fff; color:#333; border:1px solid var(--line); }
.status-banner-title { font-size:20px; font-weight:bold; }
.status-layers { display:flex; flex-direction:column; gap:0; margin:12px 0 8px; }
.status-layer { display:grid; grid-template-columns:150px 1fr; gap:12px; padding:10px 0; border-top:1px dashed var(--line); position:relative; }
.status-layer:first-child { border-top:0; }
.status-layer + .status-layer::before { content:'↑'; position:absolute; left:64px; top:-12px; color:#bbb; font-size:14px; background:#fafafa; padding:0 4px; }
.status-layer-label { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding-top:8px; font-weight:bold; }
.status-layer-nodes { display:flex; flex-wrap:wrap; gap:10px; }
button.scard { display:block; text-align:left; width:220px; background:#fff; color:#111; border:1px solid var(--line); border-left:6px solid var(--s-unknown); border-radius:6px; padding:8px 10px; cursor:pointer; font-size:14px; }
button.scard:hover { box-shadow:0 2px 10px rgba(0,0,0,.08); }
.scard.s-up { border-left-color:var(--s-up); } .scard.s-degraded { border-left-color:var(--s-degraded); } .scard.s-down { border-left-color:var(--s-down); } .scard.s-maintenance { border-left-color:var(--s-maintenance); }
.scard.root { box-shadow:0 0 0 2px var(--s-down); } .scard.root.s-degraded { box-shadow:0 0 0 2px var(--s-degraded); } .scard.root.s-unknown { box-shadow:0 0 0 2px var(--s-unknown); }
.scard.impacted { opacity:.55; } .scard.impacted .sbadge { filter:saturate(.4); }
.scard-top { display:flex; gap:6px; align-items:flex-start; justify-content:space-between; }
.scard-note { font-size:12px; color:var(--muted); font-style:italic; } .root-note { font-size:12px; color:var(--s-down); font-weight:bold; font-style:normal; }
.scard-msg { color:#444; word-break:break-word; max-height:3em; overflow:hidden; } .scard-meta { margin-top:4px; }
.status-board { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px; }
.board-card { background:#fff; border:1px solid var(--line); border-top:6px solid var(--s-unknown); border-radius:6px; padding:12px 14px; }
.board-card.s-up { border-top-color:var(--s-up); } .board-card.s-degraded { border-top-color:var(--s-degraded); } .board-card.s-down { border-top-color:var(--s-down); } .board-card.s-maintenance { border-top-color:var(--s-maintenance); }
.board-list { list-style:none; padding:0; margin:8px 0 0; font-size:14px; } .board-list li { margin:3px 0; } .board-list li.impacted { opacity:.6; } .board-list li.click { cursor:pointer; } .board-list li.click:hover { text-decoration:underline; }
svg.spark { width:220px; height:34px; background:#fff; border:1px solid var(--line); border-radius:4px; display:block; }
.parent-list, .comp-list { max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:5px; padding:6px 10px; }
.comp-member { padding-left:16px; } .comp-group { margin-top:6px; font-weight:bold; }
.check-timing input { width:110px; }
@media (max-width: 800px) { .status-layer { grid-template-columns:1fr; } button.scard { width:100%; } }
.sbadge.s-impacted { background:#c9b98f; } .board-card.s-impacted { border-top-color:#c9b98f; }
/* support queue (requests) */
.nav-badge { display:inline-block; min-width:18px; padding:0 5px; margin-left:5px; border-radius:9px; background:var(--gold, #EEE8AA); color:#141414; font-size:11px; font-weight:bold; text-align:center; line-height:18px; }
.nav-badge.alert { background:#d93838; color:#fff; }
.badge.req-waiting_review { background:#efe7ff; color:#5b3fa8; } .badge.req-queued { background:#fdecea; color:var(--bad); }
.badge.req-assigned { background:#fff4e0; color:var(--warn); } .badge.req-waiting_on_user { background:#e6f0fb; color:#2d5f9a; }
.badge.req-resolved, .badge.req-closed { background:#e8f6ee; color:var(--ok); }
tr.unread td strong::before { content:"● "; color:#d93838; }
.preview { max-width:420px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card.notice { border-left:4px solid var(--gold, #EEE8AA); }
.req-actions { flex-wrap:wrap; gap:8px; margin:6px 0 12px; }
.req-chat { background:#1b1c1f; border-radius:12px; padding:10px 12px; height:min(64vh, 680px); }