:root {
    --ink: #071f41;
    --muted: #53657e;
    --soft: #eef7fb;
    --line: #d7e2ee;
    --teal: #087b7d;
    --teal-2: #12a79b;
    --blue: #1267c9;
    --purple: #6a3da4;
    --orange: #ee8a21;
    --shadow: 0 16px 42px rgba(8, 42, 78, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 72% 16%, rgba(18, 103, 201, 0.12), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f7fbff 45%, #eef9f7 100%);
}

body[data-page="features"] {
    max-width: 100vw;
    overflow-x: hidden;
}

a[href="/metabdb/download.html"] {
    display: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    min-height: 96px;
    padding: 18px 32px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 18px rgba(7, 31, 65, 0.04);
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}

.brand strong {
    display: block;
    color: var(--teal);
    font-size: 38px;
    line-height: 1;
}

.brand small {
    display: block;
    color: var(--ink);
    font-size: 15px;
    margin-top: 4px;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
    min-width: 0;
    white-space: nowrap;
}

.main-nav a {
    position: relative;
    padding: 10px 10px;
    color: #06183a;
    font-size: 15px;
    font-weight: 700;
}

.main-nav a.active {
    color: var(--teal);
}

.main-nav a.active::after {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 2px;
    height: 3px;
    content: "";
    background: var(--teal);
    border-radius: 999px;
}

.language-toggle {
    display: inline-flex;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 2px;
    border: 1px solid #c9d7e6;
    border-radius: 999px;
    background: #ffffff;
    padding: 2px;
}

.language-toggle button {
    min-width: 42px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #53657e;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.language-toggle button.active {
    color: #ffffff;
    background: var(--teal);
}

.top-search {
    display: flex;
    align-items: center;
    min-width: 0;
    border: 1px solid #cbd6e3;
    border-radius: 6px;
    background: #ffffff;
    overflow: hidden;
}

.top-search input {
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 0;
    padding: 0 12px;
    color: var(--ink);
    font-size: 14px;
    outline: 0;
}

.top-search button {
    width: 48px;
    height: 44px;
    border: 0;
    color: #8b9ab2;
    background: #ffffff;
    font-size: 24px;
    cursor: pointer;
}

main {
    max-width: 1480px;
    margin: 0 auto;
    padding: 40px 32px 30px;
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(440px, 700px);
    align-items: center;
    gap: 30px;
    min-height: 380px;
}

.hero-copy h1 {
    margin: 0 0 4px;
    font-size: 54px;
    line-height: 1.05;
    letter-spacing: 0;
}

.hero-copy h2 {
    margin: 0 0 20px;
    color: var(--ink);
    font-size: 25px;
    line-height: 1.2;
}

.hero-copy p {
    max-width: 720px;
    margin: 0;
    color: #14294a;
    font-size: 19px;
    line-height: 1.55;
}

.hero-search {
    display: flex;
    max-width: 880px;
    margin-top: 30px;
    border: 1px solid #c6d2df;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(10, 75, 120, 0.06);
    overflow: hidden;
}

.hero-search select {
    flex: 0 0 178px;
    min-width: 0;
    height: 54px;
    border: 0;
    border-right: 1px solid #d9e3ee;
    background: #f8fbfe;
    padding: 0 14px;
    color: #071f41;
    font-size: 15px;
    font-weight: 800;
    outline: 0;
}

.hero-search input {
    flex: 1;
    min-width: 0;
    height: 54px;
    border: 0;
    padding: 0 20px;
    color: var(--ink);
    font-size: 18px;
    outline: 0;
}

.hero-search button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 132px;
    border: 0;
    color: #ffffff;
    background: linear-gradient(135deg, var(--teal), #009e91);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
}

.hero-search button span {
    font-size: 28px;
    line-height: 1;
}

.examples {
    display: flex;
    align-items: flex-start;
    gap: 10px 18px;
    flex-wrap: wrap;
    margin-top: 17px;
    margin-bottom: 22px;
    color: var(--muted);
    font-size: 15px;
}

.examples-label {
    padding-top: 2px;
}

.example-group {
    display: inline-flex;
    align-items: baseline;
    gap: 7px 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.example-group b {
    color: var(--ink);
    font-size: 13px;
}

.examples a {
    color: #0056bc;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.hero-visual {
    position: relative;
    min-height: 390px;
}

.hero-art {
    position: absolute;
    inset: -34px -24px -22px -20px;
    background-image: url("/metabdb/metabdb_png_icons/image.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.98;
}

.visual-grid {
    position: absolute;
    inset: 0 0 70px 0;
}

.visual-icon {
    position: absolute;
    object-fit: contain;
    opacity: 0.68;
    filter: drop-shadow(0 12px 18px rgba(20, 90, 150, 0.15));
}

.molecule-a {
    left: 6%;
    top: 24%;
    width: 112px;
}

.tube {
    left: 37%;
    top: 20%;
    width: 78px;
}

.human {
    left: 58%;
    top: 4%;
    width: 138px;
}

.molecule-b {
    right: 1%;
    top: 20%;
    width: 136px;
}

.signal-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    height: 78px;
    opacity: 0.55;
    background:
        linear-gradient(90deg, transparent 0 4%, rgba(102, 174, 232, 0.3) 4% 4.4%, transparent 4.4% 12%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(108, 176, 232, 0.28) 23px 25px, transparent 26px 34px),
        linear-gradient(180deg, transparent 0 68%, rgba(108, 176, 232, 0.8) 69% 72%, transparent 73%);
    clip-path: polygon(0 78%, 10% 78%, 12% 45%, 13% 78%, 23% 78%, 24% 30%, 25% 78%, 41% 78%, 42% 10%, 43% 78%, 55% 78%, 56% 58%, 57% 78%, 78% 78%, 79% 48%, 80% 78%, 89% 78%, 90% 25%, 91% 78%, 100% 78%, 100% 100%, 0 100%);
}

.status-band {
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(260px, 1.1fr);
    gap: 12px 28px;
    margin: 26px 0 24px;
    padding: 18px 22px;
    border: 1px solid #d7e4ee;
    border-left: 5px solid var(--orange);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow);
}

.status-band .eyebrow {
    margin: 0 0 5px;
    color: var(--orange);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.status-band > * {
    min-width: 0;
}

.status-band h2 {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

.status-band p:last-child {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.status-items {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.status-chip.pending {
    color: #8a4d00;
    background: #fff2dc;
    border: 1px solid #ffd79f;
}

.status-chip.ready {
    color: #08756f;
    background: #e3f8f4;
    border: 1px solid #98d9d2;
}

.metrics-panel {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin: 0 0 24px;
    padding: 24px 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 0 20px;
    border-right: 1px solid var(--line);
}

.metric-card:last-child {
    border-right: 0;
}

.metric-card img {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.metric-card strong {
    display: block;
    color: var(--teal);
    font-size: 25px;
    line-height: 1.1;
}

.metric-card:nth-child(3) strong,
.metric-card:nth-child(6) strong {
    color: var(--orange);
}

.metric-card:nth-child(4) strong {
    color: var(--purple);
}

.metric-card:nth-child(5) strong {
    color: var(--blue);
}

.metric-card span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 800;
}

.metric-card small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 13px;
}

.home-evidence-chart {
    margin: 0 0 28px;
    padding: 22px 26px 20px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}

.home-chart-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 18px;
}

.home-chart-header h2 {
    margin: 0;
    color: #071f41;
    font-size: 24px;
}

.home-chart-header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid #bdd7df;
    border-radius: 6px;
    color: var(--teal);
    background: #ffffff;
    font-weight: 800;
    white-space: nowrap;
}

.home-chart-body {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.72fr);
    gap: 28px;
    align-items: stretch;
}

.home-stacked-chart {
    min-width: 0;
    padding-right: 28px;
    border-right: 1px solid #dce8ef;
}

.home-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    margin-bottom: 18px;
    color: #314765;
    font-size: 13px;
    font-weight: 800;
}

.home-chart-legend span,
.home-donut-card li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-chart-legend i,
.home-donut-card i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.tier-primary {
    background: #4faf3e;
}

.tier-secondary {
    background: #f4a62a;
}

.tier-peak {
    background: #ed5554;
}

.tier-low {
    background: #7585bd;
}

.tier-open {
    background: #dce4ee;
}

.home-chart-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.42fr) minmax(180px, 1fr) 72px;
    align-items: center;
    gap: 16px;
    margin: 12px 0;
}

.home-chart-row strong {
    color: #071f41;
    font-size: 14px;
    line-height: 1.25;
}

.home-chart-row em {
    color: #071f41;
    font-size: 13px;
    font-style: normal;
    font-weight: 800;
    text-align: right;
}

.home-stack-bar {
    display: flex;
    height: 15px;
    min-width: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #eef4f8;
}

.home-stack-bar span {
    display: block;
    height: 100%;
}

.home-donut-card {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    min-width: 0;
}

.home-donut-card h3 {
    grid-column: 1 / -1;
    margin: 0 0 -4px;
    color: #071f41;
    font-size: 20px;
}

.home-donut {
    position: relative;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background:
        conic-gradient(#4faf3e 0 16.5%, #f4a62a 16.5% 28.9%, #ed5554 28.9% 74.9%, #7585bd 74.9% 81.2%, #dce4ee 81.2% 100%);
}

.home-donut::after {
    position: absolute;
    inset: 43px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
}

.home-donut span {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-content: center;
    text-align: center;
}

.home-donut strong,
.home-donut small {
    display: block;
}

.home-donut strong {
    color: #071f41;
    font-size: 20px;
    line-height: 1.1;
}

.home-donut small {
    margin-top: 3px;
    color: #536781;
    font-size: 12px;
    font-weight: 800;
}

.home-donut-card ul {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-donut-card li {
    justify-content: space-between;
    gap: 10px;
    color: #314765;
    font-size: 13px;
    font-weight: 800;
}

.home-donut-card li span {
    min-width: 0;
}

.home-donut-card li strong {
    color: #071f41;
    white-space: nowrap;
}

.home-chart-note {
    margin: 16px 0 0;
    color: #536781;
    font-size: 13px;
    line-height: 1.45;
}

.home-feature-preview {
    margin: 0 0 28px;
    padding: 22px 26px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow);
}

.home-feature-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.home-feature-card {
    display: grid;
    grid-template-columns: minmax(220px, 0.86fr) minmax(0, 1fr);
    gap: 20px;
    min-width: 0;
    padding: 18px;
    border: 1px solid #d6e5ef;
    border-radius: 8px;
    background: linear-gradient(135deg, #fbfeff 0%, #f3fbfb 100%);
}

.home-feature-copy {
    align-self: center;
    min-width: 0;
}

.home-feature-copy h3 {
    margin: 0 0 8px;
    color: var(--teal);
    font-size: 22px;
}

.home-feature-copy p {
    margin: 0;
    color: #314765;
    font-size: 15px;
    line-height: 1.45;
}

.home-feature-copy dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
}

.home-feature-copy dl div {
    padding: 10px 12px;
    border: 1px solid #d5e7ee;
    border-radius: 7px;
    background: #ffffff;
}

.home-feature-copy dt {
    color: #60738e;
    font-size: 12px;
    font-weight: 800;
}

.home-feature-copy dd {
    margin: 2px 0 0;
    color: var(--teal);
    font-size: 21px;
    font-weight: 900;
}

.home-mini-network {
    position: relative;
    min-height: 190px;
    overflow: hidden;
    border: 1px solid #d8e8f0;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 50%, rgba(23, 166, 155, 0.14), transparent 34%),
        linear-gradient(135deg, #f8fcff 0%, #edf9f8 100%);
}

.home-mini-network .home-mini-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    color: #071f41;
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(19, 67, 107, 0.13);
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.home-mini-network .metabolite {
    left: calc(50% - 42px);
    top: calc(50% - 42px);
    width: 84px;
    height: 84px;
    color: #ffffff;
    background: var(--teal);
}

.home-mini-network .disease {
    left: 18px;
    top: 24px;
    background: #fff4e3;
}

.home-mini-network .gene {
    right: 20px;
    top: 22px;
    background: #edf4ff;
}

.home-mini-network .variant {
    left: 20px;
    bottom: 20px;
    background: #f2edff;
}

.home-mini-network .study {
    right: 22px;
    bottom: 20px;
    background: #edf8f2;
}

.home-mini-network .edge {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    width: 112px;
    height: 2px;
    border-radius: 2px;
    background: rgba(20, 136, 128, 0.38);
    transform-origin: left center;
}

.home-mini-network .edge-1 {
    transform: rotate(214deg);
}

.home-mini-network .edge-2 {
    transform: rotate(325deg);
}

.home-mini-network .edge-3 {
    transform: rotate(145deg);
}

.home-mini-network .edge-4 {
    transform: rotate(35deg);
}

.home-mini-modules {
    display: grid;
    align-content: center;
    gap: 13px;
    min-height: 190px;
    padding: 22px;
    border: 1px solid #d8e8f0;
    border-radius: 8px;
    background: linear-gradient(135deg, #f8fcff 0%, #edf9f8 100%);
}

.home-mini-modules div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.home-mini-modules strong {
    color: #071f41;
    font-size: 13px;
}

.home-mini-modules span {
    display: block;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--teal), #67bdb6);
    box-shadow: 0 6px 14px rgba(20, 136, 128, 0.14);
}

.quick-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 292px;
    padding: 28px 24px 24px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(7, 31, 65, 0.05);
    text-align: center;
}

.action-card img {
    width: 78px;
    height: 78px;
    object-fit: contain;
    margin-bottom: 14px;
}

.action-card h3 {
    margin: 0 0 10px;
    font-size: 23px;
}

.action-card p {
    min-height: 72px;
    margin: 0 0 22px;
    color: #102446;
    font-size: 15px;
    line-height: 1.45;
}

.action-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 150px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid #78bdc1;
    border-radius: 5px;
    color: var(--teal);
    font-size: 15px;
    font-weight: 800;
    background: #ffffff;
}

.action-card a.purple {
    color: var(--purple);
    border-color: #b29ad1;
}

.site-footer {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    max-width: 1480px;
    margin: 0 auto;
    padding: 30px 32px 34px;
    color: #0c3358;
}

.site-footer .update-note {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--teal);
}

.site-footer img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.site-footer nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-footer nav a + a {
    position: relative;
}

.site-footer nav a + a::before {
    position: absolute;
    left: -14px;
    color: #6f7f96;
    content: "|";
}

.site-footer > span:last-child {
    justify-self: end;
}

.site-footer nav .footer-visit-inline {
    position: relative;
    color: var(--teal);
    font-weight: 800;
    white-space: nowrap;
}

.site-footer nav .footer-visit-inline::before {
    position: absolute;
    left: -14px;
    color: #6f7f96;
    content: "|";
}

.compact-header {
    min-height: 76px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.compact-header .brand img {
    width: 48px;
    height: 48px;
}

.compact-header .brand strong {
    font-size: 30px;
}

.compact-header .brand small {
    font-size: 12px;
}

.results-main {
    max-width: 1540px;
    padding-top: 14px;
}

body[data-page="search-results"] .results-main {
    max-width: none;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #0056bc;
    font-size: 13px;
}

.breadcrumb span,
.breadcrumb strong {
    color: var(--muted);
}

.results-shell {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--shadow);
    padding: 16px;
}

body[data-page="search-results"] .results-shell {
    width: 100%;
}

.search-landing-panel {
    display: grid;
    min-height: 0;
    margin-bottom: 10px;
    border: 1px solid #cfe3e4;
    border-radius: 8px;
    background: #f7fbfb;
    padding: 16px 20px;
    align-items: center;
}

.search-landing-panel[hidden],
.search-examples-panel[hidden],
#search-results-view[hidden] {
    display: none !important;
}

.search-landing-copy {
    max-width: 860px;
}

.search-landing-copy h1 {
    margin: 0 0 4px;
    color: #071f41;
    font-size: 24px;
    line-height: 1.2;
}

.search-landing-copy p:last-child {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
}

.search-entry-bar {
    margin-top: 0;
}

.search-examples-panel {
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
}

.search-example-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.search-example-heading h2 {
    margin: 0;
    color: var(--teal);
    font-size: 18px;
}

.search-example-heading p {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.search-example-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.search-example-card {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 12px;
    border: 1px solid #cdddea;
    border-radius: 8px;
    background: #fbfdff;
    padding: 12px 14px;
    color: #071f41;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.search-example-card:hover,
.search-example-card:focus {
    border-color: var(--teal);
    box-shadow: 0 10px 24px rgba(7, 138, 135, 0.12);
    transform: translateY(-1px);
    outline: none;
}

.search-example-card span {
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    border-radius: 999px;
    background: #eaf7f5;
    padding: 5px 10px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.search-example-card strong {
    overflow-wrap: anywhere;
    font-size: 18px;
    line-height: 1.15;
}

.literature-spotlight-block {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.literature-spotlight-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}

.literature-spotlight-heading h3,
.literature-spotlight-heading p {
    margin: 0;
}

.literature-spotlight-heading h3 {
    color: #071f41;
    font-size: 16px;
}

.literature-spotlight-heading p {
    color: var(--muted);
    font-size: 13px;
}

.literature-spotlight-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 18px;
}

.literature-spotlight-list a {
    display: grid;
    grid-template-columns: minmax(110px, 0.7fr) minmax(0, 1.3fr);
    gap: 10px;
    align-items: baseline;
    min-width: 0;
    border-bottom: 1px solid #e6eff4;
    padding: 8px 2px;
    color: #071f41;
    text-decoration: none;
}

.literature-spotlight-list a:hover,
.literature-spotlight-list a:focus {
    color: var(--teal);
    outline: none;
}

.literature-spotlight-list strong,
.literature-spotlight-list span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.literature-spotlight-list strong {
    font-size: 14px;
}

.literature-spotlight-list span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.results-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.results-header h1 {
    margin: 0 0 6px;
    font-size: 26px;
}

.results-header p {
    margin: 0;
    color: var(--muted);
}

.results-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.results-actions button,
.results-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border: 1px solid #cdd8e5;
    border-radius: 5px;
    color: #071f41;
    background: #ffffff;
    font-weight: 700;
    cursor: pointer;
}

.typed-search-bar {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(260px, 1fr) auto;
    gap: 10px;
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbfe;
    padding: 12px;
}

.typed-search-bar label {
    display: grid;
    gap: 5px;
    color: #314466;
    font-size: 12px;
    font-weight: 900;
}

.typed-search-bar input,
.typed-search-bar select {
    width: 100%;
    height: 40px;
    border: 1px solid #cbd9e8;
    border-radius: 6px;
    background: #ffffff;
    padding: 0 12px;
    color: #071f41;
    font: inherit;
}

.typed-search-bar button {
    align-self: end;
    height: 40px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--teal), #009e91);
    padding: 0 22px;
    color: #ffffff;
    font-weight: 900;
    cursor: pointer;
}

.result-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 14px 0 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
}

.result-metrics div {
    min-width: 0;
    padding: 16px 12px;
    border-right: 1px solid var(--line);
    text-align: center;
}

.result-metrics div:last-child {
    border-right: 0;
}

.result-metrics strong {
    display: block;
    color: var(--teal);
    font-size: 27px;
    line-height: 1.15;
}

.result-metrics span {
    display: block;
    margin-top: 5px;
    color: #0b2144;
    font-size: 13px;
}

.results-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.filter-panel {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    padding: 14px;
}

.filter-panel {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 112px);
    overflow: auto;
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.panel-title strong {
    color: var(--teal);
    font-size: 13px;
}

.panel-title button {
    border: 0;
    color: #0056bc;
    background: transparent;
    font-size: 12px;
    cursor: pointer;
}

.filter-panel label,
.filter-panel fieldset {
    display: block;
    margin: 0 0 12px;
    color: #071f41;
    font-size: 13px;
    font-weight: 800;
}

.filter-panel input[type="search"],
.filter-panel select {
    width: 100%;
    height: 32px;
    margin-top: 7px;
    border: 1px solid #cbd8e6;
    border-radius: 4px;
    padding: 0 9px;
    color: var(--muted);
    background: #ffffff;
}

.filter-panel fieldset {
    border: 0;
    padding: 0;
}

.filter-panel legend {
    margin-bottom: 8px;
    font-weight: 800;
}

.filter-panel fieldset label {
    margin-bottom: 7px;
    font-weight: 400;
}

.filter-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.filter-buttons button {
    height: 34px;
    border: 1px solid #ccd8e6;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
}

.filter-buttons button:first-child {
    color: #ffffff;
    border-color: var(--teal);
    background: var(--teal);
    font-weight: 800;
}

.results-content {
    min-width: 0;
}

.table-section {
    grid-column: 2;
    min-width: 0;
    margin-top: 2px;
}

.tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 14px;
}

.tabs button {
    position: relative;
    height: 38px;
    border: 0;
    padding: 0 14px;
    color: #314466;
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.tabs button.active {
    color: var(--teal);
}

.tabs button.active::after {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    content: "";
    background: var(--teal);
}

.tabs button.disabled,
.tabs button:disabled {
    color: #7e8da5;
    cursor: default;
    opacity: 0.55;
}

.chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.9fr) minmax(0, 1.15fr);
    gap: 16px;
    margin-bottom: 16px;
}

.chart-card {
    min-height: 338px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #ffffff;
    padding: 18px;
}

.chart-card h2 {
    margin: 0 0 14px;
    font-size: 17px;
}

.chart-card h2 span {
    color: var(--muted);
    font-weight: 400;
}

.chart-host {
    width: 100%;
    min-height: 285px;
}

.chart-host svg {
    display: block;
    width: 100%;
    height: auto;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 8px;
    color: #314466;
    font-size: 13px;
}

.table-toolbar select {
    height: 30px;
    border: 1px solid #cbd8e6;
    border-radius: 4px;
}

.result-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.result-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1440px;
    background: #ffffff;
}

.result-table th,
.result-table td {
    border-bottom: 1px solid #e4ebf2;
    padding: 8px 10px;
    color: #071f41;
    font-size: 13px;
    text-align: left;
    white-space: nowrap;
}

.result-table th {
    background: #f8fbfe;
    font-weight: 800;
}

.result-table td a {
    color: #0056bc;
    font-weight: 800;
}

.up {
    color: #df3851;
    font-size: 18px;
    font-weight: 900;
}

.down {
    color: var(--teal);
    font-size: 18px;
    font-weight: 900;
}

.mini-plot {
    color: #1267c9;
    font-weight: 900;
}

.table-note {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-top: 12px;
    color: #3f5572;
    font-size: 12px;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin: 18px 0 10px;
}

.section-heading h2 {
    margin: 0;
    color: #071f41;
    font-size: 20px;
}

.section-heading p {
    max-width: 680px;
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.search-workspace {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
    align-items: start;
}

.candidate-section {
    position: sticky;
    top: 12px;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
}

.selected-result-view {
    min-width: 0;
}

.candidate-section .section-heading {
    display: block;
    margin-top: 0;
}

.candidate-section .section-heading h2 {
    margin-bottom: 6px;
    font-size: 18px;
}

.candidate-section .section-heading p {
    font-size: 12px;
}

.candidate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.selection-explainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.selection-explainer > div {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #f9fcff;
    padding: 12px 14px;
}

.selection-explainer strong {
    display: block;
    margin-top: 4px;
    color: #071f41;
    font-size: 16px;
}

.selection-explainer p {
    margin: 4px 0 0;
    color: #44546a;
    font-size: 13px;
    line-height: 1.45;
}

.mini-label {
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.evidence-badges {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    gap: 6px;
}

.evidence-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border: 1px solid #cfe0ee;
    border-radius: 999px;
    background: #ffffff;
    padding: 4px 9px;
    color: #071f41;
    font-size: 12px;
    font-weight: 800;
}

.candidate-card,
.entity-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    padding: 14px;
}

.candidate-card h3,
.entity-card h2 {
    margin: 0 0 12px;
    color: var(--teal);
    font-size: 16px;
}

.candidate-card {
    padding: 12px;
}

.candidate-list {
    display: grid;
    gap: 8px;
}

.candidate-group-title {
    margin: 10px 0 6px;
    color: #586b86;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.candidate-group-title:first-child {
    margin-top: 0;
}

.candidate-item {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 2px 10px;
    width: 100%;
    min-height: 58px;
    border: 1px solid #d8e4ef;
    border-radius: 6px;
    background: #ffffff;
    padding: 9px 10px;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.type-hidden {
    display: none !important;
}

.candidate-item.active {
    border-color: rgba(0, 128, 123, 0.42);
    background: #f2fbf9;
}

.candidate-item:hover,
.candidate-item:focus-visible {
    border-color: rgba(0, 128, 123, 0.62);
    box-shadow: 0 8px 18px rgba(5, 43, 79, 0.08);
    outline: 0;
    transform: translateY(-1px);
}

.candidate-kind {
    grid-row: 1 / span 2;
    align-self: center;
    color: var(--teal);
    font-size: 12px;
    font-weight: 800;
}

.candidate-item strong {
    overflow: hidden;
    color: #071f41;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.candidate-item small {
    overflow: hidden;
    color: var(--muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-summary {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    margin-top: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.entity-name-block {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px 20px;
    background: linear-gradient(90deg, #f0fbf9, #ffffff);
}

.entity-name-block > div {
    min-width: 0;
    max-width: 100%;
}

.entity-name-block img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

.entity-name-block h2 {
    margin: 0 0 6px;
    color: var(--teal);
    font-size: 25px;
    line-height: 1.16;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.entity-name-block p {
    margin: 0;
    color: #314466;
    font-size: 13px;
    line-height: 1.35;
}

.entity-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.entity-metrics div {
    min-width: 0;
    padding: 18px 12px;
    border-left: 1px solid var(--line);
    text-align: center;
}

.entity-metrics strong {
    display: block;
    color: var(--teal);
    font-size: 24px;
    line-height: 1.15;
}

.entity-metrics span {
    display: block;
    margin-top: 6px;
    color: #071f41;
    font-size: 12px;
    font-weight: 700;
}

.info-dot {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border: 1px solid #b8c8db;
    border-radius: 50%;
    background: #ffffff;
    color: #44546a;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

.scope-note {
    margin: 8px 0 0;
    border: 1px solid #d8e8f3;
    border-radius: 7px;
    background: #f7fbfd;
    padding: 10px 12px;
    color: #314466;
    font-size: 13px;
    line-height: 1.45;
}

.entity-type-action-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 10px;
    border: 1px solid #cfe3ef;
    border-left: 4px solid var(--teal);
    border-radius: 8px;
    background: linear-gradient(90deg, #f4fbfa 0%, #ffffff 58%);
    padding: 14px 16px;
}

.entity-type-action-card[hidden] {
    display: none;
}

.entity-type-action-card h2 {
    margin: 3px 0 4px;
    color: #071f41;
    font-size: 22px;
    line-height: 1.15;
}

.entity-type-action-card p:not(.eyebrow) {
    margin: 0;
    color: #53657e;
    font-size: 13px;
    line-height: 1.45;
}

.entity-type-action-card .button-link {
    flex: 0 0 auto;
    border: 1px solid #8dc8d0;
    border-radius: 7px;
    background: #ffffff;
    padding: 10px 14px;
    color: var(--teal);
    font-weight: 900;
    text-decoration: none;
}

.entity-type-action-card .variant-external-link {
    border-color: #bda7ee;
    color: #5a3dbc;
}

.entity-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr 0.82fr;
    gap: 12px;
    margin-top: 12px;
}

.compact-chart {
    min-height: 220px;
}

.statistics-panel .entity-card {
    width: 100%;
}

.statistics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 0;
    background: transparent;
    padding: 2px 4px 4px;
}

.statistics-toolbar h2 {
    margin: 0;
    color: #071f41;
    font-size: 18px;
    line-height: 1.25;
}

.statistics-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.statistics-controls label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #314466;
    font-size: 12px;
    font-weight: 900;
}

.statistics-controls select {
    min-height: 34px;
    border: 1px solid #cbd9e8;
    border-radius: 6px;
    background: #ffffff;
    padding: 6px 28px 6px 10px;
    color: #071f41;
    font: inherit;
}

.stat-domain-card {
    grid-column: span 4;
}

.stat-domain-pvalue-card {
    grid-column: span 8;
}

.stat-third-card {
    grid-column: span 4;
}

.stat-tier-card {
    grid-column: span 3;
}

.stat-types-card {
    grid-column: span 6;
}

.stat-strongest-card {
    grid-column: span 3;
}

.stat-table-card {
    grid-column: 1 / -1;
}

.statistic-focus-card .chart-host,
.stat-domain-pvalue-card .chart-host {
    min-height: 330px;
}

.domain-chart-host svg,
.domain-pvalue-host svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}

.domain-pvalue-host {
    overflow-x: auto;
}

.domain-donut-layout {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(220px, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 270px;
}

.domain-donut-plot svg {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
}

.domain-donut-legend {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.domain-donut-legend li {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 58px;
    gap: 10px;
    align-items: start;
    min-height: 22px;
}

.domain-donut-legend i {
    width: 11px;
    height: 11px;
    border-radius: 999px;
    margin-top: 3px;
}

.domain-donut-legend span {
    max-width: 260px;
    color: #071f41;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    word-break: normal;
}

.domain-donut-legend b {
    color: #071f41;
    font-size: 12.5px;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.snp-signal-layout {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(210px, 0.28fr);
    gap: 18px;
    align-items: stretch;
    min-width: 760px;
}

.snp-manhattan-plot {
    min-height: 310px;
}

.snp-top-gene-panel {
    display: grid;
    align-content: start;
    gap: 10px;
    border-left: 1px solid #dce8f2;
    padding-left: 18px;
}

.snp-top-gene-panel h3 {
    margin: 0 0 4px;
    color: #071f41;
    font-size: 14px;
    line-height: 1.25;
}

.snp-top-gene-row {
    display: grid;
    grid-template-columns: minmax(70px, 0.42fr) minmax(80px, 1fr) 42px;
    gap: 8px;
    align-items: center;
}

.snp-top-gene-row span {
    color: #071f41;
    font-size: 12.5px;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snp-top-gene-row i {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: #e8f0f6;
    overflow: hidden;
}

.snp-top-gene-row b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #0f8a83;
}

.snp-top-gene-row strong {
    color: #071f41;
    font-size: 12px;
    font-weight: 900;
    text-align: right;
}

.snp-signal-note {
    margin: 8px 0 0;
    color: #53657e;
    font-size: 12px;
    line-height: 1.45;
}

.coloc-stat-layout {
    display: grid;
    gap: 16px;
    min-height: 310px;
}

.coloc-stat-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.coloc-stat-kpis div {
    border: 1px solid #dce8f2;
    border-radius: 7px;
    background: #f7fbfd;
    padding: 12px;
}

.coloc-stat-kpis span {
    display: block;
    color: #53657e;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
}

.coloc-stat-kpis strong {
    display: block;
    margin-top: 6px;
    color: var(--teal);
    font-size: 22px;
    line-height: 1;
}

.coloc-stat-table {
    overflow-x: auto;
}

.coloc-stat-table table {
    width: 100%;
    border-collapse: collapse;
    min-width: 680px;
}

.coloc-stat-table th,
.coloc-stat-table td {
    border-bottom: 1px solid #e1ebf3;
    padding: 10px 8px;
    color: #071f41;
    font-size: 12.5px;
    text-align: left;
}

.coloc-stat-table th {
    color: #314466;
    font-weight: 900;
}

.coloc-stat-empty {
    display: grid;
    gap: 12px;
    border: 1px solid #cbe7e2;
    border-radius: 7px;
    background: #f1fbf8;
    padding: 16px;
}

.coloc-stat-empty h3 {
    margin: 0;
    color: var(--teal);
    font-size: 16px;
}

.coloc-stat-empty p {
    max-width: 780px;
    margin: 0;
    color: #314466;
    line-height: 1.55;
}

.coloc-stat-support {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.coloc-stat-support span {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    border: 1px solid #dce8f2;
    border-radius: 999px;
    background: #ffffff;
    padding: 7px 10px;
    color: #53657e;
    font-size: 12px;
    font-weight: 800;
}

.coloc-stat-support b {
    color: #071f41;
    font-size: 13px;
}

.coloc-stat-link {
    justify-self: start;
}

.gene-phenotype-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.15fr);
    gap: 14px;
    align-items: stretch;
    min-width: 680px;
    min-height: 310px;
}

.gene-phenotype-card {
    display: grid;
    align-content: start;
    gap: 12px;
    border: 1px solid #dce8f2;
    border-radius: 7px;
    background: #fbfdff;
    padding: 14px;
}

.gene-phenotype-card h3 {
    margin: 0;
    color: var(--teal);
    font-size: 15px;
    line-height: 1.25;
}

.gene-phenotype-list {
    display: grid;
    gap: 10px;
}

.gene-phenotype-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(64px, 0.46fr) 54px;
    gap: 9px;
    align-items: center;
}

.gene-phenotype-row strong {
    display: block;
    color: #071f41;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.25;
}

.gene-phenotype-row span {
    display: block;
    margin-top: 2px;
    color: #53657e;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gene-phenotype-row i {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: #e8f0f6;
    overflow: hidden;
}

.gene-phenotype-row b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
}

.gene-phenotype-row em {
    color: #071f41;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
}

.gene-category-mini-table {
    width: 100%;
    border-collapse: collapse;
}

.gene-category-mini-table th,
.gene-category-mini-table td {
    border-bottom: 1px solid #e1ebf3;
    padding: 8px 6px;
    color: #071f41;
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
    vertical-align: top;
}

.gene-category-mini-table th {
    color: #314466;
    font-weight: 900;
}

.gene-category-mini-table td:nth-child(2) {
    max-width: 150px;
}

.statistics-panel .evidence-tiering-card {
    gap: 6px;
}

.statistics-panel .evidence-tier-summary {
    grid-template-columns: 1fr;
}

.statistics-panel .evidence-tier-row {
    grid-template-columns: 74px minmax(80px, 1fr) 50px;
    gap: 7px;
    min-height: 42px;
    padding: 8px 10px;
}

.statistics-panel .evidence-tier-row small {
    grid-column: 1 / -1;
}

.evidence-tiering-card {
    display: grid;
    gap: 14px;
}

.evidence-tier-summary {
    display: grid;
    grid-template-columns: minmax(160px, 0.28fr) minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
}

.evidence-tier-summary div {
    border: 1px solid #d4e4ef;
    border-radius: 7px;
    background: #f3fbfa;
    padding: 14px;
}

.evidence-tier-summary span {
    display: block;
    margin-bottom: 6px;
    color: #53657e;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.evidence-tier-summary strong {
    display: block;
    color: var(--teal);
    font-size: 28px;
    line-height: 1.1;
}

.evidence-tier-summary p {
    margin: 0;
    border: 1px solid #e0e9f2;
    border-radius: 7px;
    background: #ffffff;
    padding: 14px;
    color: #314466;
    line-height: 1.45;
}

.evidence-tier-bars {
    display: grid;
    gap: 9px;
}

.evidence-tier-bars.compact {
    gap: 8px;
}

.evidence-tier-row {
    display: grid;
    grid-template-columns: 150px minmax(180px, 1fr) 92px minmax(260px, 0.9fr);
    gap: 12px;
    align-items: center;
    border: 1px solid #edf2f6;
    border-radius: 7px;
    background: #fbfdff;
    padding: 10px;
}

.evidence-tier-row.active {
    border-color: #9bd2d0;
    background: #f0fbf8;
}

.evidence-tier-row strong,
.evidence-tier-row b {
    color: #071f41;
    font-weight: 900;
}

.evidence-tier-row span,
.evidence-tier-row small {
    color: #64768d;
    font-size: 12px;
}

.evidence-tier-row div:first-child {
    display: grid;
    gap: 2px;
}

.evidence-tier-track {
    height: 12px;
    border-radius: 999px;
    background: #e9f1f6;
    overflow: hidden;
}

.evidence-tier-track i {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
}

.evidence-tier-note {
    margin: 10px 2px 0;
    color: #5f728a;
    font-size: 12px;
    line-height: 1.45;
}

.evidence-badges.compact {
    margin-top: 0;
}

.most-significant-card {
    display: grid;
    gap: 9px;
    color: #071f41;
    font-size: 13px;
}

.most-significant-card strong {
    color: var(--teal);
    font-size: 18px;
}

.most-significant-card dl {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 6px 10px;
    margin: 0;
}

.most-significant-card dt {
    color: #586b86;
    font-weight: 800;
}

.most-significant-card dd {
    margin: 0;
}

.type-results {
    margin-top: 22px;
}

.result-filter-bar {
    display: grid;
    grid-template-columns: repeat(8, minmax(105px, 1fr)) auto auto;
    gap: 8px;
    border: 1px solid var(--line);
    border-top: 0;
    background: #ffffff;
    padding: 10px 12px;
}

.result-filter-bar label {
    display: grid;
    gap: 4px;
    color: #314466;
    font-size: 11px;
    font-weight: 800;
}

.result-filter-bar input,
.result-filter-bar select {
    width: 100%;
    min-height: 32px;
    border: 1px solid #cbd9e8;
    border-radius: 5px;
    background: #ffffff;
    padding: 5px 8px;
    color: #071f41;
    font: inherit;
}

.result-filter-bar button {
    align-self: end;
    min-height: 32px;
    border: 1px solid #cbd9e8;
    border-radius: 5px;
    background: #ffffff;
    padding: 0 12px;
    color: #071f41;
    font-weight: 800;
}

.result-filter-bar button:first-of-type {
    border-color: var(--teal);
    background: var(--teal);
    color: #ffffff;
}

.type-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: 8px 8px 0 0;
    background: #f9fcff;
    overflow-x: auto;
}

.type-tabs button {
    position: relative;
    flex: 0 0 auto;
    height: 50px;
    border: 0;
    padding: 0 18px;
    color: #586b86;
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.type-tabs button.active {
    color: var(--teal);
    background: #ffffff;
}

.type-tabs button.active::after {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    content: "";
    background: var(--teal);
}

.type-tabs span {
    color: inherit;
    opacity: 0.72;
}

.type-panel {
    display: none;
    grid-template-columns: minmax(230px, 0.82fr) minmax(360px, 1.25fr) minmax(300px, 1.05fr) minmax(300px, 1.05fr);
    gap: 12px;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #ffffff;
    padding: 12px;
}

.type-panel.active {
    display: grid;
}

.search-result-full {
    display: block;
}

.relationship-panel.active {
    grid-template-columns: 1fr;
}

.statistics-panel.active {
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.evidence-panel.active {
    grid-template-columns: 1fr;
}

.evidence-summary-top {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.4fr);
    gap: 12px;
}

.evidence-scope-card,
.evidence-kpi-card {
    min-height: 128px;
}

.evidence-scope-entity {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    margin: 10px 0;
}

.evidence-scope-entity img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eaf8f5;
    padding: 7px;
}

.evidence-scope-entity strong {
    display: block;
    color: #071f41;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.2;
}

.evidence-scope-entity span {
    display: block;
    margin-top: 2px;
    color: #586b86;
    font-size: 12px;
    font-weight: 700;
}

.evidence-summary-kpis {
    display: grid;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    align-items: stretch;
    height: 100%;
}

.evidence-kpi-item {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    min-height: 104px;
    border-left: 1px dashed #dbe7f0;
    color: #071f41;
    text-align: center;
}

.evidence-kpi-item:first-child {
    border-left: 0;
}

.evidence-kpi-item span {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef7fb;
    color: #1768c9;
    font-size: 18px;
    font-weight: 900;
}

.evidence-kpi-item small {
    color: #314466;
    font-size: 12px;
    font-weight: 800;
}

.evidence-kpi-item strong {
    color: #071f41;
    font-size: 24px;
    font-weight: 900;
}

.evidence-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.evidence-primary-table {
    grid-column: 1 / -1;
}

.evidence-side-table {
    min-width: 0;
}

.evidence-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.evidence-card-heading h2 {
    margin: 0;
}

.table-count {
    color: #075fb8;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.evidence-table-card[hidden],
.evidence-summary-grid article[hidden] {
    display: none;
}

.evidence-release-note {
    margin: 0;
    border: 1px solid #cfe0ee;
    border-radius: 7px;
    background: #f5fbff;
    padding: 10px 12px;
    color: #44546a;
    font-size: 12px;
}

.tables-panel.active {
    grid-template-columns: 1fr;
}

.wide-card {
    grid-column: 1 / -1;
}

.empty-state p {
    margin: 0;
    color: var(--muted);
}

.mini-table {
    overflow-x: auto;
}

.metabdb-table-controls,
.metabdb-table-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    color: #44546a;
    font-size: 13px;
}

.metabdb-table-controls label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.metabdb-table-controls select {
    min-width: 76px;
    border: 1px solid #cddbeb;
    border-radius: 6px;
    background: #ffffff;
    padding: 6px 8px;
    color: #071f41;
    font: inherit;
}

.metabdb-table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

.metabdb-table-widget th button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    color: inherit;
    font: inherit;
    font-weight: 900;
    text-align: left;
    cursor: pointer;
}

.metabdb-table-widget th button::after {
    content: "↕";
    color: #8aa0b3;
    font-size: 0.78em;
    font-weight: 900;
}

.metabdb-table-pagination {
    margin: 10px 0 0;
    justify-content: flex-end;
}

.metabdb-table-pagination button {
    min-width: 84px;
    border: 1px solid #cddbeb;
    border-radius: 6px;
    background: #ffffff;
    padding: 7px 10px;
    color: #071f41;
    font-weight: 900;
    cursor: pointer;
}

.metabdb-table-pagination button:disabled {
    cursor: default;
    opacity: 0.45;
}

.mini-table table {
    width: 100%;
    border-collapse: collapse;
}

.deferred-table-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 74px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fcfd;
    color: var(--muted);
    font-size: 0.95rem;
}

