pi-inspect 0.4.0 → 0.6.0

package/public/style.css

@@ -1,5 +1,4 @@
-/* === VARIABLES (from cck) === */
-
+/* Tokens follow the pi-kanban board's Ember theme, so a framed dashboard matches the board before its theme message arrives. */
 :root {
   --bg-deep: #101114;
   --bg-surface: #16181c;
@@ -12,61 +11,40 @@
   --text-muted: #7d808a;
   --accent: #e86f33;
   --accent-text: #f0a070;
-  --accent-dim: rgba(232, 111, 51, 0.22);
-  --accent-glow: rgba(232, 111, 51, 0.55);
   --success: #3ecf8e;
-  --success-dim: rgba(62, 207, 142, 0.18);
   --warning: #f0b429;
-  --warning-dim: rgba(240, 180, 41, 0.18);
-  --error: #ef4444;
-  --error-dim: rgba(239, 68, 68, 0.18);
-  --team: #c4956a;
-  --team-dim: rgba(196, 149, 106, 0.18);
-  --plan: #86a886;
-  --plan-dim: rgba(134, 168, 134, 0.18);
-  --mono: 'IBM Plex Mono', monospace;
+  --error: #ef5350;
+  --md-code: #98c379;
+  --md-num: #d19a66;
+  --md-kw: #c678dd;
+  --mono: 'IBM Plex Mono', ui-monospace, monospace;
   --serif: 'Playfair Display', serif;
-
-  --scope-user: #c4956a;
-  --scope-user-dim: rgba(196, 149, 106, 0.18);
-  --scope-project: #7ab5a0;
-  --scope-project-dim: rgba(122, 181, 160, 0.18);
-  --scope-local: #8a9bb5;
-  --scope-local-dim: rgba(138, 155, 181, 0.18);
+  --radius: 8px;
+  --radius-sm: 6px;
+  --row-h: 34px;
+  color-scheme: dark;
 }
 
 body.light {
   --bg-deep: #e8e6e3;
-  --bg-surface: #f4f3f1;
-  --bg-elevated: #dddbd8;
+  --bg-surface: #efede9;
+  --bg-elevated: #fbfaf9;
   --bg-hover: #d2d0cc;
-  --border: #a09b94;
+  --border: #cfcbc4;
   --text-primary: #0a0a0a;
-  --text-secondary: #333333;
-  --text-tertiary: #555555;
-  --text-muted: #777777;
-  --accent-text: #b85a20;
-  --accent-dim: rgba(232, 111, 51, 0.18);
-  --accent-glow: rgba(232, 111, 51, 0.5);
+  --text-secondary: #2c2c2c;
+  --text-tertiary: #565656;
+  --text-muted: #767676;
+  --accent-text: #a0501c;
   --success: #1a8a5a;
-  --success-dim: rgba(26, 138, 90, 0.15);
   --warning: #b07d0a;
-  --warning-dim: rgba(176, 125, 10, 0.15);
-  --error: #c53030;
-  --error-dim: rgba(197, 48, 48, 0.15);
-  --plan: #5a7a5a;
-  --plan-dim: rgba(90, 122, 90, 0.15);
-
-  --scope-user: #8a7055;
-  --scope-user-dim: rgba(138, 112, 85, 0.12);
-  --scope-project: #4d8a72;
-  --scope-project-dim: rgba(77, 138, 114, 0.15);
-  --scope-local: #6b7d96;
-  --scope-local-dim: rgba(107, 125, 150, 0.12);
+  --error: #c0392b;
+  --md-code: #50a14f;
+  --md-num: #986801;
+  --md-kw: #a626a4;
+  color-scheme: light;
 }
 
-/* === RESET === */
-
 * {
   box-sizing: border-box;
   margin: 0;
@@ -74,1414 +52,607 @@ body.light {
 }
 
 body {
+  --accent-dim: color-mix(in srgb, var(--accent) 18%, transparent);
+  --warning-dim: color-mix(in srgb, var(--warning) 16%, transparent);
+  --border-soft: color-mix(in srgb, var(--border) 60%, transparent);
   font-family: var(--mono);
   font-size: 13px;
+  line-height: 1.5;
   background: var(--bg-deep);
   color: var(--text-primary);
-  line-height: 1.5;
   height: 100vh;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   -webkit-font-smoothing: antialiased;
 }
+body.resizing {
+  cursor: col-resize;
+  user-select: none;
+}
 
-/* === SCROLLBAR === */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
 
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
 }
-::-webkit-scrollbar-track {
-  background: transparent;
+
+button, select, input {
+  font: inherit;
+  color: inherit;
 }
-::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 3px;
+
+kbd {
+  display: inline-block;
+  min-width: 18px;
+  padding: 0 4px;
+  border: 1px solid var(--border);
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  background: var(--bg-elevated);
+  color: var(--text-tertiary);
+  font-family: var(--mono);
+  font-size: 10px;
+  line-height: 16px;
+  text-align: center;
+  white-space: nowrap;
 }
-::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
+
+code {
+  font-family: var(--mono);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-soft);
+  border-radius: 4px;
+  padding: 0 4px;
+  color: var(--accent-text);
 }
 
