:root {
    --page-background: #f8f9fa;
    --page-text: black;
    --long: #008600;
    --long-dark: #005700;
    --long-text: #008600;
    --long-light-text: black;
    --short: rgba(255, 5, 5, 0.85);
    --short-dark: #b20505;
    --short-light-text: black;
    --multi-scan: #4d00d1;
    --white: rgba(247, 237, 227, 0.75);
    --sector: hsla(170, 56%, 23%, 1);
    --sector-dark: #0b2823;
    --sector-light-text: black;
    --common: black;
    --common-header: white;
    --action-yellow: hsla(34, 95%, 47%, 1);
    --light-gray: rgba(163, 167, 174, 0.6);
    --flat: rgba(100, 149, 237, .54);
    --background-long: #ffffff;
    --background-short: #080000;
    --background-flat: #030507;
    --background-sector: #020807;
    --action-button: rgb(76, 82, 97);
    --bs-btn-close-color: black;
}

.value-red {
    color: red !important;
}

.value-flat {
    color: transparent;
}

.value-green {
    color: #080 !important;
}

.value-yellow {
    color: darkorange !important;
}

.action-button {
    float: left;
    margin: 1px;
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--action-button);
    border-color: white;
    color: white !important;
    margin-top: 0px;
    height: 21px;
}

.action-button:hover {
     cursor: pointer !important;
     background-color: var(--white);
     color: black !important;
     border-color: black;
 }

 #button-guide {
    margin-left: 0;
 }
 
.action-button-guide-mobile {
    display: block;
    color: white !important;
    background-color: rgba(56, 132, 255, 1) !important;
    z-index: 2030;
}

.action-button-guide-mobile:hover {
    background-color: white !important;
    color: black !important;
    border-color: black !important;
}

.action-button-patreon-mobile {
    display: block;
    color: white !important;
    background-color: #ff424d;
    z-index: 2030;
}

.action-button-discord-mobile {
    display: block;
    color: white;
    background-color: hsla(227, 58%, 65%, 1.0);
    z-index: 2030;
}

.action-button-new:hover {
    background: black !important;
}

.action-button-new:hover {
    background: none !important;
    font-weight: bold;
    color: var(--action-yellow) !important;
    cursor: pointer;
}

.action-button-new:hover {
    background: none !important;
}

#share-code {
    width: 300px;
}

#import {
    left: 726px;
    position: absolute;
    top: 32px;
    width: 100px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 11px;
}

.user-dot {
    margin-left: 3px;
    margin-right: -2px;
    color: lime !important;
}

.supporter-dot {
    margin-left: 3px;
    margin-right: -2px;
    color: #ff424d !important;
}

#user-count {
    left: 325px;
    position: absolute;
    top: 31px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 12px;
    width: 500px;
    text-align: right;
}

#market-events {
    left: 593px;
    position: absolute;
    top: 31px;
    width: 100px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 12px;
}

.news-event-time {
    float: left;
    width: 170px;
}

.news-event-title {
    float: left;
    font-weight: 600;
}

.calendar-day-title {
    float: none;
    font-size: 16px;
    font-weight: 900;
}

.calendar-day {
    float: none;
    margin-bottom: 13px;
}

.news-row {
    float: none;
    padding-bottom: 3px;
}

.news-row-high {
    color: var(--short);
}

.news-row-medium {
    color: var(--action-yellow);
}

.news-row-low {
    color: var(--common);
}

#dark-mode-switch {
    left: 835px;
    position: absolute;
    top: 31px;
    width: 100px;
    z-index: 500;
}

#dark-mode-switch-modal {
    margin-left: 8px;
    margin-top: -11px;
    padding-bottom: 14px;
}

#sun {
    float: left;
    margin-right: 6px;
    margin-top: 3px;
    color: var(--common);
    cursor: pointer;
}

#switch {
    float: left;
    cursor: pointer;
}

.switch-settings {
    margin-top: -9px;
    cursor: pointer !important;
}

.custom-switch .custom-control-input.custom-control-input-lg + .custom-control-label::before {
    cursor: pointer;
}

.custom-switch .custom-control-input.custom-control-input-lg + .custom-control-label::after {
    cursor: pointer;
}

#switch-text-sun {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    z-index: 2030;
    margin-right: 6px;
}

#switch-text-moon {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    z-index: 2030;
    margin-left: -3px;
}

#switch-text-settings {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 15px;
    cursor: pointer;
    margin-left: 63px;
    margin-top: -4px;
}

#switch-text:hover {
    text-decoration: underline;
}

#moon {
    float: left;
    margin-left: 4px;
    margin-right: 6px;
    margin-top: 3px;
    color: var(--common);
    cursor: pointer;
}

.action-button-dark-mode-toggle {
    cursor: pointer;
    margin-right: 30px;
}

.grid-header-region-long {
    background-color: var(--page-background);
}

.grid-header-region-short {
    background-color: var(--page-background);
}

.grid-header-region-flat {
    background-color: var(--page-background);
}

.grid-header-region-sector {
    background-color: var(--page-background);
}

.grid-header-symbol {
    padding-left: 0px !important;
    text-decoration: none !important;
    width: 95px !important;
    padding-left: 42px !important;
    text-decoration: underline !important;
}

.grid-header-symbol {
    padding-left: 0px !important;
    text-decoration: none !important;
    padding-left: 42px !important;
    text-decoration: underline !important;
}

.scan-defs-text {
    color: antiquewhite;
}

.scan-defs-text {
    clear: both;
    font-size: 11px;
    margin-top: -4px;
    margin-bottom: 5px;
    padding: 0px;
    padding-top: 4px;
    padding-left: 7px;
    margin-left: 139px;
    width: 677px;
    height: 23px;
    text-overflow: clip;
    overflow: hidden;
    text-shadow: 1px 1px 2px black;
}

.scan-defs-text-long {
    color: var(--common-header);
    font-weight: 700 !important;
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, hsl(241deg 78% 10%) 97%);
}

.scan-defs-text-long {
    margin-top: -4px;
    width: 719px;
    height: 24px;
    margin-left: 136px;
    background: rgb(0,87,0);
    background: linear-gradient(90deg, rgba(0,87,0,1) 0%, rgba(0,87,0,0) 97%);
}

.scan-defs-text-long {
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, hsl(241deg 78% 10%) 97%);
}

.scan-defs-text-long {
    background: rgb(0,87,0);
    background: linear-gradient(90deg, rgba(0,87,0,1) 0%, rgba(0,87,0,0) 97%);
}

.scan-defs-text-short {
    background-color: var(--short-dark);
    color: var(--common-header);
    font-weight: 700 !important;
}

.scan-defs-text-short {
    background: rgb(178,5,5);
    background: linear-gradient(90deg, rgba(178,5,5,1) 0%, rgba(0,0,0,0) 100%);
    margin-top: -4px;
    width: 719px;
    height: 24px;
    margin-left: 136px;
}

.scan-defs-text-short {
    background: rgb(178,5,5);
    background: linear-gradient(90deg, rgba(178,5,5,1) 0%, rgba(0,0,0,0) 100%);
}

.scan-defs-text-flat {
    background-color: rgba(100, 148, 237, 0.33);
    color: antiquewhite !important;
    font-weight: 700 !important;
}

.scan-defs-text-flat {
    border: solid 1px var(--flat);
    border-left: solid 1px var(--flat);
    border-bottom: solid 1px var(--flat);
    border-right: solid 1px var(--flat);
    margin-top: -5px;
    width: 719px;
    height: 24px;
    margin-left: 136px;
}

.scan-defs-text-sector {
    background-color: var(--sector);
    color: antiquewhite !important;
    font-weight: 700 !important;
}

.scan-defs-text-sector {
    border: solid 1px var(--sector);
    border-left: solid 1px var(--sector);
    border-bottom: solid 1px var(--sector);
    border-right: solid 1px var(--sector);
    margin-top: -5px;
    width: 677px;
    height: 24px;
    margin-left: 136px;
}

.scan-defs-text-custom {
    background-color: var(--custom);
    font-weight: 700 !important;
}

.scan-defs-text-custom {
    color: white !important;
    border: solid 1px var(--custom);
    border-left: solid 1px var(--custom);
    border-bottom: solid 1px var(--custom);
    border-right: solid 1px var(--custom);
    margin-top: -5px;
    width: 677px;
    height: 24px;
}

.scan-title {
    float: left;
    padding-top: 2px;
    max-width: 98px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

.watchlist-label {
    text-overflow: clip;
    overflow: hidden;
}

.watchlist-label {
    border: none;
    border-bottom: 1px solid;
    border-color: transparent;
    width: 135px;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
    padding-left: 7px;
    border-right: 1px solid;
}

.featured-scan {
    margin-left: 0px;
    padding-left: 0px;
    margin-right: 2px;
    font-size: 9px;
}

.popular-flame {
    float: right;
    margin-right: 2px;
}

.featured-scan-wrapper {
    float: right;
    margin-right: 0px;
}

#tab-short {
    #background-color: var(--short);
}

#tab-short {
    color: black;
    width: 128PX;
    #background-color: hsla(0, 100%, 52%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    margin-left: 0px;
    margin-top: 0px;
}

#tab-short {
    #background-color: hsla(0, 100%, 52%, .7);
}

.screener-grid-symbol-news {
    width: 23px;
    text-overflow: clip;
    display: flex;
    margin-left: 0px;
    color: var(--page-background) !important;
    visibility: hidden;
}

.screener-grid-symbol-news-highlight {
    color: orange;
    visibility: visible;
}

.screener-grid-symbol-news-highlight-long {
    color: gray;
    visibility: visible;
}

.screener-grid-symbol-news-highlight-short {
    color: gray;
    visibility: visible;
}

.screener-grid-symbol {
    width: 69px;
    text-overflow: clip;
    display: flex;
}

.symbol-link {
    font-weight: 600;
}

.symbol-link-short {
    color: var(--short);
    font-weight: bold;
}

.symbol-link-sector {
    color: var(--sector);
    font-weight: bold;
}

.symbol-link-long {
    color: var(--long-text);
    font-weight: bold;
}

#ticker-search {
    width: 103px;
    height: 22px;
    float: left;
    font-size: 11px;
    margin-right: 8px;
    margin-left: 4px;
    margin-top: 4px;
    border-radius: 2px;
    background-color: white !important;
    #color: var( --common) !important;
    border-color: #707470;
    border: 1px solid;
    padding-left: 5px;
    font-weight: 1000;
    /* text-transform: uppercase; */
    margin-left: 5px;
}

.mini-grid-search {
    width: 135px;
    float: left;
    margin-left: 0px;
    margin-top: -4px;
}

#search-results-clear-mini {
    color: var(--common);
    padding-left: 5px;
    cursor: pointer;
    margin-left: -32px;
    margin-top: 8px;
}

.watchlist-heading-group {
    background-color: red;
    padding: 20px;
}

.watchlist-label-search-Sector {
    background-color: rgba(26,91,81,1);
    height: 34px;
    width: 135px;
    /* margin-left: 2px; */
    border-color: rgba(183, 189, 183, 0.5);
    border: none !important;
    margin-bottom: -5px;
    margin-top: 2px;
}

.watchlist-label-search-Up {
    background-color: rgb(0,134,0);
    height: 34px;
    width: 135px;
    /* margin-left: 2px; */
    border-color: rgba(183, 189, 183, 0.5);
    border: none !important;
    margin-bottom: -6px;
    margin-top: 2px;
}

.watchlist-label-search-Down {
    background-color: rgb(217,4,4);
    height: 34px;
    width: 135px;
    /* margin-left: 2px; */
    border: none !important;
    margin-bottom: -6px;
    margin-top: 2px;
}

/* 2026-07-22: make the search box the containing block for the absolute clear-X
   so the X scrolls with the menu instead of staying pinned to the viewport. */
.watchlist-label-search-Up,
.watchlist-label-search-Down,
.watchlist-label-search-Sector,
.watchlist-label-search-Flat,
.watchlist-label-search-sector {
    position: relative;
}

.watchlist-label-disabled-long {
    background-color: hsla(120, 100%, 26%, 0.25) !important;
    color: gray;
    border-color: dimgray;
}

.watchlist-label-disabled-short {
    color: dimgray !important;
    border-color: dimgray !important;
    background-color: rgba(255, 5, 5, 0.10);
}

.watchlist-label-disabled-sector {
    color: dimgray !important;
    border-color: dimgray;
    background-color: hsla(170, 56%, 23%, .10);
}

.watchlist-label-search-sector {
    background-color: hsla(170, 56%, 23%, .10);
    height: 34px;
    width: 135px;
    margin-left: 2px;
    border: 1px solid;
    margin-bottom: 0px;
    margin-top: 2px;
}

.watchlist-label-disabled:hover {
    cursor: auto !important;
}

.grid-row:hover {
    outline: 2px solid gray;
}

.grid-row-selected-long {
    outline: 2px solid var(--long);
}

.grid-row-selected-sector {
    outline: 1px solid var(--sector);
}

.grid-row-selected-short {
    outline: 1px solid var(--short);
}

.filter-region {
    border: 1px solid #444;
    border-radius: 6px;
    color: antiquewhite !important;
    margin-bottom: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.08);
}

.modal-body {
    background-color: #ffffff !important;
    overflow-y: scroll;
    max-height: 84vh !important;
    color: var(--common);
}

.text-white {
    color: var(--common) !important;
}

.modal-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 16px 20px !important;
}

.modal-footer {
    background-color: #ffffff !important;
    justify-content: flex-start !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 16px 20px !important;
    gap: 10px !important;
}

#filter-intro {
    color: var(--common) !important;
}

#filter-intro {
    cursor: pointer;
    margin-bottom: 10px;
}

.modal-title {
    color: var(--common) !important;
    font-weight: 600 !important;
    font-size: 1.35rem !important;
}

.modal-header .close,
.modal-header .btn-close,
.modal-header button[aria-label="Close"] {
    color: #666 !important;
    opacity: 0.8 !important;
    font-size: 1.2rem !important;
}

.modal-header .close:hover,
.modal-header .btn-close:hover,
.modal-header button[aria-label="Close"]:hover {
    color: #000 !important;
    opacity: 1 !important;
}

.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

#filtered-out-criteria {
    color: var(--common);
}

#filtered-out-criteria {
    clear: both;
    font-family: monospace;
    font-size: 11px;
    padding-top: 0px;
    padding-bottom: 2px;
    margin-bottom: 0;
    line-height: 1.5;
    padding-right: 30px;  /* reserves the right edge for the expand chevron */
    overflow: hidden;
    /* Flush-left like multi-scan: removed the legacy 41px indent. */
    margin-left: 11px; /* room for the rail-toggle chevron */
    /* Anchor for .funnel-controls: the chevron pins to THIS capped strip's right
       edge, so it can never land on the chips or under docked charts. */
    position: relative;
}

#filtered-out-criteria.filter-summary-expanded {
    overflow: visible;
    max-height: none;
}

#filtered-out-criteria.filter-summary-collapsed .filter-summary-content {
    /* Fade mask removed; the clamp stays -- a hard cut instead of a fade. */
    max-height: 48px; /* two full chip rows -- no chips sliced mid-row */
    overflow: hidden;
}

#filtered-out-criteria.filter-summary-expanded .filter-summary-content {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

/* When a parent passes OnEditFilter to <ShowFilters>, the whole filter
   summary becomes a clickable target that opens the filter modal. */
#filtered-out-criteria.filter-summary-clickable {
    cursor: pointer;
}
#filtered-out-criteria.filter-summary-clickable:hover .filter-display-heading {
    text-decoration: underline;
}

.filter-summary-toggle {
    position: absolute;
    right: 4px;
    top: 2px;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    padding: 4px 8px;
    z-index: 1;
    line-height: 1;
    background: rgba(80,80,80,0.85);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.3);
}

.filter-summary-toggle:hover {
    background: rgba(60,60,60,0.95);
    border-color: rgba(255,255,255,0.6);
}

#filtered-out-show-without {
    color: var(--action-yellow);
}

#filtered-out-show-without {
    float: left;
    cursor: pointer;
    margin-left: 3px;
    font-style: italic;
}

.filtered-out {
    color: var(--action-yellow);
    font-weight: 700;
}

::-webkit-scrollbar-track-piece {
    background-color: #ccc8bb;
}

::-webkit-scrollbar-thumb {
    height: 30px;
    background-color: #aaa59c;
}

::-webkit-scrollbar-corner {
    background: #aaa59c;
    scrollbar-color: auto transparent;
}

.grid-row-stripe-sector:nth-child(odd) {
    background: linear-gradient(90deg, rgba(131, 197, 190, 0.11) 0%, rgba(131, 197, 190, 0.11) 60%, transparent 100%);
}

.grid-row-stripe-long:nth-child(odd) {
    background: linear-gradient(90deg, rgba(0, 46, 4, 0.05) 0%, rgba(0, 46, 4, 0.05) 80%, transparent 100%);
}

.grid-row-stripe-short:nth-child(odd) {
    background: linear-gradient(90deg, rgba(133, 0, 0, 0.05) 0%, rgba(133, 0, 0, 0.05) 80%, transparent 100%);
}

.grid-row-stripe-flat:nth-child(odd) {
    background: linear-gradient(90deg, rgba(6, 23, 55, 0.22) 0%, rgba(6, 23, 55, 0.22) 80%, transparent 100%);
}

.tippy-content {
    background-color: var(--page-background) !important;
    color: var(--common);
    box-shadow: rgba(0,0,0,0.25) 0px 10px 40px;
    width: 350px;
    border: 1px solid;
    border-color: white;
    z-index: 99999;
}

.not-starred-long:hover {
    color: black;
    cursor: pointer;
}

.not-starred-short {
    color: gray;
    cursor: pointer;
}

.not-starred-short:hover {
    color: black;
    cursor: pointer;
}

.not-starred-sector {
    color: gray;
    cursor: pointer;
}

.not-starred-sector:hover {
    color: black;
    cursor: pointer;
}

.is-starred-yellow {
    color: var(--action-yellow);
}

.is-starred-green {
    color: hsla(120, 100%, 30%, 1);
}

.is-starred-red {
    color: red;
}

.form-group {
    color: var(--common);
}

.blazored-toast-success {
    background-color: green;
}

.blazored-toast-warning {
    background-color: rgba(255, 5, 5, 0.67);
}

.blazored-toast-error {
    background-color: rgba(255, 5, 5, 0.67);
}

#search-results {
    background-color: var(--page-background) !important;
    color: var(--common);
    border-color: hsl(34, 78%, 91%, 45%) !important;
    border: 1px solid;
    box-shadow: rgba(0,0,0,0.25) 0px 10px 40px;
    z-index: 100 !important;
    min-width: 400px !important;
    margin-top: -4px;
    max-width: 649px;
    min-height: 317px;
    position: fixed;
    z-index: 5000 !important;
    padding: 9px;
}

#search-results {
    z-index: 100 !important;
}

#search-results {
    min-width: 500px;
    z-index: 5000 !important;
}

.search-result-group-label:hover {
    font-weight: bold;
}

.search-result-group-label:hover {
    cursor: pointer;
}

#windows-link {
    color: var(--common);
}

.chart-selection-built-in {
    color: rgba(100, 149, 237, 1);
    border-color: rgba(100, 149, 237, 1);
}

.chart-selection-built-in:hover {
    color: white;
    background-color: rgba(100, 149, 237, 1);
    border-color: rgba(100, 149, 237, 1);
}

.chart-selection-built-in-selected {
    color: white;
    background-color: rgba(100, 149, 237, 1);
    border-color: rgba(100, 149, 237, 1);
}

.chart-selection-red {
    color: var(--short);
    border-color: var(--short);
}

.chart-selection-red:hover {
    color: white;
    background-color: var(--short);
    border-color: var(--short);
}

.chart-selection-red-selected {
    color: white;
    background-color: var(--short);
    border-color: var(--short);
}

.custom-select {
    font-size: 14px !important;
    margin-top: 2px;
    float: left;
    width: 204px !important;
}

.loading-spin-overlay {
    background-color: var(--page-background);
}

.loading-spin-overlay {
    position: fixed;
    z-index: 5000 !important;
    height: 100%;
    width: 100%;
}

.spinner-center {
    background-color: var(--page-background);
}

.spinner-center {
    position: fixed;
    visibility: visible;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    text-align: center;
    min-width: 300px;
}

.loading-spinner {
    color: var(--long-text);
    font-weight: bold;
    width: 10px;
    height: 10px;
}

.action-button-new {
    color: var(--action-yellow) !important;
    background-color: var(--page-background);
}

.action-button-new {
    color: var(--action-yellow) !important;
    position: relative;
}

.whats-new-button {
}

.whats-new-alert {
    color: #ff9800;
    margin-left: 4px;
}

/* What's New modal body — scroll long release notes, inherit theme colors. */
.whats-new-modal-body {
    max-height: 70vh;
    overflow-y: auto;
    line-height: 1.5;
    /* !important beats the centered-modal .modal-body { font-size:15px !important } rule */
    font-size: 14px !important;
}
.whats-new-modal-body h1,
.whats-new-modal-body h2,
.whats-new-modal-body h3,
.whats-new-modal-body h4 {
    margin-top: 0;
    font-size: 15px;
}
.whats-new-modal-body ul {
    padding-left: 20px;
}
.whats-new-modal-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.action-button-donate {
    color: white !important;
    border-color: #ff424d !important;
    background-color: #ff424d !important;
}

.action-button-donate {
    float: none;
    width: 132px;
    margin-top: -5px;
    height: 28px;
    font-size: 12px;
    padding-top: 0px;
    margin-top: -181px;
    font-weight: normal !important;
    border: 0px;
    height: 0px;
    /* 2026-07-22: absolute so this 0-height, -181px-margin hack element is OUT of the
       #menu-region scroll flow — in-flow it created phantom empty scroll space at the
       top of the now-overflow menu ("blocked out" area). Position/visual unchanged. */
    position: absolute;
}

.action-button-donate {
    margin-top: -5px;
    height: 28px;
    margin-top: -181px;
    height: 0px;
}

.action-button-contact {
    color: white;
    border-color: hsla(227, 58%, 65%, 0.78);
    background-color: hsla(227, 58%, 65%, 1.0);
}

.action-button-contact {
    float: none;
    width: 132px;
    margin-top: 0px !important;
    text-align: center;
    height: 28px;
    font-size: 9px !important;
    padding-top: 0px;
    font-weight: bold;
    padding-bottom: 10px;
    margin-top: 0px;
}

.action-button-contact {
    margin-top: 0px !important;
    margin-top: 0px;
}

.action-button-contact:hover {
    background-color: hsla(227, 58%, 65%, .8);
    border-color: hsla(227, 58%, 89%, 0.8);
    color: white !important;
}

.watchlist-label-long {
    color: var(--long-light-text);
    border-color: rgba(183, 189, 183, 0.5);
!important;
}

.watchlist-label-custom-long {
    color: var(--long-light-text);
    border-color: rgba(183, 189, 183, 0.5);
!important;
    padding: 2px;
    padding-left: 6px;
}

.watchlist-label-short {
    color: var(--short-light-text);
    border-color: rgba(183, 189, 183, 0.5);
!important;
}

.watchlist-label-custom-short {
    color: var(--short-light-text);
    border-color: rgba(183, 189, 183, 0.5);
!important;
    padding: 2px;
    padding-left: 6px;
}

.watchlist-label-sector-selected {
    background: hsla(170, 56%, 33%, .12);
    color: hsl(170, 56%, 33%) !important;
    border-left: 3px solid hsl(170, 56%, 33%);
    padding-left: 6px;
    font-weight: 600;
    border-color: var(--sector) !important;
    border: 1px solid;
    font-weight: 900;
}

.watchlist-label-sector {
    color: var(--common);
    border-color: rgba(183, 189, 183, 0.5);
!important;
}

.watchlist-label-selected-long {
    background: var(--zb-green-tint);
    color: var(--zb-green) !important;
    border-left: 3px solid var(--zb-green);
    padding-left: 6px;
    font-weight: 600;
}

.watchlist-label-selected-short {
    background: var(--zb-red-tint);
    color: var(--zb-red) !important;
    border-left: 3px solid var(--zb-red);
    padding-left: 6px;
    font-weight: 600;
}

.watchlist-label-selected-custom-long {
    background: var(--zb-green-tint);
    color: var(--zb-green) !important;
    border-left: 3px solid var(--zb-green);
    padding-left: 6px;
    font-weight: 600;
}

.watchlist-label-selected-custom-short {
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
    color: white !important;
    padding-left: 6px;
    border: 1px solid;
    padding-left: 5px;
}

.watchlist-label-selected-custom {
    background-color: var(--sector);
    color: white !important;
    padding-left: 6px;
    border: 1px solid var(--sector);
    padding-left: 5px;
}

.main-bg-long {
    background-color: var(--page-background);
}

.main-bg-short {
    background-color: var(--page-background);
}

.main-bg-flat {
    background-color: var(--page-background);
}

.main-bg-sector {
    background-color: var(--page-background);
}

.pop-time {
    color: var(--action-yellow);
}

.pop-time {
    font-size: 10px;
    padding-top: 3px;
    margin-right: 4px;
    max-width: 20px;
    overflow: hidden;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    background-color: var(--page-background) !important;
    color: var(--page-text);
    min-width: 262px;
    overflow-x: hidden;
    overflow-y: hidden;
    margin-top: -10px;
}

/* Phone viewport: drop the 600px desktop floor so the document tracks
   the actual viewport width. Note: this doesn't fix horizontal scroll
   on phones by itself — the page's actual scroll viewport is .main-bg
   (a position: fixed wrapper), not body, so the overflow-x rule lives
   there. This rule is just about not forcing the document wider than
   the screen. */
@media (max-width: 599px) {
    html, body {
        min-width: 262px; /* absolute floor; below this the page scrolls */
    }
}

#grid-header-label-rsrw {
    margin-left: 408px;
    margin-top: -10px;
    text-decoration: none !important;
    margin-bottom: -3px !important;
}

#grid-header-label-filler {
    width: 63px;
    height: 5px;
}

#grid-header-label-volume {
    margin-left: 310px;
    margin-top: -6px;
    text-decoration: none !important;
    margin-bottom: -6px !important;
}

.grid-header {
    float: left;
    font-size: 11px;
    color: var(--common) !important;
    font-weight: bold !important;
    cursor: pointer;
    max-height: 20px;
    margin-bottom: 1px;
    text-overflow: clip;
    overflow: hidden;
    /* Keep the header text and its sort icon on one line — if too wide the
       right edge (icon) clips instead of the icon wrapping to a second row. */
    white-space: nowrap;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

#sector-link {
    color: var(--common);
}

#sector-link {
    position: absolute;
    left: 200px;
    cursor: pointer;
}

.icon-custom-long {
    color: var(--common);
    position: absolute;
    left: 98px;
}

.custom-scan-icon-top {
    left: 145px !important;
}

.icon-custom-short {
    color: var(--common);
}

.icon-long {
    color: var(--long);
}

#support-split {
    background-color: var(--page-background);
}

#support-split {
    width: 2px;
    height: 25px;
    position: fixed;
    left: 134px;
    top: -2px;
}

.tab-sector {
    color: white;
    border-color: var(--long-text) !important;
    color: var(--white);
    border-color: var(--white);
    background-color: rgba(74, 252, 234, 1);
    font-weight: 700;
}

.tab-sector {
    color: white;
    border-color: var(--long-text) !important;
    width: 47px;
    height: 26px;
    border: 0px solid;
    float: left;
    margin: 0px;
    margin-right: 0px;
    font-size: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--white);
    border-color: var(--white);
    text-align: center;
    cursor: pointer;
    overflow: clip;
    display: flex;
    align-items: center;
}

.tab-sector {
    color: white;
    border-color: var(--long-text) !important;
    color: var(--white);
    border-color: var(--white);
}

.tab-sector-short {
    background-color: rgba(255, 5, 5, 0.8) !important;
    border-color: var(--short) !important;
    color: white !important;
    cursor: pointer;
}

.tab-sector-short:hover {
    border-color: antiquewhite !important;
}

.tab-sector-long {
    background-color: rgba(0, 255, 0, .8) !important;
    border-color: var(--long) !important;
    color: white !important;
    cursor: pointer;
}

.tab-sector-long:hover {
    border-color: antiquewhite !important;
}

.tab-sector-flat {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.20) !important;
    color: white !important;
    cursor: pointer;
}

#tab-flat {
    color: white;
    width: 128px;
    border-color: var(--flat) !important;
    background-color: rgba(100, 149, 237, .99);
}

.grid-news {
    color: var(--common);
}

@media only screen and (min-width: 1000px) {
    #filter-region-left-col {
        float: left;
        width: 382px;
    }

    #filter-region-right-col {
        float: right;
        width: 372px;
    }
}

@media only screen and (max-width: 9999px) {
    /* Stack columns vertically and make all filter regions full width */
    #filter-region-left-col,
    #filter-region-right-col {
        float: none !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
        display: block !important;
        clear: both !important;
    }

    .chart-toggle-overlay {
    }

    .filter-region,
    #filter-fund,
    #filter-price,
    #filter-volume,
    #filter-pattern,
    #filter-intraday,
    #filter-daily,
    #filter-sector,
    #filter-trend {
        width: 100% !important;
        max-width: none !important;
        min-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    #filter-daily,
    #filter-sector,
    #filter-trend {
        margin-top: 10px;
    }

    #filter-trend {
        height: 118px;
    }

    #header-right-section {
        position: absolute !important;
        top: 49px !important;
        width: 520px !important;
        left: 144px;
        justify-content: flex-start !important;
    }

    #updated {
        margin-top: 9px;
        position: absolute;
        left: 127px;
        top: 33px !important;
    }

    #updated-time {
        margin-top: -14px !important;
    }

    #logo {
        top:19px !important;
    }

    #header-text {
        top:9px !important;
        height: auto;
        margin-left: 5px;
        width: calc(100% - 10px);
        position: relative;
    }

    /* Ensure back-to-top button is visible at small viewports */
    .filter-back-to-top {
        right: 20px !important;
        bottom: 20px !important;
    }
}

/*@media only screen and (min-width: 999px) {*/
/*    #filter-region-left-col {*/
/*        float: left;*/
/*        width: 382px;*/
/*    }*/

