laminark 2.21.7 → 2.21.9

package/plugin/ui/styles.css

@@ -840,7 +840,7 @@ body {
   height: 100%;
 }
 
-/* Graph legend */
+/* Graph legend — collapsed by default, expands on hover */
 .graph-legend {
   position: absolute;
   bottom: 16px;
@@ -848,14 +848,22 @@ body {
   background: rgba(13, 17, 23, 0.85);
   border: 1px solid var(--border);
   border-radius: 8px;
-  padding: 12px;
+  padding: 6px;
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   z-index: 5;
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 0;
   pointer-events: auto;
+  overflow: hidden;
+  transition: padding 200ms ease, gap 200ms ease;
+  cursor: default;
+}
+
+.graph-legend:hover {
+  padding: 12px;
+  gap: 6px;
 }
 
 .graph-legend-title {
@@ -864,6 +872,12 @@ body {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--text-muted);
+  margin-bottom: 0;
+  white-space: nowrap;
+  transition: margin-bottom 200ms ease;
+}
+
+.graph-legend:hover .graph-legend-title {
   margin-bottom: 2px;
 }
 
@@ -875,6 +889,15 @@ body {
   font-size: 12px;
   color: var(--text);
   line-height: 1;
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+  transition: max-height 200ms ease, opacity 200ms ease;
+}
+
+.graph-legend:hover .graph-legend-item {
+  max-height: 20px;
+  opacity: 1;
 }
 
 .legend-color {
@@ -1238,13 +1261,74 @@ body {
 
 /* Settings view */
 #settings-view {
+  overflow: hidden;
+}
+
+#settings-view.active {
+  display: flex;
+}
+
+.settings-layout {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.settings-sidebar {
+  width: 200px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0;
+  background: var(--surface);
   overflow-y: auto;
 }
 
-.settings-container {
-  max-width: 720px;
-  margin: 0 auto;
+.settings-sidebar-item {
+  padding: 10px 16px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-muted);
+  border-radius: 4px;
+  margin: 2px 8px;
+  transition: background 0.15s, color 0.15s;
+  user-select: none;
+}
+
+.settings-sidebar-item:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+}
+
+.settings-sidebar-item.active {
+  background: rgba(88, 166, 255, 0.1);
+  color: var(--accent);
+}
+
+.settings-sidebar-item-danger {
+  margin-top: auto;
+}
+
+.settings-sidebar-item-danger.active {
+  background: rgba(248, 81, 73, 0.1);
+  color: var(--danger);
+}
+
+.settings-content {
+  flex: 1;
+  overflow-y: auto;
   padding: 24px;
+  min-width: 0;
+}
+
+.settings-panel {
+  display: none;
+}
+
+.settings-panel.active {
+  display: block;
 }
 
 .settings-heading {
@@ -1290,6 +1374,14 @@ body {
   letter-spacing: 0.04em;
 }
 
+.system-info-grid {
+  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
+}
+
+.system-info-grid .stat-value {
+  font-size: 16px;
+}
+
 /* Success message */
 .settings-success {
   padding: 10px 14px;
@@ -2000,28 +2092,135 @@ body {
 }
 
 /* =========================================================================
- * Help View
+ * Help View — Sidebar Tree Layout
  * ========================================================================= */
 
 #help-view {
+  overflow: hidden;
+}
+
+#help-view.active {
+  display: flex;
+  flex-direction: row;
+}
+
+/* Sidebar */
+.help-sidebar {
+  width: 240px;
+  flex-shrink: 0;
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--surface);
+}
+
+.help-sidebar-search {
+  padding: 12px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.help-tree-container {
+  flex: 1;
   overflow-y: auto;
+  padding: 8px 0;
 }
 
-.help-container {
-  max-width: 760px;
-  margin: 0 auto;
-  padding: 24px;
+.help-tree {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.help-tree-item {
+  user-select: none;
+}
+
+.help-tree-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 12px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--text-muted);
+  border-radius: 4px;
+  margin: 0 8px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.help-tree-label:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+}
+
+.help-tree-label.active {
+  background: rgba(88, 166, 255, 0.1);
+  color: var(--accent);
+}
+
+.help-tree-toggle {
+  width: 16px;
+  flex-shrink: 0;
+  font-size: 10px;
+  color: var(--text-muted);
+  transition: transform 0.15s;
+  text-align: center;
+}
+
+.help-tree-item.expanded > .help-tree-label .help-tree-toggle {
+  transform: rotate(90deg);
+}
+
+.help-tree-children {
+  list-style: none;
+  padding: 0 0 0 20px;
+  margin: 0;
+  display: none;
+}
+
+.help-tree-item.expanded > .help-tree-children {
+  display: block;
+}
+
+.help-tree-child-label {
+  display: block;
+  padding: 5px 12px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-muted);
+  border-radius: 4px;
+  margin: 0 8px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.help-tree-child-label:hover {
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--text);
+}
+
+.help-tree-child-label.active {
+  color: var(--accent);
+}
+
+/* Content area */
+.help-content-area {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px 32px;
+  min-width: 0;
 }
 
 .help-section {
-  margin-bottom: 32px;
+  margin-bottom: 0;
 }
 
 .help-section-title {
-  font-size: 16px;
+  font-size: 18px;
   font-weight: 600;
   color: var(--text);
-  margin-bottom: 12px;
+  margin-bottom: 16px;
   padding-bottom: 8px;
   border-bottom: 1px solid var(--border);
 }
