.code-container {
      background-color: #1e1e1e;
      color: #d4d4d4;
      padding: 1rem;
      border-radius: 8px;
      overflow-x: auto;
      max-width: 100%;
      font-family: 'Courier New', Courier, monospace;
      font-size: 14px;
      line-height: 1.5;
      text-align: left!important;
      height: 150px;
    }

    pre {
      margin: 0;
    }

    /* Optional scrollbar styling */
    .code-container::-webkit-scrollbar {
      height: 8px;
    }

    .code-container::-webkit-scrollbar-track {
      background: #333;
    }

    .code-container::-webkit-scrollbar-thumb {
      background: #888;
      border-radius: 4px;
    }

    .code-container::-webkit-scrollbar-thumb:hover {
      background: #555;
    }

    /* --- card container --- */
  .quickstart-card {
    display: flex;
    gap: 2rem;
    background: #242424;
    color: #f1f1f1;
    padding: 1.75rem 2rem;
    border-radius: 12px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    width: 100%;
    margin: 2rem auto;
  }

  /* --- left pane --- */
  .qs-info {
    flex: 0 0 240px;
  }
  .qs-info h3 {
    margin: 0 0 0.75rem 0;
    font-size: 1.25rem;
    font-weight: 600;
  }
  .qs-info p {
    margin: 0 0 1.25rem 0;
    line-height: 1.4;
    font-size: 0.95rem;
    color: #c5c5c5;
  }
  .qs-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #a4a4a4;
  }
  .qs-tag svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
  }

  /* --- code pane --- */
  pre {
    flex: 1 1 auto;
    background: #0d0d0d;
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    position: relative;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
  }
  /* copy button */
  .copy-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 4px;
  }
  .copy-btn svg {
    width: 18px;
    height: 18px;
    fill: #8b8b8b;
    transition: fill 0.3s;
  }
  .copy-btn:hover svg { fill: #e6e6e6; }

  /* basic token colours */
  .kw   { color: #c586c0; }  /* keyword */
  .func { color: #dcdcaa; }  /* function / class */
  .str  { color: #ce9178; }  /* string  */
  .num  { color: #b5cea8; }  /* number  */
  .com  { color: #6a9955; }  /* comment */


    /* optional styling — remove if your site already sets these */
  .flow-diagram {
    font-family: "Courier New", monospace;
    padding: 0;
    font-size: 18px;;
    white-space: pre;
    line-height: 1.35;
    overflow-x: auto;
    background-color: #000000;
    padding:10px;
    border-radius: 8px;
  }

  /* make the developer sidebar 1000 px wide on all breakpoints */
  #devSidebar { --bs-offcanvas-width: 100%; }

  /* ⬇︎ optional: wider only on ≥ lg screens, keep default on mobile */
  @media (min-width: 992px) {
    #devSidebar { --bs-offcanvas-width: 100%; }
  }

    /* ---- wrapper ---- */
  .zoom-wrap {
    max-width: 500px;           /* whatever size you like */
    height: auto;
    overflow: hidden;       /* hide the part that scales past the border */
    border-radius: 8px;     /* optional rounded corners */
  }

  /* ---- image ---- */
  .zoom-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* fill the box, crop if needed */
    transition: transform 0.4s ease;
  }

  /* ---- zoom effect ---- */
  .zoom-wrap:hover img {
    transform: scale(1.5);  /* 1.1 = gentle, 1.3 = stronger */
  }

    /* responsive 16:9 wrapper */
  .video-frame {
    position: relative;
    width: 100%;   /* optional cap */
    overflow: hidden;
    border-radius: 8px;
  }

  .video-frame video {
    position: relative;
    top: 0; left: 0;
    padding: 15px;
    width: 100%; height: 300px;
    object-fit: cover;      /* crop if aspect ratio differs */
    background: #24242424;
        border-radius: 8px;
        border: #000000 solid 2px;
  }

aside {
  position: fixed;
  top: 0; bottom: 0;
  width: 500px;
  background: #111;
  overflow: auto;
  transition: transform .3s ease;
  z-index: 1040;
}
#tv-sidebar         { left: 0;  transform: translateX(-100%); }
#screener-sidebar   { right: 0; transform: translateX(100%); }

aside:not(.collapsed) {
  transform: translateX(0) !important;
}
/* ——— Layout: 3 cards per row, responsive ——— */
.flow-card{
  margin:.5rem;
  border:none;
  border-radius:.75rem;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  position:relative;
  overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease;
  width: 32%;
}
@media(max-width:991.98px){      /* tablets: 2-across */
  .flow-card{width:50%; margin:1.5rem;}
}
@media(max-width:575.98px){      /* phones: full width */
  .flow-card{width:100%}
}

/* ——— Hover accent (bright-orange corner) ——— */
.flow-card::after{
  content:"";
  position:absolute;
  top:0;right:0;
  width:0;height:0;
  border-top:0 solid transparent;
  border-right:0 solid transparent;
  transition:border-width .25s ease;
}
.flow-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  border-top:1px solid #3aa2df;         /* blue lift outline */
  border-right:1px solid #3aa2df;
}
.flow-card:hover::after{
  border-top:8px solid #ff7a00;         /* bright-orange corner */
  border-right:8px solid #ff7a00;
}
.flow-card:hover .card-title{color:#3aa2df;} 

/* ——— Direction arrows (pipeline feel) ——— */
.flow-card:not(:last-child)::before{
  content:"";
  position:absolute;
  top:50%;
  right:-.75rem;                        /* sits in the card gap */
  width:.6rem;height:.6rem;
  border-right:2px solid #ff7a00;       /* shaft colour */
  border-bottom:2px solid #ff7a00;
  transform:translateY(-50%) rotate(-45deg); /* ➡ arrow */
}
@media(max-width:991.98px){             /* on tablet/phone use ↓ arrow */
  .flow-card:not(:last-child)::before{
    top:auto;right:50%;left:50%;bottom:-.75rem;
    transform:translateX(-50%) rotate(45deg); /* ↓ arrow */
  }
}

/* ——— Typography tweaks ——— */
.flow-card-title{font-size:1.1rem;font-weight:600;margin-bottom:.4rem;color: #ff7a00;}
.flow-card-text{line-height:1.5;color:#dddddd}

@media(prefers-color-scheme:dark){
  .flow-card{
    background:#1f2937;color:#d1d5db;
    box-shadow:0 4px 10px rgba(0,0,0,.35)
  }
  .flow-card-title{color:#f9fafb}
  .flow-card-text{color:#cbd5e1}
}
/* hide side-panels on small screens */
@media (max-width: 768px) {
  /* completely remove the Markets & Screener panes */
  #tv-sidebar,
  #screener-sidebar, #header-widget, #reporting-img {
    display: none !important;
  }
  .flow-card { width: 100%;}

}
@media (max-width: 600px) {
  .stack-table,                   /* safety */
  .stack-table tbody,
  .stack-table tr        {display:block;width:100%;}
  .stack-table td        {
    display:block;        /* stack */
    width:100%;
    padding:10px 0;       /* tighten */
    border:none;          /* kill cell borders if any */
  }
  .stack-table tr + tr    {margin-top:1rem;}  /* space between rows */
}