:host {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  position: relative;
  --bg: #f2f2f5;
  --surface: #ffffff;
  --surface2: #ebebef;
  --border: #dddde8;
  --text: #1a1a2e;
  --text2: #60607a;
  --accent: #ff00aa;
  --accent-fg: #ffffff;
  --chrome: #ffffff;
  --chrome-b: #dddde8;
  --resize-bg: rgba(0,0,0,.04);
  --resize-bgh: rgba(255,0,170,.35);
  --shadow: 0 1px 4px rgba(0,0,0,.08);
  --icon-dim: .55;
}

[data-theme="dark"],
:host([color-mode='dark']) {
  --bg: #0d0d12;
  --surface: #16161f;
  --surface2: #1f1f2e;
  --border: #2a2a3e;
  --text: #e8e8f8;
  --text2: #8080a8;
  --accent: #ff00aa;
  --accent-fg: #0d0d12;
  --chrome: #16161f;
  --chrome-b: #2a2a3e;
  --resize-bg: rgba(255,255,255,.03);
  --resize-bgh: rgba(255,0,170,.30);
  --shadow: 0 1px 6px rgba(0,0,0,.4);
  --icon-dim: .45;
}

#app-bar,
.vmc-appbar {
  flex: 0 0 auto;
  min-height: 48px;
  background: var(--chrome);
  border-bottom: 1px solid var(--chrome-b);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  box-shadow: var(--shadow);
}

#app-bar .logo,
.vmc-logo {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.4px;
  white-space: nowrap;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  margin-right: 8px;
  text-decoration: none;
}

#app-bar .logo img,
.vmc-logo-mark {
  display: block;
  width: auto;
  height: 16px;
  flex-shrink: 0;
}

.vtx-version-badge,
.vmc-version-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 20px;
  border: 1px solid var(--chrome-b);
  background: var(--surface2);
  color: var(--text2);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 4px;
}

.bar-sep,
.vmc-bar-sep {
  width: 1px;
  height: 32px;
  background: var(--chrome-b);
  flex-shrink: 0;
}

.btn,
.vmc-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--chrome-b);
  background: var(--surface);
  color: var(--text);
  transition: background .12s, border-color .12s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn:hover,
.vmc-btn:hover {
  background: var(--surface2);
}

.btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

.btn.primary:hover {
  opacity: .88;
}

.btn.icon-btn,
.vmc-btn.icon-btn {
  padding: 5px 7px;
  background: transparent;
  border: 1px solid transparent;
}

.btn.icon-btn:hover,
.vmc-btn.icon-btn:hover {
  background: var(--surface2);
  border-color: var(--chrome-b);
}

.btn.icon-btn svg,
.vmc-btn.icon-btn svg {
  opacity: var(--icon-dim);
}

.btn.icon-btn:hover svg,
.vmc-btn.icon-btn:hover svg {
  opacity: 1;
}

#status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text2);
  min-height: 32px;
  padding: 0 10px;
  border-radius: 20px;
  border: 1px solid var(--chrome-b);
  background: var(--surface2);
  flex-shrink: 0;
}

#status-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text2);
  flex-shrink: 0;
}

#status-chip.loading .dot { background: #f59e0b; animation: pulse .9s infinite; }
#status-chip.ready .dot { background: #22c55e; }
#status-chip.error .dot { background: #ef4444; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

#dev-pill,
.vmc-pill {
  position: fixed;
  bottom: 14px;
  right: 14px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  font: 600 11px/1 system-ui, sans-serif;
  letter-spacing: .4px;
  cursor: pointer;
  opacity: .3;
  transition: opacity .2s, background .15s, box-shadow .15s;
  box-shadow: var(--shadow);
}

#dev-pill:hover,
.vmc-pill:hover {
  opacity: 1;
  background: var(--surface2);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}

#dev-pill svg,
.vmc-pill svg {
  flex-shrink: 0;
}

[data-mode="dev"] #dev-pill,
.vmc-root[data-mode='dev'] .vmc-pill {
  display: none;
}

#btn-mode {
  gap: 5px;
}

#btn-mode svg {
  opacity: .7;
}

#btn-mode:hover svg {
  opacity: 1;
}

.panel-header,
.vmc-panel-header {
  flex: 0 0 auto;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px 0 6px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 2;
  user-select: none;
}