-/* === TOPBAR === */
+.spacer { flex: 1; }
+.accent { color: var(--accent); }
+
+/* Topbar */
 
 .topbar {
   display: flex;
   align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
+  flex-wrap: wrap;
+  gap: 8px 10px;
+  padding: 8px 14px;
   background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+  border-bottom: 1px solid var(--border-soft);
   flex-shrink: 0;
-  z-index: 10;
 }
 
 .topbar-logo {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
+  margin-right: 4px;
 }
-
-.topbar-logo .logo-mark {
-  width: 24px;
-  height: 24px;
+.logo-mark {
+  width: 22px;
+  height: 22px;
+  border-radius: var(--radius-sm);
   background: var(--accent);
-  border-radius: 6px;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-
-.topbar-logo .logo-mark svg {
-  width: 14px;
-  height: 14px;
-  color: white;
-}
-
-.topbar-logo .logo-text {
+.logo-mark svg { width: 13px; height: 13px; color: #fff; }
+.logo-text {
   font-family: var(--serif);
   font-size: 17px;
   font-weight: 500;
   letter-spacing: -0.02em;
-}
-
-.accent {
-  color: var(--accent);
-}
-.spacer {
-  flex: 1;
+  white-space: nowrap;
 }
 
 .topbar-search {
   display: flex;
   align-items: center;
   gap: 6px;
+  height: 30px;
+  padding: 0 8px;
   background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 6px 10px;
-  transition: border-color 0.15s ease;
-}
-.topbar-search:focus-within {
-  border-color: var(--accent);
-}
-.topbar-search svg {
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
   color: var(--text-muted);
-  flex-shrink: 0;
+  cursor: text;
 }
+.topbar-search:focus-within { border-color: var(--accent); }
 .topbar-search input {
+  width: 200px;
   background: none;
   border: none;
-  color: var(--text-primary);
-  font-size: 12px;
-  font-family: var(--mono);
   outline: none;
-  width: 200px;
-}
-.topbar-search input::placeholder {
-  color: var(--text-muted);
+  font-size: 12px;
+  color: var(--text-primary);
 }
+.topbar-search input::placeholder { color: var(--text-muted); }
+.topbar-search:focus-within kbd { visibility: hidden; }
 
 .topbar-select {
+  height: 30px;
+  max-width: 260px;
+  padding: 0 8px;
   background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 6px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
   color: var(--text-secondary);
-  font-family: var(--mono);
-  font-size: 11px;
-  padding: 4px 8px;
-  outline: none;
+  font-size: 12px;
   cursor: pointer;
 }
-.topbar-select:focus {
-  border-color: var(--accent);
-}
-.topbar-select option {
-  background: var(--bg-surface);
-  color: var(--text-primary);
-}
+.topbar-select:focus-visible { outline: none; border-color: var(--accent); }
+.topbar-select option { background: var(--bg-surface); color: var(--text-primary); }
 
 .topbar-project {
   display: flex;
   align-items: center;
   gap: 6px;
+  min-width: 0;
+  max-width: 320px;
   font-size: 11px;
   color: var(--text-tertiary);
-  background: var(--bg-elevated);
-  padding: 6px 10px;
-  border-radius: 6px;
-  cursor: pointer;
-  border: 1px solid var(--border);
-  max-width: 300px;
-  transition: all 0.15s ease;
 }
-.topbar-project:hover {
-  border-color: var(--accent);
-  color: var(--text-secondary);
+.topbar-project svg { flex-shrink: 0; color: var(--text-muted); }
+.topbar-project span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
 }
-.topbar-project svg {
-  color: var(--text-muted);
-  flex-shrink: 0;
+
+.icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text-tertiary);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
 }
-.topbar-project span {
-  overflow: hidden;
-  text-overflow: ellipsis;
+.icon-btn svg { width: 15px; height: 15px; }
+.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+.icon-btn.loading svg { animation: spin 1s linear infinite; }
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.btn {
+  height: 30px;
+  padding: 0 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  color: var(--text-secondary);
+  font-size: 12px;
+  cursor: pointer;
   white-space: nowrap;
 }
+.btn:hover { border-color: var(--accent); color: var(--text-primary); }
+.btn:disabled { opacity: 0.5; cursor: default; }
+.btn-small { height: 26px; padding: 0 10px; font-size: 11px; }
+.btn-danger { background: var(--error); border-color: var(--error); color: #fff; }
+.btn-danger:hover { color: #fff; filter: brightness(1.1); border-color: var(--error); }
 
-.topbar-btn {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  padding: 6px 10px;
-  border-radius: 6px;
+.text-btn {
+  background: none;
+  border: none;
+  border-radius: 4px;
+  padding: 2px 6px;
   font-size: 11px;
-  font-weight: 500;
+  color: var(--text-muted);
   cursor: pointer;
-  border: 1px solid var(--border);
-  background: var(--bg-elevated);
-  color: var(--text-tertiary);
-  font-family: var(--mono);
-  transition: all 0.15s ease;
   white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
 }
-.topbar-btn:hover {
-  border-color: var(--accent);
-  color: var(--text-secondary);
+.text-btn:hover { color: var(--accent-text); }
+
+/* Kind chips */
+
+.chipbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 14px;
+  border-bottom: 1px solid var(--border-soft);
+  flex-shrink: 0;
 }
-.topbar-btn svg {
-  color: var(--text-muted);
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
 }
-.topbar-btn.loading svg {
-  animation: spin 1s linear infinite;
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 26px;
+  padding: 0 10px 0 4px;
+  border: 1px solid var(--border-soft);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  cursor: pointer;
 }
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.chip kbd { border-radius: 999px; }
+.chip:hover { color: var(--text-primary); border-color: var(--border); }
+.chip.active {
+  background: var(--accent-dim);
+  border-color: var(--accent);
+  color: var(--text-primary);
 }
+.chip.active kbd { border-color: var(--accent); color: var(--accent-text); }
+.chip-count { color: var(--text-muted); font-size: 11px; }
 
-/* === MAIN LAYOUT === */
+/* Layout */
 
 .main-layout {
   display: flex;
   flex: 1;
   min-height: 0;
-  overflow: hidden;
 }
 
-/* === TREE PANEL === */
-
 .tree-panel {
-  flex: 0 0 var(--sidebar-w, 60%);
+  flex: 0 0 58%;
+  min-width: 220px;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
-  min-width: 200px;
 }
 
 .resize-handle {
   width: 4px;
   flex-shrink: 0;
   cursor: col-resize;
-  background: transparent;
   transition: background 0.15s;
-  position: relative;
-  z-index: 1;
 }
 .resize-handle:hover,
-.resize-handle.is-dragging {
-  background: var(--accent);
-}
-
-.tree-expand-toggle {
-  padding: 4px 12px;
-  font-size: 10px;
-  color: var(--text-muted);
-  cursor: pointer;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-family: var(--mono);
-}
-.tree-expand-toggle:hover {
-  color: var(--accent);
-}
+.resize-handle.is-dragging { background: var(--accent); }
 
 .tree-container {
   flex: 1;
   min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
+  padding-bottom: 12px;
 }
+.tree-container:focus-visible { outline: none; }
 
-.loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-muted);
+.empty-state {
+  max-width: 460px;
+  margin: 64px auto;
+  padding: 0 20px;
+  color: var(--text-tertiary);
   font-size: 12px;
+  line-height: 1.7;
+  text-align: center;
+}
+.empty-state strong {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--text-primary);
+  font-weight: 600;
 }
 
-/* === TREE ROWS === */
+/* Tree rows */
 
 .tree-row {
   display: flex;
   align-items: center;
-  gap: 6px;
-  padding: 7px 12px;
-  font-size: 13px;
-  cursor: pointer;
-  transition: background 0.1s ease;
-  min-height: 38px;
-  flex-wrap: nowrap;
+  gap: 8px;
+  min-height: var(--row-h);
+  padding: 4px 14px;
   border-left: 2px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  scroll-margin: calc(var(--row-h) * 2) 0 8px;
 }
-.tree-row:hover {
-  background: var(--bg-hover);
-}
+.tree-row:hover { background: var(--bg-hover); }
+.tree-row.level-2 { padding-left: 34px; }
+.tree-row.level-3 { padding-left: 54px; }
 .tree-row.selected {
-  background: var(--bg-hover);
+  background: var(--accent-dim);
   border-left-color: var(--accent);
 }
 .tree-row.focused {
-  outline: 1px solid var(--accent);
-  outline-offset: -1px;
-  background: var(--bg-hover);
+  box-shadow: inset 0 0 0 1px var(--accent);
 }
-.tree-row.marketplace-row {
-  background: var(--bg-surface);
-  border-bottom: 1px solid var(--border);
+
+.tree-group {
   position: sticky;
   top: 0;
   z-index: 3;
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  padding: 8px 12px;
-}
-/* Stacks under the group row (top:0); 38px matches .tree-row min-height. */
-.tree-row.marketplace-row.tree-subgroup {
-  top: 38px;
-  z-index: 2;
-}
-.tree-row.marketplace-row.virtual .tree-icon {
-  color: var(--plan);
-}
-.tree-row.disabled .tree-label,
-.tree-row.disabled .tree-desc,
-.tree-row.disabled .tree-icon {
-  opacity: 0.45;
-}
-.tree-row.disabled .tree-meta {
-  color: var(--text-muted, #888);
-  font-style: italic;
-  opacity: 0.8;
-}
-.tree-badge.pending {
-  display: inline-block;
-  margin-left: 8px;
-  padding: 1px 6px;
-  border-radius: 4px;
-  font-size: 10px;
+  background: var(--bg-deep);
+  border-bottom: 1px solid var(--border-soft);
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-  background: rgba(255, 170, 60, 0.18);
-  color: #c97a00;
-  border: 1px solid rgba(201, 122, 0, 0.35);
-  vertical-align: middle;
+  color: var(--text-primary);
 }
-.tree-row.pending .tree-icon {
-  opacity: 0.7;
+.tree-group:hover { background: var(--bg-hover); }
+.tree-group.level-2 {
+  top: var(--row-h);
+  z-index: 2;
+  font-weight: 500;
+  font-size: 12px;
+  color: var(--text-secondary);
+  padding-left: 28px;
 }
 
-.tree-indent {
-  flex-shrink: 0;
-}
 .tree-chevron {
-  width: 16px;
-  height: 16px;
   display: flex;
-  align-items: center;
-  justify-content: center;
+  width: 14px;
+  height: 14px;
   color: var(--text-muted);
-  font-size: 9px;
-  transition: transform 0.15s ease;
+  transition: transform 0.15s;
   flex-shrink: 0;
 }
-.tree-chevron.expanded {
-  transform: rotate(90deg);
-}
+.tree-chevron svg { width: 14px; height: 14px; }
+.tree-group[aria-expanded='true'] .tree-chevron { transform: rotate(90deg); }
+
 .tree-icon {
-  flex-shrink: 0;
-  width: 18px;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.45;
-}
-.tree-icon svg {
-  width: 15px;
-  height: 15px;
+  flex-shrink: 0;
+  color: var(--text-muted);
 }
+.tree-icon svg { width: 15px; height: 15px; }
+.tree-row.selected .tree-icon { color: var(--accent); }
+
 .tree-label {
   flex-shrink: 0;
-  white-space: nowrap;
-  text-overflow: ellipsis;
   color: var(--text-secondary);
 }
-.version {
-  font-size: 11px;
-  color: var(--accent);
-  background: var(--accent-dim);
-  padding: 1px 5px;
-  border-radius: 3px;
-  margin-left: 6px;
-  font-family: var(--mono);
-  letter-spacing: 0.02em;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-.tree-label .mkt-name {
-  font-weight: 600;
-  color: var(--text-primary);
-}
-.tree-subgroup-label {
+.tree-group .tree-label { color: inherit; }
+.tree-row.selected .tree-label { color: var(--text-primary); }
+
+.tree-desc {
+  flex: 1 1 0;
+  min-width: 0;
+  margin-left: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: 11px;
   color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.tree-subgroup .mkt-name {
-  font-size: 11px;
-  font-weight: 600;
 }
-.tree-subgroup .tree-icon { width: 14px; height: 14px; }
-.tree-subgroup .tree-icon svg { width: 14px; height: 14px; }
 .tree-meta {
-  font-size: 11px;
-  color: var(--text, inherit);
   flex-shrink: 0;
-  white-space: nowrap;
-  opacity: 0.65;
-}
-.tree-desc {
   font-size: 11px;
+  color: var(--text-tertiary);
+}
+
+.tree-row.disabled .tree-label,
+.tree-row.disabled .tree-desc,
+.tree-row.disabled .tree-icon { opacity: 0.5; }
+
+.tree-badge {
+  flex-shrink: 0;
+  padding: 0 6px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  font-size: 10px;
   color: var(--text-muted);
-  margin-left: 12px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex: 9 1 0;
-  min-width: 0;
-  opacity: 0.75;
+}
+.tree-badge.warn {
+  border-color: var(--warning);
+  background: var(--warning-dim);
+  color: var(--warning);
 }
 
-/* === SCOPE TOGGLE BOXES === */
+/* Detail */
 
-.scope-toggles {
+.detail-panel {
+  flex: 1;
+  min-width: 280px;
   display: flex;
-  gap: 3px;
-  flex-shrink: 0;
+  flex-direction: column;
+  background: var(--bg-surface);
+  border-left: 1px solid var(--border-soft);
+  overflow: hidden;
 }
-.scope-toggle {
-  width: 20px;
-  height: 16px;
-  border-radius: 3px;
-  font-size: 9px;
-  font-weight: 700;
+
+.detail-empty {
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  cursor: pointer;
-  transition: all 0.15s ease;
-  border: 1px solid;
-  font-family: var(--mono);
-}
-.scope-toggle:hover {
-  transform: scale(1.15);
+  gap: 10px;
+  height: 100%;
+  padding: 20px;
+  color: var(--text-muted);
+  font-size: 12px;
+  text-align: center;
 }
+.detail-empty svg { width: 40px; height: 40px; opacity: 0.35; }
+.detail-empty .hint { font-size: 11px; }
 
-.scope-toggle.user {
-  border-color: rgba(196, 149, 106, 0.4);
-  color: rgba(196, 149, 106, 0.5);
-}
-.scope-toggle.user.active {
-  background: var(--scope-user-dim);
-  color: var(--scope-user);
-  border-color: var(--scope-user);
-}
-.scope-toggle.user.disabled {
-  background: transparent;
-  color: var(--scope-user);
-  border-color: var(--scope-user);
-}
-
-.scope-toggle.project {
-  border-color: rgba(122, 181, 160, 0.4);
-  color: rgba(122, 181, 160, 0.5);
-}
-.scope-toggle.project.active {
-  background: var(--scope-project-dim);
-  color: var(--scope-project);
-  border-color: var(--scope-project);
-}
-.scope-toggle.project.disabled {
-  background: transparent;
-  color: var(--scope-project);
-  border-color: var(--scope-project);
-}
-
-.scope-toggle.local {
-  border-color: rgba(138, 155, 181, 0.4);
-  color: rgba(138, 155, 181, 0.5);
-}
-.scope-toggle.local.active {
-  background: var(--scope-local-dim);
-  color: var(--scope-local);
-  border-color: var(--scope-local);
-}
-.scope-toggle.local.disabled {
-  background: transparent;
-  color: var(--scope-local);
-  border-color: var(--scope-local);
-}
-.scope-toggle.disabled {
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-  opacity: 0.75;
-}
-
-/* Light theme: boost inactive scope contrast further */
-body.light .scope-toggle.user {
-  border-color: rgba(138, 112, 85, 0.4);
-  color: rgba(138, 112, 85, 0.5);
-}
-body.light .scope-toggle.project {
-  border-color: rgba(77, 138, 114, 0.5);
-  color: rgba(77, 138, 114, 0.6);
-}
-body.light .scope-toggle.local {
-  border-color: rgba(107, 125, 150, 0.4);
-  color: rgba(107, 125, 150, 0.5);
-}
-
-/* === BADGES === */
-
-.badge {
-  padding: 1px 7px;
-  border-radius: 4px;
-  font-size: 10px;
-  font-weight: 500;
-  flex-shrink: 0;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-.badge-github {
-  background: var(--accent-dim);
-  color: var(--accent-text);
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-}
-.badge-directory {
-  background: var(--warning-dim);
-  color: var(--warning);
-}
-.badge-git {
-  background: var(--team-dim);
-  color: var(--team);
-}
-.badge-virtual {
-  background: var(--plan-dim);
-  color: var(--plan);
-}
-
-/* === UPDATE INDICATORS === */
-
-.update-indicator {
-  color: var(--success);
-  font-weight: 700;
-  font-size: 12px;
-  margin-left: 4px;
-}
-
-.update-badge {
-  font-size: 10px;
-  color: var(--success);
-  background: var(--success-dim);
-  padding: 1px 6px;
-  border-radius: 3px;
-  flex-shrink: 0;
-  font-weight: 500;
-}
-
-.update-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 12px;
-  margin-bottom: 16px;
-  background: var(--success-dim);
-  border: 1px solid rgba(62, 207, 142, 0.3);
-  border-radius: 6px;
-  font-size: 12px;
-  color: var(--success);
-}
-
-.badge-count {
-  font-size: 10px;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-.mkt-info-btn {
-  background: none;
-  border: none;
-  outline: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 4px;
-  margin-left: auto;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-.mkt-info-btn:hover {
-  color: var(--accent);
-}
-
-.detail-meta-grid {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: 6px 12px;
-  font-size: 12px;
-}
-.meta-label {
-  color: var(--text-muted);
-  white-space: nowrap;
-}
-.meta-value {
-  color: var(--text-secondary);
-}
-
-.mkt-actions {
-  display: flex;
-  gap: 8px;
-}
-
-.mkt-plugin-item {
-  display: flex;
-  justify-content: space-between;
-  padding: 5px 8px;
-  font-size: 12px;
-  color: var(--text-secondary);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.1s;
-}
-.mkt-plugin-item:hover {
-  background: var(--bg-hover);
-}
-
-/* === TREE CHILDREN === */
-
-.tree-children {
-  display: none;
-}
-.tree-children.open {
-  display: block;
-}
-
-.tree-desc-inline {
-  font-size: 12px;
-  color: var(--text-tertiary);
-  opacity: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  min-width: 0;
-  flex: 1 1 0;
-}
-
-/* === COMPONENT ROWS === */
-
-.comp-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 12px 3px 76px;
-  font-size: 11px;
-  color: var(--text-tertiary);
-  min-height: 26px;
-}
-.comp-row:hover {
-  background: var(--bg-hover);
-  cursor: pointer;
-}
-.comp-icon {
-  width: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-.comp-icon svg {
-  width: 12px;
-  height: 12px;
-}
-.comp-count {
-  margin-left: auto;
-  font-size: 10px;
-  color: var(--text-muted);
-  font-family: var(--mono);
-  background: var(--bg-elevated);
-  padding: 0 5px;
-  border-radius: 3px;
-}
-
-/* === DETAIL PANEL === */
-
-.detail-panel {
-  flex: 1;
-  min-width: 300px;
-  background: var(--bg-surface);
-  border-left: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.detail-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-muted);
-  gap: 12px;
-  font-size: 12px;
-}
-
-.detail-header {
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-shrink: 0;
-  background-image: linear-gradient(to right, transparent, var(--border), transparent);
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-  border-bottom: none;
-}
-.detail-header h3 {
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--text-primary);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.detail-header h3 svg {
-  width: 16px;
-  height: 16px;
-  opacity: 0.5;
-}
-.detail-header h3 .version {
-  font-size: 11px;
-  font-weight: 400;
-}
-.detail-header-actions,
-.modal-header-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.detail-close {
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 15px;
-  padding: 4px 8px;
-  transition: all 0.15s ease;
-}
-.detail-close:hover {
-  background: var(--bg-hover);
-  border-color: var(--border);
-  color: var(--text-secondary);
-}
-.detail-action {
-  background: transparent;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 4px 6px;
-  display: inline-flex;
-  align-items: center;
-  transition: all 0.15s ease;
-}
-.detail-action svg { display: block; }
-.detail-action:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.detail-body {
-  flex: 1;
-  overflow-y: auto;
-  padding: 16px;
-}
-
-.detail-section {
-  margin-bottom: 20px;
-}
-.detail-section h4 {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  margin-bottom: 8px;
-  font-weight: 600;
-}
-
-.detail-desc {
-  font-size: 12px;
-  line-height: 1.6;
-  color: var(--text-secondary);
-  margin-bottom: 10px;
-}
-
-.detail-meta-row {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 4px;
-}
-.detail-meta-item {
-  font-size: 10px;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-
-.plugin-meta-bar {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: wrap;
-  margin-top: 8px;
-}
-.meta-tag {
-  font-size: 9px;
-  padding: 2px 8px;
-  border-radius: 10px;
-  border: 1px solid var(--border);
-  color: var(--text-muted);
-  letter-spacing: 0.02em;
-}
-.meta-chip {
-  font-size: 10px;
-  color: var(--text-muted);
-}
-.meta-link {
-  font-size: 10px;
-  color: var(--text-muted);
-  text-decoration: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 260px;
-}
-.meta-link:hover {
-  color: var(--accent);
-  text-decoration: underline;
-}
-
-/* === SCOPE MATRIX === */
-
-.scope-matrix {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.scope-matrix-row {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 8px 10px;
-  background: var(--bg-elevated);
-  border-radius: 6px;
-  font-size: 12px;
-  border: 1px solid var(--border);
-  transition: border-color 0.15s ease;
-}
-.scope-matrix-row:hover {
-  border-color: var(--accent-dim);
-}
-.scope-matrix-label {
-  width: 60px;
-  font-weight: 700;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  flex-shrink: 0;
-}
-.scope-matrix-label.user {
-  color: var(--scope-user);
-}
-.scope-matrix-label.project {
-  color: var(--scope-project);
-}
-.scope-matrix-label.local {
-  color: var(--scope-local);
-}
-.scope-matrix-status {
-  flex: 1;
-  color: var(--text-tertiary);
-  font-size: 11px;
-}
-.scope-matrix-actions {
-  display: flex;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-/* === ACTION BUTTONS === */
-
-.action-btn {
-  padding: 4px 10px;
-  border-radius: 4px;
-  font-size: 10px;
-  font-weight: 500;
-  cursor: pointer;
-  border: 1px solid var(--border);
-  background: var(--bg-elevated);
-  color: var(--text-tertiary);
-  font-family: var(--mono);
-  transition: all 0.15s ease;
-  white-space: nowrap;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-}
-.action-btn:hover {
-  border-color: var(--accent);
-  color: var(--text-secondary);
-}
-.action-btn:disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-.action-btn.primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: #fff;
-}
-.action-btn.primary:hover {
-  background: var(--accent-glow);
-}
-.action-btn.danger {
-  color: var(--error);
-}
-.action-btn.danger:hover {
-  border-color: var(--error);
-}
-
-/* === DETAIL COMPONENT ROWS === */
-
-.detail-comp-group {
-  margin-bottom: 8px;
-}
-.detail-comp-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 7px 10px;
-  border-radius: 6px 6px 0 0;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-}
-.detail-comp-header .count {
-  margin-left: auto;
-  color: var(--text-muted);
-  font-family: var(--mono);
-  font-size: 10px;
-  background: var(--bg-deep);
-  padding: 0 5px;
-  border-radius: 3px;
-}
-.detail-comp-items {
-  border: 1px solid var(--border);
-  border-top: none;
-  border-radius: 0 0 6px 6px;
-  overflow: hidden;
-}
-.detail-comp-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 5px 10px 5px 28px;
-  font-size: 12px;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  transition: background 0.12s;
-}
-.detail-comp-item:hover {
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-}
-.detail-comp-item .icon {
-  width: 14px;
+.detail-header {
   display: flex;
   align-items: center;
-  opacity: 0.5;
+  gap: 8px;
+  padding: 10px 10px 10px 16px;
+  border-bottom: 1px solid var(--border-soft);
+  flex-shrink: 0;
 }
-.detail-comp-item .icon svg {
-  width: 12px;
-  height: 12px;
+.detail-header h3 {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+  font-weight: 600;
 }
-.detail-comp-item.disabled {
-  cursor: default;
-  opacity: 0.5;
+.kind-tag {
+  flex-shrink: 0;
+  padding: 0 7px;
+  border-radius: 999px;
+  background: var(--accent-dim);
+  color: var(--accent-text);
+  font-size: 11px;
 }
-.detail-comp-item.disabled:hover {
-  background: none;
-  color: var(--text-tertiary);
+
+.detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
 }
-.readme-comp-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 10px;
-  font-size: 12px;
-  color: var(--accent);
-  cursor: pointer;
-  border: 1px dashed var(--border);
-  border-radius: 6px;
-  background: var(--bg-deep);
-  transition:
-    background 0.12s,
-    border-color 0.12s;
+.detail-section { margin-bottom: 20px; }
+.detail-section h4 {
   margin-bottom: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
 }
-.readme-comp-item:hover {
-  background: var(--bg-hover);
-  border-color: var(--accent);
+.detail-desc {
+  font-size: 12px;
+  line-height: 1.6;
+  color: var(--text-secondary);
 }
-.readme-comp-item svg {
-  width: 14px;
-  height: 14px;
-  opacity: 0.7;
+
+.meta-grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 4px 16px;
+  font-size: 12px;
 }
+.meta-grid dt { color: var(--text-muted); }
+.meta-grid dd { color: var(--text-secondary); overflow-wrap: anywhere; }
 
-/* === TOAST === */
+.code-view {
+  margin: 0;
+  padding: 12px 14px;
+  overflow: auto;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius);
+  background: var(--bg-deep);
+  color: var(--text-secondary);
+  font-family: var(--mono);
+  font-size: 11px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.code-view code { all: unset; }
+.code-view code.json { color: var(--text-primary); }
+.code-view .md-h { color: var(--accent-text); font-weight: 600; }
+.code-view .md-code { color: var(--md-code); }
+.code-view .md-icode { color: var(--md-num); }
+.code-view .md-bold { color: var(--text-primary); font-weight: 600; }
+.code-view .md-bullet { color: var(--accent); }
+.code-view .jk-key { color: var(--accent-text); }
+.code-view .jk-str { color: var(--md-code); }
+.code-view .jk-num { color: var(--md-num); }
+.code-view .jk-bool,
+.code-view .jk-null { color: var(--md-kw); }
+
+/* Toasts */
 
 .toast-container {
   position: fixed;
-  bottom: 16px;
   right: 16px;
+  bottom: 16px;
   z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: flex-end;
 }
-
 .toast {
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 6px;
+  max-width: 420px;
   padding: 8px 14px;
-  font-size: 11px;
+  border: 1px solid var(--border);
+  border-left: 3px solid var(--accent);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
   color: var(--text-secondary);
-  animation: slideIn 0.2s ease;
-}
-
-.toast.toast-success {
-  border-color: #2ea043;
-  color: #2ea043;
-}
-
-.toast.toast-error {
-  border-color: #f85149;
-  color: #f85149;
-}
-
-.toast.toast-info {
-  border-color: var(--accent);
-  color: var(--accent);
+  font-size: 12px;
+  box-shadow: 0 4px 16px rgb(0 0 0 / 0.18);
+  animation: slide-in 0.2s ease;
 }
+.toast-success { border-left-color: var(--success); }
+.toast-error { border-left-color: var(--error); }
 
-@keyframes slideIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
+@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } }
 
-/* === MODAL === */
+/* Modals */
 
 .modal-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.6);
+  z-index: 100;
   display: none;
   align-items: center;
   justify-content: center;
-  z-index: 100;
-}
-.modal-overlay.open {
-  display: flex;
+  padding: 16px;
+  background: rgb(0 0 0 / 0.5);
 }
+.modal-overlay.open { display: flex; }
 .modal {
-  background: var(--bg-surface);
+  width: 100%;
+  max-width: 520px;
+  max-height: 100%;
+  overflow: auto;
   border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
-  min-width: 360px;
-  max-width: 500px;
+  border-radius: var(--radius);
+  background: var(--bg-surface);
+  box-shadow: 0 12px 40px rgb(0 0 0 / 0.35);
 }
+.confirm-modal { max-width: 420px; }
 .modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 14px 16px;
-  border-bottom: 1px solid var(--border);
-}
-.modal-header h3 {
-  font-size: 13px;
-  font-weight: 600;
-}
-.modal-action-btn {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-}
-.modal-action-btn:hover {
-  color: var(--accent);
-  background: var(--hover);
-}
-.modal-action-btn.copy-success {
-  color: var(--success, #22c55e);
-  animation: copy-flash 0.3s ease;
-}
-@keyframes copy-flash {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(1.3);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-.modal-close {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 16px;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  line-height: 1;
-}
-.modal-body {
-  padding: 16px;
-}
-.modal-body .scope-option {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
-  margin-bottom: 6px;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  cursor: pointer;
-  transition: all 0.15s ease;
-}
-.modal-body .scope-option:hover {
-  border-color: var(--accent);
-  background: var(--bg-hover);
-}
-.modal-body .scope-option .dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 3px;
-  flex-shrink: 0;
-}
-.modal-field {
-  margin-bottom: 16px;
-}
-.modal-field label {
-  display: block;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-  font-weight: 600;
-}
-.modal-field input[type='text'] {
-  width: 100%;
-  padding: 8px 10px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  color: var(--text-primary);
-  font-family: var(--mono);
-  font-size: 12px;
-  outline: none;
-  transition: border-color 0.15s ease;
-}
-.modal-field input[type='text']:focus {
-  border-color: var(--accent);
-}
-.modal-field input[type='text']::placeholder {
-  color: var(--text-muted);
-}
-.modal-hint {
-  display: block;
-  font-size: 10px;
-  color: var(--text-muted);
-  margin-top: 4px;
+  padding: 12px 12px 12px 16px;
+  border-bottom: 1px solid var(--border-soft);
 }
+.modal-header h3 { font-size: 13px; font-weight: 600; }
+.modal-body { padding: 16px; }
+.modal-body p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
 .modal-actions {
   display: flex;
   justify-content: flex-end;
-  gap: 6px;
-  margin-top: 16px;
-}
-
-/* === RECENT PROJECTS === */
-
-.recent-projects-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.recent-project-item {
-  display: flex;
-  align-items: center;
   gap: 8px;
-  padding: 6px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-  color: var(--text-secondary);
-  font-family: var(--font-mono);
-}
-
-.recent-project-item:hover {
-  background: var(--hover-bg);
-  color: var(--text-primary);
-}
-
-.recent-project-remove {
-  margin-left: auto;
-  opacity: 0;
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  font-size: 14px;
-  padding: 0 4px;
-}
-
-.recent-project-item:hover .recent-project-remove {
-  opacity: 1;
-}
-
-.recent-project-remove:hover {
-  color: var(--danger);
+  margin-top: 16px;
 }
 
-/* === HELP MODAL === */
-
-.help-modal {
-  min-width: 420px;
-  max-width: 520px;
-}
 .help-sections {
   display: grid;
-  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px 24px;
 }
 .help-section h4 {
-  margin: 0 0 8px;
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-.help-section table {
-  width: 100%;
-  font-size: 12px;
-  border-collapse: collapse;
-}
-.help-section td {
-  padding: 4px 0;
-}
-.help-section td:first-child {
-  color: var(--text-secondary);
-  white-space: nowrap;
-  width: 130px;
-}
-.help-section td:last-child {
-  color: var(--text-tertiary);
-}
-
-kbd {
-  background: var(--bg-hover);
-  border: 1px solid var(--border);
-  padding: 2px 6px;
-  border-radius: 4px;
-  font-family: var(--mono);
-  font-size: 11px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-
-/* === CONTENT MODAL === */
-
-.content-modal {
-  min-width: unset;
-  max-width: unset;
-  width: 70vw;
-  height: 70vh;
-  display: flex;
-  flex-direction: column;
-}
-.content-modal-body {
-  display: flex;
-  flex: 1;
-  overflow: hidden;
-}
-.content-tree {
-  width: 220px;
-  min-width: 180px;
-  border-right: 1px solid var(--border);
-  overflow-y: auto;
-  padding: 8px 0;
-}
-.content-tree-item {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 12px;
-  font-size: 11px;
-  color: var(--text-tertiary);
-  cursor: pointer;
-  white-space: nowrap;
-  transition: background 0.1s ease;
-}
-.content-tree-item:hover {
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-}
-.content-tree-item.active {
-  background: var(--bg-hover);
-  color: var(--accent);
-}
-.content-tree-item .icon {
-  width: 16px;
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-.content-tree-item .icon svg {
-  width: 12px;
-  height: 12px;
-}
-.content-viewer {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-.content-viewer-path {
-  padding: 6px 12px;
-  font-size: 10px;
-  color: var(--text-muted);
-  border-bottom: 1px solid var(--border);
-  font-family: var(--mono);
-  flex-shrink: 0;
-}
-.content-viewer-code {
-  flex: 1;
-  margin: 0;
-  padding: 12px 16px;
-  overflow: auto;
-  font-family: var(--mono);
+  margin-bottom: 6px;
   font-size: 11px;
-  line-height: 1.6;
-  color: var(--text-secondary);
-  background: var(--bg-deep);
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-.content-viewer-code code {
-  font-family: inherit;
-  font-size: inherit;
-  background: none;
-}
-.content-viewer-code .hljs {
-  background: transparent;
-  padding: 0;
-}
-.content-viewer-code .hl-frontmatter {
+  font-weight: 600;
   color: var(--text-muted);
-  opacity: 0.6;
-}
-.content-viewer-code code.json { color: var(--text-primary); }
-.content-viewer-code code.md .md-h { color: var(--accent); font-weight: 600; }
-.content-viewer-code code.md .md-code { color: #98c379; }
-.content-viewer-code code.md .md-icode { color: #d19a66; }
-.content-viewer-code code.md .md-bold { color: var(--text-primary); font-weight: 600; }
-.content-viewer-code code.md .md-bullet { color: var(--accent); }
-body.light .content-viewer-code code.md .md-code { color: #50a14f; }
-body.light .content-viewer-code code.md .md-icode { color: #986801; }
-.content-viewer-code .jk-key { color: var(--accent); }
-.content-viewer-code .jk-str { color: #98c379; }
-.content-viewer-code .jk-num { color: #d19a66; }
-.content-viewer-code .jk-bool { color: #c678dd; }
-.content-viewer-code .jk-null { color: #c678dd; opacity: 0.8; }
-body.light .content-viewer-code .jk-str { color: #50a14f; }
-body.light .content-viewer-code .jk-num { color: #986801; }
-body.light .content-viewer-code .jk-bool { color: #a626a4; }
-body.light .content-viewer-code .jk-null { color: #a626a4; }
-
-.detail-comp-group.view-only {
-  opacity: 0.55;
 }
-.detail-comp-group.view-only:hover {
-  opacity: 0.85;
+.help-section table { width: 100%; border-collapse: collapse; font-size: 12px; }
+.help-section td { padding: 3px 0; vertical-align: top; }
+.help-section td:first-child { width: 84px; white-space: nowrap; }
+.help-section td:last-child { color: var(--text-secondary); }
+
+/* Modes */
+
+body.embedded #themeBtn,
+body.embedded #githubLink,
+body.embedded .standalone-only,
+body.static-mode #sessionSelect,
+body.static-mode #cleanupSessionsBtn,
+body.static-mode #refreshBtn { display: none; }
+
+@media (max-width: 760px) {
+  .topbar-search { flex: 1 1 160px; }
+  .topbar-search input { width: 100%; }
+  .topbar-project { display: none; }
+  .main-layout { flex-direction: column; }
+  .tree-panel { flex: 1 1 55% !important; min-width: 0; min-height: 0; }
+  .resize-handle { display: none; }
+  .detail-panel { flex: 1 1 45%; min-width: 0; min-height: 0; border-left: none; border-top: 1px solid var(--border-soft); }
+  .tree-desc { display: none; }
 }