/*}*/

#sidebar {
    width: 17px;
    cursor: pointer;
    background-color: var(--action-button);
    color: white !important;
    float: left;
    margin-top: 0px;
    margin-right: 3px;
    margin-left: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 1px;
    height: 21px;
    padding-top: 1px;
    padding-left: 3px;
}

#sidebar {
    padding-left: 1px;
    padding-left: 3px;
}

#sidebar:hover {
    cursor: pointer !important;
    background-color: white !important;
    color: black !important;
    border-color: black;
}

.sidebar-collapsed {
    left: 7px !important;
    padding-left: 2px !important;
}

.sidebar-expanded {
    left: 141px !important;
}

#top-menu-mobile {
    visibility: hidden;
}

#menu-mobile-direction {
    width: 142px;
    float: left;
    margin-top: 20px;
}

#menu-mobile-watchlists {
    width: 207px;
    float: left;
    margin-left: 5px;
    margin-top: 20px;
}

#charts {
    margin-right: 0px;
    position: fixed;
    background-color: var(--page-background) !important;
    top: 20px;
    z-index: 20;
    min-width:350px;
    margin-top:5px;
}

#charts-top-bar {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-items: center;
    justify-content: left;
    gap: 8px;
    margin-bottom: 4px;
}

#charts-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

#chart-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

#charts-disclaimer {
    font-size: 11px;
    color: var(--common) !important;
    text-align: left;
}


@media (max-width: 1200px) {
    #charts-top-bar {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    #charts-disclaimer {
        text-align: left;
        margin-bottom: 4px;
    }
}

#updated-time {
    margin-top: 0px;
}

#updated-time-text {
    float:left;
}

#delayed-status {
    float: left;
    color: var(--action-yellow) !important
}

.delayed-data {
    /*
    color: var(--action-yellow);
    font-weight: bold;
    */
}

.delayed-data-link {
    color: var(--action-yellow) !important;
    font-weight: bold;
}

.icon-delayed {
    color: var(--action-yellow) !important;
}

#delayed-status:hover {
    cursor: pointer;
}

#titlebar {
    margin-bottom: 3px;
    margin-top: 3px;
}

a {
    color: var(--common) !important;
    text-decoration: underline;
}

.disclaimer a {
    color: var(--common) !important;
    text-decoration: underline;
}

.debug {
    color: var(--common) !important;
    font-size: 9px;
    margin-top: 10px;
}

a:link {
    text-decoration: underline;
}

#loading-text {
    margin: 10px;
    color: var(--white) !important;
}

.tab-content {
    padding-top: 0px !important;
}

#watchlist {
    float: left;
    margin-left: 5px;
    margin-top: -20px;
    min-width: 758px;
}

#reload {
    background-color: var(--white);
    margin-top: 3px;
    margin-left: 2px;
}

#button-region {
    margin-right: 30px;
}

.split-button-primary {
    color: white;
    background-color: black;
    color: var(--white);
    border-color: var(--white);
    height: 22px;
    padding-top: 0px;
    border-radius: 0px;
    margin-top: 1px;
}

.split-button-primary {
    color: white;
    color: var(--white);
}

.split-button-head {
    color: white;
    background-color: black;
    color: var(--white);
    border-color: var(--white);
    height: 22px;
    padding-top: 0px;
    border-radius: 0px;
    margin-top: 1px;
}

.split-button-head {
    color: white;
    color: var(--white);
}

.sector-labels {
    font-size: 11px;
    text-align: right;
    margin-left: 2px;
    margin-bottom: -11px;
}

.grid-cell-heading-val-1 {
    margin-left: 187px;
}

.grid-cell-heading-val-2 {
    margin-left: 25px;
}

.sector-link-selected {
    color: var(--action-yellow) !important;
    text-shadow: 0 0 3px #FFFFFF;
}

.filter-criteria-display-quick-filter {
    display: inline;
}

.grid-sort {
    padding-left: 4px;
    text-decoration: none !important;
}

.new-icon {
    float: right;
}

#sector-minimized {
    left: 99px !important;
    position: absolute;
    height: 26px !important;
    border: 1px solid;
    width: 21px;
    cursor: pointer;
    background-color: hsla(170, 56%, 23%, .7);
    border-color: hsla(170, 56%, 23%, .7);
    color: white;
    margin-top: 28px;
    margin-right: 3px;
    margin-left: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-left: 4px;
    height: 23px;
    font-size: 12px;
    padding-top: 3px;
    font-weight: 200;
}

#sector-minimized {
    height: 26px !important;
    height: 23px;
}

#sectors {
    position: absolute;
    top: 56px;
    left: 564px;
    font-size: 8px;
    border: none;
    height: 60px;
    width: 300px;
}

#market-status {
    margin-top: 17px;
}

.market-status-icon-long {
    color: var(--common-header) !important;
    float: right;
}

.market-status-icon-flat {
    color: var(--common-header) !important;
    float: right;
}

.market-status-icon-short {
    color: var(--common-header) !important;
    float: right;
}

#market-ticker-status-long {
    color: var(--common-header);
    font-weight: bold;
}

#market-ticker-status-short {
    color: var(--common-header);
    font-weight: bold;
}

#market-ticker-status-flat {
    color: var(--common-header);
    font-weight: bold;
}

#market-status-timer {
    margin-left: 30px;
    margin-top: -2px;
}

#right-arrow {
    width: 30px;
}

.action-button-flip {
    float: right;
    height: 27px;
    margin: 1px;
    padding-top: 5px;
    color: white;
    font-size: 11px;
    text-align: center;
}

.volume-container {
    position: relative;
    float: right;
    top: -10px;
    left: 38px;
}

#sector-text {
    float: left;
    left: 12px;
    position: relative;
}

#sector-market-indicator {
    float: left;
}

#sector-market-indicator-section {
    left: 8px;
    position: relative;
    width: 34px;
}

.volume-bar-7 {
    top: 0px;
}

.volume-bar-6 {
    top: 3px;
}

.volume-bar-5 {
    top: 6px;
}

.volume-bar-4 {
    top: 9px;
}

.volume-bar-3 {
    top: 12px;
}

.volume-bar-2 {
    top: 15px;
}

.volume-bar-1 {
    top: 18px;
}

.volume-bar {
    background-color: antiquewhite;
    height: 1px;
    width: 4px;
    overflow: clip;
    position: absolute;
}

.action-button-forward {
    width: 22px !important;
}

.alerts-on {
    background-color: rgb(255,168,9);
    color: black !important;
}

.action-button-share {
    background-color: none !important;
    color: white !important;
    float: right;
    height: 27px;
    padding-top: 5px;
    color: white;
    font-size: 11px;
    text-align: center;
    border: 0px;
}

.action-button-share {
    color: white !important;
    color: white;
}

.action-button-share:hover {
    background-color: white !important;
    border-color: white !important;
    color: black;
}

.contact {
    width: 131px;
    text-align: center;
    color: white;
    border: 1px solid;
    border-color: white;
    cursor: pointer;
}

.contact:hover {
    background-color: white;
    color: black;
}

.action-button-donate:hover {
    color: var(--common-header) !important;
}

#donate-text {
    text-align: left;
    margin-left: 0px;
    line-height: 17px;
    font-size: 13px;
    padding-top: 1px;
    padding-left: 14px;
    height: 20px;
    color: white !important;
    background-color: #ff424d !important;
    min-width: 800px;
    cursor: pointer !important;
    position: relative;
}

#member-top-bar {
    text-align: left;
    margin-left: 0px;
    line-height: 17px;
    font-size: 13px;
    padding-top: 1px;
    padding-left: 14px;
    height: 20px;
    color: white !important;
    min-width: 800px;
    cursor: pointer !important;
    position: relative;
}

.donate-hidden {
    visibility: hidden;
}

#donate-content {
    float: left;
    cursor: pointer;
}

#donate-content-logged-in {
    background-color: green !important;
}

.sector-bar-close {
    display: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
    margin-top: -18px;
    position: fixed;
    margin-left: 288px;
    color: var(--common);
    position: absolute;
}

.sector-bar-close {
    display: none;
    display: var(--fa-display,inline-block);
    position: fixed;
    position: absolute;
}

.donate-bar-close {
    margin-left: 10px;
    z-index: 5000 !important;
    cursor: pointer;
    font-size: 10px;
    padding-top: 3px;
}

#contact-text {
    font-weight: 500 !important;
    text-align: center;
    margin-left: 3px;
    line-height: 17px;
    font-size: 12px;
    margin-top: 6px;
}

#donate-icon {
    float: right;
    margin-top: 7px;
    font-size: 13px;
    margin-right: -1px;
    margin-left: 1px;
}

#main-content {
    padding-top: 0x;
}

#contact-icon {
    float: right;
    margin-top: 4px;
    font-size: 13px;
    margin-right: -2px;
}

#move-mouse-label {
    float: left;
}

#mouse-coords {
    margin-top: 5px;
    font-style: italic;
    margin-bottom: 6px;
}

#mouse-settings-footer {
    clear: both;
    padding-top: 5px;
    font-style: italic;
}

#mouse-instructions {
    margin-top: 11px;
    margin-bottom: 10px;
    background-color: yellow;
    color: black;
}

#move-mouse-setting {
    margin-top: 10px;
    margin-left: 5px;
}

#move-mouse-radio {
    float: left;
    margin-left: 15px;
}

#move-mouse-pixels {
    float: left;
    margin-top: -4px;
}

#mouse-px {
    float: left;
    margin-left: 5px;
}

.setting-row {
    clear: both;
}

.filter-entry-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0px;
    min-height: 32px;
    padding: 1px 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.15s;
}

.filter-entry-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.filter-tooltip-icon {
    font-size: 11px;
    color: #777;
    margin-left: 4px;
    flex-shrink: 0;
    pointer-events: none;
}

.filter-entry-row.has-value .filter-entry-row-first-col {
    flex: 0 1 auto;
    min-width: 0;
}

.filter-entry-row.has-value .filter-entry-row-second-col {
    flex: 0 0 auto;
    margin-left: 8px;
}

.filter-modal {
    width: 100%;
    max-width: 1100px;
}

.filter-region-header {
    width: 100%;
    padding: 8px 12px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-region-header::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    flex-shrink: 0;
}

.filter-region-header-long {
    background: linear-gradient(135deg, rgba(0, 134, 0, 0.8) 0%, rgba(0, 87, 0, 0.9) 100%);
}

.filter-region-header-long::before {
    background-color: #4caf50;
}

.filter-region-header-short {
    background: linear-gradient(135deg, rgba(200, 30, 30, 0.8) 0%, rgba(150, 20, 20, 0.9) 100%);
}

.filter-region-header-short::before {
    background-color: #ff5252;
}

.filter-region-header-flat {
    background: linear-gradient(135deg, rgba(100, 149, 237, 0.7) 0%, rgba(70, 110, 180, 0.8) 100%);
}

.filter-region-header-flat::before {
    background-color: #64b5f6;
}

.filter-region-header-sector {
    background: linear-gradient(135deg, rgba(38, 90, 80, 0.8) 0%, rgba(20, 60, 55, 0.9) 100%);
}

.filter-region-header-sector::before {
    background-color: #26a69a;
}

.filter-region-header-multiscan {
    background: linear-gradient(135deg, rgba(100, 50, 180, 0.8) 0%, rgba(77, 0, 209, 0.9) 100%);
}

.filter-region-header-multiscan::before {
    background-color: #b388ff;
}

.filter-region-header-custom {
    background: linear-gradient(135deg, rgba(237, 137, 54, 0.8) 0%, rgba(200, 100, 30, 0.9) 100%);
}

.filter-region-header-custom::before {
    background-color: var(--action-yellow);
}

.filter-region-content {
    padding: 10px 12px;
    margin-bottom: 0px;
    overflow: hidden;
}

/* Sub-groups flow vertically within each super-group */
.filter-subgroup-grid {
    display: flex;
    flex-direction: column;
}

/* Super-groups layout */
.filter-columns-container {
    display: block;
}

/* Filter search input */
.filter-search-input {
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
}

.filter-search-input::-webkit-search-decoration,
.filter-search-input::-webkit-search-cancel-button {
    display: none;
}

/* Expand/Collapse all buttons row */
.filter-group-toggles-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.filter-expand-collapse {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.filter-expand-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    transition: all 0.15s ease;
    font-weight: 500;
}

.filter-expand-btn:hover {
    background: #e5e5e5;
    color: #333;
    border-color: #aaa;
}

/* Super-group arrow (in region header) */
.filter-supergroup-arrow {
    transition: transform 0.15s;
}

.filter-supergroup-arrow.expanded {
    transform: rotate(90deg);
}

/* Sub-group collapsible sections */
.filter-subgroup {
    margin-bottom: 1px;
}

.filter-subgroup-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    cursor: pointer !important;
    font-size: inherit;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
    border-radius: 3px;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}

.filter-subgroup-header * {
    cursor: pointer !important;
}

.filter-subgroup-header:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
}

.filter-subgroup-header.has-active {
    color: inherit;
}

.filter-subgroup-header.has-active:hover {
    background: rgba(79, 195, 247, 0.06);
}

.filter-subgroup-arrow {
    font-size: 8px;
    width: 10px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.15s, opacity 0.15s;
}

.filter-subgroup-header:hover .filter-subgroup-arrow {
    opacity: 0.8;
}

.filter-subgroup-arrow.expanded {
    transform: rotate(90deg);
}

.filter-subgroup-name {
    flex: 0 0 auto;
    font-size:13px;
}

.filter-subgroup-count {
    background: var(--action-yellow);
    color: white !important;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    display: inline-block;
    line-height: 14px;
    margin-left: 4px;
    font-size: 10px !important;
}

.filter-or-badge {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    margin-left: 6px;
    border-radius: 3px;
    background: rgba(255, 152, 0, 0.15);
    color: rgba(255, 152, 0, 0.85);
    border: 1px solid rgba(255, 152, 0, 0.25);
    cursor: help;
    flex-shrink: 0;
}

.filter-subgroup-content {
    padding: 2px 0 4px 0px;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    margin-left: 4px;
    margin-bottom: 2px;
}

/* Nested (third-level) sub-groups */
.filter-subgroup-nested {
    margin-left: 0px;
    margin-top: 2px;
}

.filter-subgroup-nested > .filter-subgroup-header {
    font-size: inherit;
    padding: 4px 14px;
    color: var(--common);
}

.filter-subgroup-nested .filter-subgroup-content {
    font-size: 12px;
}

.filter-subgroup-nested > .filter-subgroup-header.has-active {
    color: inherit;
}

/* Ungrouped filters at bottom of a group — flush left, visually separated */
.filter-ungrouped {
    margin-top: 2px;
    padding-top: 2px;
    padding-left: 0px;
    margin-left: -10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.filter-entry-row-first-col {
    display: flex;
    align-items: center;
    min-height: 27px;
    flex: 0 0 auto;
}

.filter-entry-row-second-col {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    flex-shrink: 0;
}

.filter-value {
    float: left !important;
    width: 72px !important;
    font-size: 12px;
    height: 23px !important;
}

.filter-on-long {
    color: white;
    border-color: var(--long);
    border: 1px solid;
    font-weight: bold;
    background-color: var(--long);
}

#filter-scan-direction {
    float: right;
}

.filter-direction-long {
    border-color: var(--long);
    background-color: var(--long);
}

.filter-direction-short {
    border-color: var(--short);
    background-color: var(--short);
}

.filter-on-short {
    color: white;
    border-color: var(--long);
    border: 1px solid;
    font-weight: bold;
    background-color: var(--short);
}

.filter-on-sector {
    color: white;
    border-color: var(--sector);
    border: 1px solid;
    font-weight: bold;
    background-color: var(--sector);
}

.filter-on-multiscan {
    color: white;
    border-color: var(--multi-scan);
    border: 1px solid;
    font-weight: bold;
    background-color: var(--multi-scan);
}

.filter-disabled {
    color: dimgray;
    border-color: dimgray;
    cursor: not-allowed;
}

#filtered {
    clear: both;
    padding-top: 0px;
    padding-left: 2px;
    min-width: 500px;
}

#filtered::after {
    content: "";
    display: table;
    clear: both;
}

.filtered-custom {
    margin-left: 144px;
}

.filtered-custom-scan {
    margin-left: 144px;
}

#filtered-out {
    float: left;
    cursor: pointer;
    /* align with the chip strip's left edge (2px #filtered padding +
       11px criteria margin) -- it was overlapping the collapse chevron */
    margin-left: 13px;
}

.filter-display-heading {
    font-weight: bold;
    display: inline;
}

.filter-criteria-display {
    display: inline;
}

.filter-criteria-advanced {
    display: inline;
}

.filter-criteria-advanced-label {
    color: var(--action-yellow);
    font-size: 11px;
}

.filter-criteria-expression {
    font-size: 11px;
    line-height: 1.6;
    word-break: break-word;
    max-width: 603px;
}

#custom-scan-settings {
    clear: both;
    margin-bottom: -6px;
    padding-top: 1px;
    margin-left: -4px;
}

.filter-entry-row > .form-check {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    flex: 0 0 auto;
}

.filter-desc {
    padding-left: 7px;
    white-space: nowrap;
    flex: 0 0 auto;
    /*width: 66px;*/
    overflow: hidden;
    color: var(--common);
    font-size:12px;
    padding-right:5px;
}

.ticker-entry-delay {
    float: left;
    margin-left: 25px;
    margin-bottom: 11px;
}

#ticker-entry-delay-time {
    float: left;
    width: 75px;
    height: 25px;
    margin-left: 8px;
    margin-right: 8px;
}

#entry-caption {
    float: left;
}

.copy-button {
    float: right;
}

.action-button-custom {
    height: 27px;
    padding-top: 5px;
    color: white;
    font-size: 11px;
    float: right;
    border-color: var(--action-button);
}

.action-button-yellow {
    color: lightyellow;
    border-color: lightyellow;
}

.intro-text {
    font-weight: 700;
}

#header-text-mobile {
    display: none;
}

#header-text {
    color: var(--common);
    float: left;
    position: absolute;
    margin-left: 140px;
    width: 350px;
    top: 21px;
    font-size: 11px;
    height: 41px;
    vertical-align: middle;
    line-height: 19px;
}

#header-center-text {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 200;
}

.mini-grid-search-container {
    display: block;
}

#grid-heading-buttons {
    display: flex;
    align-items: center;
    padding-top: 3px;
    margin-right: 20px;
    max-width:744px;
    margin-left: 135px;
    margin-bottom: 0px;
    overflow: hidden;
    margin-top: -2px;
}

.grid-buttons-left {
    display: flex;
    align-items: center;
}

.grid-buttons-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

.grid-buttons-right {
    display: flex;
    align-items: center;
}

.grid-heading-buttons-multi-scan {
    margin-left: 0px !important;
    margin-top: 5px !important;
    max-width: 900px !important;
    width:900px;
}

.grid-heading {
    margin-bottom: 5px;
    margin-left: 3px;
    clear: both;
}

#share-url {
    font-size: 16px;
    font-family: monospace;
    color: var(--common) !important;
}

#show-chart {
    position: fixed;
    left: 501px;
    margin-right: 2px;
    width: 377px;
    margin-top: 4px;
}

.menu-divider {
    clear: both;
    height: 1px;
    width: 580px;
    color: var(--white);
    background-color: var(--white);
}

.menu-divider-top {
    margin-top: 15px;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
    margin-right: 10px;
}

.search-result-row {
    background-color: hsla(39, 100%, 86%, .7) !important;
}

.search-result-group-label {
    border: none;
    margin: 2px;
    font-size: 13px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
}

.search-result-group-title {
    text-decoration: underline;
}

.search-result-ticker-heading {
    margin-top: 10px;
    font-size: 14px;
    margin-left: 15px;
    margin-bottom: 10px;
}

.search-result-flag {
    cursor: pointer;
    font-size: 15px;
    opacity: 0.4;
    margin-top: -17px;
    margin-left: 4px;    
}

.search-result-flag:hover {
    opacity: 0.7;
}

.search-result-flag.is-starred-green,
.search-result-flag.is-starred-red,
.search-result-flag.is-starred-yellow {
    opacity: 1;
}

.search-result-ticker-heading-chart-info {
    margin-top: -10px;
    font-size: 14px;
    margin-left: 9px;
    width: 200px;
    float: left;
}

.search-result-ticker-heading-second-row {
    margin-top: 10px;
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 10px;
    margin-top: -9px;
}

.search-result-ticker-heading-second-row {
    margin-top: 10px;
    margin-top: -9px;
}

.search-result-ticker-heading-second-row-chart-info {
    margin-top: 10px;
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 10px;
    margin-top: -9px;
    float: left;
}

.search-result-ticker-heading-second-row-chart-info {
    margin-top: 10px;
    margin-top: -9px;
}

#search-results-close {
    float: right;
    font-size: 20px;
}

.search-result-ticker-heading-third-row {
    margin-top: 7px;
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 10px;
}

.search-result-ticker-heading-third-row-chart-info {
    margin-top: 7px;
    font-size: 12px;
    margin-left: 15px;
    margin-bottom: 10px;
    width: 1000px;
    margin-left: 270px;
    position: fixed;
}

.search-result-ticker-heading-third-row-chart-info {
    margin-left: 15px;
    margin-left: 270px;
}

#chart-ticker-row {
    height: 55px;
}

.search-results-symbol {
    font-size: 24px;
    font-weight: bold;
    margin-right: 4px;
}

#search-result-news-list-header {
    margin-top: 20px;
    margin-left: 15px;
    margin-bottom: 5px;
    font-weight: bold;
}

#mobile-ticker-search {
    left: 365px !important;
    position: absolute !important;
    top: 80px !important;
    z-index: 2000;
    width: 74px !important;
    width: 100px;
    top: 78px !important;
    height: 30px;
    float: left;
    font-size: 10px;
    margin-right: 8px;
    margin-left: -2px;
    border-radius: 2px;
    border: 1px solid #ced4da;
    padding-left: 5px;
}

::placeholder {
    color: var(--light-gray) !important;
    font-weight: normal;
}

.watchlist-label-search {
    padding: 5px;
    border: 1px solid;
    width: 132px;
    margin: 2px;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-align: left;
}

.watchlist-label-search:hover {
    background-color: none !important;
}

.watchlist-custom-scan-icon {
    float: right;
    margin-top: 3px;
    margin-left: 20px;
}

.grid-heading-text {
    clear: both;
    color: white;
    background-color: var(--long-text);
    font-size: 13px;
    margin-top: 0px;
    margin-bottom: 5px;
    padding: 0px;
    padding-left: 7px;
    margin-left: 136px;
    width: 742px;
    height: 34px;
}

#sector-strength-heading {
    margin-left: 10px;
    float: left;
    margin-top: 8px;
    font-size: 12px;
    position: relative;
    z-index: 1500;
    text-shadow: 1px 1px 2px black;
}

/* Sector view: the title (e.g. "Technology - XLK") is short, so the fixed 470px heading width
   pushed the Strength/RVol text right into the action buttons (#show-chart at left:501px). Let
   the title be content-width so the strength text sits right after it, and hide the duplicate
   copy that lives inside the (masked/clipped) title. (2026-07-23) */
.main-bg-sector #heading-text {
    width: auto;
    max-width: 470px;
    -webkit-mask-image: none;
    mask-image: none;
}
.main-bg-sector #heading-text #sector-strength-heading {
    display: none;
}

.separator {
    font-weight: normal !important;
}

#heading-text {
    font-size: 14px;
    padding-top: 6px;
    overflow: hidden;
    max-height: 31px;
    float: left;
    font-weight: 700;
    min-width: 130px;
    /* 2026-07-22: FIXED width (not max-width) + right-edge fade (gradient mask). Fixed
       width keeps the fade zone at a constant spot on the right, so SHORT headings never
       reach it (no unnecessary fade) while long descriptions fade before the buttons.
       Tune: `width` = how far right the text reaches; the `40px` = fade length.
       2026-07-23: 470 -> 350 (custom titles ran under the buttons), then -> 400 so the text
       stays solid 50px further before the fade (the faded tail can run toward #show-chart at
       left:501 since it's transparent by then).
       2026-07-28: toolbar went icon-only (labels -> tooltips), so the icons are compact and
       right-floated to ~878 — reclaim the freed room: 400 -> 540. */
    width: 540px;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

.view-industries {
    font-weight: normal !important;
    text-decoration: underline;
    cursor: pointer;
}

.grid-heading-text-long {
    background: rgb(0,134,0);
    background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%);
}

.grid-heading-text-multiscan {
    background: rgb(77,0,209);
    background: linear-gradient(90deg, rgba(77,0,209,1) 0%, rgba(248,249,250,1) 88%);
    margin-left: 2px;
}

.grid-heading-text-multiscan {
    background: rgb(77,0,209);
    background: linear-gradient(90deg, rgba(77,0,209,1) 0%, rgba(248,249,250,1) 88%);
}

.grid-heading-text-intro {
    background: hsla(53, 100%, 79%, 1);
    background: linear-gradient(90deg, rgba(56, 132, 255, 1) 0%, rgba(248,249,250,1) 88%);
    margin-left: 2px;
}

.grid-heading-text-intro {
    background: hsla(53, 100%, 79%, 1);
    background: linear-gradient(90deg, rgba(56, 132, 255, 1) 0%, rgba(248,249,250,1) 88%);
}

.grid-heading-text-short {
    background: rgb(178,5,5);
    background: rgb(217,4,4);
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
}

.grid-heading-text-flat {
    background-color: var(--flat);
    color: antiquewhite !important;
    border-left: solid 1px var(--flat);
    border-right: solid 1px var(--flat);
}

.grid-heading-text-sector {
    color: antiquewhite !important;
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(255,255,255,1) 99%);
}

.grid-heading-text-sector {
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(255,255,255,1) 99%);
}

.grid-heading-text-custom {
    background-color: var(--custom);
    color: white !important;
    border-left: solid 1px var(--custom);
    border-right: solid 1px var(--custom);
    border-bottom: solid 1px var(--custom);
}

#grid-heading-text-flag {
    background-color: var(--long-text);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs {
    color: antiquewhite !important;
    border-color: black !important;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: antiquewhite !important;
    border-color: black !important;
}

.nav-tabs .nav-link {
    margin-bottom: -1px !important;
    border: 1px solid var(--white) !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
    font-size: 12px !important;
    color: var(--white) !important;
    padding: 3px !important;
    width: 100px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nav-tabs {
    border-bottom: 1px solid var(--white) !important;
}

.tab-chevron {
    padding-left: 2px;
    padding-right: 1px;
}

.tab-container-collapse {
    height: 38px;
    overflow: hidden;
    width: 600px;
}

#tab-container {
    margin-left: 3px;
}

#modal-tabs {
    width: 472px;
    margin-bottom: 15px;
}

.modal-content {
    min-width: 550px;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    overflow: hidden;
}

#filter-scan-name {
    margin-bottom: 15px;
}

#modal-tabs > li > a.active {
    color: #495057 !important;
}

.header {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    position: fixed;
    height: 60px !important;
    overflow: hidden;
    z-index: 10;
}

.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}

.mainInner {
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}

.mainInner div {
    display: table-cell;
    vertical-align: middle;
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 1.25px;
}

.sidebar-open {
    transform: translateX(0px) !important;
}

.sidebar-closed {
    transform: translateX(-108px) !important;
}

#sidebarMenu {
    left: 0;
    margin-top: 14px;
    /* This identity transform is LOAD-BEARING: #sidebarMenu wraps the whole
       main area, and #menu-region (the real sidebar, fixed at top:-2) plus
       other fixed pieces are tuned to be CONTAINED by it, not the viewport.
       collapse.css removes it in collapsed mode (menu-region is hidden there
       and the scan-menu bottom sheet needs true viewport-fixed). */
    transform: translateX(0px);
    transition: transform 0ms;
    margin-left: -5px;
    /*max-width: 200px;*/
}

.menu-region-hidden {
    display: none;
}

.sidebarMenuInner {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li {
    list-style: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li span {
    display: block;
    font-size: 14px;
    color: var(--long-common);
}

.sidebarMenuInner li a {
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
}

.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: -27px;
    left: 2px;
    height: 12px;
    width: 18px;
    color: antiquewhite;
}

.sidebarIconToggle {
    height: 100%;
    width: 100%;
    height: 12px;
    width: 18px;
}

.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.30);
}

.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.30);
}

.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
    color: rgba(255, 255, 255, 0.30);
}

.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.30);
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 7px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}

#menu-region {
    float: left;
    position: fixed;
    z-index: 10;
    /* 2026-07-22: was top:179px, which relied on the donate button's -181px margin
       pulling the menu up. That's now position:absolute (out of scroll flow), so the
       menu no longer gets pulled up — top set to -2px to restore the original position
       (179 - 181 pull = -2). Tune this single value to shift the menu vertically. */
    top: -2px;
    /* 2026-07-22: independent menu scroll. Was width:50px (the 135px scan labels
       overflowed it visibly); widened to fit them so overflow-y:auto doesn't clip
       horizontally, and bounded the height so a long scan list (146 scans) scrolls
       within the sidebar, separately from the grid. A very thin (4px) scrollbar so
       it doesn't eat into the label width or the grid gap. Grid clears at 150px. */
    width: 148px;
    max-height: calc(100vh - 8px); /* top(-2) + ~10px bottom gap */
    overflow-y: auto;
    overflow-x: hidden;
    /* 2026-07-22: hide the menu scrollbar (matches the page); scroll still works by
       wheel/trackpad. */
    scrollbar-width: none;                                    /* Firefox */
    -ms-overflow-style: none;                                 /* legacy Edge/IE */
}
#menu-region::-webkit-scrollbar { display: none; }           /* WebKit (Chrome/Edge/WebView2) */

.menu-title {
    background-color: var(--long);
    text-align: right;
}

#grid-region {
    position: relative;
    top: -10px;
    left: -5px;
    margin-top: -2px;
}

#right-blocker {
    background-color: black;
    position: fixed;
    left: 773px;
    width: 1000px;
    height: 5000px;
    z-index: 3;
    display: none;
}

.right-blocker-lower {
    background-color: black;
    position: fixed;
    left: 773px;
    width: 1000px;
    height: 5000px;
    z-index: 3;
}

