:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, sans-serif; font-size: 14px; }
header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #ccc; }
header h1 { margin: 0; font-size: 18px; }
.badge { padding: 3px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; }
.badge.sim { background: #fff2c0; color: #7a5a00; }
.badge.dat { background: #d4eaff; color: #003c73; }
.badge.ctl { background: #ffd6d6; color: #7a0000; }
main { display: grid; grid-template-columns: 260px 1fr; height: calc(100vh - 60px); }
aside { border-right: 1px solid #ccc; padding: 12px; overflow: auto; }
aside h2 { margin: 0 0 8px 0; font-size: 15px; }
#deviceList { list-style: none; padding: 0; margin: 0; }
#deviceList li { padding: 8px 10px; border: 1px solid transparent; border-radius: 4px; cursor: pointer; margin-bottom: 4px; }
#deviceList li:hover { background: rgba(0,0,0,0.05); }
#deviceList li.active { background: #d4eaff; border-color: #a0c8ee; }
#deviceList .name { font-weight: 600; }
#deviceList .proto { font-size: 11px; opacity: 0.7; }
section#detail { padding: 12px 16px; overflow: auto; }
.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.card { border: 1px solid #ccc; border-radius: 6px; padding: 10px 12px; }
.card h3 { margin: 0 0 6px 0; font-size: 13px; }
.card.wide { grid-column: 1 / -1; }
pre { background: rgba(0,0,0,0.05); padding: 6px; border-radius: 4px; font-size: 12px; overflow: auto; max-height: 180px; }
button { margin-right: 4px; padding: 4px 10px; cursor: pointer; }
.actions { margin-top: 6px; }
select, input[type=file], input[type=number] { margin-right: 4px; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
table th, table td { padding: 4px 6px; border-bottom: 1px solid rgba(0,0,0,0.06); text-align: left; }
table th { position: sticky; top: 0; background: rgba(255,255,255,0.9); }
table td.hex, table td.addr { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.muted { font-weight: normal; font-size: 11px; opacity: 0.7; }
#wireView { max-height: 260px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }