* { box-sizing: border-box; }
body { margin: 0; font: 13px/1.5 system-ui, "Segoe UI", Roboto, sans-serif; color: #1c1f24; background: #f4f6f8; }
header { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #10233b; color: #fff; }
header h1 { font-size: 16px; margin: 0; font-weight: 600; }
.pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; background: #22456f; font-size: 12px; }
.pill.bad { background: #7a1f1f; }
main { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; padding: 14px; align-items: start; }
.col { background: #fff; border: 1px solid #e2e6ea; border-radius: 8px; padding: 12px 14px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #55606c; margin: 18px 0 8px; }
h2:first-child { margin-top: 0; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #eef1f4; vertical-align: top; }
th { color: #7a8592; font-weight: 600; }
code, .mono { font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.dot.on { background: #23a559; } .dot.off { background: #c4ccd4; }
form label { display: block; margin: 6px 0; }
form input, form select { width: 100%; padding: 5px 7px; border: 1px solid #cfd6dd; border-radius: 5px; font: inherit; }
form button, .mini, .mini { cursor: pointer; }
form button[type=submit] { margin-top: 8px; padding: 7px 16px; border: 0; border-radius: 6px; background: #1c64d1; color: #fff; font-weight: 600; }
.mini { font-size: 11px; padding: 2px 8px; margin-left: 8px; border: 1px solid #cfd6dd; border-radius: 5px; background: #f7f9fb; }
button.mini.row { margin: 0; }
.muted, .row-muted { color: #8a95a1; }
#log { height: 70vh; overflow: auto; border: 1px solid #e6eaee; border-radius: 6px; background: #0d1b2a; padding: 8px; }
.line { font-family: ui-monospace, Consolas, monospace; font-size: 11px; white-space: pre-wrap; word-break: break-word; padding: 3px 4px; border-bottom: 1px solid #16283c; color: #c9d4e0; }
.line .t { color: #6c7c8c; }
.line .tag { display: inline-block; min-width: 116px; font-weight: 700; }
.line.dir-out { background: #0f2536; }
.tag.command_payment, .tag.command_dynamic_qr { color: #6cb0ff; }
.tag.ack, .tag.ack_command { color: #7bd88f; }
.tag.play_result { color: #34d399; }
.tag.heartbeat { color: #9aa7b3; }
.tag.boot, .tag.config { color: #d6b25e; }
.tag.shutdown, .tag.authn_deny, .tag.authz_deny, .tag.bootstrap_deny { color: #ff7a7a; }
.tag.authn_ok, .tag.bootstrap_ok { color: #7bd88f; }
.tag.raw, .tag.unknown { color: #b98cff; }
details { margin-top: 2px; } details summary { cursor: pointer; color: #7c8 b0; }
details pre { margin: 4px 0 0; color: #a7b6c6; }
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } #log { height: 50vh; } }