:root{--bg-dark: #1e1e1e;--bg-darker: #121212;--bg-panel: #252526;--border-color: #3e3e42;--text-primary: #d4d4d4;--text-secondary: #858585;--accent-color: #007acc;--selection-color: #264f78;--font-mono: "Consolas", "Monaco", "Courier New", monospace;--font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--row-height: 24px}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;background-color:var(--bg-dark);color:var(--text-primary);font-family:var(--font-sans);overflow:hidden}.app-container{display:grid;grid-template-rows:50px 40% 30% 1fr 30px;height:100vh}.app-footer{background-color:var(--bg-darker);border-top:1px solid var(--border-color);display:flex;align-items:center;justify-content:flex-end;padding:0 16px;font-size:.8em;color:var(--text-secondary)}.app-footer a{color:var(--text-secondary);text-decoration:none;margin-left:4px;font-weight:700}.app-footer a:hover{color:var(--accent-color)}.toolbar{background-color:var(--bg-darker);border-bottom:1px solid var(--border-color);display:flex;align-items:center;padding:0 16px;gap:20px}.brand{font-weight:700;font-size:1.1em;min-width:150px}.controls{display:flex;align-items:center;gap:10px}input[type=file]{display:none}.btn-upload{background-color:var(--accent-color);color:#fff;padding:6px 12px;border-radius:4px;cursor:pointer;font-size:.9em}.btn-upload:hover{opacity:.9}.badge-secure{background-color:#1b5e20;color:#a5d6a7;padding:4px 8px;border-radius:12px;font-size:.8em;display:flex;align-items:center;gap:4px}#status-msg{margin-left:auto;font-size:.9em;color:var(--text-secondary)}.pane{border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;overflow:hidden;position:relative;background-color:var(--bg-panel)}.pane h3{margin:0;padding:8px 12px;background-color:var(--bg-darker);font-size:.85em;text-transform:uppercase;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}.packet-list-header{display:flex;background-color:var(--bg-darker);border-bottom:1px solid var(--border-color);font-size:.85em;font-weight:700}.packet-list-header .col{padding:4px 8px;border-right:1px solid var(--border-color);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.packet-list-body{flex:1;overflow-y:auto;position:relative;font-family:var(--font-mono);font-size:.9em}#packetListContent{position:absolute;top:0;left:0;right:0}.packet-row{display:flex;height:var(--row-height);line-height:var(--row-height);border-bottom:1px solid #333;cursor:pointer}.packet-row:hover{background-color:#333}.packet-row.selected{background-color:var(--selection-color);color:#fff}.packet-row .col{padding:0 8px;border-right:1px solid #333;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.col.flex-1{flex:1}.tree-view{flex:1;overflow-y:auto;padding:10px;font-family:var(--font-sans);font-size:.9em}.tree-node{margin-bottom:4px}.tree-header{cursor:pointer;font-weight:700;-webkit-user-select:none;user-select:none;display:flex;align-items:center}.tree-header:before{content:"▶";font-size:.7em;margin-right:6px;transition:transform .1s;color:var(--text-secondary)}.tree-node.expanded>.tree-header:before{transform:rotate(90deg)}.tree-children{display:none;margin-left:16px;margin-top:4px}.tree-node.expanded>.tree-children{display:block}.tree-line{padding:2px 0;color:#ccc;font-family:var(--font-mono);font-size:.9em}.tree-label{color:var(--text-secondary)}.hex-view{flex:1;overflow-y:auto;padding:10px;font-family:var(--font-mono);font-size:.9em;white-space:pre}.hex-row{display:flex}.hex-offset{color:var(--text-secondary);margin-right:16px;width:50px}.hex-bytes{color:var(--text-primary);margin-right:16px;width:350px}.hex-ascii{color:#ce9178}.placeholder-text{color:var(--text-secondary);text-align:center;margin-top:20px;font-style:italic}