.deferred-table-prompt.warning {
    align-items: flex-start;
    flex-direction: column;
    border-color: #ffd8a3;
    background: #fffaf2;
}

.deferred-table-prompt strong {
    color: var(--ink);
}

.deferred-table-prompt button,
.server-table-pager button {
    border: 1px solid #b8d4e9;
    border-radius: 6px;
    background: #fff;
    color: var(--teal);
    font-weight: 800;
    padding: 9px 14px;
    cursor: pointer;
}

.server-table-pager {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    color: var(--muted);
}

.server-table-pager button:disabled {
    opacity: 0.45;
    cursor: default;
}

.mini-table th,
.mini-table td {
    border-bottom: 1px solid #e6edf4;
    padding: 9px 8px;
    color: #071f41;
    font-size: 11px;
    text-align: left;
    vertical-align: top;
}

.mini-table td {
    line-height: 1.25;
}

.mini-table th {
    color: #314466;
    font-weight: 800;
}

.mini-table td:last-child,
.mini-table th:last-child {
    text-align: right;
    white-space: nowrap;
}

.coloc-gene-name,
.coloc-metabolite-name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
}

.coloc-gene-link,
.coloc-gene-link:visited {
    color: #071f41;
    text-decoration: none;
}

.coloc-gene-link:hover,
.coloc-gene-link:focus-visible {
    color: var(--teal);
    text-decoration: underline;
}

.coloc-gene-link-list {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 5px;
    max-width: 360px;
}

.coloc-gene-link-separator {
    color: #8aa0b8;
}

.coloc-gene-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #b9d2e3;
    border-radius: 50%;
    background: #f7fbfd;
    color: #0a6f79;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    cursor: help;
}

.coloc-bridge-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b45309;
    font-size: 14px;
    font-weight: 900;
    cursor: help;
}

.coloc-gene-info-wrap,
.coloc-bridge-star[data-tooltip],
.coloc-priority-reason[data-tooltip] {
    position: relative;
}

.coloc-gene-tooltip-panel {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 60;
    width: min(560px, 78vw);
    padding: 12px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: #ffffff;
    color: #243957;
    box-shadow: 0 12px 28px rgba(7, 31, 65, 0.16);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    opacity: 1;
    visibility: visible;
    transform: translateY(-3px);
    pointer-events: none;
}

.coloc-gene-tooltip-panel table {
    width: 100%;
    border-collapse: collapse;
}

.coloc-gene-tooltip-panel th,
.coloc-gene-tooltip-panel td {
    padding: 6px 7px;
    border-bottom: 1px solid #e6eef5;
    vertical-align: top;
}

.mini-table .coloc-gene-tooltip-panel th,
.mini-table .coloc-gene-tooltip-panel td,
.coloc-gene-tooltip-panel th,
.coloc-gene-tooltip-panel td {
    text-align: left;
    white-space: normal;
}

.coloc-gene-tooltip-panel th {
    width: 132px;
    color: #536682;
    font-size: 11px;
    text-align: left;
    text-transform: uppercase;
}

.coloc-gene-tooltip-panel td {
    color: #243957;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.coloc-gene-tooltip-subtable {
    table-layout: fixed;
    font-size: 11px;
}

.coloc-gene-tooltip-subtable thead th {
    color: #536682;
    font-size: 10px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.coloc-gene-tooltip-subtable th:first-child,
.coloc-gene-tooltip-subtable td:first-child {
    width: auto;
}

.coloc-gene-tooltip-panel .coloc-gene-tooltip-subtable th:last-child,
.coloc-gene-tooltip-panel .coloc-gene-tooltip-subtable td:last-child {
    width: 78px;
    text-align: right;
    white-space: nowrap;
}

.coloc-gene-tooltip-subtable tbody tr:last-child td {
    border-bottom: 0;
}

.coloc-gene-colocdb-link {
    display: inline-flex;
    margin-top: 10px;
    color: #007f7b;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.coloc-gene-colocdb-link:hover,
.coloc-gene-colocdb-link:focus-visible {
    text-decoration: underline;
}

.coloc-gene-info-wrap:hover .coloc-gene-tooltip-panel,
.coloc-gene-info-wrap:focus-within .coloc-gene-tooltip-panel {
    display: block;
    transform: translateY(0);
    pointer-events: auto;
}

.coloc-bridge-star[data-tooltip]::after,
.coloc-priority-reason[data-tooltip]::after {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 50;
    width: min(360px, 72vw);
    padding: 9px 11px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: #ffffff;
    color: #243957;
    box-shadow: 0 12px 28px rgba(7, 31, 65, 0.16);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
    text-align: left;
    white-space: pre-line;
    opacity: 1;
    visibility: visible;
    transform: translateY(-3px);
    pointer-events: none;
}

.coloc-bridge-star[data-tooltip]:hover::after,
.coloc-bridge-star[data-tooltip]:focus-visible::after,
.coloc-priority-reason[data-tooltip]:hover::after,
.coloc-priority-reason[data-tooltip]:focus-visible::after {
    display: block;
    transform: translateY(0);
}

#top-diseases-table table {
    min-width: 500px;
}

#top-diseases-overview-table table {
    min-width: 760px;
}

#top-metabolites-table table,
#associated-metabolites-table table {
    min-width: 620px;
}

#variant-table table {
    min-width: 880px;
}

#top-variants-table table,
#top-genes-table table {
    min-width: 0;
}

.statistics-panel #top-metabolites-table table,
.statistics-panel .enrichment-rich-table {
    min-width: 0;
}

#metabolite-results-table table,
#gwas-table table,
#disease-results-table table {
    min-width: 1680px;
}

.mini-empty {
    color: var(--muted);
    font-size: 13px;
}

.coloc-module-loading {
    min-height: 92px;
    padding: 18px 20px;
    border: 1px solid #d7e7ee;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(239, 250, 248, 0.96), rgba(255, 255, 255, 0.98));
    color: var(--ink);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
}

.coloc-module-spinner {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid #d9edf2;
    border-top-color: var(--teal);
    animation: metabdb-loader-spin 0.8s linear infinite;
    flex: 0 0 auto;
}

.pretty-table-wrap {
    overflow-x: auto;
}

.pretty-association-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 560px;
}

.pretty-association-table th,
.pretty-association-table td {
    border-bottom: 1px solid #e7edf4;
    padding: 10px 9px;
    color: #071f41;
    font-size: 12px;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.pretty-association-table th {
    color: #314466;
    font-weight: 900;
}

.pretty-association-table tr:last-child td {
    border-bottom: 0;
}

.pretty-association-table tbody tr:hover {
    background: #f8fcff;
}

.pretty-association-table .rank-col {
    width: 54px;
    min-width: 54px;
    white-space: nowrap;
}

.pretty-association-table td:first-child,
.pretty-association-table td:nth-child(2),
.pretty-association-table td:nth-child(3) {
    max-width: 220px;
}

.rank-cell {
    display: inline-flex;
    place-items: center;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef7fb;
    color: #1768c9;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
}

.entity-inline-link {
    color: #075fb8;
    font-weight: 900;
    text-decoration: none;
}

.entity-inline-link:hover {
    text-decoration: underline;
}

.variant-link::after {
    content: " ↗";
    font-size: 11px;
}

.module-pill {
    display: inline-flex;
    max-width: 220px;
    border: 1px solid #d9e7ef;
    border-radius: 999px;
    background: #f4f9fc;
    padding: 4px 9px;
    color: #314466;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
    white-space: normal;
}

.pvalue-cell {
    display: grid;
    grid-template-columns: minmax(66px, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-width: 126px;
}

.pvalue-cell i {
    display: block;
    height: 9px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}

.pvalue-cell b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b5cf6, #1fb7a8);
}

.pvalue-cell strong {
    color: #071f41;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}

.enrichment-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 10px 0 12px;
    flex-wrap: wrap;
}

.enrichment-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.enrichment-chip {
    border: 1px solid #d7e5f1;
    border-radius: 7px;
    background: #ffffff;
    color: #314466;
    padding: 6px 14px;
    font-weight: 900;
    cursor: pointer;
}

.enrichment-chip.active {
    border-color: #2f7dd6;
    background: #eef6ff;
    color: #075fb8;
}

.enrichment-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #314466;
    font-size: 12px;
    font-weight: 900;
}

.enrichment-controls label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.enrichment-controls select {
    height: 34px;
    min-width: 72px;
    border: 1px solid #cbd9e8;
    border-radius: 6px;
    background: #ffffff;
    color: #071f41;
    padding: 0 10px;
    font-weight: 900;
}

.download-lite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    border: 1px solid #cbd9e8;
    border-radius: 6px;
    background: #ffffff;
    color: #071f41;
    padding: 0 12px;
    font-weight: 900;
}

.enrichment-rich-table {
    min-width: 1040px;
}

.enrichment-rich-table th,
.enrichment-rich-table td {
    padding: 11px 9px;
}

.enrichment-rich-table td:nth-child(4) {
    color: #314466;
    max-width: 260px;
}

.enrichment-term {
    color: #075fb8;
    font-weight: 900;
}

.source-badge,
.gene-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 5px;
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.source-badge {
    border: 1px solid #bfe5dc;
    background: #ddf7f0;
    color: #087a70;
    padding: 5px 7px;
}

.source-kegg {
    border-color: #b7dcff;
    background: #e7f3ff;
    color: #1768c9;
}

.source-go-bp,
.source-go-cc,
.source-go-mf {
    border-color: #bfe5dc;
    background: #ddf7f0;
    color: #087a70;
}

.gene-badge {
    border: 1px solid #bfe5dc;
    background: #dff8ef;
    color: #087a70;
    margin: 2px 3px 2px 0;
    padding: 5px 7px;
}

.overlap-cell {
    display: grid;
    grid-template-columns: auto minmax(46px, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 84px;
}

.overlap-cell strong {
    font-size: 11px;
    font-weight: 900;
}

.overlap-cell i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: #edf2f7;
    overflow: hidden;
}

.overlap-cell b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b8f86, #1fb7a8);
}

.external-action {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border: 1px solid #d7e5f1;
    border-radius: 5px;
    color: #075fb8;
    text-decoration: none;
    font-weight: 900;
}

.table-footnote {
    border-top: 1px solid #e7edf4;
    padding: 10px 0 0;
    color: #314466;
    font-size: 12px;
}

.metabolite-shell {
    padding: 18px;
}

.metabolite-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(230, 249, 246, 0.95), rgba(255, 255, 255, 0.96)),
        url("/metabdb/metabdb_png_icons/metabdb_hero_background_clean_sharp.png") right center / auto 100% no-repeat;
}

.metabolite-title {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.metabolite-title img {
    width: 62px;
    height: 62px;
    object-fit: contain;
}

.metabolite-title .eyebrow {
    margin: 0 0 5px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.metabolite-title h1 {
    margin: 0 0 5px;
    color: #071f41;
    font-size: 34px;
    line-height: 1.1;
}

.metabolite-title p:last-child {
    margin: 0;
    color: #314466;
    font-size: 14px;
}

.metabolite-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.metabolite-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid #cbd9e8;
    border-radius: 5px;
    padding: 0 14px;
    color: #071f41;
    background: rgba(255, 255, 255, 0.92);
    font-weight: 800;
}

.detail-metrics {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.detail-metrics div {
    min-width: 0;
    padding: 15px 10px;
    border-right: 1px solid var(--line);
    text-align: center;
}

.detail-metrics div:last-child {
    border-right: 0;
}

.detail-metrics strong {
    display: block;
    color: var(--teal);
    font-size: 24px;
    line-height: 1.15;
}

.detail-metrics span {
    display: block;
    margin-top: 6px;
    color: #071f41;
    font-size: 12px;
    font-weight: 800;
}

.catalog-main {
    max-width: none;
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}

.catalog-shell {
    padding: 18px;
}

.catalog-hero {
    display: grid;
    grid-template-columns: minmax(420px, 1fr) minmax(360px, 0.72fr);
    gap: 24px;
    align-items: center;
    min-height: 178px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(238, 250, 248, 0.98), rgba(255, 255, 255, 0.94)),
        url("/metabdb/metabdb_png_icons/metabdb_hero_background_clean_sharp.png") right center / auto 100% no-repeat;
    padding: 22px 24px;
}

.catalog-hero .eyebrow {
    margin: 0 0 6px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.catalog-hero h1 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 34px;
    line-height: 1.1;
}

.catalog-hero p:last-child {
    max-width: 760px;
    margin: 0;
    color: #314466;
    font-size: 15px;
    line-height: 1.5;
}

.catalog-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

.catalog-kpis div {
    min-width: 0;
    padding: 16px 12px;
    border-right: 1px solid #d6e4ef;
    text-align: center;
}

.catalog-kpis div:last-child {
    border-right: 0;
}

.catalog-kpis strong {
    display: block;
    color: var(--teal);
    font-size: 25px;
    line-height: 1.1;
}

.catalog-kpis span {
    display: block;
    margin-top: 6px;
    color: #071f41;
    font-size: 12px;
    font-weight: 800;
}

.catalog-tabs {
    display: flex;
    gap: 6px;
    margin-top: 16px;
    border-bottom: 1px solid var(--line);
}

.catalog-tabs button {
    position: relative;
    height: 42px;
    border: 0;
    padding: 0 18px;
    color: #586b86;
    background: transparent;
    font-weight: 900;
    cursor: pointer;
}

.catalog-tabs button.active {
    color: var(--teal);
}

.catalog-tabs button.active::after {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 3px;
    content: "";
    background: var(--teal);
}

.browse-panel {
    display: none;
    padding-top: 14px;
}

.browse-panel.active {
    display: block;
}

.browse-tree-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.browse-tree-card,
.browse-results-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.browse-tree-card {
    padding: 12px;
}

.browse-results-card {
    padding: 14px;
}

.browse-tree-title {
    display: grid;
    gap: 2px;
    margin-bottom: 10px;
}

.browse-tree-title strong {
    color: #071f41;
    font-size: 17px;
}

.browse-tree-title span {
    display: none;
}

.browse-tree-filter {
    width: 100%;
    height: 38px;
    margin-bottom: 12px;
    border: 1px solid #cbd9e8;
    border-radius: 6px;
    padding: 0 11px;
    color: #071f41;
    font: inherit;
}

.browse-tree {
    display: grid;
    gap: 6px;
}

.browse-tree-group {
    display: grid;
    gap: 3px;
}

.browse-tree-group > div {
    display: grid;
    gap: 2px;
}

.browse-tree-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #ffffff;
    padding: 7px 9px;
    color: #071f41;
    text-align: left;
    cursor: pointer;
}

.browse-tree-button:hover,
.browse-tree-button:focus {
    border-color: #d8e8f3;
    background: #f7fbff;
}

.browse-tree-button.active {
    border-color: var(--teal);
    background: linear-gradient(90deg, #e9fbf7 0%, #ffffff 100%);
    box-shadow: inset 3px 0 0 var(--teal);
}

.browse-tree-button span {
    min-width: 0;
}

.browse-tree-button strong,
.browse-tree-button small,
.browse-tree-button em {
    display: block;
}

.browse-tree-button strong {
    color: inherit;
    font-size: 13px;
    line-height: 1.25;
}

.browse-tree-button small {
    margin-top: 2px;
    color: #647792;
    font-size: 11px;
    line-height: 1.25;
}

.browse-tree-button em {
    align-self: center;
    max-width: 96px;
    color: #4c5f7a;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.25;
    text-align: right;
    white-space: nowrap;
}

.browse-tree-parent em {
    max-width: none;
    color: var(--teal);
}

.browse-tree-child {
    margin-left: 16px;
    width: calc(100% - 16px);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.browse-tree-flat .browse-tree-child {
    margin-left: 0;
    width: 100%;
}

.browse-tree-child::before {
    content: "";
    width: 7px;
    height: 7px;
    align-self: center;
    justify-self: start;
    border-radius: 50%;
    background: #c2cfdd;
}

.browse-tree-child {
    grid-template-columns: 13px minmax(0, 1fr) auto;
}

.browse-tree-child.active::before {
    background: var(--teal);
}

.browse-tree-inline {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 5px;
    margin-left: 0;
}

.browse-tree-inline .browse-tree-chip {
    width: 100%;
    margin-left: 0;
    min-height: 42px;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 6px 4px;
    text-align: center;
    border: 1px solid #d8e5f0;
    background: #ffffff;
}

.browse-tree-inline .browse-tree-chip::before {
    content: none;
}

.browse-tree-inline .browse-tree-chip strong,
.browse-tree-inline .browse-tree-chip em {
    text-align: center;
}

.browse-tree-inline .browse-tree-chip em {
    max-width: none;
    font-size: 10px;
}

.browse-selection-summary {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    border: 1px solid #dbe9f2;
    border-radius: 8px;
    background: #f7fbfd;
    padding: 14px;
}

.browse-selection-summary .eyebrow {
    display: none;
}

.browse-selection-summary h2 {
    margin: 0;
    color: #071f41;
    font-size: 22px;
    line-height: 1.15;
}

.browse-selection-summary p:last-child {
    margin: 0;
    color: #50627e;
    font-size: 13px;
    line-height: 1.45;
}

.catalog-section {
    margin-top: 16px;
}

.catalog-section-title {
    margin: 0 0 10px;
    color: #071f41;
    font-size: 20px;
}

.catalog-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.catalog-toolbar input,
.catalog-toolbar select {
    min-width: 260px;
    height: 38px;
    border: 1px solid #cbd9e8;
    border-radius: 5px;
    background: #ffffff;
    padding: 0 11px;
    color: #071f41;
    font: inherit;
}

.catalog-toolbar span {
    margin-left: auto;
    margin-right: 12px;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
}

.catalog-table {
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    padding: 14px;
}

.catalog-table table {
    min-width: 980px;
}

.catalog-table .metabdb-table-controls {
    margin: 0 0 14px;
}

.catalog-table .metabdb-table-pagination {
    margin: 14px 0 0;
}

.catalog-table.mini-table th,
.catalog-table.mini-table td {
    padding: 13px 16px;
    font-size: 13px;
}

.catalog-table.mini-table th {
    font-size: 12.5px;
}

.catalog-table td a {
    color: #0056bc;
    font-weight: 900;
}

.table-secondary {
    display: block;
    margin-top: 4px;
    color: #657892;
    font-size: 11px;
    font-weight: 700;
}

.catalog-grid {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.catalog-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.catalog-grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.catalog-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-release-shell {
    display: grid;
    gap: 18px;
}

.about-release-shell > *,
.release-section,
.release-boundary,
.release-hero,
.release-table-wrap {
    min-width: 0;
}

.release-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(560px, 0.9fr);
    gap: 22px;
    align-items: center;
    min-height: 150px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(238, 250, 248, 0.98), rgba(255, 255, 255, 0.96));
    padding: 22px 32px;
}

.release-hero h1 {
    max-width: 760px;
    margin: 0 0 10px;
    color: #071f41;
    font-size: 32px;
    line-height: 1.14;
}

.release-hero p {
    max-width: 860px;
    margin: 0;
    color: #314466;
    font-size: 15px;
    line-height: 1.55;
}

.release-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    overflow: hidden;
}

.release-metrics div {
    min-width: 0;
    padding: 13px 16px;
    border-right: 1px solid #d6e4ef;
    border-bottom: 1px solid #d6e4ef;
}

.release-metrics div:nth-child(3n),
.release-metrics div:last-child {
    border-right: 0;
}

.release-metrics div:nth-last-child(-n+3) {
    border-bottom: 0;
}

.release-metrics dt {
    margin: 0 0 6px;
    color: #536682;
    font-size: 12px;
    font-weight: 900;
}

.release-metrics dd {
    margin: 0;
    color: var(--teal);
    font-size: 23px;
    font-weight: 900;
    line-height: 1.1;
}

.release-section,
.release-boundary {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 22px 24px;
}

.release-section h2,
.release-boundary h2 {
    margin: 0 0 16px;
    color: #071f41;
    font-size: 21px;
    line-height: 1.25;
}

.release-table-wrap {
    overflow-x: auto;
}

.release-summary-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    color: #0a2345;
    font-size: 14px;
}

.release-summary-table th,
.release-summary-table td {
    border-bottom: 1px solid #dce8f2;
    padding: 14px 18px;
    text-align: left;
    vertical-align: top;
}

.release-summary-table thead th {
    color: #334864;
    font-size: 13px;
    font-weight: 900;
}

.release-summary-table tbody th {
    width: 260px;
    color: #071f41;
    font-weight: 900;
}

.release-summary-table tr:last-child th,
.release-summary-table tr:last-child td {
    border-bottom: 0;
}

.release-timeline {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.release-timeline li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #dce8f2;
}

.release-timeline li:first-child {
    padding-top: 0;
}

.release-timeline li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.release-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e7f7f4;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.release-timeline h3 {
    margin: 0 0 6px;
    color: #071f41;
    font-size: 16px;
    line-height: 1.25;
}

.release-timeline p {
    margin: 0;
    color: #314466;
    font-size: 14px;
    line-height: 1.55;
}

.release-boundary {
    display: grid;
    gap: 8px;
    border-color: #bfe3dd;
    background: #effbf8;
}

.release-boundary h2 {
    margin-bottom: 0;
    color: var(--teal);
}

.release-boundary p {
    margin: 0;
    color: #0a2345;
    font-size: 14px;
    line-height: 1.65;
}

.release-link-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.release-link {
    display: grid;
    gap: 8px;
    min-height: 116px;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 18px;
    color: #0a2345;
    text-decoration: none;
}

.release-link:hover,
.release-link:focus {
    border-color: var(--teal);
    background: #f3fbfa;
}

.release-link strong {
    color: #071f41;
    font-size: 15px;
    font-weight: 900;
}

.release-link span {
    color: #405572;
    font-size: 13px;
    line-height: 1.45;
}

.help-guide-shell {
    display: grid;
    gap: 18px;
}

.help-guide-shell > *,
.help-section,
.help-guide-hero,
.help-user-guide-card,
.help-table-wrap {
    min-width: 0;
}

.help-guide-hero {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(238, 250, 248, 0.98), rgba(255, 255, 255, 0.96));
    padding: 28px 32px;
}

.help-guide-hero h1 {
    margin: 0 0 10px;
    color: #071f41;
    font-size: 32px;
    line-height: 1.15;
}

.help-guide-hero p {
    max-width: 760px;
    margin: 0;
    color: #314466;
    font-size: 15px;
    line-height: 1.55;
}

.help-user-guide-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #bfe3df;
    border-radius: 8px;
    background: #f8fcfb;
    padding: 20px 24px;
}

.help-user-guide-kicker {
    margin: 0 0 6px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.help-user-guide-card h2 {
    margin: 0 0 6px;
    color: #071f41;
    font-size: 21px;
    line-height: 1.25;
}

.help-user-guide-card p:not(.help-user-guide-kicker) {
    max-width: 760px;
    margin: 0;
    color: #405572;
    font-size: 14px;
    line-height: 1.5;
}

.help-user-guide-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid var(--teal);
    border-radius: 7px;
    background: var(--teal);
    padding: 0 18px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.help-user-guide-action:hover,
.help-user-guide-action:focus {
    background: #006f72;
    border-color: #006f72;
}

.help-user-guide-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.help-user-guide-action.secondary {
    background: #fff;
    color: var(--teal-dark, #087f7f);
}

.release-case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.release-case-grid article {
    border: 1px solid #cfe1ec;
    border-radius: 8px;
    padding: 16px 18px;
    background: #f9fcfd;
}

.release-case-grid strong {
    display: block;
    color: #087f7f;
    font-size: 1rem;
    margin-bottom: 7px;
}

.release-case-grid p,
.catalog-section-copy {
    margin: 0;
    color: #526984;
    line-height: 1.55;
}

.release-case-method-note {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #d8e4eb;
    border-left: 4px solid #748ba3;
    border-radius: 7px;
    background: #f7fafc;
}

.release-case-method-note strong {
    color: #18304e;
    font-size: 13px;
}

.release-case-method-note p {
    margin: 5px 0 0;
    color: #536781;
    font-size: 12px;
    line-height: 1.55;
}

@media (max-width: 760px) {
    .release-case-grid {
        grid-template-columns: 1fr;
    }
    .help-user-guide-actions {
        justify-content: flex-start;
    }
}

.help-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 22px 24px;
}

.help-section h2 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--teal);
    font-size: 18px;
    line-height: 1.3;
}

.help-section h2 span:first-child {
    color: #007f7f;
    font-weight: 900;
}

.help-example-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid #dce8f2;
    overflow-x: auto;
}

.help-example-tabs button {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    padding: 0 14px;
    color: #314466;
    font-size: 13px;
    font-weight: 900;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.help-example-tabs button.active,
.help-example-tabs button:hover,
.help-example-tabs button:focus {
    border-bottom-color: var(--teal);
    color: var(--teal);
}

.help-example-table[data-active-example="metabolite"] [data-example-col]:not([data-example-col="metabolite"]),
.help-example-table[data-active-example="phenotype"] [data-example-col]:not([data-example-col="phenotype"]),
.help-example-table[data-active-example="variant"] [data-example-col]:not([data-example-col="variant"]),
.help-example-table[data-active-example="gene"] [data-example-col]:not([data-example-col="gene"]) {
    display: none;
}

html:not([lang^="zh"]) .help-example-table [data-help-language-row="zh"],
.help-example-table .is-hidden-language-row {
    display: none !important;
}

.help-example-token {
    color: #0056bc;
    font-weight: 900;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.help-note {
    margin: 12px 0 0;
    border-radius: 7px;
    background: #f6fbfc;
    padding: 10px 12px;
    color: #405572;
    font-size: 13px;
    line-height: 1.5;
}

.help-type-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.help-section > h3 {
    margin: 20px 0 10px;
    color: #183354;
    font-size: 14px;
    line-height: 1.35;
}

.help-section > h2 + h3 {
    margin-top: 0;
}

.help-type-grid + h3 {
    padding-top: 2px;
    border-top: 1px solid #e3edf4;
}

.help-type-grid article {
    display: grid;
    gap: 8px;
    min-height: 104px;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
}

.help-type-grid strong {
    color: #007f7f;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.help-type-grid span {
    color: #314466;
    font-size: 13px;
    line-height: 1.45;
}

.help-field-table {
    min-width: 720px;
}

.help-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.help-split article {
    min-width: 0;
}

.help-check-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.help-check-list li {
    position: relative;
    padding-left: 22px;
    color: #314466;
    font-size: 14px;
    line-height: 1.5;
}

.help-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
}

.help-boundary-text {
    margin: 0;
    border-radius: 8px;
    background: #effbf8;
    padding: 14px 16px;
    color: #0a2345;
    font-size: 14px;
    line-height: 1.65;
}

.user-guide-shell {
    display: grid;
    gap: 18px;
}

.user-guide-shell > *,
.guide-section,
.guide-hero,
.guide-step,
.guide-screenshot {
    min-width: 0;
}

.guide-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, 0.72fr);
    gap: 22px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(238, 250, 248, 0.98), rgba(255, 255, 255, 0.96));
    padding: 26px 32px;
}

.guide-hero h1 {
    margin: 0 0 10px;
    color: #071f41;
    font-size: 34px;
    line-height: 1.12;
}

.guide-hero p {
    max-width: 860px;
    margin: 0;
    color: #314466;
    font-size: 15px;
    line-height: 1.6;
}

.guide-scope-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.94);
}

.guide-scope-metrics div {
    padding: 15px 16px;
    border-right: 1px solid #d6e4ef;
    border-bottom: 1px solid #d6e4ef;
}

.guide-scope-metrics div:nth-child(2n) {
    border-right: 0;
}

.guide-scope-metrics div:nth-last-child(-n+2) {
    border-bottom: 0;
}

.guide-scope-metrics dt {
    margin: 0 0 6px;
    color: #536682;
    font-size: 12px;
    font-weight: 900;
}

.guide-scope-metrics dd {
    margin: 0;
    color: var(--teal);
    font-size: 24px;
    line-height: 1.1;
    font-weight: 900;
}

.guide-section {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 22px 24px;
}

.guide-section > h2,
.guide-two-column h2,
.guide-boundary-card h2 {
    margin: 0 0 16px;
    color: var(--teal);
    font-size: 21px;
    line-height: 1.3;
}

.guide-feature-grid,
.guide-faq-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.guide-feature-grid article,
.guide-faq-grid article,
.mulin-software-grid article {
    display: grid;
    gap: 8px;
    min-height: 122px;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #fbfdff;
    padding: 16px;
}

.guide-feature-grid strong,
.guide-faq-grid strong,
.mulin-software-grid strong {
    color: #071f41;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
}

.guide-feature-grid p,
.guide-faq-grid p,
.mulin-software-grid p {
    margin: 0;
    color: #314466;
    font-size: 13px;
    line-height: 1.55;
}

.guide-workflow {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: guide-step;
}

.guide-workflow li {
    counter-increment: guide-step;
    display: grid;
    grid-template-columns: 42px minmax(0, 0.32fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #fbfdff;
    padding: 14px 16px;
}

.guide-workflow li::before {
    content: counter(guide-step, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #e7f7f4;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.guide-workflow strong {
    color: #071f41;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
}

.guide-workflow span {
    color: #314466;
    font-size: 14px;
    line-height: 1.5;
}

.guide-step {
    display: grid;
    grid-template-columns: minmax(250px, 0.32fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    border-top: 1px solid #dce8f2;
    padding: 22px 0;
}

.guide-step:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.guide-step:last-child {
    padding-bottom: 0;
}

.guide-step-copy {
    display: grid;
    gap: 9px;
}

.guide-step-copy > span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.guide-step-copy h3 {
    margin: 0;
    color: #071f41;
    font-size: 20px;
    line-height: 1.25;
}

.guide-step-copy p {
    margin: 0;
    color: #314466;
    font-size: 14px;
    line-height: 1.6;
}

.guide-inline-action {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #9ccad2;
    border-radius: 8px;
    color: #007c7b;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    background: #ffffff;
}

.guide-inline-action:hover,
.guide-inline-action:focus {
    border-color: #007c7b;
    background: #eefcf9;
}

.guide-screenshot {
    margin: 0;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    overflow: hidden;
    background: #f7fbff;
}

.guide-screenshot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: top left;
    border-bottom: 1px solid #d6e4ef;
}

.guide-screenshot figcaption {
    padding: 10px 12px;
    color: #536682;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.guide-coloc-fields {
    grid-column: 1 / -1;
    border-top: 1px solid #dce8f2;
    padding-top: 18px;
    margin-top: 4px;
}

.guide-coloc-fields h3 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 18px;
    line-height: 1.3;
}

.guide-coloc-fields p {
    max-width: 980px;
    margin: 0 0 14px;
    color: #314466;
    font-size: 13px;
    line-height: 1.55;
}

.guide-field-table-shell {
    overflow-x: auto;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #ffffff;
}

.guide-field-table {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    color: #071f41;
    font-size: 13px;
}

.guide-field-table th,
.guide-field-table td {
    border-bottom: 1px solid #e4eef6;
    padding: 11px 12px;
    text-align: left;
    vertical-align: top;
    line-height: 1.45;
}

.guide-field-table th {
    background: #f3faf9;
    color: var(--teal-dark);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.guide-field-table td:first-child {
    width: 150px;
    color: var(--teal-dark);
    font-weight: 900;
    white-space: nowrap;
}

.guide-field-table td:nth-child(2) {
    width: 210px;
    color: #536682;
    font-weight: 800;
}

.guide-field-table tr:last-child td {
    border-bottom: 0;
}

.guide-two-column {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 18px;
}

.guide-check-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide-check-list li {
    position: relative;
    padding-left: 22px;
    color: #314466;
    font-size: 14px;
    line-height: 1.55;
}

.guide-check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
}

.guide-boundary-card {
    border-radius: 8px;
    background: #effbf8;
    padding: 18px;
}

.guide-boundary-card h2 {
    margin-bottom: 10px;
}

.guide-boundary-card p {
    margin: 0;
    color: #0a2345;
    font-size: 14px;
    line-height: 1.65;
}

.mulin-software-section {
    display: grid;
    gap: 16px;
}

.mulin-software-heading {
    max-width: 980px;
}

.mulin-software-heading h2 {
    margin-bottom: 10px;
}

.mulin-software-heading p:last-child {
    margin: 0;
    color: #314466;
    font-size: 14px;
    line-height: 1.6;
}

.mulin-software-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.mulin-resource-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 2px;
}

.mulin-resource-strip a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid #bfe3dd;
    border-radius: 8px;
    background: #f3fbfa;
    padding: 0 13px;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}

.mulin-resource-strip a:hover,
.mulin-resource-strip a:focus {
    background: var(--teal);
    color: #ffffff;
}

.mulinlab-contact-section {
    display: grid;
    gap: 20px;
    background: #f8fafc;
}

.mulinlab-contact-section > h2 {
    margin-bottom: -2px;
    color: #2d3748;
    font-size: 20px;
}

.mulinlab-contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
    border: 1px solid #dbe6f2;
    background: #ffffff;
    padding: 18px 20px;
}

.mulinlab-contact-card h3 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 18px;
    line-height: 1.3;
}

.mulinlab-contact-card p {
    margin: 0;
    color: #536682;
    font-size: 15px;
    line-height: 1.55;
}

.mulinlab-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.mulinlab-contact-actions a,
.mulinlab-resource-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid #a9d29a;
    background: #ffffff;
    padding: 0 18px;
    color: #4b9b24;
    font-size: 15px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.mulinlab-contact-actions a:hover,
.mulinlab-contact-actions a:focus,
.mulinlab-resource-card a:hover,
.mulinlab-resource-card a:focus {
    border-color: #4b9b24;
    background: #eef8eb;
}

.mulinlab-resource-heading {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: baseline;
    margin-top: 6px;
}

.mulinlab-resource-heading h3 {
    margin: 0;
    color: #071f41;
    font-size: 20px;
    line-height: 1.3;
}

.mulinlab-resource-heading p {
    margin: 0;
    color: #6b7d97;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.4;
    text-align: right;
}

.mulinlab-resource-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 16px;
}

.mulinlab-resource-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    min-height: 154px;
    border: 1px solid #dbe6f2;
    background: #ffffff;
    padding: 18px 20px;
}

.mulinlab-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    border: 1px solid #dbe6f2;
    background: #f2f5f9;
    color: #071f41;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.mulinlab-logo-tile.varnote {
    color: #6f6b57;
}

.mulinlab-logo-tile.vportal,
.mulinlab-logo-tile.vsampler {
    color: #22305d;
}

.mulinlab-logo-tile.gwas4d {
    color: #1457a8;
}

.mulinlab-logo-tile.causaldb {
    color: #0f8f9e;
}

.mulinlab-logo-tile.qtlbase {
    color: #53a92c;
}

.mulinlab-resource-card h4 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 17px;
    line-height: 1.3;
}

.mulinlab-resource-card p {
    margin: 0 0 14px;
    color: #536682;
    font-size: 14px;
    line-height: 1.55;
}

.mulinlab-resource-card a {
    min-height: auto;
    border: 0;
    justify-content: flex-start;
    padding: 0;
    font-size: 14px;
}

.mulinlab-resource-card a:hover,
.mulinlab-resource-card a:focus {
    background: transparent;
    text-decoration: underline;
}

.coloc-workbench-shell {
    display: grid;
    gap: 16px;
}

.coloc-workbench-shell > *,
.coloc-summary-strip,
.coloc-workbench,
.coloc-trait-panel,
.coloc-browse-table-panel,
.coloc-detail-panel,
.coloc-card {
    min-width: 0;
}

.coloc-summary-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(460px, 0.74fr);
    gap: 20px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(238, 250, 248, 0.98), rgba(255, 255, 255, 0.96));
    padding: 22px 24px;
}

.coloc-summary-strip .eyebrow,
.coloc-selected-header .eyebrow {
    margin: 0 0 6px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.coloc-summary-strip h1 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 30px;
    line-height: 1.14;
}

.coloc-summary-strip p {
    max-width: 820px;
    margin: 0;
    color: #314466;
    font-size: 14px;
    line-height: 1.55;
}

.coloc-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.coloc-kpi-row div {
    padding: 14px 12px;
    border-right: 1px solid #d6e4ef;
    text-align: center;
}

.coloc-kpi-row div:last-child {
    border-right: 0;
}

.coloc-kpi-row dt {
    margin: 0 0 6px;
    color: #536682;
    font-size: 11px;
    font-weight: 900;
}

.coloc-kpi-row dd {
    margin: 0;
    color: var(--teal);
    font-size: 22px;
    font-weight: 900;
}

.coloc-workbench {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.coloc-trait-panel,
.coloc-browse-table-panel,
.coloc-detail-panel,
.coloc-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
}

.coloc-trait-panel {
    position: sticky;
    top: 88px;
    display: grid;
    gap: 12px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    scrollbar-gutter: stable;
}

.coloc-panel-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.coloc-panel-heading h2 {
    margin: 0;
    color: #071f41;
    font-size: 18px;
}

.coloc-panel-heading span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

#coloc-trait-filter {
    width: 100%;
    min-height: 40px;
    border: 1px solid #c9dceb;
    border-radius: 7px;
    padding: 0 12px;
    color: #071f41;
    font: inherit;
}

.coloc-trait-list {
    display: grid;
    gap: 8px;
    overflow-y: auto;
    padding-right: 2px;
}

.coloc-representative-note {
    margin: 0;
    border: 1px solid #d9e8f0;
    border-radius: 7px;
    background: #effbf8;
    padding: 9px 10px;
    color: #233d5c;
    font-size: 11px;
    line-height: 1.45;
}

.coloc-trait-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 11px 12px;
    color: #071f41;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.coloc-trait-button strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coloc-trait-button span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.coloc-trait-button small {
    grid-column: 1 / -1;
    color: #61738d;
    font-size: 11px;
    line-height: 1.3;
}

.coloc-trait-button.active,
.coloc-trait-button:hover,
.coloc-trait-button:focus {
    border-color: var(--teal);
    background: #effbf8;
}

.coloc-detail-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.coloc-selected-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.7fr);
    gap: 18px;
    align-items: center;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #f8fcfd;
    padding: 18px;
}

.coloc-selected-header h2 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 24px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.coloc-selected-header p:last-child {
    margin: 0;
    color: #536682;
    font-size: 13px;
    line-height: 1.5;
}

.coloc-selected-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.coloc-selected-metrics div {
    padding: 12px 8px;
    border-right: 1px solid #d6e4ef;
    text-align: center;
}

.coloc-selected-metrics div:last-child {
    border-right: 0;
}

.coloc-selected-metrics dt {
    margin: 0 0 5px;
    color: #61738d;
    font-size: 11px;
    font-weight: 900;
}

.coloc-selected-metrics dd {
    margin: 0;
    color: var(--teal);
    font-size: 20px;
    font-weight: 900;
}

.coloc-card {
    padding: 16px;
}

.coloc-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.coloc-card h3,
.coloc-card-heading h3 {
    margin: 0 0 6px;
    color: #071f41;
    font-size: 18px;
}

.coloc-card-heading p {
    margin: 0;
    color: #536682;
    font-size: 13px;
    line-height: 1.45;
}

.coloc-confidence-card {
    border-color: #b9d8d3;
}

.coloc-confidence-summary {
    margin-bottom: 12px;
}

.coloc-confidence-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.coloc-confidence-chip,
.coloc-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d6e5ee;
    border-radius: 6px;
    background: #f7fbfd;
    color: #243957;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.coloc-confidence-chip {
    padding: 8px 10px;
}

.coloc-confidence-chip em {
    color: #536682;
    font-style: normal;
    font-weight: 800;
}

.coloc-tier-badge {
    padding: 6px 8px;
    white-space: nowrap;
}

.coloc-confidence-chip.tier-one,
.coloc-tier-badge.tier-one {
    border-color: #77b7aa;
    background: #eefbf7;
    color: #006c6a;
}

.coloc-confidence-chip.tier-two,
.coloc-tier-badge.tier-two {
    border-color: #c9d7ef;
    background: #f2f6ff;
    color: #355a9b;
}

.coloc-confidence-chip.tier-three,
.coloc-tier-badge.tier-three {
    border-color: #e2d8c8;
    background: #fff9ef;
    color: #8a5a13;
}

.coloc-confidence-note {
    color: #536682;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.coloc-confidence-lead {
    margin: 10px 0 0;
    color: #243957;
    font-size: 13px;
    font-weight: 800;
}

.coloc-priority-reason {
    display: inline-block;
    max-width: 260px;
    color: #405572;
    line-height: 1.35;
}

.coloc-legend {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    color: #536682;
    font-size: 12px;
    font-weight: 800;
}

.coloc-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.coloc-legend i {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.coloc-legend .high {
    background: var(--teal);
}

.coloc-legend .moderate {
    background: #8fd2c8;
}

.coloc-manhattan {
    min-height: 260px;
}

.coloc-manhattan svg {
    width: 100%;
    min-height: 250px;
    display: block;
}

.coloc-chrom-bar {
    cursor: pointer;
}

.coloc-chrom-label {
    fill: #405572;
    font-size: 11px;
    font-weight: 800;
}

.coloc-chrom-count {
    fill: #071f41;
    font-size: 11px;
    font-weight: 900;
}

.coloc-drilldown-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}

.coloc-gene-bars {
    display: grid;
    gap: 9px;
}

.coloc-gene-row {
    display: grid;
    grid-template-columns: minmax(90px, 0.4fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    color: #071f41;
    font-size: 13px;
    font-weight: 800;
}

.coloc-gene-track {
    height: 9px;
    border-radius: 999px;
    background: #edf4f8;
    overflow: hidden;
}

.coloc-gene-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
}

.coloc-chip-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.coloc-chip-block {
    min-width: 0;
}

.coloc-chip-block h4 {
    margin: 0 0 8px;
    color: #536682;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.coloc-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.coloc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    border: 1px solid #d6e4ef;
    border-radius: 999px;
    background: #f8fcfd;
    padding: 6px 9px;
    color: #071f41;
    font-size: 12px;
    font-weight: 800;
}

.coloc-chip b {
    color: var(--teal);
}

.coloc-dashboard-shell {
    padding-top: 18px;
}

.coloc-browser-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin-bottom: 12px;
}

.coloc-browser-header h1 {
    margin: 0 0 6px;
    color: #071f41;
    font-size: 28px;
    line-height: 1.15;
}

.coloc-browser-header p {
    margin: 0;
    max-width: 780px;
    color: #405572;
    font-size: 14px;
    line-height: 1.55;
}

.coloc-mode-tabs {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid #cfe0eb;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(7, 31, 65, 0.04);
}

.coloc-mode-tabs button {
    min-width: 170px;
    border: 0;
    border-right: 1px solid #dce7f0;
    background: #ffffff;
    padding: 12px 18px;
    color: #071f41;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.coloc-mode-tabs button:last-child {
    border-right: 0;
}

.coloc-mode-tabs button.active,
.coloc-mode-tabs button:hover,
.coloc-mode-tabs button:focus {
    background: var(--teal);
    color: #ffffff;
}

.coloc-mode-explainer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.coloc-mode-explainer div {
    border: 1px solid #dce9f1;
    border-radius: 8px;
    background: #fbfdff;
    padding: 12px 14px;
}

.coloc-mode-explainer strong,
.coloc-mode-explainer span {
    display: block;
}

.coloc-mode-explainer strong {
    margin-bottom: 5px;
    color: var(--teal);
    font-size: 13px;
    font-weight: 900;
}

.coloc-mode-explainer span {
    color: #405572;
    font-size: 12px;
    line-height: 1.45;
}

.coloc-layer-list {
    display: grid;
    gap: 5px;
}

.coloc-layer-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 0;
    border-left: 3px solid #c8d8e4;
    border-radius: 6px;
    background: #ffffff;
    padding: 7px 9px;
    color: #071f41;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.coloc-layer-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coloc-layer-button b {
    color: var(--teal);
}

.coloc-layer-button.active,
.coloc-layer-button:hover,
.coloc-layer-button:focus {
    border-left-color: var(--teal);
    background: #effbf8;
}

.coloc-source-button small {
    display: block;
    margin-top: 2px;
    color: #6d7e95;
    font-size: 10px;
    font-weight: 700;
    white-space: normal;
}

.coloc-type-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 6px 0 8px;
    border: 1px solid #a9d9d6;
    border-radius: 999px;
    background: #eaf9f6;
    padding: 3px 10px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.coloc-boundary-card {
    border: 1px solid #cfe9e5;
    border-radius: 8px;
    background: linear-gradient(90deg, #f0fbf8, #ffffff);
    padding: 14px 16px;
    margin-bottom: 14px;
}

.coloc-boundary-card h3 {
    margin: 0 0 6px;
    color: var(--teal);
    font-size: 15px;
}

.coloc-boundary-card p {
    margin: 0;
    color: #233954;
    font-size: 13px;
    line-height: 1.55;
}

.coloc-signature-row {
    display: grid;
    grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edf3f8;
}

.coloc-signature-row strong,
.coloc-signature-row small {
    display: block;
}

.coloc-signature-row strong {
    color: #071f41;
    font-size: 13px;
}

.coloc-signature-row small {
    margin-top: 2px;
    color: #6d7e95;
    font-size: 11px;
    line-height: 1.35;
}

.coloc-signature-row b {
    color: var(--teal);
    font-size: 13px;
}

.coloc-dashboard-header {
    background: linear-gradient(90deg, rgba(248, 253, 253, 0.98), #ffffff);
}

.coloc-dashboard-header .coloc-selected-metrics {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.coloc-dashboard-header .coloc-selected-metrics dd {
    overflow-wrap: anywhere;
}

.coloc-facet-block {
    display: grid;
    gap: 8px;
    border-top: 1px solid #e2edf5;
    padding-top: 12px;
}

.coloc-facet-block h3 {
    margin: 0;
    color: #071f41;
    font-size: 13px;
    font-weight: 900;
}

.coloc-browse-groups {
    display: grid;
    gap: 8px;
}

.coloc-browse-block .coloc-browse-groups {
    gap: 7px;
}

.coloc-browse-group {
    border: 1px solid #d9e6ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.coloc-browse-group.open {
    border-color: rgba(0, 132, 132, 0.55);
    box-shadow: 0 8px 18px rgba(7, 31, 65, 0.05);
}

.coloc-browse-group.active {
    box-shadow: inset 3px 0 0 var(--teal), 0 8px 18px rgba(7, 31, 65, 0.05);
}

.coloc-browse-toggle,
.coloc-browse-item {
    width: 100%;
    border: 0;
    background: transparent;
    color: #071f41;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.coloc-browse-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    padding: 10px 10px;
}

.coloc-browse-toggle span,
.coloc-browse-item span {
    min-width: 0;
}

.coloc-browse-toggle strong,
.coloc-browse-toggle small,
.coloc-browse-item span,
.coloc-browse-item small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coloc-browse-toggle strong {
    font-size: 12px;
    font-weight: 900;
}

.coloc-browse-toggle small,
.coloc-browse-item small {
    margin-top: 2px;
    color: #61738d;
    font-size: 10px;
    line-height: 1.25;
}

.coloc-browse-toggle b,
.coloc-browse-item b {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.coloc-browse-toggle i {
    color: #61738d;
    font-style: normal;
    font-weight: 900;
}

.coloc-browse-items {
    display: grid;
    gap: 2px;
    border-top: 1px solid #e3eef5;
    background: #f7fbfd;
    padding: 6px;
}

.coloc-browse-item {
    margin-left: 0;
    width: 100%;
    background: #fbfdff;
    font-size: 11px;
    font-weight: 800;
}

.coloc-browse-item.active,
.coloc-browse-item:hover,
.coloc-browse-item:focus,
.coloc-browse-toggle:hover,
.coloc-browse-toggle:focus {
    background: #effbf8;
}

.coloc-browse-item.active {
    box-shadow: inset 3px 0 0 var(--teal);
}

.coloc-browse-item small {
    white-space: nowrap;
}

.coloc-source-list {
    display: grid;
    gap: 6px;
}

.coloc-source-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #d9e6ef;
    border-radius: 7px;
    background: #ffffff;
    padding: 8px 10px;
    color: #071f41;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.coloc-source-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coloc-source-button b {
    color: var(--teal);
}

.coloc-source-button.active,
.coloc-source-button:hover,
.coloc-source-button:focus {
    border-color: var(--teal);
    background: #effbf8;
}

.coloc-card h3 span:first-child {
    color: var(--teal);
    font-weight: 900;
}

.coloc-browse-table-panel {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.coloc-browse-table-panel.is-hidden,
.coloc-detail-panel.is-hidden {
    display: none;
}

.coloc-browse-table-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.44fr);
    gap: 18px;
    align-items: center;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: linear-gradient(90deg, rgba(248, 253, 253, 0.98), #ffffff);
    padding: 18px;
}

.coloc-browse-table-header h2 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 24px;
    line-height: 1.2;
}

.coloc-browse-table-header p {
    margin: 0;
    color: #536682;
    font-size: 13px;
    line-height: 1.5;
}

.coloc-browse-table-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border: 1px solid #d6e4ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.coloc-browse-table-metrics div {
    padding: 12px 8px;
    border-right: 1px solid #d6e4ef;
    text-align: center;
}

.coloc-browse-table-metrics div:last-child {
    border-right: 0;
}

.coloc-browse-table-metrics dt {
    margin: 0 0 5px;
    color: #61738d;
    font-size: 11px;
    font-weight: 900;
}

.coloc-browse-table-metrics dd {
    margin: 0;
    color: var(--teal);
    font-size: 19px;
    font-weight: 900;
}

.coloc-browse-table {
    min-height: 420px;
}

.coloc-table-limit-note {
    margin: 0 2px 10px;
    padding: 10px 12px;
    border: 1px solid rgba(13, 133, 132, 0.18);
    border-radius: 8px;
    background: rgba(13, 133, 132, 0.06);
    color: #52657f;
    font-size: 13px;
    font-weight: 800;
}

.coloc-trait-table-shell {
    overflow-x: hidden;
    padding: 2px 2px 8px;
}

.coloc-trait-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.coloc-trait-table .coloc-col-id {
    width: 27%;
}

.coloc-trait-table .coloc-col-name {
    width: 34%;
}

.coloc-trait-table .coloc-col-records {
    width: 10%;
}

.coloc-trait-table .coloc-col-genes {
    width: 8%;
}

.coloc-trait-table .coloc-col-metabolites {
    width: 11%;
}

.coloc-trait-table .coloc-col-action {
    width: 10%;
}

.coloc-canonical-table .coloc-col-canonical-name { width: 26%; }
.coloc-canonical-table .coloc-col-mapping { width: 12%; }
.coloc-canonical-table .coloc-col-type { width: 7%; }
.coloc-canonical-table .coloc-col-source-traits { width: 13%; }
.coloc-canonical-table .coloc-col-records { width: 15%; }
.coloc-canonical-table .coloc-col-metabolites { width: 12%; }
.coloc-canonical-table .coloc-col-source-action { width: 9%; }
.coloc-canonical-table .coloc-col-action { width: 6%; }

.coloc-trait-table th {
    padding: 0 8px 4px;
    color: #536682;
    font-size: 11px;
    font-weight: 900;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
}

.coloc-trait-table th button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.coloc-trait-table tbody tr {
    border-radius: 8px;
    cursor: pointer;
}

.coloc-trait-table td {
    border-top: 1px solid #d9e6ef;
    border-bottom: 1px solid #d9e6ef;
    background: #ffffff;
    padding: 11px 8px;
    color: #071f41;
    font-size: 13px;
    font-weight: 750;
    vertical-align: middle;
    white-space: normal;
    overflow-wrap: anywhere;
}

.coloc-trait-table td:first-child {
    border-left: 1px solid #d9e6ef;
    border-radius: 8px 0 0 8px;
}

.coloc-trait-table td:last-child {
    border-right: 1px solid #d9e6ef;
    border-radius: 0 8px 8px 0;
}

.coloc-trait-table tbody tr:hover td,
.coloc-trait-table tbody tr:focus td,
.coloc-trait-table tbody tr.active td {
    border-color: rgba(0, 132, 132, 0.58);
    background: #effbf8;
}

.coloc-trait-table tbody tr:hover td:first-child,
.coloc-trait-table tbody tr:focus td:first-child,
.coloc-trait-table tbody tr.active td:first-child {
    box-shadow: inset 4px 0 0 var(--teal);
}

.coloc-trait-name {
    min-width: 0;
    max-width: none;
}

.coloc-trait-name strong,
.coloc-trait-display-name strong {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.coloc-trait-name strong,
.coloc-trait-display-name strong {
    color: #071f41;
    font-size: 14px;
    font-weight: 900;
}

.coloc-trait-display-name {
    min-width: 0;
    max-width: none;
}

.coloc-trait-display-name small {
    display: block;
    margin-top: 3px;
    color: #60738d;
    font-size: 10px;
    font-weight: 800;
}

.coloc-canonical-table .canonical-trait-row {
    cursor: default;
}

.coloc-pair-source-links summary {
    cursor: pointer;
    text-decoration: underline;
}

.coloc-sources-button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--teal);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.coloc-sources-button:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}

.canonical-source-row td {
    padding: 0 12px 14px;
    background: #f7fbfd;
}

.canonical-source-panel {
    padding: 12px;
    border-left: 4px solid var(--teal);
}

.canonical-source-boundary {
    margin-bottom: 10px;
    color: #52657f;
    font-size: 12px;
    font-weight: 700;
}

.canonical-source-boundary > div {
    display: grid;
    grid-template-columns: minmax(210px, 0.28fr) minmax(0, 1fr);
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid #e4edf4;
}

.canonical-source-boundary strong {
    color: #173556;
}

.canonical-source-boundary p {
    margin: 8px 0 0;
    font-weight: 600;
}

.coloc-review-pmid {
    color: var(--teal);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.coloc-table-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 2px;
    color: #52657f;
    font-size: 12px;
    font-weight: 800;
}

.coloc-table-pagination span {
    margin-right: auto;
}

.coloc-table-pagination label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.coloc-table-pagination select,
.coloc-table-pagination button {
    min-height: 34px;
    border: 1px solid #c7dce8;
    border-radius: 6px;
    background: #fff;
    color: #173556;
    padding: 5px 10px;
    font: inherit;
}

.coloc-table-pagination button:not(:disabled) {
    cursor: pointer;
}

.coloc-table-pagination button:disabled {
    opacity: 0.45;
}

.canonical-source-table-shell {
    overflow-x: auto;
}

.canonical-source-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.canonical-source-table th,
.canonical-source-table td {
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #d9e6ef;
    border-radius: 0;
    background: transparent;
    color: #071f41;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
}

.canonical-source-table th {
    color: #536682;
    font-size: 10px;
    text-transform: uppercase;
}

.canonical-source-table .coloc-source-code {
    display: block;
    margin-top: 3px;
    color: #607590;
    font-size: 11px;
    font-weight: 400;
    overflow-wrap: anywhere;
}

.coloc-source-open {
    color: var(--teal);
    font-weight: 900;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mapping-badge, .mapping-filter {
    display: inline-block;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 12px;
    line-height: 1.4;
    font-weight: 700;
}
.mapping-mapped { color: #17633a; background: #eef8f1; }
.mapping-source { color: #215e92; background: #eef5fc; }
.mapping-partial, .mapping-review { color: #8b4b00; background: #fff5e7; }
.coloc-mapping-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.mapping-filter-title { color: #52657f; font-size: 12px; font-weight: 700; }
.mapping-filter { cursor: pointer; }
.mapping-filter[aria-pressed="true"] { outline: 2px solid currentColor; outline-offset: 2px; }
.canonical-source-panel h3 { margin: 0 0 10px; color: #173556; font-size: 14px; }
.canonical-mapping h3 .mapping-badge { margin-left: 8px; }
.canonical-mapping p, .canonical-evidence p { color: #52657f; font-size: 12px; margin: 0 0 10px; }
.canonical-mapping-details { margin-top: 10px; }
.canonical-evidence { border-top: 1px solid #d9e6ef; margin-top: 18px; padding-top: 14px; }
.canonical-source-panel summary { color: #176274; font-size: 12px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.canonical-mapping-table { min-width: 580px; table-layout: fixed; }
.canonical-mapping-table th, .canonical-mapping-table td { overflow-wrap: anywhere; }
.canonical-evidence-table { min-width: 750px; }
body[data-page="colocalization"] .coloc-browse-table-panel { grid-template-columns: minmax(0, 1fr); }
body[data-page="colocalization"] .coloc-browse-table-panel > * { min-width: 0; max-width: 100%; }
body[data-page="colocalization"] .coloc-trait-table-shell { overflow-x: auto; }
@media (max-width: 1000px) {
    body[data-page="colocalization"] .coloc-browse-table-header { grid-template-columns: minmax(0, 1fr); padding: 12px; }
    body[data-page="colocalization"] .coloc-canonical-table { min-width: 850px; }
}

.help-inline[data-tooltip] {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #60738d;
    cursor: help;
}

.help-inline[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 30;
    width: 260px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #071f41;
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 4px);
    transition: opacity .12s ease, transform .12s ease;
}

.help-inline[data-tooltip]:hover::after,
.help-inline[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.coloc-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    min-height: 30px;
    border: 1px solid #bcd4e5;
    border-radius: 7px;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
}

.coloc-trait-table tbody tr:hover .coloc-row-action,
.coloc-trait-table tbody tr:focus .coloc-row-action {
    border-color: var(--teal);
    background: var(--teal);
    color: #ffffff;
}

.coloc-category-list {
    display: grid;
    gap: 10px;
}

.coloc-category-record {
    display: grid;
    grid-template-columns: minmax(260px, 1.15fr) minmax(430px, 1fr) auto;
    gap: 18px;
    align-items: center;
    width: 100%;
    border: 1px solid #d9e6ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px 16px;
    color: #071f41;
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(7, 31, 65, 0.035);
}

.coloc-category-record:hover,
.coloc-category-record:focus,
.coloc-category-record.active {
    border-color: rgba(0, 132, 132, 0.55);
    background: linear-gradient(90deg, #effbf8 0%, #ffffff 100%);
    box-shadow: inset 3px 0 0 var(--teal), 0 10px 22px rgba(7, 31, 65, 0.06);
    outline: none;
}

.coloc-category-main {
    min-width: 0;
}

.coloc-category-main strong,
.coloc-category-main small {
    display: block;
}

.coloc-category-main strong {
    overflow: hidden;
    color: #071f41;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coloc-category-main small {
    margin-top: 4px;
    color: #647792;
    font-size: 12px;
    font-weight: 800;
}

.coloc-category-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(62px, 1fr));
    gap: 8px;
}

.coloc-category-metrics span {
    display: grid;
    gap: 2px;
    min-height: 48px;
    align-content: center;
    border: 1px solid #e0ebf2;
    border-radius: 7px;
    background: #f8fcfd;
    padding: 7px 8px;
    text-align: center;
}

.coloc-category-metrics small {
    color: #61738d;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.coloc-category-metrics b {
    color: var(--teal);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.15;
}

.coloc-category-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 38px;
    border: 1px solid #bcd4e5;
    border-radius: 7px;
    background: #ffffff;
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.coloc-category-record:hover .coloc-category-action,
.coloc-category-record:focus .coloc-category-action {
    border-color: var(--teal);
    background: var(--teal);
    color: #ffffff;
}

.coloc-detail-main .breadcrumb {
    margin-bottom: 12px;
}

.coloc-detail-shell {
    display: block;
}

.coloc-detail-page-panel {
    border: 0;
    padding: 0;
    background: transparent;
}

.coloc-back-button {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0 0 12px;
    border: 1px solid #bcd4e5;
    border-radius: 7px;
    background: #ffffff;
    padding: 7px 10px;
    color: var(--teal);
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.coloc-back-button:hover,
.coloc-back-button:focus {
    border-color: var(--teal);
    background: #effbf8;
}

.coloc-locus-overview {
    display: grid;
    gap: 12px;
}

.coloc-chrom-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.coloc-chrom-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cfe0eb;
    border-radius: 999px;
    background: #ffffff;
    padding: 7px 10px;
    color: #071f41;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.coloc-chrom-pill b {
    color: var(--teal);
}

.coloc-chrom-pill.active,
.coloc-chrom-pill:hover,
.coloc-chrom-pill:focus {
    border-color: var(--teal);
    background: #eaf9f6;
}

.coloc-locus-summary-card {
    display: grid;
    grid-template-columns: minmax(230px, 0.8fr) minmax(360px, 1.2fr) minmax(150px, 0.32fr);
    gap: 14px;
    align-items: center;
    border: 1px solid #bfe3e0;
    border-radius: 8px;
    background: #fbfefd;
    padding: 14px;
}

.coloc-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid #a9d9d6;
    border-radius: 999px;
    background: #ecfbf8;
    padding: 2px 9px;
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
}

.coloc-locus-main h4 {
    margin: 10px 0 8px;
    color: var(--teal);
    font-size: 20px;
    line-height: 1.2;
}

.coloc-locus-main h4 em {
    display: inline-flex;
    margin-left: 8px;
    border-radius: 999px;
    background: #dff5f2;
    padding: 2px 8px;
    color: #006c6a;
    font-size: 12px;
    font-style: normal;
    vertical-align: middle;
}

.coloc-locus-main p {
    margin: 4px 0;
    color: #405572;
    font-size: 13px;
}

.coloc-locus-track {
    min-width: 0;
}

.coloc-locus-track svg {
    display: block;
    width: 100%;
    min-height: 130px;
}

.coloc-locus-side {
    display: grid;
    gap: 8px;
    margin: 0;
}

.coloc-locus-side div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.coloc-locus-side dt {
    color: #536682;
    font-size: 12px;
    font-weight: 900;
}

.coloc-locus-side dd {
    margin: 0;
    color: var(--teal);
    font-weight: 900;
}

.coloc-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr) minmax(360px, 0.95fr);
}

.coloc-scatter-card {
    min-height: 360px;
}

.coloc-pp-scatter svg {
    display: block;
    width: 100%;
    min-height: 300px;
}

.coloc-pp-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin: 10px 0 16px;
}

.coloc-pp-summary div {
    border: 1px solid #dce9f1;
    border-radius: 8px;
    background: #f8fbfd;
    padding: 10px;
}

.coloc-pp-summary dt {
    margin: 0 0 4px;
    color: #536682;
    font-size: 11px;
    font-weight: 900;
}

.coloc-pp-summary dd {
    margin: 0;
    color: var(--teal);
    font-size: 18px;
    font-weight: 900;
    white-space: nowrap;
}

.coloc-pp-distribution {
    display: grid;
    gap: 12px;
}

.coloc-pp-bin {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 10px;
    color: #071f41;
    font-size: 12px;
    font-weight: 900;
}

.coloc-pp-bin div {
    height: 12px;
    border-radius: 999px;
    background: #edf4f8;
    overflow: hidden;
}

.coloc-pp-bin i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--teal);
}

.coloc-pp-bin.moderate i {
    background: #8ed2ca;
}

.coloc-pp-bin.low i {
    background: #f2b35c;
}

.coloc-pp-bin.muted i {
    background: #b7c4cf;
}

.coloc-pp-bin b {
    color: var(--teal);
    text-align: right;
}

.coloc-metabolite-row {
    grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1fr) auto;
}

.coloc-compact-table .table-toolbar,
.coloc-compact-table .table-pagination {
    margin: 10px 0;
}

.coloc-compact-table table {
    font-size: 13px;
}

.coloc-compact-table th,
.coloc-compact-table td {
    padding: 10px 12px;
}

.coloc-locus-record-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
}

.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border: 1px solid #b9d5e5;
    border-radius: 7px;
    background: #ffffff;
    padding: 8px 12px;
    color: var(--teal);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}

.link-button:hover,
.link-button:focus {
    border-color: var(--teal);
    background: #f1fbfa;
}

.feature-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 16px;
    border: 1px solid #b9d5e5;
    border-radius: 8px;
    background: #ffffff;
    overflow-x: auto;
    box-shadow: 0 8px 22px rgba(7, 31, 65, 0.04);
}

.feature-tab-button {
    position: relative;
    flex: 1 0 max-content;
    min-width: 118px;
    min-height: 54px;
    border: 0;
    border-right: 1px solid #e1ebf3;
    background: transparent;
    padding: 10px 14px;
    color: #071f41;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.feature-tab-button:last-child {
    border-right: 0;
}

.feature-tab-button.active {
    color: var(--teal);
    background: #f0fbfa;
}

.feature-tab-button.active::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 8px;
    left: 14px;
    height: 3px;
    border-radius: 999px;
    background: var(--teal);
}

.feature-tab-panels {
    margin-top: 16px;
}

.feature-tab-panel {
    display: none;
}

.feature-tab-panel.active {
    display: block;
}

.feature-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.feature-section-heading .catalog-section-title {
    margin: 0;
}

.feature-overview-case-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

.feature-overview-lead {
    margin-top: 16px;
}

.feature-overview-case {
    display: grid;
    gap: 6px;
    min-width: 0;
    min-height: 138px;
    border: 1px solid #d8e5ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.feature-overview-case span {
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.feature-overview-case strong {
    min-width: 0;
    color: #071f41;
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.feature-overview-case small,
.feature-overview-case em {
    color: #53657e;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.feature-overview-case.active {
    border-color: #8bc9ca;
    background: #eefbf9;
    box-shadow: inset 4px 0 0 var(--teal);
}

.feature-overview-active {
    margin-top: 14px;
}

.feature-active-summary {
    display: grid;
    grid-template-columns: minmax(260px, 0.85fr) minmax(360px, 0.95fr) minmax(320px, 1fr);
    gap: 16px;
    border: 1px solid #cde0ed;
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(232, 249, 246, 0.86), rgba(255, 255, 255, 0.98) 38%),
        #ffffff;
    padding: 16px;
}

.feature-active-copy h2 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 26px;
    line-height: 1.15;
}

.feature-active-copy p {
    margin: 0;
    color: #314765;
    line-height: 1.45;
}

.feature-active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.feature-active-tags span {
    border: 1px solid #b9d5e5;
    border-radius: 999px;
    background: #ffffff;
    padding: 5px 9px;
    color: #087b7d;
    font-size: 12px;
    font-weight: 900;
}

.feature-active-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid #d9e5ef;
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.feature-active-metrics span {
    display: grid;
    align-content: center;
    min-height: 72px;
    border-right: 1px solid #d9e5ef;
    border-bottom: 1px solid #d9e5ef;
    padding: 10px;
    color: #071f41;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
}

.feature-active-metrics span:nth-child(2n) {
    border-right: 0;
}

.feature-active-metrics span:nth-last-child(-n+2) {
    border-bottom: 0;
}

.feature-active-metrics strong {
    display: block;
    color: var(--teal);
    font-size: 25px;
    line-height: 1.1;
}

.feature-active-insights {
    display: grid;
    gap: 10px;
}

.feature-active-insights section {
    border: 1px solid #e0e9f2;
    border-radius: 7px;
    background: #fbfdff;
    padding: 10px;
}

.feature-active-insights strong {
    display: block;
    margin-bottom: 4px;
    color: #087b7d;
    font-size: 12px;
}

.feature-active-insights p {
    margin: 0;
    color: #213a5b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
}

.feature-entry-grid .entity-card {
    min-height: 164px;
}

.feature-module-section,
.feature-featured-section,
.feature-next-section {
    margin-top: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 16px;
}

.feature-module-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.feature-module-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 234px;
    border: 1px solid #d8e5ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 18px;
}

.feature-module-card img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e8f8f6;
    padding: 10px;
}

.feature-module-card.purple img {
    background: #f0eafd;
}

.feature-module-card.blue img {
    background: #e9f2ff;
}

.feature-module-card.orange img {
    background: #fff0df;
}

.feature-module-card h3 {
    margin: 0;
    color: #071f41;
    font-size: 18px;
}

.feature-module-card p {
    margin: 0;
    color: #314765;
    line-height: 1.45;
}

.feature-module-card .link-button {
    align-self: end;
    justify-self: start;
}

.feature-featured-case {
    display: grid;
    grid-template-columns: minmax(280px, 0.45fr) minmax(0, 1fr);
    gap: 16px;
    margin-top: 12px;
}

.feature-featured-copy {
    min-width: 0;
    border-right: 1px solid #dce7f0;
    padding-right: 18px;
}

.feature-featured-copy h3 {
    margin: 0 0 8px;
    color: var(--teal);
    font-size: 28px;
    line-height: 1.15;
}

.feature-featured-copy p {
    margin: 0 0 14px;
    color: #314765;
    line-height: 1.45;
}

.feature-featured-copy dl {
    display: grid;
    grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr);
    gap: 9px 12px;
    margin: 0 0 16px;
}

.feature-featured-copy dt {
    color: #53657e;
    font-size: 12px;
    font-weight: 900;
}