.panel-header .panel-title,
.vmc-panel-title {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-grip,
.vmc-panel-grip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 30px;
  cursor: grab;
  border-radius: 4px;
  opacity: .4;
  transition: opacity .15s, background .15s;
  touch-action: none;
}

.panel-grip:hover,
.vmc-panel-grip:hover {
  opacity: .85;
  background: var(--surface2);
}

.panel-grip:active,
.vmc-panel-grip:active {
  cursor: grabbing;
  opacity: 1;
}

.panel-grip-dots,
.vmc-panel-grip-dots {
  display: grid;
  grid-template-columns: repeat(2, 3px);
  gap: 3px;
}

.panel-grip-dot,
.vmc-panel-grip span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
}

.panel-body,
.vmc-panel-body {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

    /* ── Reset & tokens ───────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    .vtx-host-wrap {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
      font-size: 13px;
      line-height: 1.5;
    }

    /* ── Header / app-bar ────────────────────────────────────────────────── */
    #app-bar {
      flex: 0 0 auto;
      min-height: 48px;
      background: var(--chrome);
      border-bottom: 1px solid var(--chrome-b);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 12px;
      z-index: 40;
      box-shadow: var(--shadow);
    }

    #app-bar .app-bar-primary {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
    }

    #app-bar .app-bar-secondary {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex: 0 1 auto;
      min-width: 0;
      margin-left: auto;
    }

    #app-bar .app-bar-menu-toggle {
      display: none;
      margin-left: auto;
    }

    #app-bar[data-titlebar-collapsed="true"] {
      flex-wrap: wrap;
      align-items: flex-start;
    }

    #app-bar[data-titlebar-collapsed="true"] .app-bar-primary {
      flex: 1 1 min(100%, 720px);
    }

    #app-bar[data-titlebar-collapsed="true"] .app-bar-menu-toggle {
      display: inline-flex;
      flex-shrink: 0;
    }

    #app-bar[data-titlebar-collapsed="true"] .app-bar-secondary {
      display: none;
      width: 100%;
      margin-left: 0;
      padding-top: 8px;
      border-top: 1px solid var(--chrome-b);
      flex-wrap: wrap;
      justify-content: flex-start;
    }

    #app-bar[data-titlebar-collapsed="true"][data-titlebar-menu-open="true"] .app-bar-secondary {
      display: flex;
    }

    #app-bar[data-titlebar-collapsed="true"] .app-bar-secondary > * {
      flex-shrink: 0;
    }

    #app-bar[data-titlebar-collapsed="true"] .app-bar-secondary .bar-sep {
      display: none;
    }

    #app-bar[data-titlebar-collapsed="true"] .api-test-drawer {
      width: 100%;
    }

    #app-bar[data-titlebar-collapsed="true"] .api-test-drawer-panel {
      position: static;
      width: 100%;
      margin-top: 8px;
    }

    #app-bar > :not(.logo) {
      align-self: center;
    }

    #app-bar .logo {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -.4px;
      white-space: nowrap;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 10px;
      margin-right: 8px;
      text-decoration: none;
    }
    #app-bar .logo img {
      display: block;
      width: auto;
      height: 16px;
      flex-shrink: 0;
    }

    .vtx-version-badge {
      display: inline-flex;
      align-items: center;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .3px;
      color: var(--text2);
      background: var(--surface2);
      border: 1px solid var(--chrome-b);
      border-radius: 20px;
      min-height: 24px;
      padding: 0 8px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-right: 4px;
    }

    .load-form {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1 1 360px;
      min-width: 0;
      flex-wrap: nowrap;
    }
    .load-form .load-field {
      flex: 1 1 220px;
      min-width: 140px;
    }
    .load-form .load-field[hidden] {
      display: none;
    }
    .load-form[data-load-mode="default"] .load-field-signature {
      display: none;
    }
    .load-form input {
      width: 100%;
      min-width: 0;
      min-height: 32px;
      padding: 0 10px;
      border: 1px solid var(--chrome-b);
      border-radius: 6px;
      font-size: 12px;
      background: var(--surface2);
      color: var(--text);
      outline: none;
      transition: border-color .15s;
    }
    .load-form input:focus { border-color: var(--accent); }
    .load-form input::placeholder { color: var(--text2); opacity: .7; }

    /* ── API tester (dev-only) ───────────────────────────────────────────────── */
    .api-test-drawer {
      position: relative;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .api-test-drawer-panel {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      display: none;
      width: min(960px, calc(100vw - 32px));
      padding: 10px;
      border: 1px solid var(--chrome-b);
      border-radius: 12px;
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
      z-index: 45;
    }
    #app-bar[data-api-drawer-open="true"] .api-test-drawer-panel {
      display: flex;
    }
    .api-test-form {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1 1 auto;
      width: 100%;
      min-width: 0;
      flex-wrap: nowrap;
    }
    .api-test-form .api-test-method {
      min-width: 0;
      flex: 0 0 260px;
    }
    .api-test-form select {
      height: 32px;
      padding: 0 6px;
      border-radius: 6px;
      border: 1px solid var(--chrome-b);
      background: var(--surface2);
      color: var(--text);
      font-size: 12px;
      outline: none;
      cursor: pointer;
      width: 100%;
      max-width: none;
      flex: 1 1 auto;
    }
    .api-test-form select:focus { border-color: var(--accent); }
    .api-test-form .api-test-fields {
      display: grid;
      grid-template-columns: repeat(4, minmax(140px, 1fr));
      align-items: end;
      gap: 6px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .api-test-form .api-test-field {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .api-test-form .api-test-field[hidden] { display: none; }
    .api-test-form .api-test-field-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text2);
      line-height: 1;
      padding-left: 2px;
      white-space: nowrap;
    }
    .api-test-form .api-test-field-label:empty {
      display: none;
    }
    .api-test-form .api-test-field[data-required="true"] .api-test-field-label::after {
      content: ' *';
      color: var(--accent);
    }
    .api-test-form .api-arg {
      height: 32px;
      width: 100%;
      min-width: 150px;
      padding: 0 8px;
      border: 1px solid var(--chrome-b);
      border-radius: 6px;
      background: var(--surface2);
      color: var(--text);
      font-size: 12px;
      outline: none;
      transition: border-color .15s;
    }
    .api-test-form .api-arg:focus { border-color: var(--accent); }
    .api-test-form .api-arg::placeholder { color: var(--text2); opacity: .7; }

    .bar-sep {
      width: 1px;
      height: 32px;
      background: var(--chrome-b);
      flex-shrink: 0;
    }

    /* ── Workspace ────────────────────────────────────────────────────────── */
    #workspace {
      flex: 1 1 0;
      display: flex;
      overflow: hidden;
      min-height: 0;
      position: relative;
    }

    /* ── Sidebar panels ───────────────────────────────────────────────────── */
    /*
     * Each .sidebar is a resizable panel that can sit on either side of the
     * viewport. It has:
     *   - A panel header (title + move-side + collapse buttons)
     *   - A .panel-body (scrollable, contains the mounted component)
     *   - A .resize-handle (draggable edge)
     *
     * To add a future panel: create a new .sidebar, place it in #workspace,
     * register it in the JS `panels` map and call allocateSlot().
     */

    .sidebar {
      flex: 0 0 var(--sidebar-w, 300px);
      width: var(--sidebar-w, 300px);
      min-width: 180px;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      background: var(--surface);
      border-color: var(--border);
      border-style: solid;
      border-width: 0;
      position: relative;
      transition: width .22s cubic-bezier(.4,0,.2,1),
                  flex-basis .22s cubic-bezier(.4,0,.2,1),
                  transform .28s cubic-bezier(.4,0,.2,1),
                  opacity .22s;
      z-index: 10;
      overflow: hidden;
    }
    .sidebar.side-left  { border-right-width: 1px; }
    .sidebar.side-right { border-left-width:  1px; }
    .sidebar.sidebar-resizing {
      transition: none !important;
    }
    /* collapsed state */
    .sidebar.collapsed {
      flex-basis: 0 !important;
      width: 0 !important;
      min-width: 0 !important;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
    }

    .sidebar.sidebar-overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      flex: none;
      width: min(var(--sidebar-w, 300px), calc(100% - 72px));
      max-width: min(600px, calc(100% - 72px));
      z-index: 18;
      box-shadow: none;
      transition: transform .34s cubic-bezier(.22,1,.36,1), opacity .24s ease;
      will-change: transform, opacity;
    }
    .sidebar.sidebar-overlay.side-left {
      left: 0;
      box-shadow: 5px 0 12px -10px rgba(0,0,0,.66);
    }
    .sidebar.sidebar-overlay.side-right {
      right: 0;
      box-shadow: -5px 0 12px -10px rgba(0,0,0,.66);
    }
    .sidebar.sidebar-overlay.collapsed {
      flex-basis: auto !important;
      width: min(var(--sidebar-w, 300px), calc(100% - 72px)) !important;
      min-width: 180px !important;
    }
    .sidebar.sidebar-overlay.side-left.collapsed {
      transform: translateX(calc(-100% - 12px));
    }
    .sidebar.sidebar-overlay.side-right.collapsed {
      transform: translateX(calc(100% + 12px));
    }

    .panel-icon-btn {
      display: flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: 5px;
      background: transparent; border: none; cursor: pointer;
      color: var(--text2); transition: background .12s, color .12s;
      flex-shrink: 0;
    }
    .panel-icon-btn:hover {
      background: var(--surface2);
      color: var(--text);
    }
    /* Drop zones that appear during a panel drag */
    .panel-drop-zone {
      position: absolute;
      top: 0; bottom: 0;
      width: 50%;
      z-index: 50;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s;
      border: 2px dashed transparent;
    }
    .panel-drop-zone.dz-left  { left: 0; border-radius: 0 0 0 0; }
    .panel-drop-zone.dz-right { right: 0; }
    .panel-drop-zone.drag-active { pointer-events: auto; }
    .panel-drop-zone.drag-over {
      background: rgba(255, 0, 170, .14);
      border-color: rgba(255, 0, 170, .5);
    }
    .panel-drop-zone .dz-label {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .5px;
      text-transform: uppercase;
      color: rgba(255,0,170,.6);
      opacity: 0;
      transition: opacity .15s;
      pointer-events: none;
    }
    .panel-drop-zone.drag-over .dz-label { opacity: 1; }

    .panel-body:empty::after {
      content: 'No component assigned';
      display: block;
      padding: 24px 16px;
      color: var(--text2);
      font-size: 12px;
      text-align: center;
    }

    /* Resize handle */
    .resize-handle {
      position: absolute;
      top: 0; bottom: 0;
      width: 8px;
      background: var(--resize-bg);
      cursor: col-resize;
      z-index: 20;
      transition: background .15s;
      touch-action: none;
    }
    .resize-handle:hover,
    .resize-handle.dragging { background: var(--resize-bgh); }
    .sidebar.side-left  .resize-handle { right: 0; }
    .sidebar.side-right .resize-handle { left:  0; }

    /* ── Viewport ─────────────────────────────────────────────────────────── */
    #viewport-wrap {
      flex: 1 1 0;
      min-width: 0;
      position: relative;
      background: var(--bg);
    }

    #viewport-mount {
      width: 100%;
      height: 100%;
      position: relative;
      background: var(--bg);
      --vtx-viewport3-bg: var(--bg);
    }

    .vtx-viewer-state {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background-color: var(--vtx-viewport3-bg, var(--bg));
      background:
        radial-gradient(circle at top, color-mix(in srgb, var(--text) 5%, transparent), transparent 42%),
        linear-gradient(180deg, color-mix(in srgb, var(--text) 2%, transparent), transparent),
        var(--vtx-viewport3-bg, var(--bg));
      z-index: 2;
    }

    .vtx-viewer-state-card {
      max-width: 440px;
      padding: 24px 28px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      box-shadow: var(--shadow);
      text-align: center;
    }

    .vtx-viewer-state-kicker {
      margin: 0 0 10px;
      color: var(--text2);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .vtx-viewer-state-title {
      margin: 0;
      color: var(--text);
      font-size: 24px;
      font-weight: 700;
      line-height: 1.15;
    }

    .vtx-viewer-state-detail {
      margin: 12px 0 0;
      color: var(--text2);
      font-size: 14px;
      line-height: 1.6;
    }

    /* Double-buffer overlay — shown during sidebar open/close transitions so
       the Three.js canvas appears static while the flex layout animates. */
    #canvas-snapshot {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      background: var(--vtx-viewport3-bg, var(--bg));
      pointer-events: none;
      opacity: 0;
      transition: opacity .08s;
      z-index: 10;
    }
    #canvas-snapshot.active { opacity: 1; }

    /* ── Collapsed toggle tabs ────────────────────────────────────────────── */
    /*
     * When a sidebar is collapsed, a tiny edge tab appears on the viewport
     * border so the user can re-open it.
     */
    .collapse-tab {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 20;
      display: none;          /* shown via JS when sidebar collapses */
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 56px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 0 6px 6px 0;
      cursor: pointer;
      box-shadow: var(--shadow);
      transition: background .12s;
    }
    .collapse-tab:hover { background: var(--surface2); }
    .collapse-tab.side-left  { left: 0; border-left: none; border-radius: 0 6px 6px 0; }
    .collapse-tab.side-right { right: 0; border-right: none; border-radius: 6px 0 0 6px; }
    .collapse-tab svg { color: var(--text2); width: var(--vtx-tab-icon-size, 10px); height: var(--vtx-tab-icon-size, 10px); }

    /* ── Event log ────────────────────────────────────────────────────────── */
    #log-bar {
      flex: 0 0 auto;
      background: var(--surface);
      border-top: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      height: 36px;
      overflow: hidden;
      transition: height .22s cubic-bezier(.4,0,.2,1);
    }
    #log-bar.open { height: var(--log-open-h, 280px); }
    #log-bar.resizing { transition: none; }

    #log-resize-handle {
      flex: 0 0 6px;
      cursor: ns-resize;
      background: transparent;
      display: none;
      align-items: center;
      justify-content: center;
      user-select: none;
      touch-action: none;
    }
    #log-bar.open #log-resize-handle { display: flex; }
    #log-resize-handle::before {
      content: '';
      width: 32px;
      height: 3px;
      border-radius: 2px;
      background: var(--border);
      transition: background .15s;
    }
    #log-resize-handle:hover::before,
    #log-resize-handle:active::before { background: var(--text2); }

    #log-header {
      flex: 0 0 auto;
      height: 36px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      cursor: pointer;
      user-select: none;
      border: none;
      background: transparent;
      color: var(--text2);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .5px;
      text-transform: uppercase;
      width: 100%;
      text-align: left;
    }
    #log-header:hover { color: var(--text); }
    #log-header .log-badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 18px; height: 16px; padding: 0 5px;
      font-size: 10px; font-weight: 700; border-radius: 8px;
      background: var(--accent); color: var(--accent-fg);
      opacity: 0; transition: opacity .2s;
    }
    #log-header .log-badge.visible { opacity: 1; }
    #log-header .log-spacer { flex: 1; }
    #log-header .log-chevron { transition: transform .22s; flex-shrink: 0; }
    #log-bar.open #log-header .log-chevron { transform: rotate(180deg); }

    #log-filters {
      display: none;
      align-items: center;
      gap: 6px;
      padding: 0 12px 8px;
      flex-wrap: wrap;
    }
    #log-bar.open #log-filters { display: flex; }

    .log-filter-btn {
      appearance: none;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text2);
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background .12s, color .12s, border-color .12s;
    }
    .log-filter-btn:hover {
      background: var(--surface2);
      color: var(--text);
    }
    .log-filter-btn.active {
      background: var(--accent);
      border-color: var(--accent);
      color: var(--accent-fg);
    }

    #log-filter-summary {
      margin-left: auto;
      color: var(--text2);
      font-size: 10px;
      letter-spacing: .02em;
      text-transform: none;
    }

    #log-clear {
      flex-shrink: 0;
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 600;
      border-radius: 4px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--text2);
      cursor: pointer;
      letter-spacing: .3px;
      transition: background .12s, color .12s;
    }
    #log-clear:hover { background: var(--surface2); color: var(--text); }

    #log-scroll {
      flex: 1 1 0;
      overflow-y: auto;
      padding: 0 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .log-entry {
      font-size: 11px;
      font-family: 'SF Mono', 'Fira Code', monospace;
      display: flex;
      gap: 8px;
      padding: 2px 0;
      border-bottom: 1px solid transparent;
    }
    .log-entry .lt { color: var(--text2); flex-shrink: 0; }
    .log-entry .lk {
      font-size: 10px; font-weight: 700; letter-spacing: .4px;
      text-transform: uppercase; flex-shrink: 0;
      padding: 1px 5px; border-radius: 3px; margin-top: 1px;
      min-width: 38px; text-align: center;
    }
    .log-entry .lm { color: var(--text); overflow-wrap: anywhere; flex: 1; }
    .log-entry.hidden { display: none; }
    /* kinds — light */
    .log-entry.info  .lk { background: #dbeafe; color: #1e40af; }
    .log-entry.ready .lk { background: #dcfce7; color: #166534; }
    .log-entry.state .lk { background: #ede9fe; color: #5b21b6; }
    .log-entry.warn  .lk { background: #fef08a; color: #854d0e; }
    .log-entry.error .lk { background: #fee2e2; color: #991b1b; }
    .log-entry.out   .lk { background: #fef3c7; color: #92400e; }
    .log-entry.in    .lk { background: #d1fae5; color: #065f46; }
    .log-entry.ui    .lk { background: #f3f4f6; color: #374151; }
    .log-entry.net   .lk { background: #e0f2fe; color: #0369a1; }
    /* kinds — dark */
    [data-theme="dark"] .log-entry.info  .lk { background: #1e3a5a; color: #93c5fd; }
    [data-theme="dark"] .log-entry.ready .lk { background: #14532d; color: #86efac; }
    [data-theme="dark"] .log-entry.state .lk { background: #2e1065; color: #c4b5fd; }
    [data-theme="dark"] .log-entry.warn  .lk { background: #422006; color: #fde047; }
    [data-theme="dark"] .log-entry.error .lk { background: #450a0a; color: #fca5a5; }
    [data-theme="dark"] .log-entry.out   .lk { background: #451a03; color: #fcd34d; }
    [data-theme="dark"] .log-entry.in    .lk { background: #064e3b; color: #6ee7b7; }
    [data-theme="dark"] .log-entry.ui    .lk { background: #1f2937; color: #9ca3af; }
    [data-theme="dark"] .log-entry.net   .lk { background: #082f49; color: #7dd3fc; }

    #panel-toggles {
      min-height: 32px;
    }

    #panel-toggles,
    #app-bar .btn.icon-btn:not(#btn-theme):not(#btn-mode):not(#btn-app-bar-menu) {
      display: none !important;
    }

    /* ── Dev / Production mode ──────────────────────────────────────────── */
    /*
     * [data-mode="dev"]         — shows app-bar + event log (default)
     * [data-mode="production"]  — hides all developer chrome; clean viewer
     *
     * Toggle via:
     *   • App-bar "Production" button  (dev → production)
     *   • Floating dev-pill            (production → dev)
    *   • ?uiMode=dev or ?uiMode=production  URL param
    *   • ?colorMode=light or ?colorMode=dark URL param (palette)
     *   • localStorage key: vtx-host-mode
     */
    [data-mode="production"] .dev-only { display: none !important; }
    /* wireframe tool is dev-only — hide it when in production mode */
    [data-mode="production"] [data-tool-id="wireframe"] { display: none !important; }


    /* Light mode — override --vtx-* so expanders match the host palette */
    .panel-body {
      --vtx-expanders-primary:         #ff00aa;
      --vtx-expanders-paper:           #ffffff;
      --vtx-expanders-divider:         #e0e0e0;
      --vtx-expanders-hover:           rgba(0,0,0,.04);
      --vtx-expanders-action-hover:    rgba(0,0,0,.06);
      --vtx-expanders-action-selected: rgba(0,0,0,.10);
      --vtx-expanders-text-primary:    #1a1a2e;
      --vtx-expanders-text-secondary:  #60607a;
      --vtx-expanders-text-disabled:   #9e9e9e;
    }
    /* Dark mode overrides */
    [data-theme="dark"] .panel-body {
      --vtx-expanders-paper:           #16161f;
      --vtx-expanders-divider:         rgba(255,255,255,.10);
      --vtx-expanders-hover:           rgba(255,255,255,.04);
      --vtx-expanders-action-hover:    rgba(255,255,255,.06);
      --vtx-expanders-action-selected: rgba(255,255,255,.10);
      --vtx-expanders-text-primary:    #e8e8f8;
      --vtx-expanders-text-secondary:  #8080a8;
      --vtx-expanders-text-disabled:   #444466;
    }

    /* ── Compact embed overlay mode ────────────────────────────────────────── */
    :host([data-compact-layout="true"]),
    :host([data-compact-layout="true"]) .vtx-host-wrap { overflow-x: hidden; max-width: 100%; }
    :host([data-compact-layout="true"]) .sidebar {
      position: absolute !important;
      flex: 0 0 0 !important;
      top: 0; bottom: 0;
      width: var(--vtx-mobile-sidebar-w, min(85vw, 360px)) !important;
      max-width: 100% !important;
      min-width: 0 !important;
      z-index: 30;
      box-shadow: 4px 0 24px rgba(0,0,0,.35);
      transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s;
    }
    :host([data-compact-layout="true"]) .sidebar.side-left  { left: 0; transform: translateX(0); }
    :host([data-compact-layout="true"]) .sidebar.side-right {
      right: 0;
      transform: translateX(0);
      box-shadow: -4px 0 24px rgba(0,0,0,.35);
    }
    :host([data-compact-layout="true"]) #viewport-wrap { width: 100% !important; flex: 1 1 auto !important; }
    :host([data-compact-layout="true"]) .sidebar.collapsed {
      flex: 0 0 0 !important;
      width: var(--vtx-mobile-sidebar-w, min(85vw, 360px)) !important;
      opacity: 1 !important;
      pointer-events: none;
      box-shadow: none !important;
    }
    :host([data-compact-layout="true"]) .sidebar.side-left.collapsed  { transform: translateX(-100%) !important; }
    :host([data-compact-layout="true"]) .sidebar.side-right.collapsed { transform: translateX(100%) !important; }
    :host([data-compact-layout="true"]) #mobile-backdrop {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 25;
      background: rgba(0,0,0,.48);
      pointer-events: none;
      opacity: 0;
      transition: opacity .28s;
    }
    :host([data-compact-layout="true"]) #mobile-backdrop.active {
      pointer-events: auto;
      opacity: 1;
    }
    :host([data-compact-layout="true"]) .collapse-tab {
      position: absolute !important;
      top: auto !important;
      transform: none !important;
      bottom: var(--vtx-tab-bottom, 24px);
      width: var(--vtx-tab-size, 52px) !important;
      height: var(--vtx-tab-size, 52px) !important;
      border-radius: 50% !important;
      background: var(--vtx-tab-color, var(--accent)) !important;
      border: none !important;
      box-shadow: 0 4px 18px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.2);
      z-index: 35;
      transition: opacity .2s, box-shadow .15s;
    }
    :host([data-compact-layout="true"]) .collapse-tab:hover { background: var(--vtx-tab-color, var(--accent)) !important; box-shadow: 0 6px 22px rgba(0,0,0,.45); }
    :host([data-compact-layout="true"]) .collapse-tab.side-left  { left: var(--vtx-tab-offset, 16px) !important; }
    :host([data-compact-layout="true"]) .collapse-tab.side-right { right: var(--vtx-tab-offset, 16px) !important; }
    :host([data-compact-layout="true"]) .collapse-tab svg {
      width: var(--vtx-tab-icon-size, 22px) !important;
      height: var(--vtx-tab-icon-size, 22px) !important;
      color: var(--vtx-tab-fg, var(--accent-fg)) !important;
    }
    :host([data-compact-layout="true"]) .resize-handle { display: none !important; }
    :host([data-compact-layout="true"]) .panel-grip { display: none !important; }

    /* ── Mobile overlay mode ───────────────────────────────────────────────── */
    /*
     * On small screens sidebars become absolute overlays that slide in from
     * the side instead of pushing the viewport.
     *
     * CSS custom properties you can override per-embed:
     *   --vtx-mobile-sidebar-w  sidebar width  (default: min(85vw, 360px))
     *   --vtx-tab-size          FAB button size (default: 52px)
     *   --vtx-tab-offset        FAB distance from screen edge (default: 16px)
     *   --vtx-tab-bottom        FAB distance from bottom     (default: 24px)
     *   --vtx-tab-icon-size     icon inside FAB              (default: 22px)
     *   --vtx-tab-color         FAB background               (default: --accent)
     *   --vtx-tab-fg            FAB icon colour              (default: --accent-fg)
     */
    @media (max-width: 640px) {
      /* Prevent any overflow from escaping the viewport */
      :host, .vtx-host-wrap { overflow-x: hidden; max-width: 100vw; }

      /* Compact app-bar on mobile */
      #app-bar {
        height: auto;
        min-height: 46px;
        padding: 6px 10px;
        gap: 6px;
      }
      #app-bar .app-bar-primary {
        flex-wrap: wrap;
      }
      #app-bar[data-titlebar-collapsed="true"] .app-bar-primary,
      #app-bar[data-titlebar-collapsed="true"] .app-bar-secondary {
        width: 100%;
      }
      #dev-pill { display: none !important; }
      .load-form {
        width: 100%;
        flex-wrap: wrap;
      }
      .load-form .load-field,
      .load-form .btn {
        flex: 1 1 100%;
      }
      .load-form input  { width: 100%; }
      .api-test-form {
        width: 100%;
        flex-wrap: wrap;
      }
      .api-test-drawer,
      .api-test-drawer-panel {
        width: 100%;
      }
      .api-test-form select {
        width: 100%;
        max-width: none;
        flex: 1 1 100%;
      }
      .api-test-form .api-test-fields {
        width: 100%;
        grid-template-columns: 1fr;
      }

      /* Sidebars become absolute overlays (don't push the viewport).
       * flex:0 0 0 is required to defeat the WebKit/Safari quirk where
       * absolutely-positioned flex items still contribute to flex layout. */
      .sidebar {
        position: absolute !important;
        flex: 0 0 0 !important;       /* zero out flex footprint */
        top: 0; bottom: 0;
        width: var(--vtx-mobile-sidebar-w, min(85vw, 360px)) !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        z-index: 30;
        box-shadow: 4px 0 24px rgba(0,0,0,.35);
        /* Only animate transform on mobile — no width/flex-basis transitions */
        transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .22s;
      }
      .sidebar.side-left  { left: 0;  transform: translateX(0); }
      .sidebar.side-right {
        right: 0;
        transform: translateX(0);
        box-shadow: -4px 0 24px rgba(0,0,0,.35);
      }

      /* Viewport always fills the full workspace width */
      #viewport-wrap { width: 100% !important; flex: 1 1 auto !important; }

      /* Collapsed = slid entirely off-screen, NOT width:0 */
      .sidebar.collapsed {
        flex: 0 0 0 !important;
        width: var(--vtx-mobile-sidebar-w, min(85vw, 360px)) !important;
        opacity: 1 !important;
        pointer-events: none;
        box-shadow: none !important;
      }
      .sidebar.side-left.collapsed  { transform: translateX(-100%) !important; }
      .sidebar.side-right.collapsed { transform: translateX(100%)  !important; }

      /* Backdrop: dims viewport behind an open sidebar */
      #mobile-backdrop {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 25;
        background: rgba(0,0,0,.48);
        pointer-events: none;
        opacity: 0;
        transition: opacity .28s;
      }
      #mobile-backdrop.active {
        pointer-events: auto;
        opacity: 1;
      }

      /* Collapse-tab — becomes a prominent circular FAB */
      .collapse-tab {
        position: absolute !important;
        top: auto !important;
        transform: none !important;
        bottom: var(--vtx-tab-bottom, 24px);
        width:  var(--vtx-tab-size, 52px) !important;
        height: var(--vtx-tab-size, 52px) !important;
        border-radius: 50% !important;
        background: var(--vtx-tab-color, var(--accent)) !important;
        border: none !important;
        box-shadow: 0 4px 18px rgba(0,0,0,.38), 0 1px 4px rgba(0,0,0,.2);
        z-index: 35;
        transition: opacity .2s, box-shadow .15s;
      }
      .collapse-tab:hover { background: var(--vtx-tab-color, var(--accent)) !important; box-shadow: 0 6px 22px rgba(0,0,0,.45); }
      .collapse-tab.side-left  { left:  var(--vtx-tab-offset, 16px) !important; border-radius: 50% !important; }
      .collapse-tab.side-right { right: var(--vtx-tab-offset, 16px) !important; border-radius: 50% !important; }
      .collapse-tab svg {
        width:  var(--vtx-tab-icon-size, 22px) !important;
        height: var(--vtx-tab-icon-size, 22px) !important;
        color: var(--vtx-tab-fg, var(--accent-fg)) !important;
      }

      /* Hide resize handles and drag-grip on mobile */
      .resize-handle { display: none !important; }
      .panel-grip    { display: none !important; }

      /* Log bar is dev-only and too small on mobile */
      #log-bar { display: none !important; }
    }