:root {
   --bg: #0f1117;
   --panel: #161822;
   --border: #252836;
   --text: #c9d1d9;
   --dim: #6e7681;
   --accent: #58a6ff;
   --green: #3fb950;
   --yellow: #d29922;
   --red: #f85149;
   --purple: #a371f7;
 }

 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   background: var(--bg);
   color: var(--text);
   height: 100vh;
   display: flex;
   overflow: hidden;
 }

 /* Sidebar */
 #sidebar {
   width: 260px;
   min-width: 200px;
   background: var(--panel);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 #sidebar h2 {
   padding: 16px 16px 8px;
   font-size: 14px;
   color: var(--dim);
   text-transform: uppercase;
   letter-spacing: .5px;
 }

 #search-box {
   margin: 0 12px 12px;
   padding: 8px 12px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 6px;
   color: var(--text);
   font-size: 13px;
   outline: none;
 }

 #search-box:focus {
   border-color: var(--accent);
 }

 #entity-list {
   flex: 1;
   overflow-y: auto;
   padding: 0 8px 8px;
 }

 .entity-item {
   padding: 8px 12px;
   margin: 2px 0;
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 8px;
   transition: background .15s;
 }

 .entity-item:hover {
   background: rgba(255, 255, 255, .05);
 }

 .entity-item.active {
   background: rgba(88, 166, 255, .1);
   color: var(--accent);
 }

 .entity-item .icon {
   font-size: 11px;
   width: 18px;
   text-align: center;
   flex-shrink: 0;
 }

 .entity-item .icon.green {
   color: var(--green);
 }

 .entity-item .icon.yellow {
   color: var(--yellow);
 }

 .entity-item .count {
   margin-left: auto;
   color: var(--dim);
   font-size: 11px;
 }

 /* Main */
 #main {
   flex: 1;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 #toolbar {
   padding: 12px 16px;
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   gap: 12px;
   flex-shrink: 0;
 }

 #toolbar h1 {
   font-size: 16px;
   font-weight: 600;
   white-space: nowrap;
 }

 #toolbar .meta {
   color: var(--dim);
   font-size: 12px;
   margin-left: 8px;
   white-space: nowrap;
 }

 #toolbar .badge {
   font-size: 11px;
   padding: 2px 8px;
   border-radius: 10px;
   background: var(--border);
 }

 #toolbar .badge.complete {
   background: rgba(63, 185, 80, .15);
   color: var(--green);
 }

 #toolbar .badge.partial {
   background: rgba(210, 153, 34, .15);
   color: var(--yellow);
 }

 #filter-bar {
   padding: 8px 16px;
   border-bottom: 1px solid var(--border);
   display: flex;
   gap: 6px;
   flex-wrap: wrap;
   flex-shrink: 0;
 }

 .filter-chip {
   font-size: 11px;
   padding: 3px 10px;
   border-radius: 12px;
   background: var(--border);
   border: none;
   color: var(--dim);
   cursor: pointer;
   transition: all .15s;
 }

 .filter-chip:hover {
   color: var(--text);
 }

 .filter-chip.active {
   background: var(--accent);
   color: #fff;
 }

 /* Table */
 #table-wrap {
   flex: 1;
   overflow: auto;
   padding: 0 16px 16px;
 }

 table {
   width: 100%;
   border-collapse: collapse;
   font-size: 13px;
 }

 thead {
   position: sticky;
   top: 0;
   z-index: 2;
 }

 th {
   background: var(--panel);
   padding: 10px 12px;
   text-align: left;
   font-weight: 600;
   color: var(--dim);
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: .3px;
   border-bottom: 2px solid var(--border);
   cursor: pointer;
   white-space: nowrap;
   user-select: none;
 }

 th:hover {
   color: var(--text);
 }

 th .sort-arrow {
   margin-left: 4px;
 }

 td {
   padding: 8px 12px;
   border-bottom: 1px solid var(--border);
   vertical-align: top;
 }

 tr:hover td {
   background: rgba(255, 255, 255, .02);
 }

 tr.note-target td {
   background: rgba(88, 166, 255, .08) !important;
 }

 .cell-direct {
   color: var(--green);
 }

 .cell-compound {
   color: var(--yellow);
 }

 .cell-derived {
   color: var(--purple);
 }

 .cell-unsupported {
   color: var(--red);
 }

 .cell-none {
   color: var(--dim);
 }

 .cell-source {
   font-size: 11px;
   color: var(--dim);
   margin-top: 2px;
 }

 .cell-meta-key {
   font-size: 10px;
   color: var(--purple);
   margin-top: 2px;
 }

 /* Notes panel */
 #notes-panel {
   border-top: 1px solid var(--border);
   background: var(--panel);
   flex-shrink: 0;
   max-height: 250px;
   overflow-y: auto;
   display: none;
 }

 #notes-panel.open {
   display: block;
 }

 #notes-panel h3 {
   padding: 10px 16px 6px;
   font-size: 13px;
   color: var(--accent);
   position: sticky;
   top: 0;
   background: var(--panel);
 }

 .note-item {
   padding: 6px 16px;
   font-size: 13px;
   border-bottom: 1px solid var(--border);
 }

 .note-item .meta {
   font-size: 10px;
   color: var(--dim);
   margin-bottom: 3px;
 }

 #note-form {
   display: flex;
   padding: 8px 16px;
   gap: 8px;
   align-items: center;
 }

 #note-input {
   flex: 1;
   padding: 6px 10px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 4px;
   color: var(--text);
   font-size: 13px;
   outline: none;
 }

 #note-input:focus {
   border-color: var(--accent);
 }

 #note-author {
   width: 100px;
   padding: 6px 10px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 4px;
   color: var(--text);
   font-size: 12px;
   outline: none;
 }

 #note-author:focus {
   border-color: var(--accent);
 }

 button {
   padding: 6px 14px;
   background: var(--accent);
   color: #fff;
   border: none;
   border-radius: 4px;
   font-size: 12px;
   cursor: pointer;
   white-space: pre;
 }

 button:hover {
   opacity: .85;
 }

 button.ghost {
   background: transparent;
   border: 1px solid var(--border);
   color: var(--dim);
 }

 button.ghost:hover {
   color: var(--text);
   border-color: var(--dim);
 }

 /* Empty state */
 .empty {
   text-align: center;
   padding: 60px 20px;
   color: var(--dim);
 }

 .empty h3 {
   font-size: 18px;
   margin-bottom: 8px;
   color: var(--text);
 }

 /* Scrollbar */
 ::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }

 ::-webkit-scrollbar-track {
   background: transparent;
 }

 ::-webkit-scrollbar-thumb {
   background: var(--border);
   border-radius: 3px;
 }