:root { color-scheme: dark; font-family: "Segoe UI", Arial, sans-serif; color: #ffff00; background: #080a09; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 20px 28px; border-bottom: 1px solid #52685a; background: #141c17; }
.identity { display: flex; align-items: center; gap: 14px; }
.app-icon { background: #b4d1b5; color: #071c0e; font-size: 22px; font-weight: 800; padding: 12px; border-radius: 4px; }
h1 { color: #f3f8f3; font-size: 23px; margin: 0 0 3px; font-weight: 600; }
p { margin: 0; }
#project, .read-only, footer { color: #b3bdb4; font-size: 13px; }
.connection { display: grid; text-align: right; gap: 4px; font-size: 13px; }
#state { font-size: 14px; letter-spacing: .07em; }
.live { color: #00ff00; }
.waiting, .stale { color: #ffbe56; }
main { padding: 20px 28px; }
.tools { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; margin-bottom: 13px; }
label { display: grid; gap: 6px; color: #cbd4cc; font-size: 13px; }
input, select, button { font: inherit; font-size: 14px; color: #eef3ee; background: #181e19;
  border: 1px solid #647266; border-radius: 3px; padding: 9px 12px; min-height: 39px; }
input { width: 310px; max-width: 100%; }
select { min-width: 160px; }
button { cursor: pointer; background: #303b32; }
button:hover { background: #425246; }
:focus-visible { outline: 2px solid #ffff00; outline-offset: 2px; }
#count { margin-left: auto; padding-bottom: 10px; color: #cbd4cc; font-size: 13px; }
#notice { min-height: 23px; color: #ffbe56; font-size: 13px; margin-bottom: 5px; }
.table-wrap { overflow: auto; max-height: calc(100vh - 320px); min-height: 180px;
  border: 1px solid #647266; border-radius: 3px; background: #000; }
.table-wrap.filtered { outline: 2px solid #f0bf35; outline-offset: 2px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
th { background: #c1c8c1; color: #111; position: sticky; top: 0; z-index: 1;
  text-align: left; font-weight: 600; padding: 10px 13px; border-bottom: 1px solid #647266; white-space: nowrap; }
td { padding: 8px 13px; border-bottom: 1px solid #252c26; max-width: 500px; }
td:first-child { white-space: nowrap; font-weight: 600; }
td:nth-child(3), td:nth-child(5) { color: #cad2cb; }
td.number { font-family: Consolas, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.number { text-align: right; }
tbody tr:hover { background: #172018; }
.bit { display: inline-block; width: 14px; height: 14px; border: 2px solid #00ff00; vertical-align: middle; }
.bit.on { background: #00ff00; }
.missing { color: #8f988f; }
#empty { text-align: center; color: #b3bdb4; padding: 35px; }
footer { padding-top: 13px; }
[hidden] { display: none !important; }
.view-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.view-tabs button { min-width: 105px; }
.view-tabs button[aria-pressed="true"] { background: #b4d1b5; color: #0c2112; font-weight: 700; border-color: #deefdf; }
.view-tabs span { margin-left: 12px; font-size: 13px; color: #aebcaf; }
.display-tools select { min-width: 150px; }
#display-select { min-width: 250px; }
.display-note { color: #ffc451; font-size: 13px; margin: 6px 0; overflow-wrap: anywhere; }
.display-note:empty { display: none; }
.display-stage { border: 1px solid #647266; border-radius: 3px; overflow: auto; background: #000;
  min-height: 200px; max-height: calc(100vh - 290px); }
.process-svg { display: block; flex-shrink: 0; }
.process-svg.fit-display { width: 100%; height: auto; }
.process-svg .tag-symbol { cursor: pointer; }
.process-svg .tag-symbol:focus-visible { outline: none; filter: drop-shadow(0 0 3px #ffff00); }
.stale-view { outline: 2px dashed #ffbe56; outline-offset: -2px; }
.object-window { position: fixed; width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; background: #000; border: 1px solid #8b9c8d;
  border-radius: 4px; box-shadow: 0 12px 50px #000a; color: #ffff00; }
.object-title { background: #263e2d; color: #e8f5e9; display: flex; justify-content: space-between;
  padding: 7px 10px; align-items: center; gap: 8px; cursor: move; touch-action: none; user-select: none; }
.object-title strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.object-title button { min-height: 30px; padding: 1px 10px; font-size: 22px; }
.object-body { overflow: auto; max-height: calc(100vh - 140px); min-height: 80px; }
.object-note { padding: 7px 10px; font-size: 12px; color: #bdc8be; overflow-wrap: anywhere; }
.object-note:empty { display: none; }
.object-properties { font-size: 13px; width: 100%; }
.object-properties th { position: static; color: #ffff00; background: #151b16; padding: 7px 10px; width: 42%; }
.object-properties td { padding: 7px 10px; }
.object-context { position: fixed; z-index: 2147483000; padding: 5px; background: #18231b;
  border: 1px solid #8b9c8d; border-radius: 3px; display: grid; max-height: 60vh; overflow: auto; min-width: 215px; }
.object-context button { border: 0; background: transparent; text-align: left; font-size: 13px; }
.object-context button:hover { background: #354c3d; }
.open-object-row td:first-child { cursor: pointer; text-decoration: underline dotted #677a67; text-underline-offset: 3px; }
@media (max-width: 700px) {
  header { align-items: start; padding: 16px; gap: 10px; }
  main { padding: 16px; }
  .connection { max-width: 180px; }
  .read-only { font-size: 11px; }
  h1 { font-size: 20px; }
  #count { margin-left: 0; }
  input { width: 100%; }
  label:first-child { flex: 1 1 100%; }
  .table-wrap { max-height: calc(100vh - 430px); }
  .view-tabs { flex-wrap: wrap; }
  .view-tabs span { margin: 0; flex-basis: 100%; font-size: 11px; }
  .display-tools label { width: 100%; }
  #display-select { width: 100%; min-width: 0; }
  .display-stage { max-height: 60vh; }
  .object-window { left: 12px; width: calc(100vw - 24px); }
}

.login-page { min-height:100vh; display:grid; place-items:center; padding:24px; box-sizing:border-box; }
.login-card { width:min(420px,100%); padding:32px; border:1px solid #647c69; border-radius:8px; background:#131d16; box-sizing:border-box; }
.login-card h1 { font-size:1.5rem; margin-top:20px; }
.login-card form { display:grid; gap:18px; margin:26px 0; }
.login-card label { display:grid; gap:7px; }
.login-card input { width:100%; box-sizing:border-box; }
.login-card button { min-height:44px; }
.login-card p { line-height:1.5; }
.login-card a { color:#b9dfbb; }
.login-foot { font-size:.85rem; color:#adc2af; margin-bottom:0; }
.web-account { display:flex; align-items:center; gap:10px; }
.web-account button { padding:4px 10px; font-size:.85rem; }