#left-blocker {
    background-color: black;
    position: fixed;
    left: 0px;
    width: 11px;
    height: 5000px;
    z-index: 3;
    display: none;
}

#top-menu {
    position: absolute;
    top: 84px;
    margin-left: 0px;
    min-width: 900px;
    z-index: 500;
}

.menu-button {
    float: left;
    margin: 0px;
    margin-right: 2px;
    font-size: 12px;
    padding: 3px 0px 3px 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--white);
    text-align: center;
    cursor: pointer;
}

#tab-sector-top-row {
    height: 25px;
    margin-bottom: 3px;
    margin-left: 11px;
    width: 300px;
}

#tab-sector-bottom-row {
    height: 25px;
    position: absolute;
    width: 300px;
    margin-left: 11px;
}

.tab-sector-backdrop {
    color: white;
    width: 47px;
    height: 26px;
    border: 0px solid;
    float: left;
    margin: 0px;
    font-size: 10px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: var(--white);
    border-color: var(--white);
    background-color: black !important;
    text-align: center;
    cursor: pointer;
    overflow: clip;
    display: flex;
    align-items: center;
}

.tab-sector-backdrop {
    color: white;
    color: var(--white);
}

#tab-close-button {
    width: 30px;
    border-color: rgba(255, 255, 255, 0.30);
}

#tab-home {
    color: black;
    width: 85px;
    #background-color: rgba(56, 132, 255, .8);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

#tab-home:hover {
    background-color: rgba(56, 132, 255, 1) !important;
    cursor: pointer;
    color: white !important;
}

.tab-home-selected {
    background-color: rgba(56, 132, 255, 1) !important;
    cursor: pointer;
    color: white !important;
}

#tab-multiscan {
    color: black;
    #border-color: hsla(262, 100%, 41%, 1);
    width: 102px;
    #background-color: hsla(262, 100%, 41%, .8);
    font-weight: 500 !important;
    font-size: 13px;
    position: relative;
    z-index: 5000;
}

#tab-multiscan:hover {
    background-color: hsla(262, 100%, 41%, 1) !important;
    color: white !important;
    cursor: pointer;
}

.tab-multiscan-selected {
    background-color: hsla(262, 100%, 41%, 1) !important;
    color: white !important;
    cursor: pointer;
}

#tab-long {
    color: black;
    width: 130PX;
    #background-color: hsla(120, 100%, 26%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

#tab-long:hover {
    background-color: hsla(120, 100%, 26%, 1);
    color: white !important;
    cursor: pointer;
}

.tab-long-selected {
    background-color: hsla(120, 100%, 26%, 1) !important;
    color: white !important;
    cursor: pointer;
    font-weight: 700;
}

#tab-short:hover {
    background-color: hsla(0, 100%, 52%, 1);
    color: white !important;
    cursor: pointer;
}

.tab-short-selected {
    background-color: hsla(0, 100%, 52%, 1) !important;
    color: white !important;
    cursor: pointer;
}

#tab-sector {
    color: black;
    width: 70px;
    #background-color: hsla(170, 56%, 23%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

.tab-sector-selected {
    color: white !important;
    border-color: var(--long-text) !important;
    color: var(--white);
    border-color: var(--white);
    background-color: hsla(170, 56%, 23%, 1);
    font-weight: 700;
}

.tab-sector-selected {
    color: white !important;
    border-color: var(--long-text) !important;
    color: var(--white);
    border-color: var(--white);
}

#tab-sector:hover {
    background-color: hsla(170, 56%, 23%, .7);
    color: white !important;
    cursor: pointer;
}

#tab-account {
    color: black;
    width: 83px;
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    border-color: black;
    border: none !important;
    margin-left: 2px;
}

#tab-account:hover {
    color: white;
    background-color: hsla(116, 76%, 44%,1) !important;
}

.tab-account-selected {
    color: white;
    font-weight: 700;
}

#tab-log-in {
    color: black;
    width: 69px;
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    border-color: black;
    border: 0px solid;
    margin-right: 17px;
}

#tab-log-in:hover {
    color: white;
    background-color: var(--action-button) !important;
}

#tab-turbo {
    color: black !important;
    width: 110px;
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    background-color: #ffd500 !important;
}

#tab-turbo:hover {
    background-color: #ffe14b !important;
}

.tab-turbo-selected {
    color: white;
    background-color: hsla(116, 76%, 44%,1) !important;
    width: 118px;
    font-weight: 700;
}

#tab-alerts {
    color: black;
    width: 69px;
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    #border-color: black;
    #border: 1px solid;
}

#tab-settings {
    color: black;
    width: 80px;
    font-weight: 700;
    height: 26px;
}

#tab-settings:hover {
    color: white;
    background-color: var(--action-button) !important;
}

#tab-settings-selected {
    color: white;
    background-color: var(--action-button) !important;
    width: 118px;
    font-weight: 700;
}

#tab-alerts:hover {
    background-color: rgb(255,168,9) !important;
}

#tab-alerts:hover {
    color: white;
}

.tab-alerts-selected {
    color: black !important;
    background-color: #ffd500 !important;
    width: 118px;
    font-weight: 700;
}

.tab-flat-selected {
    background-color: var(--flat) !important;
    border-color: var(--flat) !important;
    color: white !important;
    cursor: pointer;
}

#tab-flat:hover {
    background-color: var(--flat) !important;
    border-color: var(--flat) !important;
    color: white !important;
    cursor: pointer;
}

#tabs > li.nav-item.tab-long > a {
    color: var(--long-text) !important;
    border-color: var(--long-text) !important;
    width: 135px;
}

#tabs > li.nav-item.tab-long > a.active {
    background-color: var(--long-text);
    color: antiquewhite !important;
}

#tabs > li.nav-item.tab-short > a {
    color: var(--short) !important;
    border-color: var(--short) !important;
    width: 136px;
}

#tabs > li.nav-item.tab-short > a.active {
    background-color: var(--short);
    color: antiquewhite !important;
}

#tabs > li.nav-item.tab-flat > a {
    color: var(--flat) !important;
    border-color: var(--flat) !important;
    width: 120px;
}

#tabs > li.nav-item.tab-flat > a.active {
    background-color: var(--flat);
    color: antiquewhite !important;
}

#tabs > li.nav-item.tab-custom > a {
    color: var(--custom-text) !important;
    border-color: var(--custom) !important;
    width: 70px;
}

#tabs > li.nav-item.tab-custom > a.active {
    background-color: var(--custom);
    color: white !important;
}

.tab-short > a {
    color: var(--short) !important;
    border-color: var(--short) !important;
}

.tab-long > a {
    color: var(--long-text);
    border-color: var(--long-text);
}

.tab-flat > a {
    color: var(--flat) !important;
    border-color: var(--flat) !important;
}

.watchlist-label-custom {
    color: var(--custom-text);
    border-color: var(--custom);
}

.watchlist-label-custom-selected {
    background-color: var(--custom);
    border-color: var(--custom);
    color: white;
}

.watchlist-subhead {
    /* border: none; */
    /* border: 1px solid; */
    width: 135px;
    /* margin: 2px; */
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: antiquewhite;
    font-weight: bold;
    margin-top: 8px;
    border-right: 1px solid rgba(183, 189, 183, 1);
    border-color: rgba(183, 189, 183, 0.5);
}

.watchlist-subhead-sector {
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(0,0,0,0) 100%);
    font-weight: 900;
}

.watchlist-subhead-long {
    background: linear-gradient(90deg, rgb(0, 134, 0) 0%, rgba(0, 134, 0, 0.21) 97%);
    font-weight: 900;
}

.watchlist-subhead-short {
    background: linear-gradient(90deg, rgb(217, 4, 4) 0%, rgba(0, 0, 0, 0) 100%);
    font-weight: 900;
}

.group-count {
    float: right;
    width: 25px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* border: 1px solid; */
    border-color: var(--long);
    /* background-color: var(--long); */
    font-size: 10px;
    color: var(--common);
    /* background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%); */
    font-weight: bold;
}

.group-count-long {
    border-color: var(--long);
    /* background-color: #bdddc4; */
}

.group-count-short {
    /* border-color: var(--short); */
    /* background-color: var(--short); */
}

.group-count-flat {
    border-color: var(--flat);
    background-color: var(--flat);
}

.group-count-sector {
    border-color: var(--sector);
    /* background-color: var(--sector); */
}

.watchlist-label:hover {
    cursor: pointer;
    /* faux-bold: thickens strokes WITHOUT changing glyph metrics. Real
       font-weight:900 here changed text width on hover, re-wrapping long
       scan names and juddering the whole menu. */
    text-shadow: 0 0 0.65px currentColor, 0 0 0.65px currentColor;
}

/*.watchlist-label-short:hover {*/
/*    cursor: pointer;*/
/*    text-decoration:underline !important;*/
/*}*/

/*.watchlist-label-long:hover {*/
/*    cursor: pointer;*/
/*    font-weight:900;*/
/*}*/

/*.watchlist-label-sector:hover {*/
/*    cursor: pointer;*/
/*    text-decoration:underline !important;;*/
/*}*/

#standard-region {
    float: left;
    margin-bottom: 10px;
    padding: 0px;
    margin-top: -12px;
    width: 600px;
    overflow: hidden;
}

.disclaimer {
    font-style: italic;
    color: dimgray;
    margin-bottom: 3px;
    margin-left: 5px;
    width: 127px;
    font-size: 11px;
    margin-top: 19px;
    line-height: 14px;
    border-top: 1px solid;
    border-color: #cccccc;
    padding-top: 8px;
}

.disclaimer p {
    margin-top: 3px;
    margin-bottom: 8px;
}

.disclaimer-mini {
    width: 800px;
    line-height: 16px;
    margin-left: 10px;
    display: none;
}

#whats-new {
    position: absolute;
    left: 354px;
    top: 3px;
    font-size: 10px !important;
    width: 86px;
}

#updated {
    color: var(--common);
    font-style: italic;
    font-size: 11px;
    z-index: 10;
    margin-top: 9px;
    position: absolute;
    left: 144px;
    top: 47px;
    width:350px;
}

/*
.updated-desktop {
    left: 203px !important;
    top: 49px !important;
}
*/

#updated-mini {
    color: var(--common);
    font-style: italic;
    font-size: 10px;
    z-index: 10;
    margin-left: 10px !important;
    margin-top: 5px;
}

#version {
    font-style: italic;
    color: dimgray;
    margin-bottom: 3px;
    margin-left: 5px;
    width: 127px;
    font-size: 11px;
    margin-top: 10px;
    margin-bottom: 8px;
    line-height: 14px;
}

#version {
    margin-bottom: 3px;
    margin-bottom: 8px;
}

#add-region {
    float: left;
    border: none;
    padding: 3px;
    margin-left: 3px;
    border-width: 2px;
    color: forestvar(--long-text);
    font-weight: bold;
}

#filter-entry-scan-name {
    margin-right: 18px !important;
    margin-top: 7px !important;
    width: 200px !important;
    clear: both;
}

.modal {
    max-height: 100vh;
}

#add-ticker-text {
    background-color: black;
    color: var(--long-text);
    border: 1px solid;
}

#scan-name {
    width: 200px;
    height: 30px;
    margin-left: 0px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

#scan-name:focus {
    border-color: var(--action-yellow, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

/* description input: identical treatment to the name box, just wider */
#scan-description {
    width: 320px;
    height: 30px;
    margin-left: 6px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
    background: transparent;
    color: inherit;
}

#scan-description:focus {
    border-color: var(--action-yellow, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

#add {
    width: 51px;
    height: 26px;
}

#flag {
    background-color: var(--long-text);
}

.intro-modal {
    font-size: 15px;
    min-width: 400px;
    overflow-y: hidden;
    color: var(--common);
    padding: 22px !important;
}

.settings-modal {
    font-size: 15px;
    min-width: 400px !important;
    overflow-y: hidden;
    color: var(--common);
    padding: 12px !important;
}

.donate-modal {
    font-size: 15px;
    color: var(--common);
}

#donate-link {
    font-weight: bold;
}

#patreon-text-logo {
    float: left;
    height: 13px;
    padding-left: 5px;
    color: white;
    font-size: 13px;
    margin-top: 3px;
    margin-left: 13px;
    font-weight: 500;
}

#patreon-link {
    margin-left: 30px;
    color: white !important;
}

#user-guide-icon {
    position: relative;
    top: 0px;
    left: 1px;
}

#multi-scan-icon {
    position: relative;
    top: 0px;
    left: 2px;
}

#alert-icon {
    position: relative;
    top: 0px;
    left: 2px;
}

.alert-icon {
    position: relative;
    top: 0px;
    left: 2px;
}

.alerts-actions {
    margin-left: 19px;
    width: 500px;
    padding-bottom: 18px;
}

#intro-icon {
    position: relative;
    top: 0px;
    left: 8px;
}

#patreon-icon {
    position: fixed;
    top: 5px;
    left: 117px;
}

#kofi-link {
    margin-left: 10px;
}

#patreon-logo {
    width: 120px;
    background-color: gray;
    float: left;
    margin-right: 10px;
}

#patreon-logo-intro {
    width: 120px;
    background-color: gray;
    float: right;
    margin-right: 10px;
    margin-left: 2px;
    margin-top: 9px;
}

#patreon-logo-small {
    width: 100px;
    margin-top: 20px;
}

#kofi-logo-small {
    margin-top: 5px;
    width: 100px;
    margin-bottom: 5px;
}

#kofi-logo-dark {
    height: 35px;
    background-color: gray;
    float: left;
    margin-right: 6px;
}

#kofi-logo-light {
    height: 35px;
    background-color: gray;
    float: left;
    margin-right: 21px;
}

.chart-selection-button {
    border: 1px solid;
    float: left;
    margin: 5px;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 203px;
    height: 40px;
    padding-top: 9px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    padding-left: 10px;
}

.chart-selection-button {
    font-size: 13px;
    padding-left: 5px;
    font-size: 15px;
    padding-left: 10px;
}

.chart-selection-text {
    font-size: 15px;
    align-items: center;
    color: var(--common);
    display: flex;
    height: 40px;
    margin-top: 6px;
    padding-left: 8px;
}

.chart-selection-hint {
    font-size: 12px;
    color: var(--common);
    opacity: 0.6;
    padding: 6px 0 2px;
}

/* ---- Pop-out window (single scan in its own browser window) ---- */
.popout-view {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}
.popout-selector-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 8px 6px;
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}
/* Combo sized to content; the ScanCombo info (i) icon sits inline right after it
   (not pushed to the far edge). */
.popout-selector-bar .scan-combo-container { flex: 0 0 auto; min-width: 0; }
.popout-selector-bar .scan-combo-toggle { min-width: 180px; justify-content: flex-start; }
/* Pin the scan name to the left (was centered, leaving a big left gap); arrow to the right. */
.popout-selector-bar .scan-combo-text { flex: 0 1 auto; text-align: left; }
.popout-selector-bar .scan-combo-arrow { margin-left: auto; }
.popout-selector-bar .mini-grid-info { flex: 0 0 auto; }
/* Last-update stamp: sits just right of the combo; the alert/copy group still
   pushes to the far edge via its own margin-left:auto. */
.popout-updated {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    opacity: 0.7;
    color: var(--page-text);
    white-space: nowrap;
    overflow: hidden;
}
.popout-updated a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
.popout-updated a:hover { opacity: 1; }
.popout-alert-btn {
    flex: 0 0 auto;
    margin-left: auto;   /* push the alert + copy group to the right */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 4px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    color: var(--page-text);
    white-space: nowrap;
}
.popout-alert-btn.alerts-on {
    color: #ffb300;
    border-color: rgba(255, 179, 0, 0.5);
}
.popout-alert-btn:hover { border-color: #ffb300; }
.popout-copy-btn {
    flex: 0 0 auto;
    cursor: pointer;
    padding: 4px 7px;
    opacity: 0.65;
    color: var(--page-text);
}
.popout-copy-btn:hover { opacity: 1; }
.popout-grid-container {
    flex: 1 1 auto;
    overflow: auto;
    min-height: 0;
    padding: 2px 8px;
}
.popout-loading {
    padding: 40px;
    text-align: center;
    opacity: 0.6;
}

/* Full-screen Turbo upsell shown when a free user opens a pop-out over the cap. */
.popout-upsell {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    min-height: 0;
}
.popout-upsell-card {
    max-width: 380px;
    text-align: center;
    color: var(--page-text);
    padding: 28px 26px;
    border-radius: 12px;
    background: rgba(255, 179, 0, 0.06);
    border: 1px solid rgba(255, 179, 0, 0.28);
}
.popout-upsell-icon {
    font-size: 34px;
    color: #ffb300;
    margin-bottom: 12px;
}
.popout-upsell-card h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
}
.popout-upsell-card p {
    font-size: 13.5px;
    line-height: 1.55;
    opacity: 0.85;
    margin: 0 0 20px;
}
.popout-upsell-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1400;
    background: #ffb300;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.05s ease;
}
.popout-upsell-btn:hover { background: #ffc233; }
.popout-upsell-btn:active { transform: translateY(1px); }

.chart-selection-text-windows {
    margin-left: 217px;
}

.chart-selection-button-region {
    width: 100%;
    clear: both;
    float: none;
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
}

.chart-selection-gray {
    color: var(--common) !important;
    border-color: var(--common) !important;
}

.chart-selection-green {
    color: var(--green);
    border-color: var(--green);
}

.chart-selection-green:hover {
    color: var(--green);
    background-color: var(--green);
    border-color: var(--green);
}

.chart-selection-green-selected {
    color: var(--common) !important;
    background-color: var(--green);
    border-color: var(--green);
}

.chart-settings-step {
    font-weight: bold;
    color: green;
    margin-left: 10px;
}

.chart-settings-step-complete {
    color: green;
    font-weight: bold;
    margin-left: 10px;
}

#auto-click-location {
    margin-top: 10px;
}

.chart-settings-step-description {
    margin-bottom: 15px;
    color: var(--common);
    margin-left: 25px;
}

#chart-settings-title {
    font-weight: bold;
    margin-bottom: 17px;
    color: var(--common);
}

#modal-button {
    float: right;
}

.intro-bullet {
    clear: both;
    padding: 3px;
}

.intro-headline {
    font-weight: bold;
    margin-top: 12px;
}

.indent {
    margin-left: 25px;
}

#intro-logo {
    float: right;
    height: 30px;
}

#intro-flag {
    clear: both;
    float: right;
    width: 94px;
    margin-right: 25px;
}

#intro-list {
    list-style-position: outside;
}

#intro-unflagged {
    float: right;
    clear: both;
    margin-right: 10px;
}

#intro-count {
    float: right;
    margin-right: 10px;
}

#tabs {
    clear: left;
    margin-top: 12px;
    float: left;
    margin-bottom: -6px;
}

#logo {
    position: absolute;
    height: 58px;
    left: 0px;
    top: 27px;
    background-color: none;
    padding: 5px;
    width: 135px;
    text-align: center;
    cursor: pointer;
    z-index: 2500;
}

#logo-image {
    height: 41px;
    padding-left: 8px;
    padding-top: 3px;
}

#logo-intro {
    height: 46px;
    left: 18px;
    top: 9px;
    background-color: none;
    padding: 10px;
    width: 136px;
    float: right;
    margin-bottom: 30px;
}

#boot-logo-light {
    height: 70px;
    margin-left: 11px;
}

#boot-logo-dark {
    height: 70px;
}

.side-menu-header {
    float: left;
    display: none;
}

#header-content {
    position: absolute;
    top: 17px;
    left: 527px;
    width: 314px;
    height: 14px;
    overflow: clip;
}

.windows-promo {
    float: left;
    color: var(--common);
    font-size: 12px;
}

#header {
    max-width: 600px;
    float: none;
}

#top-text {
    float: left;
    color: var(--white);
    margin-left: 2px;
    line-height: 16px;
    margin-top: 0px;
    flex-wrap: nowrap;
}

.watchlist-picker {
    margin-bottom: 5px;
    bhvn margin-left: 5px;
    margin-top: 5px;
    background-color: black;
    color: var(--long-text);
    font-size: 13px;
}

.styled-input {
    color: var(--long-text);
}

.screener-grid {
    margin: 0px;
    padding: 0px;
    margin-top: 36px;
}

.col-header-content {
    font-size: 11px;
    text-overflow: clip;
}

.col-title {
    text-align: center;
}

.col-title-text {
    overflow: clip !important;
}

.col-title-text {
    color: var(--common);
}

.main-region {
    margin-left: 3px;
    padding-top: 5px;
    margin-top: 103px;
    /* width: 97vw; */
    -webkit-user-select: none;
    -moz-user-select: none;
}

.grid-row {
    clear: both;
    overflow: auto;
    cursor: pointer;
    margin-left: 150px;
    width: 100vw;
}

.highlight {
    background-color: hsla(46, 79%, 66%, 0.12) !important;
}

#grid-expand {
    margin-left: 590px;
    margin-top: 4px;
    margin-bottom: -26px;
    background-color: black;
    cursor: pointer;
    border: 1px solid;
    color: var(--white) !important;
    border-color: var(--white) !important;
    height: 24px;
    overflow: auto;
    align-items: baseline;
    width: 24px;
    text-align: center;
    z-index: 10;
    position: relative;
}

#grid-expand:hover {
    background-color: var(--white);
    color: black;
}

#grid-collapse {
    position: fixed;
    cursor: pointer;
    border: 1px solid;
    float: left;
    margin-top: -8px;
    font-size: 13px;
    padding-left: 5px;
    padding-right: 5px;
    color: var(--white);
    border-color: var(--white);
    z-index: 10;
    background-color: black;
}

#grid-collapse:hover {
    background-color: var(--white);
    color: black;
}

#sector-icons {
    margin-top: 11px;
    margin-bottom: 35px;
}

.sector-intro {
    margin-bottom: 10px;
    width: 600px;
}

/* Default extra large modal sizing */
.modal-xl {
    max-width: 950px;
}

#sector-columns {
    clear: both;
    column-count: 2;
    column-gap: 0px;
    width: 612px;
}

.sector-region {
    margin: 5px;
    padding: 5px;
    border: 1px solid gray;
    width: 300px;
    margin-bottom: 5px;
    break-inside: avoid;
}

.sector-strength-container {
    width: 100%;
}

.sector-region-scroll {
    max-height: 200px;
    overflow-y: scroll;
}

.sector-region-long {
    background-color: rgba(0, 255, 0, .11);
}

.sector-region-short {
    background-color: rgba(255, 5, 5, 0.11);
}

.grid-row-sector-heading {
    font-weight: bold;
    border-bottom: 1px solid gray;
    max-width: 275px;
    position: sticky;
    padding-top: 10px;
    top: 0;
    position: -webkit-sticky;
    z-index: 2;
}

.grid-row-sector-heading {
    position: sticky;
    position: -webkit-sticky;
}

.grid-cell-sector-heading {
    position: absolute;
    margin-top: -14px;
    font-size: 16px;
    overflow: clip;
    height: 28px;
}

.grid-row-sector {
    margin: 3px;
    font-size: 12px;
    max-width: 270px;
}

.sector-heading {
    margin-left: -149px;
}

.grid-cell {
    float: left;
    color: var(--common);
    letter-spacing: -0.5px;
}

.grid-cell-sector {
    width: 160px;
}

.grid-cell-industry {
    width: 200px;
}

.grid-cell-indent {
    padding-left: 20px;
}

.grid-cell-val {
    width: 50px;
    text-align: right;
}

#grid-bounds-container {
    clear: both;
    height: 73vh;
}

.main-bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    /* top pinned 2026-07-30: with top:auto the fixed wrapper took its STATIC
       position, which the legacy html/body -10px margins shifted differently
       per environment (banner clipped for some users, whitespace for others).
       Every absolute header coordinate below is now viewport-true. */
    top: 0 !important;
    left: 0px;
    margin-left: 0px;
    padding-left: 0px;
    /* 2026-07-22: the page itself no longer scrolls — the menu (#menu-region) and grid
       (.ticker-container) scroll in their own containers. overflow:hidden so a wheel over
       the top menu area can't fall through and scroll the whole page. Full-screen views
       (Account/Alerts/filters) that can exceed the viewport carry their own overflow. */
    overflow: hidden;
}

.grid-header-region-custom {
    margin-top: 30px !important;
}

#grid-bounds {
    margin-left: 134px;
    white-space: nowrap;
    padding-left: 4px;
    height: 100vh !important;
}

#grid-bounds-max {
    margin-left: 91px;
    white-space: nowrap;
    background-color: black;
    overflow-x: scroll;
    padding-left: 47px;
    height: 100vh !important;
}

.grid-header-region {
    padding-top: 10px;
    position: sticky;
    top: -1px;
    display: flex;
    z-index: 2;
    margin-left: 144px;
    margin-bottom: 3px;
    margin-top: 5px;
}

::-webkit-scrollbar {
    width: 15px;
    height: 15px;
}

.tv-chart {
    width: 1000px;
    height: 700px;
}

.chart {
    background-color: orange;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:focus, .btn-primary.focus {
    box-shadow: none;
}

.btn-primary {
    color: #fff !important;
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

.btn-primary:hover {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

.btn-secondary {
    color: #374151 !important;
    background-color: #f3f4f6 !important;
    border-color: #d1d5db !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

.btn-secondary:hover {
    background-color: #e5e7eb !important;
    border-color: #9ca3af !important;
}

.btn-danger {
    color: #fff !important;
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}

.btn-danger:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

.button-hidden {
    display: none;
}

.button-visible {
    display: block;
}

.play-icon {
    float: right;
    margin-left: 6px;
}

#flip-buttons {
    display: flex;
    align-items: center;
}

.column-edit-button {
    margin-left: 2px;
    margin-top: 4px;
    margin-left: 3px;
}

.column-select {
    width: 100%;
    margin-bottom: 3px;
    margin-top: 3px !important;
    min-height: 39px;
    overflow: visible;
}

/* Column Select Tree Dropdown */
.column-select-dropdown {
    position: relative;
    width: 100%;
    overflow: visible;
}

.d-flex.align-items-center.column-select {
    overflow: visible;
}

.column-select-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.column-select-search {
    width: 100%;
    padding: 6px 28px 6px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 13px;
    color: #ddd;
    background: #1e1e2e;
    outline: none;
    transition: border-color 0.2s;
    cursor: pointer;
}

.column-select-search:focus {
    border-color: var(--action-yellow, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
    cursor: text;
}

.column-select-search.has-value::placeholder {
    color: #ccc;
    opacity: 1;
}

.column-select-search::placeholder {
    color: #888;
}

.column-select-chevron {
    position: absolute;
    right: 8px;
    font-size: 10px;
    color: #999;
    pointer-events: none;
}

.column-select-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1049;
}

.column-select-dropdown-menu {
    position: fixed;
    min-width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: #1e1e2e;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    z-index: 1050;
    margin-top: 2px;
}

.column-select-dropdown-menu .builder-field-option {
    color: #ddd;
}

.column-select-dropdown-menu .builder-field-option:hover {
    background: #2a2a3e;
    color: #fff;
}

.column-select-dropdown-menu .builder-field-option.selected {
    background: #333355;
    color: var(--action-yellow);
}

.column-select-dropdown-menu .builder-field-supergroup {
    background: #252535;
    color: #888;
}

.column-select-dropdown-menu .builder-field-subgroup {
    color: var(--action-yellow);
}

.column-select-highlight-long {
    background-color: var(--long-text);
}

.column-select-highlight-short {
    background-color: var(--short);
}

.column-select-highlight-flat {
    background-color: var(--flat);
}

.custom-select-long {
    background-color: var(--long) !important;
}

.custom-select-custom {
    background-color: var(--custom) !important;
    color: white !important;
}

.custom-select-short {
    background-color: var(--short) !important;
}

.custom-select-flat {
    background-color: var(--flat) !important;
}

.check-center {
    width: 100%;
    text-align: center;
}

.screener-flag {
    width: 20px;
    height: 20px;
}

.screener-flag {
    outline: none !important;
    border: none !important;
    text-decoration: none;
    box-shadow: none !important;
    -webkit-appearance: none;
}

.row-selected-sectpr {
    background-color: var(--sector);
    color: antiquewhite !important;
    font-weight: bold !important;
}

.row-selected-long {
    background-color: var(--long);
    color: var(--common-header) !important;
    font-weight: bold !important;
}

.row-selected-short {
    background-color: var(--short);
    color: var(--common-header) !important;
    font-weight: bold !important;
}

.row-selected-sector {
    background-color: var(--sector);
    color: var(--common-header) !important;
    font-weight: bold !important;
    border-color: white;
    border: 1px solid;
}

.row-selected-custom {
    background-color: var(--custom);
    color: var(--common-header) !important;
    font-weight: bold !important;
    border-color: white;
    border: 1px solid;
}

.row-selected-flat {
    background-color: var(--flat);
    color: var(--common-header) !important;
    font-weight: bold !important;
}

.add-flag {
    width: 20px;
    height: 20px;
    margin-top: -20px;
    outline: none !important;
    border: none !important;
    text-decoration: none;
    box-shadow: none !important;
    -webkit-appearance: none;
}

#flag-buttons {
    float: left;
    margin-top: 2px;
    margin-left: 0px;
}

.value-indicator {
    margin-right: 0px;
    float: left;
    margin-left: -14px;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

.age {
    font-size: 10px;
    padding-top: 3px;
    margin-right: 4px;
    width: 21px;
    padding-left: 4px;
    max-width: 21px;
    overflow: hidden;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

.trend-indicator {
    margin-left: -45px;
}

.price-pop-bell {
    margin-left: 7px;
}

.private-icon {
    margin-top: 2px;
    margin-right: 5px;
    position: relative;
    margin-bottom: -5px;
}

.news-alert-low {
    background-color: var(--action-yellow);
    vertical-align: middle;
    margin-bottom: -14px;
    height: 33px;
    color: var(--common);
}

.news-alert-high {
    background-color: var(--short);
    vertical-align: middle;
    margin-bottom: -14px;
    height: 33px;
    color: var(--common);
}

.action-button:hover {
    cursor: pointer !important;
    background-color: var(--white);
    color: black !important;
    border-color: black;
}

.price-pop-alert-row:hover {
    cursor: pointer;
    text-decoration: underline;
}

.price-pop-alert-row-Up {
    background-color: var(--long);
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    margin-bottom: -14px;
    color: var(--common);
    cursor: pointer;
}

.price-pop-alert-row-Down {
    background-color: var(--short);
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    margin-bottom: -14px;
    color: var(--common);
    cursor: pointer;
}

.price-pop-alert-row-None {
    background-color: var(--action-button);
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    margin-bottom: -14px;
    color: var(--common);
    cursor: pointer;
}

.price-pop-alert-row-Sector {
    background-color: var(--action-button);
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    margin-bottom: -14px;
    color: var(--common);
    cursor: pointer;
}

.news-alert-text {
    padding-top: 6px;
    padding-left: 10px;
    float: left;
    font-size: 14px;
    max-height: 33px;
    overflow: clip;
    color: var(--common-header);
}

.price-pop-text {
    padding-top: 6px;
    padding-left: 10px;
    float: left;
    color: white;
    font-size: 11px;
}

.price-pop-text:hover {
    cursor: pointer;
    text-decoration: underline;
}

.flag {
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    padding-top: 6px;
    padding-right: 0px;
    height: 15px;
    width: 15px;
}

.not-starred-long {
    color: gray;
    cursor: pointer;
}

.news-link {
    color: var(--common) !important;
}

.news-item {
    font-size: 12px;
    margin-bottom: 5px;
}

.pop-news-item {
    font-size: 13px;
    margin-bottom: 8px;
    margin-left: -10px;
}

.tippy-box {
    width: 300px !important;
    max-width: 1000px !important;
    z-index: 9999;
}

[id*="tippy"] {
    margin-left: 75px !important;
}

.tippy-arrow {
    visibility: hidden;
}

.tooltip-delay {
    font-size: 12px;
}

.tooltip-symbol-block {
    margin-left: 10px;
    margin-bottom: 10px;
}

.tooltip-appears-on-header {
    margin-left: 10px;
    margin-bottom: 3px;
}

.pop-appears-on-list {
    font-size: 13px;
    margin-bottom: 0px;
    margin-left: 10px;
}

.fundamentals {
    max-width: 300px !important;
    background-color: red;
}

.screener-grid-symbol-header {
    padding-left: 23px;
    width: 94px;
}

.screener-grid-age {
    width: 23px;
    text-overflow: clip;
    display: flex;
    margin-left: -23px;
    text-decoration: underline;
}

.screener-grid-signal {
    width: 35px;
    text-overflow: clip;
}

.screener-grid-volume {
    width: 48px;
    padding: 0px;
    color: var(--common);
    overflow: visible;
}

.screener-grid-avg-volume {
    width: 48px;
    padding: 0px;
    color: var(--common);
    overflow: visible;
}

.screener-grid-flag {
    text-overflow: clip;
    font-weight: bold;
    margin-left: -14px;
}

.flag-column {
    margin-left: 0px;
    margin-top: 0px;
    width: 20px;
}

.age-column {
    margin-left: 4px;
    margin-top: 0px;
    width: 30px;
}

.screener-grid-close {
    width: 55px;
    padding: 0px;
    color: var(--common);
    overflow: visible;
}

.weeklies {
    color: hsla(219, 79%, 57%, 1);
    font-weight: bold;
    margin-left: 0px;
    font-size: 11px;
    padding-top: 3px;
    margin-right: 5px;
    min-width: 11px;
}

.earnings {
    color: hsla(219, 79%, 57%, 1) !important;
    font-weight: bold;
    margin-left: 0px;
    font-size: 11px;
    padding-top: 3px;
    margin-left: -35px;
    margin-right: 0px;
    min-width: 11px;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

.earnings {
    margin-left: 0px;
    margin-left: -35px;
}

.earnings-display {
    background-color: yellow;
    font-weight: bold;
}

.earnings-box {
    font-weight: bold;
}

.earnings-loss {
    color: red !important;
}

.earnings-win {
    color: limegreen !important;
}

.screener-grid-sector {
    width: 75px;
    padding: 0px;
    color: var(--common);
    overflow: clip;
}

.screener-grid-sector-contents {
    width: 65px;
    padding: 0px;
    color: var(--common);
    overflow: clip;
    height: 20px;
    font-family: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
}

.screener-grid-change {
    width: 45px;
    padding: 0px;
    overflow: visible;
}

.screener-grid-atr {
    width: 50px;
    padding: 0px;
    overflow: visible;
}

.screener-grid-rsrw {
    width: 44px;
    padding: 0px;
}

.screener-grid-rvol {
    width: 45px;
    padding: 0px;
    color: var(--common);
}

.screener-grid-rrvol {
    width: 45px;
    max-width: 75px;
    padding: 0px;
}

.screener-grid-sma {
    width: 50px;
    padding: 0px;
    color: var(--common);
}

#watchlist > div.grid > table > thead > tr > th.screener-grid-rrvol > div > button > div.col-title-text {
    margin-left: 0px;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary {
    display: none;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

tradingview_dca51 {
    width: 912px;
    background-color: black;
}

.tradingview-widget-container {
    margin-left: -20px;
}

#ying-yang {
    color: white;
}

#loading-spinner {
    float: left;
    width: 10px;
    height: 10px;
    margin-top: 2px;
    margin-right: 5px;
}

#spinner-container {
    margin-left: 0px;
}

.spinner-color {
    color: var(--common) !important;
}

#loading {
    float: left;
    color: var(--common);
}

.filter-check-bold {
    font-weight: bold;
    color: var(--common);
    font-size:13px;
    margin-left: 6px;
}

.filter-check {
    color: var(--common) !important;
    font-size:12px;
    margin-left: 6px;
}

/* Override Blazorise purple checkbox color */

.filter-entry-row .form-check-input:checked,
.filter-region-content .form-check-input:checked {
    background-color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

.filter-entry-row .form-check-input:focus,
.filter-region-content .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25) !important;
}

.filter-save-long {
    color: white;
    background-color: var(--long) !important;
    border-color: var(--long) !important;
}

.filter-save-multiscan {
    background-color: #4d00d1 !important;
    border-color: #4d00d1 !important;
}

.icon-red {
    color: var(--short);
}

.icon-selected {
    color: antiquewhite !important;
}

.search-icon {
    /* 2026-07-22: absolute relative to the search box so it scrolls with the menu
       (was position:fixed, pinned to viewport). */
    padding-right: 10px;
    left: 116px;
    top: 8px;
    position: absolute !important;
    width: 20px;
    color: white !important;
}

.mini-grid-search-icon {
    margin-top: 10px !important;
    width: 20px;
    margin-left: 8px;
}

.mini-grid-search-icon:hover {
    cursor: pointer;
}

.search-icon:hover {
    cursor: pointer;
}

#search-results-clear {
    /* 2026-07-22: absolute relative to the search box (now position:relative) so it
       scrolls up with the menu instead of pinning to the viewport (was position:fixed). */
    position: absolute;
    left: 90px;
    top: 8px;
    color: var(--common);
}

.no-search-results {
    margin-top: 10px;
    font-size: 14px;
}

#search-results-clear:hover {
    cursor: pointer;
}

#grid-news {
    width: 649px;
    min-height: 317px;
    margin-left: 138px;
    top: 500px;
    position: sticky;
    z-index: 0;
    padding: 9px;
    margin-top: -10px;
}

.search-results-mini {
    margin-top: 23px !important;
}

#search-results-news {
    margin-top: 10px;
    color: var(--common);
}

#search-result-news-list {
    list-style-position: outside;
    margin-left: 10px;
}

#search-results-close:hover {
    cursor: pointer;
}

#results-heading {
    font-size: 19px;
    font-weight: bold;
    margin-left: 14px;
}

::selection {
    background-color: antiquewhite;
    color: black;
}

.filter-save-short {
    color: white;
    background-color: var(--short) !important;
    border-color: var(--short) !important;
}

.filter-save-flat {
    color: white;
    background-color: var(--flat) !important;
    border-color: var(--flat) !important;
}

.filter-save-sector {
    color: white;
    background-color: var(--sector) !important;
    border-color: var(--sector) !important;
}

.filter-heading-multiscan {
    font-weight: bold;
}

.filter-heading-long {
    color: var(--long) !important;
    font-weight: bold;
}

.filter-heading-short {
    color: var(--short) !important;
    font-weight: bold;
}

.filter-heading-special {
    color: var(--flat) !important;
    font-weight: bold;
}

.filter-heading-sector {
    color: var(--sector) !important;
    font-weight: bold;
}

#warning-bar {
    text-align: left;
    margin-left: 0px;
    line-height: 17px;
    font-size: 13px;
    padding-top: 1px;
    padding-left: 14px;
    height: 20px;
    color: black;
    background: rgb(255,168,9);
    min-width: 800px;
    cursor: pointer !important;
    position: relative;
    font-weight: bold;
}

/* Maintenance/warning variant: same quiet treatment as the blue bar --
   deep amber gradient, warm light text, dimmed triangle. Same 20px box.
   (The base #warning-bar rule's flat rgb(255,168,9) + black bold stays
   as fallback; this class wins for the styled render.) */
.warning-bar-orange {
    background: linear-gradient(180deg, #9a4d0b 0%, #7f3d06 100%) !important;
    color: #ffe3bd !important;
    border-bottom: 1px solid rgba(255, 200, 130, .3);
    font-weight: 500;
}
.warning-bar-orange .fa-exclamation-triangle { opacity: .75; font-size: 11px; color: #ffc266; }
.warning-bar-orange b { color: #ffd9a0; }

.warning-bar-blue {
    /* was flat rgb(56,132,255): loud. Deep indigo, quiet text, accent link. */
    background: linear-gradient(180deg, #2c3f8f 0%, #243370 100%) !important;
    color: #dbe4ff !important;
    border-bottom: 1px solid rgba(157, 184, 255, .25);
    font-weight: 500;
    clear: both;
}
.warning-bar-blue .fa-bullhorn { opacity: .7; font-size: 11px; }

.warning-bar-blue a {
    color: #a8c1ff !important;
    font-weight: 600;
    text-decoration-color: rgba(168, 193, 255, .45);
    text-underline-offset: 2px;
}

.warning-bar-dismiss {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.8;
}

.warning-bar-dismiss:hover {
    opacity: 1;
}

.warning-bar-close {
    cursor: pointer;
    font-size: 10px;
    float: right;
    padding-top: 3px;
    text-shadow: none;
    color: black;
}

/* Alert Settings Modal */
.alert-setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}
.alert-setting-desc {
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}
.alert-setting-sub {
    padding-left: 24px;
    border-bottom: none;
    padding-top: 0;
    margin-top: -8px;
}
.alert-toggle {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
    margin-left: 16px;
}
.alert-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}
.alert-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 24px;
    transition: background-color 0.25s ease;
}
.alert-toggle-slider::before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease;
}
.alert-toggle input:checked + .alert-toggle-slider {
    background-color: #4caf50;
}
.alert-toggle input:checked + .alert-toggle-slider::before {
    transform: translateX(20px);
}

/* Mobile: the modal can be wider than the viewport, so a right-aligned toggle/
   control ends up off-screen. Stack each row vertically — label on top, control
   left-aligned below — so the toggle/Connect/etc. is always visible. */
@media (max-width: 800px) {
    .alert-setting-row {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 8px;
    }
    .alert-setting-row > div:first-child {
        width: 100%;
        min-width: 0;
    }
}

/* Market Ticker Bar */
#market-ticker-bar {
    text-align: left;
    font-size: 12px;
    line-height: 1.5;
    padding: 2px 14px 4px 14px;
    width: 360px;
    cursor: pointer !important;
    left: 535px;
    top: 28px; /* was 29: rode up over the rail once the banner came down */
    z-index: 3000;
    position: absolute;
    overflow: hidden;
    height: 40px;
    transition: height 0.2s ease, box-shadow 0.2s ease;
}

#market-ticker-bar:hover {
    height: auto;
    min-height: 50px;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 3001;
}
#market-ticker-bar:hover .market-ticker-more {
    position: static;
    background: none;
    padding-left: 0;
    display: block;
    margin-top: 20px;
}

@media (max-width: 600px) {
    #market-ticker-bar {
        display: none;
    }
}

.market-ticker-bar {
    background: #f0f0f5;
    color: #222;
}

.market-ticker-bullish { border-left: 3px solid #00c853; }
.market-ticker-bearish { border-left: 3px solid #ff1744; }
.market-ticker-neutral { border-left: 3px solid #ffc107; }

.market-ticker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    margin-right: 6px;
}

.market-ticker-dot-pulse {
    animation: market-pulse 2s ease-in-out infinite;
}

.market-ticker-bullish .market-ticker-dot,
.market-ticker-dot-bullish { background-color: #00c853; }
.market-ticker-bearish .market-ticker-dot,
.market-ticker-dot-bearish { background-color: #ff1744; }
.market-ticker-neutral .market-ticker-dot,
.market-ticker-dot-neutral { background-color: #ffc107; }

@keyframes market-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

@keyframes market-slide-in {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.market-ticker-slide {
    animation: market-slide-in 0.5s ease-out;
}

.market-ticker-time {
    font-size: 10px;
    opacity: 0.7;
    white-space: nowrap;
    flex-shrink: 0;
}

.market-ticker-label {
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
}

.market-ticker-headline {
    font-weight: bold;
    color: #111;
}

.market-ticker-message {
    flex-grow: 1;
}

.market-ticker-more {
    color: #1a73e8;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    position: absolute;
    right: 8px;
    top: 20px;
    background: #f0f0f5;
    padding-left: 6px;
}

.market-ticker-more:hover {
    color: #1557b0;
}

.market-ticker-close {
    position: absolute;
    top: 2px;
    right: 4px;
    cursor: pointer;
    font-size: 14px;
    opacity: 0.5;
    line-height: 1;
    padding: 0 3px;
}

.market-ticker-close:hover {
    opacity: 1;
}

/* Market Update Modal */
.market-update-item {
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    border-left: 3px solid #666;
    background: rgba(255,255,255,0.05);
}

.market-update-bullish { border-left-color: #00c853; }
.market-update-bearish { border-left-color: #ff1744; }
.market-update-neutral { border-left-color: #ffc107; }

.market-update-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11pt;
    opacity: 0.7;
}

.market-update-direction {
    font-weight: bold;
    margin-left: auto;
}

.market-update-bullish .market-update-direction { color: #00c853; }
.market-update-bearish .market-update-direction { color: #ff1744; }
.market-update-neutral .market-update-direction { color: #ffc107; }

.market-update-message {
    font-size: 11pt;
    line-height: 1.4;
}

.market-update-time {
    font-size: 11pt;
}

.market-update-latest {
    background: rgba(0,0,0,0.06);
    outline: 2px solid #222;
    outline-offset: -2px;
    border-left-width: 5px;
    border-radius: 6px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.install-link {
    color: white !important;
}

#data-error {
    color: red;
    float: left;
    margin-left: 5px;
}

.spin-label {
    color: var(--long);
    font-weight: 500;
}

.center {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
}

.error-message {
    background-color: darkred;
    color: white;
    padding: 10px;
    border-radius: 5px;
    display: inline-block;
    width: 100%;
}

.error-button {
    float: left;
}

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2000;
    cursor: pointer;
}

.overlay-visible {
    display: block;
}

#long-overlay {
    width: 892px;
    margin-top: 35px;
    margin-left: 14px;
}

#overlay-close-button {
    top: 98px;
    position: fixed;
    left: 799px;
    background-color: #4472c4 !important;
}

#overlay-windows-link {
    top: 526px;
    position: fixed;
    left: 126px;
    width: 248px;
    height: 20px;
    z-index: 3000;
}

.spin-label-boot {
    color: #16c60c;
    font-weight: bold;
}

.spin-label-boot-loading {
    color: #16c60c !important;
    font-weight: bold;
}

.spin-label-boot:after {
    content: var(--blazor-load-percentage-text);
}

.private-group-text {
    padding-bottom: 10px;
    font-weight: 700;
}

#password {
    width: 100px;
}

#private-group {
    width: 500px;
    height: 500px;
    margin-left: 150px;
    margin-top: 20px;
    color: var(--common);
}

#button-chart-targets {
    float: none;
    width: 140px;
    margin-left: 15px;
    margin-bottom: 10px;
}

#button-unlock {
    float: right;
    margin-top: 2px;
}

.private-password {
    width: 236px;
}

#daily-void-symbol {
    width: 1275px !important;
    min-width: 1275px !important;
    overflow: hidden;
    text-overflow: clip;
    padding-top: 6px;
}

#daily-void-input {
    width: 70px;
    margin-left: 5px;
    float: left !important;
    height: 25px;
    margin-right: 2px;
    font-weight: 700;
    background-color: var(--page-background);
    color: var(--common);
}

.void-spacer {
    width: 142px;
}

.void-last-price {
    float: left;
    margin-right: 10px;
    width: 45px;
}

.void-span {
    float: left;
    margin-right: 10px;
    width: 110px;
}

.void-size {
    float: left;
    margin-right: 10px;
    width: 30px;
}

.void-size .grid-header {
    margin-left: -10px;
}

.void-level {
    float: left;
    margin-right: 10px;
    width: 130px;
}

#button-daily-void {
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    padding-top: 2px;
}

#button-daily-void-dark-mode {
    float: left;
    margin-top: 0px;
    margin-left: 5px;
    min-height: 25px;
    display: flow-root; /* contain the floated text so a wrapped 2nd line grows the box instead of overflowing below it (Safari) */
    vertical-align: middle;
    padding-top: 2px;
}

.stockchartloader {
    border: 6px solid var(--common);
    border-top: 6px solid var(--common);
    width: 40px;
    height: 40px;
    position: absolute;
    top: 46%;
    left: 46%;
    border-radius: 50%;
    -webkit-animation: loader 2s linear infinite;
    animation: loader 2s linear infinite;
}

.void-news {
    margin-top: -3px !important;
    cursor: pointer;
    margin-left: 0 !important;
    margin-right: 5px;
}

.void-select {
    float: left;
    margin-top: -7px;
}

.void-select-symbol {
    float: left;
    margin-top: -7px;
}

.void-direction-button {
    margin: 0px;
}

.daily-void-heading {
    float: left;
    margin-left: 5px;
    font-size: 18px !important;
    font-weight: 900;
    margin-right: 10px;
}

.daily-void-label {
    float: left;
    margin-left: 10px;
    font-size: 14px !important;
    font-weight: 700;
    padding-top: 4px;
    margin-right: 10px;
}

.void-flag-ticker {
    margin-top: 0px;
    margin-left: 5px;
    position: fixed;
    top: 77px;
    z-index: 3000;
    left: 220px;
}

.void-news-region {
    margin-left: -28px !important;
    margin-right: 0px;
    float: left;
}

#void-logo {
    left: 0px;
    margin-top: -4px !important;
    background-color: none;
    width: 100px;
    text-align: center;
    float: left;
}

#void-logo-image {
    height: 30px;
}

#fresh-void-results {
    color: yellow;
    font-weight: 700;
}

.void-starred {
    color: orange;
}

#StockChart_ChartTitle {
    font-weight: 700;
    font-size: 18px;
}

#StockChart_stockChart_Title {
    height: 32px;
}

#sub-filtered-out {
    font-weight: 700;
    font-size: 14px;
    color: white !important;
    background-color: rgba(255, 66, 76, 1.0);
    padding: 5px;
}

#sub-show-results {
    font-weight: 400;
    color: var(--common) !important;
    padding-left: 5px;
    padding-top: 5px;
}

#sub-show-results a {
    font-weight: 400;
    color: var(--common) !important;
}

.subscribe-link {
    color: white !important;
}

#donate-text-filtered {
    text-align: left;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: white !important;
    cursor: pointer;
    margin-left: 150px;
    margin-top: 10px;
}

#sub-filter-patreon {
    float: right;
    position: relative;
    margin-right: 10px;
    margin-top: 8px;
}

#minute-chart-container {
    margin-left: -10px;
    margin-top: 5px;
}

#daily-chart-container {
    margin-left: -10px;
    margin-top: 5px;
}

.lds-ellipsis {
    display: inline-block;
    position: fixed;
    top: 50px;
    left: 20px;
    width: 80px;
    height: 80px;
    z-index: 5002;
}

.lds-ellipsis div {
    position: absolute;
    top: 33px;
    width: 13px;
    height: 13px;
    z-index: 5002;
    border-radius: 50%;
    background: var(--long);
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.lds-ellipsis div:nth-child(1) {
    left: 8px;
    animation: lds-ellipsis1 0.6s infinite;
}

.lds-ellipsis div:nth-child(2) {
    left: 8px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(3) {
    left: 32px;
    animation: lds-ellipsis2 0.6s infinite;
}

.lds-ellipsis div:nth-child(4) {
    left: 56px;
    animation: lds-ellipsis3 0.6s infinite;
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }
}

.select-long {
    background-color: rgba(0, 255, 0, 0.3);
}

.select-short {
    background-color: rgba(255, 5, 5, 0.3);
}

.chart-not-found {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 700;
    background-color: var(--page-background);
    position: absolute;
    top: 10px;
    width: 100%;
    height: 500px;
    z-index: 5000;
    padding-top: 9px;
}

#chart-spinner-background {
    margin-left: 8px;
    font-size: 16px;
    font-weight: 700;
    z-index: 5001;
    background-color: var(--page-background);
    position: absolute;
    top: 10px;
    width: 100%;
    height: 500px;
    padding-top: 9px;
}

#big-grid-container {
    margin-left: 145px;
    margin-top: 15px;
    min-width: 200px;
    /* Definite viewport-based height (height:100% never resolved — ancestors aren't bounded),
       so the grid fills the panel AND .ticker-container inside can scroll when a scan has more
       rows than fit. The page (.main-bg) no longer scrolls, so this must. Matches the -150 the
       app uses for _gridHeight. (2026-07-23) */
    height: calc(100vh - 150px);
}

#mini-grid-container {
    margin-left: 5px;
    margin-top: 15px;
    width: 100vw;
    max-width: 878px;
    min-width: 200px;
}

/* 2026-07-22: multi-scan wide mode — drop the 878px cap; the exact width is set inline
   from _gridWidth (full window minus a reserved chart panel when charts are on). */
#mini-grid-container.mini-grid-wide {
    max-width: none;
    /* The page (.main-bg) doesn't scroll, so a tall multi-scan grid (more panels than fit the
       viewport) needs its own vertical scroll — otherwise the lower panels are clipped. Thin
       scrollbar to match the rest of the app. (2026-07-23) */
    max-height: calc(100vh - 148px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}
#mini-grid-container.mini-grid-wide::-webkit-scrollbar { width: 6px; }
#mini-grid-container.mini-grid-wide::-webkit-scrollbar-track { background: transparent; }
#mini-grid-container.mini-grid-wide::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 3px; }
#mini-grid-container.mini-grid-wide:hover::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.55); }

/* Multi-scan layout settings — gear button + popover (shown when charts are off). */
/* Inline in the toolbar (it's an .action-button) — just an anchor for the popover. */
.multiscan-settings-wrap {
    position: relative;
    display: inline-block;
}
.multiscan-gear.mcs-gear-active { outline: 1px solid #4f8ef7; }
.multiscan-settings-popover {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 1001;                 /* above the grid panels and the backdrop */
    background: var(--page-background);
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 6px;
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}
.mcs-popover-row { display: flex; align-items: center; gap: 8px; }
.mcs-popover-hint { margin-top: 8px; font-size: 11px; opacity: 0.6; color: var(--page-text); }

/* Multi-scan layout modal rows. */
.mcs-modal-row { display: flex; align-items: center; gap: 12px; }
.mcs-modal-label { min-width: 70px; font-weight: 600; }
.mcs-modal-hint { margin-top: 12px; font-size: 12px; opacity: 0.7; line-height: 1.5; }

/* Clarify layout-columns vs data-columns confusion, with a jump link to the data
   column customizer. Only rendered inside the multi-scan Edit Layout modal. */
.mcs-modal-note {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(79, 142, 247, 0.10);
    border: 1px solid rgba(79, 142, 247, 0.30);
    font-size: 12px;
    line-height: 1.5;
}
.mcs-modal-note > i { color: #4f8ef7; margin-top: 2px; }
.mcs-jump-link {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #4f8ef7;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.mcs-jump-link:hover { text-decoration: underline; }
.mcs-jump-link i { font-size: 10px; margin-left: 3px; }
.mcs-note-close {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    padding: 0 2px;
    margin-left: auto;
    align-self: flex-start;
    font-size: 13px;
    line-height: 1;
}
.mcs-note-close:hover { opacity: 1; }

/* Footer: destructive reset kept small + far from the primary Done button so it
   isn't mistaken for a save/confirm action. */
.mcs-modal-footer { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.mcs-reset-link {
    background: none;
    border: none;
    cursor: pointer;
    color: #c0392b;
    opacity: 0.65;
    font-size: 12px;
    padding: 4px 6px;
}
.mcs-reset-link:hover { opacity: 1; text-decoration: underline; }
.mcs-reset-link i { margin-right: 4px; font-size: 11px; }

/* Multi-scan column selector (Auto / 1-6). */
.multiscan-col-select {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.multiscan-col-select .mcs-label {
    color: var(--page-text);
    opacity: 0.7;
    margin-right: 4px;
}
.multiscan-col-select .mcs-btn {
    min-width: 34px;
    padding: 2px 8px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    border-radius: 4px;
    background: transparent;
    /* Inherit the modal's (light) text color — var(--page-text) resolved dark here,
       leaving the unselected On/Off + column buttons unreadable on the dark modal. */
    color: inherit;
    cursor: pointer;
    line-height: 1.4;
}
.multiscan-col-select .mcs-btn:hover {
    border-color: #4f8ef7;
}
.multiscan-col-select .mcs-btn.mcs-active {
    background: #4f8ef7;
    border-color: #4f8ef7;
    color: #fff;
}
/* Turbo-gated column buttons (4-6 for free users): gold tint + dimmed. */
.multiscan-col-select .mcs-btn.mcs-btn-turbo {
    border-color: rgba(255, 179, 0, 0.5);
    color: #ffb300;
    opacity: 0.75;
}
.multiscan-col-select .mcs-btn.mcs-btn-turbo:hover {
    border-color: #ffb300;
    opacity: 1;
}

/* Friendly Turbo note in the Add Scan modal when a free user hits the scan limit. */
.scan-limit-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
    background: rgba(255, 179, 0, 0.10);
    border: 1px solid rgba(255, 179, 0, 0.30);
    font-size: 13px;
    line-height: 1.5;
}
.scan-limit-note > i { color: #ffb300; margin-top: 2px; }

/* One-time "Expand columns" what's-new popup. */
.mcs-intro {
    text-align: center;
    padding: 8px 14px 6px;
    color: var(--page-text);
}
.mcs-intro-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: #4f8ef7;
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.mcs-intro-cols {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    height: 46px;
    margin-bottom: 16px;
}
.mcs-intro-cols span {
    width: 26px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #6ba4ff, #4f8ef7);
    transform-origin: bottom;
    animation: mcs-intro-grow 0.5s ease-out both;
}
.mcs-intro-cols span:nth-child(1) { height: 60%; animation-delay: 0.00s; }
.mcs-intro-cols span:nth-child(2) { height: 100%; animation-delay: 0.08s; }
.mcs-intro-cols span:nth-child(3) { height: 75%; animation-delay: 0.16s; }
.mcs-intro-cols span:nth-child(4) { height: 88%; animation-delay: 0.24s; }
@keyframes mcs-intro-grow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .mcs-intro-cols span { animation: none; }
}
.mcs-intro-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px;
}
.mcs-intro-text {
    font-size: 13.5px;
    line-height: 1.55;
    opacity: 0.85;
    max-width: 340px;
    margin: 0 auto 20px;
}
.mcs-intro-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.mcs-intro-try {
    min-width: 150px;
    padding: 9px 20px;
    border: none;
    border-radius: 6px;
    background: #4f8ef7;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.mcs-intro-try:hover { background: #3d7de8; }
.mcs-intro-try i { margin-left: 6px; font-size: 12px; }
.mcs-intro-dismiss {
    border: none;
    background: transparent;
    color: var(--page-text);
    opacity: 0.6;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}
.mcs-intro-dismiss:hover { opacity: 0.9; }

.mini-grid {
    padding: 5px;
    overflow-x: clip;
    text-overflow: clip;
    height: 95%;
    /* overflow-y: scroll; */
}

.mini-grid-full {
    padding: 5px;
    height: 100%;
}

.mini-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    margin: -5px -5px 0 -5px;
    padding: 0 5px 0 2px;
    border-radius: 4px 4px 0 0;
}

.mini-grid-header-icons {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
}

.mini-grid-title {
    font-weight: bold;
    cursor: move;
    color: white;
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    height: 100%;
}

.mini-grid-row {
    clear: both;
    overflow: hidden;
    text-overflow: clip;
    cursor: pointer;
    margin-left: 0px;
    width: 100%;
    height: 20px;
}

.mini-grid-row:hover {
    outline: 2px solid gray;
}

.mini-grid-row-small {
    /* width: 1500px !important; */
}

.mini-grid-row-selected-long {
    outline: 2px solid var(--long);
}

.mini-grid-row-selected-sector {
    outline: 1px solid var(--sector);
}

.mini-grid-row-selected-short {
    outline: 1px solid var(--short);
}

.mini-grid-header-region {
    top: -1px;
    display: flex;
    z-index: 2;
    margin-bottom: 3px;
    padding-left: 1px;
    min-width: 550px;
    /* width: 1500px !important; */
}

.mini-grid-heading-text-long {
    background: rgb(0,134,0);
    background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%);
}

.mini-grid-heading-text-short {
    background: rgb(178,5,5);
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
}

.mini-grid-heading-text-sector {
    color: antiquewhite !important;
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(255,255,255,1) 99%);
}

.mini-grid-heading-text-sector {
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(255,255,255,1) 99%);
}

.mini-grid-settings {
    color: white;
    cursor: pointer !important;
    text-shadow: 0 0 3px #000000;
    padding: 4px 2px 4px 3px;
}

.mini-grid-info {
    cursor: pointer;
    margin-left: 6px;
    flex-shrink: 0;
}

#multi-scan-intro {
    padding-top: 1px;
    margin-left: 415px;
    color: var(--common);
}

