:root {
  color: #17231f;
  background: #f4f0e8;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 720px; }
button { font: inherit; }
.app-shell { min-height: 100vh; }
.topbar { height: 76px; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #cdc7bb; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-family: Georgia, serif; font-size: 28px; font-weight: 500; }
h2 { font-size: 15px; letter-spacing: .02em; }
.eyebrow { margin-bottom: 3px; color: #707970; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #2d8961; box-shadow: 0 0 0 4px #d8e7de; }
.revision-refresh { display: grid; grid-template-columns: auto auto; align-items: center; justify-items: end; gap: 3px 10px; }
.revision-refresh button { padding: 6px 9px; border: 1px solid #b8b2a7; border-radius: 6px; background: #faf8f2; color: #394741; cursor: pointer; }
.revision-refresh button:disabled { cursor: default; opacity: .55; }
.revision-refresh small { grid-column: 1 / -1; max-width: 360px; color: #657069; font-size: 10px; }
.workspace { display: grid; grid-template-columns: 230px minmax(400px, 1fr) 250px; min-height: calc(100vh - 76px); }
.sidebar, .details { padding: 22px 18px; background: #ece7dd; }
.sidebar { border-right: 1px solid #cdc7bb; }
.details { border-left: 1px solid #cdc7bb; }
ul { margin: 0 0 26px; padding: 0; list-style: none; }
.dataset-list button, .view-list button { width: 100%; margin-bottom: 6px; padding: 10px; display: flex; justify-content: space-between; gap: 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; }
.dataset-list button:not(:disabled), .view-list button { cursor: pointer; }
.dataset-list button.selected, .dataset-list button:hover, .view-list button:hover { background: #d9ded2; }
.view-list button.selected { background: #cbd8cf; box-shadow: inset 3px 0 #2d7457; }
small { color: #707970; }
.plot-panel { padding: 24px; background-image: linear-gradient(#dfdacf 1px, transparent 1px), linear-gradient(90deg, #dfdacf 1px, transparent 1px); background-size: 24px 24px; }
.panel-heading { display: flex; justify-content: space-between; }
.revision { color: #707970; font-family: ui-monospace, monospace; font-size: 12px; }
.plot-placeholder { min-height: 520px; display: grid; place-content: center; border: 1px solid #c6c0b4; border-radius: 14px; background: rgba(250, 248, 242, .9); color: #707970; text-align: center; }
.plot-status { min-height: 520px; display: grid; place-content: center; color: #707970; }
.plot-stack { position: relative; height: min(68vh, 650px); min-height: 480px; overflow: hidden; border: 1px solid #c6c0b4; border-radius: 14px; background: #faf8f0; }
.plot-stack canvas, .plot-overlay, .selection-lasso { position: absolute; inset: 0; width: 100%; height: 100%; }
.plot-stack canvas { display: block; cursor: grab; touch-action: none; }
.plot-stack canvas:active { cursor: grabbing; }
.plot-overlay { pointer-events: none; overflow: visible; }
.selection-rectangle { position: absolute; z-index: 2; pointer-events: none; border: 1px solid #174f40; background: rgba(45, 116, 87, .14); }
.selection-lasso { z-index: 2; pointer-events: none; }
.selection-lasso polygon { fill: rgba(45, 116, 87, .14); stroke: #174f40; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.plot-selection-mode { position: absolute; z-index: 3; top: 10px; left: 72px; display: flex; overflow: hidden; border: 1px solid #a8b3a9; border-radius: 7px; background: rgba(250, 248, 240, .94); }
.plot-selection-mode button { padding: 5px 8px; border: 0; border-right: 1px solid #c6c0b4; background: transparent; color: #52605a; font-size: 11px; cursor: pointer; }
.plot-selection-mode button:last-child { border-right: 0; }
.plot-selection-mode button.selected { background: #d9e3dc; color: #174f40; font-weight: 700; }
.point-tooltip { position: absolute; z-index: 3; display: grid; gap: 2px; max-width: 220px; padding: 6px 8px; pointer-events: none; border: 1px solid #a8b3a9; border-radius: 6px; background: rgba(250, 248, 240, .96); color: #26362f; box-shadow: 0 2px 8px rgba(26, 42, 35, .16); font-size: 12px; }
.point-tooltip span { color: #52605a; font-family: ui-monospace, monospace; }
.plot-overlay line { stroke: #52605a; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.plot-overlay text { fill: #394741; }
.plot-overlay .axis-tick text { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; }
.plot-overlay .axis-label { font-size: 14px; font-weight: 650; }
.plot-summary { position: absolute; right: 14px; bottom: 10px; margin: 0; padding: 6px 9px; border-radius: 6px; background: rgba(250, 248, 240, .88); color: #52605a; font-size: 12px; }
.point-inspection { display: grid; gap: 4px; min-height: 20px; color: #52605a; font-size: 12px; }
.point-inspection strong { color: #26362f; }
.plot-gpu-error { position: absolute; z-index: 4; inset: 50% auto auto 50%; display: grid; gap: 6px; width: min(360px, calc(100% - 48px)); padding: 18px; transform: translate(-50%, -50%); border: 1px solid #a14d42; border-radius: 10px; background: rgba(255, 247, 242, .97); color: #6f2f29; box-shadow: 0 5px 18px rgba(70, 34, 29, .18); text-align: center; }
.plot-gpu-error .plot-data-status { color: #6f2f29; font-weight: 650; }
.plot-gpu-error span { color: #594b47; font-size: 13px; line-height: 1.45; }
.genome-browser { margin-top: 22px; padding: 16px; border: 1px solid #c6c0b4; border-radius: 14px; background: rgba(250, 248, 242, .96); }
.genome-browser h3 { margin-bottom: 0; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.genome-empty { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #707970; }
.genome-empty p { max-width: 430px; margin-bottom: 0; font-size: 12px; line-height: 1.45; }
.genome-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.genome-track-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.genome-track-list button { display: grid; padding: 6px 9px; border: 1px solid #c6c0b4; border-radius: 7px; background: #f4f0e8; color: inherit; text-align: left; cursor: pointer; }
.genome-track-list button.selected { border-color: #2d7457; background: #d9e3dc; }
.genome-track-list button.primary { box-shadow: inset 0 0 0 1px #2d7457; }
.genome-navigation { margin: 14px 0 9px; display: grid; grid-template-columns: auto auto minmax(160px, 1fr) auto auto; align-items: center; gap: 8px; color: #59665f; font-size: 12px; text-align: center; }
.genome-navigation button { padding: 6px 9px; border: 1px solid #bdb7ac; border-radius: 6px; background: #f7f4ec; color: inherit; }
.genome-navigation button:not(:disabled) { cursor: pointer; }
.genome-navigation button:disabled { opacity: .45; }
.prepared-navigation { grid-template-columns: auto minmax(160px, 1fr) auto auto; }
.dynamic-signal-controls { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; color: #707970; font-size: 12px; }
.dynamic-signal-controls button { padding: 7px 10px; border: 1px solid #2d7457; border-radius: 6px; background: #e5eee8; color: #214d3b; cursor: pointer; white-space: nowrap; }
.dynamic-signal-controls button:disabled { border-color: #bdb7ac; background: #eeeae1; color: #8a8d87; cursor: default; }
.dynamic-ready { color: #2d7457; }
.dynamic-error { color: #9a3f32; }
.genome-status { min-height: 180px; display: grid; place-content: center; color: #707970; }
.genome-viewport { cursor: grab; touch-action: none; }
.genome-viewport:active { cursor: grabbing; }
.feature-track-search { margin-top: 12px; display: flex; gap: 8px; }
.feature-track-search input { min-width: 220px; flex: 1; padding: 7px 9px; border: 1px solid #bdb7ac; border-radius: 7px; background: #fffdf8; }
.feature-track-search button, .feature-search-results button { padding: 6px 9px; border: 1px solid #bdb7ac; border-radius: 6px; background: #f7f4ec; color: inherit; cursor: pointer; }
.feature-search-status { margin: 8px 0 0; color: #657069; font-size: 12px; }
.feature-search-results { margin-top: 8px; }
.feature-search-results ol { max-height: 160px; margin: 5px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 5px; overflow: auto; list-style: none; }
.feature-search-results button { width: 100%; display: grid; text-align: left; }
.feature-search-results small, .feature-track-list small { color: #69736d; }
.feature-track-viewport { min-height: 90px; cursor: grab; touch-action: none; }
.feature-track-viewport:active { cursor: grabbing; }
.feature-track-lane + .feature-track-lane { margin-top: 12px; padding-top: 12px; border-top: 1px solid #ddd7cb; }
.feature-track-lane-title { margin-bottom: 5px; color: #35443c; font-size: 12px; font-weight: 650; }
.feature-track-plot svg { width: 100%; min-height: 70px; display: block; border: 1px solid #ddd7cb; border-radius: 8px; background: #fffdf8; }
.feature-track-plot.density rect { fill: #527b68; }
.feature-track-plot text { fill: #35443c; font: 11px system-ui, sans-serif; pointer-events: none; }
.feature-track-plot .alignment-base text { fill: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.feature-track-plot .alignment-base.mismatch rect { stroke: #732f2f; stroke-width: 1.5; }
.feature-track-plot .alignment-event text { fill: #7a3f36; font: 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; }
.feature-track-plot .alignment-event.insertion path { fill: #7656a6; }
.feature-track-plot .alignment-event.deletion rect { fill: #bb4e46; }
.alignment-sequence { overflow-wrap: anywhere; letter-spacing: .04em; }
.feature-glyph { cursor: pointer; outline: none; }
.feature-glyph.selected rect { stroke: #17251f; stroke-width: 3px; }
.feature-glyph:focus rect { stroke: #1e64a3; stroke-width: 3px; }
.feature-track-scale { margin-top: 4px; display: flex; justify-content: space-between; gap: 12px; color: #69736d; font-size: 11px; }
.reference-sequence-plot { margin-top: 12px; }
.reference-sequence-plot svg { width: 100%; min-height: 70px; display: block; border: 1px solid #ddd7cb; border-radius: 8px; background: #fffdf8; }
.reference-sequence-plot text { fill: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; pointer-events: none; }
.reference-sequence-plot text.reference-coordinate { fill: #56635c; font: 9px system-ui, sans-serif; font-weight: 500; }
.reference-sequence-overview { margin-top: 12px; padding: 18px 12px 12px; color: #69736d; font-size: 11px; text-align: center; }
.reference-sequence-ruler { height: 8px; margin-bottom: 10px; border: 1px solid #b8b2a7; border-radius: 999px; background: repeating-linear-gradient(90deg, #d9d3c8 0 1px, #f8f5ee 1px 10%); }
.feature-details { margin-top: 10px; padding: 8px 10px; border: 1px solid #d4cec2; border-radius: 8px; background: #fffdf8; }
.feature-details summary { cursor: pointer; font-weight: 650; }
.feature-details dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 8px 0 0; font-size: 12px; }
.feature-details dt { color: #68736c; }
.feature-details dd { margin: 0; overflow-wrap: anywhere; }
.feature-blocks { margin: 8px 0 0; font-size: 12px; }
.signal-plot { padding: 8px 10px 6px; border-radius: 8px; background: #f4f0e8; }
.strand-signal-lanes { display: grid; gap: 10px; }
.strand-signal-lane { padding: 8px; border: 1px solid #d8d1c5; border-radius: 9px; background: #fbfaf7; }
.strand-signal-lane > .signal-plot { padding-top: 4px; }
.observation-detail { display: grid; gap: 6px; }
.observation-detail-table-scroll { max-height: 320px; overflow: auto; border: 1px solid #d8d1c5; border-radius: 8px; }
.observation-detail table { width: 100%; border-collapse: collapse; font-size: 12px; }
.observation-detail th, .observation-detail td { padding: 6px 8px; border-bottom: 1px solid #ebe6dd; text-align: left; vertical-align: top; }
.observation-detail thead th { position: sticky; top: 0; background: #f4f0e8; z-index: 1; }
.observation-detail td.missing { color: #777b80; font-style: italic; }
.matrix-measurement-table button { padding: 0; border: 0; background: transparent; color: #245b49; font: inherit; font-weight: 650; text-align: left; cursor: pointer; }
.matrix-measurement-table button:hover { text-decoration: underline; }
.signal-plot svg { display: block; width: 100%; height: 180px; overflow: hidden; }
.signal-plot line { stroke: #a6aaa2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.signal-plot line.signal-cursor { stroke: #a7456a; stroke-dasharray: 3 2; }
.signal-plot polyline, .signal-plot path { fill: none; stroke: #2d7457; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.signal-inspection { min-height: 18px; margin: 5px 0 0; display: flex; gap: 10px; color: #59665f; font-size: 11px; font-variant-numeric: tabular-nums; }
.signal-inspection strong { color: #27382f; }
.prepared-signal-lane + .prepared-signal-lane { margin-top: 12px; padding-top: 12px; border-top: 1px solid #d8d1c5; }
.base-composition-plot { margin-bottom: 12px; border: 1px solid #d8d1c5; }
.base-composition-plot path { stroke: none; }
.base-composition-plot .base-a, .base-composition-legend .base-a { fill: #2f9e44; background: #2f9e44; }
.base-composition-plot .base-c, .base-composition-legend .base-c { fill: #2878b5; background: #2878b5; }
.base-composition-plot .base-g, .base-composition-legend .base-g { fill: #d89b20; background: #d89b20; }
.base-composition-plot .base-t, .base-composition-legend .base-t { fill: #c43d4b; background: #c43d4b; }
.base-composition-plot .base-n, .base-composition-legend .base-n { fill: #777b80; background: #777b80; }
.base-composition-plot .base-composition-unresolved { fill: #d8d1c5; opacity: 0.65; }
.base-composition-legend { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 12px; font-size: 11px; font-weight: 500; }
.base-composition-legend span { display: inline-flex; gap: 3px; align-items: center; }
.base-composition-legend i { width: 9px; height: 9px; border-radius: 2px; }
.base-composition-scale { display: inline-flex; gap: 5px; align-items: center; margin-left: auto; font-size: 11px; font-weight: 500; }
.base-composition-scale select { padding: 3px 5px; border: 1px solid #bdb7ac; border-radius: 5px; background: #fffdf8; color: inherit; }
.signal-scale { display: flex; justify-content: space-between; color: #707970; font-size: 11px; font-variant-numeric: tabular-nums; }
.signal-provenance { margin-top: 10px; color: #59665f; font-size: 11px; }
.signal-provenance summary { cursor: pointer; font-weight: 650; }
.signal-provenance dl { grid-template-columns: max-content minmax(0, 1fr); margin: 10px 0 0; padding: 10px; border: 1px solid #d5cfc4; border-radius: 7px; background: rgba(244, 240, 232, .72); }
.signal-provenance dd { min-width: 0; }
.signal-provenance .identity { overflow-wrap: anywhere; }
.object-browser { margin-top: 22px; padding: 16px; border: 1px solid #c6c0b4; border-radius: 14px; background: rgba(250, 248, 242, .96); }
.object-summary-overview { margin: 12px 0 16px; padding: 12px; border: 1px solid #c8c0b2; border-radius: 10px; background: #f2eee4; }
.object-summary-heading { display: flex; justify-content: space-between; gap: 14px; align-items: end; }
.object-summary-heading h4 { margin: 2px 0; }
.object-summary-partitions { display: grid; gap: 10px; margin-top: 10px; }
.object-summary-partition { padding: 10px; border: 1px solid #d5cfc4; border-radius: 8px; background: #fffdf7; }
.object-summary-partition details { margin-top: 8px; overflow-wrap: anywhere; }
.object-summary-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(210px, 1fr); gap: 12px; margin-top: 8px; }
.object-summary-table-wrap { overflow: auto; max-height: 390px; }
.object-summary-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.object-summary-table-wrap th, .object-summary-table-wrap td { padding: 4px 6px; border-bottom: 1px solid #e2ddd4; text-align: right; }
.object-summary-table-wrap th:first-child { text-align: left; }
.fastqc-membership-button { min-width: 34px; padding: 3px 6px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: right; }
.fastqc-membership-button:not(:disabled):hover, .fastqc-membership-button:not(:disabled):focus-visible { border-color: currentColor; background: rgba(255, 255, 255, .72); }
.fastqc-membership-button:disabled { cursor: default; opacity: .45; }
.fastqc-pass .fastqc-membership-button { color: #216449; }
.fastqc-warn .fastqc-membership-button { color: #8a5a00; }
.fastqc-fail .fastqc-membership-button { color: #9c2f2f; }
.object-summary-metrics { display: grid; gap: 8px; align-content: start; }
.object-summary-metric { display: grid; grid-template-columns: minmax(90px, 1fr) 120px; gap: 3px 8px; align-items: center; }
.object-summary-metric svg { width: 120px; height: 30px; fill: #32746d; }
.object-summary-metric rect[role="button"] { cursor: pointer; outline: none; }
.object-summary-metric rect[role="button"]:hover, .object-summary-metric rect[role="button"]:focus { fill: #b44d3f; stroke: #5b2019; stroke-width: 1px; }
.object-summary-metric small { grid-column: 1 / -1; }
.object-prevalence { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 2px; }
.object-prevalence li { background: #f4f0e8; }
.object-prevalence button { width: 100%; padding: 4px 6px; display: flex; justify-content: space-between; gap: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.object-prevalence button:hover, .object-prevalence button:focus-visible { background: #dfe9e2; }
.amr-membership-help { color: #59665f; font-size: 11px; }
.amr-combine-mode { display: grid; grid-template-columns: minmax(130px, auto) minmax(180px, 1fr); gap: 8px; align-items: center; margin: 8px 0; font-size: 11px; }
.amr-combine-mode select { min-width: 0; padding: 6px 8px; border: 1px solid #bdb7ac; border-radius: 6px; background: #fffdf8; color: inherit; }
.amr-value-search { margin-top: 12px; padding-top: 10px; border-top: 1px solid #d5cfc4; }
.amr-value-search h5 { margin: 0 0 7px; }
@media (max-width: 800px) { .object-summary-grid { grid-template-columns: 1fr; } }
.object-heading, .object-preview-heading, .object-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.object-heading h3 { margin-bottom: 0; font-family: Georgia, serif; font-size: 18px; font-weight: 500; }
.object-list { margin: 14px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 9px; }
.object-card { min-width: 0; padding: 10px; border: 1px solid #d5cfc4; border-radius: 8px; background: #f4f0e8; }
.object-card.related { border-color: #2d7457; box-shadow: inset 3px 0 #2d7457; }
.object-card-heading strong, .object-card-heading small { overflow-wrap: anywhere; }
.object-card p { margin: 5px 0; color: #59665f; font-size: 11px; }
.object-card ul { margin: 10px 0 0; }
.object-representation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-top: 5px; }
.object-representation button { min-width: 0; padding: 6px 8px; display: grid; border: 1px solid #c6c0b4; border-radius: 6px; background: #faf8f2; color: inherit; text-align: left; cursor: pointer; }
.object-representation button.selected { border-color: #2d7457; background: #d9e3dc; }
.object-representation button:disabled { cursor: default; opacity: .68; }
.object-representation a, .object-preview-heading a { color: #246348; font-size: 11px; }
.object-status { margin: 10px 0 0; color: #707970; font-size: 12px; }
.object-preview { margin-top: 12px; padding: 12px; border: 1px solid #cbc5ba; border-radius: 8px; background: #fffdf8; }
.object-preview-heading > div { min-width: 0; display: grid; gap: 3px; }
.object-text-preview { max-height: 420px; margin: 12px 0 0; padding: 12px; overflow: auto; border-radius: 6px; background: #1f2925; color: #e6ede8; font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.genbank-circular-map { margin: 10px 0; padding: 10px; border: 1px solid #d5cfc4; border-radius: 8px; background: #faf8f2; }
.genbank-circular-map > strong { display: block; margin-bottom: 4px; font-size: 12px; }
.genbank-circular-map svg { display: block; width: min(100%, 540px); max-height: 540px; margin: auto; overflow: visible; }
.genbank-circular-backbone { fill: none; stroke: #919b95; stroke-width: 2; }
.genbank-circular-feature { cursor: pointer; }
.genbank-circular-feature path { fill: none; stroke: #657b73; stroke-width: 8; vector-effect: non-scaling-stroke; }
.genbank-circular-feature.cds path { stroke: #36749b; }
.genbank-circular-feature.gene path { stroke: #4f8a61; }
.genbank-circular-feature.source path { stroke: #aaa49a; stroke-width: 4; }
.genbank-circular-feature.other path { stroke: #a65378; }
.genbank-circular-feature.selected path { stroke: #17231f; stroke-width: 12; }
.genbank-circular-feature text { fill: #46524d; font-size: 10px; pointer-events: none; }
.genbank-circular-length { fill: #26332e; font-size: 18px; font-weight: 700; }
.genbank-circular-topology { fill: #707970; font-size: 11px; }
.amr-viewer { margin-top: 12px; }
.amr-warning, .amr-caveat { padding: 8px 10px; border-radius: 6px; font-size: 11px; line-height: 1.4; }
.amr-warning { border: 1px solid #c86d5d; background: #f4ddd8; color: #7e3026; font-weight: 650; }
.amr-caveat { border: 1px solid #d2bd85; background: #f5ecd4; color: #67501c; }
.amr-summary { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0; }
.amr-summary > div { min-width: 105px; padding: 7px 9px; display: grid; border: 1px solid #d5cfc4; border-radius: 6px; background: #faf8f2; }
.amr-summary strong { font-size: 17px; }
.amr-filters { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(130px, auto); gap: 7px; margin-bottom: 10px; }
.amr-filters input, .amr-filters select { min-width: 0; padding: 7px 8px; border: 1px solid #bdb7ac; border-radius: 6px; background: #fffdf8; color: inherit; }
.amr-evidence { margin-bottom: 10px; padding: 9px; border: 1px solid #d5cfc4; border-radius: 7px; background: #faf8f2; }
.amr-evidence-heading, .amr-axis { display: flex; justify-content: space-between; gap: 10px; }
.amr-evidence svg { display: block; width: 100%; height: 220px; background: #fffdf8; }
.amr-evidence line { stroke: #a6aaa2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.amr-evidence circle { fill: #76817b; stroke: #fffdf8; stroke-width: 1.5; cursor: pointer; vector-effect: non-scaling-stroke; }
.amr-evidence circle.amr { fill: #a7456a; }
.amr-evidence circle.stress { fill: #c48424; }
.amr-evidence circle.virulence { fill: #5368a5; }
.amr-evidence circle.selected { stroke: #17231f; stroke-width: 3; r: 8px; }
.amr-axis { color: #707970; font-size: 10px; }
.amr-table-wrap { max-height: 420px; overflow: auto; border: 1px solid #d5cfc4; border-radius: 7px; }
.amr-table-wrap table { width: 100%; border-collapse: collapse; font-size: 10px; font-variant-numeric: tabular-nums; }
.amr-table-wrap th { position: sticky; top: 0; z-index: 1; padding: 6px; background: #e8e3d9; color: #46524d; text-align: left; white-space: nowrap; }
.amr-table-wrap td { max-width: 260px; padding: 5px 6px; overflow: hidden; border-bottom: 1px solid #e2ddd3; text-overflow: ellipsis; white-space: nowrap; }
.amr-table-wrap tbody tr { cursor: pointer; }
.amr-table-wrap tbody tr:hover, .amr-table-wrap tbody tr.selected { background: #dfe9e2; }
.amr-details { margin-top: 10px; padding: 10px; border: 1px solid #92aa9d; border-radius: 7px; background: #edf3ef; }
.amr-details > strong, .amr-details > small { display: block; }
.amr-details dl { grid-template-columns: minmax(150px, max-content) minmax(0, 1fr); margin-bottom: 0; font-size: 11px; }
.amr-details dd { overflow-wrap: anywhere; }
.amr-diagnostics { margin-top: 10px; color: #7e3026; font-size: 11px; }
.amr-diagnostics ul { margin: 7px 0 0; padding-left: 18px; list-style: disc; }
.fastqc-viewer { margin-top: 12px; }
.fastqc-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fastqc-summary > div:first-child { display: grid; gap: 3px; }
.fastqc-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.fastqc-counts span, .fastqc-detail-heading > span { padding: 3px 6px; border-radius: 999px; background: #e5e2da; color: #59665f; font-size: 10px; font-weight: 750; }
.fastqc-counts .pass, .fastqc-detail-heading > .pass { background: #d7eadf; color: #21613f; }
.fastqc-counts .warn, .fastqc-detail-heading > .warn { background: #f3e5bd; color: #775714; }
.fastqc-counts .fail, .fastqc-detail-heading > .fail { background: #f0d3ce; color: #8a352b; }
.fastqc-basic { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0; padding: 8px; border: 1px solid #d5cfc4; border-radius: 7px; background: #faf8f2; }
.fastqc-basic > div { display: flex; gap: 5px; font-size: 11px; }
.fastqc-basic dt { color: #707970; }
.fastqc-layout { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 10px; }
.fastqc-modules { display: grid; align-content: start; gap: 4px; }
.fastqc-modules button { min-width: 0; padding: 6px 8px; display: flex; justify-content: space-between; gap: 6px; border: 1px solid #d5cfc4; border-left: 3px solid #89918c; border-radius: 5px; background: #f4f0e8; color: inherit; text-align: left; cursor: pointer; }
.fastqc-modules button.pass { border-left-color: #39805b; }
.fastqc-modules button.warn { border-left-color: #c28d28; }
.fastqc-modules button.fail { border-left-color: #b04d40; }
.fastqc-modules button.selected { background: #d9e3dc; border-color: #2d7457; }
.fastqc-modules button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fastqc-detail { min-width: 0; padding: 9px; border: 1px solid #d5cfc4; border-radius: 7px; background: #faf8f2; }
.fastqc-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fastqc-detail-heading h4 { margin: 0; }
.fastqc-chart { margin: 10px 0; }
.fastqc-chart svg { display: block; width: 100%; height: 200px; background: #fffdf8; }
.fastqc-chart line { stroke: #a6aaa2; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fastqc-chart polyline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fastqc-axis { display: flex; justify-content: space-between; color: #707970; font-size: 10px; }
.fastqc-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; font-size: 10px; }
.fastqc-legend span { display: inline-flex; align-items: center; gap: 4px; }
.fastqc-legend i { width: 8px; height: 8px; border-radius: 50%; }
.fastqc-table-wrap { max-height: 320px; overflow: auto; }
.fastqc-table-wrap table { width: 100%; border-collapse: collapse; font-size: 10px; font-variant-numeric: tabular-nums; }
.fastqc-table-wrap td { padding: 3px 5px; border-bottom: 1px solid #e2ddd3; white-space: nowrap; }
.fastqc-table-wrap tr.metadata td { position: sticky; top: 0; background: #e8e3d9; color: #46524d; font-weight: 700; }
.genbank-viewer { margin-top: 12px; }
.genbank-record-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.genbank-record-tabs button { padding: 5px 8px; border: 1px solid #c6c0b4; border-radius: 5px; background: #f4f0e8; color: inherit; cursor: pointer; }
.genbank-record-tabs button.selected { border-color: #2d7457; background: #d9e3dc; }
.genbank-record-tabs span { min-width: 0; overflow-wrap: anywhere; font-weight: 650; }
.genbank-record-comparison { margin: 0 0 10px; padding: 8px; border: 1px solid #d5cfc4; border-radius: 7px; background: #fffdf8; }
.genbank-record-comparison > label { display: grid; gap: 3px; max-width: 420px; margin: 8px 0; }
.genbank-record-comparison input { min-width: 0; padding: 5px 7px; }
.genbank-comparison-table { overflow: auto; max-height: 430px; }
.genbank-comparison-table table { width: 100%; border-collapse: collapse; font-size: 12px; }
.genbank-comparison-table th, .genbank-comparison-table td { padding: 4px 6px; border-top: 1px solid #ece7de; text-align: right; white-space: nowrap; }
.genbank-comparison-table th:first-child { position: sticky; left: 0; text-align: left; background: #fffdf8; }
.genbank-comparison-table tr.selected th, .genbank-comparison-table tr.selected td { background: #e4eee7; }
.genbank-comparison-table button { max-width: 280px; padding: 2px 4px; overflow-wrap: anywhere; white-space: normal; text-align: left; }
.genbank-comparison-pages { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.genbank-record { padding: 10px; border: 1px solid #d5cfc4; border-radius: 7px; background: #faf8f2; }
.genbank-record-heading { display: flex; justify-content: space-between; gap: 12px; }
.genbank-record-heading > div { min-width: 0; display: grid; gap: 3px; }
.genbank-viewport-controls { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.genbank-viewport-controls button { padding: 5px 8px; border: 1px solid #bdb7ac; border-radius: 5px; background: #fffdf8; color: inherit; cursor: pointer; }
.genbank-viewport-controls small { margin-left: auto; color: #59665f; font-variant-numeric: tabular-nums; }
.genbank-feature-search { margin-top: 7px; display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 8px; }
.genbank-feature-search input { min-width: 0; padding: 6px 8px; border: 1px solid #bdb7ac; border-radius: 5px; background: #fffdf8; color: inherit; }
.genbank-feature-search small { color: #59665f; }
.genbank-map { margin-top: 10px; overflow-x: auto; }
.genbank-map svg { display: block; width: 100%; min-width: 560px; max-height: 520px; overflow: visible; }
.genbank-coordinate-axis { display: flex; justify-content: space-between; color: #707970; font-size: 10px; font-variant-numeric: tabular-nums; }
.genbank-backbone { stroke: #8b948f; stroke-width: 2; vector-effect: non-scaling-stroke; }
.genbank-feature { cursor: pointer; }
.genbank-feature polygon, .genbank-feature rect { fill: #a7456a; stroke: #71304a; stroke-width: 1; vector-effect: non-scaling-stroke; }
.genbank-feature text { fill: #fffdf8; font-size: 9px; pointer-events: none; }
.genbank-feature.selected polygon, .genbank-feature.selected rect { fill: #2b7f70; stroke: #163f37; stroke-width: 2; }
.genbank-feature-table { margin-top: 10px; }
.genbank-feature-table > div { max-height: 300px; overflow: auto; border: 1px solid #d5cfc4; border-radius: 6px; }
.genbank-feature-table table { width: 100%; border-collapse: collapse; font-size: 10px; }
.genbank-feature-table th { position: sticky; top: 0; padding: 5px 6px; background: #e8e3d9; text-align: left; }
.genbank-feature-table td { max-width: 320px; padding: 4px 6px; overflow: hidden; border-bottom: 1px solid #e2ddd3; text-overflow: ellipsis; white-space: nowrap; }
.genbank-feature-table tbody tr { cursor: pointer; }
.genbank-feature-table tbody tr:hover, .genbank-feature-table tbody tr.selected { background: #dfe9e2; }
.genbank-sequence { margin-top: 10px; padding: 9px; border: 1px solid #d5cfc4; border-radius: 7px; background: #fffdf8; }
.genbank-sequence-heading { display: flex; justify-content: space-between; gap: 10px; }
.genbank-sequence pre { margin: 8px 0 0; overflow: auto; color: #26332e; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.genbank-translation { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e2ddd3; }
.genbank-translation-frames { margin-top: 9px; padding-top: 8px; border-top: 1px solid #e2ddd3; }
.genbank-translation-frames p { margin: 6px 0; color: #5e645f; font-size: 12px; }
.genbank-translation-frames table { width: 100%; border-collapse: collapse; }
.genbank-translation-frames th, .genbank-translation-frames td { padding: 3px 6px; border-top: 1px solid #ece7de; text-align: left; vertical-align: top; }
.genbank-translation-frames code { overflow-wrap: anywhere; font: 11px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.genbank-feature-details { margin-top: 10px; padding: 10px; border: 1px solid #92aa9d; border-radius: 7px; background: #edf3ef; }
.genbank-feature-details > div { display: grid; gap: 3px; }
.genbank-feature-details dl { grid-template-columns: minmax(90px, max-content) minmax(0, 1fr); }
.genbank-feature-details dd { overflow-wrap: anywhere; }
.genbank-raw { margin-top: 10px; }
.genbank-raw summary { color: #59665f; font-size: 12px; cursor: pointer; }
.point-cloud { width: 180px; height: 150px; margin: auto; background: radial-gradient(circle at 30% 40%, #477a73 0 4px, transparent 5px), radial-gradient(circle at 65% 55%, #b75543 0 4px, transparent 5px), radial-gradient(circle at 45% 70%, #d19b3b 0 4px, transparent 5px); background-size: 31px 29px, 37px 33px, 41px 35px; opacity: .7; }
dl { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
dt { color: #707970; } dd { margin: 0; font-variant-numeric: tabular-nums; }
.detail-field-list { max-height: 180px; overflow-y: auto; }
.field-list li { border-bottom: 1px solid #d5cfc4; }
.field-list button, .color-reset { width: 100%; padding: 8px 6px; border: 0; border-radius: 6px; background: transparent; color: inherit; text-align: left; }
.field-list button.feature-choice { display: grid; gap: 2px; }
.field-list button.feature-choice small { overflow: hidden; color: #69736d; text-overflow: ellipsis; white-space: nowrap; }
.field-list button:hover, .field-list button.selected, .color-reset:hover, .color-reset.selected { background: #d9ded2; }
.feature-annotation-browser { margin-top: 16px; padding: 12px 14px; border: 1px solid #cec8bd; border-radius: 10px; background: rgba(250, 248, 242, .94); }
.feature-annotation-browser summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; cursor: pointer; }
.feature-annotation-browser summary span { font-family: Georgia, serif; font-size: 18px; }
.feature-annotation-browser summary small, .feature-annotation-browser p { color: #68726c; font-size: 11px; }
.feature-annotation-browser p { margin: 8px 0; }
.feature-annotation-browser .annotation-column-note { color: #8a5b36; }
.feature-annotation-table-wrap { max-height: 420px; overflow: auto; border: 1px solid #d7d1c6; border-radius: 7px; background: #fffdf8; }
.feature-annotation-table-wrap table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; white-space: nowrap; }
.feature-annotation-table-wrap thead th { position: sticky; top: 0; z-index: 1; padding: 7px 8px; border-bottom: 1px solid #bfb8ac; background: #eeeae1; color: #435149; text-align: left; }
.feature-annotation-table-wrap tbody th, .feature-annotation-table-wrap tbody td { max-width: 260px; padding: 5px 8px; overflow: hidden; border-bottom: 1px solid #ece7de; text-align: left; text-overflow: ellipsis; }
.feature-annotation-table-wrap tbody th { position: sticky; left: 0; z-index: 0; min-width: 190px; background: #fffdf8; }
.feature-annotation-table-wrap tbody tr:hover td, .feature-annotation-table-wrap tbody tr:hover th, .feature-annotation-table-wrap tbody tr.selected td, .feature-annotation-table-wrap tbody tr.selected th { background: #e1ebe4; }
.feature-annotation-table-wrap button { width: 100%; display: grid; gap: 2px; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.feature-annotation-table-wrap button small { max-width: 220px; overflow: hidden; color: #737b76; font: 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; }
.feature-annotation-table-wrap td.numeric { text-align: right; font-variant-numeric: tabular-nums; }
.feature-annotation-table-wrap td.missing { color: #989d99; font-style: italic; }
.field-status { color: #707970; font-size: 12px; }
.empty-note { margin: -16px 0 20px; color: #707970; font-size: 11px; line-height: 1.4; }
.field-legend { display: grid; gap: 4px; margin: 12px 0 18px; padding: 10px; border: 1px solid #cbc5ba; border-radius: 8px; background: rgba(250, 248, 242, .65); }
.field-legend span, .field-legend small { color: #59665f; }
.amr-color-legend button { margin-top: 4px; }
.category-legend-search { width: 100%; margin-top: 6px; padding: 7px 8px; border: 1px solid #bdb7ad; border-radius: 6px; background: #fff; color: inherit; }
.category-legend-list { display: grid; gap: 2px; max-height: 240px; margin: 4px 0 0; padding: 0; overflow-y: auto; list-style: none; }
.category-legend-list li { min-height: 24px; }
.category-legend-list button, .category-missing-row { width: 100%; display: grid; grid-template-columns: 13px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 24px; padding: 2px 3px; border: 0; border-radius: 4px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.category-legend-list button:hover, .category-legend-list button.selected, .category-missing-row:hover, .category-missing-row.selected { background: #d9e3dc; }
.category-legend-list button:disabled, .category-missing-row:disabled { cursor: default; opacity: .55; }
.category-legend-list .category-label { overflow: hidden; color: inherit; text-overflow: ellipsis; white-space: nowrap; }
.category-swatch { width: 11px; height: 11px; border: 1px solid rgba(20, 30, 25, .25); border-radius: 50%; }
.category-legend-summary { margin-top: 2px; }
.category-missing-row { margin-top: 4px; padding-top: 4px; border-top: 1px solid #d7d1c7; }
.cell-finder { margin: 16px 0 12px; }
.cell-finder h3 { margin-bottom: 7px; }
.cell-finder > input { width: 100%; padding: 7px 8px; border: 1px solid #bdb7ad; border-radius: 6px; background: #fff; color: inherit; }
.cell-finder-status { margin: 5px 0; color: #707970; font-size: 11px; line-height: 1.35; }
.cell-finder-results { display: grid; gap: 2px; max-height: 210px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.cell-finder-results button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; width: 100%; padding: 6px 7px; border: 0; border-radius: 5px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.cell-finder-results button:hover, .cell-finder-results button.selected { background: #d9ded2; }
.cell-finder-results span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-finder-results small { color: #707970; }
.feature-histogram { display: flex; align-items: end; gap: 1px; height: 44px; padding-top: 4px; border-bottom: 1px solid #aaa397; }
.feature-histogram-bin { flex: 1; min-height: 1px; background: #267f75; border-radius: 1px 1px 0 0; }
.feature-scale { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.feature-scale select { min-width: 112px; padding: 4px; border: 1px solid #bdb7ac; border-radius: 5px; background: #fffdf8; color: inherit; }
.selection-summary { display: grid; gap: 4px; min-height: 38px; margin-bottom: 10px; color: #59665f; font-size: 12px; }
.selection-summary strong { color: #27352f; font-size: 13px; }
.selection-detail-list { max-height: 260px; margin: 5px 0; overflow-y: auto; border: 1px solid #d5cfc4; border-radius: 6px; background: #faf8f2; }
.selection-detail-list li { display: grid; gap: 2px; padding: 6px 7px; border-bottom: 1px solid #e2ddd3; }
.selection-detail-list li:last-child { border-bottom: 0; }
.selection-detail-list strong { overflow-wrap: anywhere; font-size: 11px; }
.selection-detail-list span, .selection-detail-list small { overflow-wrap: anywhere; font-size: 10px; }
.interaction-help { margin-bottom: 9px; color: #707970; font-size: 11px; line-height: 1.35; }
.selection-actions { display: flex; gap: 6px; margin-bottom: 18px; }
.selection-actions button { flex: 1; padding: 7px 9px; border: 1px solid #bdb7ac; border-radius: 6px; background: #f7f4ec; color: inherit; }
.selection-actions button:not(:disabled) { cursor: pointer; }
.selection-actions button:disabled { opacity: .48; }
.cache-note { color: #707970; font-size: 12px; line-height: 1.45; }
.cache-diagnostics { margin-top: 10px; color: #59665f; font-size: 11px; }
.cache-diagnostics summary { cursor: pointer; font-weight: 700; }
.cache-diagnostics button { margin: 7px 0; padding: 4px 7px; border: 1px solid #bdb7ac; border-radius: 5px; background: #f7f4ec; color: inherit; cursor: pointer; }
.cache-diagnostics dl { gap: 3px 8px; margin: 0; }
.message { max-width: 560px; margin: 14vh auto; padding: 30px; border: 1px solid #cdc7bb; border-radius: 12px; background: #faf8f2; }
.error { border-color: #b75543; }