:root{
    --bg:#0b0c0f; --panel:#14161a; --text:#e9edf1; --muted:#a8b0ba;
    --accent:#6aa9ff; --border:#232831; --sticky:#0e1116;
  
    /* these get overridden by defaults.js at runtime */
    --val-col-w:110px;
    --rowhdr-w:100px;
    --heat-h:210; --heat-s:70%;
    --heat-low-l:16%; --heat-high-l:86%;
    --gene-sep:#3d4760;
  
    /* NEW: shared track colors for range sliders */
    --slider-bg:#2b3240;
    --slider-fill:#6aa9ff;
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  
  /* Make sure the root background is dark, regardless of other site CSS */
  html{
    background:var(--bg);
  }
  
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
  
  /* Force the main layout to keep the dark background */
  .app{
    display:grid;
    grid-template-columns:280px 1fr;
    min-height:100vh;
    background:var(--bg);
  }
  
  .sidebar{
    background:var(--panel);
    border-right:1px solid var(--border);
    padding:14px 12px;
    position:sticky;
    top:0;
    height:100vh;
    overflow:auto;
  }
  
  .sb-section{margin-bottom:16px}
  .sb-section h2{
    font-size:15px;
    margin:0 0 8px;
    color:#cbd3dd;
  }
  .sb-section h3{
    font-size:14px;
    margin:6px 0 6px;
    color:#d7dce5;
  }
  .field{margin:6px 0}
  input[type="number"]{
    width:120px;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#0b0e13;
    color:var(--text);
  }
  .check-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 8px}
  .check-grid label{display:flex;gap:6px;align-items:center}
  .btn{
    padding:8px 10px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#0b1220;
    color:var(--text);
    cursor:pointer;
  }
  .btn.primary{background:#0b1630}
  .btn:hover{border-color:#2b3240}
  .sb-advanced summary{cursor:pointer;color:var(--muted)}
  .sb-advanced{
    border:1px solid var(--border);
    border-radius:10px;
    padding:8px;
  }
  
  /* Content column stays dark too */
  .content{
    display:flex;
    flex-direction:column;
    min-width:0;
    background:var(--bg);
  }
  
  .titlebar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    border-bottom:1px solid var(--border);
    background:var(--panel);
    position:sticky;
    top:0;
    z-index:5;
  }
  .titlebar h1{margin:0;font-size:20px}
  
  .meta{
    color:var(--muted);
    font-size:14px;
    margin-top:4px;
  }
  .badge{
    background:#0b1630;
    border:1px solid var(--border);
    padding:3px 8px;
    border-radius:999px;
  }
  .muted{
    color:var(--muted);
    font-size:14px;
    margin-left:8px;
  }
  
  /* Main area and tab container explicitly dark */
  .main{
    padding:12px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:var(--bg);
  }
  
  #tabContainer{
    background:var(--bg);
  }
  
  /* Individual tabs: keep backgrounds dark regardless of other CSS */
  #mutationTab,
  #geneSearchTab,
  #vennTab{
    background:var(--bg);
  }
  
  /* Panels / legends use a slightly lighter dark panel color */
  .legend{
    padding:8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#0c0f14;
  }
  .legend-bar{height:16px;border-radius:6px;position:relative}
  .legend-marks{
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    font-size:12px;
    color:var(--muted);
  }
  .legend-mark{padding:2px 6px;border-radius:6px}
  
  .twocol-wrap{
    display:grid;
    grid-template-columns: repeat(var(--panel-count, 2), minmax(0, 1fr));
    gap:10px;
    max-width: 1200px;
  }
  
  /* Optional wrapper background if you use .table-wrap */
  .table-wrap{
    width:100%;
    overflow:auto;
    border:1px solid var(--border);
    border-radius:12px;
    background:#0c0f14;
  }
  
  /* Table background = LOW end of heat (dark) */
  table{
    border-collapse:separate;
    border-spacing:0;
    width:max-content;
    min-width:100%;
    background:rgb(0,0,0);
    table-layout: fixed;
  }
  thead th, tbody th{
    position:sticky;
    z-index:2;
    top:0;
    background:var(--sticky);
    border-bottom:1px solid var(--border);
  }
  tbody th{
    left:0;
    z-index:1;
    background:var(--sticky);
    border-right:1px solid var(--border);
  }
  thead th{white-space:nowrap}
  thead th:first-child{border-top-left-radius:12px}
  thead th:last-child{border-top-right-radius:12px}
  tbody tr:last-child td:first-child{border-bottom-left-radius:12px}
  tbody tr:last-child td:last-child{border-bottom-right-radius:12px}
  
  /* Hard cap widths for Gene/Compound with ellipsis */
  th.rowhdr, th.rowhdr2, tbody th{
    width:var(--rowhdr-w) !important;
    max-width:var(--rowhdr-w);
    min-width:var(--rowhdr-w);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  th.rowhdr2{left:var(--rowhdr-w)}
  
  thead th, tbody th, td{
    padding:8px 10px;
    border-right:1px solid var(--border);
    border-bottom:1px solid var(--border);
  }
  td{
    width:var(--val-col-w);
    min-width:var(--val-col-w);
    max-width:var(--val-col-w);
    text-align:right;
    font-variant-numeric:tabular-nums;
  }
  
  td.is-zero{ /* zero-cells: nearly invisible */
    background: transparent !important;
    color: rgba(233,237,241,.18) !important;
  }
  
  /* Strong separator between gene groups (contrasty color) */
  tr.gene-sep > td, tr.gene-sep > th {
    border-top:2px solid var(--gene-sep);
  }
  
  tbody tr:hover td, tbody tr:hover th{
    outline:1px dashed rgba(255,255,255,.08);
    outline-offset:-3px;
  }
  
  .footer{
    padding:10px 16px;
    color:var(--muted);
    border-top:1px solid var(--border);
  }
  
  /* Make widths precise: content + padding + border = declared width */
  thead th, tbody th, td {
    box-sizing: border-box;
  }
  
  /* Give all VALUE headers the exact same width as value TDs */
  thead th:not(.rowhdr):not(.rowhdr2) {
    width: var(--val-col-w);
    min-width: var(--val-col-w);
    max-width: var(--val-col-w);
  }
  
  /* stain-info header row */
  thead tr.info-row th{
    background:#0f1217;
    font-weight:400;
    color:#d7dce5;
    white-space:normal;
    vertical-align:top;
    font-size:12px;
  }
  thead tr.info-row a{color:var(--accent);text-decoration:none}
  thead tr.info-row code{color:#cbd3dd}
  
  /* non-interactive hover hint tooltip */
  .tooltip{
    position:fixed;
    pointer-events:none;
    z-index:10;
    max-width:240px;
    background:#0f1217;
    border:1px solid var(--border);
    border-radius:8px;
    padding:6px 8px;
    box-shadow:0 6px 20px rgba(0,0,0,.35);
    color:var(--text);
    font-size:12px;
    line-height:1.35;
  }
  
  .stain-img{
    margin-top:6px;
    border-radius:6px;
    display:block;
    border:1px solid var(--border);
  }
  
  /* interactive popovers (cells & gene/compound) */
  .popcard{
    position:fixed;
    z-index:11;
    min-width:320px;
    max-width:520px;
    background:#0f1217;
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px;
    color:var(--text);
    box-shadow:0 6px 24px rgba(0,0,0,.45);
    font-size:12px;
    line-height:1.4;
  }
  .popcard a{color:var(--accent);text-decoration:none}
  .popcard .toolbar{
    display:flex;
    gap:6px;
    justify-content:flex-start;
    margin-bottom:6px;
  }
  .popcard .btn-sm{
    padding:4px 8px;
    border:1px solid var(--border);
    border-radius:6px;
    background:#0b1220;
    color:var(--text);
    cursor:pointer;
  }
  .poplink{cursor:pointer} /* no underline now */
  
  /* caret button placed in first stain header */
  .caret-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
    padding:4px 8px;
    border:1px solid var(--border);
    border-radius:8px;
    background:#0b1220;
    color:var(--text);
    font-size:12px;
    margin-left:8px;
  }
  .caret-btn:hover{border-color:#2b3240}
  .caret{
    display:inline-block;
    transition:transform .15s ease;
  }
  .caret.open{transform:rotate(90deg)}
  
  /* mini subgroup cells inside a value cell */
  .mini-wrap{
    display:flex;
    gap:3px;
    padding:0 4px;
    justify-content:stretch;
    align-items:stretch;
  }
  .mini{
    flex:1 1 0;
    min-height:18px;
    border-radius:4px;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:0 4px;
    font-size:12px;
  }
  
  .biglink,
  .biglink:link,
  .biglink:visited {
    background: #0b1630;
    border: 1px solid var(--border);
    padding: 3px 8px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
  }
  
  /* Style for when the user hovers over the link */
  .biglink:hover,
  .biglink:focus {
    background: #1a2a4e;
    border-color: #ffffff;
    cursor: pointer;
  }
  
  /* Style for when the link is actively being clicked (held down) */
  .biglink:active {
    background: #050a1a;
    border-color: #ffffff;
  }
  
  .range-group {
    margin-bottom: 0.75rem;
  }
  
  .range-slider {
    position: relative;
    height: 1.8rem;
  }
  
  .range-slider input[type="range"] {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    pointer-events: none;           /* track clicks go to top slider */
    -webkit-appearance: none;
    background: transparent;
  }
  
  .range-slider input[type="range"]::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e9edf1;          /* light thumb so it pops on the dark bg */
    border: 2px solid #111827;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    margin-top: -5px;              /* vertically center on the 4px track */
  }
  
  .range-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e9edf1;
    border: 2px solid #111827;
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
  }
  
  /* Basic track style; JS will overwrite background with a gradient */
  .range-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
  }
  .range-slider input[type="range"]::-moz-range-track {
    height: 4px;
    border-radius: 2px;
  }
  
  .range-values {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.25rem;
  }
  
  .range-values input[type="number"] {
    width: 4rem;
  }
  
  /* ---------- Venn styling ---------- */
  
  .venn-set-list {
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  
  .venn-set-row {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    padding:6px 8px;
    border-radius:8px;
    border:1px solid var(--border);
    background:#0c0f14;
  }
  
  .venn-set-label {
    display:flex;
    align-items:center;
    gap:4px;
  }
  
  .venn-set-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    border-radius:999px;
    background:#1b2438;
    font-size:12px;
  }
  
  .venn-set-row input[type="text"],
  .venn-set-row input[type="number"],
  .venn-set-row select {
    padding:4px 6px;
    border-radius:6px;
    border:1px solid var(--border);
    background:#0b0e13;
    color:var(--text);
    font-size:12px;
  }
  
  .venn-region-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }
  
  .venn-region-chip {
    min-width: 110px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: #0b1220;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  
  .venn-region-chip.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(106,169,255,0.3);
  }
  
  #vennSvg {
    width: 100%;
    max-width: 480px;
    height: auto;
  }
  
  .venn-count-text {
    fill: #ffffff;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
  }