:root {
    --eqtl-ink: #17283a;
    --eqtl-muted: #637384;
    --eqtl-paper: #f1f5f8;
    --eqtl-panel: #ffffff;
    --eqtl-line: #d5dfe7;
    --eqtl-navy: #173b5d;
    --eqtl-blue: #286c93;
    --eqtl-local: #16857a;
    --eqtl-local-soft: #d9efeb;
    --eqtl-distant: #a54e78;
    --eqtl-distant-soft: #f2dce7;
    --eqtl-signal: #e8a03b;
    --eqtl-shadow: 0 16px 44px rgba(22, 54, 80, 0.09);
}

.eqtl-page {
    min-height: 75vh;
    color: var(--eqtl-ink);
    background: var(--eqtl-paper);
    font-family: "Segoe UI", Arial, sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
}

.eqtl-page-width {
    width: min(1480px, calc(100% - 48px));
    margin: 0 auto;
}

.eqtl-hero {
    position: relative;
    overflow: hidden;
    color: #f7fbff;
    background:
        radial-gradient(circle at 78% 15%, rgba(77, 135, 167, 0.22), transparent 31%),
        linear-gradient(112deg, #142e47 0%, #173b5d 58%, #204d67 100%);
}

.eqtl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: linear-gradient(90deg, transparent 49.8%, #fff 50%, transparent 50.2%);
    background-size: 67px 100%;
}

.eqtl-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr minmax(430px, 0.7fr);
    gap: 72px;
    align-items: center;
    min-height: 270px;
    padding: 47px 0 52px;
}

.eqtl-kicker,
.eqtl-section-label {
    margin: 0 0 8px;
    color: #86d4ca;
    font-family: "Arial Narrow", "Segoe UI", sans-serif;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.19em;
}

.eqtl-hero h2 {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.1rem, 6vw, 5.6rem);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.055em;
}

.eqtl-deck {
    max-width: 650px;
    margin: 20px 0 0;
    color: #cbd9e4;
    font-size: 1.04rem;
    line-height: 1.65;
}

.eqtl-study-stamp {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 24px 27px 24px 32px;
    border-left: 3px solid var(--eqtl-signal);
    background: rgba(8, 28, 44, 0.33);
    box-shadow: 0 18px 50px rgba(4, 21, 32, 0.18);
}

.eqtl-stamp-label {
    color: #91aabd;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.eqtl-study-stamp strong {
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 400;
}

