:root{
    --ink:#1c2430; --muted:#6b7685; --line:#e6e9ee; --brand-green:#7CA56E;
    --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; }
  /* Advanced "Filters" (category cards + their chip panels) hidden for now
     - the Quick filter row above it stays visible/functional. #filtersToggleBtn
     is the only way to open #categoryRow or the mobile filter drawer, so
     hiding it fully disables the feature without touching the markup/JS. */
  #filtersToggleBtn, #categoryRow, .quick-filter-divider{ display:none !important; }
  body{ background:#f6f7f9; color:var(--ink); font-family:'Roboto'; }
  /* 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; }
  .country-switch-dd { position:relative; display:inline-block; flex-shrink:0; }
  .country-switch-trigger {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    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);
    right: 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; }
  .breadcrumb-row {
    background: #E7EBF9;
}
  .breadcrumb-items a { color: var(--ink); }
/* category cards */
.cat-card{
  border:1px solid var(--line); background:#fff; border-radius:10px; padding:12px;
  display:flex; align-items:center; gap:10px; cursor:pointer; min-width:170px; user-select:none;
  transition:box-shadow .15s ease, border-color .15s ease;
}
.cat-card:hover{ box-shadow:0 2px 10px rgba(20,30,50,.06); }
.cat-card.active{ background:var(--brand-green); border-color:var(--brand-green); color:#fff; }
.cat-card .cat-icon{ width:38px; height:38px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; }

.cat-icon.mkt-icon{ background:#E6F9E0; }
.cat-icon.tech-icon{ background:#FDF1ED; }
.cat-icon.financial-icon{ background:#E2ECFB; }
.cat-icon.valuation-icon{ background:#FDF2E0; }
.cat-icon.growth-icon{ background:#E6F9E0; }
.cat-icon.margin-icon{ background:#E2ECFB; }
.cat-icon.dividend-icon{ background:#FDF1ED; }
.cat-card .cat-sub{ font-size:.8rem; opacity:.75; display:flex; align-items:center; gap:4px; }
.cat-card .cat-name{ font-weight:500; font-size:1rem; }

  /* Quick filter row - the most commonly used filter chips, relocated
     here (not duplicated) from their original category panels, so each
     is still a single, independent filter control with its own dropdown -
     no separate "shortcut" indirection and nothing to keep in sync. The
     "Filters" toggle for the category system lives in this same row
     (last item, past a divider) rather than floating on its own line
     below. */
  .quick-filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:16px; }
  .quick-filter-label{ font-weight:600; font-size:.85rem; color:var(--muted); margin-right:2px; }
  .quick-filter-divider{ width:1px; align-self:stretch; background:var(--line); margin:0 2px; }

  /* Category filters (the cat-card row + its chip panels) stay collapsed
     behind this toggle button until clicked - kept as a separate section
     from the always-visible quick filter row above. */
  .filters-toggle-btn{
    border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px; font-weight:600;
    padding:8px 14px; font-size:.88rem; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    flex-shrink:0;
  }
  .filters-toggle-btn:hover{ border-color:#c7ccd4; }
  .filters-toggle-btn.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .filters-collapsed #categoryRow, .filters-collapsed .chip-panel{ display:none !important; }

  /* chip panels */
  .chip-panel{ background:#fff; }
  .filter-chip{
    border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:8px;font-weight:500;
    padding:7px 12px; font-size:1rem; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  }
  .filter-chip:hover{ border-color:#c7ccd4; }
  .filter-chip.selected{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .filter-chip .bi-plus{ display:inline;font-size: 20px;
    line-height: 10px;color:var(--ink); }
  .filter-chip .bi-x{ display:none; }
  .filter-chip.selected .bi-plus{ display:none; }
  .filter-chip.selected .bi-x {
    display: inline;
    font-size: 20px;
    line-height: 10px;
    color: #A5B4E9;
}
  .clear-all-link{ color:var(--muted); font-size:.88rem; cursor:pointer; padding-left: 8px; }
  .clear-all-link:hover{ color:var(--ink); }

  /* active filters */
  .active-tag{
    background:#eef2ff; color:#33415c; border:1px solid #d7e0f5; border-radius:8px;
    padding:6px 10px; font-size:.85rem; display:inline-flex; align-items:center; gap:8px;
  }
  .active-tag b{ font-weight:600; }
  .active-tag .bi-x{ cursor:pointer; opacity:.6; }
  .active-tag .bi-x:hover{ opacity:1; }

  .filter-dropdown{
    position:absolute; z-index:1050; width:340px; 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:16px; display:none;
  }
  .filter-dropdown .popup-title{ font-weight:700; margin-bottom:10px; }
  .filter-dropdown .period-select{ font-weight:600; }
  .filter-dropdown .opt-item{ padding:9px 10px; border-radius:7px; cursor:pointer; font-size:.92rem; }
  .filter-dropdown .opt-item:hover{ background:#f4f5f7; }
  .filter-dropdown .opt-item.chosen{ background:#eef2ff; color:var(--accent); font-weight:600; }
  .filter-dropdown .manual-label{ font-weight:600; font-size:.85rem; margin-top:6px; }

  /* ======= Range filter preset buckets (single-click sets min/max) ======= */
  .range-preset-list{ max-height:260px; overflow-y:auto; }
  .range-preset-item{ padding:9px 10px; border-radius:7px; cursor:pointer; font-size:.92rem; }
  .range-preset-item:hover{ background:#f4f5f7; }
  .range-preset-tier{ color:var(--muted); font-size:.82rem; }

  /* ======= Sector/Industry checklist (multi-select) filter dropdowns ======= */
  .filter-dropdown .fd-checklist{ max-height:260px; overflow-y:auto; margin-bottom:12px; }
  .filter-dropdown .fd-check-item{
    display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px;
    cursor:pointer; font-size:.9rem; font-weight:400; margin-bottom:0;
  }
  .filter-dropdown .fd-check-item:hover{ background:#f4f5f7; }
  .filter-dropdown .fd-check-item input{ cursor:pointer; }

  /* ======= Custom period selector (no Bootstrap dropdown/Popper dependency) ======= */
  .period-select-wrap{ position:relative; display:inline-block; }
  .period-select-wrap .period-select{ display:flex; align-items:center; gap:6px; }
  .period-select-wrap .period-menu{
    display:none; position:absolute; top:100%; left:0; margin-top:4px; z-index:20;
    background:#fff; border:1px solid var(--line); border-radius:8px; min-width:150px;
    box-shadow:0 8px 24px rgba(20,30,50,.14); padding:6px 0; list-style:none;
  }
  .period-select-wrap .period-menu.show{ display:block; }
  .period-select-wrap .period-menu li{ padding:8px 14px; font-size:.88rem; cursor:pointer; }
  .period-select-wrap .period-menu li:hover{ background:#f4f5f7; }

ul#viewTabs {
    overflow-x: auto;
    display: flex;
    flex-wrap: nowrap;
    padding: 15px 20px 22px;
}
ul#viewTabs li {
    width: auto;
    white-space: nowrap;
}
.applyfilter{
  background: linear-gradient(182.49deg, #FF9818 -198.73%, #FCB603 5.35%, #B700F8 212.68%);
}
p#matchCount{
  display: flex;
  gap:10px;
  align-items: center;
  margin-bottom:0px;
}
p#matchCount span {
    font-size: 13px;
    font-weight: 400;
}
  /* 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: #000;
    font-size: 15px;
}
.stock-name span {
    font-weight: 400;
    font-size: 12px;
}
  :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:400; font-size:14px; color:#48494C; border-bottom:1px solid var(--line) !important;
    white-space:nowrap; padding:6px 16px; background:#fff; vertical-align:middle;
    position:sticky; top:var(--sticky-top); z-index:4;font-family: 'Roboto';
  }
  table.screener td{ padding:10px; font-size:13.5px; vertical-align:middle; white-space:nowrap; border-bottom:1px solid var(--line);color: #191919;font-family: 'Roboto'; }
  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 other th here is grey/
     normal-weight by default, so a tinted background + bold black label
     makes the active column stand out clearly. */
  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; }

  /* ======= Shimmer/skeleton placeholder rows, shown while a table's data
     is loading from screener_page_api (sort/filter change, Load More) ======= */
  .skeleton-row td{ pointer-events:none; }
  .skeleton-cell{
    height:14px; width:60%; border-radius:4px; background:#eef0f2;
    background-image:linear-gradient(90deg, #eef0f2 0px, #f8f9fa 40px, #eef0f2 80px);
    background-size:600px 100%; animation:screenerShimmer 1.4s ease-in-out infinite;
  }
  .skeleton-cell.skeleton-cell-wide{ width:85%; height:32px; border-radius:8px; }
  @keyframes screenerShimmer{
    0%{ background-position:-300px 0; }
    100%{ background-position:300px 0; }
  }

  .stock-table thead th {
    padding: 10px 16px;
    vertical-align: middle;
    white-space: nowrap;
    border-bottom:1px solid var(--line);
}

/* Main header wrapper */
.stock-table thead th .th-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

/* Text section */
.stock-table thead th .th-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 22px;
    line-height: 1.1;
    font-weight: 400;
    color: #454545;
}

/* Unit underneath */
.stock-table thead th .col-unit {
    display: block;
    margin-top: 7px;
    font-size: 16px;
    line-height: 1;
    font-weight: 400;
 
    color: #999ca1;
}

/* Sort arrow */
.stock-table thead th .sort-icon {
    flex: 0 0 auto;
    font-size: 30px;
    line-height: 1;
    color: #9a9da2;
    cursor: pointer;
    transition: color 0.2s ease,
                transform 0.2s ease;
}

.stock-table thead th .sort-icon:hover {
    color: #333;
}

/* Active sorting */
.stock-table thead th .sort-icon.active {
    color: #222;
}
.th-content {
    display: flex;
    align-items: center;
}
th.addcol-th {
    position: sticky;
    right: 0px;
    padding:5px !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;
}

  .sticky-col{ position:sticky; left:0; background:#fff; 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: #fff;
    background: var(--ink);
    font-size: 27px;
  text-shadow: 0.2px 0.2px; }
  .add-col-btn:hover{ border-color:var(--accent); color:#fff; }
  /* add-column popup — static markup, JS only shows/positions/hides it */
  #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; }

  /* ===================== MOBILE FILTER BUTTON ===================== */
  .mobile-filter-btn{
    border:1px solid var(--line); border-radius:10px; padding:12px; font-weight:600; color:var(--ink);
    background:#fff; display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .cat-chevron-mobile{ display:none; color:var(--muted); }
  .filter-shell-header, .filter-shell-detail-header{ display:none; }

  .search-input-wrapper{
    position:relative;
  }
  .search-icon {
    position: absolute;
    left: 12px;
    top: 7px;
    color: #767373;
}
.search-input-wrapper input{
    padding: 8px 8px 8px 35px;
}

table.screener td.sticky-col, table.screener th.sticky-col {
    position: sticky;
    left: 0;
    background: #fff;
}

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;
}

  .mobile-filter-footer{ display:none; }

  #categoryRow{
    overflow-x: auto;
    padding-bottom: 8px;
  }
  #categoryRow::-webkit-scrollbar, ul#viewTabs::-webkit-scrollbar, .table-scroll::-webkit-scrollbar {
  height: 10px;
  width: 10px; 
}
#categoryRow::-webkit-scrollbar-track, ul#viewTabs::-webkit-scrollbar-track, .table-scroll::-webkit-scrollbar-track {
  background-color: #EEF0FF;
  border-radius: 5px;
}

#categoryRow::-webkit-scrollbar-thumb, ul#viewTabs::-webkit-scrollbar-thumb, .table-scroll::-webkit-scrollbar-thumb {
  background: #C4CBFF;
  border-radius: 10px;border: 3px solid #EEF0FF;
}

  /* ===================== MOBILE LAYOUT FOR THE SAME DESKTOP FILTERS ===================== */
  @media (max-width: 767.98px){
   ul#viewTabs {
    padding: 10px 10px 15px;
}
    .tab-nav .nav-link {
    padding: 3px 2px;
}
 table.screener td, table.screener thead th {
    padding: 8px 6px;
    font-size: 13px;
    }
    table.screener td.sticky-col {
        width: 150px;
        max-width: 150px;
        min-width: 150px;
    }

    table.screener td.sticky-col .stock-name {
        min-width: 0;
        max-width: calc(200px - 50px);
    }

    table.screener td.sticky-col .stock-name span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .cat-card .cat-name {
    font-size: 14px;
    white-space: nowrap;
}
.cat-card {
    padding: 8px;
    min-width: 140px;
}
.cat-chevron-mobile{ display:none; }

  }

  /* chip-panel accordion is desktop-only; mobile uses the drawer below */
  @media (max-width: 767.98px){
    .chip-panel{ display:none !important; }
  }

  /* ===================== MOBILE FILTER DRAWER (master–detail) ===================== */
  .mobile-filter-drawer{
    display:none; position:fixed; inset:0; z-index:2000; background:#fff;
    flex-direction:column;
  }
  .mobile-filter-drawer.open{ display:flex; }
  .mfd-header{
    display:flex; align-items:center; gap:14px; padding:16px; border-bottom:1px solid var(--line);
    flex:0 0 auto;
  }
  .mfd-header .mfd-back{ font-size:1.3rem; cursor:pointer; color:var(--ink); line-height:1; }
  .mfd-header .mfd-title{ font-weight:700; font-size:1.15rem; }
  .mfd-body{ flex:1; display:flex; overflow:hidden; }
  .mfd-nav{ width:150px; flex:0 0 150px; background:#f5f6f8; overflow-y:auto; padding:10px 0; }
  .mfd-nav-item{
    padding:14px 16px; font-weight:600; font-size:.92rem; color:#496DBF; cursor:pointer;
    display:flex; align-items:center; gap:6px;
  }
  .mfd-nav-item.current{ background:#334E8C; color:#fff; margin:0 8px; border-radius:8px; padding:14px 10px; }
  .mfd-nav-item .mfd-dot{ width:6px; height:6px; border-radius:50%; background:#496DBF; flex:0 0 auto; }
  .mfd-nav-item.current .mfd-dot{ background:#fff; }
  .mfd-detail{ flex:1; overflow-y:auto; padding:18px 16px; }
  .mfd-optlist .opt-item{ padding:8px 10px; border-radius:7px; cursor:pointer; font-size:.92rem; display:flex; align-items:center; justify-content:space-between; }
  .mfd-optlist .opt-item:hover{ background:#f4f5f7; }
  .mfd-optlist .opt-item.chosen{ background:#eef2ff; color:var(--accent); font-weight:600; }
  .mfd-optlist .opt-item.chosen::after{ content:"\2713"; }
  .mfd-footer{
    display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
    border-top:1px solid var(--line); flex:0 0 auto;
  }
  .mfd-footer .mfd-clear{ color:var(--muted); font-weight:500; cursor:pointer; font-size:.92rem; }
  .mfd-footer .mfd-apply {
    border: 0;
    color: #fff;
    font-weight: 400;
    padding: 6px 34px;
    border-radius: 8px;
    font-size: .95rem;
    background: linear-gradient(182.49deg, #FF9818 -198.73%, #FCB603 5.35%, #B700F8 212.68%);
  }
  @media (min-width:768px){
    .mobile-filter-drawer{ display:none !important; }
  }
  @media (max-width:768px){
    .mfd-nav-item.current {
      margin: 0 8px;
      padding: 10px 10px;
      font-weight: 500;
      line-height: normal;
    }
    .mfd-nav-item{
      padding: 8px 16px;
      font-weight: 500;
      font-size: 14px;
      line-height: normal;
    }
  }

  /* ===================== CONSOLIDATED LAYOUT / UTILITY-STACK REPLACEMENTS ===================== */
  .screener-container{ max-width:100%; padding:24px; }

  .breadcrumb-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
  .breadcrumb-items{ display:flex; align-items:center; gap:8px; padding:8px 0; flex-wrap:wrap; }

  .page-title{ margin-bottom:24px; font-size:1.25rem; }

  #categoryRow{ display:flex; align-items:flex-start; gap:8px; margin-bottom:12px; }

  /* chip category panels */
  .chip-panel{ border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:12px; }
  .chip-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

  /* filter-dropdown popup internals (header / min-max row / footer buttons) */
  .fd-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
  .fd-minmax{ display:flex; gap:8px; margin-bottom:12px; }
  .fd-col{ flex:1; }
  .fd-footer{ display:flex; justify-content:space-between; }
  .fd-cancel{ border:0; background:none; padding:0; color:var(--muted); text-decoration:none; font-size:.9rem; cursor:pointer; }
  .fd-cancel:hover{ color:var(--ink); }
  .applyfilter{ border:0; color:#fff; padding:6px 20px; border-radius:6px; font-size:.9rem; cursor:pointer; }
  .applyfilter:disabled{ background:#ccc; opacity:.7; cursor:not-allowed; }

  .period-select{ border:1px solid var(--line); background:#f4f5f7; border-radius:6px; padding:6px 10px; font-size:.85rem; }

  /* table toolbar + active filter tags */
  .table-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
  .active-filters-row{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:24px; }
  .active-tags{ display:flex; flex-wrap:wrap; gap:8px; }

  /* stock table row cell */
  .stock-cell{ display:flex; align-items:center; gap:8px; }

  p#matchCount{ font-weight:700; font-size:1.25rem; }
  .stock-name a{ font-weight:700; display:grid; }
  .stock-name span{ color:var(--muted); }