:root { color-scheme: light dark; }
  * { box-sizing: border-box; }
  body { margin: 0; padding: 20px; background: #0d0f14; color: #e6e8eb;
         font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
  h1 { font-size: 20px; margin: 0 0 4px; }
  .meta { color: #9aa0a6; font-size: 13px; margin-bottom: 16px; }
  .meta a { color: #5b9cf6; text-decoration: none; }
  /* Category filter pills */
  .cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
  .cat { background: #161922; color: #cbd2da; border: 1px solid #23262d; border-radius: 999px;
         padding: 5px 12px; font-size: 13px; cursor: pointer; }
  .cat:hover { background: #1c2029; }
  .cat.active { background: #2563eb; border-color: #2563eb; color: #fff; }
  .cat .n { color: #9aa0a6; font-size: 11px; margin-left: 5px; }
  .cat.active .n { color: #dbe4ff; }
  /* Mirror scrollbars pinned to the top & bottom of the viewport so a wide table
     is scrollable from either edge; the table's own scrollbar is hidden. */
  .scrolltop { position: sticky; top: 0; z-index: 6; overflow-x: auto; overflow-y: hidden; background: #0d0f14; }
  .scrollbot { position: sticky; bottom: 0; z-index: 6; overflow-x: auto; overflow-y: hidden; background: #0d0f14; margin-top: 6px; }
  .scrolltop > div, .scrollbot > div { height: 1px; }
  .wrap { overflow-x: auto; scrollbar-width: none; }
  .wrap::-webkit-scrollbar { display: none; }
  table { border-collapse: collapse; width: 100%; }
  th, td { padding: 6px 10px; border-bottom: 1px solid #20242c; white-space: nowrap; }
  /* Pinned header: screener.js translates the whole <thead> on page scroll (position:sticky
     can't escape .wrap's overflow container). z-index keeps it painting above the rows. */
  thead { position: relative; z-index: 4; }
  th { background: #0d0f14;
       text-align: right; color: #9aa0a6; font-weight: 600; font-size: 12px;
       text-transform: uppercase; letter-spacing: 0.03em; }
  th[data-type] { cursor: pointer; user-select: none; }
  th.sorted-asc::after { content: " ▲"; color: #9aa0a6; }
  th.sorted-desc::after { content: " ▼"; color: #9aa0a6; }
  /* Market-cap tier banner rows */
  tr.grouphdr td { background: #12151c; border-top: 1px solid #2b2f38;
                   border-bottom: 1px solid #2b2f38; padding: 0; cursor: pointer; }
  tr.grouphdr:hover td { background: #1c2029; }
  tr.grouphdr .gl { display: flex; align-items: center; justify-content: space-between;
                    padding: 8px 14px; color: #aeb6c2; font-weight: 600; font-size: 11px;
                    letter-spacing: 0.05em; text-transform: uppercase; }
  tr.grouphdr .arr { display: inline-block; width: 12px; color: #6b7280; }
  tr.grouphdr.collapsed .gl { color: #7f8794; }
  tr.grouphdr .gn { color: #6b7280; font-weight: 600; }
  th.co, td.co, th.str, td.str { text-align: left; }
  td.num { text-align: right; font-variant-numeric: tabular-nums; }
  /* SVG trend-chart columns */
  th.spark, td.spark { text-align: left; padding-top: 4px; padding-bottom: 4px; }
  th.trendstart, td.trendstart { border-left: 2px solid #2b2f38; }
  svg.spark { display: block; }
  td.spark { cursor: pointer; }
  /* Click-to-expand interactive chart (modal) */
  .chartmodal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 50;
                display: none; align-items: center; justify-content: center; }
  .chartmodal.open { display: flex; }
  .chartbox { background: #11141b; border: 1px solid #2b2f38; border-radius: 12px;
              padding: 16px; width: min(900px, 94vw); }
  .charthead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .charthead .t { font-weight: 600; font-size: 15px; }
  .charthead .sub { color: #9aa0a6; font-size: 12px; margin-left: 8px; }
  .charthead .x { cursor: pointer; color: #9aa0a6; font-size: 20px; line-height: 1; user-select: none; }
  .chartwrap { position: relative; }
  svg.bigchart { width: 100%; height: auto; display: block; cursor: crosshair; }
  .chart-tip { position: absolute; pointer-events: none; background: #1c2029;
               border: 1px solid #2b2f38; border-radius: 6px; padding: 4px 8px;
               font-size: 12px; color: #e6e8eb; white-space: nowrap; display: none;
               transform: translate(-50%, -135%); }
  .chart-tip b { font-variant-numeric: tabular-nums; }
  th.rank, td.rank { text-align: right; color: #6b7280; }
  /* Frozen left columns (# + Company) while scrolling horizontally: sticky-left works here
     because .wrap itself is the horizontal scroller. --rankw = measured rank-column width. */
  th.rank, td.rank, th.co, td.co { position: sticky; z-index: 2; background: #0d0f14; }
  th.rank, td.rank { left: 0; }
  th.co, td.co { left: var(--rankw, 44px); }
  thead th.rank, thead th.co { z-index: 3; }         /* above sibling headers when overlapping */
  tbody tr:hover td.rank, tbody tr:hover td.co { background: #151922; }  /* keep row hover */
  tr.grouphdr .gltext { position: sticky; left: 14px; }  /* tier label stays readable too */
  /* Sentiment cell + "what's being said" drawer */
  td.sent { cursor: pointer; }
  #sentbody .big { font-size: 20px; font-weight: 600; }
  #sentbody .chips { color: #9aa0a6; font-size: 12px; margin-top: 6px; }
  #sentbody .refs { margin-top: 12px; max-height: 56vh; overflow-y: auto; }
  #sentbody .ref { display: block; padding: 8px 0; border-top: 1px solid #1c1f26;
                   color: #e6e8eb; text-decoration: none; font-size: 13px; }
  #sentbody .ref:hover { background: #161922; }
  #sentbody .ref .sc { float: right; margin-left: 10px; font-variant-numeric: tabular-nums; }
  #sentbody .ref .src { color: #9aa0a6; font-size: 11px; margin-top: 2px; }
  tbody tr:hover { background: #151922; }
  /* Company cell: logo + ticker (Flexbox row). Scoped to the inner div — the td/th also
     carry class "co", and display:flex on a table cell rips it out of table layout
     (cell stops stretching to row height -> misaligned borders/content across columns). */
  div.co { display: flex; align-items: center; gap: 8px; }
  .logo { width: 20px; height: 20px; border-radius: 4px; object-fit: contain;
          background: #fff; flex: none; }
  .logo.ph { display: inline-flex; align-items: center; justify-content: center;
             background: #2b2f38; color: #9aa0a6; font-size: 11px; font-weight: 600;
             position: relative; overflow: hidden; }
  /* FMP logo overlaid on the lettered avatar; removed on error to reveal the letter. */
  .logoimg { position: absolute; inset: 0; width: 100%; height: 100%;
             object-fit: contain; background: #fff; }
  .tkr { font-weight: 600; }
  /* --- Ads-friendly layout (trimmed table + sticky right rail) --- */
  .topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .cols { background: #161922; color: #cbd2da; border: 1px solid #23262d; border-radius: 8px;
          padding: 6px 11px; font-size: 13px; cursor: pointer; white-space: nowrap; }
  .cols:hover { background: #1c2029; }
  .col-hidden { display: none; }                 /* columns trimmed from the default view */
  /* "+ Columns" chooser panel */
  .colpanel { position: absolute; display: none; z-index: 40; background: #11141b;
              border: 1px solid #2b2f38; border-radius: 8px; padding: 6px; min-width: 190px;
              max-height: 64vh; overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
  .colpanel.open { display: block; }
  .colpanel label { display: flex; align-items: center; gap: 8px; padding: 5px 8px;
                    font-size: 13px; color: #cbd2da; cursor: pointer; white-space: nowrap; border-radius: 6px; }
  .colpanel label:hover { background: #161922; }
  .colpanel input { accent-color: #2563eb; }
  .maincol { min-width: 0; }

  /* Breaking-news strip (live; polls /api/breaking). Sits under the topbar.
     Hidden by default; .show is added by screener.js only once it has content (a plain
     [hidden] attribute doesn't work here — the .bk display rule would override it). */
  .bk { display: none; }
  /* Plain block layout (no flexbox) so the list can't collapse to zero size. */
  .bk.show { display: block; position: relative; margin: 0 0 10px;
        padding: 9px 36px 9px 14px; background: #1c2331; color: #eaf0f6;
        border: 1px solid #2c3446; border-left: 4px solid #f59e0b; border-radius: 8px;
        font-size: 13px; }
  .bk-tag { display: inline-block; margin-bottom: 5px; color: #ffb020; font-weight: 800;
            font-size: 11px; letter-spacing: .07em; }
  .bk-list { max-height: 150px; overflow-y: auto; padding-right: 6px;
             scrollbar-width: thin; scrollbar-color: #3a3f4a transparent; }
  .bk-list::-webkit-scrollbar { width: 8px; }
  .bk-list::-webkit-scrollbar-thumb { background: #3a3f4a; border-radius: 4px; }
  .bk-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 0; }
  .bk-item { color: #e3e9f1; }
  .bk-item a { color: #e3e9f1; text-decoration: none; }
  .bk-item a:hover { color: #fff; text-decoration: underline; }
  .bk-sym { font-weight: 700; color: #ffffff; }
  .bk-src { font-size: 11px; }
  .bk-src.sec { color: #2ee6a0; } .bk-src.wire { color: #aab2c0; }
  .bk-age { color: #8b94a4; font-size: 11px; }
  .bk-x { position: absolute; top: 7px; right: 10px; background: none; border: 0;
          color: #8b94a4; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
  .bk-x:hover { color: #fff; }
  .bk-item.fresh { animation: bkpulse 1.8s ease-out 3; }
  @keyframes bkpulse { 0% { background: rgba(245,158,11,.22); } 100% { background: transparent; } }

  /* Custom trend column: two-handle window slider in the header + per-cell % badge */
  th[data-col="custom"] { min-width: 170px; }
  th[data-col="custom"] .cust-label { cursor: pointer; }
  .cust-dates { display: block; color: #6b7280; font-size: 10px; font-weight: 400; }
  .custslider { position: relative; height: 14px; margin-top: 3px; }
  .custslider .track { position: absolute; left: 0; right: 0; top: 6px; height: 2px;
                       background: #2c3446; border-radius: 1px; }
  .custslider .span { position: absolute; top: 5px; height: 4px; background: #2563eb;
                      border-radius: 2px; cursor: grab; }
  .custslider .handle { position: absolute; top: 1px; width: 12px; height: 12px; margin-left: -6px;
                        border-radius: 50%; background: #e6e8eb; border: 2px solid #2563eb;
                        cursor: ew-resize; box-sizing: border-box; }
  /* Custom cell = flex row so the block sparkline and the % badge share one line,
     keeping the row the same height as every other spark cell. */
  .custwrap { display: flex; align-items: center; gap: 6px; }
  td .cust-pct { font-size: 11px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

  /* "hide StockTwits" toggle in the sentiment drawer */
  #sentbody .sttog { display: flex; align-items: center; gap: 6px; color: #9aa0a6;
                     font-size: 12px; margin-top: 8px; cursor: pointer; }

  /* "⇅ Sort" multi-column comparator panel + numbered level badges in headers */
  .sortpanel { min-width: 280px; }
  .sortpanel .ms-title { color: #9aa0a6; font-size: 11px; text-transform: uppercase;
                         letter-spacing: .04em; padding: 4px 8px; }
  .mslevel { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
  .mslevel select { background: #0f1115; color: #e6e8eb; border: 1px solid #23262d;
                    border-radius: 6px; padding: 4px 6px; font-size: 12px; }
  .mslevel .ms-col { flex: 1 1 auto; min-width: 0; }
  .mslevel .ms-x, .mslevel .ms-up { cursor: pointer; color: #6b7280; padding: 0 2px; }
  .mslevel .ms-x:hover, .mslevel .ms-up:hover { color: #e6e8eb; }
  .ms-actions { display: flex; gap: 6px; padding: 6px 8px; }
  th[data-mslevel]::after { content: " " attr(data-mslevel); color: #6ea8fe; font-size: 10px; }