:root{
    --ink:#1c2430; --muted:#6b7685; --line:#e6e9ee; --brand-green:#1a8a4a;
    --up:#1a8a4a; --down:#d64545; --accent:#0b3d91;
  }
  /* The sitewide floating "Free Trial" tab (layouts/popups.html, shared
     across every page) - hidden on this page only, without touching that
     shared template. */
  .buttontrail{ display:none !important; }
  body{ background:#f6f7f9; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
  /* The site's shared header (layouts/new/header.html) nests a max-width
     Bootstrap .container inside its full-width .headerbar - widen it to
     the full viewport on this page only, without touching the shared
     partial used site-wide. */
  /* .headerbar/.marqueestats are themselves .container-fluid, with their
     own default Bootstrap padding - zeroed so the nested .container's
     padding below is the only inset, matching the body's .mkt-pad. */
  .headerbar, .marqueestats{ padding-left:0; padding-right:0; }
  .headerbar .container, .marqueestats .container{ max-width:100%; padding-left:40px; padding-right:40px; }
  .mkt-pad{ padding-left:40px; padding-right:40px; }
  @media (max-width: 767.98px){
    .headerbar .container, .marqueestats .container{ padding-left:16px; padding-right:16px; }
    .mkt-pad{ padding-left:16px; padding-right:16px; }
  }
  .page-title{ font-weight:700; letter-spacing:-.02em;font-family: 'Roboto Flex'; }
  .page-sub{     color: #48494C;
    font-size: .92rem;
    max-width: 900px;
    line-height: 1.55;
    font-family: 'Roboto';
    font-weight: 400; 
  }
    .breadcrumb-row {
    background: #E7EBF9;
}
.section-title {
    font-weight: 600;
    font-size: 24px;
    font-family: 'Roboto Flex';
}
.view-all-link {
    color: #334E8C;
    font-size: 16px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
  /* ===================== TOP BAR ===================== */
  .create-screener-btn {
    background: var(--ink);
    color: #fff;
    border: 0;
    font-weight: 400;
    padding: 8px 18px;
    border-radius: 5px;
    font-size: .85rem;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Roboto';
    letter-spacing: 0.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
  .create-screener-btn:hover{ opacity:.92; color:#fff; }

  .scr-pill-divider{ width:1px; align-self:stretch; background:var(--line); margin:2px 2px; }

  .country-switch-dd { position:relative; display:inline-block; }
  .country-switch-trigger {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all .15s ease;
  }
  .country-switch-trigger:hover{ border-color:#c7ccd4; }
  .country-switch-trigger .bi-chevron-down{ font-size:.7rem; transition:transform .15s ease; }
  .country-switch-static{ cursor:default; }
  .country-switch-static:hover{ border-color:var(--line); }
  .country-switch-dd.open .country-switch-trigger .bi-chevron-down{ transform:rotate(180deg); }
  .country-switch-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 140px;
    background: #fff;
    border: 1px solid #e1e6ee;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20,30,50,.1);
    padding: 6px;
    z-index: 20;
  }
  .country-switch-dd.open .country-switch-menu{ display:block; }
  .country-switch-menu a {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: .9rem;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .country-switch-menu a:hover{ background:#f3f5f9; }

  /* ===================== SCAN LINKS (flat list, no category grouping) ===================== */
  .scr-presets{ display:flex; flex-wrap:wrap; gap:8px; }
  /* Presets are <a> tags styled to look like the pill buttons in the reference design. */
  a.scr-pill{
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all .15s ease;
    text-decoration: none;
    display: inline-block;
  }
  a.scr-pill:hover, a.scr-pill:visited{ border-color:#c7ccd4; color:var(--ink); }
  a.scr-pill.selected,
  a.scr-pill.selected:hover,
  a.scr-pill.selected:visited,
  a.scr-pill.selected:active,
  a.scr-pill.selected:focus{ background:#1c2430; border-color:#1c2430; color:#fff; }

  /* ===================== TABLE ===================== */
  .table-card{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  .tab-nav{ border-bottom:1px solid var(--line); padding:0 16px; }
  .tab-nav .nav-link {
    color: var(--muted); border: 0; font-size: 1rem; padding: 10px 8px;
    display: flex; align-items: center; gap: 6px; cursor: pointer; margin-right: 12px;
  }
  .tab-nav .nav-link.active{ color:var(--ink); border-bottom:2px solid var(--ink); background:none; font-weight:600; }
  .stock-name a { text-decoration: none; color: var(--ink); }
  .stock-name span { font-weight: 400; }
  .breadcrumb-items a { color: var(--ink); }
  :root{ --sticky-top: 0px; }

  .table-scroll{ overflow-x:auto; max-width:100%; }
  table.screener{ margin:0; min-width:1300px; }
  table.screener thead th{
    font-weight:600; font-size:.82rem; color:var(--ink); border-bottom:1px solid var(--line) !important;
    white-space:nowrap; padding:12px 16px; background:#fff; vertical-align:middle;
    position:sticky; top:var(--sticky-top); z-index:4;
  }
  table.screener td{ padding:14px 16px; font-size:.9rem; vertical-align:middle; white-space:nowrap; border-bottom:1px solid var(--line);color: #191919; }
  table.screener tbody tr:hover td{ background:#fafbfc; }
  .sort-icon{ cursor:pointer; color:#919398; margin-left:4px; font-size:.75rem; }
  .sort-icon.asc, .sort-icon.desc{ color:var(--ink); font-weight:700; }
  /* The currently-sorted column's header - every th is already dark/bold by
     default, so a tinted background + accent-colored label is what actually
     makes the active column stand out, not just its arrow. */
  table.screener thead th.active-sort-col{ background:#eef0f4; }
  table.screener thead th.active-sort-col .th-label{ color:var(--ink); font-weight:700; }
  th .col-unit{ display:block; font-weight:400; color:var(--muted); font-size:.72rem; }
  table.screener td.sticky-col::after, table.screener th.sticky-col::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 1px;
    height: 100%;
    background: #e6e9ee;
    z-index: 20;
    pointer-events: none;
}
  .th-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
  .th-label { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
  .col-unit { display: block; margin-top: 3px; }

  th.addcol-th { position: sticky; right: 0px;padding:5px !important; }

  .sticky-col{ position:sticky; left:0; background-color:#fff !important; z-index:2; box-shadow:1px 0 0 var(--line); }
  table.screener thead th.sticky-col{ z-index:5; }
  table.screener tbody tr:hover td.sticky-col{ background:#fafbfc; }

  /* Without a cap, an unusually long company name (common on US-listed
     stocks) stretches this sticky column indefinitely, pushing every other
     column off-screen. Mobile already had this via a media query below;
     desktop needs the same truncation. */
  table.screener td.sticky-col{ width:260px; max-width:260px; min-width:260px; }
  table.screener td.sticky-col .stock-name{ min-width:0; max-width:200px; }
  table.screener td.sticky-col .stock-name span{
    display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  .sym-badge{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.7rem; color:#fff; flex:0 0 auto; position:relative; overflow:hidden; }
  .sym-badge img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
  .up{ color:#0D894F !important;} 
  .down{ color:#FF0000 !important; }
  .badge-rating{ display:inline-flex; align-items:center; gap:6px;  }
  .badge-rating .dot{ width:7px; height:7px; border-radius:50%; }
  .rating-buy .dot{ background:#1a8a4a; } .rating-buy{ color:#1a8a4a; }
  
  .rating-sell{ color:#FF8A40; }
  .rating-sell .dot{ background:#FF8A40; } 
  .rating-strong-sell .dot{ background:#FF0000; } 
  .rating-strong-sell{
    color:#FF0000;
    padding:3px 5px;
    border-radius: 5px;
    background-color: #D238381A;
  }
  .rating-neutral .dot{ background:#8a8f98; } .rating-neutral{ color:#6b7685; }

  .add-col-btn{ width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1c2430;
    background: #f6f7f9;
    font-size: 27px;
    text-shadow: 0.2px 0.2px; }
  .add-col-btn:hover{ border-color:var(--accent); color:#fff;background-color: black; }
  #addColPopup{ position:absolute; z-index:1050; width:220px; max-width:calc(100vw - 24px); background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(20,30,50,.16); padding:8px; display:none; max-height:280px; overflow-y:auto; }
  #addColPopup .form-check{ padding:8px 10px 8px 34px; border-radius:6px; }
  #addColPopup .form-check:hover{ background:#f4f5f7; }

  .d-none-col{ display:none !important; }

  /* Used to be a gradient "border" trick - an outer span padding out a
     slightly smaller inner button so a gradient background peeked through
     as a border. Both are solid black now, so the two nested rounded
     rects (each with their own border-radius) just showed through as a
     visible notch at the seam. One plain button instead. */
  #loadMoreBtn {
    border: 0px; text-decoration: none; color: #fff; font-weight: 400; font-family: 'Roboto';
    padding: 12px 20px 11px; font-size: 16px; letter-spacing: 0.2px; white-space: nowrap;
    background-color: var(--ink); border-radius: 5px;
  }

  /* ===================== NEWS ===================== */
  .news-eyebrow{ color: #48494c;
    font-size: 14px;
    font-weight: 500;
    border-left: 3px solid #D87F3F;
    padding-left: 6px;
    border-radius: 2px;
    font-family: 'Roboto'; }
  .news-featured-img{ border-radius:10px; width:100%; object-fit:cover; }
  .news-title {
    font-weight: 500;
    color: var(--ink);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 17px !important;
    font-family: 'Roboto Flex';
    margin-bottom: 3px;
}
  .news-byline{ font-size:.75rem; color:var(--muted); }
  /* CSS multi-column (column-count) auto-balances by content height, so
     there's no way to select "last item in this column" - :last-child only
     ever strips the border from the true final item, leaving the bottom
     of the first column bordered no matter how the browser splits them.
     A 2-column grid with a fixed row count instead places item 1-4 in
     column 1 and 5-8 in column 2 deterministically (see the 9-item
     limit in markets/views.py's stock_scan(): 1 featured + up to 8 here),
     so both real "bottom of column" positions are known and can be
     un-bordered together. */
  .news-columns{
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(4, auto);
    column-gap:32px;
  }
  .news-list-item {
    display: flex;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}
  .news-list-item:last-child,
  .news-list-item:nth-child(4){ border-bottom:0; }
  .news-thumb{ width:64px; height:48px; border-radius:6px; object-fit:cover; flex:0 0 auto; }
  .news-list-item .news-title{ font-size:.85rem; }


  @media (max-width: 767.98px){
    /* Single column on mobile - item 4 is no longer a column boundary, so
       put its border back (only the true last item stays unbordered). */
    .news-columns{ display:block; }
    .news-list-item:nth-child(4){ border-bottom:1px solid var(--line); }
    ul#viewTabs { padding: 10px 10px 15px; overflow-x:auto; display:flex; flex-wrap:nowrap; }
    ul#viewTabs li{ width:auto; white-space:nowrap; }
    .tab-nav .nav-link { padding: 3px 2px; }
    #addColPopup{
      position:fixed !important; inset:0 !important; top:0 !important; left:0 !important;
      width:100% !important; max-width:100% !important; height:100%;
      border-radius:0; z-index:2100;
    }
    table.screener td.sticky-col {
        width: 150px;
        max-width: 150px;
        min-width: 150px;
    }
    table.screener td.sticky-col .stock-name span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    table.screener td, table.screener thead th {
        padding: 8px 6px;
        font-size: 13px;
    }
  }