.eqtl-study-stamp > span:not(.eqtl-stamp-label) { color: #c4d4df; font-size: 0.82rem; }
.eqtl-study-stamp a { margin-top: 5px; color: #f0bd71; font-size: 0.75rem; text-decoration: none; }
.eqtl-study-stamp a:hover { color: #ffd495; text-decoration: underline; }
.eqtl-study-stamp a i { margin-left: 5px; font-size: 0.65rem; }

.eqtl-signal-rule {
    position: absolute;
    right: 4%;
    bottom: 0;
    left: 4%;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    height: 12px;
    align-items: end;
}

.eqtl-signal-rule span { height: 2px; background: rgba(255, 255, 255, 0.18); }
.eqtl-signal-rule span:nth-child(3n) { height: 8px; background: var(--eqtl-signal); }
.eqtl-signal-rule span:nth-child(4n) { height: 5px; background: #52a99e; }

.eqtl-content { padding: 30px 0 64px; }
.eqtl-loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 360px; color: var(--eqtl-muted); }
.eqtl-loading span, .eqtl-table-loading span { width: 20px; height: 20px; border: 2px solid #bdd0db; border-top-color: var(--eqtl-blue); border-radius: 50%; animation: eqtl-spin 0.75s linear infinite; }
@keyframes eqtl-spin { to { transform: rotate(360deg); } }

.eqtl-summary-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin-bottom: 22px;
    border: 1px solid var(--eqtl-line);
    background: var(--eqtl-panel);
    box-shadow: var(--eqtl-shadow);
}

.eqtl-summary-strip > div { position: relative; padding: 17px 22px; border-right: 1px solid var(--eqtl-line); }
.eqtl-summary-strip > div:last-child { border-right: 0; }
.eqtl-summary-strip span { display: block; color: var(--eqtl-muted); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.eqtl-summary-strip strong { display: block; margin-top: 3px; color: var(--eqtl-navy); font-size: 1.45rem; font-weight: 750; line-height: 1.2; }
.eqtl-summary-strip .local-stat::before, .eqtl-summary-strip .distant-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.eqtl-summary-strip .local-stat::before { background: var(--eqtl-local); }
.eqtl-summary-strip .distant-stat::before { background: var(--eqtl-distant); }
.eqtl-summary-strip .local-stat strong { color: var(--eqtl-local); }
.eqtl-summary-strip .distant-stat strong { color: var(--eqtl-distant); }

.eqtl-atlas-grid { display: grid; grid-template-columns: minmax(650px, 1.55fr) minmax(340px, 0.75fr); gap: 22px; align-items: stretch; }
.eqtl-matrix-card, .eqtl-distribution-card, .eqtl-records-card { border: 1px solid var(--eqtl-line); background: var(--eqtl-panel); box-shadow: var(--eqtl-shadow); }
.eqtl-matrix-card { padding: 25px 28px 18px; }
.eqtl-distribution-card { display: flex; flex-direction: column; padding: 25px 26px 20px; }

.eqtl-card-head, .eqtl-records-head { display: flex; justify-content: space-between; gap: 28px; align-items: flex-start; }
.eqtl-section-label { color: var(--eqtl-blue); }
.eqtl-card-head h3, .eqtl-records-head h3 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 400; letter-spacing: -0.018em; }
.eqtl-card-head p:last-child { max-width: 680px; margin: 7px 0 0; color: var(--eqtl-muted); font-size: 0.76rem; line-height: 1.5; }
.eqtl-card-head.compact { display: block; }

.eqtl-legend, .eqtl-bar-legend { display: flex; flex-wrap: wrap; gap: 13px; color: var(--eqtl-muted); font-size: 0.69rem; white-space: nowrap; }
.eqtl-legend span, .eqtl-bar-legend span { display: flex; align-items: center; gap: 5px; }
.local-dot, .distant-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; }
.local-dot { background: var(--eqtl-local); }
.distant-dot { background: var(--eqtl-distant); }

.eqtl-matrix-scroll { position: relative; width: min(100%, 665px); margin: 22px auto 0; padding: 0 0 31px 31px; }
.eqtl-matrix { display: grid; grid-template-columns: 29px repeat(16, minmax(22px, 1fr)); grid-template-rows: 27px repeat(16, 27px); gap: 3px; }
.eqtl-matrix-label { display: grid; place-items: center; color: #71818f; font-family: "Arial Narrow", Arial, sans-serif; font-size: 0.61rem; font-weight: 800; }
.eqtl-matrix-cell { position: relative; min-width: 0; padding: 0; border: 0; border-radius: 2px; background: rgba(165, 78, 120, var(--intensity, 0.08)); cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.eqtl-matrix-cell.diagonal { background: rgba(22, 133, 122, var(--intensity, 0.08)); }
.eqtl-matrix-cell.empty { background: #edf2f5; cursor: default; }
.eqtl-matrix-cell:not(.empty):hover, .eqtl-matrix-cell.selected { z-index: 2; transform: scale(1.18); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--eqtl-signal); }
.eqtl-matrix-cell:focus-visible { z-index: 2; outline: 3px solid var(--eqtl-signal); outline-offset: 1px; }
.eqtl-y-title { position: absolute; top: 50%; left: -61px; color: #73828e; font-size: 0.64rem; font-weight: 700; transform: rotate(-90deg) translateY(-50%); white-space: nowrap; }
.eqtl-x-title { position: absolute; right: 0; bottom: 4px; left: 31px; color: #73828e; font-size: 0.64rem; font-weight: 700; text-align: center; }
.eqtl-matrix-note { padding-top: 11px; color: #71818e; border-top: 1px solid #e1e8ed; font-size: 0.7rem; text-align: center; }

.eqtl-bar-legend { justify-content: flex-end; margin: 13px 0 0; }
.eqtl-chromosome-bars { display: grid; grid-template-columns: repeat(16, minmax(10px, 1fr)); gap: 5px; align-items: end; height: 205px; margin-top: 16px; padding: 0 0 24px; border-bottom: 1px solid #cfdbe2; }
.eqtl-bar-column { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0; border: 0; outline: none; background: transparent; cursor: pointer; }
.eqtl-bar-column:focus-visible { outline: 3px solid var(--eqtl-signal); outline-offset: 3px; }
.eqtl-bar-column:hover .eqtl-bar-stack, .eqtl-bar-column.selected .eqtl-bar-stack { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--eqtl-signal); }
.eqtl-bar-stack { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; min-height: 2px; transition: box-shadow 0.12s; }
.eqtl-bar-local { background: var(--eqtl-local); }
.eqtl-bar-distant { background: var(--eqtl-distant); }
.eqtl-bar-column b { position: absolute; top: calc(100% + 7px); left: 50%; color: #72818c; font-family: "Arial Narrow", Arial, sans-serif; font-size: 0.55rem; transform: translateX(-50%); }

.eqtl-study-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0 0; border-top: 1px solid var(--eqtl-line); border-left: 1px solid var(--eqtl-line); }
.eqtl-study-facts > div { padding: 12px 14px; border-right: 1px solid var(--eqtl-line); border-bottom: 1px solid var(--eqtl-line); }
.eqtl-study-facts dt { color: var(--eqtl-navy); font-size: 1.05rem; font-weight: 750; }
.eqtl-study-facts dd { margin: 2px 0 0; color: var(--eqtl-muted); font-size: 0.63rem; }
.eqtl-chr-zero-note { margin: auto 0 0; padding-top: 15px; color: #75848f; font-size: 0.67rem; line-height: 1.45; }

.eqtl-records-card { margin-top: 22px; overflow: hidden; }
.eqtl-records-head { padding: 25px 28px 20px; border-bottom: 1px solid var(--eqtl-line); }
.eqtl-records-head p:last-child { margin: 6px 0 0; color: var(--eqtl-muted); font-size: 0.76rem; }
.eqtl-download { flex: 0 0 auto; padding: 9px 13px; color: #fff; border-radius: 3px; background: var(--eqtl-navy); font-size: 0.75rem; font-weight: 750; text-decoration: none; }
.eqtl-download:hover { color: #fff; background: var(--eqtl-blue); }
.eqtl-download i { margin-right: 6px; }

.eqtl-filters { display: grid; grid-template-columns: minmax(190px, 1.45fr) repeat(5, minmax(120px, 0.82fr)) auto; gap: 10px; align-items: end; padding: 18px 28px; border-bottom: 1px solid var(--eqtl-line); background: #f8fafb; }
.eqtl-field label { display: block; margin: 0 0 5px; color: #526572; font-size: 0.65rem; font-weight: 750; }
.eqtl-field input, .eqtl-field select { width: 100%; height: 38px; padding: 0 9px; color: var(--eqtl-ink); border: 1px solid #cbd7df; border-radius: 3px; outline: none; background: #fff; font: inherit; font-size: 0.76rem; }
.eqtl-field input:focus, .eqtl-field select:focus { border-color: var(--eqtl-blue); box-shadow: 0 0 0 3px rgba(40, 108, 147, 0.12); }
.eqtl-input-icon { position: relative; }
.eqtl-input-icon i { position: absolute; left: 10px; top: 12px; color: #80909a; font-size: 0.72rem; }
.eqtl-input-icon input { padding-left: 29px; }
.eqtl-reset { height: 38px; padding: 0 12px; color: #526773; border: 1px solid #cbd7df; border-radius: 3px; background: #fff; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.eqtl-reset:hover { color: var(--eqtl-navy); border-color: #96abb7; }
.eqtl-reset i { margin-right: 5px; }
.eqtl-reset:focus-visible, .eqtl-download:focus-visible, .eqtl-page-controls button:focus-visible { outline: 3px solid rgba(232, 160, 59, 0.4); outline-offset: 2px; }

.eqtl-active-filter { padding: 9px 28px; color: #694822; border-bottom: 1px solid #ead7b8; background: #fff7e8; font-size: 0.72rem; }
.eqtl-error { margin: 14px 28px 0; padding: 10px 12px; color: #863d45; border-left: 3px solid #b45761; background: #fff0f1; font-size: 0.76rem; }
.eqtl-table-loading { display: flex; align-items: center; gap: 9px; padding: 14px 28px; color: var(--eqtl-muted); font-size: 0.74rem; }
.eqtl-table-loading span { width: 16px; height: 16px; }

.eqtl-table-wrap { overflow-x: auto; }
.eqtl-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.eqtl-table th { padding: 11px 12px; color: #5c6e79; border-bottom: 1px solid #cbd7df; background: #f2f6f8; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.035em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.eqtl-table th:first-child, .eqtl-table td:first-child { padding-left: 28px; }
.eqtl-table td { padding: 11px 12px; color: #354b58; border-bottom: 1px solid #e3e9ed; vertical-align: middle; white-space: nowrap; }
.eqtl-table tbody tr:hover { background: #f6fafc; }
.eqtl-gene { color: var(--eqtl-navy); font-family: "SFMono-Regular", Consolas, monospace; font-weight: 750; }
.eqtl-locus { color: #435b68; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.7rem; }
.eqtl-class { display: inline-block; min-width: 58px; padding: 4px 7px; border-radius: 2px; font-size: 0.66rem; font-weight: 800; text-align: center; text-transform: capitalize; }
.eqtl-class.local { color: #0b665d; background: var(--eqtl-local-soft); }
.eqtl-class.distant { color: #84395f; background: var(--eqtl-distant-soft); }
.eqtl-lead-snps { display: block; max-width: 220px; overflow: hidden; color: #3e5b69; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.68rem; text-overflow: ellipsis; }
.eqtl-logp { color: var(--eqtl-navy); font-weight: 800; }
.eqtl-pvalue { color: #6e7f89; font-family: "SFMono-Regular", Consolas, monospace; font-size: 0.68rem; }

.eqtl-empty { min-height: 260px; padding: 55px 20px; text-align: center; }
.eqtl-empty i { color: #8ba0ac; font-size: 1.7rem; }
.eqtl-empty h4 { margin: 14px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; font-weight: 400; }
.eqtl-empty p { margin: 7px 0 0; color: var(--eqtl-muted); font-size: 0.78rem; }

.eqtl-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; padding: 14px 28px; color: var(--eqtl-muted); border-top: 1px solid var(--eqtl-line); background: #f8fafb; font-size: 0.7rem; }
.eqtl-page-controls { display: flex; align-items: center; gap: 11px; }
.eqtl-page-controls button { display: grid; place-items: center; width: 30px; height: 30px; color: var(--eqtl-navy); border: 1px solid #c9d5dd; border-radius: 3px; background: #fff; }
.eqtl-page-controls button:disabled { color: #b4c0c7; cursor: not-allowed; background: #f3f6f7; }
.eqtl-pagination > label { justify-self: end; }
.eqtl-pagination select { margin-left: 5px; padding: 4px 7px; color: var(--eqtl-ink); border: 1px solid #c9d5dd; border-radius: 3px; background: #fff; font-size: 0.7rem; }

@media (max-width: 1180px) {
    .eqtl-atlas-grid { grid-template-columns: 1fr; }
    .eqtl-distribution-card { min-height: 430px; }
    .eqtl-chromosome-bars { max-width: 780px; width: 100%; align-self: center; }
    .eqtl-study-facts { grid-template-columns: repeat(4, 1fr); }
    .eqtl-filters { grid-template-columns: repeat(3, 1fr); }
    .eqtl-search-field { grid-column: span 2; }
}

@media (max-width: 820px) {
    .eqtl-page-width { width: min(100% - 26px, 700px); }
    .eqtl-hero-grid { grid-template-columns: 1fr; gap: 30px; padding: 40px 0; }
    .eqtl-study-stamp { max-width: 570px; }
    .eqtl-summary-strip { grid-template-columns: repeat(2, 1fr); }
    .eqtl-summary-strip > div { border-bottom: 1px solid var(--eqtl-line); }
    .eqtl-summary-strip > div:nth-child(2n) { border-right: 0; }
    .eqtl-summary-strip > div:last-child { grid-column: 1 / -1; border-bottom: 0; }
    .eqtl-matrix-card { padding: 22px 16px 16px; }
    .eqtl-card-head { display: block; }
    .eqtl-legend { margin-top: 10px; }
    .eqtl-matrix-scroll { overflow-x: auto; padding-left: 0; }
    .eqtl-matrix { width: 610px; margin-left: 31px; }
    .eqtl-y-title { display: none; }
    .eqtl-x-title { width: 610px; left: 31px; }
    .eqtl-records-head { display: block; }
    .eqtl-download { display: inline-block; margin-top: 14px; }
    .eqtl-filters { grid-template-columns: 1fr 1fr; }
    .eqtl-search-field { grid-column: 1 / -1; }
    .eqtl-pagination { grid-template-columns: 1fr auto; }
    .eqtl-pagination > label { display: none; }
}

@media (max-width: 520px) {
    .eqtl-page-width { width: calc(100% - 18px); }
    .eqtl-hero h2 { font-size: 3rem; }
    .eqtl-study-stamp { padding: 20px 18px 20px 23px; }
    .eqtl-summary-strip > div { padding: 14px 15px; }
    .eqtl-distribution-card { padding: 22px 16px; }
    .eqtl-study-facts { grid-template-columns: 1fr 1fr; }
    .eqtl-records-head { padding: 22px 18px; }
    .eqtl-filters { grid-template-columns: 1fr; padding: 16px 18px; }
    .eqtl-search-field { grid-column: auto; }
    .eqtl-table th:first-child, .eqtl-table td:first-child { padding-left: 18px; }
    .eqtl-pagination { padding: 13px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .eqtl-page *, .eqtl-page *::before, .eqtl-page *::after { transition: none !important; animation-duration: 0.01ms !important; }
}