#event-tree-panel > .pane-header {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
#event-tree-panel > .pane-header label { flex: 1; }
#event-tree-panel > .pane-header button {
  flex: none; cursor: pointer; color: #ddd; background: #22252b;
  border: 1px solid #3a3e46; border-radius: 4px; width: 22px; height: 22px;
  line-height: 1; font: inherit;
}
#event-tree-panel > .pane-header button:hover { background: #2e323a; }
#event-tree-panel > .pane-header button.et-filter-trigger {
  width: auto; height: auto; padding: 3px 8px; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.03em;
  display: inline-flex; align-items: center; gap: 4px;
}
#event-tree-panel > .pane-header button.et-filter-trigger[aria-expanded="true"] {
  background: #1c2434;
}
.et-filter-chevron {
  width: 10px; height: 10px; flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238b93a7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  background-size: 10px 10px;
  transition: transform 0.1s ease;
}
#event-tree-panel > .pane-header button.et-filter-trigger[aria-expanded="true"] .et-filter-chevron {
  transform: rotate(180deg);
}

#event-tree-panel {
  position: absolute; top: 48px; left: 8px; width: 560px;
  max-height: calc(100% - 100px - var(--touch-band-h, 0px)); min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  color: #ddd; font: 12px/1.4 monospace; background: #121418;
  padding: 12px; border-radius: 6px; border: 1px solid #2a2d33;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.7);
  overflow: hidden; z-index: var(--ne-z-canvasPanel, 5);
}
#event-tree-panel[hidden] { display: none; }
#event-tree-panel > .pane-header { cursor: grab; user-select: none; }
#event-tree-panel > .pane-header button { cursor: pointer; }
#event-tree-panel.is-dragging > .pane-header { cursor: grabbing; }
#event-tree-panel.is-dragging { transition: none; }
.et-status { flex: none; color: #6c7086; font-size: 11px; }
.et-body {
  flex: 1 1 auto; min-height: 8rem;
  margin: 0; overflow: auto;
  font: 11px/1.45 monospace; white-space: pre;
}
.et-body:focus { outline: 1px solid #3a3e46; outline-offset: -1px; }
.et-hint { color: #6c7086; font-size: 11px; }
.et-row { display: block; border-radius: 2px; cursor: pointer; }
.et-row:hover { background: rgba(137,180,250,0.12); }
.et-row.is-selected { background: rgba(137,180,250,0.18); box-shadow: inset 2px 0 0 #89b4fa; }
.et-tree { color: #45475a; }
.et-dim { color: #6c7086; }
.et-time { color: #7f849c; }
.et-points { color: #e8c84a; }
.et-game { color: #cdd6f4; font-weight: 600; }
.et-player { color: #89b4fa; }
.et-ball { color: #94e2d5; }
.et-section { color: #b4befe; }
.et-mode { color: #cba6f7; }
.et-pri { color: #6c7086; }
.et-event { color: #a6adc8; }
.et-hit { color: #f38ba8; }
.et-lifecycle { color: #f9e2af; }
.et-hardware { color: #fab387; }
.et-sound { color: #89dceb; }

.et-copy { margin-left: 4px; opacity: 0; cursor: pointer; color: #6c7086; }
.et-row:hover .et-copy { opacity: 1; }
.et-copy:hover { color: #89b4fa; }

.et-branch-copy { margin-left: 4px; opacity: 0; cursor: pointer; color: #6c7086; }
.et-row:hover .et-branch-copy { opacity: 1; }
.et-branch-copy:hover { color: #89b4fa; }

@media (max-width: 720px) {
  #event-tree-panel { width: min(560px, 92vw); }
}

#cascade-panel {
  position: absolute; left: 8px; bottom: calc(40px + var(--touch-band-h, 0px)); width: min(440px, 92vw); height: 360px;
  max-height: calc(100% - 100px - var(--touch-band-h, 0px)); min-height: 0;
  display: flex; flex-direction: column; gap: 8px;
  color: #ddd; font: 12px/1.4 monospace; background: #121418;
  padding: 12px; border-radius: 6px; border: 1px solid #2a2d33;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.7);
  overflow: hidden; z-index: var(--ne-z-canvasPanel, 5);
}
#cascade-panel[hidden] { display: none; }
#cascade-panel > .pane-header {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  cursor: grab; user-select: none;
}
#cascade-panel > .pane-header label { flex: 1; }
#cascade-panel > .pane-header .et-status {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cascade-panel > .pane-header button {
  flex: none; cursor: pointer; color: #ddd; background: #22252b;
  border: 1px solid #3a3e46; border-radius: 4px; width: 22px; height: 22px;
  line-height: 1; font: inherit;
}
#cascade-panel > .pane-header button:hover { background: #2e323a; }
#cascade-panel.is-dragging > .pane-header { cursor: grabbing; }
#cascade-panel.is-dragging { transition: none; }
.cascade-message { flex: 1 1 auto; margin: 0; color: #6c7086; font-size: 11px; }
.cascade-message[hidden] { display: none; }
.cascade-canvas-host {
  flex: 1 1 auto; min-height: 8rem; position: relative;
  border: 1px solid #2a2d33; border-radius: 4px; overflow: auto;
}
.cascade-canvas-host[hidden] { display: none; }
.cascade-tree { padding: 6px 8px; }
.cascade-row { white-space: pre; line-height: 1.6; }
.cascade-row.is-firing { font-weight: 600; box-shadow: inset 2px 0 0 #89b4fa; }