@@ -2496,6 +2695,103 @@ body {
   color: var(--warning);
 }
 
+/* Cross-Project Access dual-list widget */
+.cross-access-lists {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.cross-access-list {
+  flex: 1;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.cross-access-list-header {
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 8px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.cross-access-items {
+  list-style: none;
+  max-height: 200px;
+  overflow-y: auto;
+  min-height: 60px;
+}
+
+.cross-access-items:empty::after {
+  content: '(none)';
+  display: block;
+  padding: 12px;
+  color: var(--text-muted);
+  font-style: italic;
+  font-size: 13px;
+}
+
+.cross-access-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+  transition: background var(--transition);
+}
+
+.cross-access-item:last-child {
+  border-bottom: none;
+}
+
+.cross-access-item:hover {
+  background: rgba(88, 166, 255, 0.06);
+}
+
+.cross-access-item-name {
+  font-size: 13px;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cross-access-add-btn,
+.cross-access-remove-btn {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+  font-size: 14px;
+  width: 26px;
+  height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: all var(--transition);
+}
+
+.cross-access-add-btn:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: rgba(88, 166, 255, 0.1);
+}
+
+.cross-access-remove-btn:hover {
+  border-color: var(--danger);
+  color: var(--danger);
+  background: rgba(248, 81, 73, 0.1);
+}
+
 /* =========================================================================
  * D3.js Graph SVG Styles
  * ========================================================================= */
@@ -2851,60 +3147,710 @@ g.node-group.search-match path.node-shape {
 }
 
 /* ====================================================================
-   Path Overlay Styles
+   Graph Freeze Button (pause/resume live updates)
    ==================================================================== */
 
-.paths-toggle-btn {
-  background: transparent;
+.graph-freeze-btn {
+  width: 32px;
+  height: 32px;
+  background: rgba(13, 17, 23, 0.85);
   border: 1px solid var(--border);
-  color: var(--text-muted);
-  padding: 4px 6px;
   border-radius: var(--radius);
+  color: var(--text-muted);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all var(--transition);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: color var(--transition), border-color var(--transition), background var(--transition);
 }
 
-.paths-toggle-btn:hover {
+.graph-freeze-btn:hover {
   color: var(--text);
   border-color: var(--text-muted);
 }
 
-.paths-toggle-btn.active {
-  color: var(--accent);
-  border-color: var(--accent);
-  background: rgba(88, 166, 255, 0.1);
+.graph-freeze-btn.active {
+  color: var(--warning);
+  border-color: var(--warning);
+  background: rgba(210, 153, 34, 0.12);
 }
 
-/* Animated dashed line for active paths */
-.path-line-active {
-  animation: path-dash-flow 1.5s linear infinite;
-}
+/* ====================================================================
+   Graph Sync Button (stale data indicator)
+   ==================================================================== */
 
-@keyframes path-dash-flow {
-  to {
-    stroke-dashoffset: -20;
-  }
+.graph-sync-btn {
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(13, 17, 23, 0.85);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  padding: 4px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  z-index: 6;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  transition: all 200ms ease;
 }
 
-/* Waypoint markers */
-.waypoint-marker circle {
-  transition: r 0.15s ease;
+.graph-sync-btn.hidden { display: none; }
+
+.graph-sync-btn.stale {
+  border-color: var(--warning);
+  color: var(--warning);
+  animation: pulse 2s infinite;
 }
 
-.waypoint-marker:hover circle {
-  filter: brightness(1.3);
+.graph-sync-btn:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
+}
+
+.graph-sync-btn.stale:hover {
+  border-color: var(--warning);
+  color: var(--text);
+}
+
+/* ====================================================================
+   Pathfinder Styles
+   ==================================================================== */
+
+.paths-toggle-btn {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  padding: 4px 6px;
+  border-radius: var(--radius);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--transition);
+}
+
+.paths-toggle-btn:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
+}
+
+.paths-toggle-btn.active {
+  color: var(--color-reference);
+  border-color: var(--color-reference);
+  background: rgba(240, 136, 62, 0.1);
+}
+
+/* Pathfinder start/end node indicators */
+g.node-group.pathfinder-start path.node-shape {
+  stroke: #3fb950;
+  stroke-width: 3.5;
+  filter: drop-shadow(0 0 6px rgba(63, 185, 80, 0.7));
+}
+
+g.node-group.pathfinder-end path.node-shape {
+  stroke: #f85149;
+  stroke-width: 3.5;
+  filter: drop-shadow(0 0 6px rgba(248, 81, 73, 0.7));
+}
+
+/* Path-highlighted edges */
+line.edge.path-highlight {
+  stroke: #f0883e !important;
+  stroke-width: 3.5 !important;
+  opacity: 1 !important;
+  filter: drop-shadow(0 0 3px rgba(240, 136, 62, 0.6));
 }
 
-/* Path label */
-.path-label {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+/* Pathfinder info bar */
+.pathfinder-info {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: rgba(13, 17, 23, 0.9);
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 6px 16px;
+  font-size: 12px;
+  color: var(--text);
+  white-space: nowrap;
+  z-index: 6;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
   pointer-events: none;
 }
 
-/* Path trail group */
-.path-trail {
-  pointer-events: all;
+/* =========================================================================
+ * Help View — Enhanced Documentation
+ * ========================================================================= */
+
+/* Help sidebar search input */
+.help-search-input {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  color: var(--text);
+  font-size: 12px;
+  font-family: inherit;
+  transition: border-color var(--transition);
+}
+
+.help-search-input:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+
+.help-search-input::placeholder {
+  color: var(--text-muted);
+}
+
+/* Subsection titles (h3-level) */
+.help-subsection-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 16px 0 8px;
+}
+
+/* Styled bullet list */
+.help-list {
+  list-style: none;
+  margin: 8px 0 16px;
+}
+
+.help-list li {
+  position: relative;
+  padding-left: 16px;
+  font-size: 13px;
+  color: var(--text);
+  line-height: 1.6;
+  margin-bottom: 4px;
+}
+
+.help-list li::before {
+  content: '\2022';
+  position: absolute;
+  left: 0;
+  color: var(--accent);
+}
+
+/* Tip / note callout box */
+.help-tip {
+  padding: 10px 14px;
+  margin: 12px 0;
+  background: rgba(88, 166, 255, 0.06);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  font-size: 13px;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.help-tip strong {
+  color: var(--accent);
+}
+
+/* Screenshot containers */
+.help-screenshot {
+  margin: 12px 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.help-screenshot img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.help-screenshot-caption {
+  padding: 6px 12px;
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--surface);
+  text-align: center;
+}
+
+/* Cross-links */
+.help-crosslinks {
+  margin-top: 16px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.help-crosslink {
+  color: var(--accent);
+  cursor: pointer;
+  text-decoration: none;
+  margin-left: 4px;
+  transition: color var(--transition);
+}
+
+.help-crosslink:hover {
+  color: var(--accent-hover);
+  text-decoration: underline;
+}
+
+/* No results state for search */
+.help-no-results {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 48px 16px;
+  font-size: 14px;
+}
+
+/* Help table (key-value, shortcuts) */
+.help-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 8px 0;
+}
+
+.help-table td {
+  padding: 6px 8px;
+  font-size: 13px;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.5);
+  vertical-align: top;
+}
+
+.help-table td:first-child {
+  white-space: nowrap;
+  width: 180px;
+  color: var(--text);
+}
+
+.help-table td:last-child {
+  color: var(--text-muted);
+}
+
+/* =========================================================================
+   Tool Topology View
+   ========================================================================= */
+
+/* Toolbar */
+.tools-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.tools-toolbar-left,
+.tools-toolbar-right {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tools-layout-btn {
+  padding: 4px 12px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all var(--transition);
+}
+
+.tools-layout-btn:hover {
+  border-color: var(--text-muted);
+  color: var(--text);
+}
+
+.tools-layout-btn.active {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: rgba(88, 166, 255, 0.08);
+}
+
+.tools-separator {
+  color: var(--border);
+  font-size: 14px;
+}
+
+.tools-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.tools-toggle-label input[type="checkbox"] {
+  accent-color: var(--accent);
+}
+
+.tools-filter-select {
+  padding: 4px 8px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--text);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.tools-filter-select:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+
+/* Content area */
+#tools-view.active {
+  display: flex;
+  flex-direction: column;
+}
+
+.tools-content-row {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  position: relative;
+}
+
+.tools-graph-area {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+
+#tools-svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background: var(--bg);
+}
+
+.tools-graph-stats {
+  position: absolute;
+  bottom: 8px;
+  left: 12px;
+  font-size: 11px;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+/* Tool nodes */
+.tool-node {
+  transition: opacity 0.15s;
+}
+
+.tool-node.selected {
+  stroke: #ffffff !important;
+  stroke-width: 3 !important;
+  filter: drop-shadow(0 0 6px rgba(88, 166, 255, 0.5));
+}
+
+/* Tool edges */
+.tool-edge {
+  pointer-events: none;
+}
+
+/* Tool labels */
+.tool-label {
+  user-select: none;
+}
+
+/* Detail panel */
+.tools-detail-panel {
+  width: var(--panel-width);
+  background: var(--surface);
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  transition: transform var(--transition);
+  flex-shrink: 0;
+}
+
+.tools-detail-panel.hidden {
+  display: none;
+}
+
+.tool-status-badge {
+  display: inline-block;
+  padding: 1px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.tool-status-badge.active {
+  background: rgba(63, 185, 80, 0.15);
+  color: var(--success);
+}
+
+.tool-status-badge.stale {
+  background: rgba(210, 153, 34, 0.15);
+  color: var(--warning);
+}
+
+.tool-status-badge.demoted {
+  background: rgba(248, 81, 73, 0.15);
+  color: var(--danger);
+}
+
+.tool-description {
+  color: var(--text-muted);
+  font-size: 12px;
+  line-height: 1.5;
+  margin: 4px 0;
+}
+
+.tool-co-occurring-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 0;
+  color: var(--text);
+  font-size: 12px;
+  transition: color var(--transition);
+}
+
+.tool-co-occurring-item:hover {
+  color: var(--accent);
+}
+
+.tool-co-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tool-co-count {
+  color: var(--text-muted);
+  font-size: 11px;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+/* Session flow strip */
+.tools-session-strip {
+  flex-shrink: 0;
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  padding: 8px 16px;
+  max-height: 140px;
+  overflow-y: auto;
+}
+
+.tools-session-strip-label {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 500;
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.tools-session-strip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.tools-session-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tools-session-id {
+  color: var(--text-muted);
+  font-size: 10px;
+  font-family: monospace;
+  flex-shrink: 0;
+  width: 60px;
+}
+
+.tools-session-tools {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  flex: 1;
+  min-width: 0;
+}
+
+.tools-session-arrow {
+  color: var(--text-muted);
+  font-size: 10px;
+  flex-shrink: 0;
+  opacity: 0.5;
+}
+
+.tools-session-chip {
+  display: inline-block;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  font-size: 10px;
+  color: var(--text);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.tools-session-more {
+  color: var(--text-muted);
+  font-size: 10px;
+  flex-shrink: 0;
+}
+
+.tools-session-empty {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* =========================================================================
+   Database Hygiene
+   ========================================================================= */
+
+.hygiene-summary-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 12px;
+  flex-wrap: wrap;
+}
+
+.hygiene-stat {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+.hygiene-stat strong {
+  color: var(--text);
+}
+
+.hygiene-stat.hy-high strong {
+  color: #f85149;
+}
+
+.hygiene-stat.hy-medium strong {
+  color: #d29922;
+}
+
+.hygiene-table-wrap {
+  max-height: 400px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+.hygiene-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
+
+.hygiene-table th {
+  position: sticky;
+  top: 0;
+  background: var(--bg-secondary);
+  padding: 6px 8px;
+  text-align: left;
+  font-weight: 500;
+  font-size: 11px;
+  color: var(--text-muted);
+  border-bottom: 1px solid var(--border);
+}
+
+.hygiene-table td {
+  padding: 5px 8px;
+  border-bottom: 1px solid rgba(48, 54, 61, 0.3);
+  vertical-align: top;
+}
+
+.hygiene-table .mono {
+  font-family: var(--font-mono, monospace);
+  font-size: 11px;
+}
+
+.hygiene-preview {
+  max-width: 300px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-muted);
+  font-size: 11px;
+}
+
+.hy-row-high {
+  background: rgba(248, 81, 73, 0.06);
+}
+
+.hy-row-medium {
+  background: rgba(210, 153, 34, 0.06);
+}
+
+.hy-signal {
+  display: inline-block;
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: rgba(110, 118, 129, 0.2);
+  color: var(--text-muted);
+  margin-right: 2px;
+}
+
+.hygiene-signals {
+  white-space: nowrap;
+}
+
+.hygiene-distribution {
+  margin: 8px 0;
+}
+
+.hygiene-histogram {
+  display: flex;
+  align-items: flex-end;
+  gap: 3px;
+  height: 100px;
+  padding: 4px 0;
+}
+
+.hygiene-histogram-bar-wrap {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.hygiene-histogram-bar {
+  width: 100%;
+  min-height: 2px;
+  background: var(--accent, #58a6ff);
+  border-radius: 2px 2px 0 0;
+  transition: height 0.2s ease;
+}
+
+.hygiene-histogram-bar:hover {
+  background: var(--accent-hover, #79b8ff);
+}
+
+.hygiene-histogram-label {
+  font-size: 10px;
+  color: var(--text-muted, #8b949e);
+  margin-top: 2px;
 }