.screener-page { width: calc(100% - 24px); min-width: 1132px; max-width: 1480px; margin: 0 auto; padding: 28px 0 36px; }
.screener-heading { min-height: 76px; padding: 20px 18px; display: flex; align-items: center; justify-content: center; border: 1px solid #bfbfbf; background: #f2f2f2; }
.screener-heading h1 { margin: 0; font-size: 28px; letter-spacing: -.02em; }
.screener-layout { display: grid; grid-template-columns: minmax(250px, 290px) minmax(0, 1fr); align-items: start; gap: 22px; }
.screener-filters { min-width: 0; }
.screener-results { min-width: 820px; }
.screener-filter-tabs, .screener-view-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; }
.screener-filter-tabs { margin-top: 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid #bfbfbf; }
.screener-filter-tabs button, .screener-view-tabs button { min-height: 39px; padding: 8px 14px; border: 1px solid #cfcfcf; border-bottom: 0; border-radius: 0; color: #1662a5; background: #f7f7f7; font-size: 11px; font-weight: 700; cursor: pointer; }
.screener-filter-tabs button + button, .screener-view-tabs button + button { border-left: 0; }
.screener-filter-tabs button.active { color: var(--ink); background: #fff; box-shadow: inset 0 3px 0 #3c3c3c; }
.screener-filter-tabs button { min-width: 0; padding-inline: 3px; overflow: hidden; font-size: 8px; line-height: 1.1; white-space: normal; }
.screener-view-tabs { margin-bottom: 14px; display: grid; grid-template-columns: repeat(10, minmax(78px, 1fr)); overflow-x: auto; border-left: 1px solid #cfcfcf; }
.screener-view-tabs button { min-width: 0; padding: 5px 3px; overflow: hidden; border-left: 0; border-bottom: 1px solid #cfcfcf; font-size: 8px; line-height: 1.15; white-space: normal; }
.screener-view-tabs button.active { color: #fff; border-color: #2f75b5; background: #2f75b5; }
.screener-roast-score { display: inline-block; min-width: 72px; padding: 7px 10px; color: #fff; background: #2f75b5; font-weight: 800; text-align: center; text-decoration: none; }
.screener-view-tabs .performance-view-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.performance-view-tab span, .performance-view-tab small { display: block; font: inherit; line-height: 1.05; white-space: nowrap; }
.screener-text-filters { margin-top: 18px; border: 1px solid #d3d3d3; border-bottom: 0; }
.screener-security-search { display: grid; gap: 6px; min-height: 58px; padding: 9px; border-bottom: 1px solid #d3d3d3; font-size: 11px; font-weight: 700; }
.screener-security-search input { width: 100%; min-width: 0; height: 38px; border: 1px solid #b8b8b8; border-radius: 0; padding: 0 10px; background: #fff; color: #1f1f1f; }
.screener-categorical-filter { min-height: 58px; padding: 3px; border-bottom: 1px solid #d3d3d3; }
.screener-categorical-filter .custom-select { margin: 6px; }
.screener-categorical-filter .custom-select-trigger { height: 38px; font-size: 11px; }
.screener-metric-filters { margin-top: 18px; border: 1px solid #d3d3d3; border-bottom: 0; }
.screener-filter-row { min-height: 76px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; border-bottom: 1px solid #d3d3d3; }
.screener-filter-label { grid-column: 1 / -1; padding: 7px 9px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid #d3d3d3; font-size: 10px; font-weight: 700; }
.screener-filter-help { width: 14px; height: 14px; display: inline-grid; place-items: center; position: relative; border-radius: 50%; color: #fff; background: #087db7; font-size: 9px; font-style: normal; cursor: help; }
.screener-filter-help::after { width: 210px; padding: 6px; display: none; position: absolute; left: 18px; top: -5px; z-index: 120; border: 1px solid #777; color: #222; background: #fff; content: attr(data-help); font-size: 9px; font-weight: 400; line-height: 1.3; }
.screener-filter-help:hover::after, .screener-filter-help:focus::after { display: block; }
.custom-select { min-width: 0; margin: 6px; position: relative; }
.custom-select-wide { grid-column: 1 / -1; }
.custom-select + .custom-select { margin-left: 0; }
.custom-select-trigger { width: 100%; height: 32px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: stretch; border: 1px solid #bfc5c1; border-radius: 0; color: var(--ink); background: #fff; font-size: 10px; text-align: left; cursor: pointer; }
.custom-select-trigger > span { min-width: 0; padding: 0 8px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.custom-select-trigger > i { display: grid; place-items: center; border-left: 1px solid #c7cbc8; background: #eceeec; font-style: normal; }
.custom-select-trigger > i::after { width: 0; height: 0; border: 4px solid transparent; border-top-color: #333; content: ""; transform: translateY(2px); }
.custom-select.active .custom-select-trigger { background: var(--accent-soft); }
.custom-select-menu { min-width: 100%; max-height: 190px; overflow-y: auto; position: absolute; top: calc(100% - 1px); left: 0; z-index: 110; border: 1px solid #8f9692; background: #fff; }
.custom-select-menu button { width: 100%; min-height: 27px; padding: 5px 8px; display: block; border: 0; border-bottom: 1px solid #e1e1e1; border-radius: 0; color: #222; background: #fff; font-size: 10px; text-align: left; white-space: nowrap; cursor: pointer; }
.custom-select-menu button:last-child { border-bottom: 0; }
.custom-select-menu button:hover, .custom-select-menu button:focus, .custom-select-menu button[aria-selected="true"] { outline: 0; background: #dfe8f0; }
.screener-filter-loading { padding: 16px 9px; color: #666; font-size: 10px; }
.screener-reset { width: 100%; min-height: 34px; border: 1px solid #bfbfbf; border-top: 0; border-radius: 0; color: #1662a5; background: #f2f2f2; font-size: 10px; font-weight: 700; cursor: pointer; }
.screener-table-wrap { overflow: visible; border: 1px solid #b7b7b7; }
.screener-page-scroll { width: 100%; height: 15px; overflow-x: scroll; overflow-y: hidden; border: 1px solid #b7b7b7; border-top: 0; background: #e7e7e7; }
.screener-page-scroll > div { height: 1px; }
.screener-table { width: 100%; min-width: 820px; border-collapse: collapse; table-layout: fixed; background: #fff; }
.screener-table th, .screener-table td { height: 38px; padding: 6px 7px; overflow-wrap: anywhere; border-right: 1px solid #b7b7b7; border-bottom: 1px solid #b7b7b7; font-size: 10px; line-height: 1.25; text-align: right; white-space: normal; word-break: normal; }
.screener-table th { height: 58px; color: #111; background: #e7e7e7; font-size: 10px; font-weight: 700; line-height: 1.15; text-align: center; }
.screener-sort-button { width: 100%; min-height: 44px; padding: 4px 11px 4px 2px; position: relative; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 0; color: inherit; background: transparent; font: inherit; font-weight: inherit; line-height: inherit; white-space: normal; cursor: pointer; }
.screener-sort-button:hover, .screener-sort-button:focus-visible { color: #1765a5; background: #f4f7fa; outline: 1px solid #2f75b5; outline-offset: -1px; }
.screener-sort-button i { position: absolute; right: 2px; color: #6f7f8d; font-size: 8px; font-style: normal; }
.screener-table th:first-child, .screener-table td:first-child, .screener-table .text-cell { text-align: left; }
.screener-table td.text-cell { overflow-wrap: anywhere; white-space: normal; }
.screener-table th:last-child, .screener-table td:last-child { border-right: 0; }
.screener-stock-link { color: #2474b8; font-size: 11px; text-decoration: none; }
.screener-stock-link:hover, .screener-stock-link:focus-visible { text-decoration: underline; }
.screener-table .positive { color: #138a2e; }
.screener-table .negative { color: #d02020; }
.screener-empty { height: 90px !important; color: var(--muted); text-align: center !important; }
.screener-pagination { min-height: 38px; padding: 4px; display: flex; align-items: center; gap: 4px; background: #e7e7e7; }
.screener-page-buttons, .screener-page-jump { display: flex; align-items: center; gap: 3px; }
.screener-pagination button { width: 28px; height: 28px; padding: 0; border: 1px solid #aaa; border-radius: 0; background: #f4f4f4; font-size: 10px; }
.screener-pagination button.active { background: #d8d8d8; }
.screener-pagination button:disabled { color: #aeb5b1; cursor: default; }
.screener-page-buttons .page-number { border-color: transparent; background: transparent; }
.screener-page-buttons .page-number.active { border-color: #8aa9c5; background: var(--accent-soft); }
.screener-page-buttons .ellipsis { background: #edf0ed; }
.screener-page-jump { margin-left: auto; }
.screener-page-jump label { color: var(--muted); font-size: 8px; font-weight: 700; }
.screener-page-jump input { width: 34px; height: 28px; padding: 2px; border: 1px solid #aaa; border-radius: 0; background: #fff; font-size: 10px; text-align: center; }
.screener-page-jump button { color: #fff; border-color: var(--accent); background: var(--accent); font-weight: 700; }
.screener-pagination span { font-size: 10px; }
.screener-hover-chart { width: 250px; padding: 9px; position: fixed; z-index: 30; border: 1px solid #7f7f7f; background: #fff; pointer-events: none; }
.screener-hover-chart[hidden] { display: none; }
.screener-hover-chart strong { display: block; margin-bottom: 5px; font-size: 10px; }
.screener-hover-chart svg { width: 100%; height: 105px; display: block; }
.screener-hover-chart line { stroke: #d7d7d7; stroke-dasharray: 3 3; }
.screener-hover-chart path { fill: none; stroke: #2f75b5; stroke-width: 2; }
.screener-footer { width: calc(100% - 24px); min-width: 1132px; max-width: 1480px; margin: 0 auto; padding-inline: 0; border-top: 1px solid #d0d0d0; }
.etf-screener-tabs { margin-bottom: 14px; padding-left: 0; }
.etf-screener-tabs .stock-tabs-primary { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% / 14); overflow-x: auto; }
.etf-screener-search-label { padding: 8px 10px 3px; display: block; color: #333; font-size: 10px; font-weight: 700; }
.etf-screener-search { width: calc(100% - 20px); height: 36px; margin: 0 10px 8px; padding: 6px 8px; border: 1px solid #bfc5c1; border-radius: 0; color: #222; background: #fff; font-size: 10px; }