#mini-private-group {
    width: 100%;
    height: 100%;
    margin-left: 10px;
    margin-top: 20px;
    color: var(--common);
}

.action-button-add-multi-scan {
    background-color: hsla(262, 100%, 41%, .7) !important;
    color: white !important;
    float: right;
    height: 27px;
    border-color: hsla(262, 100%, 41%, .7) !important;
    padding-top: 5px;
    color: white;
    font-size: 11px;
    text-align: center;
}

.action-button-add-multi-scan {
    color: white !important;
    color: white;
}

.action-button-add-multi-scan:hover {
    background-color: white !important;
    color: black !important;
}

.warning-bar-mini-grid {
    margin-left: 2px !important;
    width: 868px !important;
}

.filtered-mini-grid {
    margin-left: 5px;
    /* Was -9px which crammed the filter line up against the toolbar.
       Positive value gives breathing room above the "Filtering all scans"
       header in the multi-scan view. */
    margin-top: 8px;
}

/* 2026-07-22: multi-scan — let the "Filtering all scans" summary use the full toolbar
   width (out to the Discord button edge) instead of cramming into ~490px and wrapping.
   Right edge lines up with the Discord button; the Edit/Explain controls pin flush right
   and the summary text fills the space up to them. */
#filtered.filtered-mini-grid {
    width: 888px;
    max-width: 888px;
}
#filtered.filtered-mini-grid #filtered-out-criteria {
    position: relative;
}
#filtered.filtered-mini-grid .funnel-controls {
    right: 4px;             /* Explain Results flush with the Discord button's right edge */
}
/* Override the single-scan padding (which reserves ~460px and crammed the text) so the
   summary fills the width up to just before the far-right controls (~190px cluster). */
#filtered.filtered-mini-grid #filtered-out-criteria .filter-summary-content {
    padding-right: 190px;
}

.mini-grid-select {
    font-size: 10px !important;
    width: 180px !important;
    float: none;
    height: 18px !important;
    padding: 0px !important;
    padding-left: 5px !important;
}

.mini-grid-select-container {
    margin: 0;
    padding: 3px 0 0 0;
    height: 20px;
    line-height: 20px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

/* Scan Combo Dropdown with Tabs */
.scan-combo-container {
    display: inline-flex;
    align-items: center;
    height: 26px;
    vertical-align: middle;
    margin-top: 1px;
    margin-left: 2px;
}

.scan-combo-dropdown {
    position: relative;
    display: flex !important;
    align-items: center !important;
    height: 100%;
}

.scan-combo-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 6px;
    height: 22px !important;
    min-width: 120px;
    max-width: 220px;
    padding: 0 8px !important;
    margin: 0 !important;
    font-size: 11px;
    font-weight: bold;
    line-height: 1 !important;
    color: white !important;
    background-color: rgba(40, 40, 60, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 3px;
    cursor: pointer;
    vertical-align: middle;
    box-sizing: border-box;
}

.scan-combo-toggle:hover {
    background-color: rgba(60, 60, 90, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.scan-combo-toggle.show,
.scan-combo-toggle[aria-expanded="true"] {
    height: 22px !important;
    padding: 0 8px !important;
    line-height: 1 !important;
}

.scan-combo-toggle::after {
    display: none !important; /* Hide default Blazorise arrow */
}

.scan-combo-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scan-combo-arrow {
    font-size: 8px;
    opacity: 0.8;
}

.scan-combo-menu {
    min-width: 280px !important;
    max-width: 320px !important;
    max-height: 800px !important;
    padding: 0 !important;
    background-color: #1a1a2e !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden;
}

.scan-combo-search {
    padding: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scan-combo-search-input {
    width: 100%;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    outline: none;
}

.scan-combo-search-input:focus {
    border-color: rgba(100, 150, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.15);
}

.scan-combo-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.scan-combo-tabs {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scan-combo-tab {
    flex: 1;
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

.scan-combo-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background-color: rgba(255, 255, 255, 0.05);
}

.scan-combo-tab.active {
    color: white;
    border-bottom-color: var(--long);
}

.scan-combo-tab:last-child.active {
    border-bottom-color: var(--short);
}

.scan-combo-tab-count {
    font-size: 10px;
    font-weight: normal;
    opacity: 0.7;
    margin-left: 4px;
}

.scan-combo-list {
    max-height: 600px;
    overflow-y: auto;
    padding: 4px 0;
}

.scan-combo-list::-webkit-scrollbar {
    width: 12px;
}

.scan-combo-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.scan-combo-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.scan-combo-section-header,
.scan-combo-category-header {
    padding: 8px 12px 4px;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scan-combo-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.scan-combo-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.scan-combo-item.selected {
    background-color: rgba(100, 150, 255, 0.2);
    color: white;
}

.scan-combo-item-icon {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.scan-combo-item-icon.featured {
    color: #ffd700;
}

.scan-combo-item-icon.private {
    font-size: 10px;
}

.scan-combo-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scan-combo-item-count {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

.scan-combo-empty {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

/* Loading state for grid panels */
.mini-grid.loading {
    position: relative;
}

.mini-grid.loading .ticker-container {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.mini-grid-loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
}

.mini-grid-loading-spinner::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.long-menu-visible {
    display: block;
}

#long-menu-bg {
    padding: 10px;
    padding-top: 0px;
}

#long-menu {
    display: none;
    height: 85vh;
    max-width: 800px;
    min-width: 560px;
    overflow-y: scroll;
    overflow-x: clip;
    z-index: 1000;
    position: absolute;
    left: 138px;
    top: 108px;
    background-color: white;
    box-shadow: rgba(0,130,0,0.25) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--long);
    animation: fadeIn .25s;
}

#long-menu:hover {
    display: block;
}

#short-menu-bg {
    padding: 10px;
    padding-top: 0px;
}

#short-menu {
    display: none;
    height: 85vh;
    max-width: 800px;
    min-width: 560px;
    overflow-y: scroll;
    overflow-x: clip;
    z-index: 1000;
    position: absolute;
    left: 284px;
    top: 108px;
    background-color: white;
    box-shadow: rgba(178, 5, 5, .25) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--short);
    animation: fadeIn .25s;
}

#short-menu:hover {
    display: block;
}

#sectort-menu-bg {
    padding: 10px;
    padding-top: 0px;
}

#sector-menu {
    display: none;
    height: 348px;
    max-width: 800px;
    min-width: 307px;
    z-index: 1000;
    position: absolute;
    left: 458px;
    top: 108px;
    background-color: white;
    box-shadow: rgba(26,91,81,.25) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--sector);
    animation: fadeIn .25s;
}

#sector-menu:hover {
    display: block;
}

#alerts-menu {
    display: none;
    width: 286px;
    z-index: 1000;
    position: absolute;
    left: 530px;
    top: 108px;
    background-color: white;
    box-shadow: rgba(255,168,9,.35) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--sector);
    animation: fadeIn .25s;
    max-height: 90vh;
    overflow-y: auto;
}

#alerts-menu {
    max-width: 800px;
    min-width: 183px;
}

#alerts:hover {
    display: block;
}

#settings-menu {
    display: none;
    height: auto;
    max-width: 800px;
    min-width: 176px;
    z-index: 1000;
    position: absolute;
    left: 601px;
    top: 108px;
    background-color: white;
    box-shadow: rgb(76, 82, 97, .35) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--sector);
    animation: fadeIn .25s;
}

#settings-menu:hover {
    display: block;
}

/* Settings menu is no longer made responsive at mid/small viewports — the
   full-width treatment rendered oddly. It now always uses the desktop dropdown
   positioning above. (The Settings entry is already hidden from the mobile menu.)

@media only screen and (max-width: 768px) {
    #settings-menu {
        left: 10px;
        top: 60px;
        right: 10px;
        min-width: unset;
        max-width: unset;
        width: calc(100% - 20px);
        z-index: 2000;
    }
}
*/

#account-menu {
    display: none;
    height: 102px;
    max-width: 800px;
    min-width: 167px;
    z-index: 1000;
    position: absolute;
    left: 685px;
    top: 109px;
    background-color: white;
    box-shadow: rgb(76, 82, 97, .35) 0px 10px 40px;
    border: 1px solid;
    border-color: var(--sector);
    animation: fadeIn .25s;
}

.top-menu-row {
    border-bottom: 1px solid;
    border-color: rgba(183, 189, 183, 0.5);
    padding: 2px;
    cursor: pointer;
    min-height: 23px;
    font-size: 13px;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.top-menu-row-long:hover .top-menu-heading {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-long:hover .top-menu-title-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-long:hover .top-menu-label-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-long:hover {
    color: white !important;
    background: rgb(0,134,0);
    background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%);
}

.top-menu-row-long:hover {
    background: rgb(0,134,0);
    background: linear-gradient(90deg, rgba(0,134,0,1) 0%, rgba(0,134,0,0.21069677871148462) 97%);
}

.top-menu-row-short:hover .top-menu-heading {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-short:hover .top-menu-title-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-short:hover .top-menu-label-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-short:hover {
    color: white !important;
    background: rgb(217,4,4);
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-short:hover {
    background: rgb(217,4,4);
    background: linear-gradient(90deg, rgba(217,4,4,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-sector:hover .top-menu-title-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-sector:hover .top-menu-label-disabled {
    background: none !important;
    color: white;
    cursor: initial;
}

.top-menu-row-sector:hover {
    color: white !important;
    background: rgb(26,91,81);
    background: linear-gradient(90deg, rgba(26,91,81,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-alerts:hover {
    color: white !important;
    background: rgb(255,168,9);
    background: linear-gradient(90deg, rgba(255,168,9,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-alerts:hover {
    background: rgb(255,168,9);
    background: linear-gradient(90deg, rgba(255,168,9,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-settings:hover {
    color: white !important;
    background: rgb(76,82,97);
    background: linear-gradient(90deg, rgba(76,82,97,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-settings:hover {
    background: rgb(76,82,97);
    background: linear-gradient(90deg, rgba(76,82,97,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-account:hover {
    color: white !important;
    background: hsla(116, 76%, 44%,1);
    background: linear-gradient(90deg, hsla(116, 76%, 44%,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-row-account:hover {
    background: hsla(116, 76%, 44%,1);
    background: linear-gradient(90deg, hsla(116, 76%, 44%,1) 0%, rgba(0,0,0,0) 100%);
}

.top-menu-heading {
    font-weight: bold;
    font-size: 13px;
    /*margin-left: 0px !important;*/
    margin-top: 4px;
    padding-left: 10px;
}

.top-menu-heading-long {
    color: white;
    background: linear-gradient(90deg, rgb(0, 134, 0) 0%, rgba(0, 134, 0, 0.21) 97%);
    font-weight: 900;
}

.top-menu-heading-short {
    color: white;
    background: linear-gradient(90deg, rgb(217, 4, 4) 0%, rgba(0, 0, 0, 0) 100%);
    font-weight: 900;
}

.top-menu-heading-sector {
    color: var(--short);
}

.top-menu-title {
    width: 153px;
    overflow: clip;
    float: left;
    margin-left: 10px;
    font-weight: 500;
}

.top-menu-title-disabled {
    color: lightgray !important;
}

.top-menu-label {
    width: 350px;
    text-overflow: clip;
    overflow: hidden;
    float: right;
}

.top-menu-label-sector {
    width: 100px;
}

.top-menu-label-disabled {
    color: lightgray !important;
}

.patreon-logo-landing-dark {
    display: none;
    width: 120px;
    margin-left: 3px;
}

.patreon-logo-landing-light {
    display: none;
    width: 120px;
    margin-left: 3px;
    margin-top: 0px;
}

.landing-features-columns {
    width: 650px;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
}

.brick {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 300px;
    margin: 0 auto;
}

.masonry {
    --masonry-gap: 16px; /* space between bricks */
    --masonry-brick-width: 325px;
    display: flex; /* flexbox masonry */
    flex-wrap: wrap;
    gap: var(--masonry-gap);
    justify-content: center; /* center as they wrap */
    align-items: flex-start;
    text-align: center;
    margin-left: 0; /* no negative offset needed */
}

.masonry > * {
    break-inside: avoid;
    margin-bottom: var(--masonry-gap);
}

.masonry > * {
    margin-bottom: initial;
}

.masonry > * {
    margin-bottom: var(--masonry-gap);
}

@supports(grid-template-rows: masonry) {
    .masonry {
        display: grid;
        gap: var(--masonry-gap);
        grid-template-rows: masonry;
        grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
        align-tracks: stretch;
    }
}




#loading-long-overlay {
    width: 892px;
    margin-top: 35px;
    margin-left: 14px;
}

#loading-overlay-close-button {
    top: 98px;
    position: fixed;
    left: 799px;
    background-color: #4472c4 !important;
}

#loading-overlay-windows-link {
    top: 526px;
    position: fixed;
    left: 126px;
    width: 248px;
    height: 20px;
    z-index: 3000;
}

#loading-watchlist {
    float: left;
    margin-left: 5px;
    margin-top: -20px;
    min-width: 758px;
}

#loading-logo {
    position: absolute;
    height: 58px;
    left: 0px;
    top: 24px;
    background-color: none;
    padding: 5px;
    width: 132px;
    text-align: center;
}

#loading-logo-image {
    height: 47px;
}

#loading-standard-region {
    float: left;
    margin-bottom: 10px;
    padding: 0px;
    margin-top: -12px;
    width: 600px;
    overflow: hidden;
}

#loading-header-text {
    color: var(--common);
    float: left;
    position: absolute;
    margin-left: 140px;
    width: 350px;
    top: 32px;
    font-size: 11px;
    height: 41px;
    vertical-align: middle;
    line-height: 19px;
}

#loading-header-center-text {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

#loading-whats-new {
    position: absolute;
    left: 354px;
    top: 3px;
    font-size: 10px !important;
    width: 86px;
}

#loading-updated {
    color: var(--common);
    font-style: italic;
    font-size: 11px;
    z-index: 10;
    margin-left: 4px;
    margin-top: 5px;
    position: absolute;
    left: 423px;
    top: 51px;
    text-align: right;
    width: 140px;
}

#loading-sectors {
    position: absolute;
    top: 56px;
    left: 564px;
    font-size: 8px;
    border: none;
    height: 60px;
    width: 300px;
}

#loading-tab-sector-top-row {
    height: 25px;
    margin-bottom: 3px;
    margin-left: 11px;
    width: 300px;
}

#loading-tab-sector-bottom-row {
    height: 25px;
    position: absolute;
    width: 300px;
    margin-left: 11px;
}

#loading-top-menu {
    position: absolute;
    top: 84px;
    margin-left: 0px;
    width: 580px;
}

#loading-tab-home {
    color: white;
    border-color: hsla(262, 100%, 41%, 1);
    width: 132px;
    background-color: hsla(262, 100%, 41%, .8);
    font-weight: 500 !important;
    font-size: 13px;
}

#loading-tab-long {
    color: white;
    width: 144px;
    background-color: hsla(120, 100%, 26%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

#loading-tab-short {
    color: white;
    width: 144px;
    background-color: hsla(0, 100%, 52%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
    margin-left: 0px;
    margin-top: 0px;
}

#loading-tab-sector {
    color: white;
    width: 142px;
    background-color: hsla(170, 56%, 23%, .7);
    font-weight: 500 !important;
    font-size: 13px;
    height: 26px;
}

#loading-donate-text {
    text-align: left;
    margin-left: 0px;
    line-height: 17px;
    font-size: 13px;
    padding-top: 1px;
    padding-left: 14px;
    height: 20px;
    color: white !important;
    background-color: #ff424d !important;
    min-width: 800px;
    cursor: pointer !important;
    position: relative;
}

#loading-donate-content {
    float: left;
    cursor: pointer;
}

#loading-main-content {
    display: flex;
    /* Was justify-content: center, which docked the 875px-wide
       landing content block in the middle of the viewport. flex-start
       parks it against the left edge so the whole page reads as
       left-aligned on wide viewports. The container itself still
       caps at 875px wide, so very wide screens just get unused
       space on the right rather than the center-stage layout.
       Desktop overrides this back to center (its window opens at
       1950px wide, where flex-start reads as badly off-center) via
       wwwroot/css/desktop.css, loaded after this file. */
    justify-content: flex-start;
    align-items: flex-start;
}

#loading-user-count {
    left: 643px;
    position: absolute;
    top: 31px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 12px;
    width: 300px;
}

#loading-market-events {
    left: 805px;
    position: absolute;
    top: 55px;
    width: 100px;
    z-index: 500;
    font-weight: 400;
    color: var(--common);
    cursor: pointer;
    font-size: 12px;
}

#loading-market-events {
    left: 575px;
    top: 31px;
}

#loading-market-events {
    left: 805px;
    top: 55px;
}

#loading-dark-mode-switch {
    left: 824px;
    position: absolute;
    top: 31px;
    width: 100px;
    z-index: 500;
}

#loading-switch-text-moon {
    float: left;
    color: var(--common);
    font-weight: 400;
    font-size: 12px;
    cursor: pointer;
    z-index: 2030;
    margin-left: -3px;
}

#loading-mobile-ticker-search {
    left: 365px !important;
    position: absolute !important;
    top: 80px !important;
    z-index: 2000;
    width: 74px !important;
    width: 100px;
    height: 33px;
    float: left;
    font-size: 10px;
    margin-right: 8px;
    margin-left: -2px;
    border-radius: 2px;
    border: 1px solid #ced4da;
    padding-left: 5px;
}

#loading-mobile-ticker-search {
    width: 74px !important;
    width: 100px;
}

#wave-table {
    max-width: 908px;
    min-width: 400px;
    width: 100vw;
}

#wave-table td {
    display: flex;
    justify-content: center;
    align-items: center;
}

#waves {
    display: flex;
    justify-content: center;
    align-items: center;
}

#waves {
    left: 50vw;
    margin-top: 8px;
    margin-bottom: 11px;
    text-align: center;
}

.wave {
    width: 1px;
    height: 30px; /* 1/3 shorter loading bars */
    float: left;
    padding-left: 3px;
    padding-right: 6px;
    animation: wave 1s linear infinite;
    border-radius: 0px;
    background: linear-gradient(45deg, #16c60c, var(--page-background));
}

.wave:nth-child(2) {
    animation-delay: 0.1s;
}

.wave:nth-child(3) {
    animation-delay: 0.2s;
}

.wave:nth-child(4) {
    animation-delay: 0.3s;
}

.wave:nth-child(5) {
    animation-delay: 0.4s;
}

.wave:nth-child(6) {
    animation-delay: 0.5s;
}

.wave:nth-child(7) {
    animation-delay: 0.6s;
}

.wave:nth-child(8) {
    animation-delay: 0.7s;
}

.wave:nth-child(9) {
    animation-delay: 0.8s;
}

.wave:nth-child(10) {
    animation-delay: 0.9s;
}

@keyframes wave {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

#intro-header {
    height: 17px;
    font-size: 16px;
    font-weight: 900;
    color: var(--common);
    margin-top: 24px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 15px;
    width: 100%;
    text-align: left;
    min-width: 350px;
}

.intro-sidebar {
    margin-left: -4px !important;
}

.combined-rectangle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    border: 3px solid #ff424d;
    border-radius: 20px;
    width: 92%;
    margin-left: 20px;
    box-sizing: border-box;
}

.combined-rectangle-text {
    flex: 1;
    margin-right: 15px;
    font-size: 14px;
}

.combined-rectangle-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
}

.close-lightbox {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

.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;
}

.spinner-container-mini-grid {
    text-align: center;
    padding: 50px;
    color: #666;
}

.grid-footer {
    color: var(--common);
}

.collapsed {
    display: none !important;
}

.watchlist-subhead .fa-chevron-down {
    transition: transform 0.2s ease;
    float: right;
    margin-top: 4px;
}

.watchlist-subhead:hover {
    cursor: pointer;
}

.watchlist-subhead[data-heading] .fa-chevron-down {
    transform: rotate(0deg);
}

.watchlist-subhead[data-heading].expanded .fa-chevron-down {
    transform: rotate(180deg);
}

.accordion-body {
    padding: 0px !important;
}

i.fa.fa-chevron-right.subhead-chevron {
    margin-top: 3px;
    float: right;
    font-weight: bold;
    color: black;
}

i.fa.fa-chevron-down.subhead-chevron {
    margin-top: 2px;
    float: right;
    color: black !important;
    font-weight: b;
}

.menu-flag {
    float: right;
    padding-top: 9px;
    padding-left: 5px;
}

.alerts-view {
    /* Line the grid up with the "Recent Alerts" heading (#intro-header has the
       same parent and margin-left: 20px). */
    padding-left: 20px;
}

.alerts-edit {
}

.alerts-view-mini {
    padding-left: 11px;
    padding-right: 10px;
}

.watchlist-row {
    clear: both;
    margin-left: 19px;
    margin-bottom: 9px;
    width: 600px;
    padding-bottom: 8px;
    color: var(--common);
}

.watchlist-item {
    margin-left: 106px;
    color: var(--common);
    padding-top: 6px;
}

.alert-edit {
    float: left;
    width: 90px;
}

#alerts-intro {
    color: var(--common);
}

.price-pops-header {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 7px !important;
    color: var(--common) !important;
}

.price-pops-header:hover {
    cursor: pointer !important;
    text-decoration: underline;
}

.alert-contents {
    max-height: 30vh;
    text-overflow: clip;
    width: 214px;
    overflow-x: auto;
}

.alert-new {
    font-style: italic;
    font-weight: normal;
}

.blazored-toast-close {
    float: right;
}

.blazored-toast {
    width: 21em !important;
}

.blazored-toast {
    color: var(--common) !important;
}

.blazored-toast .blazored-toast-progressbar > span {
    background-color: hsla(116, 76%, 44%,1) !important;
}

.price-pop-text-mini {
    font-size: 11px !important;
}

.alert-contents-mini {
    min-width: 270px;
    padding-bottom: 15px;
}

/* Fluid columns: fit as many ~270px columns as the available width allows,
   capped at 3 by max-width. This replaces the old fixed width:845px + a 880px
   breakpoint, which dropped to 2 columns on any window narrower than 880px even
   when there was clearly room for a third. Cards fill their column (below). */
.alerts-masonry {
    /* Target ~290px columns and cap the grid at ~1040px so 3 columns grow to
       ~330px when there's room — wide enough that the "… Jun-26 9:52 AM ET"
       timestamp stays on one line instead of wrapping. Columns expand to fill,
       and the cap keeps it at 3 across; it gracefully drops to 2 (still wide)
       on narrower windows. */
    column-width: 230px;
    column-gap: 1rem;
    width: 100%;
    max-width: 880px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    /* Cap the alerts area to the actual viewport — the app's main content area
       is wider than a phone screen, so width:100% children would otherwise
       overflow to the right. */
    .alerts-view {
        max-width: 100vw;
        overflow-x: hidden;
        box-sizing: border-box;
        padding-right: 18px;   /* right-side margin so cards don't touch the edge */
    }
    .alerts-masonry {
        column-count: 1;     /* stack the alert regions on small / mobile screens */
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    /* Cards are inline-block/270px by default, so they sit side-by-side. Make
       each region a full-width block that fills (not exceeds) the column. */
    .alerts-masonry .alerts-toast {
        display: block;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Release the 270px floor so the rows fit narrow screens. */
    .alerts-masonry .alert-contents-mini {
        min-width: 0;
    }
}

.alerts-area {
    margin-top: 10px;
}

.alerts-toast {
    display: inline-block;
    width: 270px;
    margin: 0 0 1rem;
    break-inside: avoid;
}

/* Alert tiles in the draggable/resizable GridStack dashboard: fill the panel
   (override the masonry's fixed 270px), header is the drag handle, and the alert
   list scrolls inside the fixed cell. The gray box comes from
   .grid-stack-item-content (chart-style absolute inset → naturally contains it). */
.gs-alert-panel .alerts-toast {
    display: flex;
    flex-direction: column;
    width: auto;
    height: 100%;
    margin: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}
/* The miniscan-style header bar (drag handle is .mini-grid-title inside it). */
.gs-alert-panel .alerts-toast .mini-grid-header {
    flex: 0 0 auto;
}
.gs-alert-panel .alerts-toast .alert-contents-mini {
    flex: 1 1 auto;
    min-width: 0;   /* release the 270px floor so it fits narrow panels */
    min-height: 0;
    overflow-y: auto;
    padding: 4px 6px;
}

/* Collapsed placeholder shown when the alerts dashboard has zero alerts. */
.alerts-empty-region {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
    opacity: 0.5;
    border: 1px dashed rgba(128, 128, 128, 0.4);
    border-radius: 6px;
}

/* Alert tile header: a fixed dark gradient so the white title/icons stay
   legible in BOTH light and dark mode (the old direction-tinted header went
   white-on-light and vanished in light mode). Applies in the menu and grid. */
.alerts-tile-header {
    background: linear-gradient(135deg, #33476b 0%, #1b2940 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Sit flush at the top of the card (the inherited .mini-grid-header negative
       margins are for the multiscan panel's padding, which we don't have here). */
    margin: 0;
    border-radius: 4px 4px 0 0;
}

/* Full-view tiles are static cards (gray box like multiscan), one per scan with
   alerts, flowing into the masonry columns — no GridStack drag/resize. */
.alerts-masonry .alerts-toast {
    /* Fill the (fluid) column instead of the default fixed 270px so the column
       count is driven by the container's column-width, not the card width. */
    display: block;
    width: auto;
    background: var(--page-background);
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    overflow: hidden;
    vertical-align: top;
    box-sizing: border-box;
}
.alerts-masonry .alerts-toast .alert-contents-mini {
    padding: 4px 6px;
    min-width: 0;   /* release the 270px floor so the card matches its column */
    max-width:271px
}
.alerts-tile-header .mini-grid-title,
.alerts-tile-header .mini-grid-title .alert-new {
    color: #ffffff;
}
.alerts-tile-header .mini-grid-title {
    padding-left: 8px;   /* a little breathing room before the scan name */
    gap: 4px;
    min-width: 0;        /* allow the name to shrink so the ellipsis engages */
    cursor: pointer;     /* clicking launches the scan — not a drag handle anymore */
}
/* If the scan name is too long, truncate it with an ellipsis — the (count) and
   the trash icon stay visible, and the full name is in the title tooltip. */
.alerts-tile-header .alerts-tile-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.alerts-tile-header .alert-new {
    flex: 0 0 auto;      /* the count never shrinks; only the name truncates */
}
.alerts-tile-header .mini-grid-header-icons,
.alerts-tile-header .mini-grid-settings {
    color: #cdd6e8;
}
.alerts-tile-header .mini-grid-settings:hover {
    color: #ffffff;
}

.clear-button {
    margin-top: 3px;
    float: right;
}

.alerts-toolbar {
    margin-bottom: 15px;
    height: 20px;
    margin-top: 10px;
    width: 213px;
}

#tv-charts {
    /*padding-top: 22px;*/
}

.column-select-column {
    width: 320px;
    overflow: visible;
}

.ticker-container {
    overflow-y: auto;
    overflow-x: auto;
    height: 90%;
    /* 90% suits the multi-scan mini panels (header row above the grid). A full-screen
       grid has no header inside .mini-grid-full, so 90% left a dead strip at the bottom
       — fill it. Applies to the pop-out and the main full-screen scan. (2026-07-23) */
    /* 2026-07-22: very thin scrollbar, matching the scan menu. */
    scrollbar-width: thin;                                    /* Firefox */
    scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}
/* WebKit (Chrome/Edge/WebView2): a very small, subtle scrollbar for the grid */
.ticker-container::-webkit-scrollbar { width: 4px; height: 4px; }
.ticker-container::-webkit-scrollbar-track { background: transparent; }
.ticker-container::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.35); border-radius: 2px; }
.ticker-container:hover::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.55); }

/* Full-screen grids (pop-out + main scan) have no in-grid header, so the grid fills
   the whole area — removes the ~10% gap at the bottom. */
.mini-grid-full .ticker-container { height: 100%; }

/* The main grid's vertical scrollbar sat at the container's exact right edge, which
   tucks under the docked charts panel (or the window edge) at many widths — inset
   the scroll container 20px so the bar always stays visible. */
#big-grid-container .ticker-container { width: calc(100% - 20px); }

#loading-intro-text {
    text-align: left;
    width: 95%;
    min-width: 500px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
}

#loading {
    padding-top:20px;
    padding-left:5px;
    margin-left:20px !important;
}

#loading-intro-text {
    color: var(--common);
}

/* On small/mobile screens release the 500px floor so the Active Alerts intro
   text wraps to the viewport instead of running off the right edge. Placed
   after the base rules so it wins the cascade. */
@media (max-width: 768px) {
    #loading-intro-text {
        min-width: 0;
        width: auto;
        max-width: 100vw;
        box-sizing: border-box;
    }
}

.chart-boundary {
    margin-top: 10px;
}

.symbol-link-recent {
    font-weight: 100 !important;
    color: #8f9491 !important;
}

.me-2 {
    margin-right: 0px;
}

.account-promo {
    background: #ffd500;
    color: black !important;
    margin-bottom: -6px;
    margin-top: 8px;
    font-size: 11px;
    /* 2026-07-22: fit the defined menu width (was overflowing past it). */
    min-width: 0;
    width: 135px;
    max-width: 135px;
    box-sizing: border-box;
    white-space: normal;
}

.account-promo:hover {
    background: yellow;
    color: black !important;
}

#sector-spacer {
    height: 7px;
}

.account-promo-wide {
    background: linear-gradient(90deg, #ffd500, rgba(0,0,0,0) 100%);
    color: black !important;
    margin-bottom: 4px;
    margin-top: 0px;
    margin-left: 6px !important;
    padding: 1px;
    border-color: rgba(183, 189, 183, 0.5);
    font-size: 11px;
    width: 876px;
    padding-left: 6px;
}

.account-promo-wide:hover {
    cursor: pointer !important;
}

.build-scan {
    /*background-color:var(--action-yellow);*/
}

.addToScans {
    margin-left: 5px;
    padding-top: 6px;
    padding-bottom: 5px;
}

/* GridStack.js Styles */
.grid-stack {
    background: transparent;
    --gs-item-margin: 10px; /* Gap between grid items */
}

.grid-stack > .grid-stack-item {
    z-index: 100 !important;
}

.grid-stack-item-content {
    background: var(--page-background);
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    overflow: hidden;
    position: absolute;
    /* Inset creates visual gaps between panels */
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.gs-grid-panel {
    z-index: 100 !important;
}

.gs-grid-panel .grid-stack-item-content {
    padding: 0;
    overflow: hidden !important;
    box-sizing: border-box;
    /* Inset creates visual gaps between panels for resize handles */
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    right: 10px !important;
    bottom: 10px !important;
}

/* Hide any scrollbars on the outer panel container */
.gs-grid-panel .grid-stack-item-content::-webkit-scrollbar {
    display: none;
}

/* Make mini-grid fill the GridStack panel */
.gs-grid-panel .mini-grid {
    height: 100% !important;
    overflow: hidden !important;
    position: relative;
    padding: 0 !important;
    box-sizing: border-box;
}

/* In GridStack panels, mini-grid has padding:0, so remove negative margins
   that would push the header outside bounds when overflow changes to visible */
.gs-grid-panel .mini-grid-header {
    margin: 0;
    border-radius: 4px 4px 0 0;
}

/* Header row needs to clear floats */
.gs-grid-panel .mini-grid-title {
    clear: none;
}

.gs-grid-panel .mini-grid-header-region {
    clear: both;
}

/* Ticker container - fills remaining space below header */
.gs-grid-panel .ticker-container {
    position: absolute !important;
    top: 26px !important; /* Below title bar */
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: calc(100% - 26px) !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* Header is sticky at top, scrolls horizontally with content */
.gs-grid-panel .mini-grid-header-region {
    position: -webkit-sticky; /* Safari prefix */
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--page-background);
    min-width: -webkit-max-content; /* Safari prefix */
    min-width: max-content;
    white-space: nowrap;
}

.gs-grid-panel .mini-grid-row {
    min-width: -webkit-max-content; /* Safari prefix */
    min-width: max-content;
    white-space: nowrap;
    cursor: pointer;
}

/* Ensure header region doesn't inherit drag cursor */
.gs-grid-panel .mini-grid-header-region {
    cursor: default;
}


/* Scrollbars for ticker container - larger and easier to grab */
.gs-grid-panel .ticker-container::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.gs-grid-panel .ticker-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.gs-grid-panel .ticker-container::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.6);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.gs-grid-panel .ticker-container::-webkit-scrollbar-thumb:hover {
    background: rgba(128, 128, 128, 0.8);
    background-clip: padding-box;
}

.gs-grid-panel .ticker-container::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0.2);
}

/* Ensure default cursor in scroll area, not drag cursor */
.gs-grid-panel .ticker-container {
    cursor: default;
}

/* GridStack resize handles - larger for easier grabbing */
.grid-stack-item > .ui-resizable-handle {
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    z-index: 200 !important;
}

/* Edge handles - positioned in the gap area outside scrollbars */
.grid-stack-item > .ui-resizable-s {
    height: 8px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

.grid-stack-item > .ui-resizable-n {
    height: 6px !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
}

.grid-stack-item > .ui-resizable-e {
    width: 8px !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}

.grid-stack-item > .ui-resizable-w {
    width: 8px !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/* Corner handles - small to not interfere with scrollbars or header */
.grid-stack-item > .ui-resizable-se,
.grid-stack-item > .ui-resizable-sw,
.grid-stack-item > .ui-resizable-ne,
.grid-stack-item > .ui-resizable-nw {
    width: 10px !important;
    height: 6px !important;
    background: transparent !important;
    z-index: 201 !important;
}

/* GridStack placeholder styling */
.grid-stack-placeholder > .placeholder-content {
    background-color: rgba(77, 0, 209, 0.1);
    border: 2px dashed #4d00d1;
    border-radius: 4px;
}

/* Scan Select Autocomplete Styling */
.scan-select-autocomplete {
    width: 100%;
}

.scan-select-autocomplete .dropdown-menu {
    max-height: 90vh;
    min-height: 500px;
    height: 60vh;
    overflow-y: auto;
    position: fixed !important;
    z-index: 9999 !important;
    width: 300px !important;
    max-width: 300px !important;
}

/* Mini grid header autocomplete */
.mini-grid-autocomplete {
    display: inline-flex;
    align-items: center;
    min-width: 180px;
    max-width: 250px;
    cursor: pointer;
    height: 20px;
    line-height: 20px;
}

.mini-grid-autocomplete::after {
    content: "▼";
    font-size: 12px;
    color: white;
    margin-left: 6px;
    opacity: 0.8;
}

.mini-grid-autocomplete .form-control,
.mini-grid-autocomplete input,
.mini-grid-autocomplete input[type="text"],
.mini-grid-autocomplete input.form-control {
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    padding: 0 6px !important;
    font-size: 12px;
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-weight: bold;
    cursor: pointer;
    line-height: 18px !important;
}

.mini-grid-autocomplete .form-control::placeholder,
.mini-grid-autocomplete input::placeholder {
    color: rgba(255,255,255,0.9) !important;
    opacity: 1;
}

/* Mini grid autocomplete dropdown */
.mini-grid-autocomplete .dropdown-menu {
    max-height: 70vh;
    min-height: 300px;
    overflow-y: auto;
    z-index: 999999 !important;
    width: 250px !important;
    max-width: 250px !important;
    pointer-events: auto !important;
}

.mini-grid-autocomplete .dropdown-menu .dropdown-item,
.mini-grid-autocomplete .dropdown-menu a,
.mini-grid-autocomplete .dropdown-menu [role="option"] {
    pointer-events: auto !important;
    cursor: pointer !important;
    padding: 6px 12px;
    display: block;
    width: 100%;
    color: inherit;
    text-decoration: none;
}

.mini-grid-autocomplete .dropdown-menu .dropdown-item:hover,
.mini-grid-autocomplete .dropdown-menu a:hover,
.mini-grid-autocomplete .dropdown-menu [role="option"]:hover,
.mini-grid-autocomplete .dropdown-menu .active {
    background-color: rgba(77, 0, 209, 0.3) !important;
}

/* Allow dropdown to escape grid panel when open */
.grid-stack-item:has(.dropdown-menu.show) {
    overflow: visible !important;
    z-index: 999998 !important;
}

.grid-stack-item-content:has(.dropdown-menu.show) {
    overflow: visible !important;
}

.mini-grid:has(.dropdown-menu.show),
.ticker-container:has(.dropdown-menu.show),
.mini-grid-header-region:has(.dropdown-menu.show) {
    overflow: visible !important;
}

.scan-option {
    display: block;
    width: 100%;
    cursor: pointer;
}

.scan-option.select-long {
    color: var(--common);
}

.scan-option.select-short {
    color: var(--common);
}

.scan-option.select-header {
    color: var(--common);
    font-weight: bold;
    background-color: var(--light-gray);
    pointer-events: none;
}

/* Allow autocomplete dropdown to overflow modal */
.modal-content {
    overflow: visible !important;
}

.filter-modal-body {
    overflow: visible !important;
}

.filter-search-container {
    /* display: inline-block;*/
    width: 100%;
    /* float: right; */
}

.filter-search-clear {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 0;
    /* width: 20px; */
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

#loaded-content {
    /* Was a hard 880px, which overflowed its container and ran right up against
       the docked charts panel (1px clearance). Fluid now: it fills the scroll
       region (wider than the old 880 in practice) and leaves the scrollbar a lane. */
    width: 100% !important;
    max-width: 1100px !important;
}

/* Full-screen views under .main-bg (overflow:hidden — the page never scrolls):
   each needs its own scroll container or short windows can't reach below the
   fold. 121px = the header band above the view region (measured); the banner
   variant adds its 15px. */
.fullscreen-scroll-region {
    max-height: calc(100vh - 121px);
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: 20px;          /* bump the box right of the rail edge */
    /* Fill the reserved area right up to the docked charts panel rather than
       inheriting a narrower ancestor (which left ~200px of dead space beside the
       static pages). --scan-right is the panel's left edge, set inline on
       #main-content; the max-width arm keeps narrow windows honest. */
    width: calc(var(--scan-right, 100vw) - 44px);
    max-width: calc(100vw - 44px);
    padding-right: 12px;        /* breathing room so the bar isn't jammed on the content */
    box-sizing: border-box;
    scrollbar-width: thin;      /* Firefox; colors come from the theme sheets */
}
#warning-bar ~ #main-content .fullscreen-scroll-region {
    max-height: calc(100vh - 136px);
}
/* slim themed scrollbar — track/thumb colors live in dark.css / light.css */
.fullscreen-scroll-region::-webkit-scrollbar { width: 10px; }
.fullscreen-scroll-region::-webkit-scrollbar-track { border-radius: 5px; }
.fullscreen-scroll-region::-webkit-scrollbar-thumb { border-radius: 5px; }


#my-account {
    padding-left: 20px;
    padding-top: 17px;
}

.turbo-title-text {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

.turbo-active {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(247, 147, 30, 0.1)) !important;
    border-color: #ff6b35 !important;
    color: var(--bs-dark) !important;
}

.turbo-inactive {
    background: rgba(108, 117, 125, 0.1) !important;
    border-color: #6c757d !important;
}

.turbo-status-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 17px;
}

.turbo-status-text {
    flex: 1;
}

.turbo-active-status-text {
    color: var(--common);
    font-weight: 600;
}

.turbo-button {
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.turbo-button-active {
    background: white;
    color: #ff6b35;
    border: 1px solid #ff6b35;
}

.turbo-button-active:hover {
    background: #ff6b35;
    color: white;
}

.turbo-button-inactive {
    background: linear-gradient(45deg, #ff6b35, #f7931e);
    color: white;
    border: 1px solid transparent;
}

.turbo-button-inactive:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(255, 107, 53, 0.3);
}


.step-wizard {
    margin-bottom: 30px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 25px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 91vw;
    max-width: 844px;
}

.step-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #dee2e6;
}

.step-nav-item {
    padding: 15px 30px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.2s ease;
}

.step-nav-item.active {
    color: #ff6b35;
    border-bottom-color: #ff6b35;
}

.step-nav-item.completed {
    color: #28a745;
}

.step-nav-item:hover:not(.active) {
    color: #495057;
}

.step-content {
    min-height: 400px;
    padding: 15px 0;
    color: var(--common);
}

.agreement-text {
    height: 300px;
    overflow-y: auto;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--common);
    background: rgba(0, 0, 0, 0.03);
}

.step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-step {
    min-width: 120px;
}

.account-summary {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 25px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 91vw;
}

.account-summary h4 {
    color: var(--common);
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: bold;
}

.account-summary p {
    margin-bottom: 8px;
    color: var(--text-secondary, #888);
    font-size: 15px;
    line-height: 1.5;
}

.step-nav {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #dee2e6;
}

.step-nav-item {
    padding: 15px 30px;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    transition: all 0.2s ease;
}

.step-nav-item.active {
    color: #ff6b35;
    border-bottom-color: #ff6b35;
}

.step-nav-item.completed {
    color: #28a745;
}

.step-nav-item:hover:not(.active) {
    color: #495057;
}

.step-content {
    min-height: 400px;
    padding: 15px 0;
    color: var(--common);
}

.agreement-text {
    height: 300px;
    overflow-y: auto;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--common);
    background: rgba(0, 0, 0, 0.03);
}

.step-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.btn-step {
    min-width: 120px;
}

.account-summary {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 25px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 91vw;
    max-width: 844px;
}

.account-summary h4 {
    color: var(--common);
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-weight: bold;
}

.account-summary p {
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.5;
}


.btn-success {
    background-color: #28a745;
    border-color: #28a745;
}

#filter-scan-name {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

#filter-scan-direction {
    display: flex;
    gap: 5px;
}

/* Filter toolbar - search + toggles row */
.filter-toolbar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

.filter-fields {
    position: relative;
}

.filter-toggles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Filter Group Toggles */
.filter-group-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.filter-group-toggle {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #555;
    transition: all 0.15s ease;
}

.filter-group-toggle:hover {
    background: #e5e5e5;
    color: #333;
    border-color: #aaa;
}

.filter-group-toggle.has-filters {
    border-color: var(--action-yellow);
    background: rgba(237, 137, 54, 0.1);
}

.filter-group-toggle.has-filters .filter-group-toggle-name {
    color: var(--action-yellow);
}

.filter-group-toggle.has-filters:hover {
    background: rgba(237, 137, 54, 0.2);
}

.filter-group-toggle-name {
    font-weight: 500;
}

.filter-group-toggle-count {
    background: var(--action-yellow);
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* Light mode filter group toggles */
.filter-modal-light .filter-group-toggles {
    border-bottom-color: #ddd;
}

.filter-modal-light .filter-group-toggle {
    background: #f0f0f0;
    border-color: #ccc;
    color: #555;
}

.filter-modal-light .filter-group-toggle:hover {
    background: #e0e0e0;
    color: #333;
    border-color: #aaa;
}

.filter-modal-light .filter-group-toggle.has-filters {
    border-color: var(--action-yellow);
    background: rgba(237, 137, 54, 0.1);
}

.filter-modal-light .filter-group-toggle.has-filters .filter-group-toggle-name {
    color: #b36b00;
}

.filter-modal-light .filter-group-toggle.has-filters:hover {
    background: rgba(237, 137, 54, 0.15);
}

/* Filter Summary */
.filter-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 10px 0;
    background: rgba(237, 137, 54, 0.1);
    border: 1px solid rgba(237, 137, 54, 0.3);
    border-radius: 6px;
    min-height: 40px;
}

.filter-summary-label {
    color: var(--action-yellow);
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

/* dialog-only: the bare class leaked this 60px scroll box onto the main
   Filtering bar (the odd stray scrollbar) — scope it to the modal summary */
.filter-summary .filter-summary-content {
    flex: 1;
    font-size: 11px;
    line-height: 1.4;
    max-height: 60px;
    overflow-y: auto;
}

.filter-summary-none {
    color: #888;
    font-style: italic;
}

.filter-summary-text {
    color: #4fc3f7;
    font-family: monospace;
    word-break: break-word;
}

.filter-summary-clear {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #666;
    border-radius: 4px;
    color: #999;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.filter-summary-clear:hover {
    background: rgba(255, 85, 85, 0.2);
    border-color: #ff5555;
    color: #ff5555;
}

.filter-summary-clear i {
    margin-right: 4px;
}

/* Light mode filter summary */
.filter-modal-light .filter-summary {
    background: rgba(237, 137, 54, 0.08);
    border-color: rgba(237, 137, 54, 0.25);
}

.filter-modal-light .filter-summary-label {
    color: #b36b00;
}

.filter-modal-light .filter-summary-none {
    color: #999;
}

.filter-modal-light .filter-summary-text {
    color: #0066cc;
}

.filter-modal-light .filter-summary-clear {
    border-color: #ccc;
    color: #666;
}

.filter-modal-light .filter-summary-clear:hover {
    background: rgba(255, 85, 85, 0.1);
    border-color: #ff5555;
    color: #cc0000;
}

/* Light mode filter regions */
.filter-modal-light .filter-region {
    border-color: #ddd;
    background: rgba(0, 0, 0, 0.03);
}

.filter-modal-light .filter-region-header {
    color: white;
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.filter-modal-light .filter-region-content {
    color: #333;
}

.filter-search-input {
    flex: 1;
    min-width: 120px;
    max-width: 340px;
    padding: 4px 10px 4px 32px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;
    color: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.filter-search-input::placeholder {
    color: #999;
    font-style: italic;
}

.filter-search-input:focus {
    border-color: var(--action-yellow, #f5a623);
    box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.2);
}

.filter-modal-body {
    height: 95vh;
    position: relative;
    width: 100%;
    overflow-y: auto !important;
    max-height: 84vh !important;
}

/* Make filter modal dialog expand */
.modal:has(.filter-modal-body) .modal-dialog {
    max-width: 90vw !important;
    width: 850px !important;
}

.modal:has(.filter-modal-body) .modal-content {
    width: 100% !important;
}

/* Two-column layout container for filter regions */
.filter-columns-container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: 100%;
    justify-content: flex-start;
}

.filter-columns-container #filter-region-left-col {
    flex: 1 1 0 !important;
    max-width: 380px !important;
    min-width: 0 !important;
}

.filter-columns-container #filter-region-right-col {
    flex: 1 1 0 !important;
    max-width: 380px !important;
    min-width: 0 !important;
}

/* Stack filter columns vertically at smaller breakpoints */
@media (max-width: 800px) {
    /* Force all modals to be responsive */
    .modal.show .modal-dialog,
    .modal .modal-dialog,
    .modal-xl,
    .modal-lg,
    .modal-dialog,
    .modal-dialog-centered,
    .modal-dialog-scrollable {
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
        width: calc(100vw - 32px) !important;
        margin: 16px auto !important;
    }

    .modal:has(.filter-modal-body) .modal-dialog {
        width: calc(100vw - 32px) !important;
        max-width: calc(100vw - 32px) !important;
        min-width: 0 !important;
        margin: 16px auto !important;
    }

    .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .modal-body {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .modal-footer {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .modal-header {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .filter-modal-body {
        max-height: 80vh !important;
        padding: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Ensure filter regions don't overflow */
    .filter-region {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Ensure specific elements don't overflow */
    .filter-modal-body .filter-summary,
    .filter-modal-body .filter-group-toggles,
    .filter-modal-body .filter-toolbar,
    .filter-modal-body .filter-mode-tabs,
    .filter-modal-body #filter-intro {
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    .filter-columns-container {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .filter-columns-container #filter-region-left-col,
    .filter-columns-container #filter-region-right-col {
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Make filter summary wrap on mobile */
    .filter-summary {
        flex-wrap: wrap !important;
    }

    .filter-summary-label {
        flex-basis: 100% !important;
        margin-bottom: 5px !important;
    }

    /* Compact filter toolbar on mobile */
    .filter-toolbar {
        flex-wrap: wrap !important;
    }

    .filter-toggles-row {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .filter-group-toggles {
        gap: 4px !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
    }

    .filter-group-toggle {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .filter-expand-btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    .filter-search-input {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 !important;
    }

    /* Compact modal header on mobile */
    .filter-modal-body .modal-title,
    .filter-modal-body h5 {
        font-size: 16px !important;
    }

    /* Shrink font sizes on mobile for more content */
    .filter-region-header {
        font-size: 11px !important;
        padding: 6px 10px !important;
    }

    .filter-entry-row {
        font-size: 12px !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    .filter-entry-row-first-col,
    .filter-entry-label {
        font-size: 12px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .filter-entry-row-second-col {
        flex: 0 0 auto !important;
    }

    .filter-region-content {
        padding: 6px 8px !important;
        overflow-x: hidden !important;
    }

    .filter-value {
        font-size: 11px !important;
        width: 55px !important;
        height: 20px !important;
    }

    #filter-intro {
        font-size: 12px !important;
    }

    .modal-title {
        font-size: 16px !important;
    }

    .filter-summary {
        padding: 8px 10px !important;
        font-size: 11px !important;
    }

    .filter-summary-label {
        font-size: 11px !important;
    }

    .btn {
        font-size: 12px !important;
        padding: 6px 12px !important;
    }
}

.filter-back-to-top {
    position: fixed;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--action-yellow);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background 0.2s, opacity 0.3s;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
}

.filter-back-to-top.visible {
    opacity: 1;
    pointer-events: auto;
}

.filter-back-to-top:hover {
    transform: scale(1.1);
    background: #e09900;
}

#header-right-section {
    position: absolute;
    top: 49px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    text-align: left;
    justify-content: flex-start;
    left: 144px;
    margin-top: 5px;
}

.header-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--common);
}

.header-item.clickable {
    cursor: pointer;
}

.header-item.dark-mode-toggle {
    gap: 0px;
    margin-top: 4px;
    margin-left: 5px;
}

.header-item i {
    cursor: pointer;
}

.action-button-new {
    padding-left: 0px;
    color: white;
    font-size: 11px;
    font-weight: bold !important;
    border: none;
    text-decoration: underline !important;
    margin-left: 0px;
    margin-top: 0px;
    padding-right: 5px;
}

.action-button-new {
}

.customer-account-section {
    /* Was a hard 840px — the real cap on how wide the account/Turbo pages could
       render, independent of the space actually available. Fill the scroll region
       instead (2026-08-01). */
    max-width: 100%;
}

/* ========================================
   Filter Modal Mode Tabs
   ======================================== */
.filter-mode-tabs {
    display: flex;
    gap: 0;
    margin: 15px 0;
    border-bottom: 1px solid #ddd;
}

.filter-mode-tab {
    padding: 8px 16px;
    cursor: pointer;
    color: #666;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.filter-mode-tab:hover {
    color: #333;
}

.filter-mode-tab.active {
    color: #000;
    border-bottom-color: var(--action-yellow);
}

.filter-mode-tab i {
    margin-right: 6px;
}

.beta-label {
    font-size: 0.7em;
    color: #e74c3c;
    font-weight: 500;
    margin-left: 4px;
}

/* ========================================
   Builder Tab Styles
   ======================================== */
.builder-tab {
    padding: 15px 0;
}

.builder-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.builder-match-label {
    color: #666;
    font-size: 14px;
}

.builder-operator-toggle {
    display: flex;
    gap: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.builder-operator-btn {
    padding: 6px 12px;
    cursor: pointer;
    background: #f5f5f5;
    color: #666;
    font-size: 13px;
    transition: all 0.2s;
}

.builder-operator-btn:hover {
    background: #e8e8e8;
}

.builder-operator-btn.active {
    background: var(--action-yellow);
    color: white;
}

.builder-conditions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100px;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.builder-condition-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f5f5f5;
    border-radius: 4px;
}

.builder-not-toggle {
    padding: 4px 8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #999;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 40px;
}

.builder-not-toggle:hover {
    background: #f0f0f0;
    border-color: #aaa;
    color: #666;
}

    .builder-not-toggle.active {
        background: #c53030 !important;
        border-color: #c53030 !important;
        color: white !important;
    }

.builder-not-toggle.active:hover {
    background: #9b2c2c;
    border-color: #9b2c2c;
}

.builder-field-select {
    flex: 2;
    padding: 6px 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

/* Custom field dropdown */
.builder-field-dropdown {
    flex: 2;
    min-width: 200px;
    position: relative;
}

.builder-field-search {
    width: 100%;
    padding: 6px 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.builder-field-search:focus {
    outline: none;
    border-color: var(--action-yellow);
}

.builder-field-search::placeholder {
    color: #999;
}

input.builder-field-search.has-value::placeholder {
    color: #333 !important;
}

.builder-field-dropdown-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    z-index: 99999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.builder-field-category {
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--action-yellow);
    background: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: sticky;
    top: 0;
}

.builder-field-supergroup {
    padding: 6px 10px 2px;
    font-size: 10px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #e5e5e5;
    margin-top: 2px;
    background: #fafafa;
}
.builder-field-supergroup:first-child {
    border-top: none;
    margin-top: 0;
}

.builder-field-subgroup {
    padding: 3px 10px 2px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--action-yellow);
}

.builder-field-option {
    padding: 5px 12px 5px 26px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
}

.builder-field-option:hover {
    background: #f0f0f0;
    color: #000;
}

.builder-field-option.selected {
    background: #e8f0ff;
    color: var(--action-yellow);
}

.builder-field-no-results {
    padding: 10px 12px;
    font-size: 13px;
    color: #999;
    font-style: italic;
}

.builder-comparison-select {
    width: 70px;
    padding: 6px 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    text-align: center;
}

.builder-value-input {
    width: 80px;
    padding: 6px 8px;
    background: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
}

.builder-value-suffix {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    padding-left: 4px;
}

.builder-bool-label {
    color: #999;
    font-size: 13px;
    padding: 0 4px;
}

.builder-bool-select {
    width: 80px;
    padding: 6px 8px;
    background: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
}

.builder-bool-select:hover {
    border-color: #666;
}

.builder-remove-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    font-size: 14px;
}

.builder-remove-btn:hover {
    color: #ff5555;
}

.builder-actions {
    margin-top: 15px;
}

.builder-add-btn {
    padding: 8px 16px;
    background: #444;
    color: white;
    border: 1px solid #555;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.builder-add-btn:hover {
    background: #555;
}

.builder-add-btn i {
    margin-right: 6px;
}

.builder-preview {
    margin-top: 20px;
    padding: 12px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
}

.builder-preview-label {
    color: #888;
    font-size: 12px;
    margin-bottom: 6px;
}

.builder-preview-expression {
    color: #4fc3f7;
    font-family: monospace;
    font-size: 13px;
    word-break: break-all;
}

/* Builder Groups */
.builder-groups {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.builder-group {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px;
    transition: opacity 0.2s ease;
}

.builder-group.disabled {
    opacity: 0.4 !important;
}

.builder-group.disabled .builder-group-toggle {
    opacity: 1 !important;
}

.builder-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.builder-group-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Stylized Toggle Switch for Group Enable/Disable */
.builder-group-toggle {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.builder-group-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.builder-group-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(200, 200, 210, 0.7);
    border: 1px solid rgba(180, 180, 190, 0.5);
    border-radius: 20px;
    transition: all 0.25s ease;
}

.builder-group-toggle-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background: #999;
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.builder-group-toggle:hover .builder-group-toggle-slider {
    border-color: rgba(160, 160, 170, 0.6);
}

.builder-group-toggle:hover .builder-group-toggle-slider:before {
    background: #777;
}

.builder-group-toggle input:checked + .builder-group-toggle-slider {
    background: var(--action-yellow);
    border-color: var(--action-yellow);
}

.builder-group-toggle input:checked + .builder-group-toggle-slider:before {
    transform: translateX(16px);
    background: white;
}

.builder-group-toggle input:focus + .builder-group-toggle-slider {
    box-shadow: 0 0 0 2px rgba(255, 200, 50, 0.3);
}

.builder-group-label {
    color: #666;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: background 0.2s;
}

.builder-group-label:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.builder-group-name-input {
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    background: #fff;
    color: #333;
    border: 1px solid var(--action-yellow);
    border-radius: 3px;
    padding: 2px 6px;
    width: 120px;
    outline: none;
}

.builder-group-operator-toggle {
    display: flex;
    gap: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

.builder-group-operator-btn {
    padding: 4px 10px;
    cursor: pointer;
    background: #fff;
    color: #666;
    font-size: 12px;
    transition: all 0.2s;
}

.builder-group-operator-btn:hover {
    background: #f0f0f0;
}

.builder-group-operator-btn.active {
    background: var(--action-yellow);
    color: white;
}

.builder-group-remove-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
}

.builder-group-remove-btn:hover {
    color: #ff5555;
}

.builder-group-actions-header {
    display: flex;
    gap: 4px;
}

.builder-group-clone-btn {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
}

.builder-group-clone-btn:hover {
    color: var(--action-yellow);
}

.builder-group-actions {
    margin-top: 10px;
}

.builder-add-condition-btn {
    padding: 6px 12px;
    background: #fff;
    color: #666;
    border: 1px dashed #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.builder-add-condition-btn:hover {
    background: #f0f0f0;
    color: #333;
    border-color: #aaa;
}

.builder-add-condition-btn i {
    margin-right: 5px;
}

.builder-group-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

.builder-group-separator-text {
    background: var(--action-yellow);
    color: white;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
}

.builder-add-group-btn {
    padding: 8px 16px;
    background: #fff;
    color: #666;
    border: 1px dashed #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.builder-add-group-btn:hover {
    background: #f0f0f0;
    color: #333;
    border-color: var(--action-yellow);
}

.builder-add-group-btn i {
    margin-right: 6px;
}

/* ========================================
   Light Mode - Filter Modal
   ======================================== */
.filter-modal-light .filter-mode-tabs {
    border-bottom-color: #ddd;
}

.filter-modal-light .filter-mode-tab {
    color: #666;
}

.filter-modal-light .filter-mode-tab:hover {
    color: #333;
}

.filter-modal-light .filter-mode-tab.active {
    color: #000;
    border-bottom-color: var(--action-yellow);
}

.filter-modal-light .beta-label {
    color: #d63031;
}

/* Light Mode - Builder Tab */
.filter-modal-light .builder-tab {
    color: #333;
}

.filter-modal-light .builder-match-label {
    color: #666;
}

.filter-modal-light .builder-operator-toggle {
    border-color: #ccc;
}

.filter-modal-light .builder-operator-btn {
    background: #f5f5f5;
    color: #666;
}

.filter-modal-light .builder-operator-btn:hover {
    background: #e8e8e8;
}

.filter-modal-light .builder-operator-btn.active {
    background: var(--action-yellow);
    color: white;
}

.filter-modal-light .builder-group {
    background: #f8f8f8;
    border-color: #ddd;
}

.filter-modal-light .builder-group.disabled {
    opacity: 0.4;
}

.filter-modal-light .builder-group.disabled .builder-group-toggle {
    opacity: 1;
}

.filter-modal-light .builder-group-toggle-slider {
    background: rgba(200, 200, 210, 0.7);
    border-color: rgba(180, 180, 190, 0.5);
}

.filter-modal-light .builder-group-toggle-slider:before {
    background: #999;
}

.filter-modal-light .builder-group-toggle:hover .builder-group-toggle-slider:before {
    background: #777;
}

.filter-modal-light .builder-group-label {
    color: #666;
}

.filter-modal-light .builder-group-label:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333;
}

.filter-modal-light .builder-group-name-input {
    background: #fff;
    color: #333;
    border-color: var(--action-yellow);
}

.filter-modal-light .builder-group-operator-toggle {
    border-color: #ccc;
}

.filter-modal-light .builder-group-operator-btn {
    background: #fff;
    color: #666;
}

.filter-modal-light .builder-group-operator-btn:hover {
    background: #f0f0f0;
}

.filter-modal-light .builder-group-operator-btn.active {
    background: var(--action-yellow);
    color: white;
}

.filter-modal-light .builder-group-remove-btn {
    color: #999;
}

.filter-modal-light .builder-group-remove-btn:hover {
    color: #ff5555;
}

.filter-modal-light .builder-group-clone-btn {
    color: #999;
}

.filter-modal-light .builder-group-clone-btn:hover {
    color: var(--action-yellow);
}

.filter-modal-light .builder-conditions {
    background: #fff;
    border: 1px solid #e0e0e0;
}

.filter-modal-light .builder-condition-row {
    background: #f5f5f5;
}

.filter-modal-light .builder-not-toggle {
    background: #fff;
    border-color: #ccc;
    color: #999;
}

.filter-modal-light .builder-not-toggle:hover {
    background: #f0f0f0;
    border-color: #aaa;
    color: #666;
}

.filter-modal-light .builder-not-toggle.active {
    background: #c53030;
    border-color: #c53030;
    color: white;
}

.filter-modal-light .builder-field-select,
.filter-modal-light .builder-comparison-select,
.filter-modal-light .builder-value-input {
    background: #fff;
    color: #333;
    border-color: #ccc;
}

.filter-modal-light .builder-remove-btn {
    color: #999;
}

.filter-modal-light .builder-remove-btn:hover {
    color: #ff5555;
}

.filter-modal-light .builder-value-suffix {
    color: #666;
}

.filter-modal-light .builder-bool-label {
    color: #666;
}

.filter-modal-light .builder-bool-select {
    background: #fff;
    color: #333;
    border-color: #ccc;
}

/* Light Mode - Custom field dropdown */
.filter-modal-light .builder-field-search {
    background: #fff;
    color: #333;
    border-color: #ccc;
}

.filter-modal-light .builder-field-search:focus {
    border-color: var(--action-yellow);
}

.filter-modal-light .builder-field-search::placeholder {
    color: #888;
}

.filter-modal-light input.builder-field-search.has-value::placeholder {
    color: #333 !important;
}

.filter-modal-light .builder-field-dropdown-menu {
    background: #fff;
    border-color: #ccc;
}

.filter-modal-light .builder-field-category {
    background: #f5f5f5;
    color: #b8860b;
}

.filter-modal-light .filter-subgroup-header {
    color: rgba(0, 0, 0, 0.85);
}

.filter-modal-light .builder-field-supergroup {
    background: #f5f5f5;
    color: #888;
}

.filter-modal-light .builder-field-subgroup {
    color: #b8860b;
}

.filter-modal-light .builder-field-option {
    color: #333;
}

.filter-modal-light .builder-field-option:hover {
    background: #f0f0f0;
    color: #000;
}

.filter-modal-light .builder-field-option.selected {
    background: #f0f0f0;
    color: #b8860b;
}

.filter-modal-light .builder-field-no-results {
    color: #999;
}

.filter-modal-light .builder-add-condition-btn,
.filter-modal-light .builder-add-group-btn {
    background: #fff;
    color: #666;
    border-color: #ccc;
}

.filter-modal-light .builder-add-condition-btn:hover,
.filter-modal-light .builder-add-group-btn:hover {
    background: #f5f5f5;
    color: #333;
    border-color: var(--action-yellow);
}

.filter-modal-light .builder-group-separator-text {
    background: var(--action-yellow);
    color: white;
}

.filter-modal-light .builder-preview {
    background: #f0f0f0;
    border-color: #ddd;
}

.filter-modal-light .builder-preview-label {
    color: #666;
}

.filter-modal-light .builder-preview-expression {
    color: #0066cc;
}

/* Light Mode - Script Editor */
.filter-modal-light .script-editor-textarea {
    background: #fff;
    color: #0066cc;
    border-color: #ccc;
}

.filter-modal-light .script-editor-textarea::placeholder {
    color: #999;
}

.filter-modal-light .script-status.valid {
    color: #2e7d32;
}

.filter-modal-light .script-status.invalid {
    color: #c62828;
}

.filter-modal-light .script-editor-help {
    background: #f5f5f5;
}

.filter-modal-light .script-help-header {
    color: #666;
}

.filter-modal-light .script-category-header {
    background: #e8e8e8;
    color: #333;
}

.filter-modal-light .script-category-header:hover {
    background: #ddd;
}

.filter-modal-light .script-category-header i {
    color: #666;
}

.filter-modal-light .script-field-item:hover {
    background: #e8e8e8;
}

.filter-modal-light .script-field-name {
    color: #0066cc;
}

.filter-modal-light .script-field-type {
    color: #999;
}

.filter-modal-light .script-operator,
.filter-modal-light .script-function {
    background: #e8e8e8;
    color: #0066cc;
}

.filter-modal-light .script-operator:hover,
.filter-modal-light .script-function:hover {
    background: #ddd;
}

.filter-modal-light .script-example {
    background: #e8e8e8;
    color: #666;
}

.filter-modal-light .script-example:hover {
    background: #ddd;
    color: #333;
}

/* ========================================
   Script Editor Styles
   ======================================== */
.script-editor {
    display: flex;
    gap: 20px;
    padding: 15px 0;
}

.script-editor-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.script-editor-textarea {
    width: 100%;
    min-height: 200px;
    padding: 12px;
    background: #1a1a1a;
    color: #4fc3f7;
    border: 1px solid #444;
    border-radius: 6px;
    font-family: monospace;
    font-size: 14px;
    resize: vertical;
}

.script-editor-textarea::placeholder {
    color: #666;
}

.script-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.script-validate-btn {
    padding: 8px 16px;
    background: var(--action-yellow);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.script-validate-btn:hover {
    filter: brightness(1.1);
}

.script-validate-btn i {
    margin-right: 6px;
}

.script-status {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.script-status.valid {
    color: #4caf50;
}

.script-status.invalid {
    color: #f44336;
}

.script-editor-help {
    width: 280px;
    max-height: calc(100vh - 300px);
    overflow-y: auto;
    padding: 10px;
    background: #222;
    border-radius: 6px;
}

.script-help-header {
    color: #aaa;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.script-field-categories {
    margin-bottom: 15px;
}

.script-field-category {
    margin-bottom: 5px;
}

.script-category-header {
    padding: 6px 8px;
    background: #333;
    color: #ddd;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.script-category-header:hover {
    background: #444;
}

.script-category-header i {
    font-size: 10px;
    color: #888;
}

.script-category-fields {
    padding: 5px 0 5px 10px;
}

.script-field-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
    border-radius: 3px;
}

.script-field-item:hover {
    background: #333;
}

.script-field-name {
    color: #4fc3f7;
    font-family: monospace;
}

.script-field-type {
    color: #666;
    font-size: 10px;
}

.script-help-section {
    margin-bottom: 15px;
}

.script-operators,
.script-functions {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.script-operator,
.script-function {
    padding: 4px 8px;
    background: #333;
    color: #4fc3f7;
    font-family: monospace;
    font-size: 12px;
    border-radius: 3px;
    cursor: pointer;
}

.script-operator:hover,
.script-function:hover {
    background: #444;
}

.script-examples {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.script-example {
    padding: 6px 8px;
    background: #333;
    color: #aaa;
    font-size: 11px;
    border-radius: 3px;
    cursor: pointer;
}

.script-example:hover {
    background: #444;
    color: white;
}

/* Chart toggle buttons - overlay on chart */
.chart-wrapper {
    position: relative;
    overflow: hidden;
    /* Hidden by default so the chart + Zen buttons never paint before the TradingView widget
       is ready — tv.js fades each wrapper in (opacity:1) on chartReady (with a 12s safety
       fallback). Avoids the first-load flicker where the panel showed, hid, then faded in. */
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* A chart that failed to initialize never reaches chartReady, so tv.js never fades
   the wrapper in — force it visible or the retry prompt sits in an invisible box. */
.chart-wrapper.chart-load-error {
    opacity: 1;
}

.chart-load-failed {
    position: absolute;
    inset: 0;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    background-color: rgba(30, 34, 45, 0.92);
}

.chart-toggle-overlay {
    position: absolute;
    top: 45px;
    right: 3px;
    z-index: 100;
    display: flex;
    gap: 4px;
}

.chart-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 2px 6px;
    font-size: 12px;
    background-color: rgba(76, 82, 97, 0.7);
    border: 1px solid transparent;
    border-radius: 3px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
}

.chart-toggle-btn:hover {
    background-color: rgba(76, 82, 97, 1);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.view-targets-btn {
    border: none;
    outline: none;
    background-clip: padding-box;
}

.view-targets-btn:hover {
    border: none;
    filter: brightness(1.3);
}

.chart-toggle-btn.active {
    background-color: rgba(0, 134, 0, 0.8);
    color: white;
    border-color: rgba(0, 200, 0, 0.5);
}

.chart-toggle-btn.active:hover {
    background-color: rgba(0, 134, 0, 1);
}

/* Responsive chart toggle buttons - hide text on small charts */
@media (max-width: 1300px) {
    .chart-toggle-overlay {
        top: 50px;
        left: auto;
        right: 60px;
        flex-direction: column;
    }

    .chart-toggle-btn {
        font-size: 0;
        padding: 4px 6px;
    }

    .chart-toggle-btn i {
        font-size: 12px;
    }
}

/* Filter Builder intro popup overlay */
.filter-builder-intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.filter-builder-intro-popup {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 193, 7, 0.4);
    border-radius: 12px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 193, 7, 0.1);
    overflow: hidden;
}

.filter-builder-intro-header {
    background: linear-gradient(90deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.05) 100%);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 193, 7, 0.2);
}

.filter-builder-intro-header i {
    color: #ffc107;
    font-size: 24px;
}

.filter-builder-intro-header span {
    color: #ffc107;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.filter-builder-intro-body {
    padding: 24px;
    color: #e0e0e0;
}

.filter-builder-intro-body h3 {
    color: white;
    font-size: 22px;
    margin: 0 0 12px 0;
    font-weight: 600;
}

.filter-builder-intro-body p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px 0;
    color: #b0b0b0;
}

.filter-builder-intro-body ul {
    margin: 0 0 16px 0;
    padding-left: 0;
    list-style: none;
}

.filter-builder-intro-body li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 24px;
    position: relative;
}

.filter-builder-intro-body li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #ffc107;
    font-weight: bold;
}

.filter-builder-intro-body li strong {
    color: white;
}

.filter-builder-intro-footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: center;
}

