:root{
    --ink:#1c2430;
    --muted:#6b7685; 
    --line:#e9ecf1; 
    --up:#1a8a4a; 
    --down:#d64545;
    --up-bg:#e5f6ea; 
    --down-bg:#fdeaea;
  }
  /* 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:#fff; color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
  a{ text-decoration:none; }
  /* Every section on this page nests a max-width Bootstrap .container
     inside its own full-width .container-fluid - widen it to the full
     viewport on this page only. */
  /* .container{max-width:100%} also covers .headerbar/.marqueestats's own
     nested .container (shared header, widened full-width on this page only -
     see the comment above on other markets pages' CSS) - giving it the same
     padding here keeps the header/marquee's left/right inset aligned with
     the body content below (.mkt-pad), which also uses .container. */
  /* .headerbar/.marqueestats are themselves .container-fluid, with their
     own default Bootstrap padding - zeroed so the nested .container's
     padding above is the only inset. */
  .headerbar, .marqueestats{ padding-left:0; padding-right:0; }
  .container{ max-width:100%; padding-left:40px; padding-right:40px; }
  /* .container-fluid's own default Bootstrap padding would stack with the
     inner .container's above, making this page's gutter wider than Scans/
     Screener's single-layer .container-fluid.mkt-pad - zeroed here so
     .container's padding above is the only source of the gutter, matching
     those pages exactly. */
  .mkt-pad-outer{ padding-left:0; padding-right:0; }
  .mkt-pad{ padding-left:40px; padding-right:40px; }
  .country-switch-dd { position:relative; display:inline-block; flex-shrink:0; }
  .country-switch-trigger {
    border: 1px solid #e9ecf1;
    background: #fff;
    color: var(--ink);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: .9rem;
    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-dd.open .country-switch-trigger .bi-chevron-down{ transform:rotate(180deg); }
  .country-switch-static{ cursor:default; }
  .country-switch-static:hover{ border-color:#e9ecf1; }
  .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; }
  @media (max-width: 767.98px){
    .container{ padding-left:16px; padding-right:16px; }
    .mkt-pad-outer{ padding-left:0; padding-right:0; }
    .mkt-pad{ padding-left:16px; padding-right:16px; }
  }
  .page-title{ font-weight:700; letter-spacing:-.02em; font-size:28px; font-family:'Roboto Flex'; }
  .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;}
  .view-all-link:hover{ text-decoration:underline; }