.feature-featured-copy dd {
    min-width: 0;
    margin: 0;
    color: #071f41;
    font-size: 13px;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.feature-featured-network {
    min-width: 0;
}

.feature-featured-network svg {
    display: block;
    width: 100%;
    min-height: 260px;
}

.feature-flow-edge {
    fill: none;
    stroke: #c7d7e6;
    stroke-width: 1.4;
}

.feature-flow-edge.muted {
    stroke-dasharray: 4 5;
}

.feature-flow-node circle {
    stroke: #ffffff;
    stroke-width: 2;
}

.feature-flow-node text,
.feature-flow-heading {
    fill: #102446;
    font-size: 12px;
    font-weight: 900;
}

.feature-flow-heading {
    fill: #53657e;
    font-size: 11px;
}

.feature-flow-center {
    fill: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

.feature-flow-center.small {
    font-size: 10px;
}

.feature-flow-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    color: #314765;
    font-size: 12px;
    font-weight: 800;
}

.feature-flow-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.feature-flow-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.feature-next-actions {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.feature-next-actions a,
.feature-next-actions button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    border: 1px solid #d8e5ef;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    color: #071f41;
    font: inherit;
    font-weight: 900;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.feature-next-actions a:hover,
.feature-next-actions button:hover {
    border-color: #8bc9ca;
    background: #f1fbfa;
    color: var(--teal);
}

.feature-dashboard {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    grid-template-areas:
        "evidence network heatmap"
        "enrichment study disease";
    gap: 14px;
    margin-top: 16px;
}

.feature-viz-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.97);
    padding: 14px;
    box-shadow: 0 10px 28px rgba(7, 31, 65, 0.04);
}

.evidence-card {
    grid-area: evidence;
}

.network-card {
    grid-area: network;
}

.heatmap-card {
    grid-area: heatmap;
}

.enrichment-card {
    grid-area: enrichment;
}

.study-card {
    grid-area: study;
}

.disease-card {
    grid-area: disease;
}

.feature-viz-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.feature-viz-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: 17px;
    line-height: 1.25;
}

.feature-viz-heading span,
.feature-viz-legend {
    color: #52657f;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.feature-viz-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 10px;
    white-space: normal;
}

.feature-viz-legend span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #314765;
}

.feature-viz-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.feature-network-note {
    max-width: 360px;
    border: 1px solid #cfe8e5;
    border-radius: 8px;
    background: #f2fbf9;
    padding: 10px 12px;
    color: #087b7d;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.network-clustering-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 14px;
    margin-top: 14px;
}

.network-cluster-card,
.network-module-cluster-card,
.network-module-card,
.network-bipartite-card {
    grid-column: 1 / -1;
}

.info-dot {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid #bdd2e5;
    border-radius: 999px;
    background: #ffffff;
    color: #53657e;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
    cursor: help;
}

.feature-card-heading > .info-dot,
.feature-viz-heading > .info-dot {
    margin-left: auto;
}

.heatmap-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: stretch;
}

.compact-select {
    display: inline-grid;
    gap: 4px;
    min-width: 146px;
    color: #40546f;
    font-size: 12px;
    font-weight: 800;
}

.compact-select select {
    min-height: 34px;
    border: 1px solid #cad9e7;
    border-radius: 7px;
    background: #ffffff;
    padding: 0 10px;
    color: #071f41;
    font: inherit;
}

.cluster-heatmap-scroll,
.module-heatmap-scroll {
    overflow: auto;
    border: 1px solid #e1ebf3;
    border-radius: 8px;
    background: #fbfdff;
}

.cluster-heatmap-grid {
    display: grid;
    grid-template-columns: 220px repeat(var(--cluster-n), 22px);
    gap: 2px;
    min-width: max-content;
    padding: 10px;
}

.formal-cluster-grid {
    grid-template-columns: 245px repeat(var(--cluster-n), 56px);
    gap: 7px 8px;
    padding: 14px;
}

.cluster-mode-tabs {
    display: inline-flex;
    gap: 0;
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid #c8d8e7;
    border-radius: 8px;
    background: #ffffff;
}

.cluster-mode-tabs button {
    min-width: 138px;
    border: 0;
    border-right: 1px solid #d8e4ef;
    background: #ffffff;
    padding: 9px 14px;
    color: #314466;
    font-weight: 900;
    cursor: pointer;
}

.cluster-mode-tabs button:last-child {
    border-right: 0;
}

.cluster-mode-tabs button.active {
    background: #e9fbfa;
    color: var(--teal);
    box-shadow: inset 0 0 0 1px var(--teal);
}

.cluster-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #314466;
    font-size: 12px;
    font-weight: 800;
}

.cluster-legend-row i {
    width: 56px;
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, #f04444, #f8fafc, #087b7d);
}

.cluster-legend-row i.neg {
    width: 28px;
    background: #f04444;
}

.cluster-legend-row i.pos {
    width: 28px;
    background: #087b7d;
}

.cluster-corner,
.cluster-col-label,
.cluster-row-label,
.cluster-cell {
    min-width: 0;
}

.cluster-corner {
    position: sticky;
    left: 0;
    z-index: 3;
    background: #fbfdff;
    color: #52657f;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.cluster-col-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    position: relative;
    height: 110px;
    border-right: 4px solid var(--class-color, #9aa8b7);
    padding-right: 3px;
    color: #52657f;
    font-size: 10px;
    font-weight: 800;
    text-align: left;
}

.formal-cluster-grid .cluster-col-label {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 56px;
    height: 78px;
    border-right: 0;
    border-bottom: 5px solid var(--class-color, #9aa8b7);
    padding: 0 2px 7px;
    text-align: center;
    line-height: 1.15;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    writing-mode: horizontal-tb;
    transform: none;
    overflow: hidden;
}

.cluster-row-label {
    position: sticky;
    left: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr);
    gap: 2px 8px;
    align-items: center;
    min-height: 22px;
    border: 0;
    background: #fbfdff;
    padding: 0 8px 0 0;
    text-align: left;
}

.cluster-row-label i {
    grid-row: 1 / span 2;
    width: 9px;
    height: 22px;
    border-radius: 999px;
}

.cluster-row-label strong {
    overflow: hidden;
    color: #071f41;
    font-size: 11px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cluster-row-label small {
    overflow: hidden;
    color: #6a7c92;
    font-size: 9.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cluster-cell {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 3px;
    color: #ffffff;
    font-size: 8px;
    font-weight: 900;
    cursor: crosshair;
}

.formal-cluster-grid .cluster-cell {
    width: 56px;
    height: 30px;
    border-radius: 5px;
    font-size: 10px;
}

.cluster-cell:focus,
.cluster-cell:hover,
.module-heatmap-grid button:focus,
.module-heatmap-grid button:hover {
    outline: 2px solid #071f41;
    outline-offset: 1px;
}

.cluster-cell.selected,
.module-heatmap-grid button.selected {
    box-shadow: 0 0 0 2px #071f41, 0 0 0 5px rgba(8, 123, 125, 0.15);
}

.module-heatmap-grid {
    display: grid;
    grid-template-columns: 190px repeat(var(--module-cols), minmax(88px, 1fr));
    gap: 3px;
    min-width: 820px;
    padding: 10px;
}

.module-heatmap-grid strong,
.module-heatmap-grid b {
    color: #314466;
    font-size: 11px;
    font-weight: 900;
}

.module-heatmap-grid strong {
    text-align: center;
    border-top: 4px solid var(--group-color, #ee8a21);
    padding-top: 4px;
}

.formal-module-disease-grid {
    grid-template-columns: minmax(210px, 260px) repeat(var(--module-cols), minmax(96px, 1fr));
}

.formal-module-disease-grid strong {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-height: 54px;
    padding: 5px 4px 6px;
    line-height: 1.2;
    overflow-wrap: anywhere;
    text-align: center;
}

.formal-module-disease-grid b {
    display: flex;
    align-items: center;
    min-height: 36px;
    line-height: 1.2;
}

.module-heatmap-grid b {
    border-left: 5px solid var(--module-color, #12a79b);
    padding-left: 7px;
}

.module-heatmap-grid button {
    display: grid;
    place-items: center;
    min-height: 34px;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    cursor: crosshair;
}

.heatmap-detail-panel {
    min-height: 330px;
    border: 1px solid #e0e9f2;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fcff);
    padding: 14px;
    color: #314466;
}

.heatmap-detail-panel h3 {
    margin: 0 0 6px;
    color: var(--teal);
    font-size: 18px;
}

.heatmap-detail-panel p {
    margin: 0 0 10px;
    color: #53657e;
    font-size: 12px;
    line-height: 1.45;
}

.heatmap-detail-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.heatmap-detail-kpis div {
    border: 1px solid #e0e9f2;
    border-radius: 7px;
    background: #ffffff;
    padding: 8px;
}

.heatmap-detail-kpis strong {
    display: block;
    color: #071f41;
    font-size: 13px;
}

.heatmap-detail-kpis span {
    color: #6a7c92;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.correlation-scatter-svg {
    width: 100%;
    height: auto;
    min-height: 210px;
    border: 1px solid #e7eff6;
    border-radius: 7px;
    background: #ffffff;
}

.correlation-scatter-svg .axis {
    stroke: #9aa8b7;
    stroke-width: 1;
}

.correlation-scatter-svg .grid {
    stroke: #e8eef4;
    stroke-width: 1;
}

.correlation-scatter-svg .ci {
    fill: rgba(145, 153, 166, 0.28);
}

.correlation-scatter-svg .trend {
    fill: none;
    stroke: #087b7d;
    stroke-width: 2.2;
}

.correlation-scatter-svg .point {
    fill: #1267c9;
    opacity: 0.78;
}

.heatmap-detail-list {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    font-size: 11px;
    line-height: 1.35;
}

.heatmap-detail-list span {
    color: #6a7c92;
    font-weight: 900;
}

.network-cluster-card .heatmap-workbench {
    grid-template-columns: minmax(520px, 58%) minmax(440px, 1fr);
    align-items: start;
}

.network-cluster-card .cluster-heatmap-scroll,
.network-cluster-card .heatmap-detail-panel {
    max-height: 520px;
}

.network-cluster-card .formal-cluster-grid {
    grid-template-columns: 190px repeat(var(--cluster-n), 46px);
    gap: 5px 6px;
    padding: 10px 12px;
}

.network-cluster-card .formal-cluster-grid .cluster-col-label {
    width: 46px;
    height: 62px;
    padding-bottom: 5px;
    font-size: 9.5px;
}

.network-cluster-card .cluster-row-label {
    min-height: 25px;
}

.network-cluster-card .cluster-row-label strong {
    font-size: 10.5px;
}

.network-cluster-card .formal-cluster-grid .cluster-cell {
    width: 46px;
    height: 25px;
    font-size: 9px;
}

.network-cluster-card .heatmap-detail-panel {
    min-height: 0;
    padding: 12px;
}

.network-cluster-card .heatmap-detail-panel h3 {
    font-size: 16px;
}

.network-cluster-card .heatmap-detail-kpis {
    gap: 6px;
}

.network-cluster-card .heatmap-detail-kpis div {
    padding: 7px 8px;
}

.network-cluster-card .correlation-scatter-svg {
    max-height: 190px;
    min-height: 165px;
}

.network-cluster-card .heatmap-detail-list {
    max-height: 112px;
    overflow: auto;
}

.module-network-layout {
    display: grid;
    grid-template-columns: minmax(620px, 1fr) 310px;
    gap: 14px;
    margin-top: 12px;
}

.module-disease-graph {
    min-height: 470px;
    border: 1px solid #e0e9f2;
    border-radius: 8px;
    background:
        radial-gradient(circle at 50% 48%, rgba(18, 167, 155, 0.08), transparent 31%),
        linear-gradient(180deg, #f8fcff, #ffffff);
    overflow: hidden;
}

.module-disease-graph svg {
    display: block;
    width: 100%;
    height: 470px;
}

.module-edge {
    fill: none;
    opacity: 0.72;
    cursor: pointer;
}

.module-edge:hover {
    opacity: 1;
}

.module-node-card {
    cursor: pointer;
}

.module-node-card rect {
    fill: #ffffff;
    stroke: #cfdeeb;
    stroke-width: 1.2;
    filter: drop-shadow(0 8px 15px rgba(7, 31, 65, 0.08));
}

.module-node-card.selected rect,
.module-node-card:hover rect {
    stroke: #087b7d;
    stroke-width: 2.2;
}

.module-node-card text {
    fill: #071f41;
    font-size: 12px;
    font-weight: 900;
}

.module-node-card .small {
    fill: #53657e;
    font-size: 10.5px;
    font-weight: 700;
}

.module-network-detail {
    border: 1px solid #dce8f2;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    color: #11284a;
    overflow-wrap: anywhere;
}

.module-network-detail h3 {
    margin: 0 0 8px;
    color: #087b7d;
    font-size: 16px;
}

.module-network-detail h4 {
    margin: 12px 0 4px;
    color: #071f41;
    font-size: 13px;
}

.module-network-detail p {
    margin: 0 0 10px;
    color: #53657e;
    font-size: 13px;
    line-height: 1.45;
}

.module-network-detail dl {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 6px 10px;
    margin: 0;
}

.module-network-detail dt {
    color: #64758b;
    font-weight: 900;
}

.module-network-detail dd {
    margin: 0;
    color: #071f41;
    font-weight: 800;
}

.case-level-network-card {
    margin-top: 14px;
}

.case-network-actions {
    justify-content: flex-start;
    margin-top: 10px;
}

.feature-tier-viz,
.feature-bar-viz {
    display: grid;
    gap: 9px;
}

.feature-bar-row {
    display: grid;
    grid-template-columns: minmax(92px, 0.9fr) minmax(110px, 1.5fr) minmax(64px, auto);
    align-items: center;
    gap: 10px;
}

.feature-bar-label {
    min-width: 0;
    color: #213a5b;
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-bar-track {
    height: 12px;
    border-radius: 999px;
    background: #edf3f8;
    overflow: hidden;
}

.feature-bar-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.feature-bar-row strong {
    color: #071f41;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}

.network-workbench {
    display: grid;
    grid-template-columns: 260px minmax(560px, 1fr) 300px;
    gap: 14px;
    align-items: stretch;
    margin-top: 14px;
}

.network-explorer-controls {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 0.8fr) minmax(100px, 0.5fr) minmax(150px, 0.8fr) minmax(140px, 0.7fr) auto;
    gap: 10px;
    align-items: end;
    margin: 14px 0 4px;
    padding: 12px;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    background: #f8fcff;
}

.network-explorer-controls label {
    display: grid;
    gap: 5px;
    color: #40546f;
    font-size: 13px;
    font-weight: 800;
}

.network-explorer-controls input,
.network-explorer-controls select {
    width: 100%;
    min-height: 38px;
    border: 1px solid #cad9e7;
    border-radius: 7px;
    padding: 0 10px;
    color: #071f41;
    background: #ffffff;
    font: inherit;
}

.network-explorer-controls button,
.entity-network-actions button,
.entity-network-actions a {
    min-height: 38px;
    border: 1px solid #b8d3e5;
    border-radius: 7px;
    padding: 0 14px;
    background: #ffffff;
    color: #087b7d;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.network-explorer-controls button {
    color: #ffffff;
    background: #008b87;
    border-color: #008b87;
}

.entity-network-card {
    margin-top: 16px;
}

.entity-network-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.mini-network-workbench {
    grid-template-columns: 180px minmax(680px, 1fr) 220px;
    gap: 12px;
}

.mini-network-viz {
    min-height: 500px;
    overflow: hidden;
}

.mini-network-viz svg {
    height: 500px;
}

.search-evidence-chain {
    display: grid;
    gap: 14px;
    min-height: 500px;
    padding: 4px;
}

.search-evidence-chain--trait {
    min-height: 0;
}

.search-chain-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fcfc;
}

.search-chain-legend span,
.search-chain-locus-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.search-chain-legend b {
    color: var(--ink);
    font-size: 0.8rem;
}

.evidence-marker {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    background: var(--teal);
}

.evidence-marker--circle {
    border-radius: 999px;
}

.evidence-marker--diamond {
    transform: rotate(45deg);
    border-radius: 2px;
}

.evidence-marker--triangle {
    width: 0;
    height: 0;
    background: transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 13px solid #1768c9;
}

.evidence-marker--square {
    border-radius: 3px;
}

.evidence-marker--star {
    background: #cf4c4c;
    clip-path: polygon(50% 0%, 62% 34%, 98% 35%, 69% 56%, 79% 91%, 50% 70%, 21% 91%, 31% 56%, 2% 35%, 38% 34%);
}

.evidence-kind-association {
    background: #11a5a0;
}

.evidence-kind-coloc {
    background: #7e66be;
}

.evidence-kind-qtl {
    background: #1768c9;
}

.evidence-kind-combined {
    background: #f28c28;
}

.evidence-kind-fine {
    background: #cf4c4c;
}

.search-chain-layer {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff, #f8fcfc);
    padding: 14px;
}

.search-chain-layer + .search-chain-layer {
    position: relative;
}

.search-chain-layer + .search-chain-layer::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    width: 2px;
    height: 16px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 139, 139, 0.7) 0,
        rgba(0, 139, 139, 0.7) 5px,
        transparent 5px,
        transparent 9px
    );
}

.search-chain-layer-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.search-chain-layer-head > span {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 139, 139, 0.11);
    color: var(--teal);
    font-weight: 900;
    flex: 0 0 auto;
}

.search-chain-layer-head h3 {
    margin: 0;
    color: var(--teal);
    font-size: 1rem;
}

.search-chain-layer-head p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.search-chain-chromosomes {
    display: grid;
    grid-template-columns: repeat(22, minmax(18px, 1fr));
    gap: 5px;
    align-items: end;
    min-height: 96px;
    padding: 8px 6px 0;
    border-bottom: 2px solid #d8e5ef;
}

.search-chain-chr {
    height: 92px;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: end;
    justify-items: center;
    gap: 3px;
}

.search-chain-chr i {
    width: 8px;
    min-height: 4px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, #11a5a0, #087b7d);
    display: block;
}

.search-chain-chr span {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 900;
}

.search-chain-loci,
.search-chain-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.search-chain-loci span,
.search-chain-chip {
    border: 1px solid rgba(0, 139, 139, 0.22);
    border-radius: 999px;
    background: rgba(0, 139, 139, 0.07);
    color: var(--ink);
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    font-weight: 800;
}

.search-chain-locus-tag {
    max-width: 280px;
}

.search-chain-locus-tag b,
.search-chain-locus-tag em {
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-chain-locus-tag b {
    max-width: 110px;
}

.search-chain-locus-tag em {
    max-width: 130px;
    color: var(--muted);
    font-style: normal;
    font-size: 0.74rem;
}

.search-chain-chip {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 7px;
    row-gap: 0.1rem;
    align-items: center;
    min-width: 150px;
    max-width: 260px;
    border-radius: 8px;
    border-left: 4px solid #11a5a0;
    background: #ffffff;
}

.search-chain-chip .evidence-marker {
    grid-row: 1 / span 2;
}

.search-chain-chip b,
.search-chain-chip em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-chain-chip em {
    color: var(--muted);
    font-style: normal;
    font-size: 0.74rem;
}

.search-chain-chip.coloc {
    border-left-color: var(--teal);
}

.search-chain-chip.rare {
    border-left-color: #cf4c4c;
    background: rgba(207, 76, 76, 0.05);
}

.search-chain-chip.gene {
    border-left-color: #7e66be;
}

.search-chain-chip.evidence-kind-association {
    border-left-color: #11a5a0;
    background: #ffffff;
}

.search-chain-chip.evidence-kind-coloc {
    border-left-color: #7e66be;
    background: #ffffff;
}

.search-chain-chip.evidence-kind-qtl {
    border-left-color: #1768c9;
    background: #ffffff;
}

.search-chain-chip.evidence-kind-combined {
    border-left-color: #f28c28;
    background: #ffffff;
}

.search-chain-chip.evidence-kind-fine {
    border-left-color: #cf4c4c;
    background: rgba(207, 76, 76, 0.05);
}

.search-chain-minimap {
    display: grid;
    gap: 6px;
    color: var(--ink);
    font-weight: 900;
    font-size: 0.82rem;
}

.search-chain-minimap i {
    width: 2px;
    height: 12px;
    margin-left: 10px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 139, 139, 0.7) 0,
        rgba(0, 139, 139, 0.7) 4px,
        transparent 4px,
        transparent 8px
    );
}

.compact-entity-evidence {
    display: grid;
    gap: 14px;
    min-height: 420px;
    padding: 4px;
}

.compact-entity-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(0, 139, 139, 0.24);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(0, 139, 139, 0.08), rgba(255, 255, 255, 0.96));
    padding: 14px 16px;
}

.compact-entity-hero h3,
.compact-entity-card h3 {
    margin: 0;
    color: var(--teal);
    font-size: 1rem;
}

.compact-entity-hero p {
    margin: 0.35rem 0 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.45;
}

.compact-entity-hero > span {
    flex: 0 0 auto;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(0, 139, 139, 0.22);
    border-radius: 999px;
    background: #ffffff;
    color: var(--ink);
    padding: 0.45rem 0.75rem;
    font-weight: 900;
}

.compact-entity-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.compact-entity-card {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
}

.compact-entity-card header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.compact-entity-card header span {
    color: var(--teal);
    font-weight: 900;
}

.compact-entity-table {
    max-height: 340px;
    overflow: auto;
}

.compact-entity-table th,
.compact-entity-table td {
    font-size: 0.78rem;
    padding: 8px 7px;
}

.compact-entity-table td:last-child,
.compact-entity-table th:last-child {
    text-align: left;
}

.compact-entity-boundary {
    margin: 0;
    border: 1px solid rgba(0, 139, 139, 0.18);
    border-radius: 8px;
    background: rgba(0, 139, 139, 0.06);
    color: var(--muted);
    padding: 10px 12px;
    font-size: 0.84rem;
    line-height: 1.5;
}

.trait-entity-evidence {
    display: grid;
    gap: 14px;
}

.trait-entity-hero {
    display: grid;
    grid-template-columns: minmax(18rem, 0.72fr) minmax(24rem, 1fr);
    align-items: stretch;
}

.trait-evidence-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(7.4rem, 1fr));
    gap: 0;
    min-width: 0;
    border: 1px solid #d1e2ef;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.trait-evidence-metrics div {
    display: grid;
    align-content: center;
    gap: 0.25rem;
    min-height: 4.65rem;
    padding: 0.8rem 0.9rem;
    border-right: 1px solid #d1e2ef;
}

.trait-evidence-metrics div:last-child { border-right: 0; }

.trait-evidence-metrics span {
    color: #52657f;
    font-size: 0.8rem;
    font-weight: 850;
}

.trait-evidence-metrics strong {
    color: var(--teal);
    font-size: 1.28rem;
    font-weight: 950;
}

.trait-evidence-chain {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid #d1e2ef;
    border-radius: 8px;
    background: #ffffff;
}

.trait-evidence-chain > header h3 {
    margin: 0;
    color: var(--teal);
    font-size: 1.05rem;
}

.trait-evidence-chain > header p {
    margin: 0.25rem 0 0;
    color: #52657f;
    font-size: 0.88rem;
    font-weight: 650;
}

.trait-evidence-chain-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.search-v2-phenotype-active .trait-evidence-chain-grid {
    grid-template-columns: minmax(0, 1fr);
}

.search-v2-phenotype-active .trait-entity-hero {
    grid-template-columns: minmax(0, 1fr);
}

.search-v2-phenotype-active .trait-evidence-metrics {
    grid-template-columns: repeat(5, minmax(7rem, 1fr));
}

.trait-evidence-chain-block {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid #d6e5f0;
    border-radius: 8px;
    background: #fbfdff;
}

.trait-evidence-chain-block header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
}

.trait-evidence-chain-block h3 {
    margin: 0;
    color: #082348;
    font-size: 0.92rem;
}

.trait-evidence-chain-block header b {
    color: var(--teal);
    font-size: 0.88rem;
}

.disease-profile-evidence {
    display: grid;
    gap: 14px;
}

.association-profile-evidence {
    display: grid;
    gap: 14px;
}

.association-profile-metrics {
    grid-template-columns: repeat(6, minmax(7.8rem, 1fr));
}

.association-profile-trust {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 0.75rem;
    align-items: baseline;
    padding: 0.8rem 0.95rem;
    border: 1px solid #d2e4ef;
    border-left: 4px solid var(--teal);
    border-radius: 6px;
    background: #f7fbfc;
    color: #52657f;
    font-size: 0.85rem;
    line-height: 1.45;
}