.filter-builder-intro-got-it {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1a1a2e;
    border: none;
    padding: 12px 40px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-builder-intro-got-it:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(255, 193, 7, 0.4);
}

/* ===== Modern Modal Dialog Styles (Light Mode Default) ===== */

/* Modal backdrop */
.modal-backdrop.show {
    opacity: 0.5 !important;
    backdrop-filter: blur(4px);
}

/* Animation for all modals */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Confirmation dialog sizing */
.modal.show .modal-dialog.modal-dialog-centered.modal-dialog-scrollable {
    max-width: 420px;
}

/* Modal content - Light mode (default) */
.modal.show .modal-dialog.modal-dialog-centered .modal-content {
    background: #f7f8fa !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 20px 24px 16px !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-title {
    color: #1a1a2e !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-header .btn-close {
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-header .btn-close:hover {
    opacity: 1;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-body {
    padding: 20px 24px !important;
    color: #4a5568 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-footer {
    background: rgba(0, 0, 0, 0.03) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
    padding: 16px 24px !important;
    gap: 12px;
}

/* Modern button styling for dialogs - Light mode */
.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn {
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    min-width: 80px;
}

/* Primary/Confirm button */
.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3) !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4) !important;
}

/* Secondary/Cancel button - Light mode */
.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-secondary {
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e0 !important;
    color: #4a5568 !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-secondary:hover {
    background: #cbd5e0 !important;
    border-color: #a0aec0 !important;
    color: #2d3748 !important;
}

/* Danger button for destructive actions */
.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3) !important;
}

.modal.show .modal-dialog.modal-dialog-centered .modal-footer .btn-danger:hover {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4) !important;
}

.form-switch {
    padding-top:1px;
}

/* ------------------------------------------------------------------
   Phones: make modals true full-screen instead of a cramped floating
   card. On a narrow viewport the centered "card" left the page (scan
   grid) visible around it and squeezed the content into a thin column.
   Full-screen + reduced padding + a wrapping footer fixes both. Placed
   last in the file and flagged !important so it wins over the earlier
   ≤800px card rules and the higher-specificity centered-modal rules.
   Background stays whatever the theme rules set (opaque), so the page
   no longer shows through. ------------------------------------------ */
