@symbo.ls/connect 3.2.7

package/dist/panel.css

@@ -0,0 +1,2239 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --bg: #141416;
+  --bg-alt: #242428;
+  --bg-hover: #34343a;
+  --bg-active: #45454b;
+  --border: #34343a;
+  --text: #bcbcc2;
+  --text-dim: #65656f;
+  --text-bright: #e0e0e2;
+  --accent: #0085FF;
+  --key-color: #50E1FF;
+  --string-color: #E8CC56;
+  --number-color: #BCD835;
+  --boolean-color: #0085FF;
+  --null-color: #65656f;
+  --function-color: #EE90BD;
+  --type-color: #59AC56;
+  --error-color: #EB6650;
+  --tag-color: #757581;
+}
+
+body {
+  font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
+  font-size: 12px;
+  background: var(--bg);
+  color: var(--text);
+  height: 100vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ============================================================
+   Top-level mode tabs (Chat / Editor)
+   ============================================================ */
+#mode-tabs {
+  display: flex;
+  align-items: center;
+  background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+  padding: 0 4px;
+}
+
+.mode-tab {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-dim);
+  padding: 7px 16px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: inherit;
+}
+
+.mode-tab:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
+.mode-tab.active {
+  color: var(--text-bright);
+  border-bottom-color: var(--accent);
+}
+
+.mode-tab-spacer {
+  flex: 1;
+}
+
+#app-connection-badge {
+  font-size: 10px;
+  color: var(--type-color);
+  padding: 2px 6px;
+  border: 1px solid var(--type-color);
+  border-radius: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 160px;
+}
+
+#btn-app-disconnect {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 4px 8px;
+  line-height: 1;
+}
+
+#btn-app-disconnect:hover {
+  color: var(--error-color);
+}
+
+/* ============================================================
+   Mode panels
+   ============================================================ */
+#app {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+}
+
+.mode-panel {
+  display: none;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.mode-panel.active {
+  display: flex;
+}
+
+/* ============================================================
+   Editor toolbar
+   ============================================================ */
+#toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+#toolbar button {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 3px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 11px;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+}
+
+#toolbar button:hover {
+  background: var(--bg-hover);
+}
+
+#toolbar button.active,
+#btn-pick.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+#btn-sync {
+  background: var(--type-color) !important;
+  color: #fff !important;
+  border-color: var(--type-color) !important;
+  font-weight: 600;
+}
+
+#btn-sync:hover {
+  opacity: 0.85;
+}
+
+#status {
+  color: var(--text-dim);
+  font-size: 11px;
+  margin-left: auto;
+}
+
+#btn-undo,
+#btn-redo {
+  font-size: 13px;
+  line-height: 1;
+  padding: 2px 6px !important;
+}
+
+#btn-undo:disabled,
+#btn-redo:disabled {
+  opacity: 0.25;
+  cursor: default;
+  pointer-events: none;
+}
+
+#btn-reload {
+  margin-left: 4px;
+  font-size: 14px;
+  line-height: 1;
+  padding: 2px 6px !important;
+  opacity: 0.6;
+}
+
+#btn-reload:hover {
+  opacity: 1;
+}
+
+/* ============================================================
+   Main layout
+   ============================================================ */
+#main {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+#tree-pane {
+  width: 300px;
+  min-width: 150px;
+  overflow: hidden;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+}
+
+#tree-pane-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.tree-pane-tab {
+  flex: 1;
+  padding: 5px 8px;
+  font-size: 11px;
+  color: var(--text-dim);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.tree-pane-tab:hover { color: var(--text); }
+
+.tree-pane-tab.active {
+  color: var(--text-bright);
+  border-bottom-color: var(--accent);
+}
+
+.tree-pane-panel {
+  display: none;
+  flex: 1;
+  overflow: auto;
+  padding: 4px 0;
+}
+
+.tree-pane-panel.active {
+  display: block;
+}
+
+/* State tree */
+.state-tree-key {
+  color: var(--key-color);
+  font-weight: 500;
+}
+
+.state-tree-badge {
+  display: inline-block;
+  margin-left: 4px;
+  padding: 0 4px;
+  font-size: 9px;
+  background: var(--accent);
+  color: #fff;
+  border-radius: 8px;
+  line-height: 14px;
+  vertical-align: middle;
+}
+
+.state-tree-value {
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  font-size: 11px;
+  line-height: 18px;
+  opacity: 0.85;
+}
+
+.state-tree-value:hover {
+  background: var(--bg-hover);
+  opacity: 1;
+}
+
+/* Design System tab */
+.ds-category {
+  border-bottom: 1px solid var(--border);
+}
+.ds-category-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--key-color);
+}
+.ds-category-header:hover {
+  background: var(--bg-hover);
+}
+.ds-category-name {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ds-category-count {
+  display: inline-block;
+  padding: 0 4px;
+  font-size: 9px;
+  background: var(--accent);
+  color: #fff;
+  border-radius: 8px;
+  line-height: 14px;
+  font-weight: 400;
+}
+.ds-category-body {
+  padding-bottom: 4px;
+}
+.ds-value-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  font-size: 11px;
+  line-height: 20px;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+}
+.ds-value-row:hover {
+  background: var(--bg-hover);
+}
+.ds-color-swatch {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  border: 1px solid rgba(128,128,128,0.3);
+  flex-shrink: 0;
+}
+
+/* Header connect button */
+.btn-header-connect {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 2px 10px;
+  font-size: 11px;
+  cursor: pointer;
+  margin-right: 4px;
+}
+.btn-header-connect:hover {
+  opacity: 0.85;
+}
+
+/* Connect dialog */
+.connect-dialog {
+  position: absolute;
+  top: 32px;
+  right: 8px;
+  z-index: 100;
+  display: flex;
+}
+.connect-dialog-inner {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+  min-width: 180px;
+}
+.connect-dialog-title {
+  font-size: 12px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: var(--text);
+}
+.connect-dialog-btn {
+  display: block;
+  width: 100%;
+  padding: 6px 10px;
+  margin-bottom: 4px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  background: var(--bg);
+  color: var(--text);
+  cursor: pointer;
+  font-size: 12px;
+  text-align: left;
+}
+.connect-dialog-btn:hover {
+  background: var(--bg-hover);
+}
+.connect-dialog-close {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 14px;
+}
+
+#resizer {
+  width: 4px;
+  cursor: col-resize;
+  background: transparent;
+  flex-shrink: 0;
+}
+
+#resizer:hover,
+#resizer.active {
+  background: var(--accent);
+}
+
+#detail-pane {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ============================================================
+   Detail header and tabs
+   ============================================================ */
+#detail-header {
+  padding: 8px 12px;
+  background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+#detail-key {
+  color: var(--key-color);
+  font-weight: bold;
+  font-size: 13px;
+}
+
+#detail-tag {
+  color: var(--tag-color);
+  font-size: 11px;
+}
+
+#detail-path {
+  color: var(--text-dim);
+  font-size: 10px;
+  margin-left: auto;
+}
+
+#detail-tabs {
+  display: flex;
+  gap: 0;
+  background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.tab {
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-dim);
+  padding: 6px 14px;
+  cursor: pointer;
+  font-size: 11px;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+}
+
+.tab:hover {
+  color: var(--text);
+  background: var(--bg-hover);
+}
+
+.tab.active {
+  color: var(--text-bright);
+  border-bottom-color: var(--accent);
+}
+
+/* Props sub-tabs (Computed / Original) */
+#props-subtabs {
+  display: flex;
+  gap: 0;
+  margin-bottom: 6px;
+  border-bottom: 1px solid var(--border);
+}
+
+.props-subtab {
+  padding: 3px 10px;
+  font-size: 10px;
+  color: var(--text-dim);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  font-family: inherit;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.props-subtab:hover { color: var(--text); }
+.props-subtab.active {
+  color: var(--text-bright);
+  border-bottom-color: var(--accent);
+}
+
+.props-subpanel { display: none; }
+.props-subpanel.active { display: block; }
+
+/* Function prop indicator */
+.prop-fn-badge {
+  display: inline-block;
+  font-size: 9px;
+  color: #C586C0;
+  margin-left: 4px;
+  font-style: italic;
+  opacity: 0.8;
+}
+
+.prop-row.is-function .prop-value {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.prop-fn-tooltip {
+  font-size: 10px;
+  color: var(--text-dim);
+  padding: 4px 8px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  margin-top: 2px;
+  font-style: italic;
+}
+
+.tab-spacer {
+  flex: 1;
+}
+
+#detail-content {
+  flex: 1;
+  overflow: auto;
+  padding: 8px 0;
+  position: relative;
+}
+
+.tab-panel {
+  display: none;
+  padding: 0 12px;
+}
+
+.tab-panel.active {
+  display: block;
+}
+
+#tab-source.active {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+}
+
+/* ============================================================
+   Tree view
+   ============================================================ */
+.tree-item {
+  display: flex;
+  align-items: center;
+  padding: 2px 0 2px 0;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+}
+
+.tree-item:hover {
+  background: var(--bg-hover);
+}
+
+.tree-item.selected {
+  background: var(--bg-active);
+}
+
+.tree-arrow {
+  width: 16px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.tree-arrow.has-children {
+  cursor: pointer;
+}
+
+.tree-label {
+  color: var(--key-color);
+}
+
+.tree-tag {
+  color: var(--tag-color);
+  margin-left: 6px;
+  font-size: 11px;
+}
+
+.tree-children {
+  display: none;
+}
+
+.tree-children.expanded {
+  display: block;
+}
+
+/* ============================================================
+   Property rows — Chrome DevTools CSS panel style
+   ============================================================ */
+.prop-row {
+  display: flex;
+  align-items: baseline;
+  padding: 1px 0 1px 16px;
+  min-height: 20px;
+  line-height: 18px;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  font-size: 12px;
+}
+
+.prop-row:hover {
+  background: var(--bg-hover);
+}
+
+.prop-key {
+  color: var(--key-color);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.prop-colon {
+  color: var(--text-dim);
+  margin-right: 6px;
+}
+
+.prop-value {
+  flex: 1;
+  word-break: break-all;
+  position: relative;
+}
+
+.prop-semi {
+  color: var(--text-dim);
+  margin-left: 1px;
+  opacity: 0.4;
+}
+
+.prop-value.editable {
+  cursor: text;
+  padding: 0 2px;
+  border-radius: 2px;
+  min-width: 20px;
+}
+
+.prop-value.editable:hover {
+  background: rgba(0, 133, 255, 0.08);
+  box-shadow: 0 0 0 1px rgba(0, 133, 255, 0.2);
+}
+
+.prop-value.editing {
+  background: var(--bg);
+  box-shadow: 0 0 0 1px var(--accent);
+  border-radius: 2px;
+}
+
+.prop-edit-input {
+  background: transparent;
+  border: none;
+  color: var(--string-color);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  padding: 0;
+  width: 100%;
+  outline: none;
+  min-width: 30px;
+}
+
+/* Object/array editor */
+.obj-editor {
+  padding: 4px 0;
+  width: 100%;
+}
+.obj-editor-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 1px 0;
+}
+.obj-key-input {
+  max-width: 80px;
+  color: var(--key-color) !important;
+  opacity: 0.8;
+}
+.obj-editor-del {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0 2px;
+  opacity: 0.5;
+}
+.obj-editor-del:hover {
+  opacity: 1;
+  color: var(--error-color);
+}
+.obj-editor-actions {
+  display: flex;
+  gap: 4px;
+  padding: 4px 0 2px;
+}
+.obj-editor-save,
+.obj-editor-cancel {
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  font-size: 10px;
+  cursor: pointer;
+  background: var(--bg);
+  color: var(--text);
+}
+.obj-editor-save {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+.obj-editor-save:hover { opacity: 0.85; }
+.obj-editor-cancel:hover { background: var(--bg-hover); }
+
+/* Value type colors */
+.v-string { color: var(--string-color); }
+.v-number { color: var(--number-color); }
+.v-boolean { color: var(--boolean-color); }
+.v-null { color: var(--null-color); font-style: italic; }
+.v-function { color: var(--function-color); font-style: italic; }
+.v-type { color: var(--type-color); font-style: italic; }
+.v-error { color: var(--error-color); }
+
+/* ============================================================
+   Property dropdown suggestions
+   ============================================================ */
+.prop-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  max-height: 180px;
+  overflow: auto;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+  margin-top: 2px;
+}
+
+.prop-dropdown-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-size: 11px;
+}
+
+.prop-dropdown-item:hover,
+.prop-dropdown-item.active {
+  background: var(--bg-hover);
+}
+
+.prop-dropdown-item .dd-label {
+  color: var(--text-bright);
+}
+
+.prop-dropdown-item .dd-hint {
+  color: var(--text-dim);
+  font-size: 10px;
+  margin-left: 8px;
+}
+
+.prop-dropdown-item .dd-swatch {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+  border: 1px solid var(--border);
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+/* Nested object view */
+.nested-obj {
+  margin-left: 16px;
+  border-left: 1px solid var(--border);
+  padding-left: 8px;
+}
+
+.nested-toggle {
+  cursor: pointer;
+  color: var(--text-dim);
+}
+
+.nested-toggle:hover {
+  color: var(--text);
+}
+
+/* ============================================================
+   Methods
+   ============================================================ */
+.method-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.method-name {
+  color: var(--function-color);
+}
+
+.method-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--accent);
+  padding: 2px 8px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 11px;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+}
+
+.method-btn:hover {
+  background: var(--bg-hover);
+}
+
+.method-args {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  font-size: 11px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  width: 200px;
+}
+
+.method-result {
+  color: var(--text-dim);
+  font-size: 11px;
+  margin-left: 8px;
+}
+
+/* ============================================================
+   Children list
+   ============================================================ */
+.child-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  cursor: pointer;
+}
+
+.child-item:hover {
+  background: var(--bg-hover);
+}
+
+.child-key {
+  color: var(--key-color);
+}
+
+.child-tag {
+  color: var(--tag-color);
+  font-size: 11px;
+}
+
+.child-arrow {
+  color: var(--text-dim);
+  margin-left: auto;
+  font-size: 10px;
+}
+
+/* ============================================================
+   Section headers
+   ============================================================ */
+.section-header {
+  color: var(--text-dim);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 8px 0 4px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+}
+
+.prop-source-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--function-color);
+  font-size: 10px;
+  letter-spacing: 0.5px;
+  padding: 6px 0 3px;
+  margin-top: 6px;
+  border-bottom: 1px solid var(--border);
+  opacity: 0.75;
+}
+
+.prop-source-header:first-child {
+  margin-top: 0;
+}
+
+.empty-message {
+  color: var(--text-dim);
+  font-style: italic;
+  padding: 8px 0;
+}
+
+/* ============================================================
+   Connect Screen
+   ============================================================ */
+#connect-screen {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  background: var(--bg);
+}
+
+.connect-inner {
+  text-align: center;
+  max-width: 420px;
+  padding: 40px;
+}
+
+.connect-logo {
+  width: 56px;
+  height: 56px;
+  margin: 0 auto 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.connect-logo svg {
+  width: 56px;
+  height: 56px;
+  fill: var(--accent);
+}
+
+.connect-title {
+  font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin-bottom: 6px;
+}
+
+.connect-desc {
+  font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-bottom: 32px;
+  line-height: 1.4;
+}
+
+.connect-error {
+  background: rgba(235, 102, 80, 0.1);
+  border: 1px solid var(--error-color);
+  color: var(--error-color);
+  padding: 10px 14px;
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 1.4;
+  margin-bottom: 16px;
+  text-align: left;
+}
+
+.connect-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.connect-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 14px 16px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.connect-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent);
+}
+
+.connect-btn-icon {
+  font-size: 24px;
+  flex-shrink: 0;
+  width: 36px;
+  text-align: center;
+}
+
+.connect-btn-label {
+  font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-bright);
+  display: block;
+}
+
+.connect-btn-hint {
+  font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
+  font-size: 11px;
+  color: var(--text-dim);
+  display: block;
+  margin-top: 2px;
+}
+
+.connect-recent {
+  margin-top: 24px;
+  text-align: left;
+}
+
+.recent-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-top: 4px;
+}
+
+.recent-item:hover {
+  background: var(--bg-hover);
+}
+
+.recent-item.matching {
+  border: 1px solid var(--type-color);
+  background: rgba(89, 172, 86, 0.08);
+}
+
+.recent-name {
+  color: var(--text-bright);
+  font-family: 'DmSansVariable', 'Helvetica Neue', 'Helvetica', system-ui, sans-serif;
+  font-size: 12px;
+}
+
+.recent-type {
+  color: var(--text-dim);
+  font-size: 10px;
+  margin-left: auto;
+}
+
+/* ============================================================
+   Inspector layout (when connected)
+   ============================================================ */
+#connection-badge {
+  font-size: 11px;
+  color: var(--type-color);
+  padding: 2px 8px;
+  border: 1px solid var(--type-color);
+  border-radius: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 200px;
+}
+
+#btn-disconnect {
+  color: var(--text-dim) !important;
+  border-color: transparent !important;
+  font-size: 10px !important;
+}
+
+#btn-disconnect:hover {
+  color: var(--error-color) !important;
+}
+
+/* Tree section headers */
+.tree-section-label {
+  display: block;
+  padding: 6px 8px 4px;
+  color: var(--text-dim);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border-bottom: 1px solid var(--border);
+}
+
+#active-section {
+  padding: 4px 0;
+}
+
+#symbols-section {
+  border-top: 1px solid var(--border);
+  padding: 4px 0;
+}
+
+/* File tree */
+.file-item {
+  display: flex;
+  align-items: center;
+  padding: 2px 0;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  font-size: 11px;
+}
+
+.file-item:hover {
+  background: var(--bg-hover);
+}
+
+.file-item.selected {
+  background: var(--bg-active);
+}
+
+.file-icon {
+  width: 16px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.file-name {
+  color: var(--text);
+}
+
+.file-name.dir {
+  color: var(--key-color);
+}
+
+.file-children {
+  display: none;
+}
+
+.file-children.expanded {
+  display: block;
+}
+
+/* ============================================================
+   Source tab
+   ============================================================ */
+#tab-source {
+  position: relative;
+}
+
+.source-path {
+  color: var(--text-dim);
+  font-size: 10px;
+  padding: 4px 0 8px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 8px;
+}
+
+/* Code editor */
+.ce-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-alt);
+  flex-shrink: 0;
+}
+
+.ce-path {
+  font-size: 11px;
+  color: var(--text-dim);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ce-status {
+  font-size: 10px;
+  color: var(--text-dim);
+}
+
+.ce-status.ce-modified { color: var(--string-color); }
+.ce-status.ce-saved { color: var(--type-color); }
+.ce-status.ce-error { color: var(--error-color); }
+
+.ce-save {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  padding: 2px 12px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  font-size: 10px;
+}
+
+.ce-save:hover { opacity: 0.85; }
+.ce-save:disabled { opacity: 0.35; cursor: default; }
+
+.ce-wrap {
+  position: relative;
+  flex: 1;
+  overflow: hidden;
+  background: var(--bg);
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.ce-gutter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 44px;
+  height: 100%;
+  overflow: hidden;
+  background: var(--bg-alt);
+  border-right: 1px solid var(--border);
+  z-index: 2;
+  user-select: none;
+}
+
+.ce-ln {
+  height: 18px;
+  text-align: right;
+  padding-right: 8px;
+  color: var(--text-dim);
+  opacity: 0.5;
+  font-size: 11px;
+}
+
+.ce-highlight {
+  position: absolute;
+  top: 0;
+  left: 44px;
+  right: 0;
+  height: 100%;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 1;
+  padding: 0 8px;
+  white-space: pre;
+  color: var(--text);
+}
+
+.ce-line {
+  height: 18px;
+  white-space: pre;
+}
+
+.ce-line.ce-active {
+  background: rgba(0, 133, 255, 0.12);
+  box-shadow: inset 3px 0 0 var(--accent);
+}
+
+.ce-textarea {
+  position: absolute;
+  top: 0;
+  left: 44px;
+  right: 0;
+  height: 100%;
+  width: calc(100% - 44px);
+  background: transparent;
+  color: transparent;
+  caret-color: var(--text-bright);
+  border: none;
+  outline: none;
+  resize: none;
+  font: inherit;
+  line-height: inherit;
+  padding: 0 8px;
+  tab-size: 2;
+  z-index: 3;
+  white-space: pre;
+  overflow: auto;
+}
+
+.ce-textarea::selection {
+  background: rgba(0, 133, 255, 0.3);
+}
+
+/* Syntax highlight tokens */
+.sh-keyword { color: #C586C0; }
+.sh-string { color: var(--string-color); }
+.sh-number { color: var(--number-color); }
+.sh-boolean { color: var(--boolean-color); }
+.sh-comment { color: #6A9955; font-style: italic; }
+
+/* Prop source badges */
+.prop-source-file {
+  font-size: 9px;
+  color: var(--accent);
+  opacity: 0.7;
+  cursor: pointer;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+}
+
+.prop-source-file:hover {
+  opacity: 1;
+  text-decoration: underline;
+}
+
+.prop-key.has-source {
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+  text-decoration-color: var(--text-dim);
+}
+
+.prop-key.has-source:hover {
+  color: var(--accent);
+  text-decoration-color: var(--accent);
+}
+
+/* Save bar */
+.prop-save-bar {
+  margin-top: 12px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.prop-save-btn {
+  background: var(--type-color);
+  color: #fff;
+  border: none;
+  padding: 6px 16px;
+  border-radius: 4px;
+  cursor: pointer;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  font-size: 11px;
+  width: 100%;
+}
+
+.prop-save-btn:hover {
+  opacity: 0.9;
+}
+
+/* Add prop/state button */
+.prop-add-row {
+  padding: 4px 16px;
+  margin-top: 4px;
+}
+
+.prop-add-btn {
+  background: transparent;
+  border: 1px dashed var(--border);
+  color: var(--text-dim);
+  padding: 4px 12px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  cursor: pointer;
+  width: 100%;
+}
+
+.prop-add-btn:hover {
+  border-color: var(--accent);
+  color: var(--text);
+}
+
+/* ============================================================
+   AI Bar (Editor bottom bar)
+   ============================================================ */
+#ai-bar {
+  border-top: 1px solid var(--border);
+  background: var(--bg-alt);
+  padding: 8px 12px;
+  flex-shrink: 0;
+}
+
+#ai-result {
+  font-size: 11px;
+  color: var(--text-dim);
+  min-height: 0;
+  padding: 0;
+  margin-bottom: 4px;
+  max-height: 80px;
+  overflow: auto;
+  line-height: 1.4;
+}
+
+#ai-result:empty {
+  display: none;
+  margin: 0;
+}
+
+#ai-input-row,
+#chat-input-row {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+#ai-input,
+#chat-input {
+  flex: 1;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 12px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  outline: none;
+}
+
+#ai-input:focus,
+#chat-input:focus {
+  border-color: var(--accent);
+}
+
+#ai-input::placeholder,
+#chat-input::placeholder {
+  color: var(--text-dim);
+}
+
+#ai-send,
+#chat-send {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  padding: 6px 14px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-family: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+#ai-send:hover,
+#chat-send:hover {
+  opacity: 0.9;
+}
+
+/* AI model selector */
+.ai-model-select {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 10px;
+  padding: 5px 6px;
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+  font-family: inherit;
+  flex-shrink: 0;
+}
+
+.ai-model-select:focus {
+  border-color: var(--accent);
+}
+
+.ai-settings-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 2px 4px;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.ai-settings-btn:hover { color: var(--text-bright); }
+
+/* AI Settings Dialog */
+.ai-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0,0,0,0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ai-dialog {
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  width: 340px;
+  max-height: 80vh;
+  overflow: auto;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+}
+
+.ai-dialog-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-bright);
+}
+
+.ai-dialog-header button {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0 4px;
+  font-family: inherit;
+}
+
+.ai-dialog-header button:hover { color: var(--text-bright); }
+
+.ai-dialog-body {
+  padding: 14px;
+}
+
+.ai-dialog-section {
+  margin-bottom: 12px;
+}
+
+.ai-dialog-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-bright);
+  margin-bottom: 4px;
+}
+
+.ai-dialog-hint {
+  font-size: 11px;
+  color: var(--text-dim);
+  line-height: 1.4;
+  margin-bottom: 10px;
+}
+
+.ai-dialog-auth-status {
+  font-size: 11px;
+  padding: 6px 10px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+
+.ai-dialog-auth-status.signed-in {
+  background: rgba(89, 172, 86, 0.12);
+  color: #59AC56;
+  border: 1px solid rgba(89, 172, 86, 0.2);
+}
+
+.ai-dialog-auth-status.signed-out {
+  background: rgba(0, 133, 255, 0.08);
+  color: var(--accent);
+  border: 1px solid rgba(0, 133, 255, 0.15);
+}
+
+.ai-dialog-field {
+  margin-bottom: 10px;
+}
+
+.ai-dialog-field label {
+  display: block;
+  font-size: 11px;
+  color: var(--text-dim);
+  margin-bottom: 4px;
+}
+
+.ai-dialog-input {
+  width: 100%;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 7px 10px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.ai-dialog-input:focus {
+  border-color: var(--accent);
+}
+
+.ai-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.ai-dialog-save {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  padding: 6px 20px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.ai-dialog-save:hover { opacity: 0.9; }
+
+/* Scope toggle (Element / Section) */
+.ai-scope-toggle {
+  display: flex;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.ai-scope-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  font-size: 10px;
+  padding: 4px 8px;
+  cursor: pointer;
+  font-family: inherit;
+  white-space: nowrap;
+}
+
+.ai-scope-btn:first-child {
+  border-right: 1px solid var(--border);
+}
+
+.ai-scope-btn:hover {
+  color: var(--text);
+}
+
+.ai-scope-btn.active {
+  background: var(--accent);
+  color: #fff;
+}
+
+/* ============================================================
+   Chat mode
+   ============================================================ */
+#mode-chat {
+  background: var(--bg);
+}
+
+/* Thread bar */
+#chat-threads-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-alt);
+  overflow-x: auto;
+  flex-shrink: 0;
+}
+
+#chat-threads-list {
+  display: flex;
+  gap: 2px;
+  flex: 1;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+#chat-threads-list::-webkit-scrollbar { display: none; }
+
+.thread-tab {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  color: var(--text-dim);
+  background: transparent;
+  border: 1px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  max-width: 140px;
+  font-family: inherit;
+}
+
+.thread-tab:hover {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.thread-tab.active {
+  background: var(--bg);
+  color: var(--text-bright);
+  border-color: var(--border);
+}
+
+.thread-tab .thread-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.thread-tab .thread-close {
+  font-size: 10px;
+  opacity: 0;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+}
+
+.thread-tab:hover .thread-close { opacity: 0.6; }
+.thread-tab .thread-close:hover { opacity: 1; color: var(--error-color, #e15c55); }
+
+#chat-thread-history,
+#chat-new-thread {
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  color: var(--text-dim);
+  background: transparent;
+  border: 1px solid var(--border);
+  cursor: pointer;
+  white-space: nowrap;
+  font-family: inherit;
+  flex-shrink: 0;
+}
+
+#chat-thread-history:hover,
+#chat-new-thread:hover {
+  color: var(--text-bright);
+  border-color: var(--accent);
+}
+
+/* Thread history panel */
+#chat-thread-history-panel {
+  background: var(--bg-alt);
+  border-bottom: 1px solid var(--border);
+  max-height: 200px;
+  overflow: auto;
+  flex-shrink: 0;
+}
+
+.thread-history-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--border);
+}
+
+.thread-history-header button {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 4px;
+  font-family: inherit;
+}
+
+.thread-history-header button:hover { color: var(--text-bright); }
+
+.thread-history-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 10px;
+  font-size: 11px;
+  color: var(--text);
+  cursor: pointer;
+  border-bottom: 1px solid var(--border);
+  gap: 8px;
+}
+
+.thread-history-item:hover { background: var(--bg-hover); }
+.thread-history-item.active { background: var(--bg); color: var(--text-bright); }
+
+.thread-history-item .thread-history-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.thread-history-item .thread-history-date {
+  font-size: 10px;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+
+.thread-history-item .thread-history-delete {
+  font-size: 10px;
+  opacity: 0;
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 0 4px;
+}
+
+.thread-history-item:hover .thread-history-delete { opacity: 0.6; }
+.thread-history-item .thread-history-delete:hover { opacity: 1; color: var(--error-color, #e15c55); }
+
+#chat-messages {
+  flex: 1;
+  overflow: auto;
+  padding: 16px 16px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.chat-msg {
+  max-width: 90%;
+  padding: 8px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.chat-msg.user {
+  align-self: flex-end;
+  background: var(--accent);
+  color: #fff;
+  border-bottom-right-radius: 2px;
+}
+
+.chat-msg.assistant {
+  align-self: flex-start;
+  background: var(--bg-alt);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-bottom-left-radius: 2px;
+}
+
+.chat-msg.assistant pre {
+  background: var(--bg);
+  padding: 6px 8px;
+  border-radius: 4px;
+  margin: 6px 0;
+  overflow-x: auto;
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  font-size: 11px;
+}
+
+.chat-msg.assistant code {
+  font-family: 'Droid Sans Mono for Powerline', 'SF Mono', 'Menlo', monospace;
+  font-size: 11px;
+  background: var(--bg);
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+
+.chat-msg.system {
+  align-self: center;
+  color: var(--text-dim);
+  font-size: 11px;
+  font-style: italic;
+  padding: 4px 8px;
+}
+
+.chat-msg .chat-actions {
+  margin-top: 8px;
+  display: flex;
+  gap: 6px;
+}
+
+.chat-msg .chat-apply-btn {
+  background: var(--type-color);
+  color: #fff;
+  border: none;
+  padding: 3px 10px;
+  border-radius: 3px;
+  font-size: 10px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.chat-msg .chat-apply-btn:hover {
+  opacity: 0.9;
+}
+
+.chat-thinking {
+  color: var(--text-dim);
+  font-style: italic;
+  animation: auth-pulse 2s ease-in-out infinite;
+}
+
+/* Chat context bar */
+#chat-context-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-alt);
+  flex-shrink: 0;
+}
+
+.chat-context-label {
+  font-size: 11px;
+  color: var(--text-dim);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chat-context-label.has-element {
+  color: var(--key-color);
+}
+
+.chat-pick-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 3px 10px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 10px;
+  font-family: inherit;
+  flex-shrink: 0;
+}
+
+.chat-pick-btn:hover {
+  background: var(--bg-hover);
+  border-color: var(--accent);
+}
+
+.chat-pick-btn.active {
+  background: var(--accent);
+  color: #fff;
+  border-color: var(--accent);
+}
+
+#chat-input-row {
+  padding: 8px 12px;
+  border-top: 1px solid var(--border);
+  background: var(--bg-alt);
+  flex-shrink: 0;
+}
+
+/* ============================================================
+   Auth section
+   ============================================================ */
+#auth-section {
+  margin-bottom: 20px;
+}
+
+.auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.auth-input {
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  padding: 10px 12px;
+  border-radius: 6px;
+  outline: none;
+}
+
+.auth-input:focus {
+  border-color: var(--accent);
+}
+
+.auth-input::placeholder {
+  color: var(--text-dim);
+}
+
+.auth-btn {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  padding: 10px 16px;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.auth-btn-primary {
+  background: var(--accent);
+  font-weight: 600;
+  font-size: 14px;
+  padding: 12px 16px;
+}
+
+.auth-btn:hover {
+  opacity: 0.9;
+}
+
+.auth-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 4px 0;
+}
+
+.auth-divider::before,
+.auth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.auth-divider span {
+  color: var(--text-dim);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.auth-status {
+  color: var(--text-dim);
+  font-size: 12px;
+  padding: 8px 12px;
+  background: var(--bg-alt);
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  text-align: center;
+  line-height: 1.4;
+}
+
+.auth-status.waiting {
+  color: var(--string-color);
+  border-color: var(--string-color);
+  animation: auth-pulse 2s ease-in-out infinite;
+}
+
+@keyframes auth-pulse {
+  0%, 100% { opacity: 0.7; }
+  50% { opacity: 1; }
+}
+
+.auth-error {
+  color: var(--error-color);
+  font-size: 12px;
+  padding: 4px 0;
+}
+
+.auth-user-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: var(--bg-alt);
+  border-radius: 6px;
+  border: 1px solid var(--border);
+}
+
+.auth-user-name {
+  color: var(--text-bright);
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.auth-sign-out {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  padding: 4px 10px;
+  border-radius: 4px;
+  font-size: 11px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.auth-sign-out:hover {
+  color: var(--error-color);
+  border-color: var(--error-color);
+}
+
+/* ============================================================
+   JSON Tree Editor
+   ============================================================ */
+.json-editor {
+  padding: 0 12px;
+  overflow: auto;
+  flex: 1;
+}
+
+.json-row {
+  display: flex;
+  align-items: flex-start;
+  padding: 2px 0;
+  min-height: 22px;
+}
+
+.json-indent {
+  flex-shrink: 0;
+}
+
+.json-toggle {
+  width: 14px;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--text-dim);
+  font-size: 10px;
+  text-align: center;
+  user-select: none;
+}
+
+.json-toggle:hover {
+  color: var(--text);
+}
+
+.json-key {
+  color: var(--key-color);
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.json-colon {
+  color: var(--text-dim);
+  margin-right: 6px;
+}
+
+.json-value {
+  flex: 1;
+  word-break: break-all;
+}
+
+.json-value.editable {
+  cursor: text;
+  padding: 0 4px;
+  border-radius: 2px;
+}
+
+.json-value.editable:hover {
+  background: var(--bg-hover);
+  outline: 1px solid var(--border);
+}
+
+.json-children {
+  display: none;
+}
+
+.json-children.expanded {
+  display: block;
+}
+
+.json-bracket {
+  color: var(--text-dim);
+}
+
+/* Platform data tab */
+#tab-data {
+  position: relative;
+}
+
+.data-path-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 0 8px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 8px;
+  flex-wrap: wrap;
+}
+
+.data-path-segment {
+  color: var(--accent);
+  font-size: 11px;
+  cursor: pointer;
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+
+.data-path-segment:hover {
+  background: var(--bg-hover);
+}
+
+.data-path-sep {
+  color: var(--text-dim);
+  font-size: 10px;
+}
+
+/* Project list items */
+.project-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  cursor: pointer;
+  border-radius: 4px;
+  margin-top: 4px;
+}
+
+.project-item:hover {
+  background: var(--bg-hover);
+}
+
+.project-item.matching {
+  border: 1px solid var(--type-color);
+  background: rgba(89, 172, 86, 0.08);
+}
+
+.project-name {
+  color: var(--text-bright);
+  font-size: 12px;
+}
+
+.project-key {
+  color: var(--text-dim);
+  font-size: 10px;
+  margin-left: auto;
+}
+
+.project-match-badge {
+  font-size: 9px;
+  color: var(--type-color);
+  border: 1px solid var(--type-color);
+  border-radius: 3px;
+  padding: 1px 5px;
+  margin-left: 4px;
+}