:root {
  --bg: #0b0d12;
  --bg2: #10131a;
  --panel: #151922;
  --panel2: #1b2030;
  --line: #252b3b;
  --text: #e6e9f2;
  --muted: #8a93a8;
  --faint: #5c6478;
  --accent: #7c5cff;
  --accent2: #a48bff;
  --ok: #3ddc97;
  --radius: 12px;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --s0: #ff2d78; /* emerg */
  --s1: #ff3b5c; /* alert */
  --s2: #ff4d3d; /* crit */
  --s3: #ff6b4a; /* err */
  --s4: #ffb547; /* warning */
  --s5: #4ea8ff; /* notice */
  --s6: #3ddc97; /* info */
  --s7: #6b7389; /* debug */
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { min-height: 100vh; background: radial-gradient(1200px 600px at 10% -10%, #1a1440 0%, transparent 60%), radial-gradient(900px 500px at 110% 0%, #0f2a3a 0%, transparent 55%), var(--bg); background-attachment: fixed; }
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, .mono { font-family: var(--mono); font-size: 12.5px; }
[hidden] { display: none !important; }

/* top bar */
header#topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 10px 24px; background: rgba(11, 13, 18, .78); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--text); letter-spacing: .2px; }
.brand:hover { text-decoration: none; }
.logo svg { width: 26px; height: 26px; display: block; }
.logo rect { fill: var(--accent); }
.logo path { stroke: #fff; stroke-width: 3.5; fill: none; stroke-linecap: round; }
.logo circle { fill: var(--s4); }
nav#nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav#nav a { color: var(--muted); padding: 6px 12px; border-radius: 8px; font-weight: 500; }
nav#nav a:hover { color: var(--text); background: var(--panel); text-decoration: none; }
nav#nav a.active { color: var(--text); background: var(--panel2); }
.top-right { display: flex; align-items: center; gap: 10px; position: relative; }
.node { color: var(--faint); font-family: var(--mono); font-size: 12px; }
.version { background: var(--panel); border: 1px solid var(--line); color: var(--accent2); padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-size: 12px; cursor: pointer; }
.version:hover { border-color: var(--accent); }
.user-btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.menu { position: absolute; right: 0; top: 38px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; min-width: 180px; box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.menu button:hover { background: var(--panel2); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.live-dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgba(61, 220, 151, .15); }

main { max-width: 1400px; margin: 0 auto; padding: 24px; }
h1 { font-size: 22px; margin: 0; font-weight: 650; letter-spacing: -.2px; }
h2 { font-size: 16px; margin: 0 0 12px; font-weight: 600; }
.sub { color: var(--muted); margin: 2px 0 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* controls */
.btn { background: var(--panel2); border: 1px solid var(--line); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: #3a4258; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #6a48ff; }
.btn.danger { color: var(--s3); }
.btn.danger:hover { border-color: var(--s3); }
.btn.sm { padding: 4px 10px; font-size: 12.5px; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; outline: none; min-width: 0;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124, 92, 255, .2); }
label.field { display: grid; gap: 4px; color: var(--muted); font-size: 12.5px; }
label.field > span.hint { color: var(--faint); font-size: 12px; }
.form-grid { display: grid; gap: 12px; }

/* cards */
.panel { background: linear-gradient(180deg, var(--panel), rgba(21, 25, 34, .85)); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.topic-card { position: relative; display: block; color: var(--text); padding: 16px 16px 14px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); overflow: hidden; transition: transform .12s, border-color .12s; }
.topic-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sev, var(--faint)); }
.topic-card:hover { text-decoration: none; transform: translateY(-2px); border-color: #34405a; }
.topic-card .name { font-weight: 650; font-size: 15px; display: flex; justify-content: space-between; gap: 8px; }
.topic-card .when { color: var(--faint); font-weight: 400; font-size: 12px; white-space: nowrap; }
.topic-card .desc { color: var(--muted); font-size: 12.5px; min-height: 0; }
.topic-card .last { margin: 10px 0; color: var(--text); font-size: 13px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 39px; }
.topic-card .last.empty { color: var(--faint); }
.topic-card.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 2px var(--sev); } to { box-shadow: 0 0 0 0 transparent; } }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); font-weight: 600; }
.meta { color: var(--faint); font-size: 12px; margin-left: auto; }

.sev { display: inline-block; min-width: 64px; text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }

/* event list */
.events { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.ev { display: grid; grid-template-columns: 150px 80px 140px 1fr; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--line); align-items: start; cursor: pointer; border-left: 3px solid transparent; }
.ev:first-child { border-top: 0; }
.ev:hover { background: var(--panel2); }
.ev.new { animation: newrow 2s ease-out; }
@keyframes newrow { from { background: rgba(124, 92, 255, .22); } to { background: transparent; } }
.ev .ts { color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.ev .tp { color: var(--accent2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev .body { min-width: 0; }
.ev .title { font-weight: 600; }
.ev .msg { color: #c9cfdd; white-space: pre-wrap; word-break: break-word; max-height: 3em; overflow: hidden; }
.ev.open .msg { max-height: none; }
.ev .foot { color: var(--faint); font-size: 12px; display: none; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.ev.open .foot { display: flex; }
.ev.sev-0, .ev.sev-1, .ev.sev-2 { border-left-color: var(--s1); }
.ev.sev-3 { border-left-color: var(--s3); }
.ev.sev-4 { border-left-color: var(--s4); }
.tag { background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 0 6px; font-size: 11.5px; color: var(--muted); }
.empty-state { padding: 48px; text-align: center; color: var(--muted); }
.more { display: flex; justify-content: center; padding: 14px; }

/* stats */
.stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 16px; min-width: 120px; }
.stat b { display: block; font-size: 18px; }
.stat span { color: var(--muted); font-size: 12px; }
.bar { height: 4px; background: var(--bg2); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.bar i { display: block; height: 100%; background: var(--accent); }

/* tables */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.revoked td { opacity: .5; }
.tbl .actions { text-align: right; white-space: nowrap; }
.tbl .actions .btn { margin-left: 6px; }
.status { font-size: 12px; font-weight: 600; }
.status.on { color: var(--ok); }
.status.off { color: var(--s3); }
.two-col { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .ev { grid-template-columns: 1fr; gap: 4px; }
  header#topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  main { padding: 16px; }
}
.secret-box { margin-top: 14px; border: 1px solid color-mix(in srgb, var(--s4) 45%, transparent); background: color-mix(in srgb, var(--s4) 8%, transparent); border-radius: 10px; padding: 12px; }
.secret-box code { display: block; background: var(--bg2); padding: 8px 10px; border-radius: 6px; margin: 6px 0; word-break: break-all; user-select: all; }
.secret-box pre { background: var(--bg2); padding: 8px 10px; border-radius: 6px; white-space: pre-wrap; word-break: break-all; margin: 6px 0 0; }

/* login */
.login-wrap { min-height: 80vh; display: grid; place-items: center; }
.login { width: 360px; max-width: 100%; }
.login .brand { justify-content: center; font-size: 24px; margin-bottom: 18px; }
.login .logo svg { width: 36px; height: 36px; }
.err-text { color: var(--s3); font-size: 13px; min-height: 1.4em; }

/* dialogs */
dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 0; max-width: min(720px, 92vw); width: 100%; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
dialog .dlg-head { position: sticky; top: 0; z-index: 1; background: var(--panel); }
.form-grid > div > .secret-box { max-height: min(64dvh, 600px); overflow-y: auto; overscroll-behavior: contain; }
.secret-box > * { min-width: 0; }
.secret-box details { margin-top: 10px; }
.secret-box summary { cursor: pointer; color: var(--accent2); }
dialog::backdrop { background: rgba(5, 6, 10, .7); backdrop-filter: blur(3px); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.dlg-head h2 { margin: 0; }
.dlg-body { padding: 18px; display: grid; gap: 12px; }
.dlg-foot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.x { background: none; border: 0; font-size: 22px; color: var(--muted); cursor: pointer; line-height: 1; }
.md { padding: 6px 22px 20px; max-height: 70vh; overflow: auto; }
.md h1 { font-size: 18px; margin: 14px 0 6px; }
.md h2 { font-size: 15px; margin: 18px 0 6px; color: var(--accent2); }
.md h3 { font-size: 14px; margin: 12px 0 4px; }
.md ul { margin: 4px 0; padding-left: 20px; }
.md li { margin: 3px 0; }
.md code { background: var(--bg2); padding: 1px 5px; border-radius: 4px; }

.tbl tr.clickable { cursor: pointer; }
.tbl tr.clickable:hover td { background: var(--panel2); }
pre.raw { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 12px; max-height: 60vh; overflow: auto; white-space: pre-wrap; word-break: break-word; margin: 0; }
code.inline { background: var(--bg2); padding: 1px 6px; border-radius: 4px; }
.btn.copied { border-color: var(--ok); color: var(--ok); }
.secret-box .btn { margin-top: 2px; }
.secret-box code.inline { display: inline; margin: 0; padding: 1px 6px; }
.cred { display: grid; grid-template-columns: 80px 1fr auto; gap: 8px; align-items: center; color: var(--muted); font-size: 12.5px; }
.secret-box .cred code { margin: 4px 0; }
.ev .body.has-img { display: grid; grid-template-columns: 46px 1fr; column-gap: 12px; }
.ev .body.has-img > :not(.poster) { grid-column: 2; }
.ev .poster { grid-row: 1 / span 4; width: 46px; height: 68px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); background: var(--bg2); }
.ev.open .poster { width: 92px; height: 136px; }
.ev.open .body.has-img { grid-template-columns: 92px 1fr; }
/* Shrink grid/flex items instead of allowing intrinsic text/control widths
   to widen the viewport. Keep table scrolling local, never clip the page. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
main, header#topbar { width: 100%; }
.grid > *, .two-col > *, .form-grid > *, .page-head > *, .toolbar > *,
.ev > *, .ev .body > *, .stats > *, label.field { min-width: 0; max-width: 100%; }
.form-grid, .two-col { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 901px) { .two-col { grid-template-columns: 340px minmax(0, 1fr); } }
label.field > input, label.field > select, label.field > textarea { width: 100%; max-width: 100%; }
.topic-card .name { flex-wrap: wrap; overflow-wrap: anywhere; }
.topic-card .when { flex-shrink: 0; margin-left: auto; }
.topic-card .desc, .topic-card .last, .ev .title, .ev .foot, .tag,
.sub, h1, .stat, .secret-box, .dlg-head h2 { overflow-wrap: anywhere; }
.tag, .chip { max-width: 100%; }
.cred { grid-template-columns: 80px minmax(0, 1fr) auto; }
.top-right { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.node, .user-btn { max-width: 100%; overflow-wrap: anywhere; }
#toasts { max-width: calc(100vw - 36px); }
@media (max-width: 600px) {
  header#topbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  nav#nav { min-width: 0; gap: 2px; }
  nav#nav a { padding: 6px 9px; }
  .top-right { gap: 8px; }
  .page-head, .toolbar { width: 100%; }
  .toolbar input[type=search] { flex: 1 1 160px; max-width: 100%; }
  input, select, textarea { font-size: 16px; } /* prevent iOS focus zoom */
  .ev .body.has-img { grid-template-columns: 46px minmax(0, 1fr); }
  .ev.open .body.has-img { grid-template-columns: 64px minmax(0, 1fr); }
  .ev.open .poster { width: 64px; height: 96px; }
  .cred { grid-template-columns: minmax(0, 1fr) auto; }
  .cred > span { grid-column: 1 / -1; }
  .empty-state { padding: 24px 12px; }
}
#toasts { position: fixed; bottom: 18px; right: 18px; display: grid; gap: 8px; z-index: 50; }
.toast { background: var(--panel2); border: 1px solid var(--line); border-left: 3px solid var(--ok); padding: 10px 14px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 380px; }
.toast.err { border-left-color: var(--s3); }

/* topic filters (0.7.0) */
.chip-btn { cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; transition: opacity .15s, box-shadow .15s; }
.chip-btn:hover { box-shadow: 0 0 0 1px var(--c); }
.chip-btn.on { background: color-mix(in srgb, var(--c) 34%, transparent); box-shadow: 0 0 0 2px var(--c); }
.chip-btn.dim { opacity: .45; }
.chip-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.btn.toggle { font-family: ui-monospace, monospace; }
.btn.toggle.on { background: color-mix(in srgb, var(--accent, #6aa7ff) 30%, transparent); border-color: var(--accent, #6aa7ff); }
.custom-range { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.custom-range[hidden] { display: none; }
.custom-range input { max-width: 100%; }
.filter-info { margin: -6px 0 10px; min-height: 0; }
.filter-info:empty { display: none; }
mark { background: color-mix(in srgb, #ffd54a 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.topic-filters input[type=search] { min-width: 180px; }

/* syslog (0.8.0) */
h2.section { font-size: 15px; margin: 22px 0 4px; }

/* sortable tables, has-rule badge, storage bar (0.9.2) */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text, #fff); }
th.sortable.on { color: var(--accent2); }
th .arrow { font-size: 10px; }
.status.warn { color: var(--s4); background: color-mix(in srgb, var(--s4) 14%, transparent); }
.bar.full i { background: var(--s3); }

/* trashed / lost chips (0.11.0) */
.chip.loss { color: var(--s4); border-color: color-mix(in srgb, var(--s4) 40%, transparent); }
.chip.loss.bad { color: var(--s3); border-color: color-mix(in srgb, var(--s3) 40%, transparent); }

/* tail -F (0.13.0) */
dialog.tail { max-width: none; width: calc(100vw - 24px); height: calc(100dvh - 24px); max-height: none; overflow: hidden; display: flex; flex-direction: column; background: #07080b; border-color: #23262f; }
dialog.tail:not([open]) { display: none; }
.tail-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #23262f; background: #0d0f14; flex-wrap: wrap; }
.tail-cmd { font-family: var(--mono, ui-monospace, monospace); font-size: 13px; color: #8fe388; margin-right: auto; }
.tail-status { font-size: 12px; color: var(--muted); }
.tail-head .x { background: none; border: 0; color: var(--muted); font-size: 22px; cursor: pointer; padding: 0 4px; }
.tail-body { flex: 1; overflow: auto; padding: 8px 12px 16px; font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; line-height: 1.5; color: #d6d9e0; white-space: pre; }
.tail-body.wrap { white-space: pre-wrap; word-break: break-word; }
.tl { padding: 0 2px; border-left: 2px solid transparent; }
.tl[data-sev="0"], .tl[data-sev="1"], .tl[data-sev="2"], .tl[data-sev="3"] { border-left-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.tl[data-sev="4"] { border-left-color: var(--c); }
.tl-ts { color: #6c7386; }
.tl-host { color: #7aa2f7; }
.tl-app { color: #9d7cd8; }
.tl-sev { color: var(--c); font-weight: 600; }
.tl-title { color: #e0af68; }
.tl[data-sev="0"] .tl-msg, .tl[data-sev="1"] .tl-msg, .tl[data-sev="2"] .tl-msg, .tl[data-sev="3"] .tl-msg { color: #ffb4b4; }

/* tail -F terminal cursor (0.14.0) */
.tail-body:focus { outline: none; }
.tl-typed { color: #f5f7fa; }
.tl-input { color: #f5f7fa; }
.tail-body .cursor { display: inline-block; width: .6em; height: 1.15em; vertical-align: text-bottom; background: #8a90a0; }
.tail-body:focus .cursor { background: #d6d9e0; animation: tail-blink 1.06s steps(1) infinite; }
@keyframes tail-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tail-body:focus .cursor { animation: none; } }

/* topic labels (0.14.0) */
.label-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 14px; }
.page-head + .label-bar { margin-top: -4px; }
.label-bar-title { font-size: 12px; color: var(--muted); margin-right: 2px; text-transform: uppercase; letter-spacing: .04em; }
.lbl { font: inherit; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text, #e6e8ee); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.lbl:hover { border-color: var(--accent, #7c5cff); }
.lbl.on { background: color-mix(in srgb, var(--accent, #7c5cff) 28%, transparent); border-color: var(--accent, #7c5cff); }
.lbl.none { font-style: italic; }
.lbl.small { font-size: 11px; padding: 0 7px; cursor: default; color: var(--muted); }
.card-labels { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
.label-section + .label-section { margin-top: 8px; }
.label-section > h2.section, h2.section { display: flex; align-items: center; gap: 8px; }
h2.section .count { font-size: 12px; font-weight: 600; color: var(--muted); background: color-mix(in srgb, var(--muted) 15%, transparent); border-radius: 999px; padding: 0 8px; }
.order-list { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.order-list li { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; }
.order-list li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }