body.help-modal-open{
      overflow: hidden;
    }

    .dataset-help-overlay{
      position: fixed;
      inset: 0;
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 18px;
      background: rgba(16, 24, 40, 0.20);
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }

    .dataset-help-overlay.is-visible{
      display: flex;
    }

    .dataset-help-modal{
      width: min(98vw, 1280px);
      max-height: min(88vh, 840px);
      display: flex;
      flex-direction: column;
      background: rgba(255,255,255,0.97);
      border: 1px solid rgba(0,0,0,0.07);
      border-radius: 18px;
      box-shadow:
        0 12px 30px rgba(0,0,0,0.08),
        0 2px 8px rgba(0,0,0,0.05);
      overflow: hidden;
      font-family: var(--font-body, "DM Sans", sans-serif);
      color: #2b3137;
    }

    /* ================= HEADER ================= */

    .dataset-help-header{
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "kicker actions"
        "title  actions"
        "sub    actions";
      column-gap: 20px;
      row-gap: 6px;
      padding: 22px 26px 18px;
      border-bottom: 1px solid rgba(0,0,0,0.06);
      background: rgba(255,255,255,0.90);
      flex: 0 0 auto;
      align-items: start;
    }

    .dataset-help-actions{
      grid-area: actions;
      display: flex;
      gap: 14px;
      align-items: center;
      justify-self: end;
      align-self: start;
      white-space: nowrap;
      margin-top: 2px;
    }

    .dataset-help-dismiss,
    .dataset-help-close{
      appearance: none;
      border: none;
      background: transparent;
      cursor: pointer;
      font-family: inherit;
      color: var(--primary-color, #123049);
      padding: 0;
    }

    .dataset-help-dismiss{
      font-size: 0.92rem;
      line-height: 1.2;
      text-decoration: underline;
      text-underline-offset: 2px;
      white-space: nowrap;
    }

    .dataset-help-close{
      font-size: 1.45rem;
      line-height: 1;
      font-weight: 700;
    }

    .dataset-help-kicker{
      grid-area: kicker;
      margin: 0;
      font-size: 0.84rem;
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--primary-color, #123049);
    }

    .dataset-help-title{
      grid-area: title;
      margin: 0;
      font-size: 2.05rem;
      line-height: 1.05;
      font-weight: 700;
      color: #2b3137;
    }

    .dataset-help-subtitle{
      grid-area: sub;
      margin: 0;
      max-width: none;
      font-size: 1rem;
      line-height: 1.4;
      color: rgba(0,0,0,0.65);
      min-width: 0;
    }

    /* ================= BODY ================= */

    .dataset-help-body{
      flex: 1 1 auto;
      min-height: 0;
      padding: 18px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .dataset-help-grid{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-items: start;
      flex: 0 0 auto;
    }

    .dataset-help-card{
      display: grid;
      grid-template-rows: auto auto auto;
      gap: 12px;
      padding: 12px;
      background: rgba(255,255,255,0.86);
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 14px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.035);
      min-width: 0;
      overflow: visible;
    }

    /* image area — no blue box look */
    .dataset-help-media{
      min-width: 0;
      height: 210px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
    }

    .dataset-help-media img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
    }

    .dataset-help-card-title{
      margin: 0;
      font-size: 1.04rem;
      line-height: 1.2;
      font-weight: 700;
      color: #2b3137;
    }

    .dataset-help-points{
      display: grid;
      gap: 7px;
      align-content: start;
      min-width: 0;
    }

    .dataset-help-point{
      display: grid;
      grid-template-columns: 10px minmax(0, 1fr);
      column-gap: 9px;
      align-items: start;
      min-width: 0;
    }

    .dataset-help-point-dot{
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #2b6f97;
      margin-top: 0.48rem;
    }

    .dataset-help-point-text{
      margin: 0;
      font-size: 0.97rem;
      line-height: 1.4;
      color: #2b3137;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .dataset-help-footer{
      margin: 0;
      padding-top: 8px;
      border-top: 1px solid rgba(0,0,0,0.06);
      font-size: 0.82rem;
      line-height: 1.35;
      color: rgba(0,0,0,0.58);
      flex: 0 0 auto;
      background: rgba(255,255,255,0.97);
    }

    /* ================= RESPONSIVE ================= */

    @media (max-width: 1120px){
      .dataset-help-modal{
        max-height: 90vh;
      }

      .dataset-help-grid{
        grid-template-columns: 1fr;
      }

      .dataset-help-media{
        height: 240px;
      }
    }

    @media (max-width: 760px){
      .dataset-help-overlay{
        padding: 12px;
      }

      .dataset-help-modal{
        width: 100%;
        max-height: 92vh;
      }

      .dataset-help-header{
        grid-template-columns: 1fr;
        grid-template-areas:
          "actions"
          "kicker"
          "title"
          "sub";
        row-gap: 8px;
        padding: 18px 18px 14px;
      }

      .dataset-help-actions{
        justify-self: end;
        margin: 0 0 2px 0;
      }

      .dataset-help-title{
        font-size: 1.65rem;
      }

      .dataset-help-subtitle{
        font-size: 0.95rem;
      }

      .dataset-help-body{
        padding: 14px;
      }

      .dataset-help-point-text{
        font-size: 0.92rem;
      }

      .dataset-help-media{
        height: 200px;
      }
    }

    .ui-show-popup-btn{
      margin-top: 10px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--primary-color);
      font: 500 0.82rem/1.2 var(--font-body);
      text-decoration: underline;
      cursor: pointer;
    }

    .ui-show-popup-btn:hover{
      opacity: 0.8;
    }