.breadcrumb-row {
    background: #E7EBF9;
}
.breadcrumb-items a { color: var(--ink); }
    /* ===================== MAJOR INDICES ===================== */
    .indices-section{     background: #E2ECFB;
    padding: 35px 0; }
  .chart-card{ background:#fff; border-radius:14px; padding:20px; }
  .chart-index-name{ font-size:.85rem; color:var(--muted); margin-bottom:4px; }
  .chart-index-name i{ font-size:.7rem; margin-left:4px; }
  .chart-points{ font-size:1.4rem; font-weight:700; }
  .chart-points small{ font-size:.75rem; font-weight:400; color:var(--muted); margin-left:4px; }
  .chg-badge{ font-size:.78rem; font-weight:700; padding:3px 10px; border-radius:999px; display:inline-block; }
  .chg-badge.up{ background:var(--up-bg); color:var(--up); }
  .chg-badge.down{ background:var(--down-bg); color:var(--down); }

  .range-btn{
    border:1px solid var(--line); background:#fff; color:var(--muted); font-size:.8rem;
    font-weight:600; padding:5px 12px; border-radius:7px;
  }
  .range-btn.active{ background:#f1f4f9; color:var(--ink); border-color:var(--line); font-weight:700; }
  .chart-tool-btn{
    width:32px; height:32px; border:1px solid var(--line); border-radius:7px; background:#fff;
    display:inline-flex; align-items:center; justify-content:center; color:var(--muted);
  }

  .indices-scroll-wrap{ position:relative; margin-bottom:20px; }
  .indices-scroll{
    display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; padding:2px 4px 6px;flex-wrap: nowrap;
  }
  .indices-scroll::-webkit-scrollbar{ display:none; }

  a.idx-card{
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px 20px;
    min-width:230px; flex:0 0 auto; display:flex; align-items:center; gap:10px;
    color:inherit; transition:border-color .15s ease, box-shadow .15s ease;
  }
  a.idx-card:hover{ border-color:#c7ccd4; color:inherit; }
  a.idx-card.active{ border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }

  .idx-flag{
    width:34px; height:34px; border-radius:120px; flex:0 0 auto; display:flex; align-items:center;padding:0px;
    justify-content:center; font-size:14px; font-weight:700; background:#f1f4f9; overflow:hidden; color:var(--ink);
  }
  .idx-flag img{ width:100%; height:100%; object-fit:cover; }
  .idx-info{ flex:1; min-width:0; font-family: 'Roboto Flex';}
  .idx-name{ font-size:16px; font-weight:500; color:var(--ink); white-space:nowrap;margin-bottom:10px; }
  .idx-name i{ font-size:.6rem; color:var(--muted); margin-left:3px; vertical-align:super; }
  .idx-points{ font-size: 14px;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    white-space: nowrap;
    font-weight: 600; }
  .idx-points small{ color:var(--muted); font-weight:400; }
  .idx-chg {
    font-size: 14px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    font-family: 'Roboto';
}
  .idx-chg.up{ background:var(--up-bg); color:var(--up); }
  .idx-chg.down{ background:var(--down-bg); color:var(--down); }

  .idx-scroll-arrow{
    width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center; color:var(--muted); flex:0 0 auto;
  }
  button#idxScrollLeft {
    position: absolute;
    left: -15px;
}
button#idxScrollRight {
    position: absolute;
    right: -15px;
}
  /* ===================== COMMUNITY TRENDS ===================== */
  .trend-scroll{ display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; padding-bottom:4px; }
  .trend-scroll::-webkit-scrollbar{ display:none; }
  .trend-card{
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px;
    min-width:210px; max-width:250px; flex:0 0 auto; display:flex; gap:10px;
  }
  .trend-card > div{
    min-width:0;
    flex:1;
  }
  .trend-card a{
    color:inherit;
    text-decoration:none;
  }

  .trend-icon{
    width:34px; height:34px; border-radius:120px; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:.7rem; flex:0 0 auto; position:relative; overflow:hidden;
  }
  .trend-icon img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
  .trend-name{ font-size:16px; font-weight:700; color:var(--ink); }
  .trend-name i{ font-size:.62rem; color:var(--muted); margin-left:2px; }
  .trend-sub{
    font-size:.72rem; color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
  }
  .trend-price{     font-size: 14px;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600; }
  .scroll-arrow{
    width:34px; height:34px; border:1px solid var(--line); border-radius:50%; background:#fff;
    display:flex; align-items:center; justify-content:center; color:var(--muted); flex:0 0 auto;
  }
  .community-scroll-wrap {
    position:relative;
}
#trendScrollLeft{
    position: absolute;
    left: -15px;
}
#trendScrollRight{
    position: absolute;
    right: -15px;
}

  /* ===================== STOCK TABLES ===================== */
  .stock-table-card{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
  .stock-table{ margin:0; }
  .stock-table thead th{
    font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color:var(--muted); border-bottom:1px solid var(--line); padding:12px 18px; white-space:nowrap;
  }
  .stock-table tbody td{
    padding:12px 18px; vertical-align:middle; border-bottom:0px; white-space:nowrap;
  }
  .stock-table tbody tr:last-child td{ border-bottom:0; }
  .stock-table tbody tr:hover td{ background:#fafbfc; }

  .stock-cell{ display:flex; align-items:center; gap:12px; }
  .stock-icon{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:.7rem; flex:0 0 auto; position:relative; overflow:hidden;
  }
  .stock-icon img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#fff; }
  .stock-icon.light{ background:#f1f4f9; color:var(--ink); }
  .stock-name{ font-size:16px; font-weight:500; color:var(--ink);font-family: 'Roboto'; }
  .stock-name i{ font-size:.62rem; color:var(--muted); margin-left:2px; }
  .stock-ticker{ font-size:.72rem; color:var(--muted); }
  .stock-price{ font-size:.85rem; font-weight:600; }
  .stock-price small{ font-size:.68rem; color:var(--muted); font-weight:400; margin-left:2px; }

  /* ===================== 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); }
  .news-columns{
    column-count:2;
    column-gap:32px;
  }
  .news-list-item {
    display: flex;
    gap: 12px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    break-inside: avoid;
}
  .news-list-item:last-child{ 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; }


/* ===================== INFO / DELAYED-DATA TOOLTIP BADGE ===================== */
.info-badge {
    display: inline-flex;
    align-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #EDEFF7;
    color: #5C6B9E;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    margin-left: 4px;
    cursor: pointer;
    vertical-align: middle;
    line-height: 1;
    flex: 0 0 auto;
    margin-bottom: 11px;
    justify-content: center;
    text-align: center;
    padding: 0px;
}
  .info-badge:hover{ background:#dfe3f0; }

  /* Bootstrap tooltip theming to match a clean light popover */
  .tooltip-inner{
    background:#1c2430;
    color:#fff;
    font-size:.78rem;
    padding:6px 10px;
    border-radius:6px;
    max-width:220px;
  }
  .tooltip .tooltip-arrow::before{ border-top-color:#1c2430; }
  @media (max-width: 767.98px){
    .news-columns{ column-count:1; }
    .stock-table tbody td {
    padding: 10px;
}
.stock-name {
    width: 100px;
    min-width: 100px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
  }

.markets-legal-disclaimer {
  margin-top: 8px;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid #e1e6ee;
  border-radius: 14px;
  color: #53657f;
  font-size: .85rem;
  line-height: 1.7;
}

.markets-legal-disclaimer p + p {
  margin-top: 14px;
}