.association-profile-trust strong { color: #17375e; white-space: nowrap; }
.association-profile-trust small { grid-column: 2; color: #6d7f96; font-size: 0.78rem; }

.association-profile-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.association-profile-layout-single { grid-template-columns: minmax(0, 1fr); }

.association-profile-evidence-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.association-profile-evidence-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #d1e2ef;
    border-top: 3px solid #d78230;
    border-radius: 8px;
    background: #ffffff;
}

.association-profile-coloc-panel {
    border-top-color: var(--teal);
    background: #f8fcfc;
}

.association-profile-evidence-panel h4 {
    margin: 0;
    color: #17375e;
    font-size: 0.96rem;
}

.association-profile-evidence-panel p {
    min-height: 2.6rem;
    margin: 0.42rem 0 0.8rem;
    color: #52657f;
    font-size: 0.81rem;
    line-height: 1.4;
}

.association-profile-evidence-panel dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.association-profile-evidence-panel dl > div {
    min-width: 0;
    padding-top: 0.5rem;
    border-top: 1px solid #e0ebf1;
}

.association-profile-evidence-panel dt {
    overflow: hidden;
    color: #647793;
    font-size: 0.74rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.association-profile-evidence-panel dd {
    overflow: hidden;
    margin: 0.22rem 0 0;
    color: #17375e;
    font-size: 0.86rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.association-profile-chart,
.association-profile-summary-table,
.association-profile-pie {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #d1e2ef;
    border-radius: 8px;
    background: #ffffff;
}

.association-profile-chart h4,
.association-profile-summary-table h4,
.association-profile-pie h4 {
    margin: 0 0 0.8rem;
    color: #17375e;
    font-size: 0.95rem;
}

.association-profile-bar {
    display: grid;
    grid-template-columns: minmax(8rem, 0.8fr) minmax(6rem, 1.25fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 1.85rem;
    font-size: 0.78rem;
}

.association-profile-bar > span {
    overflow: hidden;
    color: #385471;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.association-profile-bar > i {
    display: block;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 3px;
    background: #e5eff4;
}

.association-profile-bar > i > b {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #008b8b;
}

.association-profile-bar strong { color: var(--teal); font-size: 0.82rem; }

.association-profile-pie-body {
    display: grid;
    grid-template-columns: 7.25rem minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
}

.association-profile-pie-body > i {
    display: block;
    width: 7.25rem;
    height: 7.25rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.45rem #ffffff, 0 0 0 1px #d9e7ef;
}

.association-profile-pie-body ol {
    display: grid;
    gap: 0.36rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.association-profile-pie-body li {
    display: grid;
    grid-template-columns: 0.62rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.44rem;
    min-width: 0;
    color: #385471;
    font-size: 0.76rem;
}

.association-profile-pie-body li > b {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 2px;
}

.association-profile-pie-body li > span {
    overflow: hidden;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.association-profile-pie-body li > strong {
    color: var(--teal);
    font-size: 0.75rem;
}

.association-profile-summary-table { overflow: hidden; }
.association-profile-summary-table > div { overflow-x: auto; }
.association-profile-summary-table table { width: 100%; min-width: 410px; border-collapse: collapse; }
.association-profile-summary-table th,
.association-profile-summary-table td {
    padding: 0.55rem 0.45rem;
    border-bottom: 1px solid #dce8f1;
    color: #385471;
    font-size: 0.79rem;
    text-align: left;
}
.association-profile-summary-table th { color: #52657f; font-weight: 850; }
.association-profile-summary-table tr:last-child td { border-bottom: 0; }
.association-profile-table td:nth-child(1) { min-width: 12rem; }
.association-profile-table td:nth-child(2),
.association-profile-table td:nth-child(3) { min-width: 8rem; }
.association-profile-table td:nth-child(4) { min-width: 12rem; color: #52657f; }

.association-profile-comparison,
.association-profile-effect {
    min-width: 0;
    padding: 1rem;
    border: 1px solid #d1e2ef;
    border-radius: 8px;
    background: #ffffff;
}

.association-profile-comparison h4,
.association-profile-effect h4 {
    margin: 0 0 0.75rem;
    color: #17375e;
    font-size: 0.95rem;
}

.association-profile-comparison-head,
.association-profile-comparison-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, 1.15fr) repeat(3, minmax(6.2rem, 1fr));
    align-items: center;
    gap: 0.7rem;
}

.association-profile-comparison-head {
    padding-bottom: 0.45rem;
    color: #647793;
    font-size: 0.72rem;
    font-weight: 850;
}

.association-profile-comparison-row {
    min-height: 2.1rem;
    border-top: 1px solid #e3edf3;
    color: #385471;
    font-size: 0.78rem;
}

.association-profile-comparison-row > span:first-child {
    overflow: hidden;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.association-profile-compare-value {
    display: grid;
    grid-template-columns: minmax(2.5rem, 1fr) 2.5rem;
    align-items: center;
    gap: 0.4rem;
}

.association-profile-compare-value i {
    display: block;
    height: 0.48rem;
    overflow: hidden;
    border-radius: 3px;
    background: #e7eff4;
}

.association-profile-compare-value b { display: block; height: 100%; border-radius: inherit; }
.association-profile-compare-value b.association { background: #df8937; }
.association-profile-compare-value b.coloc { background: #008b8b; }
.association-profile-compare-value b.mr { background: #7557b7; }
.association-profile-compare-value strong { color: #17375e; font-size: 0.77rem; text-align: right; }

.association-profile-effect > p {
    margin: -0.35rem 0 0.75rem;
    color: #647793;
    font-size: 0.78rem;
    line-height: 1.45;
}

.association-profile-effect-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem;
}

.association-profile-effect-column {
    min-width: 0;
}

.association-profile-effect-column + .association-profile-effect-column {
    padding-left: 1.1rem;
    border-left: 1px solid #d8e6ef;
}

.association-profile-effect-column h5 {
    margin: 0;
    padding: 0 0 0.55rem;
    color: #087f80;
    font-size: 0.84rem;
}

.association-profile-effect-row {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.72fr) minmax(10rem, 1.28fr);
    align-items: center;
    gap: 1rem;
    min-height: 3rem;
    border-top: 1px solid #e3edf3;
}

.association-profile-effect-row > span { display: grid; gap: 0.15rem; color: #385471; font-size: 0.79rem; }
.association-profile-effect-row small { color: #6d7f96; font-size: 0.72rem; }
.association-profile-effect-missing { color: #8a9aad; font-size: 0.75rem; text-align: center; }
.association-profile-box-jitter { width: 100%; height: 2.35rem; overflow: visible; }
.association-profile-box-jitter .whisker { stroke: #7f96ad; stroke-width: 1.2; }
.association-profile-box-jitter .null { stroke: #aebfcd; stroke-dasharray: 2 2; }
.association-profile-box-jitter rect { fill: #b7ded9; stroke: #008b8b; }
.association-profile-box-jitter .median { stroke: #086f70; stroke-width: 1.7; }
.association-profile-box-jitter .association-profile-marker { fill: #df8937; fill-opacity: 0.78; stroke: #ffffff; stroke-width: 0.8; }
.association-profile-box-jitter .association-profile-marker.higher { fill: #d95661; }
.association-profile-box-jitter .association-profile-marker.lower { fill: #347dc2; }
.association-profile-box-jitter .association-profile-marker.neutral { fill: #6f8194; }
.association-profile-effect-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    margin: 0 0 0.75rem;
    color: #52657f;
    font-size: 0.72rem;
}
.association-profile-effect-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.association-profile-effect-legend i { position: relative; display: inline-block; width: 0.7rem; height: 0.7rem; color: #7557b7; font-style: normal; text-align: center; line-height: 0.7rem; }
.association-profile-effect-legend i.circle { border-radius: 50%; background: #df8937; }
.association-profile-effect-legend i.triangle-up { width: 0; height: 0; border-right: 0.38rem solid transparent; border-bottom: 0.7rem solid #008b8b; border-left: 0.38rem solid transparent; }
.association-profile-effect-legend i.triangle-down { width: 0; height: 0; border-top: 0.7rem solid #008b8b; border-right: 0.38rem solid transparent; border-left: 0.38rem solid transparent; }
.association-profile-effect-legend i.diamond { width: 0.58rem; height: 0.58rem; transform: rotate(45deg); background: #7557b7; }
.association-profile-effect-legend i.star { font-size: 0.85rem; }
.association-profile-evidence-layer {
    display: inline-block;
    max-width: 12.5rem;
    padding: 0.22rem 0.42rem;
    border: 1px solid #c8d9e7;
    border-radius: 4px;
    color: #385471;
    background: #f7fafc;
    font-size: 0.72rem;
    line-height: 1.25;
}
.association-profile-evidence-layer.direct_and_colocalization { border-color: #9fcfc9; color: #087e78; background: #eef9f7; }
.association-profile-evidence-layer.direct_only { border-color: #ecc590; color: #9b5c18; background: #fff8ee; }
.association-profile-evidence-layer.colocalization_only { border-color: #b9c8e6; color: #4c64a5; background: #f2f5fc; }

.association-profile-effect-empty {
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem;
    border-left: 4px solid #91a9bc;
    background: #f6f9fb;
    color: #647793;
    font-size: 0.8rem;
    line-height: 1.45;
}
.association-profile-effect-empty strong { color: #17375e; }

.association-profile-effect-cell {
    display: grid;
    min-width: 7.5rem;
    gap: 0.18rem;
}
.association-profile-effect-cell strong { color: #17375e; font-size: 0.78rem; }
.association-profile-effect-cell strong.effect-higher { color: #c94a4a; }
.association-profile-effect-cell strong.effect-lower { color: #2c76b8; }
.association-profile-effect-cell strong.effect-neutral { color: #087f80; }
.association-profile-effect-cell svg { width: 7.75rem; height: 1.25rem; overflow: visible; }
.association-profile-effect-cell .axis { stroke: #d5e2ea; }
.association-profile-effect-cell .null { stroke: #93aabd; stroke-dasharray: 2 2; }
.association-profile-effect-cell .interval { stroke: #008b8b; stroke-width: 2; }
.association-profile-effect-cell circle { fill: #df8937; }
.association-profile-effect-cell small { max-width: 9.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.effect-unavailable { color: #8a9aad; }

@media (max-width: 960px) {
    .association-profile-metrics { grid-template-columns: repeat(3, minmax(7rem, 1fr)); }
    .association-profile-layout { grid-template-columns: minmax(0, 1fr); }
    .association-profile-evidence-grid { grid-template-columns: minmax(0, 1fr); }
    .association-profile-effect-columns { grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
    .association-profile-effect-column + .association-profile-effect-column { padding: 0.8rem 0 0; border-top: 1px solid #d8e6ef; border-left: 0; }
    .association-profile-effect-row { grid-template-columns: minmax(8rem, 0.65fr) minmax(10rem, 1.35fr); gap: 0.55rem; }
}

@media (max-width: 620px) {
    .association-profile-metrics { grid-template-columns: repeat(2, minmax(7rem, 1fr)); }
    .association-profile-trust { grid-template-columns: 1fr; }
    .association-profile-trust small { grid-column: auto; }
    .association-profile-pie-body { grid-template-columns: 6rem minmax(0, 1fr); }
    .association-profile-effect-row { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; padding: 0.45rem 0; }
    .association-profile-pie-body > i { width: 6rem; height: 6rem; }
    .association-profile-comparison-head,
    .association-profile-comparison-row { grid-template-columns: minmax(7rem, 1fr) repeat(3, minmax(4.8rem, 0.8fr)); gap: 0.4rem; }
}

.disease-profile-hero {
    display: block;
}

.disease-profile-metrics {
    grid-template-columns: repeat(5, minmax(8.6rem, 1fr));
}

.disease-profile-direct {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #d6e5f0;
    border-left: 4px solid #6f8aa8;
    border-radius: 6px;
    background: #f8fbfd;
    color: #52657f;
    font-size: 0.84rem;
    line-height: 1.45;
}

.disease-profile-direct strong {
    color: #17375e;
    white-space: nowrap;
}

.disease-profile-modules {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid #d1e2ef;
    border-radius: 8px;
    background: #ffffff;
}

.disease-profile-modules header h3 {
    margin: 0;
    color: var(--teal);
    font-size: 1.02rem;
}

.disease-profile-modules header p {
    margin: 0.25rem 0 0;
    color: #52657f;
    font-size: 0.84rem;
    line-height: 1.45;
}

.disease-module-table,
.disease-profile-table-wrap {
    overflow-x: auto;
}

.disease-module-table table,
.disease-profile-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.association-profile-table-disease {
    table-layout: fixed;
    min-width: 1080px;
}

.association-profile-table-disease .col-metabolite { width: 20%; }
.association-profile-table-disease .col-category { width: 12%; }
.association-profile-table-disease .col-evidence { width: 10%; }
.association-profile-table-disease .col-effect { width: 9%; }
.association-profile-table-disease .col-minp { width: 6%; }
.association-profile-table-disease .col-pph4 { width: 5%; }
.association-profile-table-disease .col-support { width: 15%; }
.association-profile-table-disease .col-details { width: 4%; }

.disease-module-table th,
.disease-module-table td,
.disease-profile-table th,
.disease-profile-table td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid #dce8f1;
    text-align: left;
    vertical-align: middle;
    font-size: 0.83rem;
}

.disease-module-table th,
.disease-profile-table th {
    color: #52657f;
    font-size: 0.85rem;
    font-weight: 850;
    white-space: nowrap;
}

.disease-module-table tbody tr:last-child td,
.disease-profile-table tbody tr:last-child td {
    border-bottom: 0;
}

.disease-module-table small,
.disease-profile-table small {
    color: #6d7f96;
    font-size: 0.74rem;
    white-space: nowrap;
}

.disease-profile-table td:first-child {
    min-width: 9rem;
    font-weight: 800;
}

.disease-profile-table td:nth-child(2) {
    min-width: 10rem;
}

.association-profile-table-disease td,
.association-profile-table-disease th {
    word-break: normal;
}

.association-profile-table-disease td:nth-child(1) a,
.association-profile-table-disease td:nth-child(2),
.association-profile-table-disease td:nth-child(3),
.association-profile-table-disease td:nth-child(8) {
    overflow-wrap: anywhere;
}

.disease-profile-sort {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    line-height: 1.2;
    flex-wrap: wrap;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.disease-profile-sort:hover,
.disease-profile-sort:focus-visible {
    color: var(--teal);
    outline: none;
}

.disease-profile-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.8rem;
    color: #52657f;
    font-size: 0.84rem;
}

.disease-profile-pagination div {
    display: flex;
    gap: 0.5rem;
}

.disease-profile-pagination button {
    min-width: 5.25rem;
    border: 1px solid #b9d2e5;
    border-radius: 5px;
    padding: 0.38rem 0.68rem;
    color: #17375e;
    background: #ffffff;
    font-weight: 800;
    cursor: pointer;
}

.disease-profile-pagination button:disabled {
    cursor: default;
    opacity: 0.45;
}

.v2-disease-label-toggle {
    border: 1px solid #98cdd3;
    background: #ffffff;
    color: var(--teal-dark, #087b7b);
    font-weight: 900;
}

.v2-disease-label-toggle[aria-pressed="true"] {
    background: #e8f7f5;
    color: var(--teal-dark, #087b7b);
}

.full-network-viz {
    min-height: 560px;
}

.full-network-viz svg {
    min-height: 560px;
}

@media (max-width: 980px) {
    .compact-entity-card-grid {
        grid-template-columns: 1fr;
    }

    .compact-entity-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .compact-entity-hero > span {
        max-width: 100%;
    }

    .trait-entity-hero,
    .trait-evidence-chain-grid,
    .trait-evidence-metrics {
        grid-template-columns: 1fr;
    }

    .trait-evidence-metrics div {
        border-right: 0;
        border-bottom: 1px solid #d1e2ef;
    }

    .trait-evidence-metrics div:last-child {
        border-bottom: 0;
    }

    .disease-profile-direct,
    .disease-profile-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

.network-page-main .results-shell {
    max-width: 1760px;
}

.network-side-panel,
.network-detail-panel {
    border: 1px solid #dce8f2;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
    min-width: 0;
}

.network-detail,
.network-detail strong {
    overflow-wrap: anywhere;
}

.network-side-panel h3,
.network-detail-heading h3 {
    margin: 0 0 12px;
    color: #071f41;
    font-size: 17px;
}

.network-stats {
    display: grid;
    gap: 9px;
}

.network-stats span {
    display: grid;
    grid-template-columns: 12px 38px 1fr;
    align-items: center;
    gap: 8px;
    color: #40546f;
    font-size: 13px;
}

.network-stats i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b9c8d8;
}

.network-stats b {
    color: #071f41;
    font-size: 15px;
    text-align: right;
}

.network-stats em {
    margin-top: 6px;
    color: #63738a;
    font-size: 12px;
    font-style: normal;
}

.network-minimap {
    margin-top: 18px;
    border: 1px solid #dce8f2;
    border-radius: 8px;
    background: linear-gradient(180deg, #f8fcff, #ffffff);
    padding: 8px;
}

.network-minimap svg {
    display: block;
    width: 100%;
    height: 140px;
}

.network-minimap small {
    display: block;
    margin-top: 4px;
    color: #64758d;
    font-size: 12px;
}

.network-detail-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.network-detail-heading button {
    width: 30px;
    height: 30px;
    border: 1px solid #cfe0ed;
    border-radius: 7px;
    background: #ffffff;
    color: #40546f;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.network-detail-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 14px;
    color: #071f41;
    font-size: 18px;
}

.network-detail-title i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(7, 31, 65, 0.12);
    flex: 0 0 auto;
}

.network-detail dl {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 9px 12px;
    margin: 0 0 16px;
}

.network-detail dt {
    color: #65758c;
    font-weight: 800;
}

.network-detail dd {
    margin: 0;
    color: #11284a;
    overflow-wrap: anywhere;
}

.network-viz {
    min-height: 278px;
    border: 1px solid #e0e9f2;
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(247, 252, 255, 0.96), rgba(255, 255, 255, 0.96));
    overflow: hidden;
}

.network-viz svg {
    display: block;
    width: 100%;
    height: 278px;
}

.layered-network-viz {
    min-height: 720px;
    background:
        radial-gradient(circle at 48% 46%, rgba(18, 167, 155, 0.10), transparent 26%),
        linear-gradient(180deg, rgba(247, 252, 255, 0.98), rgba(255, 255, 255, 0.98));
    overflow: auto;
}

.layered-network-viz svg {
    min-width: 1180px;
    height: auto;
    min-height: 700px;
}

.feature-edge {
    stroke: #bad1e6;
    stroke-width: 1.4;
}

.feature-node circle {
    stroke: #ffffff;
    stroke-width: 2;
    filter: drop-shadow(0 4px 7px rgba(7, 31, 65, 0.12));
}

.feature-node text {
    fill: #102446;
    font-size: 10px;
    font-weight: 800;
}

.layer-heading {
    fill: #52647c;
    font-size: 15px;
    font-weight: 900;
}

.layer-edge-label {
    fill: #7c8da3;
    font-size: 12px;
    font-weight: 800;
}

.layered-edge {
    fill: none;
    stroke: #c7d7e7;
    stroke-width: 1.3;
    opacity: 0.82;
}

.layered-edge.high-evidence {
    stroke-width: 2.8;
    opacity: 1;
}

.layered-edge.edge-metabolite {
    stroke: #6dc9bd;
}

.layered-edge.edge-disease {
    stroke: #efb363;
}

.layered-edge.edge-variant {
    stroke: #a98cdc;
}

.layered-edge.edge-gene {
    stroke: #80afe8;
}

.layered-center-node {
    cursor: pointer;
}

.layered-center-node circle {
    filter: drop-shadow(0 14px 22px rgba(8, 123, 125, 0.22));
    stroke: #ffffff;
    stroke-width: 4;
}

.layered-center-node text {
    fill: #ffffff;
    font-size: 16px;
    font-weight: 900;
}

.layered-center-node .small {
    font-size: 11px;
    opacity: 0.88;
}

.layered-node-card {
    cursor: pointer;
}

.layered-node-card rect,
.layered-more-node rect {
    fill: #ffffff;
    stroke: #cfdeeb;
    stroke-width: 1.2;
    filter: drop-shadow(0 8px 15px rgba(7, 31, 65, 0.08));
}

.layered-node-card.high-evidence rect {
    stroke-width: 1.9;
}

.layered-node-card.selected rect,
.layered-center-node.selected circle {
    stroke: #087b7d;
    stroke-width: 3;
}

.layered-node-card .node-card-title {
    fill: #071f41;
    font-size: 11.6px;
    font-weight: 900;
}

.layered-node-card .node-card-sub {
    fill: #53657e;
    font-size: 10.3px;
    font-weight: 700;
}

.layered-node-card .node-card-tier {
    fill: #087b7d;
    font-size: 10px;
    font-weight: 900;
}

.layered-more-node text {
    fill: #63738a;
    font-size: 12px;
    font-weight: 900;
}

.signature-heatmap {
    overflow-x: auto;
}

.heatmap-grid {
    display: grid;
    grid-template-columns: 132px repeat(var(--heatmap-cols), minmax(70px, 1fr));
    gap: 3px;
    min-width: 520px;
}

.heatmap-grid strong,
.heatmap-grid b {
    display: flex;
    align-items: center;
    min-height: 28px;
    color: #314765;
    font-size: 11px;
    font-weight: 900;
}

.heatmap-grid strong {
    justify-content: center;
    text-align: center;
}

.heatmap-grid span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    border-radius: 4px;
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    text-shadow: 0 1px 2px rgba(7, 31, 65, 0.25);
}

.feature-viz-empty {
    min-height: 80px;
    border: 1px dashed #cbd9e7;
    border-radius: 7px;
    padding: 18px;
    color: var(--muted);
    background: #f8fbfe;
}

.feature-workbench {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.feature-case-list {
    align-self: start;
    position: sticky;
    top: 16px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    padding: 14px;
}

.feature-case-list h2 {
    margin: 0 0 12px;
    color: var(--teal);
    font-size: 18px;
}

.feature-case-button {
    display: grid;
    gap: 4px;
    width: 100%;
    min-height: 76px;
    margin-bottom: 9px;
    border: 1px solid #d6e2ee;
    border-radius: 7px;
    background: #ffffff;
    padding: 10px;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
}

.feature-case-button strong {
    font-size: 15px;
}

.feature-case-button span,
.feature-case-button small {
    color: #53657e;
    font-size: 12px;
}

.feature-case-button.active {
    border-color: #8bc9ca;
    background: #eefbf9;
    box-shadow: inset 4px 0 0 var(--teal);
}

.feature-summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(520px, 0.9fr);
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    padding: 18px;
}

.feature-summary-card h2 {
    margin: 0 0 8px;
    font-size: 28px;
}

.feature-summary-card p {
    margin: 0;
    color: #314765;
    line-height: 1.45;
}

.feature-summary-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    border: 1px solid #d9e5ef;
    border-radius: 7px;
    overflow: hidden;
}

.feature-summary-metrics span {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 76px;
    border-right: 1px solid #d9e5ef;
    border-bottom: 1px solid #d9e5ef;
    padding: 10px;
    color: #071f41;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}

.feature-summary-metrics span:nth-child(3n) {
    border-right: 0;
}

.feature-summary-metrics span:nth-last-child(-n+3) {
    border-bottom: 0;
}

.feature-summary-metrics strong {
    display: block;
    color: var(--teal);
    font-size: 23px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.feature-grid {
    margin-top: 14px;
}

.feature-case-insight-grid {
    margin-top: 14px;
}

.feature-case-insight-grid .entity-card {
    min-height: 210px;
}

.feature-maintenance code {
    color: #05345c;
    font-weight: 800;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.feature-case-study-layout {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 16px;
    margin-top: 16px;
}

.feature-case-content {
    min-width: 0;
    max-width: 100%;
}

.feature-case-sidebar,
.feature-evidence-sidebar,
.feature-tier-criteria {
    align-self: start;
    position: sticky;
    top: 16px;
    display: grid;
    gap: 12px;
}

.feature-case-sidebar {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 14px;
}

.feature-case-sidebar h2,
.feature-evidence-sidebar h2,
.feature-tier-criteria h2 {
    margin: 0 0 10px;
    color: #071f41;
    font-size: 16px;
}

.feature-search-field input,
.feature-filter-panel input,
.feature-filter-panel select {
    width: 100%;
    min-height: 40px;
    border: 1px solid #cbd9e7;
    border-radius: 6px;
    background: #ffffff;
    padding: 8px 10px;
    color: #071f41;
    font: inherit;
    font-size: 13px;
}

.feature-filter-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 10px 0;
    border-bottom: 1px solid #dce7f0;
}

.feature-filter-tabs button,
.feature-case-subtabs button {
    position: relative;
    border: 0;
    background: transparent;
    padding: 10px 8px;
    color: #314765;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.feature-filter-tabs button.active,
.feature-case-subtabs button.active {
    color: var(--teal);
}

.feature-filter-tabs button.active::after,
.feature-case-subtabs button.active::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 3px;
    border-radius: 999px;
    background: var(--teal);
}

.feature-case-sidebar .feature-case-button {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    min-height: 88px;
}

.feature-case-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #e8f8f6;
    color: var(--teal);
    font-size: 16px;
    font-weight: 900;
}

.feature-case-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.feature-case-copy strong,
.feature-case-copy span,
.feature-case-copy small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.feature-case-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    color: #53657e;
    font-size: 13px;
    font-weight: 800;
}

.feature-case-breadcrumb strong {
    color: var(--teal);
}

.feature-case-hero-card {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(620px, 1fr);
    gap: 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(232, 249, 246, 0.8), rgba(255, 255, 255, 0.98) 32%),
        #ffffff;
    padding: 18px;
}

.feature-case-hero-copy h2,
.feature-evidence-header h1,
.feature-tier-detail-header h1 {
    margin: 0 0 8px;
    color: #071f41;
    font-size: 30px;
    line-height: 1.15;
}

.feature-case-hero-copy p,
.feature-evidence-header p,
.feature-tier-detail-header p {
    margin: 0;
    color: #314765;
    line-height: 1.45;
}

.feature-case-hero-metrics,
.feature-evidence-kpis,
.feature-tier-detail-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid #d9e5ef;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
}

.feature-case-hero-metrics span,
.feature-evidence-kpis span,
.feature-tier-detail-metrics span {
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 88px;
    border-right: 1px solid #d9e5ef;
    padding: 10px;
    color: #071f41;
    text-align: center;
}

.feature-case-hero-metrics span:last-child,
.feature-evidence-kpis span:last-child,
.feature-tier-detail-metrics span:last-child {
    border-right: 0;
}

.feature-case-hero-metrics strong,
.feature-evidence-kpis strong,
.feature-tier-detail-metrics strong {
    color: var(--teal);
    font-size: 25px;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.feature-case-hero-metrics small,
.feature-evidence-kpis small,
.feature-tier-detail-metrics small {
    margin-top: 3px;
    color: #071f41;
    font-size: 12px;
    font-weight: 900;
}

.feature-case-hero-metrics em {
    margin-top: 4px;
    color: #53657e;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.feature-case-subtabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin-top: 14px;
    border-bottom: 1px solid #dce7f0;
    overflow-x: auto;
}

.feature-case-subtabs button {
    min-width: 112px;
    min-height: 42px;
    white-space: nowrap;
}

.feature-case-card-grid,
.feature-evidence-chart-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.feature-case-card-grid .entity-card,
.feature-evidence-chart-grid .entity-card {
    min-width: 0;
    min-height: 260px;
}

.feature-case-lower-grid {
    display: grid;
    grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.feature-case-network svg {
    display: block;
    width: 100%;
    min-height: 260px;
}

.feature-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.feature-card-heading h2 {
    margin: 0;
}

.feature-card-heading span,
.feature-small-note,
.feature-disclaimer {
    color: #53657e;
    font-size: 12px;
    font-weight: 800;
}

.feature-disclaimer {
    margin: 14px 0 0;
    border-radius: 7px;
    background: #f4f8fb;
    padding: 10px 12px;
}

.feature-donut-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.feature-donut {
    position: relative;
    width: 138px;
    height: 138px;
    border-radius: 50%;
}

.feature-donut::after {
    content: "";
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    background: #ffffff;
}

.feature-donut span {
    position: absolute;
    inset: 36px;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    color: #071f41;
    text-align: center;
}

.feature-donut strong {
    font-size: 18px;
    line-height: 1.1;
}

.feature-donut small {
    color: #53657e;
    font-size: 11px;
    font-weight: 900;
}

.feature-donut-legend {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.feature-donut-legend span {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: #213a5b;
    font-size: 12px;
}

.feature-donut-legend i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.feature-donut-legend b,
.feature-donut-legend em {
    min-width: 0;
    font-style: normal;
    font-weight: 800;
}

.feature-donut-legend b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-histogram {
    min-height: 150px;
}

.feature-histogram-bars {
    display: flex;
    align-items: end;
    gap: 5px;
    height: 150px;
    border-bottom: 1px solid #dce7f0;
    border-left: 1px solid #dce7f0;
    padding: 8px 8px 0;
}

.feature-histogram-bars span {
    position: relative;
    flex: 1;
    min-width: 16px;
    border-radius: 4px 4px 0 0;
}

.feature-histogram-bars i {
    position: absolute;
    right: 0;
    bottom: -22px;
    left: 0;
    color: #53657e;
    font-size: 10px;
    font-style: normal;
    font-weight: 800;
    text-align: center;
}

.feature-evidence-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 300px;
    gap: 16px;
    margin-top: 16px;
}

.feature-evidence-header,
.feature-tier-detail-header {
    display: grid;
    grid-template-columns: minmax(320px, 0.7fr) minmax(540px, 1fr);
    gap: 18px;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #ffffff;
    padding: 18px;
}

.feature-evidence-kpis {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.feature-evidence-kpis span {
    min-height: 78px;
}

.feature-tier-summary-cards,
.feature-tier-criteria-cards {
    display: grid;
    gap: 10px;
}

.feature-tier-card,
.feature-tier-criteria-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid #d6e2ee;
    border-radius: 8px;
    background: #ffffff;
    padding: 10px;
    color: #071f41;
    text-align: left;
    cursor: pointer;
}

.feature-tier-card:hover,
.feature-tier-criteria-card:hover {
    border-color: #8bc9ca;
    background: #f7fcfb;
}

.feature-tier-badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 900;
}

.feature-tier-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.feature-tier-copy strong,
.feature-tier-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-tier-copy i {
    height: 7px;
    border-radius: 999px;
    background: #edf3f8;
    overflow: hidden;
}

.feature-tier-copy b {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.feature-tier-card em {
    color: var(--teal);
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    text-align: right;
}

.feature-tier-card em small {
    display: block;
    color: #53657e;
    font-size: 11px;
}

.feature-filter-panel {
    display: grid;
    gap: 10px;
}

.feature-filter-panel label,
.feature-filter-panel legend {
    color: #071f41;
    font-size: 12px;
    font-weight: 900;
}

.feature-filter-panel fieldset {
    display: grid;
    gap: 6px;
    border: 0;
    border-top: 1px solid #e0e9f2;
    margin: 0;
    padding: 10px 0 0;
}

.feature-filter-panel fieldset label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
}

.feature-filter-panel input[type="checkbox"] {
    width: auto;
    min-height: 0;
}

.feature-card-heading button,
.primary-button {
    border: 1px solid #8bc9ca;
    border-radius: 7px;
    background: var(--teal);
    padding: 9px 12px;
    color: #ffffff;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.feature-card-heading button {
    background: #ffffff;
    color: var(--teal);
}

.feature-card-heading .info-dot,
.feature-viz-heading .info-dot {
    width: 24px;
    height: 24px;
    min-height: 24px;
    border: 1px solid #bdd2e5;
    border-radius: 999px;
    background: #ffffff;
    padding: 0;
    color: #53657e;
    font-size: 13px;
    line-height: 1;
}

.feature-record-card {
    margin-top: 12px;
}

.feature-tier-criteria-card {
    grid-template-columns: 1fr;
    min-height: 86px;
}

.feature-tier-criteria-card strong {
    color: var(--teal);
    font-size: 14px;
}

.feature-tier-criteria-card span {
    color: #314765;
    font-size: 12px;
    line-height: 1.4;
}

.feature-tier-detail {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.feature-tier-detail[hidden],
#feature-evidence-overview[hidden] {
    display: none;
}

.feature-tier-detail > .link-button {
    justify-self: start;
}

.feature-tier-detail-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.catalog-definition {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 8px 14px;
    margin: 0;
}

.catalog-definition dt {
    color: #586b86;
    font-weight: 900;
}

.catalog-definition dd {
    min-width: 0;
    margin: 0;
    color: #071f41;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.catalog-copy {
    margin: 0 0 14px;
    color: #314466;
    line-height: 1.55;
}

.catalog-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.catalog-actions a,
.query-chip-list a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid #b8d4df;
    border-radius: 5px;
    background: #ffffff;
    padding: 0 12px;
    color: var(--teal);
    font-weight: 900;
}

.query-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.download-card img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    margin-bottom: 10px;
}

.download-card p {
    margin: 0;
    color: #314466;
    line-height: 1.45;
}

.catalog-note {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    border: 1px solid #d8e8f3;
    border-radius: 7px;
    background: #f7fbfd;
    padding: 12px 14px;
    color: #071f41;
}

.catalog-note strong {
    color: var(--teal);
}

.metabolite-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.metabolite-info-card {
    position: sticky;
    top: 88px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #ffffff;
    padding: 16px;
}

.metabolite-info-card h2 {
    margin: 0 0 12px;
    color: var(--teal);
    font-size: 18px;
}

.metabolite-info-card dl {
    margin: 0;
}

.metabolite-info-card dt {
    margin-top: 12px;
    color: #53657e;
    font-size: 12px;
    font-weight: 800;
}

.metabolite-info-card dd {
    margin: 4px 0 0;
    color: #071f41;
    font-size: 13px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.metabolite-main {
    min-width: 0;
}

.metabolite-main .entity-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metabolite-main .entity-overview-grid .entity-card:last-child {
    grid-column: 1 / -1;
}

.detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 12px;
    margin-top: 12px;
}

.detail-grid .mini-table table {
    min-width: 360px;
}

.detail-grid article:first-child .mini-table table,
.detail-grid article:last-child .mini-table table {
    min-width: 520px;
}

.compact-footer {
    padding-top: 18px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    max-width: none;
    width: 100%;
}

.compact-footer .update-note {
    justify-self: start;
    min-width: 0;
    white-space: nowrap;
}

.compact-footer .update-note span {
    white-space: nowrap;
}

@media (max-width: 1180px) {
    .site-header {
        grid-template-columns: 1fr;
    }

    .main-nav {
        justify-content: flex-start;
    }

    .top-search {
        max-width: 420px;
    }

    .hero-section {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 260px;
    }

    .search-workspace,
    .metrics-panel,
    .quick-actions,
    .home-chart-body,
    .home-feature-preview-grid,
    .guide-hero,
    .guide-feature-grid,
    .guide-faq-grid,
    .mulin-software-grid,
    .result-metrics,
    .detail-metrics,
    .chart-grid,
    .entity-overview-grid,
    .type-panel,
    .detail-grid,
    .catalog-hero,
    .release-hero,
    .release-link-grid,
    .coloc-summary-strip,
    .coloc-selected-header,
    .feature-dashboard,
    .catalog-grid.two,
    .catalog-grid.three,
    .catalog-grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .statistics-panel.active {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .statistics-panel .stat-domain-card,
    .statistics-panel .stat-domain-pvalue-card,
    .statistics-panel .stat-third-card {
        grid-column: span 1;
    }

    .statistics-panel .stat-table-card,
    .statistics-panel .wide-card {
        grid-column: 1 / -1;
    }

    .domain-donut-layout,
    .snp-signal-layout {
        grid-template-columns: 1fr;
        min-width: 0;
    }

    .snp-top-gene-panel {
        border-left: 0;
        border-top: 1px solid #dce8f2;
        padding-left: 0;
        padding-top: 14px;
    }

    .evidence-summary-top,
    .evidence-summary-grid {
        grid-template-columns: 1fr;
    }

    .evidence-primary-table {
        grid-column: auto;
    }

    .evidence-summary-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .feature-overview-case-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .browse-tree-layout {
        grid-template-columns: 1fr;
    }

    .feature-active-summary {
        grid-template-columns: 1fr;
    }

    .feature-dashboard {
        grid-template-areas:
            "evidence heatmap"
            "network network"
            "enrichment study"
            "disease disease";
    }

    .network-clustering-grid,
    .module-network-layout,
    .network-workbench {
        grid-template-columns: 1fr;
    }

    .module-disease-graph,
    .layered-network-viz {
        overflow-x: auto;
    }

    .feature-module-grid,
    .feature-next-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-workspace,
    .candidate-grid,
    .feature-workbench,
    .feature-summary-card,
    .feature-featured-case {
        grid-template-columns: 1fr;
    }

    .feature-featured-copy {
        border-right: 0;
        border-bottom: 1px solid #dce7f0;
        padding-right: 0;
        padding-bottom: 16px;
    }

    .candidate-section {
        position: static;
    }

    .feature-case-list {
        position: static;
    }

    .results-layout,
    .metabolite-layout,
    .coloc-workbench {
        grid-template-columns: 1fr;
    }

    .coloc-browser-header,
    .coloc-mode-explainer {
        grid-template-columns: 1fr;
    }

    .coloc-mode-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .coloc-mode-tabs button {
        min-width: 190px;
    }

    .coloc-dashboard-header .coloc-selected-metrics {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .coloc-category-record {
        grid-template-columns: minmax(0, 1fr);
    }

    .coloc-category-metrics {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .coloc-category-action {
        width: fit-content;
    }

    .coloc-locus-summary-card,
    .coloc-locus-record-grid {
        grid-template-columns: 1fr;
    }

    .coloc-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .coloc-scatter-card {
        grid-column: 1 / -1;
    }

    .release-hero {
        align-items: start;
    }

    .help-type-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .help-user-guide-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .help-user-guide-action {
        width: 100%;
    }

    .guide-workflow li {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .guide-workflow span {
        grid-column: 2;
    }

    .guide-step,
    .guide-two-column {
        grid-template-columns: 1fr;
    }

    .coloc-trait-panel {
        position: static;
        max-height: 70vh;
        overflow-y: auto;
    }

    .table-section {
        grid-column: 1;
    }

    .entity-summary {
        grid-template-columns: 1fr;
    }

    .entity-metrics div {
        border-top: 1px solid var(--line);
    }

    .metabolite-info-card {
        position: static;
    }

    .metric-card {
        border-right: 0;
        border-bottom: 1px solid var(--line);
        padding: 16px;
    }

    .site-footer {
        grid-template-columns: 1fr;
    }

    .site-footer > span:last-child {
        justify-self: start;
    }
}

@media (max-width: 1180px) {
    .mulinlab-contact-card,
    .mulinlab-resource-grid {
        grid-template-columns: 1fr;
    }

    .mulinlab-contact-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .site-header,
    main,
    .site-footer {
        padding-left: 18px;
        padding-right: 18px;
    }

    .site-footer {
        max-width: 100%;
        overflow-x: hidden;
    }

    .compact-footer .update-note,
    .compact-footer .update-note span {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .site-header {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .main-nav {
        justify-content: flex-start;
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .hero-visual {
        overflow: hidden;
    }

    .hero-art {
        inset: 0;
    }

    body[data-page="features"] .heatmap-workbench,
    body[data-page="features"] .network-cluster-card .heatmap-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    body[data-page="features"] .cluster-heatmap-scroll,
    body[data-page="features"] .module-heatmap-scroll,
    body[data-page="features"] .heatmap-detail-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .brand strong {
        font-size: 32px;
    }

    .hero-copy h1 {
        font-size: 42px;
    }

    .hero-copy h2 {
        font-size: 21px;
    }

    .hero-copy p {
        font-size: 16px;
    }

    .hero-search {
        flex-direction: column;
    }

    .evidence-summary-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .evidence-kpi-item {
        border-left: 0;
        border-top: 1px dashed #dbe7f0;
        min-height: 92px;
    }

    .evidence-kpi-item:first-child {
        border-top: 0;
    }

    .evidence-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .hero-search select {
        width: 100%;
        flex-basis: auto;
        border-right: 0;
        border-bottom: 1px solid #d9e3ee;
    }

    .hero-search button {
        width: 100%;
        height: 48px;
    }

    .search-landing-panel {
        min-height: 0;
        padding: 22px 18px;
    }

    .search-landing-copy h1 {
        font-size: 28px;
    }

    .search-example-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-example-grid {
        grid-template-columns: 1fr;
    }

    .status-band,
    .typed-search-bar,
    .metrics-panel,
    .quick-actions,
    .home-chart-body,
    .home-feature-preview-grid,
    .home-feature-card,
    .home-donut-card,
    .guide-hero,
    .guide-scope-metrics,
    .guide-feature-grid,
    .guide-faq-grid,
    .guide-two-column,
    .guide-step,
    .mulin-software-grid,
    .result-metrics,
    .detail-metrics,
    .chart-grid,
    .candidate-grid,
    .entity-overview-grid,
    .entity-metrics,
    .type-panel,
    .detail-grid,
    .catalog-hero,
    .catalog-kpis,
    .release-hero,
    .release-metrics,
    .release-link-grid,
    .coloc-summary-strip,
    .coloc-kpi-row,
    .coloc-selected-header,
    .coloc-selected-metrics,
    .coloc-browser-header,
    .coloc-mode-explainer,
    .coloc-dashboard-header .coloc-selected-metrics,
    .coloc-drilldown-grid,
    .coloc-dashboard-grid,
    .coloc-locus-summary-card,
    .coloc-locus-record-grid,
    .coloc-chip-summary,
    .feature-dashboard,
    .catalog-grid.two,
    .catalog-grid.three,
    .catalog-grid.four,
    .feature-summary-metrics,
    .catalog-definition {
        grid-template-columns: 1fr;
    }

    .coloc-signature-row {
        grid-template-columns: 1fr;
    }

    .release-hero,
    .release-section,
    .release-boundary {
        padding: 18px;
    }

    .release-hero h1 {
        font-size: 26px;
    }

    .release-metrics div,
    .release-metrics div:nth-child(2n),
    .release-metrics div:nth-child(3n) {
        border-right: 0;
        border-bottom: 1px solid #d6e4ef;
    }

    .release-metrics div:last-child {
        border-bottom: 0;
    }

    .release-timeline li {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .help-guide-hero,
    .help-section,
    .guide-hero,
    .guide-section {
        padding: 18px;
    }

    .help-guide-hero h1 {
        font-size: 26px;
    }

    .guide-hero h1 {
        font-size: 27px;
    }

    .guide-workflow li {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 13px;
    }

    .guide-scope-metrics div,
    .guide-scope-metrics div:nth-child(2n) {
        border-right: 0;
        border-bottom: 1px solid #d6e4ef;
    }

    .guide-scope-metrics div:last-child {
        border-bottom: 0;
    }

    .help-type-grid,
    .help-split {
        grid-template-columns: 1fr;
    }

    .coloc-summary-strip,
    .coloc-detail-panel,
    .coloc-card,
    .coloc-selected-header {
        padding: 18px;
    }

    .coloc-summary-strip h1 {
        font-size: 26px;
    }

    .coloc-kpi-row div,
    .coloc-selected-metrics div {
        border-right: 0;
        border-bottom: 1px solid #d6e4ef;
    }

    .coloc-kpi-row div:last-child,
    .coloc-selected-metrics div:last-child {
        border-bottom: 0;
    }

    .coloc-card-heading {
        flex-direction: column;
    }

    .coloc-gene-row {
        grid-template-columns: minmax(74px, 0.35fr) minmax(0, 1fr) auto;
    }

    .coloc-scatter-card {
        grid-column: auto;
    }

    .coloc-metabolite-row {
        grid-template-columns: 1fr;
    }

    .feature-tabs {
        border-radius: 7px;
    }

    .feature-tab-button {
        flex-basis: auto;
        min-width: 120px;
        min-height: 48px;
        font-size: 12px;
    }

    .feature-section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .feature-overview-case-grid {
        grid-template-columns: 1fr;
    }

    .feature-module-grid,
    .feature-next-actions,
    .feature-featured-case {
        grid-template-columns: 1fr;
    }

    .feature-featured-copy {
        border-right: 0;
        border-bottom: 1px solid #dce7f0;
        padding-right: 0;
        padding-bottom: 16px;
    }

    .feature-featured-copy dl {
        grid-template-columns: 1fr;
    }

    .feature-active-summary,
    .feature-active-metrics {
        grid-template-columns: 1fr;
    }

    .feature-active-metrics span,
    .feature-active-metrics span:nth-child(2n),
    .feature-active-metrics span:nth-last-child(-n+2) {
        border-right: 0;
        border-bottom: 1px solid #d9e5ef;
    }

    .feature-active-metrics span:last-child {
        border-bottom: 0;
    }

    .feature-dashboard {
        grid-template-areas:
            "evidence"
            "network"
            "heatmap"
            "enrichment"
            "study"
            "disease";
    }

    .feature-viz-heading {
        flex-direction: column;
    }

    .signature-heatmap {
        max-width: 100%;
    }

    .heatmap-grid {
        grid-template-columns: 74px repeat(var(--heatmap-cols), minmax(34px, 1fr));
        min-width: 0;
    }

    .heatmap-grid strong,
    .heatmap-grid b {
        min-height: 24px;
        font-size: 9px;
    }

    .heatmap-grid span {
        min-height: 24px;
        font-size: 0;
    }

    .feature-bar-row {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .feature-bar-row strong {
        text-align: left;
    }

    .home-chart-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-feature-card {
        padding: 14px;
    }

    .home-feature-copy dl {
        grid-template-columns: 1fr;
    }

    .home-stacked-chart {
        padding-right: 0;
        border-right: 0;
    }

    .home-donut-card {
        grid-template-columns: 170px minmax(0, 1fr);
    }

    .feature-summary-metrics span,
    .feature-summary-metrics span:nth-child(3n),
    .feature-summary-metrics span:nth-last-child(-n+3) {
        border-right: 0;
        border-bottom: 1px solid #d9e5ef;
    }

    .feature-summary-metrics span:last-child {
        border-bottom: 0;
    }

    .results-header,
    .metabolite-hero,
    .section-heading,
    .table-toolbar,
    .table-note {
        align-items: flex-start;
        flex-direction: column;
    }

    .catalog-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-toolbar input,
    .catalog-toolbar select {
        width: 100%;
        min-width: 0;
    }

    .catalog-toolbar span {
        margin-left: 0;
    }

    .status-items {
        justify-content: flex-start;
    }

    .metric-card {
        border-bottom: 1px solid var(--line);
    }
}

@media (max-width: 720px) {
    .mulinlab-resource-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .mulinlab-resource-heading p {
        text-align: left;
    }

    .mulinlab-resource-card {
        grid-template-columns: 1fr;
    }

    .mulinlab-logo-tile {
        width: 100%;
        height: 76px;
    }

    .mulinlab-contact-actions a {
        width: 100%;
    }
}

@media (max-width: 1180px) {
    .feature-case-study-layout,
    .feature-evidence-layout,
    .feature-case-hero-card,
    .feature-evidence-header,
    .feature-tier-detail-header {
        grid-template-columns: 1fr;
    }

    .feature-case-sidebar,
    .feature-evidence-sidebar,
    .feature-tier-criteria {
        position: static;
    }

    .feature-case-card-grid,
    .feature-evidence-chart-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-case-lower-grid {
        grid-template-columns: 1fr;
    }

    .network-workbench {
        grid-template-columns: 1fr;
    }

    .mini-network-workbench {
        grid-template-columns: 1fr;
    }

    .network-explorer-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .network-side-panel,
    .network-detail-panel {
        min-height: auto;
    }

    .feature-evidence-kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .statistics-panel.active {
        grid-template-columns: 1fr;
    }

    .statistics-panel .stat-domain-card,
    .statistics-panel .stat-domain-pvalue-card,
    .statistics-panel .stat-third-card,
    .statistics-panel .stat-table-card,
    .statistics-panel .wide-card {
        grid-column: 1 / -1;
    }

    .feature-case-hero-metrics,
    .feature-evidence-kpis,
    .feature-tier-detail-metrics,
    .feature-case-card-grid,
    .feature-evidence-chart-grid,
    .feature-donut-card {
        grid-template-columns: 1fr;
    }

    .feature-case-hero-metrics span,
    .feature-evidence-kpis span,
    .feature-tier-detail-metrics span {
        border-right: 0;
        border-bottom: 1px solid #d9e5ef;
    }

    .feature-case-hero-metrics span:last-child,
    .feature-evidence-kpis span:last-child,
    .feature-tier-detail-metrics span:last-child {
        border-bottom: 0;
    }

    .feature-case-network svg,
    .feature-featured-network svg {
        min-height: 220px;
    }

    .layered-network-viz {
        overflow-x: auto;
    }

    .layered-network-viz svg {
        width: 1280px;
        max-width: none;
    }

    .mini-network-viz svg {
        width: 1280px;
    }

    .network-explorer-controls {
        grid-template-columns: 1fr;
    }

    .entity-network-actions {
        justify-content: flex-start;
    }

    .network-detail dl {
        grid-template-columns: 1fr;
    }

    .feature-donut {
        justify-self: center;
    }
}

.module-related-records-card {
  grid-column: 1 / -1;
}

.module-related-records-card .metabdb-table-wrap {
  max-height: 520px;
  overflow: auto;
}

.module-related-records-card .metabdb-table-scroll {
  max-height: 560px;
}

.module-related-records-card table {
  min-width: 1480px;
}

.module-related-records-card th:nth-child(2),
.module-related-records-card th:nth-child(4),
.module-related-records-card td:nth-child(2),
.module-related-records-card td:nth-child(4) {
  width: 150px;
}

.related-record-tag,
.beta-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: normal;
}

.related-record-tag {
  border: 1px solid color-mix(in srgb, var(--tag-color) 38%, #ffffff);
  background: color-mix(in srgb, var(--tag-color) 14%, #ffffff);
  color: #08233f;
}

.related-record-tag.disease {
  background: color-mix(in srgb, var(--tag-color) 18%, #fff8ef);
}

.beta-chip.positive {
  border: 1px solid #f1b9bd;
  background: #fff1f2;
  color: #b4232f;
}

.beta-chip.negative {
  border: 1px solid #acd8c5;
  background: #effaf4;
  color: #087044;
}

.formal-module-disease-grid button {
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.48), 0 1px 2px rgba(8,35,63,0.08);
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,0.16);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.formal-module-disease-grid button:hover,
.formal-module-disease-grid button:focus {
  transform: translateY(-1px);
  border-color: #062f47;
  box-shadow: 0 0 0 3px rgba(8,123,125,0.18), 0 8px 18px rgba(8,35,63,0.12);
}

.formal-module-disease-grid button.selected {
  border-color: #062f47;
  box-shadow: 0 0 0 3px rgba(6,47,71,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
}

.support-summary-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.support-summary-kpis div {
  border: 1px solid #d7e6f1;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbfc 100%);
  border-radius: 8px;
  padding: 10px 12px;
}

.support-summary-kpis div.primary {
  background: linear-gradient(135deg, #087b7d 0%, #12a79b 100%);
  border-color: #087b7d;
  color: #fff;
}

.support-summary-kpis strong {
  display: block;
  color: inherit;
  font-size: 1.18rem;
  line-height: 1.1;
}

.support-summary-kpis span {
  display: block;
  margin-top: 4px;
  color: inherit;
  opacity: 0.78;
  font-size: 0.78rem;
  font-weight: 800;
}

.support-strength-card {
  border: 1px solid #d7e6f1;
  border-radius: 8px;
  padding: 12px;
  background: #ffffff;
  margin-bottom: 14px;
}

.support-strength-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #08233f;
  font-weight: 900;
  margin-bottom: 8px;
}

.support-strength-card i {
  display: block;
  height: 12px;
  border-radius: 999px;
  background: #e7f1f5;
  overflow: hidden;
}

.support-strength-card i b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8fc9c8 0%, #12a79b 55%, #075f63 100%);
}

.support-strength-card small,
.support-boundary-note {
  display: block;
  margin-top: 8px;
  color: #53657e;
  font-size: 0.78rem;
  line-height: 1.45;
}

.support-detail-block {
  border-top: 1px solid #e4eef5;
  padding-top: 12px;
  margin-top: 12px;
}

.support-detail-block h4 {
  margin: 0 0 8px;
  color: #08233f;
  font-size: 0.9rem;
}

.support-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.support-chip-list span {
  border: 1px solid #d7e6f1;
  background: #f7fbfc;
  color: #31455f;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.support-chip-list.disease span {
  background: #fff8ef;
  border-color: #f5d8b7;
}

.support-record-button {
  margin-top: 14px;
}

.support-empty-line {
  color: #8aa0b3;
  font-size: 0.85rem;
}

.network-module-card .heatmap-workbench {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.network-module-card .heatmap-detail-panel {
  min-height: 0;
  padding: 12px 14px;
}

.network-module-card .support-strip {
  display: grid;
  grid-template-columns: minmax(230px, 1.05fr) minmax(260px, 1fr) minmax(240px, 0.95fr) minmax(300px, 1.35fr);
  gap: 12px 14px;
  align-items: stretch;
}

.network-module-card .support-strip-copy {
  min-width: 0;
}

.network-module-card .support-strip-copy h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  line-height: 1.25;
}

.network-module-card .support-strip-copy p {
  margin: 0 0 6px;
  font-size: 0.82rem;
  line-height: 1.35;
}

.network-module-card .support-strip-copy .support-boundary-note {
  margin-top: 4px;
}

.network-module-card .support-summary-kpis {
  margin: 0;
  gap: 8px;
}

.network-module-card .support-summary-kpis div {
  padding: 8px 10px;
}

.network-module-card .support-summary-kpis strong {
  font-size: 1rem;
}

.network-module-card .support-summary-kpis span {
  font-size: 0.72rem;
}

.network-module-card .support-strength-card {
  margin: 0;
  padding: 10px 12px;
}

.network-module-card .support-strength-card small {
  margin-top: 6px;
  line-height: 1.35;
}

.network-module-card .support-detail-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  min-width: 0;
}

.network-module-card .support-detail-block {
  border-top: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.network-module-card .support-detail-block h4 {
  margin: 0 0 6px;
  font-size: 0.82rem;
}

.network-module-card .support-chip-list {
  gap: 5px;
  max-height: 74px;
  overflow: auto;
}

.network-module-card .support-chip-list span {
  padding: 4px 7px;
  font-size: 0.72rem;
}

@media (max-width: 1180px) {
  .network-module-card .support-strip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .home-chart-row {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .home-chart-row em {
    text-align: left;
  }

  .home-donut-card {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .network-module-card .support-strip {
    grid-template-columns: minmax(0, 1fr);
  }
}

.story-network-card {
    display: grid;
    gap: 14px;
}

.story-network-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.story-network-summary div {
    border: 1px solid #d8e6f1;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbfc 100%);
    padding: 12px;
}

.story-network-summary strong {
    display: block;
    color: var(--teal);
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.story-network-summary span {
    display: block;
    margin-top: 5px;
    color: #53657e;
    font-size: 12px;
    font-weight: 900;
}

.story-network-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    border: 1px solid #dbe8f1;
    border-radius: 8px;
    background: #f8fcfd;
    padding: 10px 12px;
}

.story-network-toolbar label {
    display: inline-grid;
    grid-template-columns: auto minmax(170px, 1fr);
    gap: 8px;
    align-items: center;
    color: #314765;
    font-size: 12px;
    font-weight: 900;
}

.story-network-toolbar select {
    min-height: 34px;
    border: 1px solid #c8dceb;
    border-radius: 7px;
    background: #ffffff;
    padding: 5px 28px 5px 10px;
    color: #071f41;
    font: inherit;
}

.story-network-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
    align-items: stretch;
}

.story-network-viz {
    min-height: 560px;
    border: 1px solid #d8e6f1;
    border-radius: 8px;
    background: radial-gradient(circle at 45% 45%, rgba(18, 167, 155, 0.07), transparent 36%), #ffffff;
    overflow: auto;
}

.story-network-viz svg {
    display: block;
    width: 100%;
    min-width: 980px;
    height: auto;
}

.story-edge {
    fill: none;
    stroke: #9aa8b7;
    stroke-linecap: round;
    opacity: 0.48;
}

.story-edge.edge-metabolite-module {
    stroke: #4d9f68;
}

.story-edge.edge-disease-module {
    stroke: #ee8a21;
}

.story-edge.edge-coloc-hotspot {
    stroke: #8068b6;
}

.story-column-label {
    fill: #53657e;
    font-size: 14px;
    font-weight: 900;
}

.story-node {
    cursor: pointer;
}

.story-node circle {
    stroke: #ffffff;
    stroke-width: 2.5px;
    filter: drop-shadow(0 7px 13px rgba(7, 31, 65, 0.16));
}

.story-node text {
    fill: #1f334f;
    font-size: 12px;
    font-weight: 850;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 3px;
    stroke-linejoin: round;
}

.story-node-story text {
    font-size: 13px;
}

.story-node.selected circle {
    stroke: #071f41;
    stroke-width: 4px;
}

.story-network-detail {
    min-width: 0;
    border: 1px solid #d8e6f1;
    border-radius: 8px;
    background: #fbfdfe;
    padding: 14px;
    overflow: hidden;
}

.story-network-detail h4 {
    margin: 14px 0 8px;
    color: #071f41;
    font-size: 14px;
}

.story-link-list {
    display: grid;
    gap: 8px;
    max-height: 370px;
    overflow: auto;
}

.story-link-list button {
    display: grid;
    grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid #d9e6f1;
    border-radius: 8px;
    background: #ffffff;
    padding: 8px;
    color: #071f41;
    text-align: left;
    cursor: pointer;
}

.story-link-list button:hover {
    border-color: #8bc9ca;
    background: #f3fbfa;
}

.story-link-list span {
    color: var(--teal);
    font-size: 11px;
    font-weight: 900;
}

.story-link-list strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}

.story-link-list em {
    color: #53657e;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.story-network-tables {
    margin-top: 14px;
}

@media (max-width: 1100px) {
    .story-network-layout,
    .story-network-summary {
        grid-template-columns: 1fr;
    }

    .story-network-toolbar label {
        grid-template-columns: 1fr;
    }
}


/* report-backed story case studies 20260626 */
.report-case-button .feature-case-icon {
    background: linear-gradient(135deg, #087b7d, #12a79b);
    color: #fff;
}

.report-case-source-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    min-height: 0;
    border: 1px solid #d8e8f2;
    border-radius: 8px;
    background: #f7fbfc;
    color: #50647f;
    font-size: 13px;
}

.report-case-source-strip span {
    padding: 5px 9px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #dcecf3;
}

.report-case-hero .feature-case-hero-copy h2 {
    max-width: 900px;
}

.report-case-references {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 10px;
    color: #61738a;
    font-size: 11px;
    font-weight: 750;
}

.report-case-references strong {
    color: #314765;
}

.report-case-references a {
    color: #087b7d;
    text-decoration: none;
}

.report-case-references a:hover,
.report-case-references a:focus-visible {
    text-decoration: underline;
}

.report-case-kpis span {
    min-height: 104px;
}

.report-evidence-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.report-evidence-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 9px 11px;
    border: 1px solid #d8e8ef;
    border-left: 4px solid #9fb2c5;
    border-radius: 7px;
    background: #fbfdfe;
}

.report-evidence-item.available {
    border-left-color: #07928e;
    background: #f1fbf9;
}

.report-evidence-item strong {
    color: #18304e;
    font-size: 12px;
    line-height: 1.35;
}

.report-evidence-item span {
    color: #087b7d;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;
}

.report-method-note {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(360px, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 10px;
    padding: 13px 15px;
    border: 1px solid #d8e4eb;
    border-left: 4px solid #748ba3;
    border-radius: 7px;
    background: #f7fafc;
}

.report-method-note > div > strong {
    color: #18304e;
    font-size: 13px;
}

.report-method-note p {
    margin: 5px 0 0;
    color: #536781;
    font-size: 12px;
    line-height: 1.55;
}

.report-method-note-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.report-method-note-metrics span {
    display: flex;
    min-width: 0;
    min-height: 54px;
    padding: 7px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-left: 1px solid #d8e4eb;
    text-align: center;
}

.report-method-note-metrics strong {
    color: #18304e;
    font-size: 15px;
}

.report-method-note-metrics small {
    margin-top: 3px;
    color: #61738a;
    font-size: 10px;
    line-height: 1.25;
}

@media (max-width: 980px) {
    .report-method-note {
        grid-template-columns: 1fr;
    }

    .report-method-note-metrics span:first-child {
        border-left: 0;
    }
}

.report-case-chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
    min-width: 0;
    max-width: 100%;
}

.report-chart-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.report-chart-heading {
    position: relative;
    align-items: flex-start;
    gap: 12px;
    min-height: 36px;
    padding-right: 64px;
}

.report-chart-heading h2 {
    margin-bottom: 4px;
}

.report-chart-heading span {
    display: block;
    max-width: 720px;
    color: #536781;
    line-height: 1.45;
}

.report-chart-svg-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 6px 0 2px;
}

.report-d3-chart {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    display: block;
}

.report-axis {
    stroke: #d7e3eb;
    stroke-width: 1;
}

.report-chart-row {
    cursor: pointer;
    outline: none;
}

.report-chart-row rect {
    transition: opacity .16s ease, filter .16s ease, transform .16s ease;
}

.report-chart-row:hover rect,
.report-chart-row:focus rect,
.report-chart-row.active rect {
    opacity: 1;
    filter: drop-shadow(0 5px 8px rgba(8, 123, 125, .25));
}

.report-bar-label {
    fill: #132a46;
    font-size: 12px;
    font-weight: 700;
}

.report-bar-group {
    fill: #6c7c92;
    font-size: 10px;
}

.report-bar-value {
    fill: #132a46;
    font-size: 12px;
    font-weight: 700;
}

.report-effect-note {
    fill: #536781;
    font-size: 11px;
    font-weight: 700;
}

.report-forest-line {
    stroke: #6f839b;
    stroke-width: 2;
}

.report-forest-point {
    fill: #087b7d;
    stroke: #ffffff;
    stroke-width: 2;
}

.report-forest-null {
    stroke: #d26a6a;
    stroke-width: 1;
    stroke-dasharray: 5 4;
}

.report-matrix-cell {
    stroke: #d7e4ec;
    stroke-width: 1;
}

.report-matrix-cell.active {
    fill: #07928e;
}

.report-matrix-cell.inactive {
    fill: #eef3f7;
}

.report-matrix-label,
.report-group-label {
    fill: #18304e;
    font-size: 11px;
    font-weight: 800;
}

.report-gene-symbol {
    font-style: italic;
}

.report-matrix-head {
    fill: #61738a;
    font-size: 10px;
    font-weight: 800;
}

.report-group-bar.t2d {
    fill: #1267c9;
}

.report-group-bar.chd {
    fill: #ee8a21;
}

.report-group-bar.shared {
    fill: #07928e;
}

.report-chart-detail {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #d9e7ef;
    border-radius: 8px;
    background: linear-gradient(180deg, #f9fcfd, #fff);
    color: #536781;
    min-height: 72px;
}

.report-chart-detail strong {
    display: block;
    color: #087b7d;
    font-size: 15px;
    margin-bottom: 6px;
}

.report-chart-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.report-chart-detail-grid span {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
    border-radius: 8px;
    background: #f2f8fb;
    color: #132a46;
}

.report-chart-detail-grid b {
    color: #718198;
    font-size: 11px;
    text-transform: uppercase;
}

.report-chart-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e4eef4;
    color: #65758a;
    font-size: 12px;
}

.report-case-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 16px;
}

.report-data-card h2 {
    color: #087b7d;
}

.report-data-lineage {
    display: grid;
    gap: 10px;
    margin: 0;
    padding-left: 22px;
}

.report-data-lineage li {
    padding: 10px 12px;
    border: 1px solid #dbeaf1;
    border-radius: 8px;
    background: #fbfdfe;
}

.report-data-lineage strong,
.report-data-lineage span,
.report-data-lineage code {
    display: block;
}

.report-data-lineage span {
    margin: 4px 0;
    color: #536781;
    line-height: 1.5;
}

.report-data-lineage code {
    color: #1267c9;
    white-space: normal;
    word-break: break-word;
}

.report-source-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.report-source-list a,
.mini-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid #b8d9e4;
    color: #087b7d;
    background: #fff;
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 1180px) {
    .report-case-chart-grid,
    .report-case-lower-grid {
        grid-template-columns: 1fr;
    }

    .report-evidence-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .report-evidence-strip {
        grid-template-columns: 1fr;
    }
}


/* candidate story network polish 20260626 */
.feature-viz-heading .info-dot[title],
.feature-card-heading .info-dot[title] {
    position: relative;
}

.feature-viz-heading .info-dot[title]::after,
.feature-card-heading .info-dot[title]::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: min(360px, 72vw);
    padding: 10px 12px;
    border: 1px solid #cfe0ec;
    border-radius: 8px;
    background: #ffffff;
    color: #243957;
    box-shadow: 0 12px 28px rgba(7, 31, 65, 0.16);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    pointer-events: none;
}

.feature-viz-heading .info-dot[title]:hover::after,
.feature-viz-heading .info-dot[title]:focus-visible::after,
.feature-card-heading .info-dot[title]:hover::after,
.feature-card-heading .info-dot[title]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.story-node-metrics {
    display: grid;
    grid-template-columns: minmax(96px, auto) minmax(0, 1fr);
    gap: 8px 14px;
    align-items: center;
    margin: 16px 0 18px;
    padding: 12px;
    border: 1px solid #dbe8f1;
    border-radius: 8px;
    background: #ffffff;
}

.story-node-metrics dt,
.story-node-metrics dd {
    margin: 0;
    min-width: 0;
}

.story-node-metrics dt {
    color: #53657e;
    font-size: 12px;
    font-weight: 900;
}

.story-node-metrics dd {
    color: #071f41;
    font-size: 15px;
    font-weight: 900;
    text-align: right;
    word-break: break-word;
}


/* case study metadata cleanup 20260626 */
#feature-tab-case-studies .feature-case-subtabs[hidden],
#feature-tab-case-studies .feature-case-lower-grid[hidden],
#feature-tab-case-studies .feature-filter-tabs[hidden] {
    display: none !important;
}

.report-case-kpis span {
    min-height: 82px;
}

.report-chart-heading {
    grid-template-columns: 1fr;
}

.report-chart-detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}


/* case hero and evidence-theme label polish 20260626 */
@media (min-width: 1281px) {
    .report-case-hero {
        grid-template-columns: minmax(0, 1fr) minmax(430px, 0.58fr);
        gap: 14px;
        align-items: start;
    }

    .report-case-hero .feature-case-hero-copy h2 {
        max-width: none;
        font-size: 29px;
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .report-case-hero .feature-case-hero-copy p {
        max-width: none;
        font-size: 15px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .report-case-kpis {
        grid-template-columns: repeat(4, minmax(92px, 1fr));
        align-self: start;
    }

    .report-case-kpis span {
        min-height: 72px;
        padding: 8px 6px;
    }

    .report-case-kpis strong {
        font-size: 24px;
        line-height: 1.05;
    }

    .report-case-kpis small {
        white-space: nowrap;
        font-size: 11px;
        line-height: 1.15;
    }
}

.story-network-heading-compact {
    justify-content: flex-end;
    min-height: 0;
    margin-bottom: 8px;
}

.story-network-heading-compact .info-dot {
    margin-left: 0;
}

.metabdb-global-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(7, 31, 65, 0.22);
    backdrop-filter: blur(2px);
}

.metabdb-global-loader.is-visible {
    display: flex;
}

.metabdb-global-loader__panel {
    min-width: 220px;
    padding: 22px 26px;
    border: 1px solid #cfe1ec;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 20px 60px rgba(8, 31, 65, 0.22);
    display: flex;
    gap: 14px;
    align-items: center;
    color: var(--ink);
    font-weight: 800;
}

.metabdb-global-loader__spinner {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid #d9edf2;
    border-top-color: var(--teal);
    animation: metabdb-loader-spin 0.8s linear infinite;
    flex: 0 0 auto;
}

@keyframes metabdb-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .metabdb-global-loader__spinner {
        animation: none;
    }

    .coloc-module-spinner {
        animation: none;
    }
}

.v2-entity-page {
    display: grid;
    gap: 1rem;
}

.v2-entity-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.75fr);
    gap: 1rem;
    align-items: center;
}

.v2-entity-form {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 120px;
    gap: 0.65rem;
}

.v2-entity-form select,
.v2-entity-form input,
.v2-entity-form button {
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 0.85rem;
    font: inherit;
}

.v2-entity-form button {
    background: var(--teal);
    color: #fff;
    font-weight: 700;
}

.v2-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1rem;
}

.v2-status-card {
    border-color: rgba(0, 139, 139, 0.22);
    background: linear-gradient(90deg, rgba(0, 139, 139, 0.08), rgba(255, 255, 255, 0.85));
}

.v2-status-card p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.v2-candidate-row {
    display: grid;
    grid-template-columns: minmax(220px, 0.7fr) minmax(220px, 1fr) minmax(120px, 0.45fr);
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 0.55rem;
    background: #fff;
}

.v2-candidate-row span,
.v2-candidate-row em {
    color: var(--muted);
    font-style: normal;
    min-width: 0;
    overflow-wrap: anywhere;
}

.v2-kv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.v2-kv-grid div {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.75rem;
    background: #fff;
}

.v2-kv-grid span {
    display: block;
    color: var(--muted);
    font-size: 0.82rem;
    margin-bottom: 0.2rem;
    text-transform: capitalize;
}

.v2-kv-grid strong {
    color: var(--ink);
    overflow-wrap: anywhere;
}

.v2-chain-card .section-title-row p {
    margin: 0.25rem 0 0;
    color: var(--muted);
}

.v2-evidence-chain {
    display: grid;
    gap: 0.9rem;
}

.v2-chain-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.v2-chain-metrics div {
    padding: 0.75rem 0.9rem;
    border-right: 1px solid var(--line);
}

.v2-chain-metrics div:last-child {
    border-right: 0;
}

.v2-chain-metrics span {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.v2-chain-metrics strong {
    display: block;
    margin-top: 0.25rem;
    color: var(--teal);
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.v2-chain-panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 1rem;
    background: #fbfdfe;
}

.v2-evidence-stack {
    display: grid;
    gap: 0;
}

.v2-layer-connector {
    width: 2px;
    height: 22px;
    margin: 0 auto;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 139, 139, 0.62) 0,
        rgba(0, 139, 139, 0.62) 5px,
        transparent 5px,
        transparent 10px
    );
}

.v2-chain-panel h3 {
    margin: 0 0 0.55rem;
    color: var(--teal);
    font-size: 1rem;
}

.v2-chain-panel p {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.v2-chain-genome svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 140px;
}

.v2-manhattan-panel {
    overflow: hidden;
}

.v2-manhattan-svg {
    display: block;
    width: 100%;
    min-width: 760px;
    height: auto;
    margin: 0.45rem 0 0;
    border: 1px solid rgba(127, 150, 170, 0.24);
    border-radius: 7px;
    background: #fff;
}

.v2-manhattan-svg text {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 750;
}

.v2-manhattan-band.odd {
    fill: rgba(0, 139, 139, 0.035);
}

.v2-manhattan-band.even {
    fill: rgba(31, 111, 209, 0.03);
}

.v2-manhattan-grid {
    stroke: #dfe8ef;
    stroke-width: 1;
}

.v2-manhattan-point {
    fill: #078787;
    opacity: 0.72;
    stroke: #fff;
    stroke-width: 0.55;
}

.v2-manhattan-point:nth-child(2n),
.v2-manhattan-point.chr-2,
.v2-manhattan-point.chr-4,
.v2-manhattan-point.chr-6,
.v2-manhattan-point.chr-8,
.v2-manhattan-point.chr-10,
.v2-manhattan-point.chr-12,
.v2-manhattan-point.chr-14,
.v2-manhattan-point.chr-16,
.v2-manhattan-point.chr-18,
.v2-manhattan-point.chr-20,
.v2-manhattan-point.chr-22 {
    fill: #2b75bd;
}

.v2-manhattan-point:hover {
    fill: #d56125;
    opacity: 1;
    r: 4;
}

.v2-manhattan-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    color: var(--muted);
    font-size: 0.82rem;
}

.v2-manhattan-summary b {
    color: var(--teal);
}

.v2-chain-axis {
    stroke: #9fb2c6;
    stroke-width: 2;
}

.v2-chain-chr-line {
    stroke: var(--teal);
    stroke-width: 4;
    stroke-linecap: round;
    opacity: 0.75;
}

.v2-chain-chr-dot {
    fill: var(--teal);
    stroke: #fff;
    stroke-width: 2;
}

.v2-chain-genome text {
    fill: var(--muted);
    font-size: 12px;
    font-weight: 800;
}

.v2-chain-all-summary,
.v2-chain-locus-list,
.v2-chain-chip-row,
.v2-chain-metabolites,
.v2-chain-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.v2-chain-all-summary span,
.v2-chain-locus-list span {
    border: 1px solid rgba(0, 139, 139, 0.22);
    border-radius: 999px;
    padding: 0.35rem 0.65rem;
    color: var(--ink);
    background: rgba(0, 139, 139, 0.07);
    font-size: 0.85rem;
}

.v2-chain-chip {
    display: grid;
    gap: 0.18rem;
    min-width: 170px;
    max-width: 260px;
    border: 1px solid var(--line);
    border-left: 4px solid #7e66be;
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    background: #fff;
}

.v2-chain-chip.coloc {
    border-left-color: var(--teal);
}

.v2-chain-chip.rare {
    border-left-color: #cf4c4c;
    background: rgba(207, 76, 76, 0.05);
}

.v2-chain-chip.protein {
    border-left-color: #1f6fd1;
    background: rgba(31, 111, 209, 0.05);
}

.v2-chain-chip.combined {
    border-left-color: #c77912;
    background: rgba(199, 121, 18, 0.07);
}

.v2-evidence-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
}

.v2-evidence-legend span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.22rem 0.55rem;
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
    background: #fff;
}

.v2-evidence-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-right: 0.35rem;
    background: #7e66be;
}

.v2-evidence-legend .rare::before {
    background: #cf4c4c;
}

.v2-evidence-legend .coloc::before {
    background: var(--teal);
}

.v2-evidence-legend .protein::before {
    background: #1f6fd1;
}

.v2-evidence-legend .combined::before {
    background: #c77912;
}

.v2-genome-entity-rail {
    display: block;
    width: 100%;
    min-height: 138px;
    margin: 0.2rem 0 0.8rem;
    border: 1px solid rgba(127, 150, 170, 0.24);
    border-radius: 8px;
    background: #fff;
}

.v2-genome-entity-rail text {
    fill: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.v2-genome-entity-rail line {
    stroke: #b8c7d6;
    stroke-width: 1.2;
}

.v2-rail-node line {
    stroke-width: 1.6;
    stroke: #b8c7d6;
    stroke-dasharray: 4 4;
}

.v2-rail-node circle {
    fill: #7e66be;
    stroke: #fff;
    stroke-width: 2;
}

.v2-rail-node.rare circle {
    fill: #cf4c4c;
}

.v2-rail-node.combined circle {
    fill: #c77912;
}

.v2-rail-node.coloc circle {
    fill: var(--teal);
}

.v2-rail-node.protein circle {
    fill: #1f6fd1;
}

.v2-rail-node.gene circle {
    fill: #7e66be;
}

.v2-rail-node text {
    fill: var(--ink);
    font-size: 10px;
}

.v2-chain-chip b,
.v2-chain-trait-row strong {
    color: var(--ink);
}

.v2-chain-chip em,
.v2-chain-chip small,
.v2-chain-trait-row em,
.v2-chain-trait-row small {
    color: var(--muted);
    font-style: normal;
    font-size: 0.78rem;
}

.v2-chain-metabolite-node {
    min-width: 240px;
    max-width: 420px;
    border: 1px solid rgba(0, 139, 139, 0.28);
    border-radius: 8px;
    padding: 0.75rem;
    background: rgba(0, 139, 139, 0.07);
}

.v2-chain-metabolites {
    justify-content: center;
}

.v2-chain-outcome-panel .v2-chain-traits {
    justify-content: center;
}

.v2-chain-metabolite-panel {
    background: linear-gradient(180deg, rgba(0, 139, 139, 0.08), #ffffff);
}

.v2-chain-metabolite-node strong,
.v2-chain-metabolite-node span,
.v2-chain-metabolite-node small {
    display: block;
}

.v2-chain-metabolite-node span,
.v2-chain-metabolite-node small {
    margin-top: 0.25rem;
    color: var(--muted);
}

.v2-chain-trait-row {
    display: grid;
    grid-template-columns: 34px minmax(120px, 1fr);
    grid-template-areas:
        "edge name"
        "edge evidence"
        "edge count";
    gap: 0.1rem 0.45rem;
    min-width: 220px;
    max-width: 330px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    background: #fff;
}

.v2-chain-edge {
    grid-area: edge;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 100%;
    color: var(--teal);
    font-weight: 900;
}

.v2-chain-edge.directed {
    color: #cf4c4c;
}

.v2-chain-edge.dashed {
    letter-spacing: 0.04rem;
}

.v2-chain-trait-row strong {
    grid-area: name;
}

.v2-chain-trait-row em {
    grid-area: evidence;
}

.v2-chain-trait-row small {
    grid-area: count;
}

.v2-chain-boundary {
    margin: 0;
    border-left: 4px solid var(--teal);
    padding: 0.55rem 0.8rem;
    color: var(--muted);
    background: rgba(0, 139, 139, 0.06);
}

.v2-result-insight {
    display: grid;
    grid-template-columns: minmax(250px, 0.9fr) minmax(0, 2.1fr);
    gap: 18px;
    align-items: center;
    margin-bottom: 12px;
    border: 1px solid #bfe0dc;
    border-radius: 8px;
    background: #f2faf8;
    padding: 14px 16px;
}

.v2-result-insight-copy {
    display: grid;
    gap: 5px;
}

.v2-result-insight-copy span {
    color: var(--teal);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.v2-result-insight-copy strong {
    color: #071f41;
    font-size: 16px;
    line-height: 1.4;
}

.v2-result-insight-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-left: 1px solid #cfe3e4;
}

.v2-result-insight-facts p {
    display: grid;
    align-content: start;
    gap: 3px;
    min-width: 0;
    margin: 0;
    padding: 2px 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.4;
}

.v2-result-insight-facts p + p {
    border-left: 1px solid #dce9ed;
}

.v2-result-insight-facts b {
    color: #173452;
    font-size: 12px;
}

.v2-metabolite-annotation {
    grid-template-columns: minmax(260px, 1.15fr) minmax(340px, 1.7fr) auto;
    align-items: stretch;
}

.v2-metabolite-annotation-evidence {
    display: grid;
    align-content: center;
    gap: 5px;
    min-width: 0;
    border-left: 1px solid #cfe3e4;
    padding-left: 18px;
}

.v2-metabolite-annotation-evidence b {
    color: #173452;
    font-size: 12px;
}

.v2-metabolite-annotation-evidence p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.v2-metabolite-annotation-sources {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 150px;
    border-left: 1px solid #cfe3e4;
    padding-left: 16px;
}

.v2-metabolite-annotation-sources span {
    flex-basis: 100%;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-align: right;
}

.v2-metabolite-annotation-sources a {
    color: var(--teal);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.v2-metabolite-annotation-sources a:hover,
.v2-metabolite-annotation-sources a:focus {
    text-decoration: underline;
}

/* Shared-coordinate evidence canvas. The left side stays visual; the right
   side is a stable inspector that is updated by hover/focus on a track mark. */
.v2-compact-canvas-panel {
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}

.v2-compact-canvas-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    min-height: 0;
}

.v2-compact-canvas-left {
    position: relative;
    min-width: 0;
    padding: 0.9rem 0.8rem 0.6rem;
    border-right: 1px solid var(--line);
    background: #fcfeff;
}

.v2-compact-evidence-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
}

.v2-compact-canvas-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.55rem;
    padding: 0 0.35rem 0.55rem;
    border-bottom: 1px solid var(--line);
}

.v2-compact-canvas-header span {
    display: block;
    color: var(--teal);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
}

.v2-compact-canvas-header h3 {
    margin: 0.12rem 0 0;
    color: var(--ink);
    font-size: 1.08rem;
}

.v2-compact-coordinate-help {
    position: absolute;
    top: 0.55rem;
    right: 4.25rem;
    z-index: 13;
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid #9fcfd0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.96);
    color: var(--teal-dark, #087b7b);
    cursor: help;
}

.v2-compact-coordinate-help b {
    font: 800 0.95rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.v2-compact-coordinate-help > span {
    position: absolute;
    top: calc(100% + 0.42rem);
    right: 0;
    z-index: 14;
    width: min(23rem, calc(100vw - 2.4rem));
    padding: 0.55rem 0.65rem;
    border: 1px solid #b9dbe1;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(14, 52, 72, 0.16);
    color: var(--ink, #0e2946);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.42;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.v2-compact-coordinate-help:hover > span,
.v2-compact-coordinate-help:focus > span {
    opacity: 1;
    transform: translateY(0);
}

.v2-compact-band.odd { fill: rgba(0, 139, 139, 0.035); }
.v2-compact-band.even { fill: rgba(31, 111, 209, 0.034); }
.v2-coordinate-highlight { fill: rgba(8, 139, 139, 0.14); pointer-events: none; }

.v2-compact-chr,
.v2-track-title {
    fill: #687b92;
    font-size: 10px;
    font-weight: 800;
}

.v2-track-title { fill: #111111; font-size: 16px; }
.v2-track-subtitle { fill: #8294a6; font-size: 8px; font-weight: 700; }

.v2-compact-axis {
    stroke: #afc1d0;
    stroke-width: 1.4;
}

.v2-compact-threshold {
    stroke: #d56125;
    stroke-width: 1;
    stroke-dasharray: 4 4;
    opacity: 0.7;
}

.v2-compact-snp-point {
    fill: #6f8193;
    fill-opacity: 0.82;
    stroke: #ffffff;
    stroke-width: 0.65;
    cursor: pointer;
    transition: fill-opacity 120ms ease, stroke-width 120ms ease, fill 120ms ease;
}

.v2-compact-snp-point.metqtl { fill: #079a8f; }
.v2-compact-snp-point.coloc { fill: #7655c7; }
.v2-compact-snp-point.combined { fill: #d77a12; }
.v2-compact-snp-point.finemap { fill: #d54f5d; }

.v2-compact-snp-point:hover,
.v2-compact-snp-point:focus {
    fill-opacity: 1;
    stroke: #102a4d;
    stroke-width: 1.5;
    outline: none;
}

.v2-compact-entity { cursor: pointer; }
.v2-compact-entity line { stroke: #9ea7c7; stroke-width: 1.25; stroke-dasharray: 3 3; }
.v2-compact-entity path { fill: #7e66be; stroke: #ffffff; stroke-width: 1.35; }
.v2-compact-entity text { fill: #18385f; font-size: 9px; font-weight: 800; }
.v2-compact-entity.gene.rare path { fill: #cf4c4c; }
.v2-compact-entity.gene.coloc path { fill: var(--teal); }
.v2-compact-entity.gene.combined path { fill: #c77912; }
.v2-compact-entity.gene text { font-style: italic; }
.v2-compact-entity.protein path { fill: #1f6fd1; }
.v2-compact-entity.protein.direct path { fill: #267fbd; }
.v2-compact-entity.protein.combined path { fill: #7251bd; }
.v2-compact-entity:hover path,
.v2-compact-entity:focus path { stroke: #102a4d; stroke-width: 2.5; }

.v2-gene-annotation {
    cursor: pointer;
    outline: none;
}

.v2-gene-annotation .body,
.v2-gene-annotation .end {
    stroke: #167f7b;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.v2-gene-annotation.rare .body,
.v2-gene-annotation.rare .end { stroke: #c44f55; }
.v2-gene-annotation.combined .body,
.v2-gene-annotation.combined .end { stroke: #c77912; }
.v2-gene-annotation.protein .body,
.v2-gene-annotation.protein .end,
.v2-gene-annotation.protein-supported .body,
.v2-gene-annotation.protein-supported .end { stroke: #7251bd; }

.v2-gene-annotation text {
    fill: #17375b;
    font-size: 10px;
    font-style: italic;
    font-weight: 850;
}

.v2-gene-annotation:hover .body,
.v2-gene-annotation:hover .end,
.v2-gene-annotation:focus .body,
.v2-gene-annotation:focus .end {
    stroke: #102a4d;
    stroke-width: 3.2;
}

.v2-track-separator {
    stroke: #d7e3ec;
    stroke-width: 1;
}

.v2-evidence-interval {
    cursor: pointer;
    outline: none;
}

.v2-evidence-interval .body,
.v2-evidence-interval .end {
    stroke: #118a78;
    stroke-width: 2.7;
    stroke-linecap: round;
}

.v2-evidence-interval.combined .body,
.v2-evidence-interval.combined .end { stroke: #d34f5d; }
.v2-evidence-interval.rare .body,
.v2-evidence-interval.rare .end,
.v2-evidence-interval.direct .body,
.v2-evidence-interval.direct .end { stroke: #2f6fca; }

.v2-evidence-interval text {
    fill: #17375b;
    font-size: 10px;
    font-weight: 850;
}

.v2-evidence-interval.gene text { font-style: italic; }

.v2-evidence-interval:hover .body,
.v2-evidence-interval:hover .end,
.v2-evidence-interval:focus .body,
.v2-evidence-interval:focus .end {
    stroke: #102a4d;
    stroke-width: 3.5;
}

.v2-compact-canvas-legend {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.25rem 0.35rem 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.v2-compact-canvas-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: #078787;
}
.v2-genomic-legend .association::before { background: #6f8193; }
.v2-genomic-legend .metqtl::before { background: #079a8f; clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.v2-genomic-legend .coloc::before { background: #7655c7; transform: rotate(45deg); border-radius: 1px; }
.v2-genomic-legend .combined::before { background: #d77a12; border-radius: 1px; }
.v2-genomic-legend .finemap::before { background: #d54f5d; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%); border-radius: 0; }
.v2-genomic-legend .gene-shapes::before { display: none; }
.v2-genomic-legend .interval-combined::before,
.v2-genomic-legend .interval-coloc::before,
.v2-genomic-legend .interval-direct::before {
    width: 13px;
    height: 4px;
    border-radius: 1px;
}
.v2-genomic-legend .interval-combined::before { background: #d34f5d; }
.v2-genomic-legend .interval-coloc::before { background: #118a78; }
.v2-genomic-legend .interval-direct::before { background: #2f6fca; }

.v2-disease-effect-panel { padding: 0; overflow: hidden; }

.v2-disease-effect-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
    min-height: 480px;
}

.v2-disease-effect-visual {
    min-width: 0;
    padding: 0.95rem 0.85rem 0.75rem;
    border-right: 1px solid var(--line);
    background: #fcfeff;
}

.v2-disease-effect-visual header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0.3rem 0.55rem;
    border-bottom: 1px solid var(--line);
}

.v2-disease-effect-visual header h3 { margin: 0; color: var(--teal); font-size: 1rem; }
.v2-disease-effect-visual header p { max-width: 560px; margin: 0; color: var(--muted); font-size: 0.76rem; text-align: right; }
.v2-disease-effect-controls { display: inline-flex; align-items: center; gap: 0.45rem; }
.v2-disease-evidence-switch {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #9fcfd0;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}
.v2-disease-evidence-switch button {
    border: 0;
    border-right: 1px solid #c8e2e3;
    border-radius: 0;
}
.v2-disease-evidence-switch button:last-child { border-right: 0; }
.v2-disease-evidence-switch button[aria-pressed="true"] {
    background: var(--teal, #078787);
    color: #fff;
}
.v2-disease-effect-controls button {
    min-height: 1.9rem;
    border: 1px solid #9fcfd0;
    border-radius: 5px;
    background: #ffffff;
    color: var(--teal-dark, #087b7b);
    cursor: pointer;
    font: 800 0.75rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    padding: 0.35rem 0.52rem;
}
.v2-disease-effect-controls button:hover,
.v2-disease-effect-controls button:focus { border-color: var(--teal); background: #effafa; outline: none; }
.v2-disease-effect-help {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid #9fcfd0;
    border-radius: 50%;
    color: var(--teal-dark, #087b7b);
    cursor: help;
    font: 800 0.95rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.v2-disease-effect-help > span {
    position: absolute;
    top: calc(100% + 0.42rem);
    right: 0;
    z-index: 16;
    width: min(24rem, calc(100vw - 2.4rem));
    padding: 0.55rem 0.65rem;
    border: 1px solid #b9dbe1;
    border-radius: 5px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(14, 52, 72, 0.16);
    color: var(--ink, #0e2946);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.42;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity 120ms ease, transform 120ms ease;
}
.v2-disease-effect-help:hover > span,
.v2-disease-effect-help:focus > span { opacity: 1; transform: translateY(0); }
.v2-disease-effect-scroll { overflow-x: auto; overflow-y: hidden; }
.v2-disease-effect-svg { display: block; min-width: 920px; width: 100%; height: 386px; }
.v2-effect-baseline { stroke: #19395d; stroke-width: 1.5; stroke-dasharray: 5 4; }
.v2-effect-axis { stroke: #a9bac9; stroke-width: 1.2; }
.v2-effect-tick { fill: #6e8095; font-size: 10px; font-weight: 800; }
.v2-effect-direction { font-size: 10px; font-weight: 900; }
.v2-effect-direction.risk { fill: #c74c55; }
.v2-effect-direction.protective { fill: #128c78; }
.v2-disease-effect-mark { cursor: pointer; outline: none; }
.v2-disease-effect-mark .range { stroke: #8fa2b7; stroke-width: 2.6; }
.v2-disease-effect-mark .connector { stroke: #a8b9c8; stroke-width: 1.2; stroke-dasharray: 2 3; }
.v2-disease-effect-mark path { fill: #647c94; stroke: #fff; stroke-width: 1.8; }
.v2-disease-effect-mark.risk path { fill: #d85a62; }
.v2-disease-effect-mark.protective path { fill: #149b83; }
.v2-disease-effect-mark.coloc path { fill: #7655c7; }
.v2-disease-effect-mark.mr path { fill: #d77a12; }
.v2-disease-effect-mark text { fill: #18385f; font-size: 11px; font-weight: 850; }
.v2-disease-effect-label { cursor: pointer; pointer-events: all; }
.v2-disease-effect-label rect {
    fill: rgba(255, 255, 255, 0.94);
    stroke: #c8d9e6;
    stroke-width: 0.8;
}
.v2-disease-effect-label text {
    fill: #18385f;
    font-size: 9.2px;
    font-weight: 820;
    paint-order: stroke;
    stroke: #ffffff;
    stroke-width: 2px;
    stroke-linejoin: round;
}
.v2-disease-label-secondary { display: none; }
.v2-disease-labels-visible .v2-disease-label-secondary { display: initial; }
.v2-disease-effect-mark:hover path,
.v2-disease-effect-mark:focus path { stroke: #102a4d; stroke-width: 2.5; }

.v2-disease-effect-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.3rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 800;
}

.v2-disease-effect-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.v2-disease-effect-legend span::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 0.32rem;
    border-radius: 50%;
    background: #647c94;
}

.v2-disease-effect-legend span.has-marker::before {
    display: none;
}

.v2-effect-legend-marker {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    overflow: visible;
}

.v2-effect-legend-marker path {
    fill: #70839a;
    stroke: #fff;
    stroke-width: 1.2;
}

.v2-effect-legend-marker.risk path { fill: #d9535c; }
.v2-effect-legend-marker.protective path { fill: #2f73c9; }
.v2-effect-legend-marker.association-coloc path { fill: #2f73c9; }
.v2-effect-legend-marker.association-mr path { fill: #d77a12; }
.v2-effect-legend-marker.association-coloc-mr {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
}
.v2-effect-legend-marker.association-coloc-mr path { fill: #7655c7; }
.v2-disease-effect-legend .risk::before { background: #d85a62; }
.v2-disease-effect-legend .protective::before { background: #149b83; }
.v2-disease-effect-legend .coloc::before { background: #7655c7; }
.v2-disease-effect-legend .mr::before { background: #d77a12; transform: rotate(45deg); border-radius: 1px; }

/* Disease effect evidence: composition, separate HR/OR distributions, and one inspector. */
.v2-disease-effect-panel {
    padding: 0.9rem;
    background: #fcfeff;
}

.v2-disease-effect-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.v2-disease-effect-section-header h3 {
    margin: 0;
    color: var(--teal);
    font-size: 1rem;
}

.v2-disease-effect-section-header p {
    max-width: 76rem;
    margin: 0.28rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.v2-disease-effect-grid {
    display: grid;
    grid-template-columns: minmax(210px, 0.72fr) minmax(360px, 1.18fr) minmax(360px, 1.18fr) minmax(250px, 0.82fr);
    gap: 0.7rem;
    min-height: 0;
}

.v2-disease-effect-grid[data-v2-effect-card-count="3"] {
    grid-template-columns: minmax(210px, 0.78fr) minmax(420px, 1.42fr) minmax(250px, 0.86fr);
}

.v2-disease-effect-card,
.v2-disease-effect-inspector {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.v2-disease-effect-card {
    padding: 0.65rem;
}

.v2-disease-effect-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    min-height: 2.25rem;
    margin-bottom: 0.3rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--line);
}

.v2-disease-effect-card > header h4 {
    margin: 0;
    color: var(--ink);
    font-size: 0.88rem;
}

.v2-disease-effect-card > header span {
    display: block;
    margin-top: 0.12rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 750;
}

.v2-disease-effect-card > header button {
    min-height: 1.75rem;
    padding: 0.28rem 0.45rem;
    border: 1px solid #9fcfd0;
    border-radius: 5px;
    background: #fff;
    color: var(--teal-dark, #087b7b);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 850;
}

.v2-disease-effect-card > header button:hover,
.v2-disease-effect-card > header button:focus {
    border-color: var(--teal);
    background: #effafa;
    outline: none;
}

.v2-disease-pie-svg {
    display: block;
    width: min(100%, 190px);
    margin: 0.2rem auto 0.35rem;
}

.v2-disease-pie-svg > circle {
    fill: #fff;
    stroke: #e4edf2;
    stroke-width: 1;
}

.v2-disease-pie-svg > text {
    fill: var(--ink);
    font-size: 17px;
    font-weight: 900;
}

.v2-disease-pie-svg > text.subtitle {
    fill: var(--muted);
    font-size: 9px;
    font-weight: 750;
}

.v2-disease-pie-segment {
    cursor: pointer;
    outline: none;
    stroke: #fff;
    stroke-width: 1.4;
}

.v2-disease-pie-segment:hover,
.v2-disease-pie-segment:focus {
    stroke: #173a5e;
    stroke-width: 2.4;
}

.v2-disease-pie-legend {
    display: grid;
    gap: 0.24rem;
    max-height: 12.5rem;
    overflow: auto;
}

.v2-disease-pie-legend span {
    display: grid;
    grid-template-columns: 9px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.7rem;
}

.v2-disease-pie-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.v2-disease-pie-legend b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.v2-disease-pie-legend em {
    color: var(--ink);
    font-style: normal;
    font-weight: 850;
}

.v2-effect-chart-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

.v2-disease-effect-svg.v2-effect-boxplot-svg {
    display: block;
    width: 100%;
    min-width: 500px;
    height: auto;
}

.v2-effect-null-line {
    stroke: #4e647d;
    stroke-width: 1.2;
    stroke-dasharray: 5 4;
}

.v2-effect-null-label,
.v2-effect-axis-label,
.v2-effect-count {
    fill: #64788e;
    font-size: 9px;
    font-weight: 800;
}

.v2-effect-category-label {
    fill: #18385f;
    font-size: 9px;
    font-weight: 820;
}

.v2-effect-row-line {
    stroke: #edf2f5;
    stroke-width: 1;
}

.v2-effect-whisker {
    stroke: #8297ad;
    stroke-width: 1.4;
}

.v2-effect-box {
    fill: rgba(115, 190, 188, 0.34);
    stroke: #178f8a;
    stroke-width: 1.2;
}

.v2-effect-median {
    stroke: #0e6f70;
    stroke-width: 1.8;
}

.v2-effect-point {
    cursor: pointer;
    outline: none;
}

.v2-effect-point path {
    stroke: #fff;
    stroke-width: 1.1;
    opacity: 0.86;
}

.v2-effect-point.risk path { fill: #8a919a; }
.v2-effect-point.protective path { fill: #8a919a; }
.v2-effect-point:hover path,
.v2-effect-point:focus path {
    stroke: #102a4d;
    stroke-width: 2;
    opacity: 1;
}

.v2-disease-effect-inspector {
    max-height: 33rem;
    overflow: auto;
}

.v2-disease-effect-legend {
    margin-top: 0.65rem;
    padding: 0.45rem 0.2rem 0;
    border-top: 1px solid var(--line);
}

.v2-simple-disease-table-panel {
    padding: 0.85rem;
}

.v2-simple-disease-table-panel .section-title-row {
    margin-bottom: 0.45rem;
}

.v2-disease-effect-legend .risk::before { background: #8a919a; }
.v2-disease-effect-legend .protective::before { background: #8a919a; }
.v2-disease-effect-legend .coloc::before {
    border-radius: 1px;
    background: #647c94;
    transform: rotate(45deg);
}
.v2-disease-effect-legend .mr::before {
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-bottom: 9px solid #647c94;
    border-left: 5px solid transparent;
    border-radius: 0;
    background: transparent;
    transform: none;
}

@media (max-width: 1650px) {
    .v2-disease-effect-grid {
        grid-template-columns: minmax(230px, 0.7fr) minmax(420px, 1.3fr);
    }
}

.v2-static-th {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.5rem;
    color: inherit;
    font: inherit;
}

.v2-compact-disease-track {
    margin: 0.75rem 0.35rem 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--line);
}

.v2-compact-disease-track-title {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    color: var(--ink);
}

.v2-compact-disease-track-title > span,
.v2-compact-disease-track-title strong {
    color: var(--teal);
    font-weight: 900;
}

.v2-compact-disease-track-title small {
    margin-left: auto;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 650;
    text-align: right;
}

.v2-compact-disease-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.56rem;
}

.v2-compact-disease-tag {
    display: grid;
    grid-template-columns: 26px minmax(120px, 1fr);
    align-items: center;
    gap: 0.1rem 0.34rem;
    flex: 1 1 210px;
    min-width: 0;
    max-width: 310px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.46rem 0.52rem;
    color: var(--ink);
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.v2-compact-disease-tag > span {
    grid-row: 1 / span 2;
    color: var(--teal);
    font-weight: 900;
    letter-spacing: 0.08rem;
}

.v2-compact-disease-tag.directed > span { color: #cf4c4c; letter-spacing: 0; }
.v2-compact-disease-tag b,
.v2-compact-disease-tag small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.v2-compact-disease-tag b { font-size: 0.79rem; }
.v2-compact-disease-tag small { color: var(--muted); font-size: 0.7rem; }
.v2-compact-disease-tag:hover,
.v2-compact-disease-tag:focus {
    border-color: var(--teal);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 139, 139, 0.1);
}

.v2-chain-inspector {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.1rem 1rem;
    background: linear-gradient(180deg, #f8fcfd, #ffffff);
}

.v2-chain-inspector h4 {
    margin: 0;
    color: var(--ink);
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.v2-inspector-kicker {
    margin: 0 !important;
    color: var(--teal) !important;
    font-size: 0.78rem !important;
    font-weight: 900;
    text-transform: uppercase;
}

.v2-inspector-subtitle,
.v2-chain-inspector-empty p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-size: 0.86rem !important;
}

.v2-chain-inspector-empty {
    display: grid;
    align-content: center;
    min-height: 260px;
    gap: 0.5rem;
}

.v2-chain-inspector-empty strong { color: var(--teal); }

.v2-inspector-metrics {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--line);
}

.v2-inspector-metrics div {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.52rem 0;
    border-bottom: 1px solid var(--line);
}

.v2-inspector-metrics span { color: var(--muted); font-size: 0.78rem; }
.v2-inspector-metrics b { color: var(--ink); font-size: 0.82rem; text-align: right; overflow-wrap: anywhere; }

.v2-inspector-source-scores {
    min-height: 0;
    border-top: 1px solid var(--line);
}

.v2-inspector-source-scores h5 {
    margin: 0.65rem 0 0.35rem;
    color: var(--ink);
    font-size: 0.8rem;
}

.v2-inspector-source-scores table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.75rem;
}

.v2-inspector-source-scores th,
.v2-inspector-source-scores td {
    padding: 0.35rem 0.2rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    overflow-wrap: anywhere;
}

.v2-inspector-source-scores th {
    color: var(--muted);
    font-weight: 800;
}

.v2-inspector-source-scores th:last-child,
.v2-inspector-source-scores td:last-child {
    width: 5.2rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.v2-inspector-boundary {
    margin: 0 !important;
    padding: 0.6rem 0.65rem;
    border-left: 3px solid var(--teal);
    background: rgba(0, 139, 139, 0.055);
    color: var(--muted) !important;
    font-size: 0.78rem !important;
}

/* Pair-level evidence summaries keep aggregate signals separate from source rows. */
.v2-pair-table-wrap {
    overflow-x: auto;
    margin-top: 0.6rem;
}

.v2-table-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin: 0.35rem 0.1rem 0;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 750;
}
.v2-table-pagination span:first-child { margin-right: auto; }
.v2-table-pagination button {
    min-width: 5.5rem;
    border: 1px solid #b9dbe1;
    border-radius: 5px;
    background: #ffffff;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    padding: 0.32rem 0.5rem;
}
.v2-table-pagination button:hover:not(:disabled),
.v2-table-pagination button:focus:not(:disabled) { border-color: var(--teal); color: var(--teal); outline: none; }
.v2-table-pagination button:disabled { cursor: default; opacity: 0.46; }

.v2-pair-table {
    width: 100%;
    min-width: 840px;
    border-collapse: separate;
    border-spacing: 0 0.42rem;
}

.v2-pair-table th {
    padding: 0.36rem 0.62rem;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 800;
    text-align: left;
}

.v2-pair-table th button {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font: inherit;
    letter-spacing: 0;
    padding: 0;
    text-align: left;
    white-space: normal;
}

.v2-sort-marker {
    color: #7d9bb9;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
}

.v2-pair-table th button:hover,
.v2-pair-table th button:focus {
    color: var(--teal);
    outline: none;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.v2-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.24rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: text-top;
    cursor: help;
}

.v2-help-tooltip {
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: calc(100% + 0.45rem);
    width: min(22rem, 72vw);
    padding: 0.52rem 0.62rem;
    border-radius: 6px;
    color: #fff;
    background: #17375e;
    box-shadow: 0 5px 16px rgba(7, 31, 65, 0.22);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.36;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 0.18rem);
    visibility: hidden;
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s ease;
}

.v2-help:hover .v2-help-tooltip,
.v2-help:focus .v2-help-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
    visibility: visible;
}

.v2-help:focus {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.v2-pair-table td {
    padding: 0.62rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 0.88rem;
    text-align: left;
    vertical-align: middle;
}

.v2-pair-table td:first-child {
    border-left: 1px solid var(--line);
    border-radius: 7px 0 0 7px;
    font-weight: 700;
}

.v2-pair-table td i {
    font-style: italic;
}

.v2-pair-table td:last-child {
    border-right: 1px solid var(--line);
    border-radius: 0 7px 7px 0;
}

.v2-pair-table tr:hover td {
    border-color: rgba(0, 139, 139, 0.45);
    background: rgba(0, 139, 139, 0.045);
}

.v2-pair-table tr.v2-clickable-row {
    cursor: pointer;
}

.v2-pair-table tr.v2-clickable-row:focus td {
    border-color: rgba(0, 139, 139, 0.65);
    background: rgba(0, 139, 139, 0.075);
    outline: none;
}

/* Metabolite searches use the v2 evidence chain rather than raw snapshot rows. */
.search-v2-metabolite-view {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.search-v2-tabs {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #f8fbfd;
}

.search-v2-tabs button {
    position: relative;
    min-width: 148px;
    height: 50px;
    border: 0;
    border-right: 1px solid var(--line);
    padding: 0 20px;
    color: #405676;
    background: transparent;
    font-weight: 800;
    cursor: pointer;
}

.search-v2-tabs button:last-child {
    border-right: 0;
}

.search-v2-tabs button.active {
    color: var(--teal);
    background: #ffffff;
}

.search-v2-tabs button.active::after {
    position: absolute;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 3px;
    content: "";
    background: var(--teal);
}

.search-v2-panel {
    display: none;
}

.search-v2-panel.active {
    display: block;
}

.search-v2-panel .entity-card {
    margin: 0;
}

.search-v2-chain-card .section-title-row,
.search-v2-table-card .section-title-row {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.search-v2-chain-card .section-title-row h2,
.search-v2-table-card .section-title-row h2 {
    margin-bottom: 0.2rem;
}

.search-v2-chain-card .section-title-row p,
.search-v2-table-card .section-title-row p {
    margin: 0;
    color: var(--muted);
    line-height: 1.45;
}

.search-v2-status {
    flex: 0 0 auto;
    border: 1px solid rgba(0, 139, 139, 0.24);
    border-radius: 999px;
    padding: 0.34rem 0.65rem;
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 800;
    background: rgba(0, 139, 139, 0.06);
}

.search-v2-error {
    border: 1px solid rgba(186, 92, 43, 0.3);
    border-left: 4px solid #c56d34;
    border-radius: 6px;
    background: #fff9f5;
    padding: 1rem 1.1rem;
    color: #5f3a25;
}

.search-v2-error strong {
    color: #9d4b1b;
}

.search-v2-error p {
    margin: 0.4rem 0 0.65rem;
    line-height: 1.55;
}

.search-v2-error code {
    display: inline-block;
    color: #765544;
    font-size: 0.78rem;
}

.search-v2-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.search-v2-table .v2-pair-table {
    min-width: 690px;
}

.search-v2-table .v2-pair-table td small {
    display: block;
    margin-top: 0.18rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 600;
}

.search-v2-scroll {
    overflow-x: auto;
}

@media (max-width: 980px) {
    .search-v2-tabs button {
        min-width: 132px;
    }

    .search-v2-detail-grid {
        grid-template-columns: 1fr;
    }
}

.v2-pair-table small {
    display: block;
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.74rem;
}

.v2-effect {
    display: inline-block;
    font-weight: 800;
    white-space: nowrap;
}

.v2-effect.consistent_positive { color: #68788a; }
.v2-effect.consistent_negative { color: #68788a; }
.v2-effect.mixed { color: #68788a; }

.v2-raw-effect {
    font-weight: 900;
    white-space: nowrap;
}

.v2-raw-effect.risk { color: #68788a; }
.v2-raw-effect.protective { color: #68788a; }
.v2-raw-effect.neutral { color: var(--ink); }

.v2-pph4-value {
    color: var(--teal);
    font-weight: 850;
    white-space: nowrap;
}

.v2-evidence-badge {
    display: inline-block;
    margin: 0.1rem 0.16rem 0.1rem 0;
    padding: 0.2rem 0.42rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f7fafc;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.v2-evidence-badge.rare { border-color: rgba(207, 76, 76, 0.35); background: rgba(207, 76, 76, 0.08); color: #a13939; }
.v2-evidence-badge.coloc { border-color: rgba(0, 139, 139, 0.35); background: rgba(0, 139, 139, 0.08); color: #087474; }
.v2-evidence-badge.protein { border-color: rgba(31, 111, 209, 0.32); background: rgba(31, 111, 209, 0.07); color: #1f62ad; }
.v2-evidence-badge.unavailable { color: #6e7785; }

.v2-pair-open {
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

#measurement-context-table th,
#measurement-context-table td,
#measurement-context-table td:last-child,
#measurement-context-table th:last-child {
    text-align: left;
    white-space: normal;
}

.v2-pair-page-note {
    margin: 0.45rem 0 0.2rem;
    color: var(--muted);
    font-size: 0.82rem;
}

/* Shared export control for D3 and inline SVG visualizations. */
.svg-export-host {
    position: relative;
}

.svg-export-button {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 12;
    min-width: 3.15rem;
    height: 1.85rem;
    padding: 0 0.62rem;
    border: 1px solid #9fcfd0;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--teal-dark, #087b7b);
    box-shadow: 0 2px 8px rgba(14, 52, 72, 0.08);
    font: 750 0.72rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: 0;
    cursor: pointer;
}

.svg-export-button:hover,
.svg-export-button:focus-visible {
    border-color: var(--teal, #0b8b8b);
    background: #eefafa;
    outline: none;
}

/* Interactive API contract and response explorer on Data Access. */
.api-explorer-section {
    padding: 1rem;
}

.api-explorer-section .catalog-section-heading {
    align-items: center;
}

.api-explorer-section .catalog-section-heading code {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--line, #cfe1ec);
    border-radius: 4px;
    background: #f5f9fb;
    color: var(--teal-dark, #087b7b);
}

.api-explorer-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 0.75rem;
    align-items: end;
    margin-top: 1rem;
}

.api-explorer-form label {
    display: grid;
    gap: 0.34rem;
    min-width: 0;
    color: var(--ink, #0e2946);
    font-size: 0.78rem;
    font-weight: 750;
}

.api-explorer-form select,
.api-explorer-form input {
    width: 100%;
    min-width: 0;
    height: 2.45rem;
    padding: 0 0.68rem;
    border: 1px solid var(--line, #cfe1ec);
    border-radius: 5px;
    background: #fff;
    color: var(--ink, #0e2946);
    font: inherit;
    font-weight: 600;
}

.api-query-wide {
    grid-column: span 2;
}

.api-limit-note {
    margin: 0.55rem 0 0;
    color: var(--muted, #58708a);
    font-size: 0.76rem;
    line-height: 1.5;
}

.api-explorer-actions {
    display: flex;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

.api-explorer-actions button {
    min-height: 2.35rem;
    padding: 0 0.9rem;
    border: 1px solid var(--teal, #0b8b8b);
    border-radius: 5px;
    background: var(--teal, #0b8b8b);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.api-explorer-actions button.secondary {
    background: #fff;
    color: var(--teal-dark, #087b7b);
}

.simplified-download-hero {
    grid-template-columns: 1fr;
}

.api-example-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.85rem;
}

.api-example-grid button {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.72rem 0.8rem;
    border: 1px solid var(--line, #cfe1ec);
    border-radius: 6px;
    background: #fff;
    color: var(--ink, #0e2946);
    text-align: left;
    cursor: pointer;
}

.api-example-grid button:hover,
.api-example-grid button:focus-visible,
.api-example-grid button.active {
    border-color: var(--teal, #0b8b8b);
    background: #eefafa;
    outline: none;
}

.api-example-grid strong {
    color: var(--teal-dark, #087b7b);
    font-size: 0.78rem;
}

.api-example-grid span {
    overflow: hidden;
    color: var(--ink, #0e2946);
    font-size: 0.9rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#api-response-status.status-success { color: #087b62; font-weight: 800; }
#api-response-status.status-loading { color: #8a6500; font-weight: 800; }
#api-response-status.status-error { color: #b33a3a; font-weight: 800; }

.api-request-line {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.85rem;
    padding: 0.65rem 0.75rem;
    border-left: 3px solid var(--teal, #0b8b8b);
    background: #f2f9f9;
    color: var(--muted, #58708a);
}

.api-request-line code {
    overflow-wrap: anywhere;
}

.api-response-panel {
    margin-top: 0.75rem;
    border: 1px solid var(--line, #cfe1ec);
    border-radius: 6px;
    overflow: hidden;
}

.api-response-panel h3 {
    margin: 0;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid var(--line, #cfe1ec);
    background: #f7fafc;
    font-size: 0.88rem;
}

.api-response-panel pre {
    min-height: 8rem;
    max-height: 24rem;
    margin: 0;
    padding: 0.85rem;
    overflow: auto;
    background: #10293f;
    color: #e9f5f5;
    font: 500 0.76rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.api-relationship-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    margin-top: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--line, #cfe1ec);
    border-radius: 6px;
    background: var(--line, #cfe1ec);
}

.api-relationship-summary[hidden] {
    display: none;
}

.api-relationship-summary div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.7rem 0.75rem;
    background: #fff;
}

.api-relationship-summary strong {
    color: var(--teal-dark, #087b7b);
    font-size: 1rem;
}

.api-relationship-summary span {
    color: var(--muted, #58708a);
    font-size: 0.72rem;
    line-height: 1.35;
}

.source-publication-table th:first-child {
    width: 17%;
}

.source-publication-table th:nth-child(3) {
    width: 18%;
}

.source-publication-table th:last-child {
    width: 11%;
}

.source-publication-table tbody th strong,
.source-publication-table tbody th small,
.source-publication-table tbody td small {
    display: block;
}

.source-publication-table tbody th small,
.source-publication-table tbody td small {
    margin-top: 0.25rem;
    color: var(--muted, #58708a);
    font-weight: 500;
    line-height: 1.4;
}

.source-paper-title,
.source-data-link,
.source-download-content a {
    color: var(--teal-dark, #087b7b);
    font-weight: 750;
    text-decoration: none;
}

.source-paper-title:hover,
.source-paper-title:focus-visible,
.source-data-link:hover,
.source-data-link:focus-visible,
.source-download-content a:hover,
.source-download-content a:focus-visible {
    text-decoration: underline;
}

.source-download-section {
    margin-top: 1rem;
    padding: 1rem;
}

.source-download-heading-row p {
    max-width: 70rem;
    margin: 0.35rem 0 0;
    color: var(--muted, #58708a);
    font-size: 0.82rem;
    line-height: 1.55;
}

.source-download-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.source-download-item {
    border: 1px solid var(--line, #cfe1ec);
    border-radius: 6px;
    background: #fff;
}

.source-download-item summary {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.72rem 0.8rem;
    cursor: pointer;
    list-style: none;
}

.source-download-item summary::-webkit-details-marker {
    display: none;
}

.source-download-item summary::before {
    content: "+";
    flex: 0 0 auto;
    color: var(--teal-dark, #087b7b);
    font-weight: 900;
}

.source-download-item[open] summary::before {
    content: "−";
}

.source-download-heading {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    margin-right: auto;
}

.source-download-heading strong {
    color: var(--ink, #0e2946);
    font-size: 0.82rem;
    line-height: 1.35;
}

.source-download-heading small,
.source-download-item summary > b {
    color: var(--muted, #58708a);
    font-size: 0.72rem;
    font-weight: 650;
}

.source-download-content {
    padding: 0 1rem 0.85rem 2.2rem;
    border-top: 1px solid #e9f1f5;
}

.source-download-content p {
    margin: 0.7rem 0 0.35rem;
}

.source-download-content ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 1.2rem;
    margin: 0;
    padding-left: 1rem;
}

.source-download-content li {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.76rem;
    line-height: 1.45;
}

.api-endpoint-table {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.8rem;
}

.api-endpoint-row {
    display: grid;
    grid-template-columns: 3.7rem minmax(180px, 0.9fr) minmax(260px, 1.6fr) 5rem;
    gap: 0.75rem;
    align-items: center;
    margin: 0 0.15rem;
    padding: 0.62rem 0.75rem;
    border: 1px solid var(--line, #cfe1ec);
    border-radius: 5px;
    background: #fff;
    color: var(--ink, #0e2946);
    font-size: 0.77rem;
}

.api-endpoint-row code {
    overflow-wrap: anywhere;
    color: var(--teal-dark, #087b7b);
    font-weight: 700;
}

.api-endpoint-link {
    min-width: 0;
    color: #087f7f;
    text-decoration: none;
}

.api-endpoint-link:hover code,
.api-endpoint-link:focus code {
    text-decoration: underline;
}

.api-endpoint-method {
    color: var(--teal-dark, #087b7b);
    font-weight: 850;
}

.api-endpoint-output {
    text-align: right;
    color: var(--muted, #58708a);
    font-weight: 750;
}

@media (max-width: 900px) {
    .api-explorer-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .api-endpoint-row {
        grid-template-columns: 3.4rem 1fr 4rem;
    }

    .api-endpoint-scope {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .api-example-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .source-download-content ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .api-explorer-form {
        grid-template-columns: 1fr;
    }

    .api-query-wide,
    .api-explorer-actions {
        grid-column: auto;
    }

    .api-explorer-actions,
    .api-request-line {
        align-items: stretch;
        flex-direction: column;
    }

    .api-example-grid {
        grid-template-columns: 1fr;
    }

    .source-download-item summary {
        align-items: flex-start;
    }

    .source-download-item summary > b {
        white-space: nowrap;
    }

    .source-download-content {
        padding-left: 1rem;
    }
}

@media (max-width: 960px) {
    .v2-entity-hero,
    .v2-grid,
    .v2-entity-form,
    .v2-chain-metrics {
        grid-template-columns: 1fr;
    }

    .v2-candidate-row,
    .v2-kv-grid {
        grid-template-columns: 1fr;
    }

    .v2-compact-canvas-grid,
    .v2-disease-effect-grid {
        grid-template-columns: 1fr;
    }

    .v2-compact-canvas-left {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .v2-disease-effect-visual {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .v2-compact-canvas-header,
    .v2-disease-effect-visual header,
    .v2-compact-disease-track-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .v2-compact-canvas-header p,
    .v2-disease-effect-visual header p,
    .v2-compact-disease-track-title small {
        max-width: none;
        margin-left: 0;
        text-align: left;
    }

    .v2-compact-disease-tag {
        flex-basis: 180px;
    }

    .v2-chain-inspector {
        min-height: 190px;
    }
}

/* Single metabolite-disease pairing detail. */
.association-detail-page { padding-bottom: 3rem; }
.association-detail-breadcrumb { margin: 1.25rem 0 .75rem; }
.association-detail-breadcrumb span { color: #6d7f96; margin: 0 .38rem; }
.association-detail-loading { min-height: 6rem; display: grid; align-items: center; color: #52657f; }
#association-detail-loading[hidden],
#association-detail-effect-caption[hidden] { display: none !important; }
.association-detail-hero { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; }
.association-detail-kicker { display: block; color: var(--teal); font-size: .82rem; font-weight: 850; margin-bottom: .35rem; }
.association-detail-hero h1 { margin: 0; font-size: 1.8rem; color: #112d50; }
.association-detail-hero p { margin: .55rem 0 0; color: #52657f; max-width: 60rem; }
.association-detail-actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.association-detail-metrics { display: grid; grid-template-columns: repeat(8, minmax(8.2rem, 1fr)); border: 1px solid #d7e5f1; border-radius: 8px; overflow: hidden; margin: 1rem 0; }
.association-detail-metric { min-height: 5.6rem; padding: .8rem .9rem; border-right: 1px solid #d7e5f1; background: #fff; }
.association-detail-metric:last-child { border-right: 0; }
.association-detail-metric span { display: block; color: #5a6e89; font-size: .78rem; font-weight: 800; line-height: 1.25; }
.association-detail-metric strong { display: block; margin-top: .42rem; color: #17375e; font-size: 1rem; overflow-wrap: anywhere; }
.association-detail-metric-accent strong { color: var(--teal); font-size: 1.18rem; }
.association-detail-boundary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .8rem; border-left: 4px solid var(--teal); background: #f4fbfb; color: #536983; padding: .8rem 1rem; margin: 1rem 0; }
.association-detail-boundary strong { color: #17375e; }
.association-detail-section { margin-top: 1rem; }
.association-detail-section h2 { margin-bottom: .25rem; }
.association-detail-section p { margin: 0; color: #607590; }
.association-detail-table-wrap { overflow-x: auto; border: 1px solid #d7e5f1; border-radius: 8px; margin-top: 1rem; }
.association-detail-table { width: 100%; min-width: 66rem; border-collapse: collapse; }
.association-detail-table th,
.association-detail-table td { padding: .78rem .85rem; text-align: left; border-bottom: 1px solid #e2edf5; vertical-align: top; }
.association-detail-table th { color: #52657f; font-size: .8rem; font-weight: 850; white-space: nowrap; background: #fbfdff; }
.association-detail-table td { color: #183557; font-size: .88rem; }
.association-detail-table tbody tr:last-child td { border-bottom: 0; }
.association-detail-table td:nth-child(5),
.association-detail-table td:nth-child(6),
.association-detail-table td:nth-child(7),
.association-detail-table td:nth-child(8) { white-space: nowrap; }

@media (max-width: 1200px) {
    .association-detail-metrics { grid-template-columns: repeat(4, minmax(9rem, 1fr)); }
    .association-detail-metric:nth-child(4n) { border-right: 0; }
}

@media (max-width: 720px) {
    .association-detail-hero { flex-direction: column; }
    .association-detail-actions { justify-content: flex-start; }
    .association-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .association-detail-metric { border-bottom: 1px solid #d7e5f1; }
    .association-detail-metric:nth-child(2n) { border-right: 0; }
    .association-detail-boundary { grid-template-columns: 1fr; gap: .25rem; }
}

/* Entity-centered colocalization evidence. */
.coloc-detail-main { max-width: 1680px; }
.coloc-entity-page { display: grid; min-width: 0; gap: 1rem; padding-bottom: 2rem; }
.coloc-entity-tab-panel { min-width: 0; max-width: 100%; }
.coloc-entity-header {
    display: grid;
    grid-template-columns: minmax(24rem, 1.05fr) minmax(42rem, 1fr);
    align-items: stretch;
    border: 1px solid #cfe1ee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.coloc-entity-heading { padding: 1.35rem 1.5rem; background: #f4fbfb; }
.coloc-back-button { display: inline-block; margin-bottom: .8rem; color: #42617f; font-size: .82rem; font-weight: 750; }
.coloc-entity-kicker { margin: 0 0 .28rem; color: var(--teal); font-size: .82rem; font-weight: 850; }
.coloc-entity-heading h1 { margin: 0; color: #102e52; font-size: clamp(1.75rem, 3vw, 2.4rem); letter-spacing: 0; overflow-wrap: anywhere; }
.coloc-entity-question { max-width: 54rem; margin: .65rem 0 0; color: #536983; line-height: 1.55; }
.coloc-entity-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.coloc-entity-metrics > div { min-height: 5.7rem; padding: .95rem 1rem; border-left: 1px solid #d8e7f1; border-bottom: 1px solid #d8e7f1; display: grid; align-content: center; }
.coloc-entity-metrics > div:nth-last-child(-n + 3) { border-bottom: 0; }
.coloc-entity-metrics dt { color: #5b708b; font-size: .76rem; font-weight: 800; line-height: 1.25; }
.coloc-entity-metrics dd { margin: .35rem 0 0; color: var(--teal); font-size: 1.45rem; font-weight: 850; line-height: 1.1; overflow-wrap: anywhere; }
.coloc-entity-boundary { display: flex; gap: .8rem; align-items: baseline; padding: .8rem 1rem; border-left: 4px solid var(--teal); background: #f3fbfa; color: #526983; line-height: 1.5; }
.coloc-entity-boundary strong { flex: 0 0 auto; color: #17375e; }
.coloc-entity-tabs { display: flex; flex-wrap: wrap; border: 1px solid #d5e5f0; border-radius: 8px; overflow: hidden; background: #fff; }
.coloc-entity-tabs button { min-height: 3.2rem; padding: 0 1.35rem; border: 0; border-right: 1px solid #d5e5f0; background: #fff; color: #506681; font: inherit; font-weight: 800; cursor: pointer; }
.coloc-entity-tabs button[hidden] { display: none; }
#coloc-source-effect-data th:last-child,
#coloc-source-effect-data td:last-child { white-space: normal; text-align: left; }
.coloc-entity-tabs button.active { color: #fff; background: var(--teal); }
.coloc-entity-tab-panel.is-hidden { display: none; }
.coloc-entity-loading { min-height: 16rem; display: grid; place-items: center; color: #607590; border: 1px solid #d5e5f0; border-radius: 8px; }
.coloc-not-covered { padding: 1.25rem 1.4rem; border: 1px solid #d5e5f0; border-left: 4px solid #8aa0b7; border-radius: 8px; background: #fff; }
.coloc-not-covered strong { color: #17375e; }
.coloc-not-covered p { margin: .4rem 0 0; color: #607590; }
.coloc-metabolite-overview { display: grid; gap: 1rem; }
.coloc-overview-row { display: grid; gap: 1rem; align-items: stretch; }
.coloc-overview-row-primary { grid-template-columns: minmax(0, 2.25fr) minmax(19rem, .75fr); }
.coloc-overview-row-secondary { grid-template-columns: minmax(22rem, .85fr) minmax(0, 1.35fr); }
.coloc-external-overview-grid { display: grid; grid-template-columns: minmax(21rem, .8fr) minmax(0, 1.2fr); gap: 1rem; }
.coloc-visual-section,
.coloc-module-strip { border: 1px solid #d5e5f0; border-radius: 8px; background: #fff; padding: 1.1rem 1.2rem; min-width: 0; }
.coloc-section-heading h2,
.coloc-module-strip h2 { margin: 0; color: #087f7b; font-size: 1.08rem; }
.coloc-section-heading p { margin: .32rem 0 0; color: #607590; font-size: .86rem; line-height: 1.45; }
.coloc-export-heading { min-height: 4rem; padding-right: 4.2rem; }
.coloc-genome-card { position: relative; }
.coloc-landscape-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: .85rem 0 .35rem; color: #536983; font-size: .82rem; font-weight: 750; }
.coloc-landscape-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.coloc-landscape-legend i { display: inline-block; width: .72rem; height: .72rem; background: #087f7b; }
.coloc-landscape-legend i.circle { border-radius: 50%; }
.coloc-landscape-legend i.triangle { background: #7044b8; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.coloc-landscape-legend i.diamond { background: #f28a1a; transform: rotate(45deg); }
.coloc-svg-scroll { overflow-x: auto; }
.coloc-molecular-landscape { display: block; width: 100%; min-width: 760px; height: auto; }
.coloc-molecular-landscape line { stroke: #9db4c8; stroke-width: 1; }
.coloc-molecular-landscape text { fill: #5c718b; font-size: 12px; }
.coloc-molecular-landscape .axis-title { fill: #405a79; font-size: 13px; font-weight: 750; }
.coloc-molecular-landscape .coloc-point-label { fill: #17375e; font-size: 11px; font-style: italic; font-weight: 800; }
.coloc-gene-point { cursor: pointer; outline: none; }
.coloc-gene-point circle,
.coloc-gene-point path,
.coloc-gene-point rect { transition: stroke-width .14s ease, filter .14s ease; }
.coloc-gene-point:hover circle,
.coloc-gene-point:hover path,
.coloc-gene-point:hover rect,
.coloc-gene-point:focus circle,
.coloc-gene-point:focus path,
.coloc-gene-point:focus rect,
.coloc-gene-point.is-active circle,
.coloc-gene-point.is-active path,
.coloc-gene-point.is-active rect { stroke: #102e52; stroke-width: 2.2; filter: drop-shadow(0 1px 2px rgba(16,46,82,.26)); }
.coloc-gene-tooltip { position: absolute; z-index: 5; width: 14rem; padding: .58rem .68rem; border: 1px solid #b8d5df; border-radius: 5px; background: rgba(255,255,255,.98); box-shadow: 0 8px 20px rgba(25,55,85,.16); pointer-events: none; color: #526983; font-size: .76rem; line-height: 1.35; }
.coloc-gene-tooltip strong,
.coloc-gene-tooltip span { display: block; }
.coloc-gene-tooltip strong { margin-bottom: .18rem; color: #102e52; font-size: .9rem; }
.coloc-gene-inspector { min-width: 0; padding: 1.1rem 1.2rem; border: 1px solid #cfe1ee; border-radius: 8px; background: #f6fbfb; }
.coloc-gene-inspector-body { display: grid; gap: .85rem; margin-top: 1rem; }
.coloc-gene-identity { display: grid; gap: .2rem; padding-bottom: .72rem; border-bottom: 1px solid #d9e8ef; }
.coloc-gene-identity i { color: #087f7b; font-size: 1.5rem; font-weight: 850; }
.coloc-gene-identity span { color: #536983; font-size: .86rem; line-height: 1.4; }
.coloc-gene-inspector dl { display: grid; gap: 0; margin: 0; }
.coloc-gene-inspector dl > div { display: grid; grid-template-columns: 7.6rem minmax(0, 1fr); gap: .75rem; padding: .56rem 0; border-bottom: 1px solid #deebf1; }
.coloc-gene-inspector dt { color: #607590; font-size: .76rem; font-weight: 750; }
.coloc-gene-inspector dd { margin: 0; color: #17375e; font-size: .82rem; font-weight: 750; overflow-wrap: anywhere; }
.coloc-gene-annotation-source { margin: 0; color: #6a7e96; font-size: .75rem; }
.coloc-chart-footnote { margin: .45rem 0 0; color: #6a7e96; font-size: .8rem; }
.coloc-donut-layout { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .8rem; align-items: center; margin-top: .8rem; }
.coloc-donut-layout svg { width: 100%; max-width: 11rem; }
.coloc-donut-layout .donut-total { fill: #17375e; font-size: 21px; font-weight: 850; }
.coloc-donut-layout .donut-unit { fill: #607590; font-size: 9px; }
.coloc-donut-layout ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .48rem; }
.coloc-donut-layout li { display: grid; grid-template-columns: .7rem minmax(0, 1fr) auto; gap: .45rem; align-items: center; color: #405a79; font-size: .8rem; }
.coloc-donut-layout li i { width: .62rem; height: .62rem; border-radius: 2px; }
.coloc-donut-layout li span { line-height: 1.25; overflow-wrap: anywhere; }
.coloc-donut-layout li strong { color: #17375e; }
.coloc-enrichment-list { display: grid; gap: .2rem; margin-top: .85rem; }
.coloc-enrichment-list > div { display: grid; grid-template-columns: minmax(9rem, 1.15fr) minmax(5rem, .7fr) minmax(10rem, 1fr); gap: .75rem; align-items: center; padding: .64rem 0; border-bottom: 1px solid #e1ebf3; }
.coloc-enrichment-list > div:last-child { border-bottom: 0; }
.coloc-enrichment-list > div > div { display: grid; gap: .18rem; min-width: 0; }
.coloc-enrichment-list strong { color: #17375e; font-size: .82rem; overflow-wrap: anywhere; }
.coloc-enrichment-list small { color: #687c94; font-size: .72rem; overflow-wrap: anywhere; }
.coloc-enrichment-track { height: .62rem; border-radius: 3px; overflow: hidden; background: #e6eff3; }
.coloc-enrichment-track i { display: block; height: 100%; background: #087f7b; }
.coloc-enrichment-list dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin: 0; }
.coloc-enrichment-list dl > div { display: grid; gap: .08rem; }
.coloc-enrichment-list dt { color: #697d95; font-size: .66rem; font-weight: 750; text-transform: uppercase; }
.coloc-enrichment-list dd { margin: 0; color: #17375e; font-size: .78rem; font-weight: 800; }
.coloc-disease-hr-layout { display: grid; grid-template-columns: minmax(16rem, .72fr) minmax(24rem, 1.28fr); gap: 1rem; align-items: start; margin-top: .8rem; }
.coloc-disease-hr-layout > div { min-width: 0; }
.coloc-disease-hr-layout h3 { margin: 0 0 .4rem; color: #17375e; font-size: .88rem; }
.coloc-disease-hr-layout .coloc-donut-layout { grid-template-columns: 8.2rem minmax(0, 1fr); margin-top: .35rem; }
.coloc-disease-hr-layout .coloc-donut-layout svg { max-width: 8.2rem; }
.coloc-hr-svg-wrap { overflow-x: auto; }
.coloc-hr-boxplot { display: block; width: 100%; min-width: 34rem; height: auto; }
.coloc-hr-boxplot text { fill: #5a708a; font-size: 11px; }
.coloc-hr-boxplot .hr-label { fill: #17375e; font-size: 10px; font-weight: 700; }
.coloc-hr-boxplot .hr-grid { stroke: #e1eaf1; stroke-width: 1; }
.coloc-hr-boxplot .hr-null { stroke: #e05252; stroke-width: 1.4; stroke-dasharray: 4 4; }
.coloc-hr-boxplot .hr-whisker { stroke: #7992aa; stroke-width: 1.4; }
.coloc-hr-boxplot .hr-box { fill: #93d3cf; stroke: #087f7b; stroke-width: 1.2; }
.coloc-hr-boxplot .hr-median { stroke: #102e52; stroke-width: 2; }
.coloc-hr-boxplot circle { fill: #286fca; fill-opacity: .72; stroke: #fff; stroke-width: .6; }
.coloc-hr-boxplot .hr-axis-title { fill: #405a79; font-size: 11px; font-weight: 750; }
.coloc-top-partner-list { margin-top: .7rem; }
.coloc-top-partner-list > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: .62rem 0; border-bottom: 1px solid #e1ebf3; color: inherit; text-decoration: none; }
.coloc-top-partner-list > a:last-child { border-bottom: 0; }
.coloc-top-partner-list > a:hover strong,
.coloc-top-partner-list > a:focus strong { color: var(--teal); text-decoration: underline; text-underline-offset: .18rem; }
.coloc-top-partner-list span { display: grid; gap: .15rem; min-width: 0; }
.coloc-top-partner-list span:last-child { text-align: right; }
.coloc-top-partner-list strong { color: #17375e; overflow-wrap: anywhere; }
.coloc-top-partner-list b { color: var(--teal); white-space: nowrap; }
.coloc-top-partner-list small { color: #637890; overflow-wrap: anywhere; }
.coloc-module-strip { margin-top: 1rem; }
.coloc-composition-bars { display: grid; gap: .62rem; margin-top: .8rem; }
.coloc-composition-bars > div { display: grid; grid-template-columns: minmax(12rem, 22rem) minmax(8rem, 1fr) 3.5rem; gap: .75rem; align-items: center; }
.coloc-composition-bars span { color: #405a79; font-size: .84rem; overflow-wrap: anywhere; }
.coloc-composition-bars i { height: .62rem; border-radius: 3px; background: #e7f0f4; overflow: hidden; }
.coloc-composition-bars i b { display: block; height: 100%; background: var(--teal); }
.coloc-composition-bars strong { color: #17375e; text-align: right; }
.coloc-detail-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .8rem 1rem; border: 1px solid #d5e5f0; border-radius: 8px 8px 0 0; background: #f8fbfd; }
.coloc-detail-filters { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.coloc-detail-filters[hidden] { display: none; }
.coloc-detail-toolbar:has(.coloc-detail-filters[hidden]) { justify-content: flex-end; }
.coloc-detail-filters button { min-height: 2.35rem; padding: 0 .82rem; border: 1px solid #c9ddea; border-radius: 5px; background: #fff; color: #405a79; font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer; }
.coloc-detail-filters button.active { border-color: var(--teal); background: var(--teal); color: #fff; }
.coloc-threshold-control { display: flex; align-items: center; gap: .55rem; color: #526983; font-size: .82rem; font-weight: 750; white-space: nowrap; }
.coloc-threshold-control select { min-width: 5.5rem; min-height: 2.35rem; border: 1px solid #c9ddea; border-radius: 5px; background: #fff; color: #17375e; padding: 0 .6rem; }
.coloc-detail-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; }
.table-export-button { min-height: 2.35rem; border: 1px solid rgba(0, 128, 128, .38); border-radius: 5px; background: #fff; color: var(--teal); padding: 0 .82rem; font: inherit; font-size: .82rem; font-weight: 850; cursor: pointer; white-space: nowrap; }
.table-export-button:hover,
.table-export-button:focus-visible { background: rgba(0, 128, 128, .08); border-color: var(--teal); outline: none; }
.table-export-button:disabled { color: #9fb0c0; border-color: #d5e5f0; background: #f8fbfd; cursor: not-allowed; }
.table-export-inline { margin-left: auto; }
.table-export-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.table-export-heading > h2,
.table-export-heading > h3,
.table-export-heading > h4 { margin: 0; }
.coloc-entity-detail-table { border: 1px solid #d5e5f0; border-top: 0; background: #fff; min-height: 12rem; min-width: 0; overflow-x: auto; }
.coloc-detail-table-scroll { overflow: auto; }
.coloc-detail-table-scroll table { width: 100%; min-width: 82rem; border-collapse: collapse; }
.coloc-detail-table-scroll th,
.coloc-detail-table-scroll td { padding: .72rem .78rem; border-bottom: 1px solid #e0eaf2; text-align: left; vertical-align: top; color: #17375e; font-size: .82rem; line-height: 1.35; }
.coloc-detail-table-scroll th { color: #526983; background: #fbfdff; font-size: .76rem; font-weight: 850; white-space: nowrap; }
.coloc-detail-table-scroll tbody tr:last-child td { border-bottom: 0; }
.coloc-detail-table-scroll td:nth-last-child(-n + 4) { white-space: nowrap; }
.coloc-candidate-genes i,
.gene-symbol { font-style: italic; }
.coloc-clickable-row { cursor: pointer; }
.coloc-clickable-row:hover td,
.coloc-clickable-row:focus td { background: #f3fbfa; }
.coloc-clickable-row a { color: #17375e; text-decoration: none; }
.coloc-clickable-row a:hover,
.coloc-clickable-row a:focus { color: var(--teal); text-decoration: underline; text-underline-offset: .18rem; }
.coloc-entity-pager { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .75rem 1rem; border: 1px solid #d5e5f0; border-top: 0; border-radius: 0 0 8px 8px; color: #536983; font-size: .82rem; }
.coloc-entity-pager > div { display: flex; gap: .65rem; align-items: center; }
.coloc-entity-pager button { min-height: 2.25rem; padding: 0 .8rem; border: 1px solid #c9ddea; border-radius: 5px; background: #fff; color: #17375e; font-weight: 750; }
.coloc-entity-pager button:disabled { color: #99a8b8; background: #f5f7f9; }

.coloc-pair-main { max-width: 1480px; }
.coloc-pair-page { display: grid; gap: 1rem; padding-bottom: 2rem; }
.coloc-pair-header { display: grid; grid-template-columns: minmax(22rem, 1fr) minmax(32rem, .8fr); border: 1px solid #cfe1ee; border-radius: 8px; overflow: hidden; background: #fff; }
.coloc-pair-header > div { display: grid; align-content: center; padding: 1.25rem 1.4rem; background: #f4fbfb; }
.coloc-pair-header h1 { margin: 0; color: #102e52; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: 0; overflow-wrap: anywhere; }
.coloc-pair-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.coloc-pair-metrics > div { display: grid; align-content: center; min-height: 6rem; padding: .9rem; border-left: 1px solid #d8e7f1; text-align: center; }
.coloc-pair-metrics dt { color: #5b708b; font-size: .76rem; font-weight: 800; }
.coloc-pair-metrics dd { margin: .35rem 0 0; color: var(--teal); font-size: 1.35rem; font-weight: 850; }
.coloc-pair-records { border: 1px solid #d5e5f0; border-radius: 8px; overflow: hidden; background: #fff; }
.coloc-pair-records .coloc-entity-loading { border: 0; border-radius: 0; }

@media (max-width: 1180px) {
    .coloc-entity-header { grid-template-columns: 1fr; }
    .coloc-entity-metrics > div:nth-child(3n + 1) { border-left: 0; }
    .coloc-overview-row,
    .coloc-external-overview-grid { grid-template-columns: 1fr; }
    .coloc-disease-hr-layout { grid-template-columns: 1fr; }
    .coloc-pair-header { grid-template-columns: 1fr; }
    .coloc-pair-metrics > div:first-child { border-left: 0; }
}

@media (max-width: 720px) {
    .coloc-entity-heading { padding: 1rem; }
    .coloc-entity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coloc-entity-metrics > div { border-bottom: 1px solid #d8e7f1; }
    .coloc-entity-metrics > div:nth-last-child(-n + 3) { border-bottom: 1px solid #d8e7f1; }
    .coloc-entity-metrics > div:nth-last-child(-n + 2) { border-bottom: 0; }
    .coloc-entity-metrics > div:nth-child(3n + 1) { border-left: 1px solid #d8e7f1; }
    .coloc-entity-metrics > div:nth-child(2n + 1) { border-left: 0; }
    .coloc-entity-boundary,
    .coloc-detail-toolbar { align-items: stretch; flex-direction: column; }
    .coloc-entity-tabs button { flex: 1 1 50%; padding: 0 .65rem; }
    .coloc-donut-layout { grid-template-columns: 1fr; justify-items: center; }
    .coloc-donut-layout ul { width: 100%; }
    .coloc-composition-bars > div { grid-template-columns: minmax(0, 1fr) 3.5rem; }
    .coloc-composition-bars i { grid-column: 1 / -1; grid-row: 2; }
    .coloc-entity-pager { align-items: stretch; flex-direction: column; }
    .coloc-entity-pager > div { justify-content: space-between; }
    .coloc-pair-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coloc-pair-metrics > div:nth-child(odd) { border-left: 0; }
    .coloc-gene-inspector dl > div { grid-template-columns: 1fr; gap: .18rem; }
    .coloc-enrichment-list > div { grid-template-columns: 1fr; }
    .coloc-enrichment-list dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .coloc-disease-hr-layout .coloc-donut-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .literature-spotlight-list {
        grid-template-columns: 1fr;
    }

    .v2-result-insight {
        grid-template-columns: 1fr;
    }

    .v2-metabolite-annotation-evidence,
    .v2-metabolite-annotation-sources {
        border-left: 0;
        border-top: 1px solid #cfe3e4;
        padding: 10px 0 0;
    }

    .v2-metabolite-annotation-sources {
        justify-content: flex-start;
    }

    .v2-metabolite-annotation-sources span {
        text-align: left;
    }

    .v2-result-insight-facts {
        grid-template-columns: 1fr;
        border-left: 0;
        border-top: 1px solid #cfe3e4;
        padding-top: 8px;
    }

    .v2-result-insight-facts p {
        padding: 5px 0;
    }

    .v2-result-insight-facts p + p {
        border-left: 0;
    }
}

@media (max-width: 720px) {
    .search-landing-panel {
        padding: 14px 16px;
    }

    .search-landing-copy h1 {
        font-size: 22px;
    }

    .literature-spotlight-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .literature-spotlight-list a {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}
/* Stable disease-association profile modules and multilayer evidence map. */
.profile-module-card {
    padding: 18px;
}

.profile-module-heading {
    align-items: flex-start;
    gap: 18px;
}

.profile-module-heading h2,
#feature-tab-story-network .feature-card-heading h2 {
    margin: 0 0 4px;
    color: #087d7d;
}

.profile-module-heading span,
#feature-tab-story-network .feature-card-heading span {
    color: #63758d;
}

.profile-view-switch {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(145px, 1fr));
    border: 1px solid #c8dbe9;
    border-radius: 7px;
    overflow: hidden;
    flex: 0 0 auto;
}

.profile-module-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.profile-effect-switch {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(90px, 1fr));
    border: 1px solid #c8dbe9;
    border-radius: 7px;
    overflow: hidden;
}

.profile-effect-switch[hidden] { display: none; }
.profile-effect-switch button {
    min-height: 38px;
    padding: 7px 12px;
    border: 0;
    border-right: 1px solid #c8dbe9;
    background: #fff;
    color: #173556;
    font-weight: 800;
    cursor: pointer;
}
.profile-effect-switch button:last-child { border-right: 0; }
.profile-effect-switch button.active { background: #173f66; color: #fff; }

.profile-view-switch button {
    min-height: 38px;
    padding: 7px 12px;
    border: 0;
    border-right: 1px solid #c8dbe9;
    background: #fff;
    color: #173556;
    font-weight: 800;
    cursor: pointer;
}

.profile-view-switch button:last-child {
    border-right: 0;
}

.profile-view-switch button.active {
    background: #087f80;
    color: #fff;
}

.profile-module-summary,
.story-network-summary {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 14px 0;
    border: 1px solid #d6e4ef;
    border-radius: 7px;
    overflow: hidden;
}

.profile-module-summary > div,
.story-network-summary > div {
    min-height: 72px;
    padding: 12px 14px;
    border-right: 1px solid #d6e4ef;
    background: #fbfdfe;
}

.profile-module-summary > div:last-child,
.story-network-summary > div:last-child {
    border-right: 0;
}

.profile-module-summary strong,
.story-network-summary strong {
    display: block;
    color: #087f80;
    font-size: 24px;
    line-height: 1.05;
}

.profile-module-summary span,
.story-network-summary span {
    display: block;
    margin-top: 6px;
    color: #61728a;
    font-size: 12px;
    font-weight: 800;
}

.profile-module-heatmap-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

.profile-heatmap-scroll {
    overflow-x: auto;
    padding-bottom: 5px;
}

.source-effect-plot { max-width: 900px; max-height: 650px; overflow: auto; margin: 1rem auto; }
.source-effect-plot svg { display: block; width: 100%; height: auto; max-height: 650px; }
#search-source-effects .mini-table { overflow-x: auto; }
.disease-ontology-label { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 4px; }
.profile-effect-scope { grid-column: 1 / -1; font-size: 11px; padding: 4px 8px; color: var(--muted); }

.profile-heatmap-grid {
    display: grid;
    grid-template-columns: 245px repeat(var(--profile-cols), minmax(92px, 1fr));
    gap: 4px;
    min-width: max-content;
}

.profile-heatmap-corner,
.profile-heatmap-column,
.profile-heatmap-row-label {
    min-height: 52px;
    padding: 8px 10px;
    color: #263f60;
    font-weight: 800;
}

.profile-heatmap-column {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-top: 4px solid #7755b7;
    text-align: center;
    font-size: 12px;
}

.profile-heatmap-row-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 4px solid #139b88;
    background: #f7fafc;
}

.profile-heatmap-row-label strong {
    font-size: 13px;
}

.profile-heatmap-row-label span {
    margin-top: 3px;
    color: #718198;
    font-size: 11px;
}

.profile-heatmap-cell {
    position: relative;
    min-width: 92px;
    min-height: 52px;
    border: 1px solid rgba(255,255,255,.9);
    border-radius: 5px;
    color: #102e4e;
    cursor: pointer;
}

.profile-heatmap-cell:not(.empty):hover,
.profile-heatmap-cell:not(.empty):focus {
    outline: 2px solid #0c525c;
    outline-offset: -2px;
}

.profile-heatmap-cell.empty {
    background: #f2f5f8;
}

.profile-heatmap-cell > strong {
    font-size: 13px;
}

.profile-heatmap-cell > span {
    position: absolute;
    top: 3px;
    right: 4px;
    display: flex;
    gap: 2px;
}

.profile-heatmap-cell i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background: rgba(255,255,255,.82);
    color: #263f60;
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}

.profile-heatmap-legend {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 2px 0;
    color: #63758d;
    font-size: 12px;
    font-weight: 700;
}

.profile-heatmap-legend i {
    width: 32px;
    height: 10px;
}

.profile-heatmap-legend .negative { background: #3168ad; }
.profile-heatmap-legend .neutral { background: #d2dce5; }
.profile-heatmap-legend .positive { background: #c93740; }
.profile-heatmap-legend em { margin-left: auto; font-style: normal; }

.profile-module-detail {
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(520px, 2.2fr) minmax(230px, .9fr);
    gap: 0;
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 1px solid #d3e3ed;
    border-radius: 7px;
    background: #fff;
    overflow: hidden;
}

.profile-detail-summary,
.profile-effect-plot,
.profile-point-detail { min-width: 0; padding: 16px; }
.profile-detail-summary,
.profile-effect-plot { border-right: 1px solid #d8e5ee; }
.profile-detail-summary { background: #f8fbfc; }
.profile-effect-plot { background: #fff; }
.profile-point-detail { background: #f7fafc; }

.profile-detail-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #087f80;
    font-size: 18px;
}

.profile-summary-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid #dce7ef;
}
.profile-summary-stat strong { color: #087f80; font-size: 20px; }
.profile-summary-stat span { color: #61728a; font-size: 12px; font-weight: 800; text-align: right; }
.profile-summary-note { margin: 14px 0 0; color: #687a90; font-size: 12px; line-height: 1.5; }

.profile-panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.profile-panel-heading strong { color: #173556; }
.profile-panel-heading span { color: #73849a; font-size: 11px; font-weight: 700; }
.profile-effect-axis { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin-left: 180px; padding: 0 24px 5px; color: #718297; font-size: 10px; font-weight: 800; }
.profile-effect-axis span:last-child { text-align: right; }
.profile-effect-axis strong { color: #425a76; }
.profile-effect-row-scroll { max-height: 560px; overflow-y: auto; scrollbar-gutter: stable; }
.profile-effect-row { display: grid; grid-template-columns: 172px minmax(360px, 1fr); align-items: center; min-height: 48px; border-top: 1px solid #e0e9f0; }
.profile-effect-row-label { min-width: 0; padding-right: 10px; }
.profile-effect-row-label strong,
.profile-effect-row-label span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-effect-row-label strong { color: #263f60; font-size: 12px; }
.profile-effect-row-label span { margin-top: 3px; color: #75859a; font-size: 10px; }
.profile-effect-row svg { width: 100%; height: 38px; overflow: visible; }
.profile-effect-reference { stroke: #7d8c9b; stroke-width: 1; stroke-dasharray: 3 3; }
.profile-effect-whisker { stroke: #91a6ba; stroke-width: 1.4; }
.profile-effect-box { fill: rgba(17, 142, 139, .12); stroke: #118e8b; stroke-width: 1; }
.profile-effect-median { stroke: #087f80; stroke-width: 2; }
[data-profile-effect-point] { cursor: pointer; stroke: #fff; stroke-width: 1; }
[data-profile-effect-point]:hover,
[data-profile-effect-point]:focus,
[data-profile-effect-point].selected { stroke: #102f50; stroke-width: 2.5; outline: none; }

.profile-effect-symbol-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0 0 7px 180px;
    color: #66788f;
    font-size: 10px;
    font-weight: 800;
}
.profile-effect-symbol-legend span { display: inline-flex; align-items: center; gap: 5px; }
.profile-effect-symbol-legend i { display: inline-block; width: 9px; height: 9px; background: #087f80; }
.profile-effect-symbol-legend i.circle { border-radius: 50%; }
.profile-effect-symbol-legend i.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.profile-point-kicker { color: #087f80; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.profile-point-detail h3 { margin: 7px 0 3px; color: #173556; font-size: 17px; overflow-wrap: anywhere; }
.profile-point-trait { margin: 0; color: #62758d; line-height: 1.4; }
.profile-point-effect { margin: 16px 0; color: #7e8b98; font-size: 34px; font-weight: 900; }
.profile-point-effect.decreased { color: #3168ad; }
.profile-point-effect.increased { color: #c93740; }
.profile-point-evidence { display: grid; grid-template-columns: minmax(80px, 1fr) minmax(80px, auto); gap: 0; margin: 0; }
.profile-point-evidence dt,
.profile-point-evidence dd { margin: 0; padding: 8px 0; border-top: 1px solid #dce7ef; }
.profile-point-evidence dt { color: #718198; font-size: 11px; font-weight: 800; }
.profile-point-evidence dd { color: #173556; font-size: 12px; font-weight: 800; text-align: right; }

.profile-detail-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(88px, 1fr));
    grid-column: 1 / -1;
    border: 1px solid #d7e4ee;
    border-radius: 6px;
    overflow: hidden;
}

.profile-detail-metrics > div {
    padding: 9px 10px;
    border-right: 1px solid #d7e4ee;
}

.profile-detail-metrics > div:last-child { border-right: 0; }
.profile-detail-metrics strong { display: block; color: #087f80; font-size: 18px; }
.profile-detail-metrics span { display: block; margin-top: 3px; color: #66788f; font-size: 11px; font-weight: 700; }

.profile-detail-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid #dce7ef;
    color: #64768e;
}

.profile-detail-line strong { color: #173556; }
.profile-evidence-bar {
    height: 7px;
    margin: -2px 0 8px;
    border-radius: 999px;
    background: #e7f0f5;
    overflow: hidden;
}

.profile-evidence-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #087f80;
}

.profile-top-list { margin-bottom: 12px; }
.profile-top-list strong { display: block; color: #173556; font-size: 12px; }
.profile-top-list span {
    display: inline-block;
    margin: 5px 5px 0 0;
    padding: 4px 8px;
    border-radius: 999px;
    background: #edf5f7;
    color: #43617c;
    font-size: 11px;
    font-weight: 800;
}
.profile-top-list em { display: block; margin-top: 4px; color: #7a8da1; font-style: normal; font-size: 12px; }
.profile-top-list p { margin: 4px 0 0; color: #263f60; line-height: 1.45; }

.story-network-card .feature-card-heading { margin-bottom: 8px; }
.story-network-layout { grid-template-columns: minmax(0, 1fr) 320px; }
.story-network-viz svg { width: 100%; min-height: 610px; }
.priority-map-node { cursor: pointer; }
.priority-map-node text { fill: #263f60; font-size: 11px; font-weight: 800; }
.priority-map-node .gene-symbol,
.story-network-detail .gene-symbol { font-style: italic; }
.priority-map-node.selected circle { stroke: #102f50; stroke-width: 4px; }
.priority-node-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.priority-node-metrics > div { padding: 9px 10px; border: 1px solid #d7e4ee; border-radius: 6px; }
.priority-node-metrics span { display: block; color: #67788e; font-size: 11px; font-weight: 800; }
.priority-node-metrics strong { display: block; margin-top: 4px; color: #173556; }
.feature-viz-legend .priority-dashed { width: 22px; height: 0; border-top: 2px dashed #96a4b4; background: transparent; border-radius: 0; }

@media (max-width: 980px) {
    .profile-module-heading { flex-direction: column; }
    .profile-module-controls { width: 100%; justify-content: stretch; }
    .profile-view-switch { width: 100%; grid-template-columns: 1fr; }
    .profile-effect-switch { width: 100%; }
    .profile-view-switch button { border-right: 0; border-bottom: 1px solid #c8dbe9; }
    .profile-module-summary,
    .story-network-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-module-detail { grid-template-columns: 1fr; }
    .profile-detail-summary,
    .profile-effect-plot { border-right: 0; border-bottom: 1px solid #d8e5ee; }
    .profile-effect-row { grid-template-columns: 135px minmax(320px, 1fr); }
    .profile-effect-axis { margin-left: 143px; }
    .story-network-layout { grid-template-columns: 1fr; }
}

/* Colocalization result views share typography, source tables and pagination. */
.coloc-context-stack { display: grid; align-content: start; gap: 1rem; min-width: 0; }
.coloc-effects-card .coloc-explanation { margin: .65rem 0; }
.coloc-explanation { color: #607590; font-size: .86rem; line-height: 1.45; }
.coloc-explanation summary, .coloc-cell-details summary { cursor: pointer; color: var(--teal); }
.coloc-explanation p { margin: .5rem 0; }
.coloc-effect-controls { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
#coloc-source-effect-data .coloc-section-heading { margin-bottom: .8rem; }
.coloc-chart-footnote { color: #607590; font-size: .78rem; line-height: 1.5; }
.coloc-compact-table table { min-width: 48rem; table-layout: auto; }
.coloc-compact-table td:nth-last-child(-n + 4) { white-space: normal; }
.coloc-compact-table th { white-space: nowrap; }
.coloc-compact-table td:first-child { max-width: 24rem; overflow-wrap: anywhere; }
.coloc-type-badge { display: inline-block; white-space: nowrap; padding: .16rem .45rem; border-radius: 4px; background: #e9f6f4; color: #087f7b; font-size: .75rem; font-weight: 750; }
.coloc-type-badge.protein { background: #f1ebfa; color: #7044b8; }
.coloc-type-badge.dual { background: #fff1df; color: #a95c07; }
.coloc-type-badge.clinical { background: #edf2fa; color: #365d87; }
.coloc-source-open, .coloc-source-close { min-height: 2rem; padding: .2rem .65rem; border: 1px solid #c9ddea; border-radius: 5px; background: #fff; color: var(--teal); font: inherit; font-weight: 750; cursor: pointer; }
.coloc-source-open[aria-expanded="true"] { background: #e9f6f4; }
.coloc-canonical-table .coloc-source-open { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; white-space: nowrap; }
.coloc-canonical-table .coloc-sources-button,
.coloc-canonical-table th:nth-last-child(-n + 2) { white-space: nowrap; }
.coloc-source-inspector { margin-top: 1rem; padding: 1rem; border: 1px solid #d5e5f0; border-radius: 8px; background: #fff; }
.coloc-source-heading { display: flex; justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.coloc-source-heading h2 { overflow-wrap: anywhere; }
.coloc-source-heading button { align-self: start; }
.coloc-cell-note { display: block; margin-top: .2rem; color: #607590; font-size: .76rem; }
.coloc-cell-details { margin-top: .2rem; color: #607590; font-size: .76rem; line-height: 1.45; max-width: 25rem; }
#coloc-source-effect-data .coloc-compact-table td:nth-child(3),
#coloc-source-effect-data .coloc-compact-table td:nth-child(4),
#coloc-source-effect-data .coloc-compact-table td:nth-child(5) { white-space: nowrap; }

.coloc-effects-card .source-effect-plot svg { max-height: none; }

.coloc-partner-label { display: block; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coloc-gene-identity > strong { color: #087f7b; font-size: 1.5rem; font-weight: 850; }

.category-genetic-units { margin: 0.25rem 0 0.8rem; font-size: 0.76rem; color: #53677e; }

.category-selected-fields .category-probability-value { grid-column: 1 / -1; overflow-wrap: normal; white-space: nowrap; font-size: 12px; }
.category-selected-fields dt:has(+ .category-probability-value) { grid-column: 1 / -1; margin-bottom: -4px; }
.category-genetic-guide { align-self: start; }
.category-genetic-units { font-size: 12px; line-height: 1.5; margin-top: 12px; }

/* Adjustment provenance, distinct from statistical significance. */
.adjustment-badge{display:inline-block;padding:2px 7px;margin:2px 2px 2px 0;border-radius:9px;font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;background:#edf1f4;color:#526474}
.adjustment-badge.source-reported{background:#e8eef5;color:#435d77}
.adjustment-badge.metabdb-bh,.adjustment-badge.metabdb-derived{background:#e1f0ef;color:#216d6a}
.adjustment-badge.not-adjusted,.adjustment-badge.unavailable{background:#f0f2f4;color:#697581}



/* Category-only variant profile: keep short evidence columns readable. */
.association-profile-variant-table { table-layout: fixed; width: 100%; min-width: 1100px; }
.association-profile-variant-table th, .association-profile-variant-table td { min-width: 0 !important; overflow-wrap: normal; word-break: normal; padding-left: 0.45rem; padding-right: 0.45rem; }
.association-profile-variant-table th { white-space: normal; }
.association-profile-variant-table td:nth-child(1) { overflow-wrap: anywhere; }
.association-profile-variant-table td:nth-child(4), .association-profile-variant-table td:nth-child(5) { white-space: nowrap; }

/* Compact layer labels stay within the genome track's left gutter. */
.v2-compact-evidence-svg .v2-track-title{font-size:11px;font-weight:700}
.v2-compact-evidence-svg .v2-track-subtitle{font-size:7px;font-weight:600}