:root { --bg:#14171c; --panel:#1b1f26; --line:#2a303a; --fg:#d7dce3; --mut:#8a93a0; --acc:#3d7bd9; --ok:#3fa45b; --warn:#e0a32e; --bad:#d9534f; }
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--fg); font:13px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; overflow:hidden; }
button { background:#262c36; color:var(--fg); border:1px solid #363d49; border-radius:4px; padding:4px 9px; cursor:pointer; font:inherit; }
button:hover { background:#2f3642; } button.on { background:var(--acc); border-color:var(--acc); color:#fff; } button:disabled { opacity:.45; cursor:default; }
input, select { background:#11141a; color:var(--fg); border:1px solid #363d49; border-radius:3px; padding:3px 5px; font:inherit; }
h3 { margin:10px 0 6px; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); } h3 small { text-transform:none; letter-spacing:0; }
.muted { color:var(--mut); }
#bar { display:flex; align-items:center; gap:10px; height:42px; padding:0 10px; background:var(--panel); border-bottom:1px solid var(--line); white-space:nowrap; overflow-x:auto; }
#bar .brand { font-weight:700; letter-spacing:.06em; } #bar .ver { color:var(--mut); font-size:11px; margin-left:-4px; } #bar .proj { color:var(--mut); max-width:160px; overflow:hidden; text-overflow:ellipsis; }
#bar .grp { display:flex; gap:4px; align-items:center; padding-left:8px; border-left:1px solid var(--line); } #bar .lbl { color:var(--mut); margin-right:2px; }
.conn { margin-left:auto; width:10px; height:10px; border-radius:50%; background:var(--bad); flex:none; } .conn.ok { background:var(--ok); }
main { display:flex; height:calc(100% - 42px); }
#left { width:190px; padding:4px 10px; background:var(--panel); border-right:1px solid var(--line); overflow-y:auto; flex:none; }
#palette .pal { display:flex; align-items:center; gap:8px; padding:7px 8px; margin:3px 0; background:#232831; border:1px solid #303744; border-radius:4px; cursor:grab; user-select:none; }
#palette .pal i { width:14px; height:14px; border-radius:3px; display:inline-block; }
.help { color:var(--mut); font-size:12px; } .help p { margin:6px 0; }
#viewWrap { position:relative; flex:1; min-width:200px; }
#view { width:100%; height:100%; display:block; outline:none; }
#labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
#labels span { position:absolute; transform:translate(-50%,-50%); font-size:11px; color:#e8ecf2; background:rgba(20,23,28,.65); padding:0 4px; border-radius:3px; white-space:nowrap; }
#labels span.sel { color:#ffd27a; }
.hint { position:absolute; left:10px; bottom:10px; padding:4px 8px; background:rgba(20,23,28,.8); border-radius:4px; color:var(--mut); pointer-events:none; }
.hint:empty { display:none; }
.toast { position:absolute; left:50%; top:12px; transform:translateX(-50%); max-width:70%; padding:7px 12px; border-radius:4px; background:#3a2626; border:1px solid var(--bad); display:none; }
.toast.show { display:block; } .toast.info { background:#23302a; border-color:var(--ok); }
.fault { position:absolute; right:10px; top:10px; max-width:50%; padding:6px 10px; background:#4a1f1f; border:1px solid var(--bad); border-radius:4px; display:none; } .fault.show { display:block; }
.fps { position:absolute; right:10px; bottom:10px; color:var(--mut); font-size:11px; pointer-events:none; }
#right { width:330px; padding:2px 10px 10px; background:var(--panel); border-left:1px solid var(--line); overflow-y:auto; flex:none; }
table.kv { width:100%; border-collapse:collapse; } table.kv td { padding:2px 0; } table.kv td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
table.grid { width:100%; border-collapse:collapse; font-size:12px; } table.grid th, table.grid td { padding:2px 4px; border-bottom:1px solid var(--line); text-align:right; font-variant-numeric:tabular-nums; }
table.grid th:first-child, table.grid td:first-child { text-align:left; } table.grid tr.sel td { background:#2b3445; } table.grid tr { cursor:pointer; }
table.grid td.alarm { color:var(--bad); font-weight:600; }
.alarms div { padding:3px 6px; margin:2px 0; background:#3a2323; border-left:3px solid var(--bad); border-radius:2px; cursor:pointer; } .alarms .none { background:none; border:none; color:var(--mut); padding:0; }
.events { max-height:140px; overflow-y:auto; font-size:11px; color:var(--mut); font-family:ui-monospace, monospace; }
#sel .row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:2px 0; } #sel .row label { color:var(--mut); }
#sel .row input { width:110px; text-align:right; } #sel .btns { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
#sel .unit { color:var(--mut); width:34px; font-size:11px; }
.drawer { position:absolute; left:200px; top:52px; width:min(760px, calc(100% - 560px)); min-width:420px; max-height:calc(100% - 70px); display:flex; flex-direction:column; background:#171b21f2; border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 30px #0008; z-index:5; }
.drawer.hidden, .hidden { display:none !important; }
.dhead { display:flex; align-items:center; gap:10px; padding:8px 10px; border-bottom:1px solid var(--line); } .dhead #dTitle { flex:1; font-weight:600; } .tabs { display:flex; gap:3px; }
.dbody { overflow:auto; padding:6px 10px; font-family:ui-monospace, monospace; font-size:12px; }
.dbody table { border-collapse:collapse; width:100%; } .dbody td { padding:1px 6px; white-space:nowrap; } .dbody td.t { color:#6fb3c8; } .dbody td.v { color:#cfe3a5; }
.dbody tr.sec td { color:var(--mut); padding-top:8px; font-family:system-ui; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.dbody pre { margin:0 0 12px; white-space:pre; } .dbody .file { color:var(--warn); margin:8px 0 2px; font-family:system-ui; }
.kw { color:#c792ea; } .cm { color:#6a7686; } .str { color:#c3e88d; } .num { color:#f78c6c; }
.dfoot { padding:4px 10px; font-size:11px; border-top:1px solid var(--line); }
.modal { position:fixed; inset:0; background:#0009; display:flex; align-items:center; justify-content:center; z-index:10; }
.mbox { width:min(1100px, 94vw); max-height:88vh; display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:6px; }
.mhead { display:flex; justify-content:space-between; align-items:center; padding:9px 12px; border-bottom:1px solid var(--line); font-weight:600; }
.mbody { overflow:auto; padding:10px 12px; }
.mbody .tools { display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.mbody table { border-collapse:collapse; width:100%; font-size:12px; } .mbody th, .mbody td { padding:3px 6px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.mbody td.n { text-align:right; font-variant-numeric:tabular-nums; } .mbody .dd { background:#3a3220; } .mbody .do { outline:1px solid var(--warn); outline-offset:-1px; }
.mbody .both { background:#3a3220; outline:1px solid var(--warn); outline-offset:-1px; }
.tree details { margin-left:14px; } .tree summary { cursor:pointer; padding:2px 0; } .tree summary .c { color:var(--mut); }
.tree table { margin:2px 0 8px 14px; width:calc(100% - 14px); }
.tree input { width:90px; text-align:right; }
.chip { display:inline-block; padding:0 6px; border-radius:8px; background:#2a3140; color:var(--mut); font-size:11px; margin-left:4px; }
.ok { color:var(--ok); } .bad { color:var(--bad); } .warn { color:var(--warn); }
.menu { position:fixed; z-index:20; min-width:220px; background:var(--panel); border:1px solid var(--line); border-radius:5px; box-shadow:0 6px 24px #0009; padding:4px 0; }
.menu div { padding:6px 12px; cursor:pointer; } .menu div:hover { background:#2a3140; } .menu hr { border:none; border-top:1px solid var(--line); margin:4px 0; }
.legend i { display:inline-block; width:10px; height:10px; margin:0 3px 0 10px; vertical-align:middle; }
.chk { display:flex; align-items:center; gap:4px; color:var(--mut); cursor:pointer; user-select:none; }
.tip { position:absolute; z-index:4; pointer-events:none; display:none; max-width:340px; padding:6px 9px; background:rgba(20,23,28,.94); border:1px solid var(--line); border-radius:4px; font-size:12px; line-height:1.45; box-shadow:0 4px 16px #0007; }
.tip.show { display:block; } .tip .ref { font-family:ui-monospace, monospace; color:#ffd27a; font-weight:600; } .tip .k { color:var(--mut); } .tip code { color:#6fb3c8; } .tip .on { color:#ff7a5c; font-weight:600; }
.badge { font-size:10px; font-weight:600; padding:0 4px; border-radius:3px; margin-left:3px; vertical-align:1px; color:#fff; }
.badge.anim { background:#8a5cc2; } .badge.sys { background:#2f7d8c; } .badge.nonplc { background:#9a6a1f; } .badge.xl { background:#5b7083; }
.codesec { font-weight:600; margin:10px 0 4px; padding:3px 6px; border-left:4px solid #5b7083; } .codesec.ctl { border-color:#3a8f4f; }