@media (max-width: 600px) {
    .modal.show .modal-dialog,
    .modal .modal-dialog,
    .modal-dialog,
    .modal-dialog-centered,
    .modal-dialog-scrollable,
    .modal-lg,
    .modal-xl,
    .modal:has(.filter-modal-body) .modal-dialog {
        /* 100% of the fixed .modal, NOT 100vw -- 100vw includes the vertical
           scrollbar, which left a scrollbar-wide dead strip on the right (same
           lesson as the 800px block above). */
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        margin: 0 !important;
    }

    /* Bootstrap injects inline padding-right on .modal as scrollbar
       compensation, which shoves the full-screen sheet left and doubles the
       right-side gap. Full-screen needs no compensation. */
    .modal { padding-left: 0 !important; padding-right: 0 !important; }

    .modal.show .modal-dialog .modal-content,
    .modal.show .modal-dialog.modal-dialog-centered .modal-content,
    .modal-content {
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        border: none !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Body grows and scrolls; header/footer stay pinned. */
    .modal.show .modal-dialog.modal-dialog-centered .modal-body,
    .modal-body,
    .whats-new-modal-body {
        flex: 1 1 auto !important;
        max-height: none !important;
        overflow-y: auto !important;
    }

    /* Tighter horizontal padding reclaims content width on a phone. */
    .modal.show .modal-dialog.modal-dialog-centered .modal-header,
    .modal.show .modal-dialog.modal-dialog-centered .modal-body,
    .modal.show .modal-dialog.modal-dialog-centered .modal-footer,
    .modal-header,
    .modal-body,
    .modal-footer {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Let the footer wrap so a long link + button don't crush together. */
    .modal-footer {
        flex-wrap: wrap !important;
    }
    .whats-new-see-all {
        margin-right: 0 !important;
        width: 100%;
    }
}

/* ---- "Explain Results" filter funnel (ShowFilters + FilterModal) ---- */
.funnel-explain-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 134px;                 /* fixed: "Explain Results" and "Hide" same size (monospace needs the room) */
    padding: 4px 8px;
    font-size: 11px;
    line-height: 1;
    color: #fff !important;
    background: rgba(80,80,80,0.85) !important;   /* exact match to .filter-summary-toggle */
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
/* keep the overflow chevron visible next to the pill when both render */
/* toggle stays at its native right:4px; the pill sits to its left */

.funnel-panel {
    margin: 4px 8px 8px 0;
    padding: 8px 14px;
    border: 1px solid;
    border-radius: 6px;
    font-size: 12.5px;
    max-width: 780px;
    font-family: monospace;
}
.funnel-panel-head { display: flex; justify-content: space-between; margin-bottom: 4px; }
.funnel-panel-sub { opacity: .75; }
.funnel-panel-close { margin-left: 10px; cursor: pointer; font-weight: bold; }
.funnel-row { display: flex; justify-content: space-between; gap: 16px; padding: 1px 0; }
.funnel-count { font-family: Consolas, monospace; white-space: nowrap; }
.funnel-killer { color: #e05555; font-weight: 600; }
/* Market Commentary pop-out window + the modal's pop-out button */
.popout-commentary-view {
    height: 100vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 12px 16px 20px;
    /* standalone window: no modal wrapper supplying ink, so text inherited the
       page default (dark-on-dark). Use the theme's standard text color. */
    color: var(--common);
}
.popout-commentary-head {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
}
.modal-header:has(.commentary-popout-btn),
.modal-header:has(.filter-import-btn) { position: relative; }
.commentary-popout-btn,
.filter-import-btn {
    cursor: pointer;
    position: absolute;      /* pinned just left of the x, whatever the header's flex does */
    right: 58px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 10px;
    border: 1px solid rgba(255, 179, 0, .5);
    border-radius: 7px;
    color: #f9a825;
}
.commentary-popout-btn:hover,
.filter-import-btn:hover { border-color: #f9a825; background: rgba(255, 179, 0, .08); }
/* "Pop out" on the market-commentary ticker: hidden in the collapsed one-line
   bar; pinned to the LOWER RIGHT of the hover-expanded panel (more... sits
   lower-left). */
.market-ticker-popout { display: none; }
#market-ticker-bar:hover .market-ticker-popout {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    right: 10px;
    bottom: 5px;
    cursor: pointer;
    white-space: nowrap;
    opacity: .85;
    font-weight: 600;
}
.market-ticker-popout:hover { opacity: 1; text-decoration: underline; }

/* On-scan/not-on-scan filter: scan picker dropdown + any/all mode toggle. The wrap
   anchors the dropdown (the TimeframePicker positions itself and is unaffected). */
.filter-tf-wrap { position: relative; }
.scanref-picker {
    position: absolute; z-index: 3000; top: calc(100% + 4px); left: 0;
    min-width: 240px; max-width: 320px; max-height: 300px; overflow-y: auto;
    border-radius: 8px; padding: 6px 0;
    /* surface colors live in dark.css / light.css, like .tf-picker */
}
/* ScanCombo-style contents (search / Long-Short tabs / categorized list) reuse the
   .scan-combo-* classes; the -combo modifier just sizes the floating container. */
.scanref-picker-combo { width: 300px; max-height: 440px; padding: 0; overflow: hidden; }
.scanref-picker-combo .scan-combo-list { max-height: 340px; }
.filter-scanref-mode { display: inline-flex; border: 1px solid rgba(128, 128, 128, .45); border-radius: 6px; overflow: hidden; font-size: 11px; margin: 0 4px; vertical-align: middle; }
.filter-scanref-mode-opt { padding: 2px 8px; cursor: pointer; opacity: .55; }
.filter-scanref-mode-opt.active { opacity: 1; background: rgba(255, 179, 0, .15); color: #f9a825; font-weight: 700; }

/* Temporary per-row filter toggles (not saved; reset on scan change). */
.funnel-toggle { cursor: pointer; margin-right: 7px; color: #6fd394; font-size: 15px; vertical-align: -1px; }
.funnel-toggle:hover { filter: brightness(1.25); }
.funnel-row-off { opacity: .55; }
.funnel-row-off .funnel-toggle { color: #8a90a8; }
.filter-chip-tempoff { opacity: .45; text-decoration: line-through; }


/* funnel pill: anchor to the Filtering bar itself and keep summary text clear of it.
   min-height so a one-line summary is still tall enough for the pill (it was getting
   clipped by the collapsed bar / header gradient above). */
#filtered-out-criteria { min-height: 28px; }
/* the pill + chevron anchor to the full-width bar (#filtered) and align to the
   utility strip's right edge (Discord button): the strip caps at margin-left
   135px + max-width 744px, so its edge from #filtered's right (which starts at
   144px) is max(20px, 100% - 735px). */
#filtered { position: relative; }
/* the three controls pack right-aligned as ONE flex cluster whose right edge
   matches the utility strip's (Discord) edge — no reserved slots when the
   chevron doesn't render */
.funnel-controls {
    position: absolute;
    top: 3px;              /* first chip row, relative to #filtered-out-criteria */
    right: 4px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.funnel-controls .funnel-explain-btn,
.funnel-controls .filter-summary-toggle {
    position: static;
}
.funnel-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 58px;
    padding: 4px 0;
    font-size: 11px;
    line-height: 1;
    color: #fff !important;
    background: rgba(80,80,80,0.85) !important;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
}
#filtered-out-criteria .filter-summary-content { padding-right: 40px; } /* chips run full width; clear the overflow chevron */


/* ==== ported from the Refined Density branch: mega-menu (2026-07-08) ==== */
/* redesign tokens the mega-menu consumes — light defaults; dark.css overrides.
   Display/mono fonts fall back gracefully (webfonts ride the full redesign later). */
:root {
    --zb-text: #15182a;
    --zb-text-3: #9aa0ad;
    --zb-green: #0a8f4a;
    --zb-red: #d83a3a;
    --zb-purple: #7a5fd6;
    --zb-purple-tag-bg: rgba(122, 95, 214, .12);
    --zb-green-tint: rgba(10, 143, 74, .10);
    --zb-red-tint: rgba(216, 58, 58, .10);
    --zb-font-display: 'Bricolage Grotesque', 'Segoe UI', sans-serif;
    --zb-font-mono: 'Space Mono', Consolas, monospace;
}
.zb-tag-custom {
    flex: none;
    font-family: var(--zb-font-mono);
    font-size: 8.5px;
    letter-spacing: .04em;
    color: var(--zb-purple);
    background: var(--zb-purple-tag-bg);
    padding: 1px 5px;
    border-radius: 4px;
}


/* ============================================================
   REDESIGN 2026: mega-menu (Long/Short scan flyouts)
   ============================================================ */

/* the panel sizes to its columns instead of a fixed tall scroll list */
#long-menu,
#short-menu {
    /* definite width: the newspaper multi-column flow below needs one.
       ~4 columns of 240px; never sprawls past the viewport. */
    width: min(1080px, calc(100vw - 32px));
    min-width: 0;
    height: auto;
    max-height: 88vh;
    overflow-y: auto;
    overflow-x: hidden;
}

/* mega rows: neutralize the legacy flyout hover (full direction gradient +
   forced white text — unreadable in light mode). The mega treatment tints
   only the NAME (rules below); the row itself gets a quiet wash. */
.mega-menu-item.top-menu-row-long:hover,
.mega-menu-item.top-menu-row-short:hover {
    background: rgba(127, 127, 127, 0.10) !important;
    color: inherit !important;
}

.mega-menu-columns {
    /* newspaper flow at ALL widths: groups stack vertically and fill columns,
       so 7+ concept groups use the panel's height instead of sprawling into
       7 side-by-side columns off the screen edge. */
    display: block;
    columns: 240px;
    column-gap: 8px;
    padding: 4px;
}

.mega-menu-col {
    width: auto;
    min-width: 0;
    break-inside: avoid;   /* a scan group never splits across columns */
    margin-bottom: 10px;
}

    .mega-menu-col .top-menu-heading {
        font-family: var(--zb-font-display);
        font-weight: 600;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .08em;
        border-radius: 6px;
        padding: 6px 10px;
        margin: 0 0 4px 0;
    }

.mega-menu-item {
    display: block;
    padding: 5px 10px;
}

.mega-item-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mega-item-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: var(--zb-text);
}

.mega-item-count {
    flex: none;
    font-family: var(--zb-font-mono);
    font-size: 11px;
    color: var(--zb-text-3);
}

.mega-item-badge {
    flex: none;
    font-size: 11px;
}

.mega-item-desc {
    font-size: 11px;
    line-height: 1.35;
    color: var(--zb-text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mega-menu-item-disabled .mega-item-name,
.mega-menu-item-disabled .mega-item-count {
    color: var(--zb-text-3);
}

/* hover keeps the direction tint but must not recolor the quiet metadata */
.top-menu-row-long.mega-menu-item:hover .mega-item-name {
    color: var(--zb-green);
}

.top-menu-row-short.mega-menu-item:hover .mega-item-name {
    color: var(--zb-red);
}

/* columns stack on narrow viewports so the panel never overflows */
@media (max-width: 1150px) {
    .mega-menu-columns {
        flex-wrap: wrap;
    }
}
/* Mobile: the absolute pill cluster would crush the filter text (the reserved
   lane is ~280px). Below 768px the controls flow INLINE below the text and the
   text gets the full width back. */
@media (max-width: 768px) {
    .funnel-controls {
        position: static;
        display: flex;
        justify-content: flex-start;   /* left-aligned with the button strip / filter text */
        margin: 4px 0 2px 2px;
    }
    #filtered-out-criteria .filter-summary-content { padding-right: 8px; }
    #filtered-out-criteria { min-height: 0; }
}


/* Mobile filter dialog: the Name / Description / Direction row was forcing
   ~700px of min-width (two fixed inputs side by side) and squeezing the
   dialog off-screen. Stack and stretch under 800px (same breakpoint as the
   dialog's other mobile rules). */
@media (max-width: 800px) {
    #filter-scan-name { flex-wrap: wrap; row-gap: 6px; display: flex; align-items: center; }
    #scan-name, #scan-description {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box !important;   /* padding stays inside — no overflow widening */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* one overflowing child widens the whole dialog's scroll width — belt & braces */
    .filter-modal-body { overflow-x: hidden !important; }

    /* 100vw includes the vertical scrollbar on desktop browsers — the dialog was
       exactly one scrollbar too wide. 100% (of the fixed full-width .modal) doesn't. */
    .modal.show .modal-dialog,
    .modal .modal-dialog,
    .modal-dialog {
        /* edge-to-edge on phones; the old -32px left a bare gap at the right */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    #filter-scan-direction { flex-wrap: wrap; }
}


/* Mobile scan picker: mega menu replaces the scan combo */
#mobile-scan-button {
    position: relative;
    z-index: 1051;          /* stays tappable above the open panel — reliable close */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.mobile-scan-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#mobile-mega-menu {
    display: none;
    position: fixed;
    left: 8px;
    right: 8px;
    top: 122px;   /* below the combo/button row (~113px bottom) */
    bottom: 8px;
    z-index: 1050;
    overflow-y: auto;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    padding: 6px;
}
#mobile-mega-menu.open { display: block; }


/* tap-anywhere-outside closes the mobile mega menu */
#mobile-mega-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: rgba(0,0,0,.25);
}
#mobile-mega-backdrop.open { display: block; }

/* the mobile direction combo + ticker search match the scan button's family */
#top-menu-mobile select.main-menu-select,
#top-menu-mobile .main-menu-select select {
    height: 34px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}
#top-menu-mobile #mobile-ticker-search {
    height: 34px;
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}


/* mobile direction picker: same JS-panel pattern as the scan menu */
#mobile-direction-button {
    position: relative;
    z-index: 1051;   /* above the backdrop, like the scan button — one tap always toggles */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}
.mobile-mini-menu {
    display: none;
    position: fixed;
    left: 8px;
    right: 8px;
    top: 122px;
    z-index: 1050;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    padding: 4px;
    max-height: 70vh;
    overflow-y: auto;
}
.mobile-mini-menu.open { display: block; }
.mobile-mini-row {
    padding: 11px 14px;
    font-size: 14px;
    cursor: pointer;
    border-bottom: 1px solid rgba(128,128,128,.15);
}
.mobile-mini-row:last-child { border-bottom: none; }
.mobile-mini-row:active { background: rgba(128,128,128,.12); }


/* current selection in the mega/scan menus: same language as the sidebar */
.mega-menu-item.mega-item-selected {
    border-left: 3px solid var(--zb-green);
    background: var(--zb-green-tint);
}
.mega-menu-item.mega-item-selected .mega-item-name {
    color: var(--zb-green);
    font-weight: 700;
}
.top-menu-row-short.mega-menu-item.mega-item-selected {
    border-left-color: var(--zb-red);
    background: var(--zb-red-tint);
}
.top-menu-row-short.mega-menu-item.mega-item-selected .mega-item-name {
    color: var(--zb-red);
}


/* Mobile: the def strip overlapped the wrapped scan title inside the green
   band (float layout in a capped-height bar). Hide the def line and keep the
   title to one ellipsized line - the description is in the menu anyway. */
@media (max-width: 768px) {
    .scan-defs-text { display: none; }
    #heading-text {
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: calc(100% - 12px);
    }
}


/* Chart pop-out: the chart owns the whole window. .popout-view is a column flexbox at 100vh, so
   flex:1 + min-height:0 lets the chart shrink to the window rather than overflowing it (without
   min-height a flex item refuses to go below its content size).

   Padding on top only, none at the bottom, so the chart sits flush with the bottom edge.
   zbWatchChartPopout measures THIS element, so the padding is subtracted from the size handed to
   the widget automatically — do not also subtract it in JS. */
.popout-chart-view {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    position: relative;
    padding-top: 6px;
    padding-bottom: 0;
    box-sizing: border-box;
}

/* The wrapper fills; the chart itself is sized in pixels by tv.js (see resizeChart), so it is
   deliberately NOT forced to 100% here — inline px and a CSS override fight, and tv.js wins on
   the iframe anyway. */
.popout-chart-view > .chart-wrapper {
    width: 100%;
    height: 100%;
}

/* "Pop Out Chart" in the chart top bar. Deliberately quiet: it sits beside the data disclaimer,
   which is informational text, so a full button would shout over it. (2026-07-26) */
.chart-popout-btn {
    flex: 0 0 auto;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color, #3a3f4b);
    color: var(--text-muted, #9aa0ac);
    background: transparent;
    white-space: nowrap;
    transition: color .12s ease, border-color .12s ease;
}

.chart-popout-btn:hover {
    color: var(--text-color, #e6e8ec);
    border-color: var(--accent-color, #4f8ef7);
}

.chart-popout-btn i {
    margin-left: 4px;
    font-size: 10px;
}

/* Also used as a <button> in the chart settings modal, where it can be disabled until a ticker
   has been clicked (the pop-out is addressed by symbol). */
.chart-popout-btn:disabled,
.chart-popout-btn[disabled] {
    opacity: .45;
    cursor: not-allowed;
    border-color: var(--border-color, #3a3f4b);
    color: var(--text-muted, #9aa0ac);
}

/* The chart pop-out is a full-window chart, so the "small chart" heuristic above
   (@media max-width:1300px -> stack the buttons and font-size:0 to hide their labels) is wrong
   here: a 900px pop-out trips it even though the chart owns the entire window. These selectors
   are more specific, so they win regardless of the media query. (2026-07-26) */
.popout-chart-view .chart-toggle-overlay {
    flex-direction: row;
    flex-wrap: nowrap;
    right: 60px;
    width: auto;
}

.popout-chart-view .chart-toggle-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 12px;
    padding: 2px 6px;
}

.popout-chart-view .chart-toggle-btn i {
    font-size: 12px;
}

/* Favourite (heart) control in the scan header. Top level on purpose: the
   sibling .action-button-share rules sit inside a media query, so matching
   their placement would scope the heart to a single breakpoint. */
.action-button-favorite {
    background-color: none !important;
    color: white !important;
    float: right;
    height: 27px;
    padding-top: 5px;
    font-size: 11px;
    text-align: center;
    border: 0px;
    cursor: pointer;
}

.action-button-favorite i {
    opacity: .55;
}

.action-button-favorite:hover {
    background-color: white !important;
    border-color: white !important;
    color: black !important;
}

.action-button-favorite:hover i {
    opacity: 1;
    color: #ff3b5c;
}

.action-button-favorite-on i {
    opacity: 1;
    color: #ff3b5c;
}

/* Favourited scan in the My Scans menu: a bookmark, not something the user
   authored, so it must not read as CUSTOM. */
.zb-tag-favorite {
    flex: none;
    font-family: var(--zb-font-mono);
    font-size: 8.5px;
    letter-spacing: .04em;
    color: #ff3b5c;
    background: rgba(255, 59, 92, .14);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Scan Playground entry — its own thing, sitting above Your Scans. The stars are
   layered radial-gradients over a night-sky ramp: no image request, no extra DOM,
   and it scales with the row. Placed at top level because the neighbouring
   .watchlist-label rules live inside media queries. */
.watchlist-playground {
    position: relative;
    cursor: pointer !important;   /* and on every child, so the icon shows the hand too */
    /* Match the sibling rows' geometry: .watchlist-label is 135px wide with 7px of
       left padding. The 3px accent border eats into that, so pad 4px more and the
       text lines up with every other row; border-box keeps the width at 135px. */
    box-sizing: border-box;
    /* The base .watchlist-label sets border-right: 1px solid with NO color, which
       falls back to currentColor -- invisible against the dark sky, but a hard
       purple line once light mode swaps the ink to dark indigo. The banner spans
       the rail, so it gets no right edge at all. */
    border-right: none;
    border-bottom: none;
    /* A touch taller than a normal row -- enough to read as a banner without
       dominating the rail. (Was 9px vertical; ~2x rows read as overwhelming.) */
    padding: 5px 5px 5px 7px;
    display: flex;
    align-items: center;
    /* 6px above (separates from the sign-in promo), then a uniform 4px beat
       down through Build/Import -- bottom margins only, so nothing collapses
       unevenly. */
    margin: 6px 0 4px 0;
    border-radius: 0 4px 4px 0;
    color: #f2f0ff !important;
    background-image:
        radial-gradient(1.2px 1.2px at 8% 32%, rgba(255,255,255,.95), transparent 60%),
        radial-gradient(1px 1px at 21% 68%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(1.4px 1.4px at 37% 22%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(1px 1px at 52% 74%, rgba(255,255,255,.6), transparent 60%),
        radial-gradient(1.2px 1.2px at 66% 38%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1px 1px at 79% 64%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(1.3px 1.3px at 91% 28%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(120% 180% at 0% 0%, rgba(124, 108, 255, .21), transparent 60%),
        linear-gradient(160deg, #10112a 0%, #171238 55%, #0d0f26 100%);

    text-shadow: 0 1px 2px rgba(0,0,0,.55);
    transition: filter .18s ease;
}

.watchlist-playground * { cursor: pointer !important; }

.watchlist-playground:hover {
    filter: brightness(1.25) saturate(1.15);
}

.watchlist-playground .watchlist-custom-scan-icon {
    font-size: 17px;
    margin-left: auto;
    margin-right: 2px;
    /* the rocket wears the ACTIVE SECTION's color (green long, red short,
       teal sector...) -- set via --zb-section-ink on .main-bg-<section> */
    color: var(--zb-section-ink, var(--common)) !important;
}

/* The sky drifts very slowly, so it reads as alive without pulling the eye off
   the scan list. Anyone who has asked for less motion gets a still sky. */
/* drift animation removed with the aurora flatten (2026-07-29) */
/* Heart marking a favorited scan in the left menu -- same red as everywhere
   favoriting appears. Small and leading so names still line up scannably. */
.menu-fav-heart {
    color: #ff3b5c;
    font-size: 9px;
    margin-left: 6px;
    vertical-align: 1px;
    opacity: .9;
}

.favorites-subhead-heart { color: #ff3b5c; font-size: 10px; margin-right: 4px; }

/* Icon-only scan-header toolbar (2026-07-28). Labels moved into tooltips; state
   toggles keep carrying state by color (alerts-on, action-button-favorite-on). */
#show-chart .action-button i,
#show-chart .action-button .play-icon { font-size: 13px; }
#show-chart .action-button { padding-left: 9px; padding-right: 9px; }

/* Icon-only toolbar: hand-tuned top padding per button so every icon sits on a
   common baseline. The alert bell also floats its icon in a .play-icon wrapper
   (unlike the plain inline-icon siblings), so un-float it first. (2026-07-28) */
#show-chart .action-button-alert    { padding-top: 3px; }
#show-chart .action-button-alert .play-icon { float: none; margin: 0; }
#show-chart .action-button-share    { padding-top: 7px; }
#show-chart .action-button-custom   { padding-top: 6px; }
#show-chart .action-button-favorite { padding-top: 6px; }

/* Mega-menu Build/Import: subtle shade, flush with the rows. (2026-07-28) */
.mega-menu-action { background-color: rgba(255, 255, 255, 0.06) !important; }
.mega-menu-action:hover { background-color: rgba(255, 255, 255, 0.12) !important; }

/* Left-menu Build/Import: prominent larger buttons, below Scan Playground and
   above Favorites. Flush (no indent), subtle fill. (2026-07-28) */
.menu-action-lg {
    display: flex;
    align-items: center;
    /* Matches the Scan Playground banner's layout: label left, icon pushed to
       the right edge by an auto margin, text starting at the rows' 7px edge. */
    /* Sized to sit among the sidebar's 12px rows -- an action, not a CTA.
       Width pinned to the rail: every other row gets 135px from
       .watchlist-label, which these divs don't carry. */
    box-sizing: border-box;
    width: 135px;
    /* right padding trimmed to 3px (from 5): with a fixed rail every pixel
       here is headroom the label doesn't have. */
    padding: 2px 3px 2px 7px;
    margin: 0 0 3px 0;
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-weight: 500;
    /* 11.5px, not 12: Safari/macOS sets this string measurably wider than
       Chrome/Windows at the same size, and "Build / Import Scan" was already
       filling the rail to the pixel. */
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
    gap: 3px;
}
.menu-action-lg:hover { background-color: rgba(255, 255, 255, 0.15); }
/* The label shrinks; the icon never does. With a fixed 135px rail this is what
   guarantees the two can't collide whatever the platform's text metrics — the
   worst case becomes an ellipsis instead of the icon sitting on the word. */
.menu-action-lg .action-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.menu-action-lg i { flex: 0 0 auto; font-size: 11px; opacity: .85; margin-left: auto; margin-right: 0; }

/* A long scan name must never plow into the buttons: the floats narrow the
   line box, and the ellipsis lands at that boundary. */
#heading-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Mega-menu Scan Playground row: the sidebar banner's mesh, one row tall.
   Deliberately the dark mesh in BOTH themes (like the gallery's Favorite
   button) so it needs no theme-file edit or cache-version bump. */
.mega-playground {
    background-image:
        radial-gradient(120% 180% at 0% 0%, rgba(124, 108, 255, .21), transparent 60%),
        linear-gradient(160deg, #10112a 0%, #171238 55%, #0d0f26 100%) !important;
    color: #f2f0ff !important;
}
/* The theme sheets color .mega-item-name directly on the span, which beats
   inheritance from the row -- pin the label (and any icon ink) at the child
   level so the dark mesh keeps light text in BOTH themes. */
.mega-playground .mega-item-name { color: #f2f0ff !important; }
.mega-playground:hover { filter: brightness(1.25) saturate(1.15); }
.mega-playground .mega-item-line { display: flex; align-items: center; }
.mega-playground-rocket {
    margin-left: auto;
    color: var(--zb-section-ink, var(--common)) !important;
}
/* section accents the rocket picks up */
.main-bg-long { --zb-section-ink: var(--long); }
.main-bg-short { --zb-section-ink: var(--short); }
.main-bg-sector { --zb-section-ink: var(--sector); }
/* --custom was never defined anywhere, so var(--custom) went guaranteed-invalid and
   the rocket fell back to --common (black in light mode). Hardcode the multiscan
   purple; directional custom scans don't get here (MainBgSection uses their own
   direction), so this only covers genuinely directionless customs. */
.main-bg-custom { --zb-section-ink: rgb(77, 0, 209); }
.main-bg-flat { --zb-section-ink: var(--flat); }
.main-bg-multiscan { --zb-section-ink: rgb(77, 0, 209); }
.mega-menu-action .mega-item-line { display: flex; align-items: center; }
.mega-action-icon { margin-left: auto; opacity: .8; font-size: 11px; }

/* The scan-header icon strip on phones (2026-07-28). #show-chart is fixed at
   left:501px for the desktop layout, which on a <=800px viewport parks the
   whole strip -- alerts, pop-out, share, edit, delete, favorite -- entirely
   off-screen. It was never hidden, just beyond the right edge. Pin it to the
   right and shrink-wrap; the icons-only strip is compact enough to share the
   heading bar. The title yields the room the strip needs.
   700px, NOT 800: collapse.css (the real mobile layout) switches at
   innerWidth <= 700 via doResize -- at 701-800 these rules dressed the
   DESKTOP layout in mobile clothes and the zero-margin bar slid under the
   sidebar rail. Breakpoints must agree with the stylesheet swap. */
@media (max-width: 700px) {
    /* position: static, not fixed-with-right: fixed children are trapped by any
       transformed ancestor (the sidebar's known gotcha) and, with no top set,
       land at a Y underneath the opaque toolbar row. In normal flow, floated
       right, the strip simply lives inside the green heading bar. */
    #show-chart {
        position: static !important;
        float: right;
        left: auto;
        width: auto;
        margin: 0;
    }
    #heading-text {
        width: calc(100vw - 140px) !important;
    }
    /* The bar itself is desktop-sized (width: 742px, margin-left: 136px for the
       rail) -- on a phone the right-floated strip was landing at x~742, past
       the edge. Let it fill the viewport and grow if the strip wraps. */
    .grid-heading-text {
        width: auto !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        height: auto !important;
        min-height: 34px;
        overflow: hidden;
        /* The bar lives inside the page's horizontal scroller (.main-bg / grid
           bounds), so panning the data grid dragged the title off-screen left
           while fixed rows stayed put -- measured at x:-125 in devtools. Sticky
           pins the bar to the scrollport's left edge; the grid scrolls under
           it. */
        position: sticky;
        left: 0;
        z-index: 5;
    }
}

/* Phone-only toolbar actions (see GridHeadingButtons). Desktop keeps the
   header icon strip; phones get bell/trash/heart beside Filter and Columns
   and the strip row disappears entirely -- pop-out, share and edit have no
   phone story (pop-outs are windows, edit lives in the editor modal's own
   buttons). Breakpoint matches the collapse.css swap at 700. */
@media (max-width: 700px) {
}

/* Proposal B scan-header (2026-07-28): the bar is a flex row -- state toggles
   then the overflow dots; child floats are ignored so DOM order = visual
   order at every width. */
#show-chart { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

/* Uniform control height: the bell/heart/dots each carried hand-tuned
   padding-tops from the float era, so their boxes differed. Flex-center the
   icon inside a fixed 27px box and zero the vertical padding -- the
   per-button baseline nudges are obsolete under flex. */
#show-chart .action-button {
    height: 27px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.scan-menu-wrap { position: relative; }
.scan-menu-dots { font-size: 15px; }
.scan-menu-dots-open { background: rgba(0, 0, 0, .28); }
.scan-menu-backdrop { position: fixed; inset: 0; z-index: 3000; background: transparent; }
.scan-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 196px;
    /* see ::before below — bridges the 4px gap for hover-opened menus */
    background: #22243a;
    border: 1px solid #3c4060;
    border-radius: 6px;
    padding: 4px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    z-index: 3001;
}
/* Invisible bridge over the 4px gap between the dots and the menu. Without it the
   pointer leaves the wrap on the way down and a hover-opened menu closes before it
   can be reached. It is a menu descendant, so it counts as "still inside". */
.scan-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}
.scan-menu-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 4px; cursor: pointer; color: #e6e9f2; font-size: 13px; white-space: nowrap; }
.scan-menu-item:hover { background: #31344f; }
.scan-menu-item i { width: 16px; text-align: center; opacity: .85; }
.scan-menu-div { height: 1px; background: #3c4060; margin: 4px 6px; }
.scan-menu-del { color: #ff8a9c; }

/* Phones: the same menu becomes a bottom sheet under a scrim. */
@media (max-width: 700px) {
    .scan-menu-backdrop { background: rgba(8, 8, 20, .6); }
    .scan-menu {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        min-width: 0;
        border-radius: 12px 12px 0 0;
        padding: 8px 0 14px;
    }
    .scan-menu-item { padding: 14px 18px; font-size: 15px; }
}

/* While the overflow menu is open, lift the whole strip's stacking context
   above the toolbar chrome (Guide/Discord, the funnel pills at z1500) that
   otherwise paints through the dropdown. Applied ONLY while open so the bar
   can never sit above modal backdrops the rest of the time. */
#show-chart.scan-menu-raised { z-index: 4000; }

/* Expand/collapse chevron: transition the rotation instead of hard-swapping
   glyph direction, enlarge the hit area, and keep hover feedback. The
   stylesheet swap itself can't animate (see preloads in index.html), but the
   control at least stops feeling like it teleports. */
#expand-collapse-icon { display: inline-block; }
/* No CSS rotation here: toggleExpandedIcon (global.js) already swaps the
   chevron glyph's direction, and rotating on top of that would point the
   arrow the wrong way when collapsed. */
#expand-collapse, .expand-collapse-button {
    min-width: 26px;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
}
#expand-collapse:hover, .expand-collapse-button:hover { background: rgba(128, 128, 160, .25); }

/* The payoff of the class-based collapse: these containers shift between the
   two layouts, and now that toggling is a class flip they can animate. */
#sidebarMenu { transition: margin-left .22s ease; }
#grid-heading-buttons { transition: margin-left .22s ease; }
.grid-heading-text { transition: margin-left .22s ease, width .22s ease; }

/* Conventional panel toggle (2026-07-28). Position still comes from the
   legacy sidebar-expanded/collapsed left offsets -- now Blazor-driven -- so
   the button rides the rail edge; the transition makes it slide with the
   rail instead of teleporting. */
#sidebar.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 27px;
    cursor: pointer;
    /* Soft ghost button hugging the menu boundary: no fill at rest, muted
       ink inheriting the theme, right-side-only rounding so it reads as a
       tab attached to the rail rather than a toolbar sibling. Negative
       margin eats the row's left padding to tuck it against the edge. */
    /* No negative tuck: pulling into the row's padding slid the button under
       the sidebar column, which swallowed the clicks. Sit flush at the row
       start instead, lifted above neighbors so the full box is hittable. */
    margin-left: 0;
    margin-right: 4px;
    position: relative;
    z-index: 5;
    background: transparent !important;
    /* Theme ink via the app's own variable -- inherit resolved to a dark
       ancestor color in dark mode and the chevrons vanished. */
    color: var(--page-text) !important;
    opacity: .55;
    border-radius: 0 4px 4px 0;
    transition: background .15s ease, opacity .15s ease;
}
#sidebar.menu-toggle:hover {
    opacity: 1;
    background: rgba(128, 128, 128, .22) !important; /* neutral, no accent */
}
#sidebar.menu-toggle i { font-size: 11px; }

/* In the title bar the tab floats at the bar's left edge, vertically centered
   in the 34px band. */
.grid-heading-text #sidebar.menu-toggle {
    float: left;
    /* Full-height cap on the bar's left seam: negative margin eats the bar's
       7px padding so the tab touches the sidebar edge, square on that side. */
    height: 34px;
    margin: 0 7px 0 -7px;
    border-radius: 0 4px 4px 0;
    color: #fff !important;   /* the bar is always a saturated band; theme ink is wrong here */
    opacity: .75;
}
.grid-heading-text #sidebar.menu-toggle:hover { opacity: 1; background: rgba(255, 255, 255, .22) !important; }

/* THE collapse toggle: fixed at the sidebar rail's top-right edge, right where
   the eye finds the boundary. Slides to the window edge as the reopen tab when
   the rail is hidden. Theme ink, transparent, hand cursor. */
#rail-toggle {
    position: fixed;
    top: 138px; /* base: just under the heading; :has rules below drop it when the defs bar renders */
    left: 139px;
    width: 16px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    border-radius: 0 4px 4px 0;
    background: rgba(128, 128, 128, .15);
    color: var(--page-text);
    opacity: .55;
    z-index: 60;
    transition: left .22s ease, opacity .15s ease, background .15s ease;
}
#rail-toggle:hover { opacity: 1; background: rgba(128, 128, 128, .22); }
#rail-toggle i { font-size: 11px; cursor: pointer !important; }
#rail-toggle * { cursor: pointer !important; }
html.zb-collapsed #rail-toggle { top: 87px; left: 2px; margin-top: 7px; margin-left: 2px; } /* just under the green heading (58-92 no banner) */
html.zb-collapsed body:has(#warning-bar) #rail-toggle { top: 113px; } /* heading 84-118 with banner */
/* collapsed with the defs bar VISIBLE: only >768px (a 768 media rule hides
   the defs line below that, and <=700 hides the toggle entirely) */
@media (min-width: 769px) {
    html.zb-collapsed body:has(.scan-defs-text) #rail-toggle { top: 111px; } /* defs 92-116, no banner */
    html.zb-collapsed body:has(#warning-bar):has(.scan-defs-text) #rail-toggle { top: 137px; } /* defs 118-142 with banner */
} /* heading sits 30 lower when a banner is up (#rail-toggle is a BODY child; sibling combinators can't reach it) */

/* Filter chips (Proposal C2, no per-chip removal). Glow-only violet ground so
   one rule reads on both themes; hard 200px cap with ellipsis because some
   filter names run very long -- full text in the chip tooltip. */
.filter-chip {
    display: inline-flex;
    align-items: center;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid rgba(124, 108, 255, .45);
    border-radius: 11px;
    padding: 0px 8px;
    margin: 2px 5px 2px 0;
    background: rgba(124, 108, 255, .08);
    line-height: 17px;
}
.filter-chip.funnel-explain-chip {
    max-width: none;
    cursor: pointer;
    color: #fff;
    font-size: 11px;
    background: rgba(80, 80, 80, 0.85);
    border-color: rgba(255, 255, 255, 0.3);
    user-select: none;
}
.filter-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip .filter-criteria-value, .filter-chip .filter-criteria-tfs { flex: none; }

/* Floating flip palette. Panel colors mirror .scan-menu (dark base; light.css
   overrides below in that file's section). */
#flip-bar {
    position: fixed;
    top: 120px;
    left: 45%;
    z-index: 3500;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    background: #22243a;
    border: 1px solid #3c4060;
    border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}
.flip-bar-grip { cursor: grab; color: #767c96; padding: 2px 4px; touch-action: none; }
.flip-bar-grip:active { cursor: grabbing; }
#flip-bar .flip-button { float: none; }
.flip-bar-close { cursor: pointer; color: #767c96; font-size: 16px; padding: 0 4px 2px 6px; line-height: 1; }
.flip-bar-close:hover { color: #ff8a9c; }
/* Mobile quiz invite: plain solid full-width banner below the picker row.
   Playground purple so it reads as the guided-path entrance, not an alert. */
#quiz-invite {
    position: fixed;
    top: 58px;
    left: 0;
    right: 0;
    z-index: 940;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #262b4d;
    color: #fff;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
}
body:has(#warning-bar) #quiz-invite { top: 80px; }
#quiz-invite .qi-txt { flex: 1; line-height: 1.35; }
#quiz-invite .qi-sun { color: #f9a825; margin-right: 4px; }
#quiz-invite .qi-txt b { color: #fff; }
#quiz-invite .qi-go { font-weight: 700; color: #f9a825; }   /* bright action-yellow */
#quiz-invite .qi-x { color: #b8bdd0; padding: 0 6px; font-size: 17px; line-height: 1; }

#flip-bar-delay {
    width: 46px;
    padding: 3px 2px 3px 6px;
    background: #1a1c2e;
    border: 1px solid #3c4060;
    border-radius: 6px;
    color: #e6e8f2;
    font-size: 12px;
    text-align: center;
}
.flip-bar-unit { color: #767c96; font-size: 11px; margin-right: 2px; }
#flip-bar .flip-loop-on, #flip-bar .flip-loop-on i { color: #6fd394; }

/* Guide + Discord on the "Updated" line: quiet inline links beside the
   timestamp. Discord's glyph keeps brand color in both themes. */
.updated-row-link { margin-left: 12px; cursor: pointer; white-space: nowrap; opacity: .85; }
.updated-row-link:hover { opacity: 1; text-decoration: underline; }
.updated-row-discord i { color: #5865F2; }

/* Header utility rail, take two: at 49px it collided with the market
   commentary banner that owns the upper right. The VERY top-right corner is
   empty, so the rail lives there -- one compact right-aligned nowrap line
   above the banner. */
#header-right-section.header-rail {
    /* Full-width SHADED bar hugging the viewport top. !important throughout:
       a (max-width:9999px) media rule pins this element elsewhere with
       !important and must lose. Updated sits at the far left; the spacer
       pushes help/community right. The band below had just enough slack that
       only the tagline and logo needed nudging down (overrides beneath). */
    top: -5px !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    height: 24px;
    padding: 0 12px 0 10px;
    font-size: 12px;
    background: rgba(128, 128, 160, .14);
    border-bottom: 1px solid rgba(128, 128, 160, .25);
    justify-content: flex-end !important;
    white-space: nowrap;
    z-index: 900;
}

/* Clear the new top bar (32px tall): tagline sat at y9, logo at y19; the nav
   follows so the lower logo doesn't kiss it. */
#header-text { top: 29px !important; }
#logo { top: 27px !important; }
#top-menu { top: 75px !important; } /* the logo IMG ends ~12px above its container; hug the image */

/* System message / update banners (#warning-bar from message.txt/update.txt)
   sit ABOVE the rail at the very top of the viewport. They're flow siblings
   of #main-content, so a sibling combinator shifts the rail and the whole
   absolute header band down by the banner's height whenever one is present
   -- pure CSS, no code needs to know. */
#warning-bar {
    /* Original sizing (base rule: 20px + padding). The 10px top margin is
       NOT a gap: base css sets body{margin-top:-10px}, which pulls the whole
       canvas above the viewport -- the old inline style compensated with a
       body margin; this does the same on the banner itself, landing it at
       true y0. */
    /* Pinned to the VIEWPORT (2026-07-30): the legacy html/body -10px margin
       nets out differently across environments (banner clipped on some,
       flush on others). Fixed at true y0 ends the ambiguity; the banner-state
       ladder already assumes 0-20, and flow offsets below are explicit. */
    margin: 0 !important;
    /* in-flow again: .main-bg is pinned to top:0 now, so the banner's flow
       position IS y0 in every environment, and it pushes content naturally */
    position: relative;
    z-index: 950;   /* above the rail */
}
#warning-bar ~ #main-content #header-right-section.header-rail { top: 15px !important; }

/* #charts is FIXED at top:20 from the pre-rail era -- its header ran under
   the 32px rail and produced the tangled top-right. It starts below the rail
   now, and below rail+banner when a system message is up. (:has because
   #charts precedes #warning-bar in the DOM, so a sibling combinator can't
   reach it.) */
#charts { top: 32px !important; }
.main-bg:has(#warning-bar) #charts { top: 47px !important; }
#warning-bar ~ #main-content #header-text { top: 47px !important; }
#warning-bar ~ #main-content #logo { top: 45px !important; }
#warning-bar ~ #main-content #top-menu { top: 93px !important; }
/* flow shifts ~34px with the banner but the nav ladder only 18 -- the
   banner state needs its own flow offset to keep the 2px nav gap */
#warning-bar ~ #main-content .main-region { margin-top: 98px !important; }
#warning-bar ~ #main-content #market-ticker-bar { top: 48px !important; }
#header-right-section.header-rail .header-item,
#header-right-section.header-rail .whats-new-button { white-space: nowrap; }
.header-rail .action-button-new { background: none !important; }
.rail-updated {
    /* A chip, not italic fine print: the freshest fact on the page deserves
       to read like a status, and it anchors the left group. */
    font-style: normal;
    font-weight: 600;
    font-size: 11.5px;
    color: var(--common);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    /* chip background removed 2026-07-30: plain text in the rail */
    margin-right: 6px;
}

/* Space the rail out: left group = Updated chip + help links, right group =
   counters and the theme toggle. */
#header-right-section.header-rail { gap: 11px; }

/* When a system banner is up, the ABSOLUTE header band shifts via the rules
   above -- but #main-content's own flow (title bar, chips, grid, sidebar)
   anchors to coordinates that don't know about the banner. Padding the
   container moves all of it as one. */
#warning-bar ~ #main-content { padding-top: 4px !important; }
.rail-spacer { flex: 1; }

/* Full-bleed scan header (2026-07-29): the green heading bar and the defs bar
   end where the scan area ends instead of at fixed 742/719px, matching the
   full-width chip strip below. #show-chart leaves its fixed viewport perch
   (left:501) and floats at the bar's right edge so the bell/heart/overflow
   buttons track the bar. Scoped >700px: the mobile block re-lays all of this
   out and must keep winning below the collapse boundary. */
@media (min-width: 701px) {
    /* --scan-right (set inline on #main-content from _chartLeft) is the chart
       panel's left edge = the visible grid's right edge. The bars and the chip
       strip fill the scan area but wrap/stop there instead of running under
       the fixed #charts panel. Left offset never enters the math: the cap is a
       right margin, so it holds in collapsed mode too. */
    /* wide screens: right edge locks to Add Live Data's right edge (~879 =
       140 left + 739) -- the classic 742px alignment; narrower screens keep
       the viewport clamp */
    .grid-heading-text { width: min(739px, calc(100vw - 158px)); margin-right: 0; }
    #show-chart { position: static; float: right; width: auto; margin: 4px 0 0 8px; }
    /* doubled class beats the theme sheets' later .scan-defs-text-long width */
    .scan-defs-text, .scan-defs-text.scan-defs-text-long, .scan-defs-text.scan-defs-text-short { width: min(736px, calc(100vw - 161px)) !important; margin-right: 0; }
    /* wraps at the header's bell/heart/overflow right edge (~878) on wide
       screens; the calc arm keeps the 700-960px viewport clamp. (A later
       plain calc() rule used to override the min() here, so wide screens
       never capped and the chips ran under the docked charts.) */
    #filtered:not(.filtered-mini-grid) #filtered-out-criteria { max-width: min(743px, calc(100vw - 170px)); margin-right: 0; }
    /* 700-960px: the grid's 885px min-width exceeds the viewport, so the
       full-bleed bars (and the right-floated bell/heart/overflow strip)
       ended past the screen edge. Clamp to the viewport too. */
    .grid-heading-text { max-width: calc(100vw - 158px); }
    .scan-defs-text, .scan-defs-text-long, .scan-defs-text-short { max-width: calc(100vw - 161px); }
    #heading-text { width: min(540px, calc(100vw - 330px)); }
    /* the chevron anchors to #filtered-out-criteria itself now (position:relative),
       so no viewport math is needed to track the capped edge — with docked charts
       the old calc shoved it clear across onto the leading chips. */
}

/* Rail progressive disclosure on narrow viewports (2026-07-29): drop the
   least essential items first as the rail runs out of room. */
@media (max-width: 760px) { .rail-online, .rail-supporters { display: none !important; } }
@media (max-width: 700px) { .rail-howto { display: none !important; } }
@media (max-width: 620px) { .rail-guide { display: none !important; } }
@media (max-width: 520px) { .rail-discord { display: none !important; } }
@media (max-width: 440px) { .rail-calendar { display: none !important; } }
@media (max-width: 700px) {
    /* phone widths normally force collapsed mode, where the toggle is
       meaningless -- but scope to .zb-collapsed: a user who manually
       EXPANDED and then narrowed the window still needs the chevron to
       collapse again */
    html.zb-collapsed #rail-toggle { display: none !important; }
    /* no chevron to clear -- reclaim its 11px indent (chip strip + label) */
    html.zb-collapsed #filtered-out-criteria { margin-left: 1px; }
    html.zb-collapsed #filtered-out { margin-left: 3px; }
}
/* The collapse/expand chevron only means something when the left scan menu
   exists -- hide it wherever the menu region is hidden or absent (multi-scan,
   home/intro, alerts, account, turbo). #rail-toggle is a BODY child. */
body:has(#menu-region.menu-region-hidden) #rail-toggle,
body:not(:has(#menu-region)) #rail-toggle { display: none !important; }
/* delay pill as a rail item (moved from #updated-time 2026-07-30) */
#header-right-section #delayed-status { float: none; display: flex; align-items: center; white-space: nowrap; font-size: 11.5px; }
/* banner pushes the header band ~30px; the toggle follows */
/* the defs bar only renders when the scan has a definition -- track it,
   plus the banner shift, with explicit :has states */
/* html:not(.zb-collapsed): in collapsed mode the defs bar is display:none
   but still in the DOM, so :has() would match and drag the toggle down.
   min-width 769: a 768 media rule hides the defs line below that, so the
   defs-aware positions only apply where the bar actually renders. */
html:not(.zb-collapsed) body:has(#warning-bar) #rail-toggle { top: 158px; }
@media (min-width: 769px) {
    html:not(.zb-collapsed) body:has(.scan-defs-text) #rail-toggle { top: 162px; }
    html:not(.zb-collapsed) body:has(#warning-bar):has(.scan-defs-text) #rail-toggle { top: 182px; }
}
/* Below the 262px floor: .main-bg is position:fixed (viewport-sized, cannot
   scroll), so the body floor alone could not stop the squish. Demote it to
   absolute so it rides the document's horizontal scrollbar, and floor it. */
@media (max-width: 261px) {
    html, body { overflow-x: auto; }
    .main-bg { position: absolute !important; min-width: 262px; }
    /* heading pieces size off 100vw, which keeps shrinking below the
       floor -- pin them to the 262px container so the title/strip row
       stops wrapping (min-width beats the 100vw max-width) */
    .grid-heading-text { min-width: 262px; max-width: 262px !important; }
    #heading-text { width: 122px !important; } /* 262 - 140 strip lane */
}
/* When the 400px per-chart floor cannot fit the window, the fixed panel used
   to clip with no recourse -- bound it to the viewport and let it scroll. */
#charts { max-height: calc(100vh - 37px); overflow-y: auto; overflow-x: hidden; } /* 32 top + 5 margin */
body:has(#warning-bar) #charts { max-height: calc(100vh - 52px); }