/* the card must NOT be a scroll container, so the sticky bar can pin to the page */
  .tt-card{ overflow:visible !important; }

  /* the real horizontal scroller now lives on an inner wrapper */
  .tt-viewport{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    max-width:100% !important;
  }
  .tt-viewport > table{
    width:max-content !important;
    min-width:100% !important;
    white-space:nowrap !important;
    display:table !important;
  }
  /* hide the wrapper's own (bottom) scrollbar — the TOP bar is the control */
  .tt-viewport::-webkit-scrollbar{ height:0 !important; width:0 !important; }
  .tt-viewport{ scrollbar-width:none !important; -ms-overflow-style:none !important; }

  /* the sticky scrollbar that sits on top of the table */
  .tt-scrollbar{
    position:sticky;
    top:0;
    z-index:45;
    overflow-x:auto;
    overflow-y:hidden;
    height:15px;
    margin:0 0 8px 0;
    background:rgba(13,13,24,0.94);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border:1px solid rgba(60,48,110,0.7);
    border-radius:8px;
  }
  .tt-scrollbar .tt-spacer{ height:1px; }
  /* make the top bar's thumb clearly visible & easy to grab (overrides global 4px) */
  .tt-scrollbar::-webkit-scrollbar{ height:11px !important; }
  .tt-scrollbar::-webkit-scrollbar-track{ background:transparent !important; }
  .tt-scrollbar::-webkit-scrollbar-thumb{ background:#5B4BD0 !important; border-radius:6px !important; }
  .tt-scrollbar::-webkit-scrollbar-thumb:hover{ background:#7C5CFC !important; }
  .tt-scrollbar{ scrollbar-width:thin !important; scrollbar-color:#5B4BD0 transparent !important; }

  /* on mobile a fixed 52px app-bar covers the very top, so drop below it */
  @media (max-width:768px){
    .tt-scrollbar{ top:calc(52px + env(safe-area-inset-top, 0px)) !important; }
  }